diff --git a/package.json b/package.json index 5d015344cbf..77f313ce52a 100644 --- a/package.json +++ b/package.json @@ -268,7 +268,7 @@ "@grafana/lezer-logql": "0.1.1", "@grafana/monaco-logql": "^0.0.6", "@grafana/runtime": "workspace:*", - "@grafana/scenes": "latest", + "@grafana/scenes": "^0.0.11", "@grafana/schema": "workspace:*", "@grafana/ui": "workspace:*", "@kusto/monaco-kusto": "5.3.6", diff --git a/public/app/features/scenes/scenes/demo.tsx b/public/app/features/scenes/scenes/demo.tsx index d7c50662682..7a641faf2b0 100644 --- a/public/app/features/scenes/scenes/demo.tsx +++ b/public/app/features/scenes/scenes/demo.tsx @@ -1,3 +1,4 @@ +import { getFrameDisplayName } from '@grafana/data'; import { SceneFlexLayout, SceneTimeRange, @@ -94,7 +95,7 @@ export function getScenePanelRepeaterTest(): DashboardScene { children: [ new VizPanel({ pluginId: 'timeseries', - title: 'Title', + title: getFrameDisplayName(frame), options: { legend: { displayMode: 'hidden' }, }, @@ -133,3 +134,57 @@ export function getScenePanelRepeaterTest(): DashboardScene { ], }); } + +export function getRepeaterSceneWithFlexWrap(): DashboardScene { + const queryRunner = getQueryRunnerWithRandomWalkQuery({ + seriesCount: 10, + alias: '__server_names', + scenarioId: TestDataQueryType.RandomWalk, + }); + + return new DashboardScene({ + title: 'Flex layout with wrap test', + body: new SceneByFrameRepeater({ + body: new SceneFlexLayout({ + direction: 'row', + wrap: 'wrap', + children: [], + }), + getLayoutChild: (data, frame, frameIndex) => { + return new VizPanel({ + pluginId: 'timeseries', + title: getFrameDisplayName(frame), + $data: new SceneDataNode({ + data: { + ...data, + series: [frame], + }, + }), + placement: { height: 300, minWidth: 400 }, + options: { + legend: { displayMode: 'hidden' }, + }, + }); + }, + }), + $timeRange: new SceneTimeRange(), + $data: queryRunner, + actions: [ + new SceneToolbarInput({ + value: '10', + onChange: (newValue) => { + queryRunner.setState({ + queries: [ + { + ...queryRunner.state.queries[0], + seriesCount: newValue, + }, + ], + }); + queryRunner.runQueries(); + }, + }), + new SceneTimePicker({}), + ], + }); +} diff --git a/public/app/features/scenes/scenes/index.tsx b/public/app/features/scenes/scenes/index.tsx index f398ff1a2ae..a255f7712e0 100644 --- a/public/app/features/scenes/scenes/index.tsx +++ b/public/app/features/scenes/scenes/index.tsx @@ -1,6 +1,6 @@ import { DashboardScene } from '../dashboard/DashboardScene'; -import { getFlexLayoutTest, getScenePanelRepeaterTest } from './demo'; +import { getFlexLayoutTest, getRepeaterSceneWithFlexWrap, getScenePanelRepeaterTest } from './demo'; import { getGridLayoutTest } from './grid'; import { getGridWithMultipleTimeRanges } from './gridMultiTimeRange'; import { getMultipleGridLayoutTest } from './gridMultiple'; @@ -20,6 +20,7 @@ export function getScenes(): SceneDef[] { return [ { title: 'Flex layout test', getScene: getFlexLayoutTest }, { title: 'Panel repeater test', getScene: getScenePanelRepeaterTest }, + { title: 'Panel repeater test flex wrap', getScene: getRepeaterSceneWithFlexWrap }, { title: 'Nested Scene demo', getScene: getNestedScene }, { title: 'Scene with rows', getScene: getSceneWithRows }, { title: 'Grid layout test', getScene: getGridLayoutTest }, diff --git a/yarn.lock b/yarn.lock index 569d3a8c50a..c7f39a797bd 100644 --- a/yarn.lock +++ b/yarn.lock @@ -5158,9 +5158,9 @@ __metadata: languageName: unknown linkType: soft -"@grafana/scenes@npm:latest": - version: 0.0.8 - resolution: "@grafana/scenes@npm:0.0.8" +"@grafana/scenes@npm:^0.0.11": + version: 0.0.11 + resolution: "@grafana/scenes@npm:0.0.11" dependencies: "@grafana/e2e-selectors": canary "@grafana/experimental": 1.0.1 @@ -5168,7 +5168,7 @@ __metadata: react-use: 17.4.0 react-virtualized-auto-sizer: 1.0.7 uuid: ^9.0.0 - checksum: 4c76ca9850906b98fc9131b48ea6a664f84a0f8ac5f7d87543d73f8ca8214c33483fc4454447e46d67096826f7cb32f3db70461323e65aefc241c4169c88fd98 + checksum: 8cb56817f784c045ff8e91793e79722ed5ec22927a4528539de6f243eaf511f0f924ee1c883f88707eb0ef69cea39de29752da88f98156f25e1860e794ffcd9b languageName: node linkType: hard @@ -22032,7 +22032,7 @@ __metadata: "@grafana/lezer-logql": 0.1.1 "@grafana/monaco-logql": ^0.0.6 "@grafana/runtime": "workspace:*" - "@grafana/scenes": latest + "@grafana/scenes": ^0.0.11 "@grafana/schema": "workspace:*" "@grafana/toolkit": "workspace:*" "@grafana/tsconfig": ^1.2.0-rc1