From 61459e2b96dd1f20e6834c8ce3b6ef83605801c7 Mon Sep 17 00:00:00 2001 From: Dominik Prokop Date: Wed, 5 Jul 2023 16:24:48 +0200 Subject: [PATCH] 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 | 1 + package.json | 2 +- public/app/features/scenes/apps/scenes.tsx | 325 +++++++----------- public/app/features/scenes/apps/traffic.tsx | 106 ++---- .../features/scenes/builders/panelBuilders.ts | 31 -- .../scenes/scenes/gridMultiTimeRange.tsx | 24 +- .../features/scenes/scenes/gridMultiple.tsx | 42 +-- .../scenes/scenes/gridWithMultipleData.tsx | 46 +-- .../features/scenes/scenes/sceneWithRows.tsx | 22 +- .../scenes/scenes/transformations.tsx | 64 ++-- .../features/scenes/scenes/variablesDemo.tsx | 47 +-- scripts/webpack/webpack.common.js | 3 + tsconfig.json | 5 +- yarn.lock | 10 +- 14 files changed, 257 insertions(+), 471 deletions(-) delete mode 100644 public/app/features/scenes/builders/panelBuilders.ts diff --git a/jest.config.js b/jest.config.js index 6db1df5886c..36cede173fb 100644 --- a/jest.config.js +++ b/jest.config.js @@ -31,6 +31,7 @@ module.exports = { 'monaco-editor/esm/vs/editor/editor.api': '/public/test/mocks/monaco.ts', // near-membrane-dom won't work in a nodejs environment. '@locker/near-membrane-dom': '/public/test/mocks/nearMembraneDom.ts', + '^@grafana/schema/dist/esm/(.*)$': '/packages/grafana-schema/src/$1', }, // Log the test results with dynamic Loki tags. Drone CI only reporters: ['default', ['/public/test/log-reporter.js', { enable: process.env.DRONE === 'true' }]], diff --git a/package.json b/package.json index c16a0f4de05..925ed3a6948 100644 --- 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", diff --git a/public/app/features/scenes/apps/scenes.tsx b/public/app/features/scenes/apps/scenes.tsx index 9e964bc5d61..a3fe0714268 100644 --- 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( Details - ), - 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(), }), ], }), diff --git a/public/app/features/scenes/apps/traffic.tsx b/public/app/features/scenes/apps/traffic.tsx index afbf872147a..7a3016fcb45 100644 --- 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 this.setState({ handler: undefined })} /> - ), - }), + ) + .build(), }); } diff --git a/public/app/features/scenes/builders/panelBuilders.ts b/public/app/features/scenes/builders/panelBuilders.ts deleted file mode 100644 index c8b15fd456c..00000000000 --- a/public/app/features/scenes/builders/panelBuilders.ts +++ /dev/null @@ -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 = Omit< - Partial>, - 'pluginId' ->; - -export const panelBuilders = { - newTable: (state: TypedVizPanelState) => { - return new VizPanel({ - ...state, - pluginId: 'table', - }); - }, - newGraph: (state: TypedVizPanelState) => { - return new VizPanel({ - ...state, - pluginId: 'timeseries', - }); - }, - newBarGauge: (state: TypedVizPanelState) => { - return new VizPanel({ - ...state, - pluginId: 'bargauge', - }); - }, -}; diff --git a/public/app/features/scenes/scenes/gridMultiTimeRange.tsx b/public/app/features/scenes/scenes/gridMultiTimeRange.tsx index 68381d27ac5..af6477ad56a 100644 --- 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(), }), ], }), diff --git a/public/app/features/scenes/scenes/gridMultiple.tsx b/public/app/features/scenes/scenes/gridMultiple.tsx index beabe50e0c7..5c9ab168158 100644 --- 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(), }), ], }), diff --git a/public/app/features/scenes/scenes/gridWithMultipleData.tsx b/public/app/features/scenes/scenes/gridWithMultipleData.tsx index b377b44a38c..8ece96231a4 100644 --- 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(), }), ], }), diff --git a/public/app/features/scenes/scenes/sceneWithRows.tsx b/public/app/features/scenes/scenes/sceneWithRows.tsx index e4ffc455652..a77cb82f7c1 100644 --- 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(), }), ], }), diff --git a/public/app/features/scenes/scenes/transformations.tsx b/public/app/features/scenes/scenes/transformations.tsx index 4309c41971a..e135561a9e1 100644 --- 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(), }), ], }), diff --git a/public/app/features/scenes/scenes/variablesDemo.tsx b/public/app/features/scenes/scenes/variablesDemo.tsx index 02ab81d9a92..4a979db4dec 100644 --- 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%', diff --git a/scripts/webpack/webpack.common.js b/scripts/webpack/webpack.common.js index 82776aeb81c..91f47219042 100644 --- 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'], diff --git a/tsconfig.json b/tsconfig.json index 72b9d2e6402..fa4ee214a1c 100644 --- 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": [ diff --git a/yarn.lock b/yarn.lock index ed7ce98ccff..32df83f7a55 100644 --- 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