Merge branch '217758-refactor-mock-graph-single-stat' into 'master'

Use graph data generation for single stat tests

Closes #217758

See merge request gitlab-org/gitlab!36273

spec/frontend/monitoring/components/charts/single_stat_spec.js

 import { shallowMount } from '@vue/test-utils';
 import SingleStatChart from '~/monitoring/components/charts/single_stat.vue';
-import { singleStatMetricsResult, singleStatMetricsWithFieldResult } from '../../mock_data';
+import { singleStatGraphData } from '../../graph_data';
 
 describe('Single Stat Chart component', () => {
   let singleStatChart;
@@ -8,7 +8,7 @@ describe('Single Stat Chart component', () => {
   beforeEach(() => {
     singleStatChart = shallowMount(SingleStatChart, {
       propsData: {
-        graphData: singleStatMetricsResult,
+        graphData: singleStatGraphData({}, { unit: 'MB' }),
       },
     });
   });
@@ -20,15 +20,12 @@ describe('Single Stat Chart component', () => {
   describe('computed', () => {
     describe('statValue', () => {
       it('should interpolate the value and unit props', () => {
-        expect(singleStatChart.vm.statValue).toBe('91.00MB');
+        expect(singleStatChart.vm.statValue).toBe('1.00MB');
       });
 
       it('should change the value representation to a percentile one', () => {
         singleStatChart.setProps({
-          graphData: {
-            ...singleStatMetricsResult,
-            maxValue: 120,
-          },
+          graphData: singleStatGraphData({ max_value: 120 }, { value: 91 }),
         });
 
         expect(singleStatChart.vm.statValue).toContain('75.83%');
@@ -36,10 +33,7 @@ describe('Single Stat Chart component', () => {
 
       it('should display NaN for non numeric maxValue values', () => {
         singleStatChart.setProps({
-          graphData: {
-            ...singleStatMetricsResult,
-            maxValue: 'not a number',
-          },
+          graphData: singleStatGraphData({ max_value: 'not a number' }),
         });
 
         expect(singleStatChart.vm.statValue).toContain('NaN');
@@ -47,21 +41,7 @@ describe('Single Stat Chart component', () => {
 
       it('should display NaN for missing query values', () => {
         singleStatChart.setProps({
-          graphData: {
-            ...singleStatMetricsResult,
-            metrics: [
-              {
-                ...singleStatMetricsResult.metrics[0],
-                result: [
-                  {
-                    ...singleStatMetricsResult.metrics[0].result[0],
-                    value: [''],
-                  },
-                ],
-              },
-            ],
-            maxValue: 120,
-          },
+          graphData: singleStatGraphData({ max_value: 120 }, { value: 'NaN' }),
         });
 
         expect(singleStatChart.vm.statValue).toContain('NaN');
@@ -70,7 +50,7 @@ describe('Single Stat Chart component', () => {
       describe('field attribute', () => {
         it('displays a label value instead of metric value when field attribute is used', () => {
           singleStatChart.setProps({
-            graphData: singleStatMetricsWithFieldResult,
+            graphData: singleStatGraphData({ field: 'job' }, { isVector: true }),
           });
 
           return singleStatChart.vm.$nextTick(() => {
@@ -80,10 +60,7 @@ describe('Single Stat Chart component', () => {
 
         it('displays No data to display if field attribute is not present', () => {
           singleStatChart.setProps({
-            graphData: {
-              ...singleStatMetricsWithFieldResult,
-              field: 'this-does-not-exist',
-            },
+            graphData: singleStatGraphData({ field: 'this-does-not-exist' }),
           });
 
           return singleStatChart.vm.$nextTick(() => {

spec/frontend/monitoring/components/dashboard_panel_spec.js

@@ -15,11 +15,11 @@ import {
   mockNamespace,
   mockNamespacedData,
   mockTimeRange,
-  singleStatMetricsResult,
   graphDataPrometheusQueryRangeMultiTrack,
   barMockData,
 } from '../mock_data';
 import { dashboardProps, graphData, graphDataEmpty } from '../fixture_data';
+import { singleStatGraphData } from '../graph_data';
 
 import { panelTypes } from '~/monitoring/constants';
 
@@ -232,7 +232,7 @@ describe('Dashboard Panel', () => {
         data                                       | component                    | hasCtxMenu
         ${dataWithType(panelTypes.AREA_CHART)}     | ${MonitorTimeSeriesChart}    | ${true}
         ${dataWithType(panelTypes.LINE_CHART)}     | ${MonitorTimeSeriesChart}    | ${true}
-        ${singleStatMetricsResult}                 | ${MonitorSingleStatChart}    | ${true}
+        ${singleStatGraphData()}                   | ${MonitorSingleStatChart}    | ${true}
         ${anomalyMockGraphData}                    | ${MonitorAnomalyChart}       | ${false}
         ${dataWithType(panelTypes.COLUMN)}         | ${MonitorColumnChart}        | ${false}
         ${dataWithType(panelTypes.STACKED_COLUMN)} | ${MonitorStackedColumnChart} | ${false}

spec/frontend/monitoring/graph_data.js

@@ -3,10 +3,40 @@ import { panelTypes, metricStates } from '~/monitoring/constants';
 
 const initTime = 1435781451.781;
 
+const makeValue = val => [initTime, val];
 const makeValues = vals => vals.map((val, i) => [initTime + 15 * i, val]);
 
 // Normalized Prometheus Responses
 
+const scalarResult = ({ value = '1' } = {}) =>
+  normalizeQueryResponseData({
+    resultType: 'scalar',
+    result: makeValue(value),
+  });
+
+const vectorResult = ({ value1 = '1', value2 = '2' } = {}) =>
+  normalizeQueryResponseData({
+    resultType: 'vector',
+    result: [
+      {
+        metric: {
+          __name__: 'up',
+          job: 'prometheus',
+          instance: 'localhost:9090',
+        },
+        value: makeValue(value1),
+      },
+      {
+        metric: {
+          __name__: 'up',
+          job: 'node',
+          instance: 'localhost:9100',
+        },
+        value: makeValue(value2),
+      },
+    ],
+  });
+
 const matrixSingleResult = ({ values = ['1', '2', '3'] } = {}) =>
   normalizeQueryResponseData({
     resultType: 'matrix',
@@ -51,7 +81,6 @@ const matrixMultiResult = ({ values1 = ['1', '2', '3'], values2 = ['4', '5', '6'
  * @param {Object} dataOptions.metricCount
  * @param {Object} dataOptions.isMultiSeries
  */
-// eslint-disable-next-line import/prefer-default-export
 export const timeSeriesGraphData = (panelOptions = {}, dataOptions = {}) => {
   const { metricCount = 1, isMultiSeries = false } = dataOptions;
 
@@ -68,3 +97,30 @@ export const timeSeriesGraphData = (panelOptions = {}, dataOptions = {}) => {
     ...panelOptions,
   });
 };
+
+/**
+ * Generate mock graph data according to options
+ *
+ * @param {Object} panelOptions - Panel options as in YML.
+ * @param {Object} dataOptions
+ * @param {Object} dataOptions.unit
+ * @param {Object} dataOptions.value
+ * @param {Object} dataOptions.isVector
+ */
+export const singleStatGraphData = (panelOptions = {}, dataOptions = {}) => {
+  const { unit, value = '1', isVector = false } = dataOptions;
+
+  return mapPanelToViewModel({
+    title: 'Single Stat Panel',
+    type: panelTypes.SINGLE_STAT,
+    metrics: [
+      {
+        label: 'Metric Label',
+        state: metricStates.OK,
+        result: isVector ? vectorResult({ value }) : scalarResult({ value }),
+        unit,
+      },
+    ],
+    ...panelOptions,
+  });
+};

spec/frontend/monitoring/mock_data.js

@@ -334,36 +334,6 @@ export const metricsResult = [
   },
 ];
 
-export const singleStatMetricsResult = {
-  title: 'Super Chart A2',
-  type: 'single-stat',
-  weight: 2,
-  metrics: [
-    {
-      id: 'metric_a1',
-      metricId: '2',
-      query: 'max(go_memstats_alloc_bytes{job="prometheus"}) by (job) /1024/1024',
-      unit: 'MB',
-      label: 'Total Consumption',
-      metric_id: 2,
-      prometheus_endpoint_path:
-        '/root/kubernetes-gke-project/environments/35/prometheus/api/v1/query?query=max%28go_memstats_alloc_bytes%7Bjob%3D%22prometheus%22%7D%29+by+%28job%29+%2F1024%2F1024',
-      result: [
-        {
-          metric: { job: 'prometheus' },
-          value: ['2019-06-26T21:03:20.881Z', 91],
-          values: [['2019-06-26T21:03:20.881Z', 91]],
-        },
-      ],
-    },
-  ],
-};
-
-export const singleStatMetricsWithFieldResult = {
-  ...singleStatMetricsResult,
-  field: 'job',
-};
-
 export const graphDataPrometheusQueryRangeMultiTrack = {
   title: 'Super Chart A3',
   type: 'heatmap',

spec/frontend/monitoring/utils_spec.js

 import * as monitoringUtils from '~/monitoring/utils';
 import * as urlUtils from '~/lib/utils/url_utility';
 import { TEST_HOST } from 'jest/helpers/test_constants';
-import {
-  mockProjectDir,
-  singleStatMetricsResult,
-  anomalyMockGraphData,
-  barMockData,
-} from './mock_data';
+import { mockProjectDir, anomalyMockGraphData, barMockData } from './mock_data';
 import { metricsDashboardViewModel, graphData } from './fixture_data';
+import { singleStatGraphData } from './graph_data';
 
 const mockPath = `${TEST_HOST}${mockProjectDir}/-/environments/29/metrics`;
 
@@ -82,7 +78,7 @@ describe('monitoring/utils', () => {
     it('validates data with the query format', () => {
       const validGraphData = monitoringUtils.graphDataValidatorForValues(
         true,
-        singleStatMetricsResult,
+        singleStatGraphData(),
       );
 
       expect(validGraphData).toBe(true);
@@ -105,7 +101,7 @@ describe('monitoring/utils', () => {
     let threeMetrics;
     let fourMetrics;
     beforeEach(() => {
-      oneMetric = singleStatMetricsResult;
+      oneMetric = singleStatGraphData();
       threeMetrics = anomalyMockGraphData;
 
       const metrics = [...threeMetrics.metrics];