Add test cases

This adds extra test cases and changes the
location of setting up the dashboard store
from the component to the monitoring_bundle.js
file

app/assets/javascripts/monitoring/components/dashboard.vue

@@ -38,7 +38,6 @@ import {
   timeRangeFromUrl,
   panelToUrl,
   expandedPanelPayloadFromUrl,
-  promCustomVariablesFromUrl,
 } from '../utils';
 import { metricStates } from '../constants';
 import { defaultTimeRange, timeRanges } from '~/vue_shared/constants';
@@ -283,14 +282,12 @@ export default {
       this.setGettingStartedEmptyState();
     } else {
       this.setTimeRange(this.selectedTimeRange);
-      this.setVariables(promCustomVariablesFromUrl());
       this.fetchData();
     }
   },
   methods: {
     ...mapActions('monitoringDashboard', [
       'setTimeRange',
-      'setVariables',
       'fetchData',
       'fetchDashboardData',
       'setGettingStartedEmptyState',

app/assets/javascripts/monitoring/monitoring_bundle.js

@@ -4,6 +4,7 @@ import Dashboard from '~/monitoring/components/dashboard.vue';
 import { parseBoolean } from '~/lib/utils/common_utils';
 import { getParameterValues } from '~/lib/utils/url_utility';
 import store from './stores';
+import { promCustomVariablesFromUrl } from './utils';
 
 Vue.use(GlToast);
 
@@ -13,6 +14,8 @@ export default (props = {}) => {
   if (el && el.dataset) {
     const [currentDashboard] = getParameterValues('dashboard');
 
+    store.dispatch('monitoringDashboard/setVariables', promCustomVariablesFromUrl());
+
     // eslint-disable-next-line no-new
     new Vue({
       el,

app/assets/javascripts/monitoring/stores/mutations.js

@@ -52,7 +52,7 @@ const emptyStateFromError = error => {
 };
 
 /**
- * Maps a backened error state to a `metricStates` constant
+ * Maps an variables object to an array
  * @returns {Array} The custom variables array to be send to the API
  * in the format of [variable1, variable1_value]
  * @param {Object} variables - Custom variables provided by the user

app/assets/javascripts/monitoring/utils.js

@@ -8,6 +8,8 @@ import {
 
 /**
  * List of non time range url parameters
+ * This will be removed once we add support for free text variables
+ * via the dashboard yaml files in https://gitlab.com/gitlab-org/gitlab/-/issues/215689
  */
 export const dashboardParams = ['dashboard', 'group', 'title', 'y_label'];
 

spec/frontend/monitoring/components/dashboard_spec.js

@@ -102,7 +102,7 @@ describe('Dashboard', () => {
   });
 
   describe('request information to the server', () => {
-    it('calls to set time range, variables and fetch data', () => {
+    it('calls to set time range and fetch data', () => {
       createShallowWrapper({ hasMetrics: true });
 
       return wrapper.vm.$nextTick().then(() => {
@@ -111,11 +111,6 @@ describe('Dashboard', () => {
           expect.any(Object),
         );
 
-        expect(store.dispatch).toHaveBeenCalledWith(
-          'monitoringDashboard/setVariables',
-          expect.any(Object),
-        );
-
         expect(store.dispatch).toHaveBeenCalledWith('monitoringDashboard/fetchData', undefined);
       });
     });

spec/frontend/monitoring/store/mutations_spec.js

@@ -373,9 +373,9 @@ describe('Monitoring mutations', () => {
     });
 
     it('stores variables in the key key_value format in the array', () => {
-      mutations[types.SET_PROM_QUERY_VARIABLES](stateCopy, { pod: 'POD' });
+      mutations[types.SET_PROM_QUERY_VARIABLES](stateCopy, { pod: 'POD', stage: 'main ops' });
 
-      expect(stateCopy.promVariables).toEqual(['pod', 'POD']);
+      expect(stateCopy.promVariables).toEqual(['pod', 'POD', 'stage', 'main%20ops']);
     });
   });
 });

spec/frontend/monitoring/utils_spec.js

@@ -172,9 +172,25 @@ describe('monitoring/utils', () => {
   describe('promCustomVariablesFromUrl', () => {
     const { promCustomVariablesFromUrl } = monitoringUtils;
 
+    beforeEach(() => {
+      jest.spyOn(urlUtils, 'queryToObject');
+    });
+
+    afterEach(() => {
+      urlUtils.queryToObject.mockRestore();
+    });
+
     it('returns an object with only the custom variables', () => {
-      queryToObject.mockReturnValueOnce({
+      urlUtils.queryToObject.mockReturnValueOnce({
         dashboard: '.gitlab/dashboards/custom_dashboard.yml',
+        y_label: 'memory usage',
+        group: 'kubernetes',
+        title: 'Kubernetes memory total',
+        start: '2020-05-06',
+        end: '2020-05-07',
+        duration_seconds: '86400',
+        direction: 'left',
+        anchor: 'top',
         pod: 'POD',
       });
 
@@ -182,13 +198,11 @@ describe('monitoring/utils', () => {
     });
 
     it('returns an empty object when no custom variables are present', () => {
-      const params = {
+      urlUtils.queryToObject.mockReturnValueOnce({
         dashboard: '.gitlab/dashboards/custom_dashboard.yml',
-        param1: 'value1',
-        param2: 'value2',
-      };
+      });
 
-      expect(promCustomVariablesFromUrl(params, mockPath)).toStrictEqual({});
+      expect(promCustomVariablesFromUrl()).toStrictEqual({});
     });
   });