Commit 239aa514 authored by Adriel Santiago's avatar Adriel Santiago Committed by Kushal Pandya

Restore multiple series support

Corrects an issue whereby queries which return multiple series results
were not rendering as multiple data series on the metrics dashboard
parent e301cc53
/* 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 });
}, []);
......@@ -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}`;
},
......
---
title: Fix multiple series queries on metrics dashboard
merge_request: 26514
author:
type: fixed
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]] }]);
});
});
});
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment