mirror of https://github.com/prometheus/prometheus
Julius Volz
2 months ago
committed by
GitHub
commit
52fe4cc4ee
@ -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<ScrapePoolsResult>({
|
|
||||||
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<TargetsResult>({
|
|
||||||
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 (
|
|
||||||
<>
|
|
||||||
<Group mb="md" mt="xs">
|
|
||||||
<Select
|
|
||||||
placeholder="Select scrape pool"
|
|
||||||
data={[{ label: "All pools", value: "" }, ...scrapePools]}
|
|
||||||
value={filters.scrapePool}
|
|
||||||
onChange={(value) =>
|
|
||||||
dispatch(updateTargetFilters({ scrapePool: value || null }))
|
|
||||||
}
|
|
||||||
searchable
|
|
||||||
/>
|
|
||||||
<StateMultiSelect
|
|
||||||
options={["unknown", "up", "down"]}
|
|
||||||
optionClass={(o) =>
|
|
||||||
o === "unknown"
|
|
||||||
? badgeClasses.healthUnknown
|
|
||||||
: o === "up"
|
|
||||||
? badgeClasses.healthOk
|
|
||||||
: badgeClasses.healthErr
|
|
||||||
}
|
|
||||||
placeholder="Filter by target state"
|
|
||||||
values={filters.health}
|
|
||||||
onChange={(values) =>
|
|
||||||
dispatch(updateTargetFilters({ health: values }))
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
<Input
|
|
||||||
flex={1}
|
|
||||||
leftSection={<IconSearch size={14} />}
|
|
||||||
placeholder="Filter by endpoint or labels"
|
|
||||||
></Input>
|
|
||||||
<ActionIcon
|
|
||||||
size="input-sm"
|
|
||||||
title="Expand all pools"
|
|
||||||
variant="light"
|
|
||||||
onClick={() =>
|
|
||||||
dispatch(
|
|
||||||
setCollapsedPools(collapsedPools.length > 0 ? [] : allPoolNames)
|
|
||||||
)
|
|
||||||
}
|
|
||||||
>
|
|
||||||
{collapsedPools.length > 0 ? (
|
|
||||||
<IconLayoutNavbarExpand size={16} />
|
|
||||||
) : (
|
|
||||||
<IconLayoutNavbarCollapse size={16} />
|
|
||||||
)}
|
|
||||||
</ActionIcon>
|
|
||||||
</Group>
|
|
||||||
<Stack>
|
|
||||||
{allPoolNames.length === 0 && (
|
|
||||||
<Alert
|
|
||||||
title="No matching targets"
|
|
||||||
icon={<IconInfoCircle size={14} />}
|
|
||||||
>
|
|
||||||
No targets found that match your filter criteria.
|
|
||||||
</Alert>
|
|
||||||
)}
|
|
||||||
{limitedDueToManyPools && (
|
|
||||||
<Alert
|
|
||||||
title="Found many pools, showing only one"
|
|
||||||
icon={<IconInfoCircle size={14} />}
|
|
||||||
>
|
|
||||||
There are many scrape pools configured. Showing only the first one.
|
|
||||||
Use the dropdown to select a different pool.
|
|
||||||
</Alert>
|
|
||||||
)}
|
|
||||||
<Accordion
|
|
||||||
multiple
|
|
||||||
variant="separated"
|
|
||||||
value={allPoolNames.filter((p) => !collapsedPools.includes(p))}
|
|
||||||
onChange={(value) =>
|
|
||||||
dispatch(
|
|
||||||
setCollapsedPools(allPoolNames.filter((p) => !value.includes(p)))
|
|
||||||
)
|
|
||||||
}
|
|
||||||
>
|
|
||||||
{allPoolNames.map((poolName) => {
|
|
||||||
const pool = allPools[poolName];
|
|
||||||
return (
|
|
||||||
<Accordion.Item
|
|
||||||
key={poolName}
|
|
||||||
value={poolName}
|
|
||||||
style={{
|
|
||||||
borderLeft:
|
|
||||||
pool.upCount === 0
|
|
||||||
? "5px solid var(--mantine-color-red-4)"
|
|
||||||
: pool.upCount !== pool.targets.length
|
|
||||||
? "5px solid var(--mantine-color-orange-5)"
|
|
||||||
: "5px solid var(--mantine-color-green-4)",
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<Accordion.Control>
|
|
||||||
<Group wrap="nowrap" justify="space-between" mr="lg">
|
|
||||||
<Text>{poolName}</Text>
|
|
||||||
<Group gap="xs">
|
|
||||||
<Text c="gray.6">
|
|
||||||
{pool.upCount} / {pool.targets.length} up
|
|
||||||
</Text>
|
|
||||||
<RingProgress
|
|
||||||
size={25}
|
|
||||||
thickness={5}
|
|
||||||
sections={[
|
|
||||||
{
|
|
||||||
value: (pool.upCount / pool.targets.length) * 100,
|
|
||||||
// value: pool.upCount,
|
|
||||||
color: "green.4",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
value: (pool.downCount / pool.targets.length) * 100,
|
|
||||||
color: "red.5",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
value:
|
|
||||||
(pool.unknownCount / pool.targets.length) * 100,
|
|
||||||
color: "gray.4",
|
|
||||||
},
|
|
||||||
]}
|
|
||||||
/>
|
|
||||||
</Group>
|
|
||||||
</Group>
|
|
||||||
</Accordion.Control>
|
|
||||||
<Accordion.Panel>
|
|
||||||
<CustomInfiniteScroll
|
|
||||||
allItems={pool.targets.filter(
|
|
||||||
(t) =>
|
|
||||||
filters.health.length === 0 ||
|
|
||||||
filters.health.includes(t.health.toLowerCase())
|
|
||||||
)}
|
|
||||||
child={({ items }) => (
|
|
||||||
<Table>
|
|
||||||
<Table.Thead>
|
|
||||||
<Table.Tr>
|
|
||||||
<Table.Th w="30%">Endpoint</Table.Th>
|
|
||||||
<Table.Th w={100}>State</Table.Th>
|
|
||||||
<Table.Th>Labels</Table.Th>
|
|
||||||
<Table.Th w="10%">Last scrape</Table.Th>
|
|
||||||
<Table.Th w="10%">Scrape duration</Table.Th>
|
|
||||||
</Table.Tr>
|
|
||||||
</Table.Thead>
|
|
||||||
<Table.Tbody>
|
|
||||||
{items.map((target, i) => (
|
|
||||||
// TODO: Find a stable and definitely unique key.
|
|
||||||
<React.Fragment key={i}>
|
|
||||||
<Table.Tr
|
|
||||||
style={{
|
|
||||||
borderBottom: target.lastError
|
|
||||||
? "none"
|
|
||||||
: undefined,
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<Table.Td>
|
|
||||||
{/* TODO: Process target URL like in old UI */}
|
|
||||||
<EndpointLink
|
|
||||||
endpoint={target.scrapeUrl}
|
|
||||||
globalUrl={target.globalUrl}
|
|
||||||
/>
|
|
||||||
</Table.Td>
|
|
||||||
<Table.Td>
|
|
||||||
<Badge
|
|
||||||
className={healthBadgeClass(target.health)}
|
|
||||||
>
|
|
||||||
{target.health}
|
|
||||||
</Badge>
|
|
||||||
</Table.Td>
|
|
||||||
<Table.Td>
|
|
||||||
<LabelBadges labels={target.labels} />
|
|
||||||
</Table.Td>
|
|
||||||
<Table.Td>
|
|
||||||
{humanizeDurationRelative(
|
|
||||||
target.lastScrape,
|
|
||||||
now()
|
|
||||||
)}
|
|
||||||
</Table.Td>
|
|
||||||
<Table.Td>
|
|
||||||
{humanizeDuration(
|
|
||||||
target.lastScrapeDuration * 1000
|
|
||||||
)}
|
|
||||||
</Table.Td>
|
|
||||||
</Table.Tr>
|
|
||||||
{target.lastError && (
|
|
||||||
<Table.Tr>
|
|
||||||
<Table.Td colSpan={5}>
|
|
||||||
<Alert
|
|
||||||
color="red"
|
|
||||||
mb="sm"
|
|
||||||
icon={<IconAlertTriangle size={14} />}
|
|
||||||
>
|
|
||||||
<strong>Error scraping target:</strong>{" "}
|
|
||||||
{target.lastError}
|
|
||||||
</Alert>
|
|
||||||
</Table.Td>
|
|
||||||
</Table.Tr>
|
|
||||||
)}
|
|
||||||
</React.Fragment>
|
|
||||||
))}
|
|
||||||
</Table.Tbody>
|
|
||||||
</Table>
|
|
||||||
)}
|
|
||||||
/>
|
|
||||||
</Accordion.Panel>
|
|
||||||
</Accordion.Item>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
</Accordion>
|
|
||||||
</Stack>
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
Loading…
Reference in new issue