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

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,

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

@@ -48,6 +48,8 @@ interface DashboardCacheEntry<T> {
 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;

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

@@ -25,12 +25,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" />;
@@ -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(() => {

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

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(
+      component: SafeDynamicImport(() =>
-        () => import(/* webpackChunkName: "SoloPanelPage" */ '../features/dashboard/containers/SoloPanelPage')
+        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
+// accessible variables in this scope: 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;
-
 // 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,
-            target: "randomWalk('random walk2')",
+            alias: seriesName,
           },
-        ],
-        seriesOverrides: [
           {
-            alias: '/random/',
+            scenarioId: 'random_walk',
-            yaxis: 2,
+            refId: 'B',
-            fill: 0,
+            seriesCount: 1,
-            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',
+      name: 'seriesName',
-      query: '*',
+      label: 'Series name',
-      refresh: 1,
+      hide: 0,
-      type: 'query',
+      includeAll: false,
-      datasource: null,
+      multi: false,
-      hide: 2,
+      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}',
           },
         ],
       },