mudhorn/prometheus
1
0
Fork 0
mirror of https://github.com/prometheus/prometheus.git synced 2025-03-05 20:59:13 -08:00
Code Issues Actions 4 Packages Projects Releases Wiki Activity

Use infinite scroll in metrics explorer for faster rendering

Browse source 
Signed-off-by: Julius Volz <julius.volz@gmail.com>
This commit is contained in:
Julius Volz 2024-09-05 14:44:45 +02:00
parent 1f8a6b4d6e
commit 331a8e1d6c
1 changed files with 95 additions and 89 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
web/ui/mantine-ui/src/pages/query/MetricsExplorer/MetricsExplorer.tsx
View file

@ -9,6 +9,7 @@ import { IconCodePlus, IconCopy, IconZoomCode } from "@tabler/icons-react";
import LabelsExplorer from "./LabelsExplorer"; import LabelsExplorer from "./LabelsExplorer";
import { useDebouncedValue } from "@mantine/hooks"; import { useDebouncedValue } from "@mantine/hooks";
import classes from "./MetricsExplorer.module.css"; import classes from "./MetricsExplorer.module.css";
import CustomInfiniteScroll from "../../../components/CustomInfiniteScroll";
const fuz = new Fuzzy({ const fuz = new Fuzzy({
pre: '<b style="color: rgb(0, 102, 191)">', pre: '<b style="color: rgb(0, 102, 191)">',
@ -83,6 +84,9 @@ const MetricsExplorer: FC<MetricsExplorerProps> = ({
} }
autoFocus autoFocus
/> />
<CustomInfiniteScroll
allItems={searchMatches}
child={({ items }) => (
<Table> <Table>
<Table.Thead> <Table.Thead>
<Table.Tr> <Table.Tr>
@ -92,7 +96,7 @@ const MetricsExplorer: FC<MetricsExplorerProps> = ({
</Table.Tr> </Table.Tr>
</Table.Thead> </Table.Thead>
<Table.Tbody> <Table.Tbody>
{searchMatches.map((m) => ( {items.map((m) => (
<Table.Tr key={m.original}> <Table.Tr key={m.original}>
<Table.Td> <Table.Td>
<Group justify="space-between"> <Group justify="space-between">
@ -172,6 +176,8 @@ const MetricsExplorer: FC<MetricsExplorerProps> = ({
))} ))}
</Table.Tbody> </Table.Tbody>
</Table> </Table>
)}
/>
</Stack> </Stack>
); );
}; };