From a957c283167544b96eb7af1f693c97f2c45182b7 Mon Sep 17 00:00:00 2001 From: Dominik Prokop Date: Thu, 13 Feb 2025 17:48:45 +0100 Subject: [PATCH] [release-11.5.2] Dashboards: Bring back scripted dashboards (#100633) Dashboards: Bring back scripted dashboards (#100575) * Dashboards: Bring back scripted dashboards * Fix scripted dashboard examples * Fix dashboard-solo page not respecnig scripted dashboards (cherry picked from commit 7edcde63650b3070b2b050c738cb1fb509731780) --- .../pages/DashboardScenePage.tsx | 2 + .../pages/DashboardScenePageStateManager.ts | 10 ++++- .../dashboard-scene/solo/SoloPanelPage.tsx | 7 ++-- .../containers/DashboardPageProxy.tsx | 7 +++- 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, 58 insertions(+), 43 deletions(-) diff --git a/public/app/features/dashboard-scene/pages/DashboardScenePage.tsx b/public/app/features/dashboard-scene/pages/DashboardScenePage.tsx index 23d1f70305b..a3a8de2a937 100644 --- a/public/app/features/dashboard-scene/pages/DashboardScenePage.tsx +++ b/public/app/features/dashboard-scene/pages/DashboardScenePage.tsx @@ -36,6 +36,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 d13ddb3504d..07116fbadad 100644 --- a/public/app/features/dashboard-scene/pages/DashboardScenePageStateManager.ts +++ b/public/app/features/dashboard-scene/pages/DashboardScenePageStateManager.ts @@ -48,6 +48,8 @@ interface DashboardCacheEntry { export interface LoadDashboardOptions { uid: string; route: DashboardRoutes; + type?: string; + slug?: string; urlFolderUid?: string; params?: { version: number; @@ -225,6 +227,8 @@ export class DashboardScenePageStateManager extends DashboardScenePageStateManag } public async fetchDashboard({ + type, + slug, uid, route, urlFolderUid, @@ -276,7 +280,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; @@ -424,6 +428,8 @@ export class DashboardScenePageStateManagerV2 extends DashboardScenePageStateMan } public async fetchDashboard({ + type, + slug, uid, route, urlFolderUid, @@ -469,7 +475,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 2e09b8db0f1..3d57eaa3c1b 100644 --- a/public/app/features/dashboard-scene/solo/SoloPanelPage.tsx +++ b/public/app/features/dashboard-scene/solo/SoloPanelPage.tsx @@ -25,12 +25,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 ; @@ -53,7 +53,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 39b13676fa9..f306b9541a9 100644 --- a/public/app/features/dashboard/containers/DashboardPageProxy.tsx +++ b/public/app/features/dashboard/containers/DashboardPageProxy.tsx @@ -46,7 +46,12 @@ function DashboardPageProxy(props: DashboardPageProxyProps) { return null; } - return stateManager.fetchDashboard({ route: props.route.routeName as DashboardRoutes, uid: params.uid ?? '' }); + return stateManager.fetchDashboard({ + route: props.route.routeName as DashboardRoutes, + uid: params.uid ?? '', + type: params.type, + slug: params.slug, + }); }, [params.uid, props.route.routeName]); if (dashboard.loading) { diff --git a/public/app/routes/routes.tsx b/public/app/routes/routes.tsx index 8a59242f820..38200c1bb04 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}', }, ], },