IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

Bump scenes to 0.17.2 (#70893)

Browse Source 
* Bump scenes to 0.17.2

* Update jest config

* Update tsconfig

* Update webpack config

* Update to latest API
This commit is contained in:
Dominik Prokop
2023-07-05 16:24:48 +02:00
committed by GitHub
parent 81ba27c149
commit 61459e2b96
14 changed files with 257 additions and 471 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
jest.config.js
View File

@@ -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' }]],

2
package.json
View File

@@ -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",

325
public/app/features/scenes/apps/scenes.tsx
View File

@@ -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(),
}),
],
}),

106
public/app/features/scenes/apps/traffic.tsx
View File

@@ -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(),
});
}

31
public/app/features/scenes/builders/panelBuilders.ts
View File

@@ -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',
});
},
};

24
public/app/features/scenes/scenes/gridMultiTimeRange.tsx
View File

@@ -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(),
}),
],
}),

42
public/app/features/scenes/scenes/gridMultiple.tsx
View File

@@ -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(),
}),
],
}),

46
public/app/features/scenes/scenes/gridWithMultipleData.tsx
View File

@@ -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(),
}),
],
}),

22
public/app/features/scenes/scenes/sceneWithRows.tsx
View File

@@ -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(),
}),
],
}),

64
public/app/features/scenes/scenes/transformations.tsx
View File

@@ -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(),
}),
],
}),

47
public/app/features/scenes/scenes/variablesDemo.tsx
View File

@@ -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%',

3
scripts/webpack/webpack.common.js
View File

@@ -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'],

5
tsconfig.json
View File

@@ -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": [

10
yarn.lock
View File

@@ -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