Add latest changes from gitlab-org/gitlab@master

12 files changed, 291 insertions, 418 deletions

diff --git a/spec/frontend/monitoring/components/dashboard_spec.js b/spec/frontend/monitoring/components/dashboard_spec.js
index f894b2af5cf..cbcd8305c10 100644
--- a/spec/frontend/monitoring/components/dashboard_spec.js
+++ b/spec/frontend/monitoring/components/dashboard_spec.js
@@ -26,10 +26,9 @@ import {
   setMetricResult,
   setupStoreWithData,
   setupStoreWithDataForPanelCount,
-  setupStoreWithVariable,
   setupStoreWithLinks,
 } from '../store_utils';
-import { environmentData, dashboardGitResponse } from '../mock_data';
+import { environmentData, dashboardGitResponse, storeVariables } from '../mock_data';
 import {
   metricsDashboardViewModel,
   metricsDashboardPanelCount,
@@ -604,8 +603,7 @@ describe('Dashboard', () => {
     beforeEach(() => {
       createShallowWrapper({ hasMetrics: true });
       setupStoreWithData(store);
-      setupStoreWithVariable(store);
-
+      store.state.monitoringDashboard.variables = storeVariables;
       return wrapper.vm.$nextTick();
     });
 
diff --git a/spec/frontend/monitoring/components/variables/dropdown_field_spec.js b/spec/frontend/monitoring/components/variables/dropdown_field_spec.js
index 623125d18f1..cc384aef231 100644
--- a/spec/frontend/monitoring/components/variables/dropdown_field_spec.js
+++ b/spec/frontend/monitoring/components/variables/dropdown_field_spec.js
@@ -59,7 +59,7 @@ describe('Custom variable component', () => {
       .vm.$emit('click');
 
     return wrapper.vm.$nextTick(() => {
-      expect(wrapper.vm.$emit).toHaveBeenCalledWith('onUpdate', 'env', 'canary');
+      expect(wrapper.vm.$emit).toHaveBeenCalledWith('input', 'canary');
     });
   });
 });
diff --git a/spec/frontend/monitoring/components/variables/text_field_spec.js b/spec/frontend/monitoring/components/variables/text_field_spec.js
index 68bfb8ec695..99c6facac38 100644
--- a/spec/frontend/monitoring/components/variables/text_field_spec.js
+++ b/spec/frontend/monitoring/components/variables/text_field_spec.js
@@ -40,7 +40,7 @@ describe('Text variable component', () => {
     findInput().trigger('keyup.enter');
 
     return wrapper.vm.$nextTick(() => {
-      expect(wrapper.vm.$emit).toHaveBeenCalledWith('onUpdate', 'pod', 'prod-pod');
+      expect(wrapper.vm.$emit).toHaveBeenCalledWith('input', 'prod-pod');
     });
   });
 
@@ -53,7 +53,7 @@ describe('Text variable component', () => {
     findInput().trigger('blur');
 
     return wrapper.vm.$nextTick(() => {
-      expect(wrapper.vm.$emit).toHaveBeenCalledWith('onUpdate', 'pod', 'canary-pod');
+      expect(wrapper.vm.$emit).toHaveBeenCalledWith('input', 'canary-pod');
     });
   });
 });
diff --git a/spec/frontend/monitoring/components/variables_section_spec.js b/spec/frontend/monitoring/components/variables_section_spec.js
index 9fb93a18e0b..d8e63917eec 100644
--- a/spec/frontend/monitoring/components/variables_section_spec.js
+++ b/spec/frontend/monitoring/components/variables_section_spec.js
@@ -6,8 +6,7 @@ import TextField from '~/monitoring/components/variables/text_field.vue';
 import { updateHistory, mergeUrlParams } from '~/lib/utils/url_utility';
 import { createStore } from '~/monitoring/stores';
 import { convertVariablesForURL } from '~/monitoring/utils';
-import * as types from '~/monitoring/stores/mutation_types';
-import { mockTemplatingDataResponses } from '../mock_data';
+import { storeVariables } from '../mock_data';
 
 jest.mock('~/lib/utils/url_utility', () => ({
   updateHistory: jest.fn(),
@@ -17,12 +16,6 @@ jest.mock('~/lib/utils/url_utility', () => ({
 describe('Metrics dashboard/variables section component', () => {
   let store;
   let wrapper;
-  const sampleVariables = {
-    label1: mockTemplatingDataResponses.simpleText.simpleText,
-    label2: mockTemplatingDataResponses.advText.advText,
-    label3: mockTemplatingDataResponses.simpleCustom.simpleCustom,
-    label4: mockTemplatingDataResponses.metricLabelValues.simple,
-  };
 
   const createShallowWrapper = () => {
     wrapper = shallowMount(VariablesSection, {
@@ -48,22 +41,23 @@ describe('Metrics dashboard/variables section component', () => {
 
   describe('when variables are set', () => {
     beforeEach(() => {
+      store.state.monitoringDashboard.variables = storeVariables;
       createShallowWrapper();
-      store.commit(`monitoringDashboard/${types.SET_VARIABLES}`, sampleVariables);
+
       return wrapper.vm.$nextTick;
     });
 
     it('shows the variables section', () => {
       const allInputs = findTextInputs().length + findCustomInputs().length;
 
-      expect(allInputs).toBe(Object.keys(sampleVariables).length);
+      expect(allInputs).toBe(storeVariables.length);
     });
 
     it('shows the right custom variable inputs', () => {
       const customInputs = findCustomInputs();
 
-      expect(customInputs.at(0).props('name')).toBe('label3');
-      expect(customInputs.at(1).props('name')).toBe('label4');
+      expect(customInputs.at(0).props('name')).toBe('customSimple');
+      expect(customInputs.at(1).props('name')).toBe('customAdvanced');
     });
   });
 
@@ -77,7 +71,7 @@ describe('Metrics dashboard/variables section component', () => {
             namespaced: true,
             state: {
               showEmptyState: false,
-              variables: sampleVariables,
+              variables: storeVariables,
             },
             actions: {
               updateVariablesAndFetchData,
@@ -92,12 +86,12 @@ describe('Metrics dashboard/variables section component', () => {
     it('merges the url params and refreshes the dashboard when a text-based variables inputs are updated', () => {
       const firstInput = findTextInputs().at(0);
 
-      firstInput.vm.$emit('onUpdate', 'label1', 'test');
+      firstInput.vm.$emit('input', 'test');
 
       return wrapper.vm.$nextTick(() => {
         expect(updateVariablesAndFetchData).toHaveBeenCalled();
         expect(mergeUrlParams).toHaveBeenCalledWith(
-          convertVariablesForURL(sampleVariables),
+          convertVariablesForURL(storeVariables),
           window.location.href,
         );
         expect(updateHistory).toHaveBeenCalled();
@@ -107,12 +101,12 @@ describe('Metrics dashboard/variables section component', () => {
     it('merges the url params and refreshes the dashboard when a custom-based variables inputs are updated', () => {
       const firstInput = findCustomInputs().at(0);
 
-      firstInput.vm.$emit('onUpdate', 'label1', 'test');
+      firstInput.vm.$emit('input', 'test');
 
       return wrapper.vm.$nextTick(() => {
         expect(updateVariablesAndFetchData).toHaveBeenCalled();
         expect(mergeUrlParams).toHaveBeenCalledWith(
-          convertVariablesForURL(sampleVariables),
+          convertVariablesForURL(storeVariables),
           window.location.href,
         );
         expect(updateHistory).toHaveBeenCalled();
@@ -122,7 +116,7 @@ describe('Metrics dashboard/variables section component', () => {
     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 = findTextInputs().at(0);
 
-      firstInput.vm.$emit('onUpdate', 'label1', 'Simple text');
+      firstInput.vm.$emit('input', 'My default value');
 
       expect(updateVariablesAndFetchData).not.toHaveBeenCalled();
       expect(mergeUrlParams).not.toHaveBeenCalled();
diff --git a/spec/frontend/monitoring/mock_data.js b/spec/frontend/monitoring/mock_data.js
index e5b25a37976..8ccae1228e8 100644
--- a/spec/frontend/monitoring/mock_data.js
+++ b/spec/frontend/monitoring/mock_data.js
@@ -627,81 +627,79 @@ export const mockLinks = [
   },
 ];
 
-const templatingVariableTypes = {
+export const templatingVariablesExamples = {
   text: {
-    simple: 'Simple text',
-    advanced: {
-      label: 'Variable 4',
+    textSimple: 'My default value',
+    textAdvanced: {
+      label: 'Advanced text variable',
       type: 'text',
       options: {
-        default_value: 'default',
+        default_value: 'A default value',
       },
     },
   },
   custom: {
-    simple: ['value1', 'value2', 'value3'],
-    advanced: {
-      normal: {
-        label: 'Advanced Var',
-        type: 'custom',
-        options: {
-          values: [
-            { value: 'value1', text: 'Var 1 Option 1' },
-            {
-              value: 'value2',
-              text: 'Var 1 Option 2',
-              default: true,
-            },
-          ],
-        },
-      },
-      withoutOpts: {
-        type: 'custom',
-        options: {},
+    customSimple: ['value1', 'value2', 'value3'],
+    customAdvanced: {
+      label: 'Advanced Var',
+      type: 'custom',
+      options: {
+        values: [
+          { value: 'value1', text: 'Var 1 Option 1' },
+          {
+            value: 'value2',
+            text: 'Var 1 Option 2',
+            default: true,
+          },
+        ],
       },
-      withoutLabel: {
-        type: 'custom',
-        options: {
-          values: [
-            { value: 'value1', text: 'Var 1 Option 1' },
-            {
-              value: 'value2',
-              text: 'Var 1 Option 2',
-              default: true,
-            },
-          ],
-        },
+    },
+    customAdvancedWithoutOpts: {
+      type: 'custom',
+      options: {},
+    },
+    customAdvancedWithoutLabel: {
+      type: 'custom',
+      options: {
+        values: [
+          { value: 'value1', text: 'Var 1 Option 1' },
+          {
+            value: 'value2',
+            text: 'Var 1 Option 2',
+            default: true,
+          },
+        ],
       },
-      withoutType: {
-        label: 'Variable 2',
-        options: {
-          values: [
-            { value: 'value1', text: 'Var 1 Option 1' },
-            {
-              value: 'value2',
-              text: 'Var 1 Option 2',
-              default: true,
-            },
-          ],
-        },
+    },
+    customAdvancedWithoutType: {
+      label: 'Variable 2',
+      options: {
+        values: [
+          { value: 'value1', text: 'Var 1 Option 1' },
+          {
+            value: 'value2',
+            text: 'Var 1 Option 2',
+            default: true,
+          },
+        ],
       },
-      withoutOptText: {
-        label: 'Options without text',
-        type: 'custom',
-        options: {
-          values: [
-            { value: 'value1' },
-            {
-              value: 'value2',
-              default: true,
-            },
-          ],
-        },
+    },
+    customAdvancedWithoutOptText: {
+      label: 'Options without text',
+      type: 'custom',
+      options: {
+        values: [
+          { value: 'value1' },
+          {
+            value: 'value2',
+            default: true,
+          },
+        ],
       },
     },
   },
   metricLabelValues: {
-    simple: {
+    metricLabelValuesSimple: {
       label: 'Metric Label Values',
       type: 'metric_label_values',
       options: {
@@ -713,205 +711,92 @@ const templatingVariableTypes = {
   },
 };
 
-const generateMockTemplatingData = data => {
-  const vars = data
-    ? {
-        variables: {
-          ...data,
-        },
-      }
-    : {};
-  return {
-    dashboard: {
-      templating: vars,
-    },
-  };
-};
-
-const responseForSimpleTextVariable = {
-  simpleText: {
-    label: 'simpleText',
+export const storeTextVariables = [
+  {
     type: 'text',
-    value: 'Simple text',
+    name: 'textSimple',
+    label: 'textSimple',
+    value: 'My default value',
   },
-};
-
-const responseForAdvTextVariable = {
-  advText: {
-    label: 'Variable 4',
+  {
     type: 'text',
-    value: 'default',
+    name: 'textAdvanced',
+    label: 'Advanced text variable',
+    value: 'A default value',
   },
-};
+];
 
-const responseForSimpleCustomVariable = {
-  simpleCustom: {
-    label: 'simpleCustom',
-    value: 'value1',
+export const storeCustomVariables = [
+  {
+    type: 'custom',
+    name: 'customSimple',
+    label: 'customSimple',
     options: {
       values: [
-        {
-          default: false,
-          text: 'value1',
-          value: 'value1',
-        },
-        {
-          default: false,
-          text: 'value2',
-          value: 'value2',
-        },
-        {
-          default: false,
-          text: 'value3',
-          value: 'value3',
-        },
+        { default: false, text: 'value1', value: 'value1' },
+        { default: false, text: 'value2', value: 'value2' },
+        { default: false, text: 'value3', value: 'value3' },
       ],
     },
-    type: 'custom',
+    value: 'value1',
   },
-};
-
-const responseForAdvancedCustomVariableWithoutOptions = {
-  advCustomWithoutOpts: {
-    label: 'advCustomWithoutOpts',
+  {
+    type: 'custom',
+    name: 'customAdvanced',
+    label: 'Advanced Var',
     options: {
-      values: [],
+      values: [
+        { default: false, text: 'Var 1 Option 1', value: 'value1' },
+        { default: true, text: 'Var 1 Option 2', value: 'value2' },
+      ],
     },
+    value: 'value2',
+  },
+  {
     type: 'custom',
+    name: 'customAdvancedWithoutOpts',
+    label: 'customAdvancedWithoutOpts',
+    options: { values: [] },
+    value: null,
   },
-};
-
-const responseForAdvancedCustomVariableWithoutLabel = {
-  advCustomWithoutLabel: {
-    label: 'advCustomWithoutLabel',
+  {
+    type: 'custom',
+    name: 'customAdvancedWithoutLabel',
+    label: 'customAdvancedWithoutLabel',
     value: 'value2',
     options: {
       values: [
-        {
-          default: false,
-          text: 'Var 1 Option 1',
-          value: 'value1',
-        },
-        {
-          default: true,
-          text: 'Var 1 Option 2',
-          value: 'value2',
-        },
+        { default: false, text: 'Var 1 Option 1', value: 'value1' },
+        { default: true, text: 'Var 1 Option 2', value: 'value2' },
       ],
     },
-    type: 'custom',
   },
-};
-
-const responseForAdvancedCustomVariableWithoutOptText = {
-  advCustomWithoutOptText: {
+  {
+    type: 'custom',
+    name: 'customAdvancedWithoutOptText',
     label: 'Options without text',
-    value: 'value2',
     options: {
       values: [
-        {
-          default: false,
-          text: 'value1',
-          value: 'value1',
-        },
-        {
-          default: true,
-          text: 'value2',
-          value: 'value2',
-        },
+        { default: false, text: 'value1', value: 'value1' },
+        { default: true, text: 'value2', value: 'value2' },
       ],
     },
-    type: 'custom',
+    value: 'value2',
   },
-};
+];
 
-const responseForMetricLabelValues = {
-  simple: {
-    label: 'Metric Label Values',
+export const storeMetricLabelValuesVariables = [
+  {
     type: 'metric_label_values',
+    name: 'metricLabelValuesSimple',
+    label: 'Metric Label Values',
+    options: { prometheusEndpointPath: '/series', label: 'backend', values: [] },
     value: null,
-    options: {
-      prometheusEndpointPath: '/series',
-      label: 'backend',
-      values: [],
-    },
   },
-};
-
-const responseForAdvancedCustomVariable = {
-  ...responseForSimpleCustomVariable,
-  advCustomNormal: {
-    label: 'Advanced Var',
-    value: 'value2',
-    options: {
-      values: [
-        {
-          default: false,
-          text: 'Var 1 Option 1',
-          value: 'value1',
-        },
-        {
-          default: true,
-          text: 'Var 1 Option 2',
-          value: 'value2',
-        },
-      ],
-    },
-    type: 'custom',
-  },
-};
-
-const responsesForAllVariableTypes = {
-  ...responseForSimpleTextVariable,
-  ...responseForAdvTextVariable,
-  ...responseForSimpleCustomVariable,
-  ...responseForAdvancedCustomVariable,
-};
-
-export const mockTemplatingData = {
-  emptyTemplatingProp: generateMockTemplatingData(),
-  emptyVariablesProp: generateMockTemplatingData({}),
-  simpleText: generateMockTemplatingData({ simpleText: templatingVariableTypes.text.simple }),
-  advText: generateMockTemplatingData({ advText: templatingVariableTypes.text.advanced }),
-  simpleCustom: generateMockTemplatingData({ simpleCustom: templatingVariableTypes.custom.simple }),
-  advCustomWithoutOpts: generateMockTemplatingData({
-    advCustomWithoutOpts: templatingVariableTypes.custom.advanced.withoutOpts,
-  }),
-  advCustomWithoutType: generateMockTemplatingData({
-    advCustomWithoutType: templatingVariableTypes.custom.advanced.withoutType,
-  }),
-  advCustomWithoutLabel: generateMockTemplatingData({
-    advCustomWithoutLabel: templatingVariableTypes.custom.advanced.withoutLabel,
-  }),
-  advCustomWithoutOptText: generateMockTemplatingData({
-    advCustomWithoutOptText: templatingVariableTypes.custom.advanced.withoutOptText,
-  }),
-  simpleAndAdv: generateMockTemplatingData({
-    simpleCustom: templatingVariableTypes.custom.simple,
-    advCustomNormal: templatingVariableTypes.custom.advanced.normal,
-  }),
-  metricLabelValues: generateMockTemplatingData({
-    simple: templatingVariableTypes.metricLabelValues.simple,
-  }),
-  allVariableTypes: generateMockTemplatingData({
-    simpleText: templatingVariableTypes.text.simple,
-    advText: templatingVariableTypes.text.advanced,
-    simpleCustom: templatingVariableTypes.custom.simple,
-    advCustomNormal: templatingVariableTypes.custom.advanced.normal,
-  }),
-};
+];
 
-export const mockTemplatingDataResponses = {
-  emptyTemplatingProp: {},
-  emptyVariablesProp: {},
-  simpleText: responseForSimpleTextVariable,
-  advText: responseForAdvTextVariable,
-  simpleCustom: responseForSimpleCustomVariable,
-  advCustomWithoutOpts: responseForAdvancedCustomVariableWithoutOptions,
-  advCustomWithoutType: {},
-  advCustomWithoutLabel: responseForAdvancedCustomVariableWithoutLabel,
-  advCustomWithoutOptText: responseForAdvancedCustomVariableWithoutOptText,
-  simpleAndAdv: responseForAdvancedCustomVariable,
-  allVariableTypes: responsesForAllVariableTypes,
-  metricLabelValues: responseForMetricLabelValues,
-};
+export const storeVariables = [
+  ...storeTextVariables,
+  ...storeCustomVariables,
+  ...storeMetricLabelValuesVariables,
+];
diff --git a/spec/frontend/monitoring/store/actions_spec.js b/spec/frontend/monitoring/store/actions_spec.js
index 0e28b70a760..ad01e4c3a9b 100644
--- a/spec/frontend/monitoring/store/actions_spec.js
+++ b/spec/frontend/monitoring/store/actions_spec.js
@@ -44,7 +44,6 @@ import {
   deploymentData,
   environmentData,
   annotationsData,
-  mockTemplatingData,
   dashboardGitResponse,
   mockDashboardsErrorResponse,
 } from '../mock_data';
@@ -305,32 +304,6 @@ describe('Monitoring store actions', () => {
       expect(dispatch).toHaveBeenCalledWith('fetchDashboardData');
     });
 
-    it('stores templating variables', () => {
-      const response = {
-        ...metricsDashboardResponse.dashboard,
-        ...mockTemplatingData.allVariableTypes.dashboard,
-      };
-
-      receiveMetricsDashboardSuccess(
-        { state, commit, dispatch },
-        {
-          response: {
-            ...metricsDashboardResponse,
-            dashboard: {
-              ...metricsDashboardResponse.dashboard,
-              ...mockTemplatingData.allVariableTypes.dashboard,
-            },
-          },
-        },
-      );
-
-      expect(commit).toHaveBeenCalledWith(
-        types.RECEIVE_METRICS_DASHBOARD_SUCCESS,
-
-        response,
-      );
-    });
-
     it('sets the dashboards loaded from the repository', () => {
       const params = {};
       const response = metricsDashboardResponse;
@@ -1144,11 +1117,13 @@ describe('Monitoring store actions', () => {
   describe('fetchVariableMetricLabelValues', () => {
     const variable = {
       type: 'metric_label_values',
+      name: 'label1',
       options: {
-        prometheusEndpointPath: '/series',
+        prometheusEndpointPath: '/series?match[]=metric_name',
         label: 'job',
       },
     };
+
     const defaultQueryParams = {
       start_time: '2019-08-06T12:40:02.184Z',
       end_time: '2019-08-06T20:40:02.184Z',
@@ -1158,9 +1133,7 @@ describe('Monitoring store actions', () => {
       state = {
         ...state,
         timeRange: defaultTimeRange,
-        variables: {
-          label1: variable,
-        },
+        variables: [variable],
       };
     });
 
@@ -1176,7 +1149,7 @@ describe('Monitoring store actions', () => {
         },
       ];
 
-      mock.onGet('/series').reply(200, {
+      mock.onGet('/series?match[]=metric_name').reply(200, {
         status: 'success',
         data,
       });
@@ -1196,7 +1169,7 @@ describe('Monitoring store actions', () => {
     });
 
     it('should notify the user that dynamic options were not loaded', () => {
-      mock.onGet('/series').reply(500);
+      mock.onGet('/series?match[]=metric_name').reply(500);
 
       return testAction(fetchVariableMetricLabelValues, { defaultQueryParams }, state, [], []).then(
         () => {
diff --git a/spec/frontend/monitoring/store/getters_spec.js b/spec/frontend/monitoring/store/getters_spec.js
index 1275686de58..a69f5265ea7 100644
--- a/spec/frontend/monitoring/store/getters_spec.js
+++ b/spec/frontend/monitoring/store/getters_spec.js
@@ -8,7 +8,7 @@ import {
   environmentData,
   metricsResult,
   dashboardGitResponse,
-  mockTemplatingDataResponses,
+  storeVariables,
   mockLinks,
 } from '../mock_data';
 import {
@@ -344,19 +344,21 @@ describe('Monitoring store Getters', () => {
     });
 
     it('transforms the variables object to an array in the [variable, variable_value] format for all variable types', () => {
-      mutations[types.SET_VARIABLES](state, mockTemplatingDataResponses.allVariableTypes);
+      state.variables = storeVariables;
       const variablesArray = getters.getCustomVariablesParams(state);
 
       expect(variablesArray).toEqual({
-        'variables[advCustomNormal]': 'value2',
-        'variables[advText]': 'default',
-        'variables[simpleCustom]': 'value1',
-        'variables[simpleText]': 'Simple text',
+        'variables[textSimple]': 'My default value',
+        'variables[textAdvanced]': 'A default value',
+        'variables[customSimple]': 'value1',
+        'variables[customAdvanced]': 'value2',
+        'variables[customAdvancedWithoutLabel]': 'value2',
+        'variables[customAdvancedWithoutOptText]': 'value2',
       });
     });
 
     it('transforms the variables object to an empty array when no keys are present', () => {
-      mutations[types.SET_VARIABLES](state, {});
+      state.variables = [];
       const variablesArray = getters.getCustomVariablesParams(state);
 
       expect(variablesArray).toEqual({});
diff --git a/spec/frontend/monitoring/store/mutations_spec.js b/spec/frontend/monitoring/store/mutations_spec.js
index fb5e6156daf..37da5ea96d9 100644
--- a/spec/frontend/monitoring/store/mutations_spec.js
+++ b/spec/frontend/monitoring/store/mutations_spec.js
@@ -5,7 +5,7 @@ import * as types from '~/monitoring/stores/mutation_types';
 import state from '~/monitoring/stores/state';
 import { metricStates } from '~/monitoring/constants';
 
-import { deploymentData, dashboardGitResponse } from '../mock_data';
+import { deploymentData, dashboardGitResponse, storeTextVariables } from '../mock_data';
 import { metricsDashboardPayload } from '../fixture_data';
 
 describe('Monitoring mutations', () => {
@@ -427,30 +427,12 @@ describe('Monitoring mutations', () => {
     });
   });
 
-  describe('SET_VARIABLES', () => {
-    it('stores an empty variables array when no custom variables are given', () => {
-      mutations[types.SET_VARIABLES](stateCopy, {});
-
-      expect(stateCopy.variables).toEqual({});
-    });
-
-    it('stores variables in the key key_value format in the array', () => {
-      mutations[types.SET_VARIABLES](stateCopy, { pod: 'POD', stage: 'main ops' });
-
-      expect(stateCopy.variables).toEqual({ pod: 'POD', stage: 'main ops' });
-    });
-  });
-
   describe('UPDATE_VARIABLE_VALUE', () => {
-    afterEach(() => {
-      mutations[types.SET_VARIABLES](stateCopy, {});
-    });
-
     it('updates only the value of the variable in variables', () => {
-      mutations[types.SET_VARIABLES](stateCopy, { environment: { value: 'prod', type: 'text' } });
-      mutations[types.UPDATE_VARIABLE_VALUE](stateCopy, { key: 'environment', value: 'new prod' });
+      stateCopy.variables = storeTextVariables;
+      mutations[types.UPDATE_VARIABLE_VALUE](stateCopy, { name: 'textSimple', value: 'New Value' });
 
-      expect(stateCopy.variables).toEqual({ environment: { value: 'new prod', type: 'text' } });
+      expect(stateCopy.variables[0].value).toEqual('New Value');
     });
   });
 
diff --git a/spec/frontend/monitoring/store/utils_spec.js b/spec/frontend/monitoring/store/utils_spec.js
index 8ee37a529dd..b97948fa1bf 100644
--- a/spec/frontend/monitoring/store/utils_spec.js
+++ b/spec/frontend/monitoring/store/utils_spec.js
@@ -22,7 +22,7 @@ describe('mapToDashboardViewModel', () => {
       dashboard: '',
       panelGroups: [],
       links: [],
-      variables: {},
+      variables: [],
     });
   });
 
@@ -52,7 +52,7 @@ describe('mapToDashboardViewModel', () => {
     expect(mapToDashboardViewModel(response)).toEqual({
       dashboard: 'Dashboard Name',
       links: [],
-      variables: {},
+      variables: [],
       panelGroups: [
         {
           group: 'Group 1',
@@ -424,22 +424,20 @@ describe('mapToDashboardViewModel', () => {
 
       urlUtils.queryToObject.mockReturnValueOnce();
 
-      expect(mapToDashboardViewModel(response)).toMatchObject({
-        dashboard: 'Dashboard Name',
-        links: [],
-        variables: {
-          pod: {
-            label: 'pod',
-            type: 'text',
-            value: 'kubernetes',
-          },
-          pod_2: {
-            label: 'pod_2',
-            type: 'text',
-            value: 'kubernetes-2',
-          },
+      expect(mapToDashboardViewModel(response).variables).toEqual([
+        {
+          name: 'pod',
+          label: 'pod',
+          type: 'text',
+          value: 'kubernetes',
         },
-      });
+        {
+          name: 'pod_2',
+          label: 'pod_2',
+          type: 'text',
+          value: 'kubernetes-2',
+        },
+      ]);
     });
 
     it('sets variables as-is from yml file if URL has no matching variables', () => {
@@ -458,22 +456,20 @@ describe('mapToDashboardViewModel', () => {
         'var-environment': 'POD',
       });
 
-      expect(mapToDashboardViewModel(response)).toMatchObject({
-        dashboard: 'Dashboard Name',
-        links: [],
-        variables: {
-          pod: {
-            label: 'pod',
-            type: 'text',
-            value: 'kubernetes',
-          },
-          pod_2: {
-            label: 'pod_2',
-            type: 'text',
-            value: 'kubernetes-2',
-          },
+      expect(mapToDashboardViewModel(response).variables).toEqual([
+        {
+          label: 'pod',
+          name: 'pod',
+          type: 'text',
+          value: 'kubernetes',
         },
-      });
+        {
+          label: 'pod_2',
+          name: 'pod_2',
+          type: 'text',
+          value: 'kubernetes-2',
+        },
+      ]);
     });
 
     it('merges variables from URL with the ones from yml file', () => {
@@ -494,22 +490,20 @@ describe('mapToDashboardViewModel', () => {
         'var-pod_2': 'POD2',
       });
 
-      expect(mapToDashboardViewModel(response)).toMatchObject({
-        dashboard: 'Dashboard Name',
-        links: [],
-        variables: {
-          pod: {
-            label: 'pod',
-            type: 'text',
-            value: 'POD1',
-          },
-          pod_2: {
-            label: 'pod_2',
-            type: 'text',
-            value: 'POD2',
-          },
+      expect(mapToDashboardViewModel(response).variables).toEqual([
+        {
+          label: 'pod',
+          name: 'pod',
+          type: 'text',
+          value: 'POD1',
         },
-      });
+        {
+          label: 'pod_2',
+          name: 'pod_2',
+          type: 'text',
+          value: 'POD2',
+        },
+      ]);
     });
   });
 });
diff --git a/spec/frontend/monitoring/store/variable_mapping_spec.js b/spec/frontend/monitoring/store/variable_mapping_spec.js
index 390cb2d8eac..de124b0313c 100644
--- a/spec/frontend/monitoring/store/variable_mapping_spec.js
+++ b/spec/frontend/monitoring/store/variable_mapping_spec.js
@@ -3,29 +3,31 @@ import {
   mergeURLVariables,
   optionsFromSeriesData,
 } from '~/monitoring/stores/variable_mapping';
+import {
+  templatingVariablesExamples,
+  storeTextVariables,
+  storeCustomVariables,
+  storeMetricLabelValuesVariables,
+} from '../mock_data';
 import * as urlUtils from '~/lib/utils/url_utility';
-import { mockTemplatingData, mockTemplatingDataResponses } from '../mock_data';
 
 describe('Monitoring variable mapping', () => {
   describe('parseTemplatingVariables', () => {
     it.each`
-      case                                                                            | input                                         | expected
-      ${'Returns empty object for no dashboard input'}                                | ${{}}                                         | ${{}}
-      ${'Returns empty object for empty dashboard input'}                             | ${{ dashboard: {} }}                          | ${{}}
-      ${'Returns empty object for empty templating prop'}                             | ${mockTemplatingData.emptyTemplatingProp}     | ${{}}
-      ${'Returns empty object for empty variables prop'}                              | ${mockTemplatingData.emptyVariablesProp}      | ${{}}
-      ${'Returns parsed object for simple text variable'}                             | ${mockTemplatingData.simpleText}              | ${mockTemplatingDataResponses.simpleText}
-      ${'Returns parsed object for advanced text variable'}                           | ${mockTemplatingData.advText}                 | ${mockTemplatingDataResponses.advText}
-      ${'Returns parsed object for simple custom variable'}                           | ${mockTemplatingData.simpleCustom}            | ${mockTemplatingDataResponses.simpleCustom}
-      ${'Returns parsed object for advanced custom variable without options'}         | ${mockTemplatingData.advCustomWithoutOpts}    | ${mockTemplatingDataResponses.advCustomWithoutOpts}
-      ${'Returns parsed object for advanced custom variable for option without text'} | ${mockTemplatingData.advCustomWithoutOptText} | ${mockTemplatingDataResponses.advCustomWithoutOptText}
-      ${'Returns parsed object for advanced custom variable without type'}            | ${mockTemplatingData.advCustomWithoutType}    | ${{}}
-      ${'Returns parsed object for advanced custom variable without label'}           | ${mockTemplatingData.advCustomWithoutLabel}   | ${mockTemplatingDataResponses.advCustomWithoutLabel}
-      ${'Returns parsed object for simple and advanced custom variables'}             | ${mockTemplatingData.simpleAndAdv}            | ${mockTemplatingDataResponses.simpleAndAdv}
-      ${'Returns parsed object for metricLabelValues'}                                | ${mockTemplatingData.metricLabelValues}       | ${mockTemplatingDataResponses.metricLabelValues}
-      ${'Returns parsed object for all variable types'}                               | ${mockTemplatingData.allVariableTypes}        | ${mockTemplatingDataResponses.allVariableTypes}
-    `('$case', ({ input, expected }) => {
-      expect(parseTemplatingVariables(input?.dashboard?.templating)).toEqual(expected);
+      case                                 | input
+      ${'For undefined templating object'} | ${undefined}
+      ${'For empty templating object'}     | ${{}}
+    `('$case, returns an empty array', ({ input }) => {
+      expect(parseTemplatingVariables(input)).toEqual([]);
+    });
+
+    it.each`
+      case                                                        | input                                            | output
+      ${'Returns parsed object for text variables'}               | ${templatingVariablesExamples.text}              | ${storeTextVariables}
+      ${'Returns parsed object for custom variables'}             | ${templatingVariablesExamples.custom}            | ${storeCustomVariables}
+      ${'Returns parsed object for metric label value variables'} | ${templatingVariablesExamples.metricLabelValues} | ${storeMetricLabelValuesVariables}
+    `('$case, returns an empty array', ({ input, output }) => {
+      expect(parseTemplatingVariables(input)).toEqual(output);
     });
   });
 
@@ -41,7 +43,7 @@ describe('Monitoring variable mapping', () => {
     it('returns empty object if variables are not defined in yml or URL', () => {
       urlUtils.queryToObject.mockReturnValueOnce({});
 
-      expect(mergeURLVariables({})).toEqual({});
+      expect(mergeURLVariables([])).toEqual([]);
     });
 
     it('returns empty object if variables are defined in URL but not in yml', () => {
@@ -50,18 +52,24 @@ describe('Monitoring variable mapping', () => {
         'var-instance': 'localhost',
       });
 
-      expect(mergeURLVariables({})).toEqual({});
+      expect(mergeURLVariables([])).toEqual([]);
     });
 
     it('returns yml variables if variables defined in yml but not in the URL', () => {
       urlUtils.queryToObject.mockReturnValueOnce({});
 
-      const params = {
-        env: 'one',
-        instance: 'localhost',
-      };
+      const variables = [
+        {
+          name: 'env',
+          value: 'one',
+        },
+        {
+          name: 'instance',
+          value: 'localhost',
+        },
+      ];
 
-      expect(mergeURLVariables(params)).toEqual(params);
+      expect(mergeURLVariables(variables)).toEqual(variables);
     });
 
     it('returns yml variables if variables defined in URL do not match with yml variables', () => {
@@ -69,13 +77,19 @@ describe('Monitoring variable mapping', () => {
         'var-env': 'one',
         'var-instance': 'localhost',
       };
-      const ymlParams = {
-        pod: { value: 'one' },
-        service: { value: 'database' },
-      };
+      const variables = [
+        {
+          name: 'env',
+          value: 'one',
+        },
+        {
+          name: 'service',
+          value: 'database',
+        },
+      ];
       urlUtils.queryToObject.mockReturnValueOnce(urlParams);
 
-      expect(mergeURLVariables(ymlParams)).toEqual(ymlParams);
+      expect(mergeURLVariables(variables)).toEqual(variables);
     });
 
     it('returns merged yml and URL variables if there is some match', () => {
@@ -83,19 +97,29 @@ describe('Monitoring variable mapping', () => {
         'var-env': 'one',
         'var-instance': 'localhost:8080',
       };
-      const ymlParams = {
-        instance: { value: 'localhost' },
-        service: { value: 'database' },
-      };
-
-      const merged = {
-        instance: { value: 'localhost:8080' },
-        service: { value: 'database' },
-      };
+      const variables = [
+        {
+          name: 'instance',
+          value: 'localhost',
+        },
+        {
+          name: 'service',
+          value: 'database',
+        },
+      ];
 
       urlUtils.queryToObject.mockReturnValueOnce(urlParams);
 
-      expect(mergeURLVariables(ymlParams)).toEqual(merged);
+      expect(mergeURLVariables(variables)).toEqual([
+        {
+          name: 'instance',
+          value: 'localhost:8080',
+        },
+        {
+          name: 'service',
+          value: 'database',
+        },
+      ]);
     });
   });
 
diff --git a/spec/frontend/monitoring/store_utils.js b/spec/frontend/monitoring/store_utils.js
index 740dbaaa2e3..6c8267e6a3c 100644
--- a/spec/frontend/monitoring/store_utils.js
+++ b/spec/frontend/monitoring/store_utils.js
@@ -35,12 +35,6 @@ export const setupStoreWithDashboard = store => {
   );
 };
 
-export const setupStoreWithVariable = store => {
-  store.commit(`monitoringDashboard/${types.SET_VARIABLES}`, {
-    label1: 'pod',
-  });
-};
-
 export const setupStoreWithLinks = store => {
   store.commit(`monitoringDashboard/${types.RECEIVE_METRICS_DASHBOARD_SUCCESS}`, {
     ...metricsDashboardPayload,
diff --git a/spec/frontend/monitoring/utils_spec.js b/spec/frontend/monitoring/utils_spec.js
index 039cf275eea..1b4df286868 100644
--- a/spec/frontend/monitoring/utils_spec.js
+++ b/spec/frontend/monitoring/utils_spec.js
@@ -429,14 +429,41 @@ describe('monitoring/utils', () => {
 
   describe('convertVariablesForURL', () => {
     it.each`
-      input                               | expected
-      ${undefined}                        | ${{}}
-      ${null}                             | ${{}}
-      ${{}}                               | ${{}}
-      ${{ env: { value: 'prod' } }}       | ${{ 'var-env': 'prod' }}
-      ${{ 'var-env': { value: 'prod' } }} | ${{ 'var-var-env': 'prod' }}
+      input                                                               | expected
+      ${[]}                                                               | ${{}}
+      ${[{ name: 'env', value: 'prod' }]}                                 | ${{ 'var-env': 'prod' }}
+      ${[{ name: 'env1', value: 'prod' }, { name: 'env2', value: null }]} | ${{ 'var-env1': 'prod' }}
+      ${[{ name: 'var-env', value: 'prod' }]}                             | ${{ 'var-var-env': 'prod' }}
     `('convertVariablesForURL returns $expected with input $input', ({ input, expected }) => {
       expect(monitoringUtils.convertVariablesForURL(input)).toEqual(expected);
     });
   });
+
+  describe('setCustomVariablesFromUrl', () => {
+    beforeEach(() => {
+      jest.spyOn(urlUtils, 'updateHistory');
+    });
+
+    afterEach(() => {
+      urlUtils.updateHistory.mockRestore();
+    });
+
+    it.each`
+      input                                                               | urlParams
+      ${[]}                                                               | ${''}
+      ${[{ name: 'env', value: 'prod' }]}                                 | ${'?var-env=prod'}
+      ${[{ name: 'env1', value: 'prod' }, { name: 'env2', value: null }]} | ${'?var-env=prod&var-env1=prod'}
+    `(
+      'setCustomVariablesFromUrl updates history with query "$urlParams" with input $input',
+      ({ input, urlParams }) => {
+        monitoringUtils.setCustomVariablesFromUrl(input);
+
+        expect(urlUtils.updateHistory).toHaveBeenCalledTimes(1);
+        expect(urlUtils.updateHistory).toHaveBeenCalledWith({
+          url: `http://localhost/${urlParams}`,
+          title: '',
+        });
+      },
+    );
+  });
 });