HelpWizard: Use scenes to render dashboard inline dashboard (#64936)

Co-authored-by: Torkel Ödegaard <torkel@grafana.com>

public/app/features/dashboard/components/HelpWizard/HelpWizard.tsx

@@ -42,7 +42,6 @@ export function HelpWizard({ panel, plugin, onClose }: Props) {
     currentTab,
     loading,
     error,
-    iframeLoading,
     options,
     showMessage,
     snapshotSize,
@@ -50,18 +49,13 @@ export function HelpWizard({ panel, plugin, onClose }: Props) {
     snapshotText,
     randomize,
     panelTitle,
-    snapshotUpdate,
+    scene,
   } = service.useState();
 
   useEffect(() => {
     service.buildDebugDashboard();
   }, [service, plugin, randomize]);
 
-  useEffect(() => {
-    // Listen for messages from loaded iframe
-    return service.subscribeToIframeLoadingMessage();
-  }, [service]);
-
   if (!plugin) {
     return null;
   }
@@ -211,20 +205,7 @@ export function HelpWizard({ panel, plugin, onClose }: Props) {
 
           <AutoSizer disableWidth>
             {({ height }) => (
-              <>
-                <iframe
-                  title="Support snapshot preview"
-                  src={`${config.appUrl}dashboard/new?orgId=${contextSrv.user.orgId}&kiosk&${snapshotUpdate}`}
-                  width="100%"
-                  height={height - 100}
-                  frameBorder="0"
-                  style={{
-                    display: iframeLoading ? 'block' : 'none',
-                    marginTop: 16,
-                  }}
-                />
-                {!iframeLoading && <div>&nbsp;</div>}
-              </>
+              <div style={{ height, overflow: 'auto' }}>{scene && <scene.Component model={scene} />}</div>
             )}
           </AutoSizer>
         </>

public/app/features/dashboard/components/HelpWizard/SupportSnapshotService.ts

@@ -2,10 +2,12 @@ import saveAs from 'file-saver';
 
 import { dateTimeFormat, formattedValueToString, getValueFormat, SelectableValue } from '@grafana/data';
 import { config } from '@grafana/runtime';
+import { SceneObject } from '@grafana/scenes';
 import { StateManagerBase } from 'app/core/services/StateManagerBase';
+import { createDashboardSceneFromDashboardModel } from 'app/features/scenes/dashboard/DashboardsLoader';
 
 import { getTimeSrv } from '../../services/TimeSrv';
-import { PanelModel } from '../../state';
+import { DashboardModel, PanelModel } from '../../state';
 import { setDashboardToFetchFromLocalStorage } from '../../state/initDashboard';
 
 import { Randomize } from './randomizer';
@@ -19,7 +21,6 @@ interface SupportSnapshotState {
   markdownText: string;
   snapshotSize?: string;
   randomize: Randomize;
-  iframeLoading?: boolean;
   loading?: boolean;
   error?: {
     title: string;
@@ -31,6 +32,7 @@ interface SupportSnapshotState {
   // eslint-disable-next-line
   snapshot?: any;
   snapshotUpdate: number;
+  scene?: SceneObject;
 }
 
 export enum SnapshotTab {
@@ -70,17 +72,25 @@ export class SupportSnapshotService extends StateManagerBase<SupportSnapshotStat
   }
 
   async buildDebugDashboard() {
-    const { panel, randomize, snapshotUpdate, iframeLoading, currentTab } = this.state;
+    const { panel, randomize, snapshotUpdate } = this.state;
     const snapshot = await getDebugDashboard(panel, randomize, getTimeSrv().timeRange());
     const snapshotText = JSON.stringify(snapshot, null, 2);
     const markdownText = getGithubMarkdown(panel, snapshotText);
     const snapshotSize = formattedValueToString(getValueFormat('bytes')(snapshotText?.length ?? 0));
 
-    if (iframeLoading && currentTab === SnapshotTab.Support) {
-      setDashboardToFetchFromLocalStorage({ meta: {}, dashboard: snapshot });
+    let scene: SceneObject | undefined = undefined;
+
+    if (config.featureToggles.scenes && !panel.isAngularPlugin()) {
+      try {
+        const oldModel = new DashboardModel(snapshot);
+        const dash = createDashboardSceneFromDashboardModel(oldModel);
+        scene = dash.state.body; // skip the wrappers
+      } catch (ex) {
+        console.log('Error creating scene:', ex);
+      }
     }
 
-    this.setState({ snapshot, snapshotText, markdownText, snapshotSize, snapshotUpdate: snapshotUpdate + 1 });
+    this.setState({ snapshot, snapshotText, markdownText, snapshotSize, snapshotUpdate: snapshotUpdate + 1, scene });
   }
 
   onCurrentTabChange = (value: SnapshotTab) => {
@@ -134,18 +144,4 @@ export class SupportSnapshotService extends StateManagerBase<SupportSnapshotStat
       global.open(config.appUrl + 'dashboard/new', '_blank');
     }
   };
-
-  subscribeToIframeLoadingMessage() {
-    const handleEvent = (evt: MessageEvent<string>) => {
-      if (evt.data === 'GrafanaAppInit') {
-        setDashboardToFetchFromLocalStorage({ meta: {}, dashboard: this.state.snapshot });
-        this.setState({ iframeLoading: true });
-      }
-    };
-    window.addEventListener('message', handleEvent, false);
-
-    return function cleanup() {
-      window.removeEventListener('message', handleEvent);
-    };
-  }
 }

public/app/features/dashboard/components/HelpWizard/utils.ts

@@ -182,7 +182,7 @@ function getTransformsRow(saveModel: any): string {
     return '';
   }
   return `<tr>
-      <th>Transforms (${saveModel.transformations.length})</th>
+      <th>Transform</th>
       <td>${saveModel.transformations.map((t: DataTransformerConfig) => t.id).join(', ')}</td>
   </tr>`;
 }