Merge branch 'dynamic-fixture-frontend-dashboard' into 'master'

Create dynamic frontend fixture for mocking monitor dashbords

See merge request gitlab-org/gitlab!26076

ee/spec/frontend/monitoring/components/dashboard_spec.js

@@ -3,11 +3,11 @@ import MockAdapter from 'axios-mock-adapter';
 import { GlModal, GlButton } from '@gitlab/ui';
 import Dashboard from 'ee/monitoring/components/dashboard.vue';
 import {
-  metricsDashboardPayload,
   mockApiEndpoint,
-  mockedQueryResultPayload,
+  mockedQueryResultFixture,
   environmentData,
 } from '../../../../../spec/frontend/monitoring/mock_data';
+import { getJSONFixture } from '../../../../../spec/frontend/helpers/fixtures';
 import { propsData } from '../../../../../spec/frontend/monitoring/init_utils';
 import CustomMetricsFormFields from 'ee/custom_metrics/components/custom_metrics_form_fields.vue';
 import Tracking from '~/tracking';
@@ -17,6 +17,11 @@ import * as types from '~/monitoring/stores/mutation_types';
 
 const localVue = createLocalVue();
 
+const metricsDashboardFixture = getJSONFixture(
+  'metrics_dashboard/environment_metrics_dashboard.json',
+);
+const metricsDashboardPayload = metricsDashboardFixture.dashboard;
+
 describe('Dashboard', () => {
   let Component;
   let mock;
@@ -56,9 +61,10 @@ describe('Dashboard', () => {
       `monitoringDashboard/${types.RECEIVE_METRICS_DATA_SUCCESS}`,
       metricsDashboardPayload,
     );
+
     component.vm.$store.commit(
       `monitoringDashboard/${types.RECEIVE_METRIC_RESULT_SUCCESS}`,
-      mockedQueryResultPayload,
+      mockedQueryResultFixture,
     );
     component.vm.$store.commit(
       `monitoringDashboard/${types.RECEIVE_ENVIRONMENTS_DATA_SUCCESS}`,

spec/frontend/fixtures/metrics_dashboard.rb

+# frozen_string_literal: true
+
+require 'spec_helper'
+
+describe MetricsDashboard, '(JavaScript fixtures)', type: :controller do
+  include JavaScriptFixturesHelpers
+  include MetricsDashboardHelpers
+
+  let(:user) { create(:user) }
+  let(:project) { project_with_dashboard('.gitlab/dashboards/test.yml') }
+  let(:environment) { create(:environment, project: project) }
+  let(:params) { { environment: environment } }
+
+  before(:all) do
+    clean_frontend_fixtures('metrics_dashboard/')
+  end
+
+  controller(::ApplicationController) do
+    include MetricsDashboard
+  end
+
+  before do
+    sign_in(user)
+    project.add_maintainer(user)
+
+    allow(controller).to receive(:project).and_return(project)
+    allow(controller)
+        .to receive(:metrics_dashboard_params)
+                .and_return(params)
+  end
+
+  after do
+    remove_repository(project)
+  end
+
+  it 'metrics_dashboard/environment_metrics_dashboard.json' do
+    routes.draw { get "metrics_dashboard" => "anonymous#metrics_dashboard" }
+    response = get :metrics_dashboard, format: :json
+    expect(response).to be_successful
+  end
+end

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

@@ -10,16 +10,21 @@ import TimeSeries from '~/monitoring/components/charts/time_series.vue';
 import * as types from '~/monitoring/stores/mutation_types';
 import {
   deploymentData,
-  metricsDashboardPayload,
-  mockedQueryResultPayload,
+  mockedQueryResultFixture,
   metricsDashboardViewModel,
   mockProjectDir,
   mockHost,
 } from '../../mock_data';
 import * as iconUtils from '~/lib/utils/icon_utils';
+import { getJSONFixture } from '../../../helpers/fixtures';
 
 const mockSvgPathContent = 'mockSvgPathContent';
 
+const metricsDashboardFixture = getJSONFixture(
+  'metrics_dashboard/environment_metrics_dashboard.json',
+);
+const metricsDashboardPayload = metricsDashboardFixture.dashboard;
+
 jest.mock('lodash/throttle', () =>
   // this throttle mock executes immediately
   jest.fn(func => {
@@ -59,13 +64,11 @@ describe('Time series component', () => {
 
       store.commit(`monitoringDashboard/${types.RECEIVE_DEPLOYMENTS_DATA_SUCCESS}`, deploymentData);
 
-      // Mock data contains 2 panel groups, with 1 and 2 panels respectively
       store.commit(
         `monitoringDashboard/${types.RECEIVE_METRIC_RESULT_SUCCESS}`,
-        mockedQueryResultPayload,
+        mockedQueryResultFixture,
       );
-
-      // Pick the second panel group and the first panel in it
+      // dashboard is a dynamically generated fixture and stored at environment_metrics_dashboard.json
       [mockGraphData] = store.state.monitoringDashboard.dashboard.panelGroups[0].panels;
     });
 
@@ -189,9 +192,8 @@ describe('Time series component', () => {
             });
 
             it('formats tooltip content', () => {
-              const name = 'Total';
-              const value = '5.556MB';
-
+              const name = 'Status Code';
+              const value = '5.556';
               const dataIndex = 0;
               const seriesLabel = timeSeriesChart.find(GlChartSeriesLabel);
 
@@ -399,7 +401,7 @@ describe('Time series component', () => {
             });
 
             it('formats and rounds to 2 decimal places', () => {
-              expect(dataFormatter(0.88888)).toBe('0.89MB');
+              expect(dataFormatter(0.88888)).toBe('0.89');
             });
 
             it('deployment formatter is set as is required to display a tooltip', () => {
@@ -441,7 +443,7 @@ describe('Time series component', () => {
           it('constructs a label for the chart y-axis', () => {
             const { yAxis } = getChartOptions();
 
-            expect(yAxis[0].name).toBe('Total Memory Used');
+            expect(yAxis[0].name).toBe('Requests / Sec');
           });
         });
       });
@@ -544,7 +546,7 @@ describe('Time series component', () => {
         store = createStore();
         const graphData = cloneDeep(metricsDashboardViewModel.panelGroups[0].panels[3]);
         graphData.metrics.forEach(metric =>
-          Object.assign(metric, { result: mockedQueryResultPayload.result }),
+          Object.assign(metric, { result: mockedQueryResultFixture.result }),
         );
 
         timeSeriesChart = makeTimeSeriesChart(graphData, 'area-chart');

spec/frontend/monitoring/components/dashboard_spec.js

@@ -6,6 +6,7 @@ import axios from '~/lib/utils/axios_utils';
 import statusCodes from '~/lib/utils/http_status';
 import { metricStates } from '~/monitoring/constants';
 import Dashboard from '~/monitoring/components/dashboard.vue';
+import { getJSONFixture } from '../../../../spec/frontend/helpers/fixtures';
 
 import DateTimePicker from '~/vue_shared/components/date_time_picker/date_time_picker.vue';
 import DashboardsDropdown from '~/monitoring/components/dashboards_dropdown.vue';
@@ -15,16 +16,20 @@ import { createStore } from '~/monitoring/stores';
 import * as types from '~/monitoring/stores/mutation_types';
 import { setupComponentStore, propsData } from '../init_utils';
 import {
-  metricsDashboardPayload,
-  mockedQueryResultPayload,
   metricsDashboardViewModel,
   environmentData,
   dashboardGitResponse,
+  mockedQueryResultFixture,
 } from '../mock_data';
 
 const localVue = createLocalVue();
 const expectedPanelCount = 4;
 
+const metricsDashboardFixture = getJSONFixture(
+  'metrics_dashboard/environment_metrics_dashboard.json',
+);
+const metricsDashboardPayload = metricsDashboardFixture.dashboard;
+
 describe('Dashboard', () => {
   let store;
   let wrapper;
@@ -196,7 +201,7 @@ describe('Dashboard', () => {
     );
     wrapper.vm.$store.commit(
       `monitoringDashboard/${types.RECEIVE_METRIC_RESULT_SUCCESS}`,
-      mockedQueryResultPayload,
+      mockedQueryResultFixture,
     );
 
     return wrapper.vm.$nextTick().then(() => {

spec/frontend/monitoring/mock_data.js

@@ -242,95 +242,75 @@ export const metricsNewGroupsAPIResponse = [
   },
 ];
 
+const metricsResult = [
+  {
+    metric: {},
+    values: [
+      [1563272065.589, '10.396484375'],
+      [1563272125.589, '10.333984375'],
+      [1563272185.589, '10.333984375'],
+      [1563272245.589, '10.333984375'],
+      [1563272305.589, '10.333984375'],
+      [1563272365.589, '10.333984375'],
+      [1563272425.589, '10.38671875'],
+      [1563272485.589, '10.333984375'],
+      [1563272545.589, '10.333984375'],
+      [1563272605.589, '10.333984375'],
+      [1563272665.589, '10.333984375'],
+      [1563272725.589, '10.333984375'],
+      [1563272785.589, '10.396484375'],
+      [1563272845.589, '10.333984375'],
+      [1563272905.589, '10.333984375'],
+      [1563272965.589, '10.3984375'],
+      [1563273025.589, '10.337890625'],
+      [1563273085.589, '10.34765625'],
+      [1563273145.589, '10.337890625'],
+      [1563273205.589, '10.337890625'],
+      [1563273265.589, '10.337890625'],
+      [1563273325.589, '10.337890625'],
+      [1563273385.589, '10.337890625'],
+      [1563273445.589, '10.337890625'],
+      [1563273505.589, '10.337890625'],
+      [1563273565.589, '10.337890625'],
+      [1563273625.589, '10.337890625'],
+      [1563273685.589, '10.337890625'],
+      [1563273745.589, '10.337890625'],
+      [1563273805.589, '10.337890625'],
+      [1563273865.589, '10.390625'],
+      [1563273925.589, '10.390625'],
+    ],
+  },
+];
+
 export const mockedEmptyResult = {
   metricId: '1_response_metrics_nginx_ingress_throughput_status_code',
   result: [],
 };
 
+export const mockedEmptyThroughputResult = {
+  metricId: 'undefined_response_metrics_nginx_ingress_16_throughput_status_code',
+  result: [],
+};
+
 export const mockedQueryResultPayload = {
   metricId: '12_system_metrics_kubernetes_container_memory_total',
-  result: [
-    {
-      metric: {},
-      values: [
-        [1563272065.589, '10.396484375'],
-        [1563272125.589, '10.333984375'],
-        [1563272185.589, '10.333984375'],
-        [1563272245.589, '10.333984375'],
-        [1563272305.589, '10.333984375'],
-        [1563272365.589, '10.333984375'],
-        [1563272425.589, '10.38671875'],
-        [1563272485.589, '10.333984375'],
-        [1563272545.589, '10.333984375'],
-        [1563272605.589, '10.333984375'],
-        [1563272665.589, '10.333984375'],
-        [1563272725.589, '10.333984375'],
-        [1563272785.589, '10.396484375'],
-        [1563272845.589, '10.333984375'],
-        [1563272905.589, '10.333984375'],
-        [1563272965.589, '10.3984375'],
-        [1563273025.589, '10.337890625'],
-        [1563273085.589, '10.34765625'],
-        [1563273145.589, '10.337890625'],
-        [1563273205.589, '10.337890625'],
-        [1563273265.589, '10.337890625'],
-        [1563273325.589, '10.337890625'],
-        [1563273385.589, '10.337890625'],
-        [1563273445.589, '10.337890625'],
-        [1563273505.589, '10.337890625'],
-        [1563273565.589, '10.337890625'],
-        [1563273625.589, '10.337890625'],
-        [1563273685.589, '10.337890625'],
-        [1563273745.589, '10.337890625'],
-        [1563273805.589, '10.337890625'],
-        [1563273865.589, '10.390625'],
-        [1563273925.589, '10.390625'],
-      ],
-    },
-  ],
+  result: metricsResult,
 };
 
 export const mockedQueryResultPayloadCoresTotal = {
   metricId: '13_system_metrics_kubernetes_container_cores_total',
-  result: [
-    {
-      metric: {},
-      values: [
-        [1563272065.589, '9.396484375'],
-        [1563272125.589, '9.333984375'],
-        [1563272185.589, '9.333984375'],
-        [1563272245.589, '9.333984375'],
-        [1563272305.589, '9.333984375'],
-        [1563272365.589, '9.333984375'],
-        [1563272425.589, '9.38671875'],
-        [1563272485.589, '9.333984375'],
-        [1563272545.589, '9.333984375'],
-        [1563272605.589, '9.333984375'],
-        [1563272665.589, '9.333984375'],
-        [1563272725.589, '9.333984375'],
-        [1563272785.589, '9.396484375'],
-        [1563272845.589, '9.333984375'],
-        [1563272905.589, '9.333984375'],
-        [1563272965.589, '9.3984375'],
-        [1563273025.589, '9.337890625'],
-        [1563273085.589, '9.34765625'],
-        [1563273145.589, '9.337890625'],
-        [1563273205.589, '9.337890625'],
-        [1563273265.589, '9.337890625'],
-        [1563273325.589, '9.337890625'],
-        [1563273385.589, '9.337890625'],
-        [1563273445.589, '9.337890625'],
-        [1563273505.589, '9.337890625'],
-        [1563273565.589, '9.337890625'],
-        [1563273625.589, '9.337890625'],
-        [1563273685.589, '9.337890625'],
-        [1563273745.589, '9.337890625'],
-        [1563273805.589, '9.337890625'],
-        [1563273865.589, '9.390625'],
-        [1563273925.589, '9.390625'],
-      ],
-    },
-  ],
+  result: metricsResult,
+};
+
+export const mockedQueryResultFixture = {
+  // First metric in fixture `metrics_dashboard/environment_metrics_dashboard.json`
+  metricId: 'undefined_response_metrics_nginx_ingress_throughput_status_code',
+  result: metricsResult,
+};
+
+export const mockedQueryResultFixtureStatusCode = {
+  metricId: 'undefined_response_metrics_nginx_ingress_latency_pod_average',
+  result: metricsResult,
 };
 
 const extraEnvironmentData = new Array(15).fill(null).map((_, idx) => ({

spec/frontend/monitoring/store/getters_spec.js

@@ -4,11 +4,16 @@ import * as types from '~/monitoring/stores/mutation_types';
 import { metricStates } from '~/monitoring/constants';
 import {
   environmentData,
-  metricsDashboardPayload,
-  mockedEmptyResult,
-  mockedQueryResultPayload,
-  mockedQueryResultPayloadCoresTotal,
+  mockedEmptyThroughputResult,
+  mockedQueryResultFixture,
+  mockedQueryResultFixtureStatusCode,
 } from '../mock_data';
+import { getJSONFixture } from '../../helpers/fixtures';
+
+const metricsDashboardFixture = getJSONFixture(
+  'metrics_dashboard/environment_metrics_dashboard.json',
+);
+const metricsDashboardPayload = metricsDashboardFixture.dashboard;
 
 describe('Monitoring store Getters', () => {
   describe('getMetricStates', () => {
@@ -55,14 +60,14 @@ describe('Monitoring store Getters', () => {
 
       it('on an empty metric with no result, returns NO_DATA', () => {
         mutations[types.RECEIVE_METRICS_DATA_SUCCESS](state, metricsDashboardPayload);
-        mutations[types.RECEIVE_METRIC_RESULT_SUCCESS](state, mockedEmptyResult);
+        mutations[types.RECEIVE_METRIC_RESULT_SUCCESS](state, mockedEmptyThroughputResult);
 
         expect(getMetricStates()).toEqual([metricStates.NO_DATA]);
       });
 
       it('on a metric with a result, returns OK', () => {
         mutations[types.RECEIVE_METRICS_DATA_SUCCESS](state, metricsDashboardPayload);
-        mutations[types.RECEIVE_METRIC_RESULT_SUCCESS](state, mockedQueryResultPayload);
+        mutations[types.RECEIVE_METRIC_RESULT_SUCCESS](state, mockedQueryResultFixture);
 
         expect(getMetricStates()).toEqual([metricStates.OK]);
       });
@@ -78,8 +83,8 @@ describe('Monitoring store Getters', () => {
 
       it('on multiple metrics with results, returns OK', () => {
         mutations[types.RECEIVE_METRICS_DATA_SUCCESS](state, metricsDashboardPayload);
-        mutations[types.RECEIVE_METRIC_RESULT_SUCCESS](state, mockedQueryResultPayload);
-        mutations[types.RECEIVE_METRIC_RESULT_SUCCESS](state, mockedQueryResultPayloadCoresTotal);
+        mutations[types.RECEIVE_METRIC_RESULT_SUCCESS](state, mockedQueryResultFixture);
+        mutations[types.RECEIVE_METRIC_RESULT_SUCCESS](state, mockedQueryResultFixtureStatusCode);
 
         expect(getMetricStates()).toEqual([metricStates.OK]);
 
@@ -110,7 +115,7 @@ describe('Monitoring store Getters', () => {
         mutations[types.RECEIVE_METRICS_DATA_SUCCESS](state, metricsDashboardPayload);
 
         // An success in 1 group
-        mutations[types.RECEIVE_METRIC_RESULT_SUCCESS](state, mockedQueryResultPayload);
+        mutations[types.RECEIVE_METRIC_RESULT_SUCCESS](state, mockedQueryResultFixture);
         // An error in 2 groups
         mutations[types.RECEIVE_METRIC_RESULT_FAILURE](state, {
           metricId: groups[0].panels[1].metrics[0].metricId,
@@ -176,38 +181,38 @@ describe('Monitoring store Getters', () => {
 
       it('an empty metric, returns empty', () => {
         mutations[types.RECEIVE_METRICS_DATA_SUCCESS](state, metricsDashboardPayload);
-        mutations[types.RECEIVE_METRIC_RESULT_SUCCESS](state, mockedEmptyResult);
+        mutations[types.RECEIVE_METRIC_RESULT_SUCCESS](state, mockedEmptyThroughputResult);
 
         expect(metricsWithData()).toEqual([]);
       });
 
       it('a metric with results, it returns a metric', () => {
         mutations[types.RECEIVE_METRICS_DATA_SUCCESS](state, metricsDashboardPayload);
-        mutations[types.RECEIVE_METRIC_RESULT_SUCCESS](state, mockedQueryResultPayload);
+        mutations[types.RECEIVE_METRIC_RESULT_SUCCESS](state, mockedQueryResultFixture);
 
-        expect(metricsWithData()).toEqual([mockedQueryResultPayload.metricId]);
+        expect(metricsWithData()).toEqual([mockedQueryResultFixture.metricId]);
       });
 
       it('multiple metrics with results, it return multiple metrics', () => {
         mutations[types.RECEIVE_METRICS_DATA_SUCCESS](state, metricsDashboardPayload);
-        mutations[types.RECEIVE_METRIC_RESULT_SUCCESS](state, mockedQueryResultPayload);
-        mutations[types.RECEIVE_METRIC_RESULT_SUCCESS](state, mockedQueryResultPayloadCoresTotal);
+        mutations[types.RECEIVE_METRIC_RESULT_SUCCESS](state, mockedQueryResultFixture);
+        mutations[types.RECEIVE_METRIC_RESULT_SUCCESS](state, mockedQueryResultFixtureStatusCode);
 
         expect(metricsWithData()).toEqual([
-          mockedQueryResultPayload.metricId,
-          mockedQueryResultPayloadCoresTotal.metricId,
+          mockedQueryResultFixture.metricId,
+          mockedQueryResultFixtureStatusCode.metricId,
         ]);
       });
 
       it('multiple metrics with results, it returns metrics filtered by group', () => {
         mutations[types.RECEIVE_METRICS_DATA_SUCCESS](state, metricsDashboardPayload);
-        mutations[types.RECEIVE_METRIC_RESULT_SUCCESS](state, mockedQueryResultPayload);
-        mutations[types.RECEIVE_METRIC_RESULT_SUCCESS](state, mockedQueryResultPayloadCoresTotal);
+        mutations[types.RECEIVE_METRIC_RESULT_SUCCESS](state, mockedQueryResultFixture);
+        mutations[types.RECEIVE_METRIC_RESULT_SUCCESS](state, mockedQueryResultFixtureStatusCode);
 
         // First group has metrics
         expect(metricsWithData(state.dashboard.panelGroups[0].key)).toEqual([
-          mockedQueryResultPayload.metricId,
-          mockedQueryResultPayloadCoresTotal.metricId,
+          mockedQueryResultFixture.metricId,
+          mockedQueryResultFixtureStatusCode.metricId,
         ]);
 
         // Second group has no metrics

spec/frontend/monitoring/store/mutations_spec.js

@@ -5,7 +5,13 @@ import * as types from '~/monitoring/stores/mutation_types';
 import state from '~/monitoring/stores/state';
 import { metricStates } from '~/monitoring/constants';
 
-import { metricsDashboardPayload, deploymentData, dashboardGitResponse } from '../mock_data';
+import { deploymentData, dashboardGitResponse } from '../mock_data';
+import { getJSONFixture } from '../../helpers/fixtures';
+
+const metricsDashboardFixture = getJSONFixture(
+  'metrics_dashboard/environment_metrics_dashboard.json',
+);
+const metricsDashboardPayload = metricsDashboardFixture.dashboard;
 
 describe('Monitoring mutations', () => {
   let stateCopy;
@@ -26,32 +32,31 @@ describe('Monitoring mutations', () => {
       mutations[types.RECEIVE_METRICS_DATA_SUCCESS](stateCopy, payload);
       const groups = getGroups();
 
-      expect(groups[0].key).toBe('system-metrics-kubernetes-0');
-      expect(groups[1].key).toBe('response-metrics-nginx-ingress-vts-1');
+      expect(groups[0].key).toBe('response-metrics-nginx-ingress-vts-0');
+      expect(groups[1].key).toBe('response-metrics-nginx-ingress-1');
     });
     it('normalizes values', () => {
       mutations[types.RECEIVE_METRICS_DATA_SUCCESS](stateCopy, payload);
-      const expectedLabel = 'Pod average';
+      const expectedLabel = '5xx Errors (%)';
 
       const { label, queryRange } = getGroups()[0].panels[2].metrics[0];
       expect(label).toEqual(expectedLabel);
       expect(queryRange.length).toBeGreaterThan(0);
     });
-    it('contains two groups, with panels with a metric each', () => {
+    it('contains six groups, with panels with a metric each', () => {
       mutations[types.RECEIVE_METRICS_DATA_SUCCESS](stateCopy, payload);
 
       const groups = getGroups();
 
       expect(groups).toBeDefined();
-      expect(groups).toHaveLength(2);
+      expect(groups).toHaveLength(6);
 
-      expect(groups[0].panels).toHaveLength(4);
+      expect(groups[0].panels).toHaveLength(3);
       expect(groups[0].panels[0].metrics).toHaveLength(1);
       expect(groups[0].panels[1].metrics).toHaveLength(1);
       expect(groups[0].panels[2].metrics).toHaveLength(1);
-      expect(groups[0].panels[3].metrics).toHaveLength(5);
 
-      expect(groups[1].panels).toHaveLength(1);
+      expect(groups[1].panels).toHaveLength(3);
       expect(groups[1].panels[0].metrics).toHaveLength(1);
     });
     it('assigns metrics a metric id', () => {
@@ -60,10 +65,10 @@ describe('Monitoring mutations', () => {
       const groups = getGroups();
 
       expect(groups[0].panels[0].metrics[0].metricId).toEqual(
-        '12_system_metrics_kubernetes_container_memory_total',
+        'undefined_response_metrics_nginx_ingress_throughput_status_code',
       );
       expect(groups[1].panels[0].metrics[0].metricId).toEqual(
-        '1_response_metrics_nginx_ingress_throughput_status_code',
+        'undefined_response_metrics_nginx_ingress_16_throughput_status_code',
       );
     });
   });
@@ -123,7 +128,7 @@ describe('Monitoring mutations', () => {
   });
 
   describe('Individual panel/metric results', () => {
-    const metricId = '12_system_metrics_kubernetes_container_memory_total';
+    const metricId = 'undefined_response_metrics_nginx_ingress_throughput_status_code';
     const result = [
       {
         values: [[0, 1], [1, 1], [1, 3]],