From 7edcde63650b3070b2b050c738cb1fb509731780 Mon Sep 17 00:00:00 2001 From: Dominik Prokop Date: Thu, 13 Feb 2025 15:46:22 +0100 Subject: [PATCH] Dashboards: Bring back scripted dashboards (#100575) * Dashboards: Bring back scripted dashboards * Fix scripted dashboard examples * Fix dashboard-solo page not respecnig scripted dashboards --- .../pages/DashboardScenePage.tsx | 2 + .../pages/DashboardScenePageStateManager.ts | 9 ++++- .../dashboard-scene/solo/SoloPanelPage.tsx | 7 ++-- .../containers/DashboardPageProxy.tsx | 1 + public/app/routes/routes.tsx | 6 ++- public/dashboards/scripted.js | 28 +++++--------- public/dashboards/scripted_async.js | 3 +- public/dashboards/scripted_templated.js | 38 ++++++++++++------- 8 files changed, 52 insertions(+), 42 deletions(-) diff --git a/public/app/features/dashboard-scene/pages/DashboardScenePage.tsx b/public/app/features/dashboard-scene/pages/DashboardScenePage.tsx index 6ac66d3d312..19a4c412b42 100644 --- a/public/app/features/dashboard-scene/pages/DashboardScenePage.tsx +++ b/public/app/features/dashboard-scene/pages/DashboardScenePage.tsx @@ -37,6 +37,8 @@ export function DashboardScenePage({ route, queryParams, location }: Props) { stateManager.loadSnapshot(slug!); } else { stateManager.loadDashboard({ + type, + slug, uid: uid ?? '', route: route.routeName as DashboardRoutes, urlFolderUid: queryParams.folderUid, diff --git a/public/app/features/dashboard-scene/pages/DashboardScenePageStateManager.ts b/public/app/features/dashboard-scene/pages/DashboardScenePageStateManager.ts index 161ee48f10c..b9f37706bad 100644 --- a/public/app/features/dashboard-scene/pages/DashboardScenePageStateManager.ts +++ b/public/app/features/dashboard-scene/pages/DashboardScenePageStateManager.ts @@ -63,6 +63,7 @@ export interface LoadDashboardOptions { uid: string; route: DashboardRoutes; type?: string; + slug?: string; urlFolderUid?: string; params?: { version: number; @@ -266,6 +267,8 @@ export class DashboardScenePageStateManager extends DashboardScenePageStateManag } public async fetchDashboard({ + type, + slug, uid, route, urlFolderUid, @@ -323,7 +326,7 @@ export class DashboardScenePageStateManager extends DashboardScenePageStateManag } : undefined; - rsp = await dashboardLoaderSrv.loadDashboard('db', '', uid, queryParams); + rsp = await dashboardLoaderSrv.loadDashboard(type || 'db', slug || '', uid, queryParams); if (route === DashboardRoutes.Embedded) { rsp.meta.isEmbedded = true; @@ -477,6 +480,8 @@ export class DashboardScenePageStateManagerV2 extends DashboardScenePageStateMan } public async fetchDashboard({ + type, + slug, uid, route, urlFolderUid, @@ -529,7 +534,7 @@ export class DashboardScenePageStateManagerV2 extends DashboardScenePageStateMan ...params.variables, } : undefined; - rsp = await this.dashboardLoader.loadDashboard('db', '', uid, queryParams); + rsp = await this.dashboardLoader.loadDashboard(type || 'db', slug || '', uid, queryParams); if (route === DashboardRoutes.Embedded) { throw new Error('Method not implemented.'); // rsp.meta.isEmbedded = true; diff --git a/public/app/features/dashboard-scene/solo/SoloPanelPage.tsx b/public/app/features/dashboard-scene/solo/SoloPanelPage.tsx index 265d32c9e72..01894fe9d9e 100644 --- a/public/app/features/dashboard-scene/solo/SoloPanelPage.tsx +++ b/public/app/features/dashboard-scene/solo/SoloPanelPage.tsx @@ -26,12 +26,12 @@ export interface Props extends GrafanaRouteComponentProps { - stateManager.loadDashboard({ uid, route: DashboardRoutes.Embedded }); + stateManager.loadDashboard({ uid, type, slug, route: DashboardRoutes.Embedded }); return () => stateManager.clearState(); - }, [stateManager, queryParams, uid]); + }, [stateManager, queryParams, uid, type, slug]); if (!queryParams.panelId) { return ; @@ -64,7 +64,6 @@ export function SoloPanelRenderer({ dashboard, panelId }: { dashboard: Dashboard const [panel, error] = useSoloPanel(dashboard, panelId); const { controls } = dashboard.useState(); const refreshPicker = controls?.useState()?.refreshPicker; - const styles = useStyles2(getStyles); useEffect(() => { diff --git a/public/app/features/dashboard/containers/DashboardPageProxy.tsx b/public/app/features/dashboard/containers/DashboardPageProxy.tsx index 52d91d5d956..1570fbc6ee7 100644 --- a/public/app/features/dashboard/containers/DashboardPageProxy.tsx +++ b/public/app/features/dashboard/containers/DashboardPageProxy.tsx @@ -51,6 +51,7 @@ function DashboardPageProxy(props: DashboardPageProxyProps) { route: props.route.routeName as DashboardRoutes, uid: params.uid ?? '', type: params.type, + slug: params.slug, }); }, [params.uid, props.route.routeName]); diff --git a/public/app/routes/routes.tsx b/public/app/routes/routes.tsx index 839eb62ad85..e518b69eb60 100644 --- a/public/app/routes/routes.tsx +++ b/public/app/routes/routes.tsx @@ -96,8 +96,10 @@ export function getAppRoutes(): RouteDescriptor[] { path: '/dashboard-solo/:type/:slug', routeName: DashboardRoutes.Normal, chromeless: true, - component: SafeDynamicImport( - () => import(/* webpackChunkName: "SoloPanelPage" */ '../features/dashboard/containers/SoloPanelPage') + component: SafeDynamicImport(() => + config.featureToggles.dashboardSceneSolo + ? import(/* webpackChunkName: "SoloPanelPage" */ '../features/dashboard-scene/solo/SoloPanelPage') + : import(/* webpackChunkName: "SoloPanelPageOld" */ '../features/dashboard/containers/SoloPanelPage') ), }, { diff --git a/public/dashboards/scripted.js b/public/dashboards/scripted.js index daa4c4efb70..03de55bff44 100644 --- a/public/dashboards/scripted.js +++ b/public/dashboards/scripted.js @@ -13,16 +13,11 @@ 'use strict'; -// accessible variables in this scope -let window, document, $, jQuery, moment, kbn; +// accessible variables in this scope: window, document, $, jQuery, moment, kbn; // Setup some variables let dashboard; -// All url parameters are available via the ARGS object -// eslint-disable-next-line no-redeclare -let ARGS; - // Initialize a skeleton with nothing but a rows array and service object dashboard = { rows: [], @@ -56,6 +51,7 @@ for (let i = 0; i < rows; i++) { height: '300px', panels: [ { + id: 1, title: 'Events', type: 'graph', span: 12, @@ -63,23 +59,17 @@ for (let i = 0; i < rows; i++) { linewidth: 2, targets: [ { - target: "randomWalk('" + seriesName + "')", + scenarioId: 'random_walk', + refId: 'A', + seriesCount: 1, + alias: seriesName, }, { - target: "randomWalk('random walk2')", + scenarioId: 'random_walk', + refId: 'B', + seriesCount: 1, }, ], - seriesOverrides: [ - { - alias: '/random/', - yaxis: 2, - fill: 0, - linewidth: 5, - }, - ], - tooltip: { - shared: true, - }, }, ], }); diff --git a/public/dashboards/scripted_async.js b/public/dashboards/scripted_async.js index 98fb144d243..d13a80eb034 100644 --- a/public/dashboards/scripted_async.js +++ b/public/dashboards/scripted_async.js @@ -17,7 +17,7 @@ 'use strict'; // accessible variables in this scope -let window, document, ARGS, $, jQuery, moment, kbn; +// let window, document, ARGS, $, jQuery, moment, kbn; return function (callback) { // Setup some variables @@ -60,6 +60,7 @@ return function (callback) { height: '300px', panels: [ { + id: 1, title: 'Async dashboard test', type: 'text', span: 12, diff --git a/public/dashboards/scripted_templated.js b/public/dashboards/scripted_templated.js index df8647ff86e..0b09fa50986 100644 --- a/public/dashboards/scripted_templated.js +++ b/public/dashboards/scripted_templated.js @@ -14,14 +14,14 @@ 'use strict'; // accessible variables in this scope -let window, document, $, jQuery, moment, kbn; +// let window, document, $, jQuery, moment, kbn; // Setup some variables let dashboard; // All url parameters are available via the ARGS object // eslint-disable-next-line no-redeclare -let ARGS; +// let ARGS; // Initialize a skeleton with nothing but a rows array and service object dashboard = { @@ -44,19 +44,22 @@ dashboard.templating = { list: [ { name: 'test', - query: 'apps.backend.*', - refresh: 1, - type: 'query', - datasource: null, hide: 2, + includeAll: false, + multi: false, + query: 'a,b,c\n', + skipUrlSync: false, + type: 'custom', }, { - name: 'test2', - query: '*', - refresh: 1, - type: 'query', - datasource: null, - hide: 2, + name: 'seriesName', + label: 'Series name', + hide: 0, + includeAll: false, + multi: false, + query: 'series1,series2,series3\n', + skipUrlSync: false, + type: 'custom', }, ], }; @@ -78,6 +81,7 @@ for (let i = 0; i < rows; i++) { height: '300px', panels: [ { + id: 1, title: 'Events', type: 'graph', span: 12, @@ -85,10 +89,16 @@ for (let i = 0; i < rows; i++) { linewidth: 2, targets: [ { - target: "randomWalk('" + seriesName + "')", + scenarioId: 'random_walk', + refId: 'A', + seriesCount: 1, + alias: seriesName, }, { - target: "randomWalk('[[test2]]')", + scenarioId: 'random_walk', + refId: 'B', + seriesCount: 1, + alias: '${seriesName}', }, ], },