[release-11.4.2] Dashboards: Bring back scripted dashboards (#100629)

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 7edcde6365)

public/app/features/dashboard-scene/pages/DashboardScenePage.tsx

@@ -41,6 +41,8 @@ export function DashboardScenePage({ route, queryParams, history }: Props) {
       stateManager.loadSnapshot(slug!);
     } else {
       stateManager.loadDashboard({
+        type,
+        slug,
         uid: uid ?? '',
         route: route.routeName as DashboardRoutes,
         urlFolderUid: queryParams.folderUid,

public/app/features/dashboard-scene/pages/DashboardScenePageStateManager.ts

@@ -46,6 +46,8 @@ interface DashboardCacheEntry {
 export interface LoadDashboardOptions {
   uid: string;
   route: DashboardRoutes;
+  type?: string;
+  slug?: string;
   urlFolderUid?: string;
   // A temporary approach not to clean the dashboard from local storage when navigating from Explore to Dashboard
   // We currently need it as there are two flows of fetching dashboard. The legacy one (initDashboard), uses the new one(DashboardScenePageStateManager.fetch) where the
@@ -64,6 +66,8 @@ export class DashboardScenePageStateManager extends StateManagerBase<DashboardSc
   // To eventualy replace the fetchDashboard function from Dashboard redux state management.
   // For now it's a simplistic version to support Home and Normal dashboard routes.
   public async fetchDashboard({
+    type,
+    slug,
     uid,
     route,
     urlFolderUid,
@@ -111,7 +115,7 @@ export class DashboardScenePageStateManager extends StateManagerBase<DashboardSc
           return await dashboardLoaderSrv.loadDashboard('public', '', uid);
         }
         default:
-          rsp = await dashboardLoaderSrv.loadDashboard('db', '', uid);
+          rsp = await dashboardLoaderSrv.loadDashboard(type || 'db', slug || '', uid);
 
           if (route === DashboardRoutes.Embedded) {
             rsp.meta.isEmbedded = true;

public/app/features/dashboard-scene/solo/SoloPanelPage.tsx

@@ -24,12 +24,12 @@ export interface Props extends GrafanaRouteComponentProps<DashboardPageRoutePara
 export function SoloPanelPage({ queryParams }: Props) {
   const stateManager = getDashboardScenePageStateManager();
   const { dashboard } = stateManager.useState();
-  const { uid = '' } = useParams();
+  const { uid = '', type, slug } = useParams();
 
   useEffect(() => {
-    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 <EntityNotFound entity="Panel" />;

public/app/features/dashboard/containers/DashboardPageProxy.tsx

@@ -44,6 +44,8 @@ function DashboardPageProxy(props: DashboardPageProxyProps) {
       route: props.route.routeName as DashboardRoutes,
       uid: params.uid ?? '',
       keepDashboardFromExploreInLocalStorage: true,
+      type: params.type,
+      slug: params.slug,
     });
   }, [params.uid, props.route.routeName]);
 

public/app/routes/routes.tsx

@@ -95,8 +95,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')
       ),
     },
     {

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,
-        },
       },
     ],
   });

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,

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}',
           },
         ],
       },