Scenes: improve createVizPanelFromPanelModel helper (#64918)

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(
+  if (uid?.length) {
-    <ToolbarButton
+    toolbarActions.push(
-      icon="apps"
+      <ToolbarButton
-      onClick={() => locationService.push(`/d/${uid}`)}
+        icon="apps"
-      tooltip="View as Dashboard"
+        onClick={() => locationService.push(`/d/${uid}`)}
-      key="scene-to-dashboard-switch"
+        tooltip="View as Dashboard"
-    />
+        key="scene-to-dashboard-switch"
-  );
+      />
+    );
+  }
   const pageToolbar = config.featureToggles.topnav ? (
     <AppChromeUpdate actions={toolbarActions} />
   ) : (

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: panel.transformations?.length
-      $data: new SceneQueryRunner({
+      ? new SceneDataTransformer({
-        queries: panel.targets,
+          $data: queryRunner,
-        maxDataPoints: panel.maxDataPoints ?? undefined,
+          transformations: panel.transformations,
-      }),
+        })
-      transformations: panel.transformations ?? [],
+      : queryRunner,
-    }),
   });
 }
 

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