mirrors/prometheus
1
0
Fork 0
mirror of https://github.com/prometheus/prometheus.git synced 2026-05-05 12:26:14 +02:00
Code Issues Projects Releases Wiki Activity

Merge pull request #17158 from ADITYATIWARI342005/feature-scrape_duration

Browse Source 
[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
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,
Table,
Text,
Tooltip,
} from "@mantine/core";
import { KVSearch } from "@nexucis/kvsearch";
import {
IconAlertTriangle,
IconHourglass,
IconInfoCircle,
IconRefresh,
} from "@tabler/icons-react";
import { useSuspenseAPIQuery } from "../../api/api";
import { Target, TargetsResult } from "../../api/responseTypes/targets";
import React, { FC, memo, useMemo } from "react";
import {
humanizeDurationRelative,
humanizeDuration,
now,
} from "../../lib/formatTime";
import { useLocalStorage } from "@mantine/hooks";
import { useAppDispatch, useAppSelector } from "../../state/hooks";
import {
@ -37,8 +29,8 @@ import CustomInfiniteScroll from "../../components/CustomInfiniteScroll";
import badgeClasses from "../../Badge.module.css";
import panelClasses from "../../Panel.module.css";
import TargetLabels from "./TargetLabels";
import ScrapeTimingDetails from "./ScrapeTimingDetails";
import { targetPoolDisplayLimit } from "./TargetsPage";
import { badgeIconStyle } from "../../styles";
type ScrapePool = {
targets: Target[];
@ -332,52 +324,7 @@ const ScrapePoolList: FC<ScrapePoolListProp> = memo(
/>
</Table.Td>
<Table.Td valign="top">
<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>
<ScrapeTimingDetails target={target} />
</Table.Td>
<Table.Td valign="top">
<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;