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

Show table alerts for limited series or disabled formatting

Browse source 
Signed-off-by: Julius Volz <julius.volz@gmail.com>
This commit is contained in:
Julius Volz 2024-07-30 10:48:18 +02:00
parent b06bb78543
commit 4343281c73
1 changed files with 141 additions and 99 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

240
web/ui/mantine-ui/src/pages/query/DataTable.tsx
View file

@ -1,4 +1,11 @@
import { FC, ReactNode, useEffect, useId, useState } from "react"; import {
FC,
ReactNode,
useEffect,
useId,
useLayoutEffect,
useState,
} from "react";
import { import {
Table, Table,
Alert, Alert,
@ -10,6 +17,7 @@ import {
Group, Group,
Stack, Stack,
Text, Text,
Anchor,
} from "@mantine/core"; } from "@mantine/core";
import { IconAlertTriangle, IconInfoCircle } from "@tabler/icons-react"; import { IconAlertTriangle, IconInfoCircle } from "@tabler/icons-react";
import { import {
@ -30,12 +38,13 @@ import { useSettings } from "../../state/settingsSlice";
dayjs.extend(timezone); dayjs.extend(timezone);
const maxFormattableSeries = 1000; const maxFormattableSeries = 1000;
const maxDisplayableSeries = 10000; const maxDisplayableSeries = 1000;
const limitSeries = <S extends InstantSample | RangeSamples>( const limitSeries = <S extends InstantSample | RangeSamples>(
series: S[] series: S[],
limit: boolean
): S[] => { ): S[] => {
if (series.length > maxDisplayableSeries) { if (limit && series.length > maxDisplayableSeries) {
return series.slice(0, maxDisplayableSeries); return series.slice(0, maxDisplayableSeries);
} }
return series; return series;
@ -49,6 +58,7 @@ export interface DataTableProps {
const DataTable: FC<DataTableProps> = ({ expr, evalTime, retriggerIdx }) => { const DataTable: FC<DataTableProps> = ({ expr, evalTime, retriggerIdx }) => {
const [scale, setScale] = useState<string>("exponential"); const [scale, setScale] = useState<string>("exponential");
const [limitResults, setLimitResults] = useState<boolean>(true);
const { data, error, isFetching, isLoading, refetch } = const { data, error, isFetching, isLoading, refetch } =
useAPIQuery<InstantQueryResult>({ useAPIQuery<InstantQueryResult>({
@ -65,6 +75,10 @@ const DataTable: FC<DataTableProps> = ({ expr, evalTime, retriggerIdx }) => {
expr !== "" && refetch(); expr !== "" && refetch();
}, [retriggerIdx, refetch, expr, evalTime]); }, [retriggerIdx, refetch, expr, evalTime]);
useLayoutEffect(() => {
setLimitResults(true);
}, [data, isFetching]);
const { useLocalTime } = useSettings(); const { useLocalTime } = useSettings();
// Show a skeleton only on the first load, not on subsequent ones. // Show a skeleton only on the first load, not on subsequent ones.
@ -106,105 +120,133 @@ const DataTable: FC<DataTableProps> = ({ expr, evalTime, retriggerIdx }) => {
const doFormat = result.length <= maxFormattableSeries; const doFormat = result.length <= maxFormattableSeries;
console.log("rendering with", result.length, limitResults);
return ( return (
<Box pos="relative" className={classes.tableWrapper}> <>
<LoadingOverlay {limitResults &&
visible={isFetching} ["vector", "matrix"].includes(resultType) &&
zIndex={1000} result.length > maxDisplayableSeries && (
overlayProps={{ radius: "sm", blur: 1 }} <Alert
loaderProps={{ color="red"
children: <Skeleton m={0} w="100%" h="100%" />, icon={<IconAlertTriangle size={14} />}
}} title="Showing limited results"
styles={{ loader: { width: "100%", height: "100%" } }} >
/> Fetched {data.data.result.length} metrics, only displaying first{" "}
<Table fz="xs"> {maxDisplayableSeries} for performance reasons.
<Table.Tbody> <Anchor ml="md" fz="1em" onClick={() => setLimitResults(false)}>
{resultType === "vector" ? ( Show all results
limitSeries<InstantSample>(result).map((s, idx) => ( </Anchor>
<Table.Tr key={idx}> </Alert>
<Table.Td> )}
<SeriesName labels={s.metric} format={doFormat} /> {!doFormat && (
</Table.Td> <Alert
<Table.Td className={classes.numberCell}> title="Formatting turned off"
{s.value && s.value[1]} icon={<IconInfoCircle size={14} />}
{s.histogram && ( >
<Stack> Showing more than {maxFormattableSeries} series, turning off label
<HistogramChart formatting for performance reasons.
histogram={s.histogram[1]} </Alert>
index={idx} )}
scale={scale} <Box pos="relative" className={classes.tableWrapper}>
/> <LoadingOverlay
<Group justify="space-between" align="center" p={10}> visible={isFetching}
<Group align="center" gap="1rem"> zIndex={1000}
<span> overlayProps={{ radius: "sm", blur: 1 }}
<strong>Count:</strong> {s.histogram[1].count} loaderProps={{
</span> children: <Skeleton m={0} w="100%" h="100%" />,
<span> }}
<strong>Sum:</strong> {s.histogram[1].sum} styles={{ loader: { width: "100%", height: "100%" } }}
</span> />
<Table fz="xs">
<Table.Tbody>
{resultType === "vector" ? (
limitSeries<InstantSample>(result, limitResults).map((s, idx) => (
<Table.Tr key={idx}>
<Table.Td>
<SeriesName labels={s.metric} format={doFormat} />
</Table.Td>
<Table.Td className={classes.numberCell}>
{s.value && s.value[1]}
{s.histogram && (
<Stack>
<HistogramChart
histogram={s.histogram[1]}
index={idx}
scale={scale}
/>
<Group justify="space-between" align="center" p={10}>
<Group align="center" gap="1rem">
<span>
<strong>Count:</strong> {s.histogram[1].count}
</span>
<span>
<strong>Sum:</strong> {s.histogram[1].sum}
</span>
</Group>
<Group align="center" gap="1rem">
<span>x-axis scale:</span>
<SegmentedControl
size={"xs"}
value={scale}
onChange={setScale}
data={["exponential", "linear"]}
/>
</Group>
</Group> </Group>
<Group align="center" gap="1rem"> {histogramTable(s.histogram[1])}
<span>x-axis scale:</span> </Stack>
<SegmentedControl )}
size={"xs"} </Table.Td>
value={scale} </Table.Tr>
onChange={setScale} ))
data={["exponential", "linear"]} ) : resultType === "matrix" ? (
/> limitSeries<RangeSamples>(result, limitResults).map((s, idx) => (
</Group> <Table.Tr key={idx}>
</Group> <Table.Td>
{histogramTable(s.histogram[1])} <SeriesName labels={s.metric} format={doFormat} />
</Stack> </Table.Td>
)} <Table.Td className={classes.numberCell}>
</Table.Td> {s.values &&
s.values.map((v, idx) => (
<div key={idx}>
{v[1]}{" "}
<Text
span
c="gray.7"
size="1em"
title={formatTimestamp(v[0], useLocalTime)}
>
@ {v[0]}
</Text>
</div>
))}
</Table.Td>
</Table.Tr>
))
) : resultType === "scalar" ? (
<Table.Tr>
<Table.Td>Scalar value</Table.Td>
<Table.Td className={classes.numberCell}>{result[1]}</Table.Td>
</Table.Tr> </Table.Tr>
)) ) : resultType === "string" ? (
) : resultType === "matrix" ? ( <Table.Tr>
limitSeries<RangeSamples>(result).map((s, idx) => ( <Table.Td>String value</Table.Td>
<Table.Tr key={idx}> <Table.Td>{result[1]}</Table.Td>
<Table.Td>
<SeriesName labels={s.metric} format={doFormat} />
</Table.Td>
<Table.Td className={classes.numberCell}>
{s.values &&
s.values.map((v, idx) => (
<div key={idx}>
{v[1]}{" "}
<Text
span
c="gray.7"
size="1em"
title={formatTimestamp(v[0], useLocalTime)}
>
@ {v[0]}
</Text>
</div>
))}
</Table.Td>
</Table.Tr> </Table.Tr>
)) ) : (
) : resultType === "scalar" ? ( <Alert
<Table.Tr> color="red"
<Table.Td>Scalar value</Table.Td> title="Invalid query response"
<Table.Td className={classes.numberCell}>{result[1]}</Table.Td> icon={<IconAlertTriangle size={14} />}
</Table.Tr> >
) : resultType === "string" ? ( Invalid result value type
<Table.Tr> </Alert>
<Table.Td>String value</Table.Td> )}
<Table.Td>{result[1]}</Table.Td> </Table.Tbody>
</Table.Tr> </Table>
) : ( </Box>
<Alert </>
color="red"
title="Invalid query response"
icon={<IconAlertTriangle size={14} />}
>
Invalid result value type
</Alert>
)}
</Table.Tbody>
</Table>
</Box>
); );
}; };