Update metric dashboard promVariables to variables

This MR updates the promVariables in monitoring dashboard
to variables as it is more accurate

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

@@ -226,7 +226,7 @@ export default {
       'allDashboards',
       'environmentsLoading',
       'expandedPanel',
-      'promVariables',
+      'variables',
       'isUpdatingStarredValue',
     ]),
     ...mapGetters('monitoringDashboard', [
@@ -251,7 +251,7 @@ export default {
       return !this.environmentsLoading && this.filteredEnvironments.length === 0;
     },
     shouldShowVariablesSection() {
-      return Object.keys(this.promVariables).length > 0;
+      return Object.keys(this.variables).length > 0;
     },
   },
   watch: {
@@ -273,7 +273,7 @@ export default {
       handler({ group, panel }) {
         const dashboardPath = this.currentDashboard || this.selectedDashboard?.path;
         updateHistory({
-          url: panelToUrl(dashboardPath, convertVariablesForURL(this.promVariables), group, panel),
+          url: panelToUrl(dashboardPath, convertVariablesForURL(this.variables), group, panel),
           title: document.title,
         });
       },
@@ -344,7 +344,7 @@ export default {
     },
     generatePanelUrl(groupKey, panel) {
       const dashboardPath = this.currentDashboard || this.selectedDashboard?.path;
-      return panelToUrl(dashboardPath, convertVariablesForURL(this.promVariables), groupKey, panel);
+      return panelToUrl(dashboardPath, convertVariablesForURL(this.variables), groupKey, panel);
     },
     hideAddMetricModal() {
       this.$refs.addMetricModal.hide();

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

@@ -2,7 +2,7 @@
 import { mapState, mapActions } from 'vuex';
 import CustomVariable from './variables/custom_variable.vue';
 import TextVariable from './variables/text_variable.vue';
-import { setPromCustomVariablesFromUrl } from '../utils';
+import { setCustomVariablesFromUrl } from '../utils';
 
 export default {
   components: {
@@ -10,12 +10,12 @@ export default {
     TextVariable,
   },
   computed: {
-    ...mapState('monitoringDashboard', ['promVariables']),
+    ...mapState('monitoringDashboard', ['variables']),
   },
   methods: {
     ...mapActions('monitoringDashboard', ['fetchDashboardData', 'updateVariableValues']),
     refreshDashboard(variable, value) {
-      if (this.promVariables[variable].value !== value) {
+      if (this.variables[variable].value !== value) {
         const changedVariable = { key: variable, value };
         // update the Vuex store
         this.updateVariableValues(changedVariable);
@@ -24,7 +24,7 @@ export default {
         // mutation respond directly.
         // This can be further investigate in
         // https://gitlab.com/gitlab-org/gitlab/-/issues/217713
-        setPromCustomVariablesFromUrl(this.promVariables);
+        setCustomVariablesFromUrl(this.variables);
         // fetch data
         this.fetchDashboardData();
       }
@@ -41,7 +41,7 @@ export default {
 </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="(variable, key) in promVariables" :key="key" class="mb-1 pr-2 d-flex d-sm-block">
+    <div v-for="(variable, key) in variables" :key="key" class="mb-1 pr-2 d-flex d-sm-block">
       <component
         :is="variableComponent(variable.type)"
         class="mb-0 flex-grow-1"

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

@@ -223,7 +223,7 @@ export const fetchPrometheusMetric = (
     queryParams.step = metric.step;
   }
 
-  if (Object.keys(state.promVariables).length > 0) {
+  if (Object.keys(state.variables).length > 0) {
     queryParams.variables = getters.getCustomVariablesArray;
   }
 

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

@@ -122,7 +122,7 @@ export const filteredEnvironments = state =>
  */
 
 export const getCustomVariablesArray = state =>
-  flatMap(state.promVariables, (variable, key) => [key, variable.value]);
+  flatMap(state.variables, (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

@@ -189,11 +189,11 @@ export default {
     state.expandedPanel.panel = panel;
   },
   [types.SET_VARIABLES](state, variables) {
-    state.promVariables = variables;
+    state.variables = variables;
   },
   [types.UPDATE_VARIABLE_VALUES](state, updatedVariable) {
-    Object.assign(state.promVariables[updatedVariable.key], {
-      ...state.promVariables[updatedVariable.key],
+    Object.assign(state.variables[updatedVariable.key], {
+      ...state.variables[updatedVariable.key],
       value: updatedVariable.value,
     });
   },

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

@@ -34,7 +34,11 @@ export default () => ({
     panel: null,
   },
   allDashboards: [],
-  promVariables: {},
+  /**
+   * User-defined custom variables are passed
+   * via the dashboard.yml file.
+   */
+  variables: {},
 
   // Other project data
   annotations: [],

app/assets/javascripts/monitoring/utils.js

@@ -151,7 +151,7 @@ export const removePrefixFromLabel = label =>
 
 /**
  * Convert parsed template variables to an object
- * with just keys and values. Prepare the promVariables
+ * with just keys and values. Prepare the variables
  * 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.
@@ -183,15 +183,15 @@ export const getPromCustomVariablesFromUrl = (search = window.location.search) =
 };
 
 /**
- * Update the URL with promVariables. This usually get triggered when
+ * Update the URL with variables. This usually get triggered when
  * the user interacts with the dynamic input elements in the monitoring
  * dashboard header.
  *
- * @param {Object} promVariables user defined variables
+ * @param {Object} variables user defined variables
  */
-export const setPromCustomVariablesFromUrl = promVariables => {
+export const setCustomVariablesFromUrl = variables => {
   // prep the variables to append to URL
-  const parsedVariables = convertVariablesForURL(promVariables);
+  const parsedVariables = convertVariablesForURL(variables);
   // update the URL
   updateHistory({
     url: mergeUrlParams(parsedVariables, window.location.href),
@@ -262,7 +262,7 @@ export const expandedPanelPayloadFromUrl = (dashboard, search = window.location.
  * If no group/panel is set, the dashboard URL is returned.
  *
  * @param {?String} dashboard - Dashboard path, used as identifier for a dashboard
- * @param {?Object} promVariables - Custom variables that came from the URL
+ * @param {?Object} variables - Custom variables that came from the URL
  * @param {?String} group - Group Identifier
  * @param {?Object} panel - Panel object from the dashboard
  * @param {?String} url - Base URL including current search params
@@ -270,14 +270,14 @@ export const expandedPanelPayloadFromUrl = (dashboard, search = window.location.
  */
 export const panelToUrl = (
   dashboard = null,
-  promVariables,
+  variables,
   group,
   panel,
   url = window.location.href,
 ) => {
   const params = {
     dashboard,
-    ...promVariables,
+    ...variables,
   };
 
   if (group && panel) {

spec/frontend/monitoring/components/variables_section_spec.js

@@ -67,7 +67,7 @@ describe('Metrics dashboard/variables section component', () => {
             namespaced: true,
             state: {
               showEmptyState: false,
-              promVariables: sampleVariables,
+              variables: sampleVariables,
             },
             actions: {
               fetchDashboardData,

spec/frontend/monitoring/store/getters_spec.js

@@ -334,11 +334,11 @@ describe('Monitoring store Getters', () => {
 
     beforeEach(() => {
       state = {
-        promVariables: {},
+        variables: {},
       };
     });
 
-    it('transforms the promVariables object to an array in the [variable, variable_value] format for all variable types', () => {
+    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);
       const variablesArray = getters.getCustomVariablesArray(state);
 
@@ -354,7 +354,7 @@ describe('Monitoring store Getters', () => {
       ]);
     });
 
-    it('transforms the promVariables object to an empty array when no keys are present', () => {
+    it('transforms the variables object to an empty array when no keys are present', () => {
       mutations[types.SET_VARIABLES](state, {});
       const variablesArray = getters.getCustomVariablesArray(state);
 

spec/frontend/monitoring/store/mutations_spec.js

@@ -412,13 +412,13 @@ describe('Monitoring mutations', () => {
     it('stores an empty variables array when no custom variables are given', () => {
       mutations[types.SET_VARIABLES](stateCopy, {});
 
-      expect(stateCopy.promVariables).toEqual({});
+      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.promVariables).toEqual({ pod: 'POD', stage: 'main ops' });
+      expect(stateCopy.variables).toEqual({ pod: 'POD', stage: 'main ops' });
     });
   });
 
@@ -427,11 +427,11 @@ describe('Monitoring mutations', () => {
       mutations[types.SET_VARIABLES](stateCopy, {});
     });
 
-    it('updates only the value of the variable in promVariables', () => {
+    it('updates only the value of the variable in variables', () => {
       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: { value: 'new prod', type: 'text' } });
+      expect(stateCopy.variables).toEqual({ environment: { value: 'new prod', type: 'text' } });
     });
   });
 });