Add latest changes from gitlab-org/gitlab@master

4 files changed, 199 insertions, 0 deletions

diff --git a/spec/frontend/monitoring/components/charts/bar_spec.js b/spec/frontend/monitoring/components/charts/bar_spec.js
new file mode 100644
index 00000000000..e39e6e7e2c2
--- /dev/null
+++ b/spec/frontend/monitoring/components/charts/bar_spec.js
@@ -0,0 +1,54 @@
+import { shallowMount } from '@vue/test-utils';
+import { GlBarChart } from '@gitlab/ui/dist/charts';
+import Bar from '~/monitoring/components/charts/bar.vue';
+import { barMockData } from '../../mock_data';
+
+jest.mock('~/lib/utils/icon_utils', () => ({
+  getSvgIconPathContent: jest.fn().mockResolvedValue('mockSvgPathContent'),
+}));
+
+describe('Bar component', () => {
+  let barChart;
+  let store;
+
+  beforeEach(() => {
+    barChart = shallowMount(Bar, {
+      propsData: {
+        graphData: barMockData,
+      },
+      store,
+    });
+  });
+
+  afterEach(() => {
+    barChart.destroy();
+  });
+
+  describe('wrapped components', () => {
+    describe('GitLab UI bar chart', () => {
+      let glbarChart;
+      let chartData;
+
+      beforeEach(() => {
+        glbarChart = barChart.find(GlBarChart);
+        chartData = barChart.vm.chartData[barMockData.metrics[0].label];
+      });
+
+      it('is a Vue instance', () => {
+        expect(glbarChart.isVueInstance()).toBe(true);
+      });
+
+      it('should display a label on the x axis', () => {
+        expect(glbarChart.vm.xAxisTitle).toBe(barMockData.xLabel);
+      });
+
+      it('should return chartData as array of arrays', () => {
+        expect(chartData).toBeInstanceOf(Array);
+
+        chartData.forEach(item => {
+          expect(item).toBeInstanceOf(Array);
+        });
+      });
+    });
+  });
+});
diff --git a/spec/frontend/monitoring/mock_data.js b/spec/frontend/monitoring/mock_data.js
index c98b6a9592f..284b7a0997f 100644
--- a/spec/frontend/monitoring/mock_data.js
+++ b/spec/frontend/monitoring/mock_data.js
@@ -703,3 +703,50 @@ export const stackedColumnMockedData = {
     },
   ],
 };
+
+export const barMockData = {
+  title: 'SLA Trends - Primary Services',
+  type: 'bar-chart',
+  xLabel: 'service',
+  y_label: 'percentile',
+  metrics: [
+    {
+      id: 'sla_trends_primary_services',
+      series_name: 'group 1',
+      metric_id: 'undefined_sla_trends_primary_services',
+      metricId: 'undefined_sla_trends_primary_services',
+      query_range:
+        'avg(avg_over_time(slo_observation_status{environment="gprd", stage=~"main|", type=~"api|web|git|registry|sidekiq|ci-runners"}[1d])) by (type)',
+      unit: 'Percentile',
+      label: 'SLA',
+      prometheus_endpoint_path:
+        '/gitlab-com/metrics-dogfooding/-/environments/266/prometheus/api/v1/query_range?query=clamp_min%28clamp_max%28avg%28avg_over_time%28slo_observation_status%7Benvironment%3D%22gprd%22%2C+stage%3D~%22main%7C%22%2C+type%3D~%22api%7Cweb%7Cgit%7Cregistry%7Csidekiq%7Cci-runners%22%7D%5B1d%5D%29%29+by+%28type%29%2C1%29%2C0%29',
+      result: [
+        {
+          metric: { type: 'api' },
+          values: [[1583995208, '0.9935198135198128']],
+        },
+        {
+          metric: { type: 'git' },
+          values: [[1583995208, '0.9975296513504401']],
+        },
+        {
+          metric: { type: 'registry' },
+          values: [[1583995208, '0.9994716394716395']],
+        },
+        {
+          metric: { type: 'sidekiq' },
+          values: [[1583995208, '0.9948251748251747']],
+        },
+        {
+          metric: { type: 'web' },
+          values: [[1583995208, '0.9535664335664336']],
+        },
+        {
+          metric: { type: 'postgresql_database' },
+          values: [[1583995208, '0.9335664335664336']],
+        },
+      ],
+    },
+  ],
+};
diff --git a/spec/frontend/monitoring/store/utils_spec.js b/spec/frontend/monitoring/store/utils_spec.js
index 1e5bbc9c113..4bbbe33647c 100644
--- a/spec/frontend/monitoring/store/utils_spec.js
+++ b/spec/frontend/monitoring/store/utils_spec.js
@@ -25,6 +25,10 @@ describe('mapToDashboardViewModel', () => {
           panels: [
             {
               title: 'Title A',
+              xLabel: '',
+              xAxis: {
+                name: '',
+              },
               type: 'chart-type',
               y_label: 'Y Label A',
               metrics: [],
@@ -44,6 +48,10 @@ describe('mapToDashboardViewModel', () => {
             {
               title: 'Title A',
               type: 'chart-type',
+              xLabel: '',
+              xAxis: {
+                name: '',
+              },
               y_label: 'Y Label A',
               yAxis: {
                 name: 'Y Label A',
@@ -114,6 +122,28 @@ describe('mapToDashboardViewModel', () => {
 
     const getMappedPanel = () => mapToDashboardViewModel(dashboard).panelGroups[0].panels[0];
 
+    it('panel with x_label', () => {
+      setupWithPanel({
+        title: panelTitle,
+        x_label: 'x label',
+      });
+
+      expect(getMappedPanel()).toEqual({
+        title: panelTitle,
+        xLabel: 'x label',
+        xAxis: {
+          name: 'x label',
+        },
+        y_label: '',
+        yAxis: {
+          name: '',
+          format: SUPPORTED_FORMATS.number,
+          precision: 2,
+        },
+        metrics: [],
+      });
+    });
+
     it('group y_axis defaults', () => {
       setupWithPanel({
         title: panelTitle,
@@ -121,7 +151,11 @@ describe('mapToDashboardViewModel', () => {
 
       expect(getMappedPanel()).toEqual({
         title: panelTitle,
+        xLabel: '',
         y_label: '',
+        xAxis: {
+          name: '',
+        },
         yAxis: {
           name: '',
           format: SUPPORTED_FORMATS.number,
diff --git a/spec/frontend/monitoring/utils_spec.js b/spec/frontend/monitoring/utils_spec.js
index 2d9417bf971..262b8b985cc 100644
--- a/spec/frontend/monitoring/utils_spec.js
+++ b/spec/frontend/monitoring/utils_spec.js
@@ -6,6 +6,7 @@ import {
   graphDataPrometheusQuery,
   graphDataPrometheusQueryRange,
   anomalyMockGraphData,
+  barMockData,
 } from './mock_data';
 
 jest.mock('~/lib/utils/url_utility');
@@ -210,4 +211,67 @@ describe('monitoring/utils', () => {
       expect(mergeUrlParams).toHaveBeenCalledWith({ duration_seconds: `${seconds}` }, fromUrl);
     });
   });
+
+  describe('barChartsDataParser', () => {
+    const singleMetricExpected = {
+      SLA: [
+        ['0.9935198135198128', 'api'],
+        ['0.9975296513504401', 'git'],
+        ['0.9994716394716395', 'registry'],
+        ['0.9948251748251747', 'sidekiq'],
+        ['0.9535664335664336', 'web'],
+        ['0.9335664335664336', 'postgresql_database'],
+      ],
+    };
+
+    const multipleMetricExpected = {
+      ...singleMetricExpected,
+      SLA_2: Object.values(singleMetricExpected)[0],
+    };
+
+    const barMockDataWithMultipleMetrics = {
+      ...barMockData,
+      metrics: [
+        barMockData.metrics[0],
+        {
+          ...barMockData.metrics[0],
+          label: 'SLA_2',
+        },
+      ],
+    };
+
+    [
+      {
+        input: { metrics: undefined },
+        output: {},
+        testCase: 'barChartsDataParser returns {} with undefined',
+      },
+      {
+        input: { metrics: null },
+        output: {},
+        testCase: 'barChartsDataParser returns {} with null',
+      },
+      {
+        input: { metrics: [] },
+        output: {},
+        testCase: 'barChartsDataParser returns {} with []',
+      },
+      {
+        input: barMockData,
+        output: singleMetricExpected,
+        testCase: 'barChartsDataParser returns single series object with single metrics',
+      },
+      {
+        input: barMockDataWithMultipleMetrics,
+        output: multipleMetricExpected,
+        testCase: 'barChartsDataParser returns multiple series object with multiple metrics',
+      },
+    ].forEach(({ input, output, testCase }) => {
+      it(testCase, () => {
+        expect(monitoringUtils.barChartsDataParser(input.metrics)).toEqual(
+          expect.objectContaining(output),
+        );
+      });
+    });
+  });
 });