Changed v-model logic

This changes the v-model logic to
compare if the input values are
different to what's in store
preventing multiple refreshes when
changing the inputs

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

@@ -12,14 +12,23 @@ export default {
     ...mapState('monitoringDashboard', ['promVariables']),
   },
   methods: {
-    ...mapActions('monitoringDashboard', ['fetchDashboardData']),
-    refreshDashboard() {
-      updateHistory({
-        url: mergeUrlParams(this.promVariables, window.location.href),
-        title: document.title,
-      });
+    ...mapActions('monitoringDashboard', ['fetchDashboardData', 'setVariableData']),
+    refreshDashboard(event) {
+      const { name, value } = event.target;
 
-      this.fetchDashboardData();
+      if (this.promVariables[name] !== value) {
+        const changedVariable = {};
+        changedVariable[name] = value;
+
+        this.setVariableData(changedVariable);
+
+        updateHistory({
+          url: mergeUrlParams(this.promVariables, window.location.href),
+          title: document.title,
+        });
+
+        this.fetchDashboardData();
+      }
     },
   },
 };
@@ -29,10 +38,10 @@ 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
-          v-model="promVariables[key]"
+          :value="promVariables[key]"
           :name="key"
           @keyup.native.enter="refreshDashboard"
-          @blur="refreshDashboard"
+          @blur.native="refreshDashboard"
         />
       </gl-form-group>
     </div>

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

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

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

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

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

@@ -172,4 +172,10 @@ export default {
   [types.SET_PROM_QUERY_VARIABLES](state, variables) {
     state.promVariables = variables;
   },
+  [types.SET_NEW_VARIABLE_DATA](state, newVariable) {
+    Object.assign(state.promVariables, {
+      ...state.promVariables,
+      ...newVariable,
+    });
+  },
 };

spec/frontend/monitoring/components/variables_section_spec.js

@@ -57,6 +57,7 @@ describe('Metrics dashboard/variables section component', () => {
 
   describe('when changing the variable inputs', () => {
     const fetchDashboardData = jest.fn();
+    const setVariableData = jest.fn();
 
     beforeEach(() => {
       store = new Vuex.Store({
@@ -69,6 +70,7 @@ describe('Metrics dashboard/variables section component', () => {
             },
             actions: {
               fetchDashboardData,
+              setVariableData,
             },
           },
         },
@@ -80,9 +82,11 @@ describe('Metrics dashboard/variables section component', () => {
     it('merges the url params and refreshes the dashboard when a form input is blurred', () => {
       const firstInput = getInputAt(0);
 
+      firstInput.element.value = 'POD';
       firstInput.vm.$emit('input');
-      firstInput.vm.$emit('blur');
+      firstInput.trigger('blur');
 
+      expect(setVariableData).toHaveBeenCalled();
       expect(mergeUrlParams).toHaveBeenCalledWith(sampleVariables, window.location.href);
       expect(updateHistory).toHaveBeenCalled();
       expect(fetchDashboardData).toHaveBeenCalled();
@@ -91,12 +95,26 @@ describe('Metrics dashboard/variables section component', () => {
     it('merges the url params and refreshes the dashboard when a form input has received an enter key press', () => {
       const firstInput = getInputAt(0);
 
+      firstInput.element.value = 'POD';
       firstInput.vm.$emit('input');
       firstInput.trigger('keyup.enter');
 
+      expect(setVariableData).toHaveBeenCalled();
       expect(mergeUrlParams).toHaveBeenCalledWith(sampleVariables, window.location.href);
       expect(updateHistory).toHaveBeenCalled();
       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', () =>{
+      const firstInput = getInputAt(0);
+
+      firstInput.vm.$emit('input');
+      firstInput.trigger('keyup.enter');
+
+      expect(setVariableData).not.toHaveBeenCalled();
+      expect(mergeUrlParams).not.toHaveBeenCalled();
+      expect(updateHistory).not.toHaveBeenCalled();
+      expect(fetchDashboardData).not.toHaveBeenCalled();
+    });
   });
 });

spec/frontend/monitoring/store/getters_spec.js

@@ -342,5 +342,12 @@ describe('Monitoring store Getters', () => {
 
       expect(variablesArray).toEqual(['label1', 'pod']);
     });
+
+    it('transforms the promVariables object to an empty array when no keys are present', () => {
+      mutations[types.SET_PROM_QUERY_VARIABLES](state, {});
+      const variablesArray = getters.getCustomVariablesArray(state);
+
+      expect(variablesArray).toEqual([]);
+    });
   });
 });

spec/frontend/monitoring/store/mutations_spec.js

@@ -378,4 +378,16 @@ describe('Monitoring mutations', () => {
       expect(stateCopy.promVariables).toEqual({ pod: 'POD', stage: 'main ops' });
     });
   });
+
+  describe('SET_NEW_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' });
+
+      expect(stateCopy.promVariables).toEqual({ pod: 'new pod' });
+    });
+  });
 });