Render input elements from template variables

Based on the custom template variables specified
in the monitoring dashboard yml file, text and
dropdowns should be rendered. This MR adds the
logic to render elements based on parsed templating
variables

app/assets/javascripts/monitoring/components/variables/custom_variable.vue

+<script>
+import { GlFormGroup, GlDropdown, GlDropdownItem } from '@gitlab/ui';
+
+export default {
+  components: {
+    GlFormGroup,
+    GlDropdown,
+    GlDropdownItem,
+  },
+  props: {
+    name: {
+      type: String,
+      required: true,
+    },
+    label: {
+      type: String,
+      required: true,
+    },
+    value: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    options: {
+      type: Array,
+      required: true,
+    },
+  },
+  computed: {
+    defaultText() {
+      const selectedOpt = this.options.find(opt => opt.value === this.value);
+      return selectedOpt?.text || this.value;
+    },
+  },
+  methods: {
+    onUpdate(value) {
+      this.$emit('onUpdate', this.name, value);
+    },
+  },
+};
+</script>
+<template>
+  <gl-form-group :label="label">
+    <gl-dropdown toggle-class="dropdown-menu-toggle" :text="defaultText">
+      <gl-dropdown-item v-for="(opt, key) in options" :key="key" @click="onUpdate(opt.value)">{{
+        opt.text
+      }}</gl-dropdown-item>
+    </gl-dropdown>
+  </gl-form-group>
+</template>

app/assets/javascripts/monitoring/components/variables/text_variable.vue

+<script>
+import { GlFormGroup, GlFormInput } from '@gitlab/ui';
+
+export default {
+  components: {
+    GlFormGroup,
+    GlFormInput,
+  },
+  props: {
+    name: {
+      type: String,
+      required: true,
+    },
+    label: {
+      type: String,
+      required: true,
+    },
+    value: {
+      type: String,
+      required: true,
+    },
+  },
+  methods: {
+    onUpdate(event) {
+      this.$emit('onUpdate', this.name, event.target.value);
+    },
+  },
+};
+</script>
+<template>
+  <gl-form-group :label="label">
+    <gl-form-input
+      :value="value"
+      :name="name"
+      @keyup.native.enter="onUpdate"
+      @blur.native="onUpdate"
+    />
+  </gl-form-group>
+</template>

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

 <script>
-import { GlFormGroup, GlFormInput } from '@gitlab/ui';
 import { mapState, mapActions } from 'vuex';
-import { mergeUrlParams, updateHistory } from '~/lib/utils/url_utility';
+import CustomVariable from './variables/custom_variable.vue';
+import TextVariable from './variables/text_variable.vue';
+import { setPromCustomVariablesFromUrl } from '../utils';
 
 export default {
   components: {
-    GlFormGroup,
-    GlFormInput,
+    CustomVariable,
+    TextVariable,
   },
   computed: {
     ...mapState('monitoringDashboard', ['promVariables']),
   },
   methods: {
-    ...mapActions('monitoringDashboard', ['fetchDashboardData', 'setVariableValues']),
-    refreshDashboard(event) {
-      const { name, value } = event.target;
-
-      if (this.promVariables[name] !== value) {
-        const changedVariable = { [name]: value };
-
-        this.setVariableValues(changedVariable);
-
-        updateHistory({
-          url: mergeUrlParams(this.promVariables, window.location.href),
-          title: document.title,
-        });
-
+    ...mapActions('monitoringDashboard', ['fetchDashboardData', 'updateVariableValues']),
+    refreshDashboard(variable, value) {
+      if (this.promVariables[variable].value !== value) {
+        const changedVariable = { key: variable, value };
+        // update the Vuex store
+        this.updateVariableValues(changedVariable);
+        // the below calls can ideally be moved out of the
+        // component and into the actions and let the
+        // mutation respond directly.
+        // This can be further investigate in
+        // https://gitlab.com/gitlab-org/gitlab/-/issues/217713
+        setPromCustomVariablesFromUrl(this.promVariables);
+        // fetch data
         this.fetchDashboardData();
       }
     },
+    variableComponent(type) {
+      const types = {
+        text: TextVariable,
+        custom: CustomVariable,
+      };
+      return types[type] || TextVariable;
+    },
   },
 };
 </script>
 <template>
   <div ref="variablesSection" class="d-sm-flex flex-sm-wrap pt-2 pr-1 pb-0 pl-2 variables-section">
-    <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="val"
-          :name="key"
-          @keyup.native.enter="refreshDashboard"
-          @blur.native="refreshDashboard"
-        />
-      </gl-form-group>
+    <div v-for="(variable, key) in promVariables" :key="key" class="mb-1 pr-2 d-flex d-sm-block">
+      <component
+        :is="variableComponent(variable.type)"
+        class="mb-0 flex-grow-1"
+        :label="variable.label"
+        :value="variable.value"
+        :name="key"
+        :options="variable.options"
+        @onUpdate="refreshDashboard"
+      />
     </div>
   </div>
 </template>

app/assets/javascripts/monitoring/monitoring_bundle.js

@@ -4,7 +4,6 @@ import Dashboard from '~/monitoring/components/dashboard.vue';
 import { parseBoolean } from '~/lib/utils/common_utils';
 import { getParameterValues } from '~/lib/utils/url_utility';
 import store from './stores';
-import { promCustomVariablesFromUrl } from './utils';
 
 Vue.use(GlToast);
 
@@ -14,8 +13,6 @@ export default (props = {}) => {
   if (el && el.dataset) {
     const [currentDashboard] = getParameterValues('dashboard');
 
-    store.dispatch('monitoringDashboard/setVariableValues', promCustomVariablesFromUrl());
-
     // eslint-disable-next-line no-new
     new Vue({
       el,

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

@@ -3,6 +3,8 @@ import * as types from './mutation_types';
 import axios from '~/lib/utils/axios_utils';
 import createFlash from '~/flash';
 import { convertToFixedRange } from '~/lib/utils/datetime_range';
+import { parseTemplatingVariables } from './variable_mapping';
+import { mergeURLVariables } from '../utils';
 import {
   gqClient,
   parseEnvironmentsResponse,
@@ -159,6 +161,7 @@ export const receiveMetricsDashboardSuccess = ({ commit, dispatch }, { response
 
   commit(types.SET_ALL_DASHBOARDS, all_dashboards);
   commit(types.RECEIVE_METRICS_DASHBOARD_SUCCESS, dashboard);
+  commit(types.SET_VARIABLES, mergeURLVariables(parseTemplatingVariables(dashboard.templating)));
   commit(types.SET_ENDPOINTS, convertObjectPropsToCamelCase(metrics_data));
 
   return dispatch('fetchDashboardData');
@@ -413,7 +416,7 @@ export const duplicateSystemDashboard = ({ state }, payload) => {
 
 // Variables manipulation
 
-export const setVariableValues = ({ commit }, updatedVariable) => {
+export const updateVariableValues = ({ commit }, updatedVariable) => {
   commit(types.UPDATE_VARIABLE_VALUES, updatedVariable);
 };
 

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

 import { flatMap } from 'lodash';
-import { removePrefixFromLabels } from './utils';
 import { NOT_IN_DB_PREFIX } from '../constants';
 
 const metricsIdsInPanel = panel =>
@@ -123,10 +122,7 @@ export const filteredEnvironments = state =>
  */
 
 export const getCustomVariablesArray = state =>
-  flatMap(state.promVariables, (val, key) => [
-    encodeURIComponent(removePrefixFromLabels(key)),
-    encodeURIComponent(val),
-  ]);
+  flatMap(state.promVariables, (variable, key) => [key, variable.value]);
 
 // prevent babel-plugin-rewire from generating an invalid default during karma tests
 export default () => {};

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

@@ -191,11 +191,10 @@ export default {
   [types.SET_VARIABLES](state, variables) {
     state.promVariables = variables;
   },
-  [types.UPDATE_VARIABLE_VALUES](state, newVariable) {
-    Object.keys(newVariable).forEach(key => {
-      if (Object.prototype.hasOwnProperty.call(state.promVariables, key)) {
-        state.promVariables[key] = newVariable[key];
-      }
+  [types.UPDATE_VARIABLE_VALUES](state, updatedVariable) {
+    Object.assign(state.promVariables[updatedVariable.key], {
+      ...state.promVariables[updatedVariable.key],
+      value: updatedVariable.value,
     });
   },
 };

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

@@ -2,7 +2,7 @@ import { slugify } from '~/lib/utils/text_utility';
 import createGqClient, { fetchPolicies } from '~/lib/graphql';
 import { SUPPORTED_FORMATS } from '~/lib/utils/unit_format';
 import { getIdFromGraphQLId } from '~/graphql_shared/utils';
-import { NOT_IN_DB_PREFIX, VARIABLE_PREFIX } from '../constants';
+import { NOT_IN_DB_PREFIX } from '../constants';
 
 export const gqClient = createGqClient(
   {},
@@ -229,25 +229,3 @@ export const normalizeQueryResult = timeSeries => {
 
   return normalizedResult;
 };
-
-/**
- * Variable labels are used as names for the dropdowns and also
- * as URL params. Prefixing the name reduces the risk of
- * collision with other URL params
- *
- * @param {String} label label for the template variable
- * @returns {String}
- */
-export const addPrefixToLabels = label => `${VARIABLE_PREFIX}${label}`;
-
-/**
- * Before the templating variables are passed to the backend the
- * prefix needs to be removed.
- *
- * This method removes the prefix at the beginning of the string.
- *
- * @param {String} label label to remove prefix from
- * @returns {String}
- */
-export const removePrefixFromLabels = label =>
-  (label || '').replace(new RegExp(`^${VARIABLE_PREFIX}`), '');

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

 import { isString } from 'lodash';
-import { addPrefixToLabels } from './utils';
 import { VARIABLE_TYPES } from '../constants';
 
 /**
@@ -56,15 +55,20 @@ const normalizeCustomVariableOptions = ({ default: defaultOpt = false, text, val
  * Custom advanced variables are rendered as dropdown elements in the dashboard
  * header. This method parses advanced custom variables.
  *
+ * The default value is the option with default set to true or the first option
+ * if none of the options have default prop true.
+ *
  * @param {Object} advVariable advance custom variable
  * @returns {Object}
  */
 const customAdvancedVariableParser = advVariable => {
-  const options = advVariable?.options?.values ?? [];
+  const options = (advVariable?.options?.values ?? []).map(normalizeCustomVariableOptions);
+  const defaultOpt = options.find(opt => opt.default === true) || options[0];
   return {
     type: VARIABLE_TYPES.custom,
     label: advVariable.label,
-    options: options.map(normalizeCustomVariableOptions),
+    value: defaultOpt?.value,
+    options,
   };
 };
 
@@ -83,6 +87,9 @@ const parseSimpleCustomOptions = opt => ({ text: opt, value: opt });
  *
  * Simple custom variables do not have labels so its set to null here.
  *
+ * The default value is set to the first option as the user cannot
+ * set a default value for this format
+ *
  * @param {Array} customVariable array of options
  * @returns {Object}
  */
@@ -90,6 +97,7 @@ const customSimpleVariableParser = simpleVar => {
   const options = (simpleVar || []).map(parseSimpleCustomOptions);
   return {
     type: VARIABLE_TYPES.custom,
+    value: options[0].value,
     label: null,
     options: options.map(normalizeCustomVariableOptions),
   };
@@ -150,7 +158,7 @@ export const parseTemplatingVariables = ({ variables = {} } = {}) =>
     if (parsedVar) {
       acc[key] = {
         ...parsedVar,
-        label: addPrefixToLabels(parsedVar.label || key),
+        label: parsedVar.label || key,
       };
     }
     return acc;

app/assets/javascripts/monitoring/utils.js

-import { pickBy } from 'lodash';
-import { queryToObject, mergeUrlParams, removeParams } from '~/lib/utils/url_utility';
+import { pickBy, mapKeys } from 'lodash';
+import {
+  queryToObject,
+  mergeUrlParams,
+  removeParams,
+  updateHistory,
+} from '~/lib/utils/url_utility';
 import {
   timeRangeParamNames,
   timeRangeFromParams,
@@ -122,6 +127,44 @@ export const timeRangeFromUrl = (search = window.location.search) => {
   return timeRangeFromParams(params);
 };
 
+/**
+ * Variable labels are used as names for the dropdowns and also
+ * as URL params. Prefixing the name reduces the risk of
+ * collision with other URL params
+ *
+ * @param {String} label label for the template variable
+ * @returns {String}
+ */
+export const addPrefixToLabel = label => `${VARIABLE_PREFIX}${label}`;
+
+/**
+ * Before the templating variables are passed to the backend the
+ * prefix needs to be removed.
+ *
+ * This method removes the prefix at the beginning of the string.
+ *
+ * @param {String} label label to remove prefix from
+ * @returns {String}
+ */
+export const removePrefixFromLabel = label =>
+  (label || '').replace(new RegExp(`^${VARIABLE_PREFIX}`), '');
+
+/**
+ * Convert parsed template variables to an object
+ * with just keys and values. Prepare the promVariables
+ * to be added to the URL. Keys of the object will
+ * have a prefix so that these params can be
+ * differentiated from other URL params.
+ *
+ * @param {Object} variables
+ * @returns {Object}
+ */
+export const convertVariablesForURL = variables =>
+  Object.keys(variables || {}).reduce((acc, key) => {
+    acc[addPrefixToLabel(key)] = variables[key]?.value;
+    return acc;
+  }, {});
+
 /**
  * User-defined variables from the URL are extracted. The variables
  * begin with a constant prefix so that it doesn't collide with
@@ -131,8 +174,30 @@ export const timeRangeFromUrl = (search = window.location.search) => {
  * @returns {Object} The custom variables defined by the user in the URL
  */
 
-export const promCustomVariablesFromUrl = (search = window.location.search) =>
-  pickBy(queryToObject(search), (val, key) => key.startsWith(VARIABLE_PREFIX));
+export const getPromCustomVariablesFromUrl = (search = window.location.search) => {
+  const params = queryToObject(search);
+  // pick the params with variable prefix
+  const paramsWithVars = pickBy(params, (val, key) => key.startsWith(VARIABLE_PREFIX));
+  // remove the prefix before storing in the Vuex store
+  return mapKeys(paramsWithVars, (val, key) => removePrefixFromLabel(key));
+};
+
+/**
+ * Update the URL with promVariables. This usually get triggered when
+ * the user interacts with the dynamic input elements in the monitoring
+ * dashboard header.
+ *
+ * @param {Object} promVariables user defined variables
+ */
+export const setPromCustomVariablesFromUrl = promVariables => {
+  // prep the variables to append to URL
+  const parsedVariables = convertVariablesForURL(promVariables);
+  // update the URL
+  updateHistory({
+    url: mergeUrlParams(parsedVariables, window.location.href),
+    title: document.title,
+  });
+};
 
 /**
  * Returns a URL with no time range based on the current URL.
@@ -280,4 +345,39 @@ export const barChartsDataParser = (data = []) =>
     {},
   );
 
+/**
+ * Custom variables are defined in the dashboard yml file
+ * and their values can be passed through the URL.
+ *
+ * On component load, this method merges variables data
+ * from the yml file with URL data to store in the Vuex store.
+ * Not all params coming from the URL need to be stored. Only
+ * the ones that have a corresponding variable defined in the
+ * yml file.
+ *
+ * This ensures that there is always a single source of truth
+ * for variables
+ *
+ * This method can be improved further. See the below issue
+ * https://gitlab.com/gitlab-org/gitlab/-/issues/217713
+ *
+ * @param {Object} varsFromYML template variables from yml file
+ * @returns {Object}
+ */
+export const mergeURLVariables = (varsFromYML = {}) => {
+  const varsFromURL = getPromCustomVariablesFromUrl();
+  const variables = {};
+  Object.keys(varsFromYML).forEach(key => {
+    if (Object.prototype.hasOwnProperty.call(varsFromURL, key)) {
+      variables[key] = {
+        ...varsFromYML[key],
+        value: varsFromURL[key],
+      };
+    } else {
+      variables[key] = varsFromYML[key];
+    }
+  });
+  return variables;
+};
+
 export default {};

changelogs/unreleased/dbodicherla-add-dropdown-input-based-on-dashboard-file.yml

+---
+title: Render dropdown and text elements based on variables defined in monitoring
+  dashboard yml file
+merge_request: 31524
+author:
+type: added

spec/frontend/monitoring/components/variables/custom_variable_spec.js

+import { shallowMount } from '@vue/test-utils';
+import { GlDropdown, GlDropdownItem } from '@gitlab/ui';
+import CustomVariable from '~/monitoring/components/variables/custom_variable.vue';
+
+describe('Custom variable component', () => {
+  let wrapper;
+  const propsData = {
+    name: 'env',
+    label: 'Select environment',
+    value: 'Production',
+    options: [{ text: 'Production', value: 'prod' }, { text: 'Canary', value: 'canary' }],
+  };
+  const createShallowWrapper = () => {
+    wrapper = shallowMount(CustomVariable, {
+      propsData,
+    });
+  };
+
+  const findDropdown = () => wrapper.find(GlDropdown);
+  const findDropdownItems = () => wrapper.findAll(GlDropdownItem);
+
+  it('renders dropdown element when all necessary props are passed', () => {
+    createShallowWrapper();
+
+    expect(findDropdown()).toExist();
+  });
+
+  it('renders dropdown element with a text', () => {
+    createShallowWrapper();
+
+    expect(findDropdown().attributes('text')).toBe(propsData.value);
+  });
+
+  it('renders all the dropdown items', () => {
+    createShallowWrapper();
+
+    expect(findDropdownItems()).toHaveLength(propsData.options.length);
+  });
+
+  it('changing dropdown items triggers update', () => {
+    createShallowWrapper();
+    jest.spyOn(wrapper.vm, '$emit');
+
+    findDropdownItems()
+      .at(1)
+      .vm.$emit('click');
+
+    return wrapper.vm.$nextTick(() => {
+      expect(wrapper.vm.$emit).toHaveBeenCalledWith('onUpdate', 'env', 'canary');
+    });
+  });
+});

spec/frontend/monitoring/components/variables/text_variable_spec.js

+import { shallowMount } from '@vue/test-utils';
+import { GlFormInput } from '@gitlab/ui';
+import TextVariable from '~/monitoring/components/variables/text_variable.vue';
+
+describe('Text variable component', () => {
+  let wrapper;
+  const propsData = {
+    name: 'pod',
+    label: 'Select pod',
+    value: 'test-pod',
+  };
+  const createShallowWrapper = () => {
+    wrapper = shallowMount(TextVariable, {
+      propsData,
+    });
+  };
+
+  const findInput = () => wrapper.find(GlFormInput);
+
+  it('renders a text input when all props are passed', () => {
+    createShallowWrapper();
+
+    expect(findInput()).toExist();
+  });
+
+  it('always has a default value', () => {
+    createShallowWrapper();
+
+    return wrapper.vm.$nextTick(() => {
+      expect(findInput().attributes('value')).toBe(propsData.value);
+    });
+  });
+
+  it('triggers keyup enter', () => {
+    createShallowWrapper();
+    jest.spyOn(wrapper.vm, '$emit');
+
+    findInput().element.value = 'prod-pod';
+    findInput().trigger('input');
+    findInput().trigger('keyup.enter');
+
+    return wrapper.vm.$nextTick(() => {
+      expect(wrapper.vm.$emit).toHaveBeenCalledWith('onUpdate', 'pod', 'prod-pod');
+    });
+  });
+
+  it('triggers blur enter', () => {
+    createShallowWrapper();
+    jest.spyOn(wrapper.vm, '$emit');
+
+    findInput().element.value = 'canary-pod';
+    findInput().trigger('input');
+    findInput().trigger('blur');
+
+    return wrapper.vm.$nextTick(() => {
+      expect(wrapper.vm.$emit).toHaveBeenCalledWith('onUpdate', 'pod', 'canary-pod');
+    });
+  });
+});

spec/frontend/monitoring/components/variables_section_spec.js

 import { shallowMount } from '@vue/test-utils';
 import Vuex from 'vuex';
-import { GlFormInput } from '@gitlab/ui';
 import VariablesSection from '~/monitoring/components/variables_section.vue';
+import CustomVariable from '~/monitoring/components/variables/custom_variable.vue';
+import TextVariable from '~/monitoring/components/variables/text_variable.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';
 
 jest.mock('~/lib/utils/url_utility', () => ({
   updateHistory: jest.fn(),
@@ -15,8 +18,9 @@ describe('Metrics dashboard/variables section component', () => {
   let store;
   let wrapper;
   const sampleVariables = {
-    'var-label1': 'pod',
-    'var-label2': 'main',
+    label1: mockTemplatingDataResponses.simpleText.simpleText,
+    label2: mockTemplatingDataResponses.advText.advText,
+    label3: mockTemplatingDataResponses.simpleCustom.simpleCustom,
   };
 
   const createShallowWrapper = () => {
@@ -25,8 +29,8 @@ describe('Metrics dashboard/variables section component', () => {
     });
   };
 
-  const findAllFormInputs = () => wrapper.findAll(GlFormInput);
-  const getInputAt = i => findAllFormInputs().at(i);
+  const findTextInput = () => wrapper.findAll(TextVariable);
+  const findCustomInput = () => wrapper.findAll(CustomVariable);
 
   beforeEach(() => {
     store = createStore();
@@ -36,9 +40,9 @@ describe('Metrics dashboard/variables section component', () => {
 
   it('does not show the variables section', () => {
     createShallowWrapper();
-    const allInputs = findAllFormInputs();
+    const allInputs = findTextInput().length + findCustomInput().length;
 
-    expect(allInputs).toHaveLength(0);
+    expect(allInputs).toBe(0);
   });
 
   it('shows the variables section', () => {
@@ -46,15 +50,15 @@ describe('Metrics dashboard/variables section component', () => {
     wrapper.vm.$store.commit(`monitoringDashboard/${types.SET_VARIABLES}`, sampleVariables);
 
     return wrapper.vm.$nextTick(() => {
-      const allInputs = findAllFormInputs();
+      const allInputs = findTextInput().length + findCustomInput().length;
 
-      expect(allInputs).toHaveLength(Object.keys(sampleVariables).length);
+      expect(allInputs).toBe(Object.keys(sampleVariables).length);
     });
   });
 
   describe('when changing the variable inputs', () => {
     const fetchDashboardData = jest.fn();
-    const setVariableValues = jest.fn();
+    const updateVariableValues = jest.fn();
 
     beforeEach(() => {
       store = new Vuex.Store({
@@ -67,7 +71,7 @@ describe('Metrics dashboard/variables section component', () => {
             },
             actions: {
               fetchDashboardData,
-              setVariableValues,
+              updateVariableValues,
             },
           },
         },
@@ -76,39 +80,44 @@ describe('Metrics dashboard/variables section component', () => {
       createShallowWrapper();
     });
 
-    it('merges the url params and refreshes the dashboard when a form input is blurred', () => {
-      const firstInput = getInputAt(0);
+    it('merges the url params and refreshes the dashboard when a text-based variables inputs are updated', () => {
+      const firstInput = findTextInput().at(0);
 
-      firstInput.element.value = 'POD';
-      firstInput.vm.$emit('input');
-      firstInput.trigger('blur');
+      firstInput.vm.$emit('onUpdate', 'label1', 'test');
 
-      expect(setVariableValues).toHaveBeenCalled();
-      expect(mergeUrlParams).toHaveBeenCalledWith(sampleVariables, window.location.href);
-      expect(updateHistory).toHaveBeenCalled();
-      expect(fetchDashboardData).toHaveBeenCalled();
+      return wrapper.vm.$nextTick(() => {
+        expect(updateVariableValues).toHaveBeenCalled();
+        expect(mergeUrlParams).toHaveBeenCalledWith(
+          convertVariablesForURL(sampleVariables),
+          window.location.href,
+        );
+        expect(updateHistory).toHaveBeenCalled();
+        expect(fetchDashboardData).toHaveBeenCalled();
+      });
     });
 
-    it('merges the url params and refreshes the dashboard when a form input has received an enter key press', () => {
-      const firstInput = getInputAt(0);
+    it('merges the url params and refreshes the dashboard when a custom-based variables inputs are updated', () => {
+      const firstInput = findCustomInput().at(0);
 
-      firstInput.element.value = 'POD';
-      firstInput.vm.$emit('input');
-      firstInput.trigger('keyup.enter');
+      firstInput.vm.$emit('onUpdate', 'label1', 'test');
 
-      expect(setVariableValues).toHaveBeenCalled();
-      expect(mergeUrlParams).toHaveBeenCalledWith(sampleVariables, window.location.href);
-      expect(updateHistory).toHaveBeenCalled();
-      expect(fetchDashboardData).toHaveBeenCalled();
+      return wrapper.vm.$nextTick(() => {
+        expect(updateVariableValues).toHaveBeenCalled();
+        expect(mergeUrlParams).toHaveBeenCalledWith(
+          convertVariablesForURL(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);
+      const firstInput = findTextInput().at(0);
 
-      firstInput.vm.$emit('input');
-      firstInput.trigger('keyup.enter');
+      firstInput.vm.$emit('onUpdate', 'label1', 'Simple text');
 
-      expect(setVariableValues).not.toHaveBeenCalled();
+      expect(updateVariableValues).not.toHaveBeenCalled();
       expect(mergeUrlParams).not.toHaveBeenCalled();
       expect(updateHistory).not.toHaveBeenCalled();
       expect(fetchDashboardData).not.toHaveBeenCalled();

spec/frontend/monitoring/mock_data.js

@@ -642,7 +642,7 @@ const generateMockTemplatingData = data => {
 
 const responseForSimpleTextVariable = {
   simpleText: {
-    label: 'var-simpleText',
+    label: 'simpleText',
     type: 'text',
     value: 'Simple text',
   },
@@ -650,7 +650,7 @@ const responseForSimpleTextVariable = {
 
 const responseForAdvTextVariable = {
   advText: {
-    label: 'var-Variable 4',
+    label: 'Variable 4',
     type: 'text',
     value: 'default',
   },
@@ -658,7 +658,8 @@ const responseForAdvTextVariable = {
 
 const responseForSimpleCustomVariable = {
   simpleCustom: {
-    label: 'var-simpleCustom',
+    label: 'simpleCustom',
+    value: 'value1',
     options: [
       {
         default: false,
@@ -682,7 +683,7 @@ const responseForSimpleCustomVariable = {
 
 const responseForAdvancedCustomVariableWithoutOptions = {
   advCustomWithoutOpts: {
-    label: 'var-advCustomWithoutOpts',
+    label: 'advCustomWithoutOpts',
     options: [],
     type: 'custom',
   },
@@ -690,7 +691,8 @@ const responseForAdvancedCustomVariableWithoutOptions = {
 
 const responseForAdvancedCustomVariableWithoutLabel = {
   advCustomWithoutLabel: {
-    label: 'var-advCustomWithoutLabel',
+    label: 'advCustomWithoutLabel',
+    value: 'value2',
     options: [
       {
         default: false,
@@ -710,7 +712,8 @@ const responseForAdvancedCustomVariableWithoutLabel = {
 const responseForAdvancedCustomVariable = {
   ...responseForSimpleCustomVariable,
   advCustomNormal: {
-    label: 'var-Advanced Var',
+    label: 'Advanced Var',
+    value: 'value2',
     options: [
       {
         default: false,

spec/frontend/monitoring/store/actions_spec.js

@@ -26,7 +26,7 @@ import {
   clearExpandedPanel,
   setGettingStartedEmptyState,
   duplicateSystemDashboard,
-  setVariableValues,
+  updateVariableValues,
 } from '~/monitoring/stores/actions';
 import {
   gqClient,
@@ -40,6 +40,7 @@ import {
   deploymentData,
   environmentData,
   annotationsData,
+  mockTemplatingData,
   dashboardGitResponse,
   mockDashboardsErrorResponse,
 } from '../mock_data';
@@ -442,14 +443,14 @@ describe('Monitoring store actions', () => {
     });
   });
 
-  describe('setVariableValues', () => {
+  describe('updateVariableValues', () => {
     let mockedState;
     beforeEach(() => {
       mockedState = storeState();
     });
     it('should commit UPDATE_VARIABLE_VALUES mutation', done => {
       testAction(
-        setVariableValues,
+        updateVariableValues,
         { pod: 'POD' },
         mockedState,
         [
@@ -574,6 +575,33 @@ 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;

spec/frontend/monitoring/store/getters_spec.js

@@ -3,7 +3,12 @@ import * as getters from '~/monitoring/stores/getters';
 import mutations from '~/monitoring/stores/mutations';
 import * as types from '~/monitoring/stores/mutation_types';
 import { metricStates } from '~/monitoring/constants';
-import { environmentData, metricsResult, dashboardGitResponse } from '../mock_data';
+import {
+  environmentData,
+  metricsResult,
+  dashboardGitResponse,
+  mockTemplatingDataResponses,
+} from '../mock_data';
 import {
   metricsDashboardPayload,
   metricResultStatus,
@@ -326,10 +331,6 @@ describe('Monitoring store Getters', () => {
 
   describe('getCustomVariablesArray', () => {
     let state;
-    const sampleVariables = {
-      'var-label1': 'pod',
-      'var-label2': 'env',
-    };
 
     beforeEach(() => {
       state = {
@@ -337,11 +338,20 @@ describe('Monitoring store Getters', () => {
       };
     });
 
-    it('transforms the promVariables object to an array in the [variable, variable_value] format', () => {
-      mutations[types.SET_VARIABLES](state, sampleVariables);
+    it('transforms the promVariables object to an array in the [variable, variable_value] format for all variable types', () => {
+      mutations[types.SET_VARIABLES](state, mockTemplatingDataResponses.allVariableTypes);
       const variablesArray = getters.getCustomVariablesArray(state);
 
-      expect(variablesArray).toEqual(['label1', 'pod', 'label2', 'env']);
+      expect(variablesArray).toEqual([
+        'simpleText',
+        'Simple text',
+        'advText',
+        'default',
+        'simpleCustom',
+        'value1',
+        'advCustomNormal',
+        'value2',
+      ]);
     });
 
     it('transforms the promVariables object to an empty array when no keys are present', () => {

spec/frontend/monitoring/store/mutations_spec.js

@@ -427,18 +427,11 @@ describe('Monitoring mutations', () => {
       mutations[types.SET_VARIABLES](stateCopy, {});
     });
 
-    it('ignores updates that are not already in promVariables', () => {
-      mutations[types.SET_VARIABLES](stateCopy, { environment: 'prod' });
-      mutations[types.UPDATE_VARIABLE_VALUES](stateCopy, { pod: 'new pod' });
+    it('updates only the value of the variable in promVariables', () => {
+      mutations[types.SET_VARIABLES](stateCopy, { environment: { value: 'prod', type: 'text' } });
+      mutations[types.UPDATE_VARIABLE_VALUES](stateCopy, { key: 'environment', value: 'new prod' });
 
-      expect(stateCopy.promVariables).toEqual({ environment: 'prod' });
-    });
-
-    it('only updates existing variables', () => {
-      mutations[types.SET_VARIABLES](stateCopy, { pod: 'POD' });
-      mutations[types.UPDATE_VARIABLE_VALUES](stateCopy, { pod: 'new pod' });
-
-      expect(stateCopy.promVariables).toEqual({ pod: 'new pod' });
+      expect(stateCopy.promVariables).toEqual({ environment: { value: 'new prod', type: 'text' } });
     });
   });
 });

spec/frontend/monitoring/store/utils_spec.js

@@ -5,7 +5,6 @@ import {
   parseAnnotationsResponse,
   removeLeadingSlash,
   mapToDashboardViewModel,
-  removePrefixFromLabels,
 } from '~/monitoring/stores/utils';
 import { annotationsData } from '../mock_data';
 import { NOT_IN_DB_PREFIX } from '~/monitoring/constants';
@@ -420,24 +419,3 @@ describe('removeLeadingSlash', () => {
     });
   });
 });
-
-describe('removePrefixFromLabels', () => {
-  it.each`
-    input               | expected
-    ${undefined}        | ${''}
-    ${null}             | ${''}
-    ${''}               | ${''}
-    ${'    '}           | ${'    '}
-    ${'pod-1'}          | ${'pod-1'}
-    ${'pod-var-1'}      | ${'pod-var-1'}
-    ${'pod-1-var'}      | ${'pod-1-var'}
-    ${'podvar--1'}      | ${'podvar--1'}
-    ${'povar-d-1'}      | ${'povar-d-1'}
-    ${'var-pod-1'}      | ${'pod-1'}
-    ${'var-var-pod-1'}  | ${'var-pod-1'}
-    ${'varvar-pod-1'}   | ${'varvar-pod-1'}
-    ${'var-pod-1-var-'} | ${'pod-1-var-'}
-  `('removePrefixFromLabels returns $expected with input $input', ({ input, expected }) => {
-    expect(removePrefixFromLabels(input)).toEqual(expected);
-  });
-});

spec/frontend/monitoring/utils_spec.js

@@ -169,8 +169,8 @@ describe('monitoring/utils', () => {
     });
   });
 
-  describe('promCustomVariablesFromUrl', () => {
-    const { promCustomVariablesFromUrl } = monitoringUtils;
+  describe('getPromCustomVariablesFromUrl', () => {
+    const { getPromCustomVariablesFromUrl } = monitoringUtils;
 
     beforeEach(() => {
       jest.spyOn(urlUtils, 'queryToObject');
@@ -195,7 +195,7 @@ describe('monitoring/utils', () => {
         'var-pod': 'POD',
       });
 
-      expect(promCustomVariablesFromUrl()).toEqual(expect.objectContaining({ 'var-pod': 'POD' }));
+      expect(getPromCustomVariablesFromUrl()).toEqual(expect.objectContaining({ pod: 'POD' }));
     });
 
     it('returns an empty object when no custom variables are present', () => {
@@ -203,7 +203,7 @@ describe('monitoring/utils', () => {
         dashboard: '.gitlab/dashboards/custom_dashboard.yml',
       });
 
-      expect(promCustomVariablesFromUrl()).toStrictEqual({});
+      expect(getPromCustomVariablesFromUrl()).toStrictEqual({});
     });
   });
 
@@ -398,4 +398,108 @@ describe('monitoring/utils', () => {
       });
     });
   });
+
+  describe('removePrefixFromLabel', () => {
+    it.each`
+      input               | expected
+      ${undefined}        | ${''}
+      ${null}             | ${''}
+      ${''}               | ${''}
+      ${'    '}           | ${'    '}
+      ${'pod-1'}          | ${'pod-1'}
+      ${'pod-var-1'}      | ${'pod-var-1'}
+      ${'pod-1-var'}      | ${'pod-1-var'}
+      ${'podvar--1'}      | ${'podvar--1'}
+      ${'povar-d-1'}      | ${'povar-d-1'}
+      ${'var-pod-1'}      | ${'pod-1'}
+      ${'var-var-pod-1'}  | ${'var-pod-1'}
+      ${'varvar-pod-1'}   | ${'varvar-pod-1'}
+      ${'var-pod-1-var-'} | ${'pod-1-var-'}
+    `('removePrefixFromLabel returns $expected with input $input', ({ input, expected }) => {
+      expect(monitoringUtils.removePrefixFromLabel(input)).toEqual(expected);
+    });
+  });
+
+  describe('mergeURLVariables', () => {
+    beforeEach(() => {
+      jest.spyOn(urlUtils, 'queryToObject');
+    });
+
+    afterEach(() => {
+      urlUtils.queryToObject.mockRestore();
+    });
+
+    it('returns empty object if variables are not defined in yml or URL', () => {
+      urlUtils.queryToObject.mockReturnValueOnce({});
+
+      expect(monitoringUtils.mergeURLVariables({})).toEqual({});
+    });
+
+    it('returns empty object if variables are defined in URL but not in yml', () => {
+      urlUtils.queryToObject.mockReturnValueOnce({
+        'var-env': 'one',
+        'var-instance': 'localhost',
+      });
+
+      expect(monitoringUtils.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',
+      };
+
+      expect(monitoringUtils.mergeURLVariables(params)).toEqual(params);
+    });
+
+    it('returns yml variables if variables defined in URL do not match with yml variables', () => {
+      const urlParams = {
+        'var-env': 'one',
+        'var-instance': 'localhost',
+      };
+      const ymlParams = {
+        pod: { value: 'one' },
+        service: { value: 'database' },
+      };
+      urlUtils.queryToObject.mockReturnValueOnce(urlParams);
+
+      expect(monitoringUtils.mergeURLVariables(ymlParams)).toEqual(ymlParams);
+    });
+
+    it('returns merged yml and URL variables if there is some match', () => {
+      const urlParams = {
+        'var-env': 'one',
+        'var-instance': 'localhost:8080',
+      };
+      const ymlParams = {
+        instance: { value: 'localhost' },
+        service: { value: 'database' },
+      };
+
+      const merged = {
+        instance: { value: 'localhost:8080' },
+        service: { value: 'database' },
+      };
+
+      urlUtils.queryToObject.mockReturnValueOnce(urlParams);
+
+      expect(monitoringUtils.mergeURLVariables(ymlParams)).toEqual(merged);
+    });
+  });
+
+  describe('convertVariablesForURL', () => {
+    it.each`
+      input                               | expected
+      ${undefined}                        | ${{}}
+      ${null}                             | ${{}}
+      ${{}}                               | ${{}}
+      ${{ env: { value: 'prod' } }}       | ${{ 'var-env': 'prod' }}
+      ${{ 'var-env': { value: 'prod' } }} | ${{ 'var-var-env': 'prod' }}
+    `('convertVariablesForURL returns $expected with input $input', ({ input, expected }) => {
+      expect(monitoringUtils.convertVariablesForURL(input)).toEqual(expected);
+    });
+  });
 });