root
/
prometheus
mirror of https://github.com/prometheus/prometheus.git
1
0
Fork 0
Code Issues Actions 3 Packages Projects Releases Wiki Activity

Merge pull request #17158 from ADITYATIWARI342005/feature-scrape_duration
buf.build / lint and publish (push) Waiting to run Details
CI / Go tests (push) Waiting to run Details
CI / More Go tests (push) Waiting to run Details
CI / Go tests with previous Go version (push) Waiting to run Details
CI / UI tests (push) Waiting to run Details
CI / Go tests on Windows (push) Waiting to run Details
CI / Mixins tests (push) Waiting to run Details
CI / Build Prometheus for common architectures (0) (push) Waiting to run Details
CI / Build Prometheus for common architectures (1) (push) Waiting to run Details
CI / Build Prometheus for common architectures (2) (push) Waiting to run Details
CI / Build Prometheus for all architectures (0) (push) Waiting to run Details
CI / Build Prometheus for all architectures (1) (push) Waiting to run Details
CI / Build Prometheus for all architectures (10) (push) Waiting to run Details
CI / Build Prometheus for all architectures (11) (push) Waiting to run Details
CI / Build Prometheus for all architectures (2) (push) Waiting to run Details
CI / Build Prometheus for all architectures (3) (push) Waiting to run Details
CI / Build Prometheus for all architectures (4) (push) Waiting to run Details
CI / Build Prometheus for all architectures (5) (push) Waiting to run Details
CI / Build Prometheus for all architectures (6) (push) Waiting to run Details
CI / Build Prometheus for all architectures (7) (push) Waiting to run Details
CI / Build Prometheus for all architectures (8) (push) Waiting to run Details
CI / Build Prometheus for all architectures (9) (push) Waiting to run Details
CI / Report status of build Prometheus for all architectures (push) Blocked by required conditions Details
CI / Check generated parser (push) Waiting to run Details
CI / golangci-lint (push) Waiting to run Details
CI / fuzzing (push) Waiting to run Details
CI / codeql (push) Waiting to run Details
CI / Publish main branch artifacts (push) Blocked by required conditions Details
CI / Publish release artefacts (push) Blocked by required conditions Details
CI / Publish UI on npm Registry (push) Blocked by required conditions Details
Scorecards supply-chain security / Scorecards analysis (push) Waiting to run Details 

[FEATURE] : Add {scrape interval + timeout} to targets page
This commit is contained in:
Julius Volz 2025-09-29 19:59:37 +02:00 committed by GitHub
parent c9e0e36701 3ef9f4e18a
commit 536a2b1fd2
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 103 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

57
web/ui/mantine-ui/src/pages/targets/ScrapePoolsList.tsx
View File

@ -8,23 +8,15 @@ import {
Stack, Stack,
Table, Table,
Text, Text,
Tooltip,
} from "@mantine/core"; } from "@mantine/core";
import { KVSearch } from "@nexucis/kvsearch"; import { KVSearch } from "@nexucis/kvsearch";
import { import {
IconAlertTriangle, IconAlertTriangle,
IconHourglass,
IconInfoCircle, IconInfoCircle,
IconRefresh,
} from "@tabler/icons-react"; } from "@tabler/icons-react";
import { useSuspenseAPIQuery } from "../../api/api"; import { useSuspenseAPIQuery } from "../../api/api";
import { Target, TargetsResult } from "../../api/responseTypes/targets"; import { Target, TargetsResult } from "../../api/responseTypes/targets";
import React, { FC, memo, useMemo } from "react"; import React, { FC, memo, useMemo } from "react";
import {
humanizeDurationRelative,
humanizeDuration,
now,
} from "../../lib/formatTime";
import { useLocalStorage } from "@mantine/hooks"; import { useLocalStorage } from "@mantine/hooks";
import { useAppDispatch, useAppSelector } from "../../state/hooks"; import { useAppDispatch, useAppSelector } from "../../state/hooks";
import { import {
@ -37,8 +29,8 @@ import CustomInfiniteScroll from "../../components/CustomInfiniteScroll";
import badgeClasses from "../../Badge.module.css"; import badgeClasses from "../../Badge.module.css";
import panelClasses from "../../Panel.module.css"; import panelClasses from "../../Panel.module.css";
import TargetLabels from "./TargetLabels"; import TargetLabels from "./TargetLabels";
import ScrapeTimingDetails from "./ScrapeTimingDetails";
import { targetPoolDisplayLimit } from "./TargetsPage"; import { targetPoolDisplayLimit } from "./TargetsPage";
import { badgeIconStyle } from "../../styles";
type ScrapePool = { type ScrapePool = {
targets: Target[]; targets: Target[];
@ -332,52 +324,7 @@ const ScrapePoolList: FC<ScrapePoolListProp> = memo(
/> />
</Table.Td> </Table.Td>
<Table.Td valign="top"> <Table.Td valign="top">
<Group gap="xs" wrap="wrap"> <ScrapeTimingDetails target={target} />
<Tooltip
label="Last target scrape"
withArrow
>
<Badge
variant="light"
className={badgeClasses.statsBadge}
styles={{
label: { textTransform: "none" },
}}
leftSection={
<IconRefresh
style={badgeIconStyle}
/>
}
>
{humanizeDurationRelative(
target.lastScrape,
now()
)}
</Badge>
</Tooltip>
<Tooltip
label="Duration of last target scrape"
withArrow
>
<Badge
variant="light"
className={badgeClasses.statsBadge}
styles={{
label: { textTransform: "none" },
}}
leftSection={
<IconHourglass
style={badgeIconStyle}
/>
}
>
{humanizeDuration(
target.lastScrapeDuration * 1000
)}
</Badge>
</Tooltip>
</Group>
</Table.Td> </Table.Td>
<Table.Td valign="top"> <Table.Td valign="top">
<Badge <Badge

101
web/ui/mantine-ui/src/pages/targets/ScrapeTimingDetails.tsx Normal file
View File

@ -0,0 +1,101 @@
import { FC } from "react";
import { ActionIcon, Badge, Collapse, Group, Stack, Tooltip } from "@mantine/core";
import { useDisclosure } from "@mantine/hooks";
import {
IconChevronDown,
IconChevronUp,
IconHourglass,
IconPlugConnectedX,
IconRefresh,
IconRepeat,
} from "@tabler/icons-react";
import { humanizeDuration, humanizeDurationRelative, now } from "../../lib/formatTime";
import { Target } from "../../api/responseTypes/targets";
import badgeClasses from "../../Badge.module.css";
import { actionIconStyle, badgeIconStyle } from "../../styles";
type ScrapeTimingDetailsProps = {
target: Target;
};
const ScrapeTimingDetails: FC<ScrapeTimingDetailsProps> = ({ target }) => {
const [showDetails, { toggle: toggleDetails }] = useDisclosure(false);
return (
<Stack gap="xs">
<Group wrap="nowrap" align="flex-start">
<Group gap="xs" wrap="wrap">
<Tooltip label="Last target scrape" withArrow>
<Badge
variant="light"
className={badgeClasses.statsBadge}
styles={{
label: { textTransform: "none" },
}}
leftSection={<IconRefresh style={badgeIconStyle} />}
>
{humanizeDurationRelative(target.lastScrape, now())}
</Badge>
</Tooltip>
<Tooltip label="Duration of last target scrape" withArrow>
<Badge
variant="light"
className={badgeClasses.statsBadge}
styles={{
label: { textTransform: "none" },
}}
leftSection={<IconHourglass style={badgeIconStyle} />}
>
{humanizeDuration(target.lastScrapeDuration * 1000)}
</Badge>
</Tooltip>
</Group>
<ActionIcon
size="xs"
color="gray"
variant="light"
onClick={toggleDetails}
title={`${showDetails ? "Hide" : "Show"} additional timing info`}
>
{showDetails ? (
<IconChevronUp style={actionIconStyle} />
) : (
<IconChevronDown style={actionIconStyle} />
)}
</ActionIcon>
</Group>
<Collapse in={showDetails}>
{/* Additionally remove DOM elements when not expanded (helps performance) */}
{showDetails && (
<Group gap="xs" wrap="wrap">
<Tooltip label="Scrape interval" withArrow>
<Badge
variant="light"
className={badgeClasses.statsBadge}
styles={{ label: { textTransform: "none" } }}
leftSection={<IconRepeat style={badgeIconStyle} />}
>
every {target.scrapeInterval}
</Badge>
</Tooltip>
<Tooltip label="Scrape timeout" withArrow>
<Badge
variant="light"
className={badgeClasses.statsBadge}
styles={{ label: { textTransform: "none" } }}
leftSection={<IconPlugConnectedX style={badgeIconStyle} />}
>
after {target.scrapeTimeout}
</Badge>
</Tooltip>
</Group>
)}
</Collapse>
</Stack>
);
};
export default ScrapeTimingDetails;