From f5db70709336f8a3e6d8c28075bbfc7b2ff000fe Mon Sep 17 00:00:00 2001 From: ktx-vaidehi <134508096+ktx-vaidehi@users.noreply.github.com> Date: Thu, 1 Oct 2026 17:12:00 +0000 Subject: [PATCH] fix(dashboards): show the latest value on PromQL gauge panels (#14996) --- .../utils/dashboard/convertPromQLData.spec.ts | 35 +++++++++++++++++++ web/src/utils/dashboard/convertPromQLData.ts | 8 ++--- 2 files changed, 39 insertions(+), 4 deletions(-) diff --git a/web/src/utils/dashboard/convertPromQLData.spec.ts b/web/src/utils/dashboard/convertPromQLData.spec.ts index 0ec91c58b5..4c69d7fe40 100644 --- a/web/src/utils/dashboard/convertPromQLData.spec.ts +++ b/web/src/utils/dashboard/convertPromQLData.spec.ts @@ -2287,6 +2287,41 @@ describe("Convert PromQL Data Utils", () => { expect(formattedValue).toBe("75.5"); // Based on our mock getUnitValue }); + it("should show the latest value of a series on a gauge", async () => { + const panelSchema = { + id: "panel1", + type: "gauge", + config: {}, + queries: [{ config: { promql_legend: "", min: 0, max: 100 } }], + }; + const searchQueryData = [ + { + resultType: "matrix", + result: [ + { + metric: { __name__: "gauge_metric" }, + values: [ + [1640438800, "45"], + [1640442400, "80"], + [1640435200, "10"], + ], + }, + ], + }, + ]; + + const result = await convertPromQLData( + panelSchema, + searchQueryData, + mockStore, + mockChartPanelRef, + mockHoveredSeriesState, + mockAnnotations, + ); + + expect(result.options.series[0].data[0].value).toBe("80"); + }); + it("should test gauge tooltip valueFormatter function (lines 650-658)", async () => { const panelSchema = { id: "panel1", diff --git a/web/src/utils/dashboard/convertPromQLData.ts b/web/src/utils/dashboard/convertPromQLData.ts index 6e1cf1b622..2b9fd8f84d 100644 --- a/web/src/utils/dashboard/convertPromQLData.ts +++ b/web/src/utils/dashboard/convertPromQLData.ts @@ -849,6 +849,7 @@ export const convertPromQLData = async ( isTimeSeriesFlag = false; const series = it?.result?.map((metric: any) => { const values = (metric?.values ?? []).sort((a: any, b: any) => a[0] - b[0]); + const latestValue = values[values.length - 1]?.[1]; gaugeIndex++; const seriesName = seriesNames.get(metric.metric) ?? ""; @@ -883,8 +884,7 @@ export const convertPromQLData = async ( data: [ { name: seriesName, - // taking first value for gauge - value: values?.[0]?.[1] ?? 0, + value: latestValue ?? 0, detail: { formatter: function (value: any) { const unitValue = getUnitValue( @@ -899,12 +899,12 @@ export const convertPromQLData = async ( itemStyle: { color: (() => { const defaultColor = null; - if (!values?.[0]?.[1]) return defaultColor; + if (!latestValue) return defaultColor; return ( getSeriesColor( panelSchema?.config?.color, seriesName, - values[0][1], + latestValue, chartMin, chartMax, store.state.theme,