diff --git a/web/ui/mantine-ui/src/pages/targets/TargetsPage.tsx.copy b/web/ui/mantine-ui/src/pages/targets/TargetsPage.tsx.copy deleted file mode 100644 index 3b7bf2d65..000000000 --- a/web/ui/mantine-ui/src/pages/targets/TargetsPage.tsx.copy +++ /dev/null @@ -1,355 +0,0 @@ -import { - Accordion, - ActionIcon, - Alert, - Badge, - Group, - Input, - RingProgress, - Select, - Stack, - Table, - Text, -} from "@mantine/core"; -import { - IconAlertTriangle, - IconInfoCircle, - IconLayoutNavbarCollapse, - IconLayoutNavbarExpand, - IconSearch, -} from "@tabler/icons-react"; -import { StateMultiSelect } from "../../components/StateMultiSelect"; -import { useSuspenseAPIQuery } from "../../api/api"; -import { ScrapePoolsResult } from "../../api/responseTypes/scrapePools"; -import { Target, TargetsResult } from "../../api/responseTypes/targets"; -import React, { useEffect } from "react"; -import badgeClasses from "../../Badge.module.css"; -import { - humanizeDurationRelative, - humanizeDuration, - now, -} from "../../lib/formatTime"; -import { LabelBadges } from "../../components/LabelBadges"; -import { useAppDispatch, useAppSelector } from "../../state/hooks"; -import { - setCollapsedPools, - updateTargetFilters, -} from "../../state/targetsPageSlice"; -import EndpointLink from "../../components/EndpointLink"; -import CustomInfiniteScroll from "../../components/CustomInfiniteScroll"; -import { filter } from "lodash"; - -type ScrapePool = { - targets: Target[]; - upCount: number; - downCount: number; - unknownCount: number; -}; - -type ScrapePools = { - [scrapePool: string]: ScrapePool; -}; - -const healthBadgeClass = (state: string) => { - switch (state.toLowerCase()) { - case "up": - return badgeClasses.healthOk; - case "down": - return badgeClasses.healthErr; - case "unknown": - return badgeClasses.healthUnknown; - default: - return badgeClasses.warn; - } -}; - -const groupTargets = (targets: Target[]): ScrapePools => { - const pools: ScrapePools = {}; - targets.forEach((target) => { - if (!pools[target.scrapePool]) { - pools[target.scrapePool] = { - targets: [], - upCount: 0, - downCount: 0, - unknownCount: 0, - }; - } - pools[target.scrapePool].targets.push(target); - switch (target.health.toLowerCase()) { - case "up": - pools[target.scrapePool].upCount++; - break; - case "down": - pools[target.scrapePool].downCount++; - break; - case "unknown": - pools[target.scrapePool].unknownCount++; - break; - } - }); - return pools; -}; - -const scrapePoolQueryParam = "scrapePool"; - -export default function TargetsPage() { - // Load the list of all available scrape pools. - const { - data: { - data: { scrapePools }, - }, - } = useSuspenseAPIQuery({ - path: `/scrape_pools`, - }); - - const dispatch = useAppDispatch(); - - // If there is a selected pool in the URL, extract it on initial load. - useEffect(() => { - const selectedPool = new URLSearchParams(window.location.search).get( - scrapePoolQueryParam - ); - if (selectedPool !== null) { - dispatch(updateTargetFilters({ scrapePool: selectedPool })); - } - }, [dispatch]); - - const filters = useAppSelector((state) => state.targetsPage.filters); - - let poolToShow = filters.scrapePool; - let limitedDueToManyPools = false; - - if (poolToShow === null && scrapePools.length > 20) { - poolToShow = scrapePools[0]; - limitedDueToManyPools = true; - } - - // Based on the selected pool (if any), load the list of targets. - const { - data: { - data: { activeTargets }, - }, - } = useSuspenseAPIQuery({ - path: `/targets`, - params: { - state: "active", - scrapePool: poolToShow === null ? "" : poolToShow, - }, - }); - - const collapsedPools = useAppSelector( - (state) => state.targetsPage.collapsedPools - ); - - const allPools = groupTargets(activeTargets); - const allPoolNames = Object.keys(allPools); - - return ( - <> - - } - placeholder="Filter by endpoint or labels" - > - - dispatch( - setCollapsedPools(collapsedPools.length > 0 ? [] : allPoolNames) - ) - } - > - {collapsedPools.length > 0 ? ( - - ) : ( - - )} - - - - {allPoolNames.length === 0 && ( - } - > - No targets found that match your filter criteria. - - )} - {limitedDueToManyPools && ( - } - > - There are many scrape pools configured. Showing only the first one. - Use the dropdown to select a different pool. - - )} - !collapsedPools.includes(p))} - onChange={(value) => - dispatch( - setCollapsedPools(allPoolNames.filter((p) => !value.includes(p))) - ) - } - > - {allPoolNames.map((poolName) => { - const pool = allPools[poolName]; - return ( - - - - {poolName} - - - {pool.upCount} / {pool.targets.length} up - - - - - - - - filters.health.length === 0 || - filters.health.includes(t.health.toLowerCase()) - )} - child={({ items }) => ( - - - - Endpoint - State - Labels - Last scrape - Scrape duration - - - - {items.map((target, i) => ( - // TODO: Find a stable and definitely unique key. - - - - {/* TODO: Process target URL like in old UI */} - - - - - {target.health} - - - - - - - {humanizeDurationRelative( - target.lastScrape, - now() - )} - - - {humanizeDuration( - target.lastScrapeDuration * 1000 - )} - - - {target.lastError && ( - - - } - > - Error scraping target:{" "} - {target.lastError} - - - - )} - - ))} - -
- )} - /> -
-
- ); - })} -
-
- - ); -}