diff --git a/web/ui/mantine-ui/src/pages/targets/ScrapePoolsList.tsx b/web/ui/mantine-ui/src/pages/targets/ScrapePoolsList.tsx index 7423fd8a72..fbd710a412 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 ScrapeTimingDetails from "./ScrapeTimingDetails"; 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 - )} - - - + = ({ target }) => { + const [showDetails, { toggle: toggleDetails }] = useDisclosure(false); + + return ( + + + + + } + > + {humanizeDurationRelative(target.lastScrape, now())} + + + + + } + > + {humanizeDuration(target.lastScrapeDuration * 1000)} + + + + + + {showDetails ? ( + + ) : ( + + )} + + + + + {/* Additionally remove DOM elements when not expanded (helps performance) */} + {showDetails && ( + + + } + > + every {target.scrapeInterval} + + + + } + > + after {target.scrapeTimeout} + + + + )} + + + ); +}; + +export default ScrapeTimingDetails;