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

184
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,95 +84,100 @@ const MetricsExplorer: FC<MetricsExplorerProps> = ({
} }
autoFocus autoFocus
/> />
<Table> <CustomInfiniteScroll
<Table.Thead> allItems={searchMatches}
<Table.Tr> child={({ items }) => (
<Table.Th>Metric</Table.Th> <Table>
<Table.Th>Type</Table.Th> <Table.Thead>
<Table.Th>Help</Table.Th> <Table.Tr>
</Table.Tr> <Table.Th>Metric</Table.Th>
</Table.Thead> <Table.Th>Type</Table.Th>
<Table.Tbody> <Table.Th>Help</Table.Th>
{searchMatches.map((m) => ( </Table.Tr>
<Table.Tr key={m.original}> </Table.Thead>
<Table.Td> <Table.Tbody>
<Group justify="space-between"> {items.map((m) => (
{debouncedFilterText === "" ? ( <Table.Tr key={m.original}>
m.original <Table.Td>
) : ( <Group justify="space-between">
<div {debouncedFilterText === "" ? (
dangerouslySetInnerHTML={{ m.original
__html: sanitizeHTML(m.rendered, sanitizeOpts), ) : (
}} <div
/> dangerouslySetInnerHTML={{
)} __html: sanitizeHTML(m.rendered, sanitizeOpts),
<Group gap="xs"> }}
<ActionIcon />
size="sm" )}
color="gray" <Group gap="xs">
variant="light" <ActionIcon
title="Explore metric" size="sm"
onClick={() => { color="gray"
setSelectedMetric(m.original); variant="light"
}} title="Explore metric"
> onClick={() => {
<IconZoomCode setSelectedMetric(m.original);
style={{ width: "70%", height: "70%" }} }}
stroke={1.5} >
/> <IconZoomCode
</ActionIcon> style={{ width: "70%", height: "70%" }}
<ActionIcon stroke={1.5}
size="sm" />
color="gray" </ActionIcon>
variant="light" <ActionIcon
title="Insert at cursor and close explorer" size="sm"
onClick={() => { color="gray"
insertText(m.original); variant="light"
close(); title="Insert at cursor and close explorer"
}} onClick={() => {
> insertText(m.original);
<IconCodePlus close();
style={{ width: "70%", height: "70%" }} }}
stroke={1.5} >
/> <IconCodePlus
</ActionIcon> style={{ width: "70%", height: "70%" }}
<ActionIcon stroke={1.5}
size="sm" />
color="gray" </ActionIcon>
variant="light" <ActionIcon
title="Copy to clipboard" size="sm"
onClick={() => { color="gray"
navigator.clipboard.writeText(m.original); variant="light"
}} title="Copy to clipboard"
> onClick={() => {
<IconCopy navigator.clipboard.writeText(m.original);
style={{ width: "70%", height: "70%" }} }}
stroke={1.5} >
/> <IconCopy
</ActionIcon> style={{ width: "70%", height: "70%" }}
</Group> stroke={1.5}
</Group> />
</Table.Td> </ActionIcon>
<Table.Td px="lg"> </Group>
{getMeta(m.original).map((meta, idx) => ( </Group>
<React.Fragment key={idx}> </Table.Td>
<span className={classes.typeLabel}>{meta.type}</span> <Table.Td px="lg">
<br /> {getMeta(m.original).map((meta, idx) => (
</React.Fragment> <React.Fragment key={idx}>
))} <span className={classes.typeLabel}>{meta.type}</span>
</Table.Td> <br />
<Table.Td> </React.Fragment>
{getMeta(m.original).map((meta, idx) => ( ))}
<React.Fragment key={idx}> </Table.Td>
<span className={classes.helpLabel}>{meta.help}</span> <Table.Td>
<br /> {getMeta(m.original).map((meta, idx) => (
</React.Fragment> <React.Fragment key={idx}>
))} <span className={classes.helpLabel}>{meta.help}</span>
</Table.Td> <br />
</Table.Tr> </React.Fragment>
))} ))}
</Table.Tbody> </Table.Td>
</Table> </Table.Tr>
))}
</Table.Tbody>
</Table>
)}
/>
</Stack> </Stack>
); );
}; };