fix(dashboards): show the latest value on PromQL gauge panels (#14996)

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",

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,