From 8eb875892508910fe9b3e222ec5a908d37d0c7c7 Mon Sep 17 00:00:00 2001 From: ADITYATIWARI342005 <142050150+ADITYATIWARI342005@users.noreply.github.com> Date: Sun, 28 Sep 2025 01:18:26 +0530 Subject: [PATCH 1/2] ui: Add expandable scrape interval and timeout to targets page Implements expand/collapse functionality for displaying final scrape configuration (interval + timeout) in the targets page timing column. - Add ScrapeDetails component with expand/collapse chevron - Keep existing "Last Scrape" and "Scrape Duration" badges always visible - Display "Scrape interval: every \" and "Scrape timeout: after \" when expanded - Use IconRepeat for interval and IconPlugConnectedX for timeout - Follow TargetLabels.tsx pattern for consistency - Implement performance optimization with conditional DOM rendering - Maintain existing hover tooltip functionality Signed-off-by: ADITYATIWARI342005 <142050150+ADITYATIWARI342005@users.noreply.github.com> --- .../src/pages/targets/ScrapeDetails.tsx | 109 ++++++++++++++++++ .../src/pages/targets/ScrapePoolsList.tsx | 57 +-------- 2 files changed, 111 insertions(+), 55 deletions(-) create mode 100644 web/ui/mantine-ui/src/pages/targets/ScrapeDetails.tsx diff --git a/web/ui/mantine-ui/src/pages/targets/ScrapeDetails.tsx b/web/ui/mantine-ui/src/pages/targets/ScrapeDetails.tsx new file mode 100644 index 0000000000..cac0f8c81d --- /dev/null +++ b/web/ui/mantine-ui/src/pages/targets/ScrapeDetails.tsx @@ -0,0 +1,109 @@ +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 ScrapeDetailsProps = { + target: Target; +}; + +const ScrapeDetails: FC = ({ target }) => { + const [showDetails, { toggle: toggleDetails }] = useDisclosure(false); + + return ( + + + + + } + > + {humanizeDurationRelative(target.lastScrape, now())} + + + + +
Interval: {target.scrapeInterval}
+
Timeout: {target.scrapeTimeout}
+ + } + withArrow + > + } + > + {humanizeDuration(target.lastScrapeDuration * 1000)} + + + + + + {showDetails ? ( + + ) : ( + + )} + + + + + {/* Additionally remove DOM elements when not expanded (helps performance) */} + {showDetails && ( + + + } + > + every {target.scrapeInterval} + + + + } + > + after {target.scrapeTimeout} + + + + )} + + + ); +}; + +export default ScrapeDetails; diff --git a/web/ui/mantine-ui/src/pages/targets/ScrapePoolsList.tsx b/web/ui/mantine-ui/src/pages/targets/ScrapePoolsList.tsx index 7423fd8a72..35e1a2e89f 100644 --- a/web/ui/mantine-ui/src/pages/targets/ScrapePoolsList.tsx +++ b/web/ui/mantine-ui/src/pages/targets/ScrapePoolsList.tsx @@ -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 ScrapeDetails from "./ScrapeDetails"; import { targetPoolDisplayLimit } from "./TargetsPage"; -import { badgeIconStyle } from "../../styles"; type ScrapePool = { targets: Target[]; @@ -332,52 +324,7 @@ const ScrapePoolList: FC = memo( /> - - - - } - > - {humanizeDurationRelative( - target.lastScrape, - now() - )} - - - - - - } - > - {humanizeDuration( - target.lastScrapeDuration * 1000 - )} - - - + Date: Mon, 29 Sep 2025 20:45:52 +0530 Subject: [PATCH 2/2] =?UTF-8?q?ui:=20rename=20ScrapeDetails=E2=86=92Scrape?= =?UTF-8?q?TimingDetails;=20refine=20labels=20per=20review=20Rename=20comp?= =?UTF-8?q?onent=20for=20clarity=20(timing-only=20focus)=20Chevron=20title?= =?UTF-8?q?:=20=E2=80=9CShow/Hide=20additional=20timing=20info=E2=80=9D=20?= =?UTF-8?q?Duration=20pill=20tooltip:=20=E2=80=9CDuration=20of=20last=20ta?= =?UTF-8?q?rget=20scrape=E2=80=9D=20Update=20imports/usages;=20keep=20DOM-?= =?UTF-8?q?conditional=20expanded=20content?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: ADITYATIWARI342005 <142050150+ADITYATIWARI342005@users.noreply.github.com> --- .../src/pages/targets/ScrapePoolsList.tsx | 4 ++-- ...rapeDetails.tsx => ScrapeTimingDetails.tsx} | 18 +++++------------- 2 files changed, 7 insertions(+), 15 deletions(-) rename web/ui/mantine-ui/src/pages/targets/{ScrapeDetails.tsx => ScrapeTimingDetails.tsx} (86%) diff --git a/web/ui/mantine-ui/src/pages/targets/ScrapePoolsList.tsx b/web/ui/mantine-ui/src/pages/targets/ScrapePoolsList.tsx index 35e1a2e89f..fbd710a412 100644 --- a/web/ui/mantine-ui/src/pages/targets/ScrapePoolsList.tsx +++ b/web/ui/mantine-ui/src/pages/targets/ScrapePoolsList.tsx @@ -29,7 +29,7 @@ import CustomInfiniteScroll from "../../components/CustomInfiniteScroll"; import badgeClasses from "../../Badge.module.css"; import panelClasses from "../../Panel.module.css"; import TargetLabels from "./TargetLabels"; -import ScrapeDetails from "./ScrapeDetails"; +import ScrapeTimingDetails from "./ScrapeTimingDetails"; import { targetPoolDisplayLimit } from "./TargetsPage"; type ScrapePool = { @@ -324,7 +324,7 @@ const ScrapePoolList: FC = memo( /> - + = ({ target }) => { +const ScrapeTimingDetails: FC = ({ target }) => { const [showDetails, { toggle: toggleDetails }] = useDisclosure(false); return ( @@ -38,15 +38,7 @@ const ScrapeDetails: FC = ({ target }) => { - -
Interval: {target.scrapeInterval}
-
Timeout: {target.scrapeTimeout}
- - } - withArrow - > + = ({ target }) => { color="gray" variant="light" onClick={toggleDetails} - title={`${showDetails ? "Hide" : "Show"} scrape configuration details`} + title={`${showDetails ? "Hide" : "Show"} additional timing info`} > {showDetails ? ( @@ -106,4 +98,4 @@ const ScrapeDetails: FC = ({ target }) => { ); }; -export default ScrapeDetails; +export default ScrapeTimingDetails;