Change the name of utility functions

Also changed the way the variables array
is constructed, the format allows to use
`flat` without requiring any external
libraries

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

@@ -38,7 +38,7 @@ import {
   timeRangeFromUrl,
   panelToUrl,
   expandedPanelPayloadFromUrl,
-  customVariablesFromUrl,
+  promCustomVariablesFromUrl,
 } from '../utils';
 import { metricStates } from '../constants';
 import { defaultTimeRange, timeRanges } from '~/vue_shared/constants';
@@ -283,7 +283,7 @@ export default {
       this.setGettingStartedEmptyState();
     } else {
       this.setTimeRange(this.selectedTimeRange);
-      this.setVariables(customVariablesFromUrl());
+      this.setVariables(promCustomVariablesFromUrl());
       this.fetchData();
     }
   },

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

@@ -81,7 +81,7 @@ export const setTimeRange = ({ commit }, timeRange) => {
 };
 
 export const setVariables = ({ commit }, variables) => {
-  commit(types.SET_QUERY_VARIABLES, variables);
+  commit(types.SET_PROM_QUERY_VARIABLES, variables);
 };
 
 export const filterEnvironments = ({ commit, dispatch }, searchTerm) => {

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

@@ -2,7 +2,7 @@
 export const REQUEST_METRICS_DASHBOARD = 'REQUEST_METRICS_DASHBOARD';
 export const RECEIVE_METRICS_DASHBOARD_SUCCESS = 'RECEIVE_METRICS_DASHBOARD_SUCCESS';
 export const RECEIVE_METRICS_DASHBOARD_FAILURE = 'RECEIVE_METRICS_DASHBOARD_FAILURE';
-export const SET_QUERY_VARIABLES = 'SET_QUERY_VARIABLES';
+export const SET_PROM_QUERY_VARIABLES = 'SET_PROM_QUERY_VARIABLES';
 
 // Annotations
 export const RECEIVE_ANNOTATIONS_SUCCESS = 'RECEIVE_ANNOTATIONS_SUCCESS';

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

@@ -58,19 +58,10 @@ const emptyStateFromError = error => {
  * @param {Object} variables - Custom variables provided by the user
  */
 
-const transformVariablesObjectArray = variables => {
-  let variablesArr = [];
-  const variablesKeys = Object.keys(variables);
-
-  variablesArr = variablesKeys.reduce((acc, key) => {
-    acc.push(key);
-    acc.push(`${key}_${variables[key]}`);
-
-    return acc;
-  }, []);
-
-  return variablesArr;
-};
+const transformVariablesObjectArray = variables =>
+  Object.entries(variables)
+    .flat()
+    .map(encodeURIComponent);
 
 export default {
   /**
@@ -190,7 +181,7 @@ export default {
     state.expandedPanel.group = group;
     state.expandedPanel.panel = panel;
   },
-  [types.SET_QUERY_VARIABLES](state, variables) {
+  [types.SET_PROM_QUERY_VARIABLES](state, variables) {
     state.promVariables = transformVariablesObjectArray(variables);
   },
 };

app/assets/javascripts/monitoring/utils.js

@@ -127,7 +127,7 @@ export const timeRangeFromUrl = (search = window.location.search) => {
  * @param {String} New URL
  */
 
-export const customVariablesFromUrl = (search = window.location.search) => {
+export const promCustomVariablesFromUrl = (search = window.location.search) => {
   const params = queryToObject(search);
   const paramsToRemove = timeRangeParamNames.concat(dashboardParams);
 

spec/frontend/monitoring/store/actions_spec.js

@@ -399,14 +399,14 @@ describe('Monitoring store actions', () => {
     beforeEach(() => {
       mockedState = storeState();
     });
-    it('should commit SET_QUERY_VARIABLES mutation', done => {
+    it('should commit SET_PROM_QUERY_VARIABLES mutation', done => {
       testAction(
         setVariables,
         { pod: 'POD' },
         mockedState,
         [
           {
-            type: types.SET_QUERY_VARIABLES,
+            type: types.SET_PROM_QUERY_VARIABLES,
             payload: { pod: 'POD' },
           },
         ],

spec/frontend/monitoring/store/mutations_spec.js

@@ -365,17 +365,17 @@ describe('Monitoring mutations', () => {
     });
   });
 
-  describe('SET_QUERY_VARIABLES', () => {
+  describe('SET_PROM_QUERY_VARIABLES', () => {
     it('stores an empty variables array when no custom variables are given', () => {
-      mutations[types.SET_QUERY_VARIABLES](stateCopy, {});
+      mutations[types.SET_PROM_QUERY_VARIABLES](stateCopy, {});
 
       expect(stateCopy.promVariables).toEqual([]);
     });
 
     it('stores variables in the key key_value format in the array', () => {
-      mutations[types.SET_QUERY_VARIABLES](stateCopy, { pod: 'POD' });
+      mutations[types.SET_PROM_QUERY_VARIABLES](stateCopy, { pod: 'POD' });
 
-      expect(stateCopy.promVariables).toEqual(['pod', 'pod_POD']);
+      expect(stateCopy.promVariables).toEqual(['pod', 'POD']);
     });
   });
 });

spec/frontend/monitoring/utils_spec.js

@@ -169,8 +169,8 @@ describe('monitoring/utils', () => {
     });
   });
 
-  describe('customVariablesFromUrl', () => {
-    const { customVariablesFromUrl } = monitoringUtils;
+  describe('promCustomVariablesFromUrl', () => {
+    const { promCustomVariablesFromUrl } = monitoringUtils;
 
     it('returns an object with only the custom variables', () => {
       queryToObject.mockReturnValueOnce({
@@ -178,7 +178,7 @@ describe('monitoring/utils', () => {
         pod: 'POD',
       });
 
-      expect(customVariablesFromUrl()).toEqual(expect.objectContaining({ pod: 'POD' }));
+      expect(promCustomVariablesFromUrl()).toEqual(expect.objectContaining({ pod: 'POD' }));
     });
 
     it('returns an empty object when no custom variables are present', () => {
@@ -188,7 +188,7 @@ describe('monitoring/utils', () => {
         param2: 'value2',
       };
 
-      expect(customVariablesFromUrl(params, mockPath)).toStrictEqual({});
+      expect(promCustomVariablesFromUrl(params, mockPath)).toStrictEqual({});
     });
   });