mudhorn/prometheus
1
0
Fork 0
mirror of https://github.com/prometheus/prometheus.git synced 2024-12-26 22:19:40 -08:00
Code Issues Actions 3 Packages Projects Releases Wiki Activity

More specific TS typing for range query results (always matrix)

Browse source 
Signed-off-by: Julius Volz <julius.volz@gmail.com>
This commit is contained in:
Julius Volz 2024-08-28 14:58:10 +02:00
parent 0018b29489
commit 38e21abe7f
2 changed files with 14 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
web/ui/mantine-ui/src/api/responseTypes/query.ts
View file

@ -42,3 +42,10 @@ export type InstantQueryResult =
resultType: "string"; resultType: "string";
result: SampleValue; result: SampleValue;
}; };
// Result type for /api/v1/query_range endpoint.
// See: https://prometheus.io/docs/prometheus/latest/querying/api/#range-queries
export type RangeQueryResult = {
resultType: "matrix";
result: RangeSamples[];
};

23
web/ui/mantine-ui/src/pages/query/Graph.tsx
View file

@ -1,7 +1,10 @@
import { FC, useEffect, useId, useState } from "react"; import { FC, useEffect, useId, useState } from "react";
import { Alert, Skeleton, Box, LoadingOverlay } from "@mantine/core"; import { Alert, Skeleton, Box, LoadingOverlay } from "@mantine/core";
import { IconAlertTriangle, IconInfoCircle } from "@tabler/icons-react"; import { IconAlertTriangle, IconInfoCircle } from "@tabler/icons-react";
import { InstantQueryResult } from "../../api/responseTypes/query"; import {
InstantQueryResult,
RangeQueryResult,
} from "../../api/responseTypes/query";
import { SuccessAPIResponse, useAPIQuery } from "../../api/api"; import { SuccessAPIResponse, useAPIQuery } from "../../api/api";
import classes from "./Graph.module.css"; import classes from "./Graph.module.css";
import { import {
@ -43,7 +46,7 @@ const Graph: FC<GraphProps> = ({
const effectiveResolution = getEffectiveResolution(resolution, range) / 1000; const effectiveResolution = getEffectiveResolution(resolution, range) / 1000;
const { data, error, isFetching, isLoading, refetch } = const { data, error, isFetching, isLoading, refetch } =
useAPIQuery<InstantQueryResult>({ useAPIQuery<RangeQueryResult>({
key: useId(), key: useId(),
path: "/query_range", path: "/query_range",
params: { params: {
@ -60,7 +63,7 @@ const Graph: FC<GraphProps> = ({
// 2. We want to keep displaying the old range in the chart while a query for a new range // 2. We want to keep displaying the old range in the chart while a query for a new range
// is still in progress. // is still in progress.
const [dataAndRange, setDataAndRange] = useState<{ const [dataAndRange, setDataAndRange] = useState<{
data: SuccessAPIResponse<InstantQueryResult>; data: SuccessAPIResponse<RangeQueryResult>;
range: UPlotChartRange; range: UPlotChartRange;
} | null>(null); } | null>(null);
@ -122,19 +125,7 @@ const Graph: FC<GraphProps> = ({
return <Alert variant="transparent">No data queried yet</Alert>; return <Alert variant="transparent">No data queried yet</Alert>;
} }
const { result, resultType } = dataAndRange.data.data; const { result } = dataAndRange.data.data;
if (resultType !== "matrix") {
return (
<Alert
title="Invalid query result"
icon={<IconAlertTriangle size={14} />}
>
This query returned a result of type "{resultType}", but a matrix was
expected.
</Alert>
);
}
if (result.length === 0) { if (result.length === 0) {
return ( return (