Update metrics dashboard variables map

This MR updates the format of custom variables
the UI sends to the backend in metrics dashboard

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

@@ -218,13 +218,16 @@ export const fetchPrometheusMetric = (
   { commit, state, getters },
   { metric, defaultQueryParams },
 ) => {
-  const queryParams = { ...defaultQueryParams };
+  let queryParams = { ...defaultQueryParams };
   if (metric.step) {
     queryParams.step = metric.step;
   }
 
   if (Object.keys(state.variables).length > 0) {
-    queryParams.variables = getters.getCustomVariablesArray;
+    queryParams = {
+      ...queryParams,
+      ...getters.getCustomVariablesParams,
+    };
   }
 
   commit(types.REQUEST_METRIC_RESULT, { metricId: metric.metricId });

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

-import { flatMap } from 'lodash';
 import { NOT_IN_DB_PREFIX } from '../constants';
+import { addPrefixToCustomVariableParams } from './utils';
 
 const metricsIdsInPanel = panel =>
   panel.metrics.filter(metric => metric.metricId && metric.result).map(metric => metric.metricId);
@@ -116,13 +116,27 @@ export const filteredEnvironments = state =>
  * Maps an variables object to an array along with stripping
  * the variable prefix.
  *
+ * This method outputs an object in the below format
+ *
+ * {
+ *   variables[key1]=value1,
+ *   variables[key2]=value2,
+ * }
+ *
+ * This is done so that the backend can identify the custom
+ * user-defined variables coming through the URL and differentiate
+ * from other variables used for Prometheus API endpoint.
+ *
  * @param {Object} variables - Custom variables provided by the user
  * @returns {Array} The custom variables array to be send to the API
- * in the format of [variable1, variable1_value]
+ * in the format of {variables[key1]=value1, variables[key2]=value2}
  */
 
-export const getCustomVariablesArray = state =>
-  flatMap(state.variables, (variable, key) => [key, variable.value]);
+export const getCustomVariablesParams = state =>
+  Object.keys(state.variables).reduce((acc, variable) => {
+    acc[addPrefixToCustomVariableParams(variable)] = state.variables[variable]?.value;
+    return acc;
+  }, {});
 
 // prevent babel-plugin-rewire from generating an invalid default during karma tests
 export default () => {};

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

@@ -229,3 +229,19 @@ export const normalizeQueryResult = timeSeries => {
 
   return normalizedResult;
 };
+
+/**
+ * Custom variables defined in the dashboard yml file are
+ * eventually passed over the wire to the backend Prometheus
+ * API proxy.
+ *
+ * This method adds a prefix to the URL param keys so that
+ * the backend can differential these variables from the other
+ * variables.
+ *
+ * This is currently only used by getters/getCustomVariablesParams
+ *
+ * @param {String} key Variable key that needs to be prefixed
+ * @returns {String}
+ */
+export const addPrefixToCustomVariableParams = key => `variables[${key}]`;

changelogs/unreleased/218312-change-variables-parameter-format.yml

+---
+title: Change format of variables parameter in Prometheus proxy API for metrics dashboard
+merge_request: 33062
+author:
+type: fixed

spec/frontend/monitoring/store/getters_spec.js

@@ -329,7 +329,7 @@ describe('Monitoring store Getters', () => {
     });
   });
 
-  describe('getCustomVariablesArray', () => {
+  describe('getCustomVariablesParams', () => {
     let state;
 
     beforeEach(() => {
@@ -340,25 +340,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);
-      const variablesArray = getters.getCustomVariablesArray(state);
-
-      expect(variablesArray).toEqual([
-        'simpleText',
-        'Simple text',
-        'advText',
-        'default',
-        'simpleCustom',
-        'value1',
-        'advCustomNormal',
-        'value2',
-      ]);
+      const variablesArray = getters.getCustomVariablesParams(state);
+
+      expect(variablesArray).toEqual({
+        'variables[advCustomNormal]': 'value2',
+        'variables[advText]': 'default',
+        'variables[simpleCustom]': 'value1',
+        'variables[simpleText]': 'Simple text',
+      });
     });
 
     it('transforms the variables object to an empty array when no keys are present', () => {
       mutations[types.SET_VARIABLES](state, {});
-      const variablesArray = getters.getCustomVariablesArray(state);
+      const variablesArray = getters.getCustomVariablesParams(state);
 
-      expect(variablesArray).toEqual([]);
+      expect(variablesArray).toEqual({});
     });
   });