Merge promVariables instead of replacing

Renamed some variables and mutations
to align better with what the intentions
of those are

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

@@ -38,7 +38,7 @@ export default {
     <div v-for="(val, key) in promVariables" :key="key" class="mb-1 pr-2 d-flex d-sm-block">
       <gl-form-group :label="key" class="mb-0 flex-grow-1">
         <gl-form-input
-          :value="promVariables[key]"
+          :value="val"
           :name="key"
           @keyup.native.enter="refreshDashboard"
           @blur.native="refreshDashboard"

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

@@ -395,8 +395,8 @@ export const duplicateSystemDashboard = ({ state }, payload) => {
 
 // Variables manipulation
 
-export const setVariableData = ({ commit }, changedVariable) => {
-  commit(types.SET_NEW_VARIABLE_DATA, changedVariable);
+export const setVariableData = ({ commit }, updatedVariable) => {
+  commit(types.UPDATE_VARIABLE_DATA, updatedVariable);
 };
 
 // prevent babel-plugin-rewire from generating an invalid default during karma tests

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

@@ -98,9 +98,9 @@ export const filteredEnvironments = state =>
 
 /**
  * Maps an variables object to an array
+ * @param {Object} variables - Custom variables provided by the user
  * @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
  */
 
 export const getCustomVariablesArray = state =>

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

@@ -3,7 +3,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_PROM_QUERY_VARIABLES = 'SET_PROM_QUERY_VARIABLES';
-export const SET_NEW_VARIABLE_DATA = 'SET_NEW_VARIABLE_DATA';
+export const UPDATE_VARIABLE_DATA = 'UPDATE_VARIABLE_DATA';
 
 // Annotations
 export const RECEIVE_ANNOTATIONS_SUCCESS = 'RECEIVE_ANNOTATIONS_SUCCESS';

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

-import pick from 'lodash/pick';
+import { pick } from 'lodash';
 import * as types from './mutation_types';
 import { mapToDashboardViewModel, normalizeQueryResult } from './utils';
 import { BACKOFF_TIMEOUT } from '../../lib/utils/common_utils';
@@ -51,18 +51,6 @@ const emptyStateFromError = error => {
   return metricStates.UNKNOWN_ERROR;
 };
 
-/**
- * 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
- */
-
-const transformVariablesObjectArray = variables =>
-  Object.entries(variables)
-    .flat()
-    .map(encodeURIComponent);
-
 export default {
   /**
    * Dashboard panels structure and global state
@@ -184,7 +172,7 @@ export default {
   [types.SET_PROM_QUERY_VARIABLES](state, variables) {
     state.promVariables = variables;
   },
-  [types.SET_NEW_VARIABLE_DATA](state, newVariable) {
+  [types.UPDATE_VARIABLE_DATA](state, newVariable) {
     Object.assign(state.promVariables, {
       ...state.promVariables,
       ...newVariable,

spec/frontend/monitoring/components/variables_section_spec.js

@@ -105,7 +105,7 @@ describe('Metrics dashboard/variables section component', () => {
       expect(fetchDashboardData).toHaveBeenCalled();
     });
 
-    it('does not merge the url params and refreshes the dashboard if the value entered is not different that is what currently stored', () =>{
+    it('does not merge the url params and refreshes the dashboard if the value entered is not different that is what currently stored', () => {
       const firstInput = getInputAt(0);
 
       firstInput.vm.$emit('input');

spec/frontend/monitoring/store/mutations_spec.js

@@ -379,13 +379,13 @@ describe('Monitoring mutations', () => {
     });
   });
 
-  describe('SET_NEW_VARIABLE_DATA', () => {
+  describe('UPDATE_VARIABLE_DATA', () => {
     beforeEach(() => {
       mutations[types.SET_PROM_QUERY_VARIABLES](stateCopy, { pod: 'POD' });
     });
 
     it('sets a new value for an existing key', () => {
-      mutations[types.SET_NEW_VARIABLE_DATA](stateCopy, { pod: 'new pod' });
+      mutations[types.UPDATE_VARIABLE_DATA](stateCopy, { pod: 'new pod' });
 
       expect(stateCopy.promVariables).toEqual({ pod: 'new pod' });
     });