DashboardScene: Add dashboard slug support (#80726)

This commit is contained in:
Dominik Prokop 2024-01-17 06:58:57 -08:00 committed by GitHub
parent df2b4efcfb
commit 3356fb7726
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
8 changed files with 62 additions and 23 deletions

View File

@ -94,6 +94,7 @@ export class PanelInspectDrawer extends SceneObjectBase<PanelInspectDrawerState>
locationService.push(
getDashboardUrl({
uid: dashboard.state.uid,
slug: dashboard.state.meta.slug,
currentQueryParams: locationService.getLocation().search,
updateQuery: {
inspect: null,

View File

@ -66,6 +66,19 @@ export class DashboardScenePageStateManager extends StateManagerBase<DashboardSc
// Fill in meta fields
const dashboard = this.initDashboardMeta(rsp);
if (dashboard.meta.url) {
const dashboardUrl = locationUtil.stripBaseFromUrl(dashboard.meta.url);
const currentPath = locationService.getLocation().pathname;
if (dashboardUrl !== currentPath) {
// Spread current location to persist search params used for navigation
locationService.replace({
...locationService.getLocation(),
pathname: dashboardUrl,
});
console.log('not correct url correcting', dashboardUrl, currentPath);
}
}
// Populate nav model in global store according to the folder
await this.initNavModel(dashboard);

View File

@ -95,6 +95,7 @@ export class PanelEditor extends SceneObjectBase<PanelEditorState> {
locationService.push(
getDashboardUrl({
uid: dashboard.state.uid,
slug: dashboard.state.meta.slug,
currentQueryParams: locationService.getLocation().search,
updateQuery: {
editPanel: null,

View File

@ -211,6 +211,7 @@ export class DashboardScene extends SceneObjectBase<DashboardSceneState> {
text: this.state.title,
url: getDashboardUrl({
uid: this.state.uid,
slug: meta.slug,
currentQueryParams: location.search,
updateQuery: { viewPanel: null, inspect: null, editview: null, editPanel: null, tab: null },
}),

View File

@ -73,6 +73,7 @@ export class ShareLinkTab extends SceneObjectBase<ShareLinkTabState> {
let shareUrl = getDashboardUrl({
uid: dashboard.state.uid,
slug: dashboard.state.meta.slug,
currentQueryParams: location.search,
updateQuery: urlParamsUpdate,
absolute: true,

View File

@ -50,29 +50,32 @@ function SharePanelEmbedTabRenderer({ model }: SceneComponentProps<SharePanelEmb
}}
range={timeRangeState.state.value}
dashboard={{ uid: dashUid ?? '', time: timeRangeState.state.value }}
buildIframe={buildIframe}
buildIframe={getIframeBuilder(dash)}
/>
);
}
function buildIframe(
useCurrentTimeRange: boolean,
dashboardUid: string,
selectedTheme?: string,
panel?: { timeFrom?: string; id: number },
range?: TimeRange
) {
const params = buildParams({ useCurrentTimeRange, selectedTheme, panel, range });
const panelId = params.get('editPanel') ?? params.get('viewPanel') ?? '';
params.set('panelId', panelId);
params.delete('editPanel');
params.delete('viewPanel');
const getIframeBuilder =
(dashboard: DashboardScene) =>
(
useCurrentTimeRange: boolean,
_dashboardUid: string,
selectedTheme?: string,
panel?: { timeFrom?: string; id: number },
range?: TimeRange
) => {
const params = buildParams({ useCurrentTimeRange, selectedTheme, panel, range });
const panelId = params.get('editPanel') ?? params.get('viewPanel') ?? '';
params.set('panelId', panelId);
params.delete('editPanel');
params.delete('viewPanel');
const soloUrl = getDashboardUrl({
absolute: true,
soloRoute: true,
uid: dashboardUid,
currentQueryParams: params.toString(),
});
return `<iframe src="${soloUrl}" width="450" height="200" frameborder="0"></iframe>`;
}
const soloUrl = getDashboardUrl({
absolute: true,
soloRoute: true,
uid: dashboard.state.uid,
slug: dashboard.state.meta.slug,
currentQueryParams: params.toString(),
});
return `<iframe src="${soloUrl}" width="450" height="200" frameborder="0"></iframe>`;
};

View File

@ -17,6 +17,17 @@ describe('dashboard utils', () => {
expect(url).toBe('/d/dash-1/panel-edit/2?orgId=1&filter=A');
});
it('Can getUrl with slug', () => {
const url = getDashboardUrl({
uid: 'dash-1',
slug: 'dash-1-slug',
subPath: '/panel-edit/2',
currentQueryParams: '?orgId=1&filter=A',
});
expect(url).toBe('/d/dash-1/dash-1-slug/panel-edit/2?orgId=1&filter=A');
});
it('Can getUrl with params removed and addded', () => {
const url = getDashboardUrl({
uid: 'dash-1',

View File

@ -9,6 +9,7 @@ import { getQueryRunnerFor } from './utils';
export interface DashboardUrlOptions {
uid?: string;
slug?: string;
subPath?: string;
updateQuery?: UrlQueryMap;
/** Set to location.search to preserve current params */
@ -24,10 +25,17 @@ export interface DashboardUrlOptions {
}
export function getDashboardUrl(options: DashboardUrlOptions) {
let path = `/d/${options.uid}${options.subPath ?? ''}`;
let path = `/d/${options.uid}`;
if (options.soloRoute) {
path = `/d-solo/${options.uid}${options.subPath ?? ''}`;
path = `/d-solo/${options.uid}`;
}
if (options.slug) {
path += `/${options.slug}`;
}
if (options.subPath) {
path += options.subPath;
}
if (options.render) {