1 files changed, 49 insertions, 2 deletions
diff --git a/app/assets/javascripts/monitoring/utils.js b/app/assets/javascripts/monitoring/utils.js
index 4d2927a066e..0c6fcad9dd0 100644
--- a/app/assets/javascripts/monitoring/utils.js
+++ b/app/assets/javascripts/monitoring/utils.js
@@ -5,6 +5,7 @@ import {
   removeParams,
   updateHistory,
 } from '~/lib/utils/url_utility';
+import { parseBoolean } from '~/lib/utils/common_utils';
 import {
   timeRangeParamNames,
   timeRangeFromParams,
@@ -13,6 +14,50 @@ import {
 import { VARIABLE_PREFIX } from './constants';
 
 /**
+ * Extracts the initial state and props from HTML dataset
+ * and places them in separate objects to setup bundle.
+ * @param {*} dataset
+ */
+export const stateAndPropsFromDataset = (dataset = {}) => {
+  const {
+    currentDashboard,
+    deploymentsEndpoint,
+    dashboardEndpoint,
+    dashboardsEndpoint,
+    dashboardTimezone,
+    canAccessOperationsSettings,
+    operationsSettingsPath,
+    projectPath,
+    logsPath,
+    currentEnvironmentName,
+    customDashboardBasePath,
+    ...dataProps
+  } = dataset;
+
+  // HTML attributes are always strings, parse other types.
+  dataProps.hasMetrics = parseBoolean(dataProps.hasMetrics);
+  dataProps.customMetricsAvailable = parseBoolean(dataProps.customMetricsAvailable);
+  dataProps.prometheusAlertsAvailable = parseBoolean(dataProps.prometheusAlertsAvailable);
+
+  return {
+    initState: {
+      currentDashboard,
+      deploymentsEndpoint,
+      dashboardEndpoint,
+      dashboardsEndpoint,
+      dashboardTimezone,
+      canAccessOperationsSettings,
+      operationsSettingsPath,
+      projectPath,
+      logsPath,
+      currentEnvironmentName,
+      customDashboardBasePath,
+    },
+    dataProps,
+  };
+};
+
+/**
  * List of non time range url parameters
  * This will be removed once we add support for free text variables
  * via the dashboard yaml files in https://gitlab.com/gitlab-org/gitlab/-/issues/215689
@@ -160,8 +205,10 @@ export const removePrefixFromLabel = label =>
  * @returns {Object}
  */
 export const convertVariablesForURL = variables =>
-  Object.keys(variables || {}).reduce((acc, key) => {
-    acc[addPrefixToLabel(key)] = variables[key]?.value;
+  variables.reduce((acc, { name, value }) => {
+    if (value !== null) {
+      acc[addPrefixToLabel(name)] = value;
+    }
     return acc;
   }, {});