mantine-ui: add query info warnings display to graph view

Followup of https://github.com/prometheus/prometheus/pull/16753

Signed-off-by: Julien Pivotto <291750+roidelapluie@users.noreply.github.com>
This commit is contained in:
Julien Pivotto 2025-06-20 13:47:15 +02:00
parent 76a97ca273
commit 7f2946ccdd

View File

@ -85,8 +85,10 @@ const Graph: FC<GraphProps> = ({
} | null>(null); } | null>(null);
// Helper function to render warnings. // Helper function to render warnings.
const renderWarnings = (warnings?: string[]) => { const renderAlerts = (warnings?: string[], infos?: string[]) => {
return warnings?.map((w, idx) => ( return (
<>
{warnings?.map((w, idx) => (
<Alert <Alert
key={idx} key={idx}
color="red" color="red"
@ -95,7 +97,19 @@ const Graph: FC<GraphProps> = ({
> >
{w} {w}
</Alert> </Alert>
)); ))}
{infos?.map((w, idx) => (
<Alert
key={idx}
color="yellow"
title="Query notice"
icon={<IconInfoCircle />}
>
{w}
</Alert>
))}
</>
);
}; };
useEffect(() => { useEffect(() => {
@ -166,7 +180,7 @@ const Graph: FC<GraphProps> = ({
<Alert title="Empty query result" icon={<IconInfoCircle />}> <Alert title="Empty query result" icon={<IconInfoCircle />}>
This query returned no data. This query returned no data.
</Alert> </Alert>
{renderWarnings(dataAndRange.data.warnings)} {renderAlerts(dataAndRange.data.warnings)}
</Stack> </Stack>
); );
} }
@ -183,7 +197,7 @@ const Graph: FC<GraphProps> = ({
graphing the equivalent instant vector selector instead. graphing the equivalent instant vector selector instead.
</Alert> </Alert>
)} )}
{renderWarnings(dataAndRange.data.warnings)} {renderAlerts(dataAndRange.data.warnings, dataAndRange.data.infos)}
<Box pos="relative" ref={ref} className={classes.chartWrapper}> <Box pos="relative" ref={ref} className={classes.chartWrapper}>
<LoadingOverlay <LoadingOverlay
visible={isFetching} visible={isFetching}