Merge branch '59324-queries-which-return-multiple-series-are-not-working-correctly' into 'master'

Resolve "Queries which return multiple series are not working correctly"

Closes #59323 and #59324

See merge request gitlab-org/gitlab-ce!26514

app/assets/javascripts/helpers/monitor_helper.js

+/* eslint-disable import/prefer-default-export */
+
+export const makeDataSeries = (queryResults, defaultConfig) =>
+  queryResults.reduce((acc, result) => {
+    const data = result.values.filter(([, value]) => !Number.isNaN(value));
+    if (!data.length) {
+      return acc;
+    }
+    const relevantMetric = defaultConfig.name.toLowerCase().replace(' ', '_');
+    const name = result.metric[relevantMetric];
+    const series = { data };
+    if (name) {
+      series.name = `${defaultConfig.name}: ${name}`;
+    }
+
+    return acc.concat({ ...defaultConfig, ...series });
+  }, []);

app/assets/javascripts/monitoring/components/charts/area.vue

@@ -5,6 +5,7 @@ import { debounceByAnimationFrame } from '~/lib/utils/common_utils';
 import { getSvgIconPathContent } from '~/lib/utils/icon_utils';
 import Icon from '~/vue_shared/components/icon.vue';
 import { chartHeight, graphTypes, lineTypes } from '../../constants';
+import { makeDataSeries } from '~/helpers/monitor_helper';
 
 let debouncedResize;
 
@@ -63,7 +64,7 @@ export default {
   },
   computed: {
     chartData() {
-      return this.graphData.queries.map(query => {
+      return this.graphData.queries.reduce((acc, query) => {
         const { appearance } = query;
         const lineType =
           appearance && appearance.line && appearance.line.type
@@ -74,9 +75,8 @@ export default {
             ? appearance.line.width
             : undefined;
 
-        return {
+        const series = makeDataSeries(query.result, {
           name: this.formatLegendLabel(query),
-          data: this.concatenateResults(query.result),
           lineStyle: {
             type: lineType,
             width: lineWidth,
@@ -87,8 +87,10 @@ export default {
                 ? appearance.area.opacity
                 : undefined,
           },
-        };
         });
+
+        return acc.concat(series);
+      }, []);
     },
     chartOptions() {
       return {
@@ -175,9 +177,6 @@ export default {
     this.setSvg('scroll-handle');
   },
   methods: {
-    concatenateResults(results) {
-      return results.reduce((acc, result) => acc.concat(result.values), []);
-    },
     formatLegendLabel(query) {
       return `${query.label}`;
     },

changelogs/unreleased/59324-queries-which-return-multiple-series-are-not-working-correctly.yml

+---
+title: Fix multiple series queries on metrics dashboard
+merge_request: 26514
+author:
+type: fixed

spec/frontend/helpers/monitor_helper_spec.js

+import * as monitorHelper from '~/helpers/monitor_helper';
+
+describe('monitor helper', () => {
+  const defaultConfig = { default: true, name: 'default name' };
+  const name = 'data name';
+  const series = [[1, 1], [2, 2], [3, 3]];
+  const data = ({ metric = { default_name: name }, values = series } = {}) => [{ metric, values }];
+
+  describe('makeDataSeries', () => {
+    const expectedDataSeries = [
+      {
+        ...defaultConfig,
+        data: series,
+      },
+    ];
+
+    it('converts query results to data series', () => {
+      expect(monitorHelper.makeDataSeries(data({ metric: {} }), defaultConfig)).toEqual(
+        expectedDataSeries,
+      );
+    });
+
+    it('returns an empty array if no query results exist', () => {
+      expect(monitorHelper.makeDataSeries([], defaultConfig)).toEqual([]);
+    });
+
+    it('handles multi-series query results', () => {
+      const expectedData = { ...expectedDataSeries[0], name: 'default name: data name' };
+
+      expect(monitorHelper.makeDataSeries([...data(), ...data()], defaultConfig)).toEqual([
+        expectedData,
+        expectedData,
+      ]);
+    });
+
+    it('excludes NaN values', () => {
+      expect(
+        monitorHelper.makeDataSeries(
+          data({ metric: {}, values: [[1, 1], [2, NaN]] }),
+          defaultConfig,
+        ),
+      ).toEqual([{ ...expectedDataSeries[0], data: [[1, 1]] }]);
+    });
+  });
+});