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
2025-02-03 12:11:09 -06:00 · 2023-07-05 16:24:48 +02:00 · 2023-07-05 16:24:48 +02:00 · 61459e2b96
commit 61459e2b96
parent 81ba27c149
14 changed files with 257 additions and 471 deletions
--- a/jest.config.js
+++ b/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' }]],
--- a/package.json
+++ b/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",
--- a/public/app/features/scenes/apps/scenes.tsx
+++ b/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({
-    $data: httpHandlerQueriesFiltered,
-    pluginId: 'table',
-    title: 'Handlers',
-    options: {
-      footer: {
-        enablePagination: true,
-      },
-    },
-    fieldConfig: {
-      defaults: {},
-      overrides: [
-        {
-          matcher: {
-            id: 'byRegexp',
-            options: '.*',
-          },
-          properties: [{ id: 'filterable', value: false }],
-        },
-        {
-          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',
-                  onBuildUrl: () => {
-                    const params = locationService.getSearchObject();
-                    return getLinkUrlWithAppUrlState(
-                      '/scenes/grafana-monitoring/handlers/${__value.text:percentencode}',
-                      params
-                    );
-                  },
-                },
-              ],
+  const httpHandlersTable = PanelBuilders.table()
+    .setTitle('Handlers')
+    .setData(httpHandlerQueriesFiltered)
+    .setOption('footer', {
+      enablePagination: true,
+    })
+    .setOverrides((b) =>
+      b
+        .matchFieldsWithNameByRegex('.*')
+        .overrideFilterable(false)
+        .matchFieldsWithName('Time')
+        .overrideCustomFieldConfig('hidden', true)
+        .matchFieldsWithName('Value')
+        .overrideDisplayName('Duration (Avg)')
+        .matchFieldsWithName('handler')
+        .overrideLinks([
+          {
+            title: 'Go to handler drilldown view',
+            url: '',
+            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({
-                key: `viz1-${frameIndex}`,
-                pluginId: 'timeseries',
-                headerActions: (
+              body: PanelBuilders.timeseries()
+                .setTitle(getFrameDisplayName(frame))
+                .setOption('legend', { showLegend: false })
+                .setHeaderActions(
                  <LinkButton
                    fill="text"
                    size="sm"
@ -170,33 +142,19 @@ export function getHttpHandlerListScene(): EmbeddedScene {
                  >
                    Details
                  </LinkButton>
-                ),
-                title: getFrameDisplayName(frame),
-                options: {
-                  legend: { showLegend: false },
-                },
-              }),
+                )
+                .build(),
            }),

            new SceneFlexItem({
-              key: `flex1-${frameIndex}`,
+              key: `flex2-${frameIndex}`,
              width: 200,
-              body: new VizPanel({
-                key: `viz3-${frameIndex}`,
-                title: 'Last',
-                pluginId: 'stat',
-                fieldConfig: {
-                  defaults: {
-                    displayName: 'Last',
-                    links: [],
-                  },
-                  overrides: [],
-                },
-                options: {
-                  graphMode: 'none',
-                  textMode: 'value',
-                },
-              }),
+              body: PanelBuilders.stat()
+                .setTitle('Last')
+                .setOption('graphMode', BigValueGraphMode.None)
+                .setOption('textMode', BigValueTextMode.Value)
+                .setDisplayName('Last')
+                .build(),
            }),
          ],
        }),
@ -270,22 +228,10 @@ export function getHandlerDetailsScene(handler: string): EmbeddedScene {
      direction: 'column',
      children: [
        new SceneFlexItem({
-          body: new VizPanel({
-            $data: reqDurationTimeSeries,
-            pluginId: 'timeseries',
-            title: 'Request duration avg (ms)',
-            //displayMode: 'transparent',
-            options: {},
-          }),
+          body: PanelBuilders.timeseries().setData(reqDurationTimeSeries).setTitle('Request duration avg (ms)').build(),
        }),
        new SceneFlexItem({
-          body: new VizPanel({
-            $data: reqCountTimeSeries,
-            pluginId: 'timeseries',
-            title: 'Request count/s',
-            //displayMode: 'transparent',
-            options: {},
-          }),
+          body: PanelBuilders.timeseries().setData(reqCountTimeSeries).setTitle('Request count/s').build(),
        }),
      ],
    }),
@ -328,73 +274,51 @@ export function getOverviewScene(): EmbeddedScene {
        }),

        new SceneFlexItem({
-          body: new VizPanel({
-            $data: new SceneQueryRunner({
-              datasource: { uid: 'gdev-prometheus' },
-              queries: [
-                {
-                  refId: 'A',
-                  expr: `sum(process_resident_memory_bytes{job="grafana", instance=~"$instance"})`,
-                  range: true,
-                  format: 'time_series',
-                  maxDataPoints: 500,
-                },
-              ],
-            }),
-            pluginId: 'timeseries',
-            title: 'Memory usage',
-            options: {
-              legend: {
-                showLegend: false,
-              },
-            },
-            fieldConfig: {
-              defaults: {
-                unit: 'bytes',
-                min: 0,
-                custom: {
-                  lineWidth: 2,
-                  fillOpacity: 6,
-                  //gradientMode: 'opacity',
-                },
-              },
-              overrides: [],
-            },
-          }),
+          body: PanelBuilders.timeseries()
+            .setData(
+              new SceneQueryRunner({
+                datasource: { uid: 'gdev-prometheus' },
+                queries: [
+                  {
+                    refId: 'A',
+                    expr: `sum(process_resident_memory_bytes{job="grafana", instance=~"$instance"})`,
+                    range: true,
+                    format: 'time_series',
+                    maxDataPoints: 500,
+                  },
+                ],
+              })
+            )
+            .setTitle('Memory usage')
+            .setOption('legend', { showLegend: false })
+            .setUnit('bytes')
+            .setMin(0)
+            .setCustomFieldConfig('lineWidth', 2)
+            .setCustomFieldConfig('fillOpacity', 6)
+            .build(),
        }),
        new SceneFlexItem({
-          body: new VizPanel({
-            $data: new SceneQueryRunner({
-              datasource: { uid: 'gdev-prometheus' },
-              queries: [
-                {
-                  refId: 'A',
-                  expr: `sum(go_goroutines{job="grafana", instance=~"$instance"})`,
-                  range: true,
-                  format: 'time_series',
-                  maxDataPoints: 500,
-                },
-              ],
-            }),
-            pluginId: 'timeseries',
-            title: 'Go routines',
-            options: {
-              legend: {
-                showLegend: false,
-              },
-            },
-            fieldConfig: {
-              defaults: {
-                min: 0,
-                custom: {
-                  lineWidth: 2,
-                  fillOpacity: 6,
-                  //gradientMode: 'opacity',
-                },
-              },
-              overrides: [],
-            },
-          }),
+          body: PanelBuilders.timeseries()
+            .setData(
+              new SceneQueryRunner({
+                datasource: { uid: 'gdev-prometheus' },
+                queries: [
+                  {
+                    refId: 'A',
+                    expr: `sum(go_goroutines{job="grafana", instance=~"$instance"})`,
+                    range: true,
+                    format: 'time_series',
+                    maxDataPoints: 500,
+                  },
+                ],
+              })
+            )
+            .setOption('legend', { showLegend: false })
+            .setMin(0)
+            .setCustomFieldConfig('lineWidth', 2)
+            .setCustomFieldConfig('fillOpacity', 6)
+            .setTitle('Go routines')
+            .build(),
        }),
      ],
    }),
@ -404,18 +328,11 @@ export function getOverviewScene(): EmbeddedScene {
 }

 function getInstantStatPanel(query: string, title: string) {
-  return new VizPanel({
-    $data: getInstantQuery({ expr: query }),
-    pluginId: 'stat',
-    title,
-    options: {},
-    fieldConfig: {
-      defaults: {
-        color: { fixedColor: 'text', mode: FieldColorModeId.Fixed },
-      },
-      overrides: [],
-    },
-  });
+  return PanelBuilders.stat()
+    .setData(getInstantQuery({ expr: query }))
+    .setTitle(title)
+    .setColor({ fixedColor: 'text', mode: FieldColorModeId.Fixed })
+    .build();
 }

 export function getHandlerLogsScene(handler: string): EmbeddedScene {
@ -444,21 +361,18 @@ export function getHandlerLogsScene(handler: string): EmbeddedScene {
      direction: 'column',
      children: [
        new SceneFlexItem({
-          body: new VizPanel({
-            $data: logsQuery,
-            pluginId: 'logs',
-            title: '',
-            options: {
-              showTime: true,
-              showLabels: false,
-              showCommonLabels: false,
-              wrapLogMessage: true,
-              prettifyLogMessage: false,
-              enableLogDetails: true,
-              dedupStrategy: 'none',
-              sortOrder: 'Descending',
-            },
-          }),
+          body: PanelBuilders.logs()
+            .setData(logsQuery)
+            .setTitle('')
+            .setOption('showTime', true)
+            .setOption('showLabels', false)
+            .setOption('showCommonLabels', false)
+            .setOption('wrapLogMessage', true)
+            .setOption('prettifyLogMessage', false)
+            .setOption('enableLogDetails', true)
+            .setOption('dedupStrategy', LogsDedupStrategy.none)
+            .setOption('sortOrder', LogsSortOrder.Descending)
+            .build(),
        }),
      ],
    }),
@ -493,21 +407,18 @@ export function getOverviewLogsScene(): EmbeddedScene {
      direction: 'column',
      children: [
        new SceneFlexItem({
-          body: new VizPanel({
-            $data: logsQuery,
-            pluginId: 'logs',
-            title: '',
-            options: {
-              showTime: true,
-              showLabels: false,
-              showCommonLabels: false,
-              wrapLogMessage: true,
-              prettifyLogMessage: false,
-              enableLogDetails: true,
-              dedupStrategy: 'none',
-              sortOrder: 'Descending',
-            },
-          }),
+          body: PanelBuilders.logs()
+            .setTitle('')
+            .setData(logsQuery)
+            .setOption('showTime', true)
+            .setOption('showLabels', false)
+            .setOption('showCommonLabels', false)
+            .setOption('wrapLogMessage', true)
+            .setOption('prettifyLogMessage', false)
+            .setOption('enableLogDetails', true)
+            .setOption('dedupStrategy', LogsDedupStrategy.none)
+            .setOption('sortOrder', LogsSortOrder.Descending)
+            .build(),
        }),
      ],
    }),
--- a/public/app/features/scenes/apps/traffic.tsx
+++ b/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({
-    $data: getInstantQuery({
-      expr: 'sort_desc(avg without(job, instance) (rate(grafana_http_request_duration_seconds_sum[$__rate_interval]) * 1e3)) ',
-    }),
-    pluginId: 'table',
-    title: 'Handlers',
-    options: {
-      footer: {
-        enablePagination: true,
-      },
-    },
-    fieldConfig: {
-      defaults: {},
-      overrides: [
-        {
-          matcher: {
-            id: 'byRegexp',
-            options: '.*',
+  const httpHandlersTable = PanelBuilders.table()
+    .setData(
+      getInstantQuery({
+        expr: 'sort_desc(avg without(job, instance) (rate(grafana_http_request_duration_seconds_sum[$__rate_interval]) * 1e3)) ',
+      })
+    )
+    .setTitle('Handlers')
+    .setOption('footer', { enablePagination: true })
+    .setOverrides((b) =>
+      b
+        .matchFieldsWithNameByRegex('.*')
+        .overrideFilterable(false)
+        .matchFieldsWithName('Time')
+        .overrideCustomFieldConfig('hidden', true)
+        .matchFieldsWithName('Value')
+        .overrideDisplayName('Duration (Avg)')
+        .matchFieldsWithName('handler')
+        .overrideLinks([
+          {
+            title: 'Go to handler drilldown view',
+            url: '/scenes/grafana-monitoring/traffic?handler=${__value.text:percentencode}',
          },
-          properties: [{ id: 'filterable', value: false }],
-        },
-        {
-          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}',
-                  //   });
-                  // },
-                },
-              ],
-            },
-          ],
-        },
-      ],
-    },
-  });
+        ])
+    )
+    .build();

  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({
-        $data: getTimeSeriesQuery({
-          expr: `rate(grafana_http_request_duration_seconds_sum{handler="${handler}"}[$__rate_interval]) * 1e3`,
-        }),
-        pluginId: 'timeseries',
-        title: `Handler: ${handler} details`,
-        headerActions: (
+      body: PanelBuilders.timeseries()
+        .setData(
+          getTimeSeriesQuery({
+            expr: `rate(grafana_http_request_duration_seconds_sum{handler="${handler}"}[$__rate_interval]) * 1e3`,
+          })
+        )
+        .setTitle(`Handler: ${handler} details`)
+        .setHeaderActions(
          <Button size="sm" variant="secondary" icon="times" onClick={() => this.setState({ handler: undefined })} />
-        ),
-      }),
+        )
+        .build(),
    });
  }

--- a/public/app/features/scenes/builders/panelBuilders.ts
+++ b/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',
-    });
-  },
-};
--- a/public/app/features/scenes/scenes/gridMultiTimeRange.tsx
+++ b/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({
-                pluginId: 'timeseries',
-                title: 'Row A Child1',
-                key: 'Row A Child1',
-              }),
+              body: PanelBuilders.timeseries().setTitle('Row A Child1').build(),
            }),
            new SceneGridItem({
              x: 0,
@ -52,11 +48,7 @@ export function getGridWithMultipleTimeRanges(): DashboardScene {
              height: 5,
              isResizable: true,
              isDraggable: true,
-              body: new VizPanel({
-                pluginId: 'timeseries',
-                title: 'Row A Child2',
-                key: 'Row A Child2',
-              }),
+              body: PanelBuilders.timeseries().setTitle('Row A Child2').build(),
            }),
          ],
        }),
@ -67,12 +59,10 @@ export function getGridWithMultipleTimeRanges(): DashboardScene {
          height: 10,
          isResizable: true,
          isDraggable: true,
-          body: new VizPanel({
-            $data: getQueryRunnerWithRandomWalkQuery(),
-            pluginId: 'timeseries',
-            title: 'Outsider, has its own query',
-            key: 'Outsider-own-query',
-          }),
+          body: PanelBuilders.timeseries()
+            .setTitle('Outsider, has its own query')
+            .setData(getQueryRunnerWithRandomWalkQuery())
+            .build(),
        }),
      ],
    }),
--- a/public/app/features/scenes/scenes/gridMultiple.tsx
+++ b/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({
-                  pluginId: 'timeseries',
-                  title: 'Dragabble and resizable',
-                }),
+                body: PanelBuilders.timeseries().setTitle('Dragabble and resizable').build(),
              }),
              new SceneGridItem({
                x: 12,
@ -40,10 +37,7 @@ export function getMultipleGridLayoutTest(): DashboardScene {
                height: 10,
                isResizable: false,
                isDraggable: true,
-                body: new VizPanel({
-                  pluginId: 'timeseries',
-                  title: 'Draggable only',
-                }),
+                body: PanelBuilders.timeseries().setTitle('Draggable only').build(),
              }),
              new SceneGridItem({
                x: 6,
@ -57,17 +51,11 @@ export function getMultipleGridLayoutTest(): DashboardScene {
                  children: [
                    new SceneFlexItem({
                      ySizing: 'fill',
-                      body: new VizPanel({
-                        pluginId: 'timeseries',
-                        title: 'Fill height',
-                      }),
+                      body: PanelBuilders.timeseries().setTitle('Fill height').build(),
                    }),
                    new SceneFlexItem({
                      ySizing: 'fill',
-                      body: new VizPanel({
-                        pluginId: 'timeseries',
-                        title: 'Fill height',
-                      }),
+                      body: PanelBuilders.timeseries().setTitle('Fill height').build(),
                    }),
                  ],
                }),
@ -85,10 +73,7 @@ export function getMultipleGridLayoutTest(): DashboardScene {
                height: 10,
                isDraggable: true,
                isResizable: true,
-                body: new VizPanel({
-                  pluginId: 'timeseries',
-                  title: 'Dragabble and resizable',
-                }),
+                body: PanelBuilders.timeseries().setTitle('Dragabble and resizable').build(),
              }),
              new SceneGridItem({
                x: 12,
@ -97,10 +82,7 @@ export function getMultipleGridLayoutTest(): DashboardScene {
                height: 10,
                isResizable: false,
                isDraggable: true,
-                body: new VizPanel({
-                  pluginId: 'timeseries',
-                  title: 'Draggable only',
-                }),
+                body: PanelBuilders.timeseries().setTitle('Draggable only').build(),
              }),
              new SceneGridItem({
                x: 6,
@ -114,17 +96,11 @@ export function getMultipleGridLayoutTest(): DashboardScene {
                  children: [
                    new SceneFlexItem({
                      ySizing: 'fill',
-                      body: new VizPanel({
-                        pluginId: 'timeseries',
-                        title: 'Fill height',
-                      }),
+                      body: PanelBuilders.timeseries().setTitle('Fill height').build(),
                    }),
                    new SceneFlexItem({
                      ySizing: 'fill',
-                      body: new VizPanel({
-                        pluginId: 'timeseries',
-                        title: 'Fill height',
-                      }),
+                      body: PanelBuilders.timeseries().setTitle('Fill height').build(),
                    }),
                  ],
                }),
--- a/public/app/features/scenes/scenes/gridWithMultipleData.tsx
+++ b/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({
-                pluginId: 'timeseries',
-                title: 'Row A Child1',
-                key: 'Row A Child1',
-              }),
+              body: PanelBuilders.timeseries().setTitle('Row A Child1').build(),
            }),
            new SceneGridItem({
              x: 0,
@ -46,11 +42,7 @@ export function getGridWithMultipleData(): DashboardScene {
              height: 5,
              isResizable: true,
              isDraggable: true,
-              body: new VizPanel({
-                pluginId: 'timeseries',
-                title: 'Row A Child2',
-                key: 'Row A Child2',
-              }),
+              body: PanelBuilders.timeseries().setTitle('Row A Child2').build(),
            }),
          ],
        }),
@ -67,11 +59,7 @@ export function getGridWithMultipleData(): DashboardScene {
              height: 5,
              isResizable: false,
              isDraggable: true,
-              body: new VizPanel({
-                pluginId: 'timeseries',
-                title: 'Row B Child1',
-                key: 'Row B Child1',
-              }),
+              body: PanelBuilders.timeseries().setTitle('Row B Child1').build(),
            }),
            new SceneGridItem({
              x: 0,
@ -80,12 +68,10 @@ export function getGridWithMultipleData(): DashboardScene {
              height: 5,
              isResizable: false,
              isDraggable: true,
-              body: new VizPanel({
-                $data: getQueryRunnerWithRandomWalkQuery({ seriesCount: 10 }),
-                pluginId: 'timeseries',
-                title: 'Row B Child2 with data',
-                key: 'Row B Child2',
-              }),
+              body: PanelBuilders.timeseries()
+                .setTitle('Row B Child2 with data')
+                .setData(getQueryRunnerWithRandomWalkQuery({ seriesCount: 10 }))
+                .build(),
            }),
          ],
        }),
@ -96,12 +82,10 @@ export function getGridWithMultipleData(): DashboardScene {
          height: 10,
          isResizable: true,
          isDraggable: true,
-          body: new VizPanel({
-            $data: getQueryRunnerWithRandomWalkQuery({ seriesCount: 10 }),
-            pluginId: 'timeseries',
-            title: 'Outsider, has its own query',
-            key: 'Outsider-own-query',
-          }),
+          body: PanelBuilders.timeseries()
+            .setTitle('Outsider, has its own query')
+            .setData(getQueryRunnerWithRandomWalkQuery({ seriesCount: 10 }))
+            .build(),
        }),
        new SceneGridItem({
          x: 6,
@ -110,11 +94,7 @@ export function getGridWithMultipleData(): DashboardScene {
          height: 10,
          isResizable: true,
          isDraggable: true,
-          body: new VizPanel({
-            pluginId: 'timeseries',
-            title: 'Outsider, uses global query',
-            key: 'Outsider-global-query',
-          }),
+          body: PanelBuilders.timeseries().setTitle('Outsider, uses global query').build(),
        }),
      ],
    }),
--- a/public/app/features/scenes/scenes/sceneWithRows.tsx
+++ b/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({
-                  pluginId: 'timeseries',
-                  title: 'Fill height',
-                }),
+                body: PanelBuilders.timeseries().setTitle('Fill height').build(),
              }),

              new SceneFlexItem({
-                body: new VizPanel({
-                  pluginId: 'timeseries',
-                  title: 'Fill height',
-                }),
+                body: PanelBuilders.timeseries().setTitle('Fill height').build(),
              }),
            ],
          }),
@ -47,16 +41,10 @@ export function getSceneWithRows(): DashboardScene {
            direction: 'row',
            children: [
              new SceneFlexItem({
-                body: new VizPanel({
-                  pluginId: 'timeseries',
-                  title: 'Fill height',
-                }),
+                body: PanelBuilders.timeseries().setTitle('Fill height').build(),
              }),
              new SceneFlexItem({
-                body: new VizPanel({
-                  pluginId: 'timeseries',
-                  title: 'Fill height',
-                }),
+                body: PanelBuilders.timeseries().setTitle('Fill height').build(),
              }),
            ],
          }),
--- a/public/app/features/scenes/scenes/transformations.tsx
+++ b/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({
-                        pluginId: 'timeseries',
-                        title: 'Source data (global query',
-                      }),
+                      body: PanelBuilders.timeseries().setTitle('Source data (global query)').build(),
                    }),
                    new SceneFlexItem({
-                      body: new VizPanel({
-                        pluginId: 'stat',
-                        title: 'Transformed data',
-                        $data: new SceneDataTransformer({
-                          transformations: [
-                            {
-                              id: 'reduce',
-                              options: {
-                                reducers: ['last', 'mean'],
+                      body: PanelBuilders.stat()
+                        .setTitle('Transformed data')
+                        .setData(
+                          new SceneDataTransformer({
+                            transformations: [
+                              {
+                                id: 'reduce',
+                                options: {
+                                  reducers: ['last', 'mean'],
+                                },
                              },
-                            },
-                          ],
-                        }),
-                      }),
+                            ],
+                          })
+                        )
+                        .build(),
                    }),
                  ],
                }),
              }),
              new SceneFlexItem({
-                body: new VizPanel({
-                  $data: new SceneDataTransformer({
-                    $data: getQueryRunnerWithRandomWalkQuery(),
-                    transformations: [
-                      {
-                        id: 'reduce',
-                        options: {
-                          reducers: ['mean'],
+                body: PanelBuilders.stat()
+                  .setTitle('Query with predefined transformations')
+                  .setData(
+                    new SceneDataTransformer({
+                      $data: getQueryRunnerWithRandomWalkQuery(),
+                      transformations: [
+                        {
+                          id: 'reduce',
+                          options: {
+                            reducers: ['mean'],
+                          },
                        },
-                      },
-                    ],
-                  }),
-
-                  pluginId: 'stat',
-                  title: 'Query with predefined transformations',
-                }),
+                      ],
+                    })
+                  )
+                  .build(),
              }),
            ],
          }),
--- a/public/app/features/scenes/scenes/variablesDemo.tsx
+++ b/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({
-                        pluginId: 'timeseries',
-                        title: 'handler: $handler',
-                        $data: getQueryRunnerWithRandomWalkQuery({
-                          alias: 'handler: $handler',
-                        }),
-                      }),
+                      body: PanelBuilders.timeseries()
+                        .setTitle('handler: $handler')
+                        .setData(
+                          getQueryRunnerWithRandomWalkQuery({
+                            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({
-                          pluginId: 'timeseries',
-                          title: 'handler: $handler',
-                          $data: getQueryRunnerWithRandomWalkQuery({
-                            alias: 'handler: $handler',
-                          }),
-                        }),
+                        body: PanelBuilders.timeseries()
+                          .setTitle('handler: $handler')
+                          .setData(
+                            getQueryRunnerWithRandomWalkQuery({
+                              alias: 'handler: $handler',
+                            })
+                          )
+                          .build(),
                      }),
                    ],
                  }),
@ -175,13 +177,14 @@ export function getVariablesDemoWithAll(): DashboardScene {
      direction: 'row',
      children: [
        new SceneFlexItem({
-          body: new VizPanel({
-            pluginId: 'timeseries',
-            title: 'handler: $handler',
-            $data: getQueryRunnerWithRandomWalkQuery({
-              alias: 'handler: $handler',
-            }),
-          }),
+          body: PanelBuilders.timeseries()
+            .setTitle('handler: $handler')
+            .setData(
+              getQueryRunnerWithRandomWalkQuery({
+                alias: 'handler: $handler',
+              })
+            )
+            .build(),
        }),
        new SceneFlexItem({
          width: '40%',
--- a/scripts/webpack/webpack.common.js
+++ b/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'],
--- a/tsconfig.json
+++ b/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": [
--- a/yarn.lock
+++ b/yarn.lock
@ -4018,9 +4018,9 @@ __metadata:
  languageName: unknown
  linkType: soft

-"@grafana/scenes@npm:^0.15.0":
-  version: 0.15.0
-  resolution: "@grafana/scenes@npm:0.15.0"
+"@grafana/scenes@npm:0.17.2":
+  version: 0.17.2
+  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