apitech
/
grafana
mirror of https://github.com/grafana/grafana
1
0
Fork 0
Code Issues 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
pull/71086/head
Dominik Prokop 2 years ago committed by GitHub
parent 81ba27c149
commit 61459e2b96
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
14 changed files with 257 additions and 471 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 1
      jest.config.js
  2. 2
      package.json
  3. 325
      public/app/features/scenes/apps/scenes.tsx
  4. 106
      public/app/features/scenes/apps/traffic.tsx
  5. 31
      public/app/features/scenes/builders/panelBuilders.ts
  6. 24
      public/app/features/scenes/scenes/gridMultiTimeRange.tsx
  7. 42
      public/app/features/scenes/scenes/gridMultiple.tsx
  8. 46
      public/app/features/scenes/scenes/gridWithMultipleData.tsx
  9. 22
      public/app/features/scenes/scenes/sceneWithRows.tsx
  10. 64
      public/app/features/scenes/scenes/transformations.tsx
  11. 47
      public/app/features/scenes/scenes/variablesDemo.tsx
  12. 3
      scripts/webpack/webpack.common.js
  13. 5
      tsconfig.json
  14. 10
      yarn.lock

1
jest.config.js
Unescape 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
Unescape 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
Unescape 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
Unescape 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: '.*',
},
properties: [{ id: 'filterable', value: false }],
},
{
matcher: {
id: 'byName',
options: 'Time',
},
properties: [{ id: 'custom.hidden', value: true }],
},
{
matcher: {
id: 'byName',
options: 'Value',
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: '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
Unescape 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
Unescape 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
Unescape 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
Unescape 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
Unescape 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
Unescape 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
Unescape 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
Unescape 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
Unescape 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
Unescape 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

Write Preview
Loading…
Cancel
Save