Commit c6feb790 authored by Jose Vargas's avatar Jose Vargas Committed by Dhiraj Bodicherla

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
parent f5e79f65
......@@ -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();
......
......@@ -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) {
......
---
title: Ensure links generated by the copy link feature contain variables
merge_request: 31636
author:
type: changed
......@@ -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));
const params = getUrlParams(panelToUrl(dashboard, {}, panelGroup.group, panel));
expect(params).toEqual({
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' }));
});
});
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment