Add latest changes from gitlab-org/gitlab@13-0-stable-ee

3 files changed, 39 insertions, 6 deletions

diff --git a/app/assets/javascripts/monitoring/stores/actions.js b/app/assets/javascripts/monitoring/stores/actions.js
index b057afa2264..9e3edfb495d 100644
--- a/app/assets/javascripts/monitoring/stores/actions.js
+++ b/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.promVariables).length > 0) {
-    queryParams.variables = getters.getCustomVariablesArray;
+    queryParams = {
+      ...queryParams,
+      ...getters.getCustomVariablesParams,
+    };
   }
 
   commit(types.REQUEST_METRIC_RESULT, { metricId: metric.metricId });
diff --git a/app/assets/javascripts/monitoring/stores/getters.js b/app/assets/javascripts/monitoring/stores/getters.js
index ae3ff5596e1..f309addee6b 100644
--- a/app/assets/javascripts/monitoring/stores/getters.js
+++ b/app/assets/javascripts/monitoring/stores/getters.js
@@ -1,5 +1,5 @@
-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.promVariables, (variable, key) => [key, variable.value]);
+export const getCustomVariablesParams = state =>
+  Object.keys(state.promVariables).reduce((acc, variable) => {
+    acc[addPrefixToCustomVariableParams(variable)] = state.promVariables[variable]?.value;
+    return acc;
+  }, {});
 
 // prevent babel-plugin-rewire from generating an invalid default during karma tests
 export default () => {};
diff --git a/app/assets/javascripts/monitoring/stores/utils.js b/app/assets/javascripts/monitoring/stores/utils.js
index a47e5f598f5..b6817e7279a 100644
--- a/app/assets/javascripts/monitoring/stores/utils.js
+++ b/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}]`;