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