Change mutations and state variables names

This changes the mutation implementation details
to external functions for readibility

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

@@ -212,7 +212,6 @@ export default {
       hasValidDates: true,
       timeRanges,
       isRearrangingPanels: false,
-      customVariables: customVariablesFromUrl(),
     };
   },
   computed: {
@@ -284,7 +283,7 @@ export default {
       this.setGettingStartedEmptyState();
     } else {
       this.setTimeRange(this.selectedTimeRange);
-      this.setVariables(this.customVariables);
+      this.setVariables(customVariablesFromUrl());
       this.fetchData();
     }
   },

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

@@ -228,8 +228,8 @@ export const fetchPrometheusMetric = ({ commit, state }, { metric, defaultQueryP
     queryParams.step = metric.step;
   }
 
-  if (state.variables.length > 0) {
-    queryParams.variables = state.variables;
+  if (state.promVariables.length > 0) {
+    queryParams.variables = state.promVariables;
   }
 
   commit(types.REQUEST_METRIC_RESULT, { metricId: metric.metricId });

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

@@ -51,6 +51,27 @@ const emptyStateFromError = error => {
   return metricStates.UNKNOWN_ERROR;
 };
 
+/**
+ * Maps a backened error state to a `metricStates` constant
+ * @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
+ */
+
+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;
+};
+
 export default {
   /**
    * Dashboard panels structure and global state
@@ -170,18 +191,6 @@ export default {
     state.expandedPanel.panel = panel;
   },
   [types.SET_QUERY_VARIABLES](state, variables) {
-    let variablesArr = [];
-    const variablesKeys = Object.keys(variables);
-
-    if (variablesKeys.length > 0) {
-      variablesArr = variablesKeys.reduce((acc, key) => {
-        acc.push(key);
-        acc.push(`${key}_${variables[key]}`);
-
-        return acc;
-      }, []);
-    }
-
-    state.variables = variablesArr;
+    state.promVariables = transformVariablesObjectArray(variables);
   },
 };

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

@@ -33,7 +33,7 @@ export default () => ({
     panel: null,
   },
   allDashboards: [],
-  variables: [],
+  promVariables: [],
 
   // Other project data
   annotations: [],

app/assets/javascripts/monitoring/utils.js

@@ -124,6 +124,7 @@ export const timeRangeFromUrl = (search = window.location.search) => {
  *
  * @returns {Array} The custom variables defined by the
  * user in the URL
+ * @param {String} New URL
  */
 
 export const customVariablesFromUrl = (search = window.location.search) => {

spec/frontend/monitoring/store/mutations_spec.js

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