Ensure shared links use variables

This makes all of the links generated
by the monitoring dashboard use the variables
when the links are used in the embedded metrics
feature

t

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

@@ -39,6 +39,7 @@ import {
   timeRangeFromUrl,
   panelToUrl,
   expandedPanelPayloadFromUrl,
+  convertVariablesForURL,
 } from '../utils';
 import { metricStates } from '../constants';
 import { defaultTimeRange, timeRanges } from '~/vue_shared/constants';
@@ -272,7 +273,7 @@ export default {
       handler({ group, panel }) {
         const dashboardPath = this.currentDashboard || this.selectedDashboard?.path;
         updateHistory({
-          url: panelToUrl(dashboardPath, group, panel),
+          url: panelToUrl(dashboardPath, convertVariablesForURL(this.promVariables), group, panel),
           title: document.title,
         });
       },
@@ -343,7 +344,7 @@ export default {
     },
     generatePanelUrl(groupKey, panel) {
       const dashboardPath = this.currentDashboard || this.selectedDashboard?.path;
-      return panelToUrl(dashboardPath, groupKey, panel);
+      return panelToUrl(dashboardPath, convertVariablesForURL(this.promVariables), groupKey, panel);
     },
     hideAddMetricModal() {
       this.$refs.addMetricModal.hide();

app/assets/javascripts/monitoring/utils.js

@@ -17,7 +17,7 @@ import { VARIABLE_PREFIX } from './constants';
  * 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
  */
-export const dashboardParams = ['dashboard', 'group', 'title', 'y_label'];
+export const dashboardParams = ['dashboard', 'group', 'title', 'y_label', 'embedded'];
 
 /**
  * This method is used to validate if the graph data format for a chart component
@@ -262,14 +262,22 @@ 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 {?String} group - Group Identifier
  * @param {?Object} panel - Panel object from the dashboard
  * @param {?String} url - Base URL including current search params
  * @returns Dashboard URL which expands a panel (chart)
  */
-export const panelToUrl = (dashboard = null, group, panel, url = window.location.href) => {
+export const panelToUrl = (
+  dashboard = null,
+  promVariables,
+  group,
+  panel,
+  url = window.location.href,
+) => {
   const params = {
     dashboard,
+    ...promVariables,
   };
 
   if (group && panel) {

changelogs/unreleased/jivanvl-ensure-links-generated-manage-variables.yml

+---
+title: Ensure links generated by the copy link feature contain variables
+merge_request: 31636
+author:
+type: changed

spec/frontend/monitoring/utils_spec.js

@@ -315,24 +315,31 @@ describe('monitoring/utils', () => {
     const getUrlParams = url => urlUtils.queryToObject(url.split('?')[1]);
 
     it('returns URL for a panel when query parameters are given', () => {
-      const params = getUrlParams(panelToUrl(dashboard, panelGroup.group, panel));
-
-      expect(params).toEqual({
-        dashboard,
-        group: panelGroup.group,
-        title: panel.title,
-        y_label: panel.y_label,
-      });
+      const params = getUrlParams(panelToUrl(dashboard, {}, panelGroup.group, panel));
+
+      expect(params).toEqual(
+        expect.objectContaining({
+          dashboard,
+          group: panelGroup.group,
+          title: panel.title,
+          y_label: panel.y_label,
+        }),
+      );
     });
 
     it('returns a dashboard only URL if group is missing', () => {
-      const params = getUrlParams(panelToUrl(dashboard, null, panel));
-      expect(params).toEqual({ dashboard: 'metrics.yml' });
+      const params = getUrlParams(panelToUrl(dashboard, {}, null, panel));
+      expect(params).toEqual(expect.objectContaining({ dashboard: 'metrics.yml' }));
     });
 
     it('returns a dashboard only URL if panel is missing', () => {
-      const params = getUrlParams(panelToUrl(dashboard, panelGroup.group, null));
-      expect(params).toEqual({ dashboard: 'metrics.yml' });
+      const params = getUrlParams(panelToUrl(dashboard, {}, panelGroup.group, null));
+      expect(params).toEqual(expect.objectContaining({ dashboard: 'metrics.yml' }));
+    });
+
+    it('returns URL for a panel when query paramters are given including custom variables', () => {
+      const params = getUrlParams(panelToUrl(dashboard, { pod: 'pod' }, panelGroup.group, null));
+      expect(params).toEqual(expect.objectContaining({ dashboard: 'metrics.yml', pod: 'pod' }));
     });
   });