Bump scenes to 0.17.2 (#70893)

* Bump scenes to 0.17.2

* Update jest config

* Update tsconfig

* Update webpack config

* Update to latest API

jest.config.js

@@ -31,6 +31,7 @@ module.exports = {
     'monaco-editor/esm/vs/editor/editor.api': '<rootDir>/public/test/mocks/monaco.ts',
     // near-membrane-dom won't work in a nodejs environment.
     '@locker/near-membrane-dom': '<rootDir>/public/test/mocks/nearMembraneDom.ts',
+    '^@grafana/schema/dist/esm/(.*)$': '<rootDir>/packages/grafana-schema/src/$1',
   },
   // Log the test results with dynamic Loki tags. Drone CI only
   reporters: ['default', ['<rootDir>/public/test/log-reporter.js', { enable: process.env.DRONE === 'true' }]],

package.json

@@ -263,7 +263,7 @@
     "@grafana/lezer-logql": "0.1.5",
     "@grafana/monaco-logql": "^0.0.7",
     "@grafana/runtime": "workspace:*",
-    "@grafana/scenes": "^0.15.0",
+    "@grafana/scenes": "0.17.2",
     "@grafana/schema": "workspace:*",
     "@grafana/ui": "workspace:*",
     "@kusto/monaco-kusto": "^7.4.0",

public/app/features/scenes/apps/scenes.tsx

@@ -6,7 +6,6 @@ import {
   SceneFlexLayout,
   SceneByFrameRepeater,
   SceneTimePicker,
-  VizPanel,
   EmbeddedScene,
   SceneDataNode,
   SceneTimeRange,
@@ -16,7 +15,9 @@ import {
   SceneDataTransformer,
   SceneRefreshPicker,
   SceneFlexItem,
+  PanelBuilders,
 } from '@grafana/scenes';
+import { BigValueGraphMode, BigValueTextMode, LogsDedupStrategy, LogsSortOrder } from '@grafana/schema';
 import { LinkButton } from '@grafana/ui';
 
 import { SceneRadioToggle } from './SceneRadioToggle';
@@ -46,65 +47,36 @@ export function getHttpHandlerListScene(): EmbeddedScene {
     return () => sub.unsubscribe();
   });
 
-  const httpHandlersTable = new VizPanel({
+  const httpHandlersTable = PanelBuilders.table()
-    $data: httpHandlerQueriesFiltered,
+    .setTitle('Handlers')
-    pluginId: 'table',
+    .setData(httpHandlerQueriesFiltered)
-    title: 'Handlers',
+    .setOption('footer', {
-    options: {
+      enablePagination: true,
-      footer: {
+    })
-        enablePagination: true,
+    .setOverrides((b) =>
-      },
+      b
-    },
+        .matchFieldsWithNameByRegex('.*')
-    fieldConfig: {
+        .overrideFilterable(false)
-      defaults: {},
+        .matchFieldsWithName('Time')
-      overrides: [
+        .overrideCustomFieldConfig('hidden', true)
-        {
+        .matchFieldsWithName('Value')
-          matcher: {
+        .overrideDisplayName('Duration (Avg)')
-            id: 'byRegexp',
+        .matchFieldsWithName('handler')
-            options: '.*',
+        .overrideLinks([
-          },
+          {
-          properties: [{ id: 'filterable', value: false }],
+            title: 'Go to handler drilldown view',
-        },
+            url: '',
-        {
+            onBuildUrl: () => {
-          matcher: {
+              const params = locationService.getSearchObject();
-            id: 'byName',
+              return getLinkUrlWithAppUrlState(
-            options: 'Time',
+                '/scenes/grafana-monitoring/handlers/${__value.text:percentencode}',
-          },
+                params
-          properties: [{ id: 'custom.hidden', value: true }],
+              );
-        },
-        {
-          matcher: {
-            id: 'byName',
-            options: 'Value',
-          },
-          properties: [{ id: 'displayName', value: 'Duration (Avg)' }],
-        },
-        {
-          matcher: {
-            id: 'byName',
-            options: 'handler',
-          },
-          properties: [
-            {
-              id: 'links',
-              value: [
-                {
-                  title: 'Go to handler drilldown view',
-                  onBuildUrl: () => {
-                    const params = locationService.getSearchObject();
-                    return getLinkUrlWithAppUrlState(
-                      '/scenes/grafana-monitoring/handlers/${__value.text:percentencode}',
-                      params
-                    );
-                  },
-                },
-              ],
             },
-          ],
+          },
-        },
+        ])
-      ],
+    )
-    },
+    .build();
-  });
 
   const reqDurationTimeSeries = new SceneQueryRunner({
     datasource: { uid: 'gdev-prometheus' },
@@ -158,10 +130,10 @@ export function getHttpHandlerListScene(): EmbeddedScene {
           children: [
             new SceneFlexItem({
               key: `flex1-${frameIndex}`,
-              body: new VizPanel({
+              body: PanelBuilders.timeseries()
-                key: `viz1-${frameIndex}`,
+                .setTitle(getFrameDisplayName(frame))
-                pluginId: 'timeseries',
+                .setOption('legend', { showLegend: false })
-                headerActions: (
+                .setHeaderActions(
                   <LinkButton
                     fill="text"
                     size="sm"
@@ -170,33 +142,19 @@ export function getHttpHandlerListScene(): EmbeddedScene {
                   >
                     Details
                   </LinkButton>
-                ),
+                )
-                title: getFrameDisplayName(frame),
+                .build(),
-                options: {
-                  legend: { showLegend: false },
-                },
-              }),
             }),
 
             new SceneFlexItem({
-              key: `flex1-${frameIndex}`,
+              key: `flex2-${frameIndex}`,
               width: 200,
-              body: new VizPanel({
+              body: PanelBuilders.stat()
-                key: `viz3-${frameIndex}`,
+                .setTitle('Last')
-                title: 'Last',
+                .setOption('graphMode', BigValueGraphMode.None)
-                pluginId: 'stat',
+                .setOption('textMode', BigValueTextMode.Value)
-                fieldConfig: {
+                .setDisplayName('Last')
-                  defaults: {
+                .build(),
-                    displayName: 'Last',
-                    links: [],
-                  },
-                  overrides: [],
-                },
-                options: {
-                  graphMode: 'none',
-                  textMode: 'value',
-                },
-              }),
             }),
           ],
         }),
@@ -270,22 +228,10 @@ export function getHandlerDetailsScene(handler: string): EmbeddedScene {
       direction: 'column',
       children: [
         new SceneFlexItem({
-          body: new VizPanel({
+          body: PanelBuilders.timeseries().setData(reqDurationTimeSeries).setTitle('Request duration avg (ms)').build(),
-            $data: reqDurationTimeSeries,
-            pluginId: 'timeseries',
-            title: 'Request duration avg (ms)',
-            //displayMode: 'transparent',
-            options: {},
-          }),
         }),
         new SceneFlexItem({
-          body: new VizPanel({
+          body: PanelBuilders.timeseries().setData(reqCountTimeSeries).setTitle('Request count/s').build(),
-            $data: reqCountTimeSeries,
-            pluginId: 'timeseries',
-            title: 'Request count/s',
-            //displayMode: 'transparent',
-            options: {},
-          }),
         }),
       ],
     }),
@@ -328,73 +274,51 @@ export function getOverviewScene(): EmbeddedScene {
         }),
 
         new SceneFlexItem({
-          body: new VizPanel({
+          body: PanelBuilders.timeseries()
-            $data: new SceneQueryRunner({
+            .setData(
-              datasource: { uid: 'gdev-prometheus' },
+              new SceneQueryRunner({
-              queries: [
+                datasource: { uid: 'gdev-prometheus' },
-                {
+                queries: [
-                  refId: 'A',
+                  {
-                  expr: `sum(process_resident_memory_bytes{job="grafana", instance=~"$instance"})`,
+                    refId: 'A',
-                  range: true,
+                    expr: `sum(process_resident_memory_bytes{job="grafana", instance=~"$instance"})`,
-                  format: 'time_series',
+                    range: true,
-                  maxDataPoints: 500,
+                    format: 'time_series',
-                },
+                    maxDataPoints: 500,
-              ],
+                  },
-            }),
+                ],
-            pluginId: 'timeseries',
+              })
-            title: 'Memory usage',
+            )
-            options: {
+            .setTitle('Memory usage')
-              legend: {
+            .setOption('legend', { showLegend: false })
-                showLegend: false,
+            .setUnit('bytes')
-              },
+            .setMin(0)
-            },
+            .setCustomFieldConfig('lineWidth', 2)
-            fieldConfig: {
+            .setCustomFieldConfig('fillOpacity', 6)
-              defaults: {
+            .build(),
-                unit: 'bytes',
-                min: 0,
-                custom: {
-                  lineWidth: 2,
-                  fillOpacity: 6,
-                  //gradientMode: 'opacity',
-                },
-              },
-              overrides: [],
-            },
-          }),
         }),
         new SceneFlexItem({
-          body: new VizPanel({
+          body: PanelBuilders.timeseries()
-            $data: new SceneQueryRunner({
+            .setData(
-              datasource: { uid: 'gdev-prometheus' },
+              new SceneQueryRunner({
-              queries: [
+                datasource: { uid: 'gdev-prometheus' },
-                {
+                queries: [
-                  refId: 'A',
+                  {
-                  expr: `sum(go_goroutines{job="grafana", instance=~"$instance"})`,
+                    refId: 'A',
-                  range: true,
+                    expr: `sum(go_goroutines{job="grafana", instance=~"$instance"})`,
-                  format: 'time_series',
+                    range: true,
-                  maxDataPoints: 500,
+                    format: 'time_series',
-                },
+                    maxDataPoints: 500,
-              ],
+                  },
-            }),
+                ],
-            pluginId: 'timeseries',
+              })
-            title: 'Go routines',
+            )
-            options: {
+            .setOption('legend', { showLegend: false })
-              legend: {
+            .setMin(0)
-                showLegend: false,
+            .setCustomFieldConfig('lineWidth', 2)
-              },
+            .setCustomFieldConfig('fillOpacity', 6)
-            },
+            .setTitle('Go routines')
-            fieldConfig: {
+            .build(),
-              defaults: {
-                min: 0,
-                custom: {
-                  lineWidth: 2,
-                  fillOpacity: 6,
-                  //gradientMode: 'opacity',
-                },
-              },
-              overrides: [],
-            },
-          }),
         }),
       ],
     }),
@@ -404,18 +328,11 @@ export function getOverviewScene(): EmbeddedScene {
 }
 
 function getInstantStatPanel(query: string, title: string) {
-  return new VizPanel({
+  return PanelBuilders.stat()
-    $data: getInstantQuery({ expr: query }),
+    .setData(getInstantQuery({ expr: query }))
-    pluginId: 'stat',
+    .setTitle(title)
-    title,
+    .setColor({ fixedColor: 'text', mode: FieldColorModeId.Fixed })
-    options: {},
+    .build();
-    fieldConfig: {
-      defaults: {
-        color: { fixedColor: 'text', mode: FieldColorModeId.Fixed },
-      },
-      overrides: [],
-    },
-  });
 }
 
 export function getHandlerLogsScene(handler: string): EmbeddedScene {
@@ -444,21 +361,18 @@ export function getHandlerLogsScene(handler: string): EmbeddedScene {
       direction: 'column',
       children: [
         new SceneFlexItem({
-          body: new VizPanel({
+          body: PanelBuilders.logs()
-            $data: logsQuery,
+            .setData(logsQuery)
-            pluginId: 'logs',
+            .setTitle('')
-            title: '',
+            .setOption('showTime', true)
-            options: {
+            .setOption('showLabels', false)
-              showTime: true,
+            .setOption('showCommonLabels', false)
-              showLabels: false,
+            .setOption('wrapLogMessage', true)
-              showCommonLabels: false,
+            .setOption('prettifyLogMessage', false)
-              wrapLogMessage: true,
+            .setOption('enableLogDetails', true)
-              prettifyLogMessage: false,
+            .setOption('dedupStrategy', LogsDedupStrategy.none)
-              enableLogDetails: true,
+            .setOption('sortOrder', LogsSortOrder.Descending)
-              dedupStrategy: 'none',
+            .build(),
-              sortOrder: 'Descending',
-            },
-          }),
         }),
       ],
     }),
@@ -493,21 +407,18 @@ export function getOverviewLogsScene(): EmbeddedScene {
       direction: 'column',
       children: [
         new SceneFlexItem({
-          body: new VizPanel({
+          body: PanelBuilders.logs()
-            $data: logsQuery,
+            .setTitle('')
-            pluginId: 'logs',
+            .setData(logsQuery)
-            title: '',
+            .setOption('showTime', true)
-            options: {
+            .setOption('showLabels', false)
-              showTime: true,
+            .setOption('showCommonLabels', false)
-              showLabels: false,
+            .setOption('wrapLogMessage', true)
-              showCommonLabels: false,
+            .setOption('prettifyLogMessage', false)
-              wrapLogMessage: true,
+            .setOption('enableLogDetails', true)
-              prettifyLogMessage: false,
+            .setOption('dedupStrategy', LogsDedupStrategy.none)
-              enableLogDetails: true,
+            .setOption('sortOrder', LogsSortOrder.Descending)
-              dedupStrategy: 'none',
+            .build(),
-              sortOrder: 'Descending',
-            },
-          }),
         }),
       ],
     }),

public/app/features/scenes/apps/traffic.tsx

@@ -3,7 +3,6 @@ import React from 'react';
 import {
   SceneFlexLayout,
   SceneTimePicker,
-  VizPanel,
   EmbeddedScene,
   SceneTimeRange,
   VariableValueSelectors,
@@ -14,74 +13,38 @@ import {
   SceneObjectBase,
   SceneObjectUrlSyncConfig,
   SceneObjectUrlValues,
+  PanelBuilders,
 } from '@grafana/scenes';
 import { Button } from '@grafana/ui';
 
 import { getInstantQuery, getTimeSeriesQuery, getVariablesDefinitions } from './utils';
 
 export function getTrafficScene(): EmbeddedScene {
-  const httpHandlersTable = new VizPanel({
+  const httpHandlersTable = PanelBuilders.table()
-    $data: getInstantQuery({
+    .setData(
-      expr: 'sort_desc(avg without(job, instance) (rate(grafana_http_request_duration_seconds_sum[$__rate_interval]) * 1e3)) ',
+      getInstantQuery({
-    }),
+        expr: 'sort_desc(avg without(job, instance) (rate(grafana_http_request_duration_seconds_sum[$__rate_interval]) * 1e3)) ',
-    pluginId: 'table',
+      })
-    title: 'Handlers',
+    )
-    options: {
+    .setTitle('Handlers')
-      footer: {
+    .setOption('footer', { enablePagination: true })
-        enablePagination: true,
+    .setOverrides((b) =>
-      },
+      b
-    },
+        .matchFieldsWithNameByRegex('.*')
-    fieldConfig: {
+        .overrideFilterable(false)
-      defaults: {},
+        .matchFieldsWithName('Time')
-      overrides: [
+        .overrideCustomFieldConfig('hidden', true)
-        {
+        .matchFieldsWithName('Value')
-          matcher: {
+        .overrideDisplayName('Duration (Avg)')
-            id: 'byRegexp',
+        .matchFieldsWithName('handler')
-            options: '.*',
+        .overrideLinks([
+          {
+            title: 'Go to handler drilldown view',
+            url: '/scenes/grafana-monitoring/traffic?handler=${__value.text:percentencode}',
           },
-          properties: [{ id: 'filterable', value: false }],
+        ])
-        },
+    )
-        {
+    .build();
-          matcher: {
-            id: 'byName',
-            options: 'Time',
-          },
-          properties: [{ id: 'custom.hidden', value: true }],
-        },
-        {
-          matcher: {
-            id: 'byName',
-            options: 'Value',
-          },
-          properties: [{ id: 'displayName', value: 'Duration (Avg)' }],
-        },
-        {
-          matcher: {
-            id: 'byName',
-            options: 'handler',
-          },
-          properties: [
-            {
-              id: 'links',
-              value: [
-                {
-                  title: 'Go to handler drilldown view',
-                  url: '/scenes/grafana-monitoring/traffic?handler=${__value.text:percentencode}',
-                  // onBuildUrl: () => {
-                  //   const params = locationService.getSearchObject();
-                  //   return getLinkUrlWithAppUrlState('/scenes/grafana-monitoring/traffic', {
-                  //     ...params,
-                  //     handler: '${__value.text:percentencode}',
-                  //   });
-                  // },
-                },
-              ],
-            },
-          ],
-        },
-      ],
-    },
-  });
 
   const scene = new EmbeddedScene({
     $variables: getVariablesDefinitions(),
@@ -130,16 +93,17 @@ export class HandlerDrilldownViewBehavior extends SceneObjectBase<HandlerDrilldo
   private getDrilldownView(handler: string): SceneFlexItem {
     return new SceneFlexItem({
       key: 'drilldown-flex',
-      body: new VizPanel({
+      body: PanelBuilders.timeseries()
-        $data: getTimeSeriesQuery({
+        .setData(
-          expr: `rate(grafana_http_request_duration_seconds_sum{handler="${handler}"}[$__rate_interval]) * 1e3`,
+          getTimeSeriesQuery({
-        }),
+            expr: `rate(grafana_http_request_duration_seconds_sum{handler="${handler}"}[$__rate_interval]) * 1e3`,
-        pluginId: 'timeseries',
+          })
-        title: `Handler: ${handler} details`,
+        )
-        headerActions: (
+        .setTitle(`Handler: ${handler} details`)
+        .setHeaderActions(
           <Button size="sm" variant="secondary" icon="times" onClick={() => this.setState({ handler: undefined })} />
-        ),
+        )
-      }),
+        .build(),
     });
   }
 

public/app/features/scenes/builders/panelBuilders.ts

@@ -1,31 +0,0 @@
-import { VizPanel, VizPanelState } from '@grafana/scenes';
-import { GraphFieldConfig, TableFieldOptions } from '@grafana/schema';
-import { Options as BarGaugePanelOptions } from 'app/plugins/panel/bargauge/panelcfg.gen';
-import { Options as TablePanelOptions } from 'app/plugins/panel/table/panelcfg.gen';
-import { Options as TimeSeriesOptions } from 'app/plugins/panel/timeseries/panelcfg.gen';
-
-export type TypedVizPanelState<TOptions, TFieldConfig> = Omit<
-  Partial<VizPanelState<TOptions, TFieldConfig>>,
-  'pluginId'
->;
-
-export const panelBuilders = {
-  newTable: (state: TypedVizPanelState<TablePanelOptions, TableFieldOptions>) => {
-    return new VizPanel<TablePanelOptions, TableFieldOptions>({
-      ...state,
-      pluginId: 'table',
-    });
-  },
-  newGraph: (state: TypedVizPanelState<TimeSeriesOptions, GraphFieldConfig>) => {
-    return new VizPanel({
-      ...state,
-      pluginId: 'timeseries',
-    });
-  },
-  newBarGauge: (state: TypedVizPanelState<BarGaugePanelOptions, {}>) => {
-    return new VizPanel({
-      ...state,
-      pluginId: 'bargauge',
-    });
-  },
-};

public/app/features/scenes/scenes/gridMultiTimeRange.tsx

@@ -1,11 +1,11 @@
 import {
-  VizPanel,
   SceneGridRow,
   SceneTimePicker,
   SceneGridLayout,
   SceneTimeRange,
   SceneRefreshPicker,
   SceneGridItem,
+  PanelBuilders,
 } from '@grafana/scenes';
 import { TestDataQueryType } from 'app/plugins/datasource/testdata/dataquery.gen';
 
@@ -39,11 +39,7 @@ export function getGridWithMultipleTimeRanges(): DashboardScene {
               height: 5,
               isResizable: true,
               isDraggable: true,
-              body: new VizPanel({
+              body: PanelBuilders.timeseries().setTitle('Row A Child1').build(),
-                pluginId: 'timeseries',
-                title: 'Row A Child1',
-                key: 'Row A Child1',
-              }),
             }),
             new SceneGridItem({
               x: 0,
@@ -52,11 +48,7 @@ export function getGridWithMultipleTimeRanges(): DashboardScene {
               height: 5,
               isResizable: true,
               isDraggable: true,
-              body: new VizPanel({
+              body: PanelBuilders.timeseries().setTitle('Row A Child2').build(),
-                pluginId: 'timeseries',
-                title: 'Row A Child2',
-                key: 'Row A Child2',
-              }),
             }),
           ],
         }),
@@ -67,12 +59,10 @@ export function getGridWithMultipleTimeRanges(): DashboardScene {
           height: 10,
           isResizable: true,
           isDraggable: true,
-          body: new VizPanel({
+          body: PanelBuilders.timeseries()
-            $data: getQueryRunnerWithRandomWalkQuery(),
+            .setTitle('Outsider, has its own query')
-            pluginId: 'timeseries',
+            .setData(getQueryRunnerWithRandomWalkQuery())
-            title: 'Outsider, has its own query',
+            .build(),
-            key: 'Outsider-own-query',
-          }),
         }),
       ],
     }),

public/app/features/scenes/scenes/gridMultiple.tsx

@@ -1,5 +1,4 @@
 import {
-  VizPanel,
   SceneTimePicker,
   SceneFlexLayout,
   SceneGridLayout,
@@ -7,6 +6,7 @@ import {
   SceneRefreshPicker,
   SceneGridItem,
   SceneFlexItem,
+  PanelBuilders,
 } from '@grafana/scenes';
 
 import { DashboardScene } from '../dashboard/DashboardScene';
@@ -28,10 +28,7 @@ export function getMultipleGridLayoutTest(): DashboardScene {
                 height: 10,
                 isDraggable: true,
                 isResizable: true,
-                body: new VizPanel({
+                body: PanelBuilders.timeseries().setTitle('Dragabble and resizable').build(),
-                  pluginId: 'timeseries',
-                  title: 'Dragabble and resizable',
-                }),
               }),
               new SceneGridItem({
                 x: 12,
@@ -40,10 +37,7 @@ export function getMultipleGridLayoutTest(): DashboardScene {
                 height: 10,
                 isResizable: false,
                 isDraggable: true,
-                body: new VizPanel({
+                body: PanelBuilders.timeseries().setTitle('Draggable only').build(),
-                  pluginId: 'timeseries',
-                  title: 'Draggable only',
-                }),
               }),
               new SceneGridItem({
                 x: 6,
@@ -57,17 +51,11 @@ export function getMultipleGridLayoutTest(): DashboardScene {
                   children: [
                     new SceneFlexItem({
                       ySizing: 'fill',
-                      body: new VizPanel({
+                      body: PanelBuilders.timeseries().setTitle('Fill height').build(),
-                        pluginId: 'timeseries',
-                        title: 'Fill height',
-                      }),
                     }),
                     new SceneFlexItem({
                       ySizing: 'fill',
-                      body: new VizPanel({
+                      body: PanelBuilders.timeseries().setTitle('Fill height').build(),
-                        pluginId: 'timeseries',
-                        title: 'Fill height',
-                      }),
                     }),
                   ],
                 }),
@@ -85,10 +73,7 @@ export function getMultipleGridLayoutTest(): DashboardScene {
                 height: 10,
                 isDraggable: true,
                 isResizable: true,
-                body: new VizPanel({
+                body: PanelBuilders.timeseries().setTitle('Dragabble and resizable').build(),
-                  pluginId: 'timeseries',
-                  title: 'Dragabble and resizable',
-                }),
               }),
               new SceneGridItem({
                 x: 12,
@@ -97,10 +82,7 @@ export function getMultipleGridLayoutTest(): DashboardScene {
                 height: 10,
                 isResizable: false,
                 isDraggable: true,
-                body: new VizPanel({
+                body: PanelBuilders.timeseries().setTitle('Draggable only').build(),
-                  pluginId: 'timeseries',
-                  title: 'Draggable only',
-                }),
               }),
               new SceneGridItem({
                 x: 6,
@@ -114,17 +96,11 @@ export function getMultipleGridLayoutTest(): DashboardScene {
                   children: [
                     new SceneFlexItem({
                       ySizing: 'fill',
-                      body: new VizPanel({
+                      body: PanelBuilders.timeseries().setTitle('Fill height').build(),
-                        pluginId: 'timeseries',
-                        title: 'Fill height',
-                      }),
                     }),
                     new SceneFlexItem({
                       ySizing: 'fill',
-                      body: new VizPanel({
+                      body: PanelBuilders.timeseries().setTitle('Fill height').build(),
-                        pluginId: 'timeseries',
-                        title: 'Fill height',
-                      }),
                     }),
                   ],
                 }),

public/app/features/scenes/scenes/gridWithMultipleData.tsx

@@ -1,11 +1,11 @@
 import {
-  VizPanel,
   SceneGridRow,
   SceneTimePicker,
   SceneGridLayout,
   SceneTimeRange,
   SceneRefreshPicker,
   SceneGridItem,
+  PanelBuilders,
 } from '@grafana/scenes';
 import { TestDataQueryType } from 'app/plugins/datasource/testdata/dataquery.gen';
 
@@ -33,11 +33,7 @@ export function getGridWithMultipleData(): DashboardScene {
               height: 5,
               isResizable: true,
               isDraggable: true,
-              body: new VizPanel({
+              body: PanelBuilders.timeseries().setTitle('Row A Child1').build(),
-                pluginId: 'timeseries',
-                title: 'Row A Child1',
-                key: 'Row A Child1',
-              }),
             }),
             new SceneGridItem({
               x: 0,
@@ -46,11 +42,7 @@ export function getGridWithMultipleData(): DashboardScene {
               height: 5,
               isResizable: true,
               isDraggable: true,
-              body: new VizPanel({
+              body: PanelBuilders.timeseries().setTitle('Row A Child2').build(),
-                pluginId: 'timeseries',
-                title: 'Row A Child2',
-                key: 'Row A Child2',
-              }),
             }),
           ],
         }),
@@ -67,11 +59,7 @@ export function getGridWithMultipleData(): DashboardScene {
               height: 5,
               isResizable: false,
               isDraggable: true,
-              body: new VizPanel({
+              body: PanelBuilders.timeseries().setTitle('Row B Child1').build(),
-                pluginId: 'timeseries',
-                title: 'Row B Child1',
-                key: 'Row B Child1',
-              }),
             }),
             new SceneGridItem({
               x: 0,
@@ -80,12 +68,10 @@ export function getGridWithMultipleData(): DashboardScene {
               height: 5,
               isResizable: false,
               isDraggable: true,
-              body: new VizPanel({
+              body: PanelBuilders.timeseries()
-                $data: getQueryRunnerWithRandomWalkQuery({ seriesCount: 10 }),
+                .setTitle('Row B Child2 with data')
-                pluginId: 'timeseries',
+                .setData(getQueryRunnerWithRandomWalkQuery({ seriesCount: 10 }))
-                title: 'Row B Child2 with data',
+                .build(),
-                key: 'Row B Child2',
-              }),
             }),
           ],
         }),
@@ -96,12 +82,10 @@ export function getGridWithMultipleData(): DashboardScene {
           height: 10,
           isResizable: true,
           isDraggable: true,
-          body: new VizPanel({
+          body: PanelBuilders.timeseries()
-            $data: getQueryRunnerWithRandomWalkQuery({ seriesCount: 10 }),
+            .setTitle('Outsider, has its own query')
-            pluginId: 'timeseries',
+            .setData(getQueryRunnerWithRandomWalkQuery({ seriesCount: 10 }))
-            title: 'Outsider, has its own query',
+            .build(),
-            key: 'Outsider-own-query',
-          }),
         }),
         new SceneGridItem({
           x: 6,
@@ -110,11 +94,7 @@ export function getGridWithMultipleData(): DashboardScene {
           height: 10,
           isResizable: true,
           isDraggable: true,
-          body: new VizPanel({
+          body: PanelBuilders.timeseries().setTitle('Outsider, uses global query').build(),
-            pluginId: 'timeseries',
-            title: 'Outsider, uses global query',
-            key: 'Outsider-global-query',
-          }),
         }),
       ],
     }),

public/app/features/scenes/scenes/sceneWithRows.tsx

@@ -1,11 +1,11 @@
 import {
-  VizPanel,
   NestedScene,
   SceneTimePicker,
   SceneFlexLayout,
   SceneTimeRange,
   SceneRefreshPicker,
   SceneFlexItem,
+  PanelBuilders,
 } from '@grafana/scenes';
 
 import { DashboardScene } from '../dashboard/DashboardScene';
@@ -25,17 +25,11 @@ export function getSceneWithRows(): DashboardScene {
             direction: 'row',
             children: [
               new SceneFlexItem({
-                body: new VizPanel({
+                body: PanelBuilders.timeseries().setTitle('Fill height').build(),
-                  pluginId: 'timeseries',
-                  title: 'Fill height',
-                }),
               }),
 
               new SceneFlexItem({
-                body: new VizPanel({
+                body: PanelBuilders.timeseries().setTitle('Fill height').build(),
-                  pluginId: 'timeseries',
-                  title: 'Fill height',
-                }),
               }),
             ],
           }),
@@ -47,16 +41,10 @@ export function getSceneWithRows(): DashboardScene {
             direction: 'row',
             children: [
               new SceneFlexItem({
-                body: new VizPanel({
+                body: PanelBuilders.timeseries().setTitle('Fill height').build(),
-                  pluginId: 'timeseries',
-                  title: 'Fill height',
-                }),
               }),
               new SceneFlexItem({
-                body: new VizPanel({
+                body: PanelBuilders.timeseries().setTitle('Fill height').build(),
-                  pluginId: 'timeseries',
-                  title: 'Fill height',
-                }),
               }),
             ],
           }),

public/app/features/scenes/scenes/transformations.tsx

@@ -1,11 +1,11 @@
 import {
   SceneTimePicker,
   SceneFlexLayout,
-  VizPanel,
   SceneDataTransformer,
   SceneTimeRange,
   SceneRefreshPicker,
   SceneFlexItem,
+  PanelBuilders,
 } from '@grafana/scenes';
 
 import { DashboardScene } from '../dashboard/DashboardScene';
@@ -27,47 +27,45 @@ export function getTransformationsDemo(): DashboardScene {
                   direction: 'row',
                   children: [
                     new SceneFlexItem({
-                      body: new VizPanel({
+                      body: PanelBuilders.timeseries().setTitle('Source data (global query)').build(),
-                        pluginId: 'timeseries',
-                        title: 'Source data (global query',
-                      }),
                     }),
                     new SceneFlexItem({
-                      body: new VizPanel({
+                      body: PanelBuilders.stat()
-                        pluginId: 'stat',
+                        .setTitle('Transformed data')
-                        title: 'Transformed data',
+                        .setData(
-                        $data: new SceneDataTransformer({
+                          new SceneDataTransformer({
-                          transformations: [
+                            transformations: [
-                            {
+                              {
-                              id: 'reduce',
+                                id: 'reduce',
-                              options: {
+                                options: {
-                                reducers: ['last', 'mean'],
+                                  reducers: ['last', 'mean'],
+                                },
                               },
-                            },
+                            ],
-                          ],
+                          })
-                        }),
+                        )
-                      }),
+                        .build(),
                     }),
                   ],
                 }),
               }),
               new SceneFlexItem({
-                body: new VizPanel({
+                body: PanelBuilders.stat()
-                  $data: new SceneDataTransformer({
+                  .setTitle('Query with predefined transformations')
-                    $data: getQueryRunnerWithRandomWalkQuery(),
+                  .setData(
-                    transformations: [
+                    new SceneDataTransformer({
-                      {
+                      $data: getQueryRunnerWithRandomWalkQuery(),
-                        id: 'reduce',
+                      transformations: [
-                        options: {
+                        {
-                          reducers: ['mean'],
+                          id: 'reduce',
+                          options: {
+                            reducers: ['mean'],
+                          },
                         },
-                      },
+                      ],
-                    ],
+                    })
-                  }),
+                  )
-
+                  .build(),
-                  pluginId: 'stat',
-                  title: 'Query with predefined transformations',
-                }),
               }),
             ],
           }),

public/app/features/scenes/scenes/variablesDemo.tsx

@@ -1,5 +1,4 @@
 import {
-  VizPanel,
   SceneCanvasText,
   SceneTimePicker,
   SceneFlexLayout,
@@ -13,6 +12,7 @@ import {
   SceneRefreshPicker,
   TextBoxVariable,
   SceneFlexItem,
+  PanelBuilders,
 } from '@grafana/scenes';
 
 import { DashboardScene } from '../dashboard/DashboardScene';
@@ -75,13 +75,14 @@ export function getVariablesDemo(): DashboardScene {
                 body: new SceneFlexLayout({
                   children: [
                     new SceneFlexItem({
-                      body: new VizPanel({
+                      body: PanelBuilders.timeseries()
-                        pluginId: 'timeseries',
+                        .setTitle('handler: $handler')
-                        title: 'handler: $handler',
+                        .setData(
-                        $data: getQueryRunnerWithRandomWalkQuery({
+                          getQueryRunnerWithRandomWalkQuery({
-                          alias: 'handler: $handler',
+                            alias: 'handler: $handler',
-                        }),
+                          })
-                      }),
+                        )
+                        .build(),
                     }),
                     new SceneFlexItem({
                       body: new SceneCanvasText({
@@ -109,13 +110,14 @@ export function getVariablesDemo(): DashboardScene {
                     direction: 'row',
                     children: [
                       new SceneFlexItem({
-                        body: new VizPanel({
+                        body: PanelBuilders.timeseries()
-                          pluginId: 'timeseries',
+                          .setTitle('handler: $handler')
-                          title: 'handler: $handler',
+                          .setData(
-                          $data: getQueryRunnerWithRandomWalkQuery({
+                            getQueryRunnerWithRandomWalkQuery({
-                            alias: 'handler: $handler',
+                              alias: 'handler: $handler',
-                          }),
+                            })
-                        }),
+                          )
+                          .build(),
                       }),
                     ],
                   }),
@@ -175,13 +177,14 @@ export function getVariablesDemoWithAll(): DashboardScene {
       direction: 'row',
       children: [
         new SceneFlexItem({
-          body: new VizPanel({
+          body: PanelBuilders.timeseries()
-            pluginId: 'timeseries',
+            .setTitle('handler: $handler')
-            title: 'handler: $handler',
+            .setData(
-            $data: getQueryRunnerWithRandomWalkQuery({
+              getQueryRunnerWithRandomWalkQuery({
-              alias: 'handler: $handler',
+                alias: 'handler: $handler',
-            }),
+              })
-          }),
+            )
+            .build(),
         }),
         new SceneFlexItem({
           width: '40%',

scripts/webpack/webpack.common.js

@@ -50,6 +50,9 @@ module.exports = {
     source: false,
   },
   plugins: [
+    new webpack.NormalModuleReplacementPlugin(/^@grafana\/schema\/dist\/esm\/(.*)$/, (resource) => {
+      resource.request = resource.request.replace('@grafana/schema/dist/esm', '@grafana/schema/src');
+    }),
     new CorsWorkerPlugin(),
     new webpack.ProvidePlugin({
       Buffer: ['buffer', 'Buffer'],

tsconfig.json

@@ -10,7 +10,10 @@
     "useUnknownInCatchVariables": true,
     "incremental": true,
     "tsBuildInfoFile": "./tsconfig.tsbuildinfo",
-    "preserveSymlinks": true
+    "preserveSymlinks": true,
+    "paths": {
+      "@grafana/schema/dist/esm/*": ["../packages/grafana-schema/src/*"]
+    }
   },
   "extends": "@grafana/tsconfig/base.json",
   "include": [

yarn.lock

@@ -4018,9 +4018,9 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@grafana/scenes@npm:^0.15.0":
+"@grafana/scenes@npm:0.17.2":
-  version: 0.15.0
+  version: 0.17.2
-  resolution: "@grafana/scenes@npm:0.15.0"
+  resolution: "@grafana/scenes@npm:0.17.2"
   dependencies:
     "@grafana/e2e-selectors": canary
     "@grafana/experimental": 1.0.1
@@ -4028,7 +4028,7 @@ __metadata:
     react-use: 17.4.0
     react-virtualized-auto-sizer: 1.0.7
     uuid: ^9.0.0
-  checksum: 2d30a1a1af4cc198c2a42fefa196e8e29ce16e5185ecc6fee30bc5ec890465822c6c17f12a04881d1bb95c6c1c374732264ae013472cf40e44525674c9a5f8a8
+  checksum: 407d928fd0e76df7bb0381e1f75cd1ff176473ff24fa6921e790722bf12da4755c0509429241d4351c79cb8f11a6611e62fe0281bd1d0a32b1fc0fef8f778d26
   languageName: node
   linkType: hard
 
@@ -18829,7 +18829,7 @@ __metadata:
     "@grafana/lezer-logql": 0.1.5
     "@grafana/monaco-logql": ^0.0.7
     "@grafana/runtime": "workspace:*"
-    "@grafana/scenes": ^0.15.0
+    "@grafana/scenes": 0.17.2
     "@grafana/schema": "workspace:*"
     "@grafana/toolkit": "workspace:*"
     "@grafana/tsconfig": ^1.3.0-rc1