mudhorn/prometheus
1
0
Fork 0
mirror of https://github.com/prometheus/prometheus.git synced 2025-02-02 08:31:11 -08:00
Code Issues Actions 4 Packages Projects Releases Wiki Activity

Memoize and improve targets page filtering

Browse source 
Signed-off-by: Julius Volz <julius.volz@gmail.com>
This commit is contained in:
Julius Volz 2024-08-28 14:54:56 +02:00
parent d6e5e39bf7
commit 73a328f37b
1 changed files with 32 additions and 30 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

62
web/ui/mantine-ui/src/pages/targets/ScrapePoolsList.tsx
View file

@ -19,7 +19,7 @@ import {
} from "@tabler/icons-react"; } from "@tabler/icons-react";
import { useSuspenseAPIQuery } from "../../api/api"; import { useSuspenseAPIQuery } from "../../api/api";
import { Target, TargetsResult } from "../../api/responseTypes/targets"; import { Target, TargetsResult } from "../../api/responseTypes/targets";
import React, { FC } from "react"; import React, { FC, useMemo } from "react";
import { import {
humanizeDurationRelative, humanizeDurationRelative,
humanizeDuration, humanizeDuration,
@ -80,10 +80,11 @@ const kvSearch = new KVSearch<Target>({
indexedKeys: ["labels", "scrapePool", ["labels", /.*/]], indexedKeys: ["labels", "scrapePool", ["labels", /.*/]],
}); });
const groupTargets = ( const buildPoolsData = (
poolNames: string[], poolNames: string[],
allTargets: Target[], targets: Target[],
shownTargets: Target[] search: string,
healthFilter: (string | null)[]
): ScrapePools => { ): ScrapePools => {
const pools: ScrapePools = {}; const pools: ScrapePools = {};
@ -97,7 +98,7 @@ const groupTargets = (
}; };
} }
for (const target of allTargets) { for (const target of targets) {
if (!pools[target.scrapePool]) { if (!pools[target.scrapePool]) {
// TODO: Should we do better here? // TODO: Should we do better here?
throw new Error( throw new Error(
@ -120,7 +121,16 @@ const groupTargets = (
} }
} }
for (const target of shownTargets) { const filteredTargets: Target[] = (
search === ""
? targets
: kvSearch.filter(search, targets).map((value) => value.original)
).filter(
(target) =>
healthFilter.length === 0 || healthFilter.includes(target.health)
);
for (const target of filteredTargets) {
pools[target.scrapePool].targets.push(target); pools[target.scrapePool].targets.push(target);
} }
@ -140,12 +150,6 @@ const ScrapePoolList: FC<ScrapePoolListProp> = ({
healthFilter, healthFilter,
searchFilter, searchFilter,
}) => { }) => {
const dispatch = useAppDispatch();
const [showEmptyPools, setShowEmptyPools] = useQueryParam(
"showEmptyPools",
withDefault(BooleanParam, true)
);
// Based on the selected pool (if any), load the list of targets. // Based on the selected pool (if any), load the list of targets.
const { const {
data: { data: {
@ -159,31 +163,29 @@ const ScrapePoolList: FC<ScrapePoolListProp> = ({
}, },
}); });
const dispatch = useAppDispatch();
const [showEmptyPools, setShowEmptyPools] = useQueryParam(
"showEmptyPools",
withDefault(BooleanParam, true)
);
const { collapsedPools, showLimitAlert } = useAppSelector( const { collapsedPools, showLimitAlert } = useAppSelector(
(state) => state.targetsPage (state) => state.targetsPage
); );
const [debouncedSearch] = useDebouncedValue<string>(searchFilter, 250); const [debouncedSearch] = useDebouncedValue<string>(searchFilter.trim(), 250);
// TODO: Memoize all this computation, especially groupTargets(). const allPools = useMemo(
const search = debouncedSearch.trim(); () =>
const healthFilteredTargets = activeTargets.filter( buildPoolsData(
(target) => selectedPool ? [selectedPool] : poolNames,
healthFilter.length === 0 || activeTargets,
healthFilter.includes(target.health.toLowerCase()) debouncedSearch,
healthFilter
),
[selectedPool, poolNames, activeTargets, debouncedSearch, healthFilter]
); );
const filteredTargets =
search === ""
? healthFilteredTargets
: kvSearch
.filter(search, healthFilteredTargets)
.map((value) => value.original);
const allPools = groupTargets(
selectedPool ? [selectedPool] : poolNames,
activeTargets,
filteredTargets
);
const allPoolNames = Object.keys(allPools); const allPoolNames = Object.keys(allPools);
const shownPoolNames = showEmptyPools const shownPoolNames = showEmptyPools
? allPoolNames ? allPoolNames