From 7d1ebe6b752878f5d8a0c3f5fafffd5a06c7cd26 Mon Sep 17 00:00:00 2001
From: Ryan McKinley <ryantxu@gmail.com>
Date: Fri, 17 Mar 2023 06:50:37 -0700
Subject: [PATCH] Scenes: improve createVizPanelFromPanelModel helper (#64918)

---
 .../scenes/dashboard/DashboardScene.tsx       | 18 ++++++-----
 .../scenes/dashboard/DashboardsLoader.ts      | 31 +++++++++++++------
 .../plugins/panel/timeseries/migrations.ts    |  4 +--
 3 files changed, 34 insertions(+), 19 deletions(-)

diff --git a/public/app/features/scenes/dashboard/DashboardScene.tsx b/public/app/features/scenes/dashboard/DashboardScene.tsx
index d15ce9f36f9..9635bcffce6 100644
--- a/public/app/features/scenes/dashboard/DashboardScene.tsx
+++ b/public/app/features/scenes/dashboard/DashboardScene.tsx
@@ -53,14 +53,16 @@ function DashboardSceneRenderer({ model }: SceneComponentProps<DashboardScene>)
 
   const toolbarActions = (actions ?? []).map((action) => <action.Component key={action.state.key} model={action} />);
 
-  toolbarActions.push(
-    <ToolbarButton
-      icon="apps"
-      onClick={() => locationService.push(`/d/${uid}`)}
-      tooltip="View as Dashboard"
-      key="scene-to-dashboard-switch"
-    />
-  );
+  if (uid?.length) {
+    toolbarActions.push(
+      <ToolbarButton
+        icon="apps"
+        onClick={() => locationService.push(`/d/${uid}`)}
+        tooltip="View as Dashboard"
+        key="scene-to-dashboard-switch"
+      />
+    );
+  }
   const pageToolbar = config.featureToggles.topnav ? (
     <AppChromeUpdate actions={toolbarActions} />
   ) : (
diff --git a/public/app/features/scenes/dashboard/DashboardsLoader.ts b/public/app/features/scenes/dashboard/DashboardsLoader.ts
index cf61500e430..72b872e8aa9 100644
--- a/public/app/features/scenes/dashboard/DashboardsLoader.ts
+++ b/public/app/features/scenes/dashboard/DashboardsLoader.ts
@@ -25,6 +25,7 @@ import {
 import { StateManagerBase } from 'app/core/services/StateManagerBase';
 import { dashboardLoaderSrv } from 'app/features/dashboard/services/DashboardLoaderSrv';
 import { DashboardModel, PanelModel } from 'app/features/dashboard/state';
+import { graphToTimeseriesOptions } from 'app/plugins/panel/timeseries/migrations';
 import { DashboardDTO } from 'app/types';
 
 import { DashboardScene } from './DashboardScene';
@@ -156,7 +157,7 @@ export function createSceneObjectsForPanels(oldPanels: PanelModel[]): SceneObjec
 export function createDashboardSceneFromDashboardModel(oldModel: DashboardModel) {
   let variables: SceneVariableSet | undefined = undefined;
 
-  if (oldModel.templating.list.length) {
+  if (oldModel.templating?.list?.length) {
     const variableObjects = oldModel.templating.list
       .map((v) => {
         try {
@@ -256,6 +257,19 @@ export function createSceneVariableFromVariableModel(variable: VariableModel): S
 }
 
 export function createVizPanelFromPanelModel(panel: PanelModel) {
+  const queryRunner = new SceneQueryRunner({
+    queries: panel.targets,
+    maxDataPoints: panel.maxDataPoints ?? undefined,
+  });
+
+  // Migrate graph to timeseries
+  if (panel.type === 'graph') {
+    const { fieldConfig, options } = graphToTimeseriesOptions(panel);
+    panel.fieldConfig = fieldConfig;
+    panel.options = options;
+    panel.type = 'timeseries';
+  }
+
   return new VizPanel({
     title: panel.title,
     pluginId: panel.type,
@@ -265,19 +279,18 @@ export function createVizPanelFromPanelModel(panel: PanelModel) {
       width: panel.gridPos.w,
       height: panel.gridPos.h,
     },
-    options: panel.options,
+    options: panel.options ?? {},
     fieldConfig: panel.fieldConfig,
     pluginVersion: panel.pluginVersion,
     displayMode: panel.transparent ? 'transparent' : undefined,
     // To be replaced with it's own option persited option instead derived
     hoverHeader: !panel.title && !panel.timeFrom && !panel.timeShift,
-    $data: new SceneDataTransformer({
-      $data: new SceneQueryRunner({
-        queries: panel.targets,
-        maxDataPoints: panel.maxDataPoints ?? undefined,
-      }),
-      transformations: panel.transformations ?? [],
-    }),
+    $data: panel.transformations?.length
+      ? new SceneDataTransformer({
+          $data: queryRunner,
+          transformations: panel.transformations,
+        })
+      : queryRunner,
   });
 }
 
diff --git a/public/app/plugins/panel/timeseries/migrations.ts b/public/app/plugins/panel/timeseries/migrations.ts
index dff624293a9..b45f6cf1e58 100644
--- a/public/app/plugins/panel/timeseries/migrations.ts
+++ b/public/app/plugins/panel/timeseries/migrations.ts
@@ -46,7 +46,7 @@ export const graphPanelChangedHandler: PanelTypeChangedHandler = (
 ) => {
   // Changing from angular/flot panel to react/uPlot
   if (prevPluginId === 'graph' && prevOptions.angular) {
-    const { fieldConfig, options } = flotToGraphOptions({
+    const { fieldConfig, options } = graphToTimeseriesOptions({
       ...prevOptions.angular,
       fieldConfig: prevFieldConfig,
     });
@@ -61,7 +61,7 @@ export const graphPanelChangedHandler: PanelTypeChangedHandler = (
   return {};
 };
 
-export function flotToGraphOptions(angular: any): { fieldConfig: FieldConfigSource; options: TimeSeriesOptions } {
+export function graphToTimeseriesOptions(angular: any): { fieldConfig: FieldConfigSource; options: TimeSeriesOptions } {
   const overrides: ConfigOverrideRule[] = angular.fieldConfig?.overrides ?? [];
   const yaxes = angular.yaxes ?? [];
   let y1 = getFieldConfigFromOldAxis(yaxes[0]);