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