mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
Scenes: Cleanups and simplify (#61579)
* Remove use of Scene / Embedded scene * Use DashboardScene * Update scenes package * Updated scenes * Updated DashboardScene * Updates * Updates
This commit is contained in:
parent
354342ab26
commit
70f2b01525
@ -10,15 +10,16 @@ import { getSceneByTitle } from './scenes';
|
|||||||
export interface Props extends GrafanaRouteComponentProps<{ name: string }> {}
|
export interface Props extends GrafanaRouteComponentProps<{ name: string }> {}
|
||||||
|
|
||||||
export const SceneEmbeddedPage = (props: Props) => {
|
export const SceneEmbeddedPage = (props: Props) => {
|
||||||
const scene = getSceneByTitle(props.match.params.name, false);
|
const scene = getSceneByTitle(props.match.params.name);
|
||||||
|
|
||||||
if (!scene) {
|
if (!scene) {
|
||||||
return <h2>Scene not found</h2>;
|
return <h2>Scene not found</h2>;
|
||||||
}
|
}
|
||||||
|
|
||||||
const pageNav: NavModelItem = {
|
const pageNav: NavModelItem = {
|
||||||
text: scene.state.title,
|
text: 'Embedded Scene',
|
||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Page navId="scenes" pageNav={pageNav}>
|
<Page navId="scenes" pageNav={pageNav}>
|
||||||
<Page.Contents>
|
<Page.Contents>
|
||||||
|
@ -3,7 +3,7 @@ import React from 'react';
|
|||||||
import { useAsync } from 'react-use';
|
import { useAsync } from 'react-use';
|
||||||
|
|
||||||
import { Stack } from '@grafana/experimental';
|
import { Stack } from '@grafana/experimental';
|
||||||
import { Card, LinkButton } from '@grafana/ui';
|
import { Card } from '@grafana/ui';
|
||||||
import { Page } from 'app/core/components/Page/Page';
|
import { Page } from 'app/core/components/Page/Page';
|
||||||
|
|
||||||
// Types
|
// Types
|
||||||
@ -26,16 +26,8 @@ export const SceneListPage = ({}: Props) => {
|
|||||||
<h5>Test scenes</h5>
|
<h5>Test scenes</h5>
|
||||||
<Stack direction="column" gap={0}>
|
<Stack direction="column" gap={0}>
|
||||||
{scenes.map((scene) => (
|
{scenes.map((scene) => (
|
||||||
<Card key={scene.title}>
|
<Card key={scene.title} href={`/scenes/${scene.title}`}>
|
||||||
<Card.Heading>{scene.title}</Card.Heading>
|
<Card.Heading>{scene.title}</Card.Heading>
|
||||||
<Card.Actions>
|
|
||||||
<LinkButton size="sm" href={`/scenes/${scene.title}`}>
|
|
||||||
Open as standalone scene
|
|
||||||
</LinkButton>
|
|
||||||
<LinkButton size="sm" variant="secondary" href={`/scenes/embedded/${scene.title}`}>
|
|
||||||
Open as embedded scene
|
|
||||||
</LinkButton>
|
|
||||||
</Card.Actions>
|
|
||||||
</Card>
|
</Card>
|
||||||
))}
|
))}
|
||||||
</Stack>
|
</Stack>
|
||||||
|
@ -1,5 +1,5 @@
|
|||||||
// Libraries
|
// Libraries
|
||||||
import React from 'react';
|
import React, { useEffect, useState } from 'react';
|
||||||
|
|
||||||
import { GrafanaRouteComponentProps } from 'app/core/navigation/types';
|
import { GrafanaRouteComponentProps } from 'app/core/navigation/types';
|
||||||
|
|
||||||
@ -8,12 +8,24 @@ import { getSceneByTitle } from './scenes';
|
|||||||
export interface Props extends GrafanaRouteComponentProps<{ name: string }> {}
|
export interface Props extends GrafanaRouteComponentProps<{ name: string }> {}
|
||||||
|
|
||||||
export const ScenePage = (props: Props) => {
|
export const ScenePage = (props: Props) => {
|
||||||
const scene = getSceneByTitle(props.match.params.name, true);
|
const scene = getSceneByTitle(props.match.params.name);
|
||||||
|
const [isInitialized, setInitialized] = useState(false);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (scene && !isInitialized) {
|
||||||
|
scene.initUrlSync();
|
||||||
|
setInitialized(true);
|
||||||
|
}
|
||||||
|
}, [isInitialized, scene]);
|
||||||
|
|
||||||
if (!scene) {
|
if (!scene) {
|
||||||
return <h2>Scene not found</h2>;
|
return <h2>Scene not found</h2>;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
if (!isInitialized) {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
return <scene.Component model={scene} />;
|
return <scene.Component model={scene} />;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
@ -1,16 +0,0 @@
|
|||||||
import { SceneFlexLayout } from '@grafana/scenes';
|
|
||||||
|
|
||||||
import { Scene } from './Scene';
|
|
||||||
|
|
||||||
describe('Scene', () => {
|
|
||||||
it('Simple scene', () => {
|
|
||||||
const scene = new Scene({
|
|
||||||
title: 'Hello',
|
|
||||||
body: new SceneFlexLayout({
|
|
||||||
children: [],
|
|
||||||
}),
|
|
||||||
});
|
|
||||||
|
|
||||||
expect(scene.state.title).toBe('Hello');
|
|
||||||
});
|
|
||||||
});
|
|
@ -1,59 +0,0 @@
|
|||||||
import React from 'react';
|
|
||||||
|
|
||||||
import { PageLayoutType } from '@grafana/data';
|
|
||||||
import { config } from '@grafana/runtime';
|
|
||||||
import { SceneObjectBase, SceneComponentProps, SceneState, UrlSyncManager } from '@grafana/scenes';
|
|
||||||
import { PageToolbar, ToolbarButton } from '@grafana/ui';
|
|
||||||
import { AppChromeUpdate } from 'app/core/components/AppChrome/AppChromeUpdate';
|
|
||||||
import { Page } from 'app/core/components/Page/Page';
|
|
||||||
|
|
||||||
export class Scene extends SceneObjectBase<SceneState> {
|
|
||||||
public static Component = SceneRenderer;
|
|
||||||
private urlSyncManager?: UrlSyncManager;
|
|
||||||
|
|
||||||
public activate() {
|
|
||||||
super.activate();
|
|
||||||
this.urlSyncManager = new UrlSyncManager(this);
|
|
||||||
this.urlSyncManager.initSync();
|
|
||||||
}
|
|
||||||
|
|
||||||
public deactivate() {
|
|
||||||
super.deactivate();
|
|
||||||
this.urlSyncManager!.cleanUp();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function SceneRenderer({ model }: SceneComponentProps<Scene>) {
|
|
||||||
const { title, body, actions = [], isEditing, $editor, subMenu } = model.useState();
|
|
||||||
|
|
||||||
const toolbarActions = (actions ?? []).map((action) => <action.Component key={action.state.key} model={action} />);
|
|
||||||
|
|
||||||
if ($editor) {
|
|
||||||
toolbarActions.push(
|
|
||||||
<ToolbarButton
|
|
||||||
key="scene-settings"
|
|
||||||
icon="cog"
|
|
||||||
variant={isEditing ? 'primary' : 'default'}
|
|
||||||
onClick={() => model.setState({ isEditing: !model.state.isEditing })}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
const pageToolbar = config.featureToggles.topnav ? (
|
|
||||||
<AppChromeUpdate actions={toolbarActions} />
|
|
||||||
) : (
|
|
||||||
<PageToolbar title={title}>{toolbarActions}</PageToolbar>
|
|
||||||
);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Page navId="scenes" pageNav={{ text: title }} layout={PageLayoutType.Canvas} toolbar={pageToolbar}>
|
|
||||||
<div style={{ flexGrow: 1, display: 'flex', flexDirection: 'column', gap: '8px' }}>
|
|
||||||
{subMenu && <subMenu.Component model={subMenu} />}
|
|
||||||
<div style={{ flexGrow: 1, display: 'flex', gap: '8px', overflow: 'auto' }}>
|
|
||||||
<body.Component model={body} isEditing={isEditing} />
|
|
||||||
{$editor && <$editor.Component model={$editor} isEditing={isEditing} />}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</Page>
|
|
||||||
);
|
|
||||||
}
|
|
@ -1,25 +1,25 @@
|
|||||||
|
import { css } from '@emotion/css';
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
|
|
||||||
import { PageLayoutType } from '@grafana/data';
|
import { GrafanaTheme2, PageLayoutType } from '@grafana/data';
|
||||||
import { config, locationService } from '@grafana/runtime';
|
import { config, locationService } from '@grafana/runtime';
|
||||||
import {
|
import {
|
||||||
UrlSyncManager,
|
UrlSyncManager,
|
||||||
SceneObjectBase,
|
SceneObjectBase,
|
||||||
SceneComponentProps,
|
SceneComponentProps,
|
||||||
SceneLayout,
|
|
||||||
SceneObject,
|
SceneObject,
|
||||||
SceneObjectStatePlain,
|
SceneObjectStatePlain,
|
||||||
} from '@grafana/scenes';
|
} from '@grafana/scenes';
|
||||||
import { PageToolbar, ToolbarButton } from '@grafana/ui';
|
import { PageToolbar, ToolbarButton, useStyles2 } from '@grafana/ui';
|
||||||
import { AppChromeUpdate } from 'app/core/components/AppChrome/AppChromeUpdate';
|
import { AppChromeUpdate } from 'app/core/components/AppChrome/AppChromeUpdate';
|
||||||
import { Page } from 'app/core/components/Page/Page';
|
import { Page } from 'app/core/components/Page/Page';
|
||||||
|
|
||||||
interface DashboardSceneState extends SceneObjectStatePlain {
|
interface DashboardSceneState extends SceneObjectStatePlain {
|
||||||
title: string;
|
title: string;
|
||||||
uid: string;
|
uid?: string;
|
||||||
body: SceneLayout;
|
body: SceneObject;
|
||||||
actions?: SceneObject[];
|
actions?: SceneObject[];
|
||||||
subMenu?: SceneObject;
|
controls?: SceneObject[];
|
||||||
}
|
}
|
||||||
|
|
||||||
export class DashboardScene extends SceneObjectBase<DashboardSceneState> {
|
export class DashboardScene extends SceneObjectBase<DashboardSceneState> {
|
||||||
@ -48,7 +48,8 @@ export class DashboardScene extends SceneObjectBase<DashboardSceneState> {
|
|||||||
}
|
}
|
||||||
|
|
||||||
function DashboardSceneRenderer({ model }: SceneComponentProps<DashboardScene>) {
|
function DashboardSceneRenderer({ model }: SceneComponentProps<DashboardScene>) {
|
||||||
const { title, body, actions = [], uid, subMenu } = model.useState();
|
const { title, body, actions = [], uid, controls } = model.useState();
|
||||||
|
const styles = useStyles2(getStyles);
|
||||||
|
|
||||||
const toolbarActions = (actions ?? []).map((action) => <action.Component key={action.state.key} model={action} />);
|
const toolbarActions = (actions ?? []).map((action) => <action.Component key={action.state.key} model={action} />);
|
||||||
|
|
||||||
@ -63,10 +64,31 @@ function DashboardSceneRenderer({ model }: SceneComponentProps<DashboardScene>)
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<Page navId="scenes" pageNav={{ text: title }} layout={PageLayoutType.Canvas} toolbar={pageToolbar}>
|
<Page navId="scenes" pageNav={{ text: title }} layout={PageLayoutType.Canvas} toolbar={pageToolbar}>
|
||||||
{subMenu && <subMenu.Component model={subMenu} />}
|
{controls && (
|
||||||
<div style={{ flexGrow: 1, display: 'flex', gap: '8px', overflow: 'auto' }}>
|
<div className={styles.controls}>
|
||||||
|
{controls.map((control) => (
|
||||||
|
<control.Component key={control.state.key} model={control} />
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
<div className={styles.body}>
|
||||||
<body.Component model={body} />
|
<body.Component model={body} />
|
||||||
</div>
|
</div>
|
||||||
</Page>
|
</Page>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function getStyles(theme: GrafanaTheme2) {
|
||||||
|
return {
|
||||||
|
body: css({
|
||||||
|
flexGrow: 1,
|
||||||
|
display: 'flex',
|
||||||
|
gap: '8px',
|
||||||
|
}),
|
||||||
|
controls: css({
|
||||||
|
display: 'flex',
|
||||||
|
gap: theme.spacing(1),
|
||||||
|
alignItems: 'center',
|
||||||
|
}),
|
||||||
|
};
|
||||||
|
}
|
||||||
|
@ -135,7 +135,7 @@ describe('DashboardLoader', () => {
|
|||||||
expect(scene.state.uid).toBe('test-uid');
|
expect(scene.state.uid).toBe('test-uid');
|
||||||
expect(scene.state?.$timeRange?.state.value.raw).toEqual(dash.time);
|
expect(scene.state?.$timeRange?.state.value.raw).toEqual(dash.time);
|
||||||
expect(scene.state?.$variables?.state.variables).toHaveLength(1);
|
expect(scene.state?.$variables?.state.variables).toHaveLength(1);
|
||||||
expect(scene.state.subMenu).toBeDefined();
|
expect(scene.state.controls).toBeDefined();
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
@ -162,9 +162,10 @@ describe('DashboardLoader', () => {
|
|||||||
const oldModel = new DashboardModel(dashboard);
|
const oldModel = new DashboardModel(dashboard);
|
||||||
|
|
||||||
const scene = createDashboardSceneFromDashboardModel(oldModel);
|
const scene = createDashboardSceneFromDashboardModel(oldModel);
|
||||||
|
const body = scene.state.body as SceneGridLayout;
|
||||||
|
|
||||||
expect(scene.state.body.state.children).toHaveLength(1);
|
expect(body.state.children).toHaveLength(1);
|
||||||
const rowScene = scene.state.body.state.children[0] as SceneGridRow;
|
const rowScene = body.state.children[0] as SceneGridRow;
|
||||||
expect(rowScene).toBeInstanceOf(SceneGridRow);
|
expect(rowScene).toBeInstanceOf(SceneGridRow);
|
||||||
expect(rowScene.state.title).toEqual(row.title);
|
expect(rowScene.state.title).toEqual(row.title);
|
||||||
expect(rowScene.state.placement?.y).toEqual(row.gridPos!.y);
|
expect(rowScene.state.placement?.y).toEqual(row.gridPos!.y);
|
||||||
@ -226,16 +227,17 @@ describe('DashboardLoader', () => {
|
|||||||
const oldModel = new DashboardModel(dashboard);
|
const oldModel = new DashboardModel(dashboard);
|
||||||
|
|
||||||
const scene = createDashboardSceneFromDashboardModel(oldModel);
|
const scene = createDashboardSceneFromDashboardModel(oldModel);
|
||||||
|
const body = scene.state.body as SceneGridLayout;
|
||||||
|
|
||||||
expect(scene.state.body.state.children).toHaveLength(3);
|
expect(body.state.children).toHaveLength(3);
|
||||||
expect(scene.state.body).toBeInstanceOf(SceneGridLayout);
|
expect(body).toBeInstanceOf(SceneGridLayout);
|
||||||
// Panel out of row
|
// Panel out of row
|
||||||
expect(scene.state.body.state.children[0]).toBeInstanceOf(VizPanel);
|
expect(body.state.children[0]).toBeInstanceOf(VizPanel);
|
||||||
const panelOutOfRowVizPanel = scene.state.body.state.children[0] as VizPanel;
|
const panelOutOfRowVizPanel = body.state.children[0] as VizPanel;
|
||||||
expect(panelOutOfRowVizPanel.state.title).toBe(panelOutOfRow.title);
|
expect(panelOutOfRowVizPanel.state.title).toBe(panelOutOfRow.title);
|
||||||
// Row with panel
|
// Row with panel
|
||||||
expect(scene.state.body.state.children[1]).toBeInstanceOf(SceneGridRow);
|
expect(body.state.children[1]).toBeInstanceOf(SceneGridRow);
|
||||||
const rowWithPanelsScene = scene.state.body.state.children[1] as SceneGridRow;
|
const rowWithPanelsScene = body.state.children[1] as SceneGridRow;
|
||||||
expect(rowWithPanelsScene.state.title).toBe(rowWithPanel.title);
|
expect(rowWithPanelsScene.state.title).toBe(rowWithPanel.title);
|
||||||
expect(rowWithPanelsScene.state.children).toHaveLength(1);
|
expect(rowWithPanelsScene.state.children).toHaveLength(1);
|
||||||
// Panel within row
|
// Panel within row
|
||||||
@ -243,8 +245,8 @@ describe('DashboardLoader', () => {
|
|||||||
const panelInRowVizPanel = rowWithPanelsScene.state.children[0] as VizPanel;
|
const panelInRowVizPanel = rowWithPanelsScene.state.children[0] as VizPanel;
|
||||||
expect(panelInRowVizPanel.state.title).toBe(panelInRow.title);
|
expect(panelInRowVizPanel.state.title).toBe(panelInRow.title);
|
||||||
// Empty row
|
// Empty row
|
||||||
expect(scene.state.body.state.children[2]).toBeInstanceOf(SceneGridRow);
|
expect(body.state.children[2]).toBeInstanceOf(SceneGridRow);
|
||||||
const emptyRowScene = scene.state.body.state.children[2] as SceneGridRow;
|
const emptyRowScene = body.state.children[2] as SceneGridRow;
|
||||||
expect(emptyRowScene.state.title).toBe(emptyRow.title);
|
expect(emptyRowScene.state.title).toBe(emptyRow.title);
|
||||||
expect(emptyRowScene.state.children).toHaveLength(0);
|
expect(emptyRowScene.state.children).toHaveLength(0);
|
||||||
});
|
});
|
||||||
|
@ -13,7 +13,6 @@ import {
|
|||||||
SceneTimeRange,
|
SceneTimeRange,
|
||||||
SceneObject,
|
SceneObject,
|
||||||
SceneQueryRunner,
|
SceneQueryRunner,
|
||||||
SceneSubMenu,
|
|
||||||
SceneVariableSet,
|
SceneVariableSet,
|
||||||
VariableValueSelectors,
|
VariableValueSelectors,
|
||||||
SceneVariable,
|
SceneVariable,
|
||||||
@ -150,7 +149,6 @@ export function createSceneObjectsForPanels(oldPanels: PanelModel[]): SceneObjec
|
|||||||
}
|
}
|
||||||
|
|
||||||
export function createDashboardSceneFromDashboardModel(oldModel: DashboardModel) {
|
export function createDashboardSceneFromDashboardModel(oldModel: DashboardModel) {
|
||||||
let subMenu: SceneSubMenu | undefined = undefined;
|
|
||||||
let variables: SceneVariableSet | undefined = undefined;
|
let variables: SceneVariableSet | undefined = undefined;
|
||||||
|
|
||||||
if (oldModel.templating.list.length) {
|
if (oldModel.templating.list.length) {
|
||||||
@ -166,9 +164,7 @@ export function createDashboardSceneFromDashboardModel(oldModel: DashboardModel)
|
|||||||
// TODO: Remove filter
|
// TODO: Remove filter
|
||||||
// Added temporarily to allow skipping non-compatible variables
|
// Added temporarily to allow skipping non-compatible variables
|
||||||
.filter((v): v is SceneVariable => Boolean(v));
|
.filter((v): v is SceneVariable => Boolean(v));
|
||||||
subMenu = new SceneSubMenu({
|
|
||||||
children: [new VariableValueSelectors({})],
|
|
||||||
});
|
|
||||||
variables = new SceneVariableSet({
|
variables = new SceneVariableSet({
|
||||||
variables: variableObjects,
|
variables: variableObjects,
|
||||||
});
|
});
|
||||||
@ -183,7 +179,9 @@ export function createDashboardSceneFromDashboardModel(oldModel: DashboardModel)
|
|||||||
$timeRange: new SceneTimeRange(oldModel.time),
|
$timeRange: new SceneTimeRange(oldModel.time),
|
||||||
actions: [new SceneTimePicker({})],
|
actions: [new SceneTimePicker({})],
|
||||||
$variables: variables,
|
$variables: variables,
|
||||||
subMenu,
|
...(variables && {
|
||||||
|
controls: [new VariableValueSelectors({})],
|
||||||
|
}),
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -6,18 +6,17 @@ import {
|
|||||||
VizPanel,
|
VizPanel,
|
||||||
SceneCanvasText,
|
SceneCanvasText,
|
||||||
SceneToolbarInput,
|
SceneToolbarInput,
|
||||||
EmbeddedScene,
|
|
||||||
SceneDataNode,
|
SceneDataNode,
|
||||||
} from '@grafana/scenes';
|
} from '@grafana/scenes';
|
||||||
|
|
||||||
import { panelBuilders } from '../builders/panelBuilders';
|
import { panelBuilders } from '../builders/panelBuilders';
|
||||||
import { Scene } from '../components/Scene';
|
import { DashboardScene } from '../dashboard/DashboardScene';
|
||||||
import { SceneEditManager } from '../editor/SceneEditManager';
|
import { SceneEditManager } from '../editor/SceneEditManager';
|
||||||
|
|
||||||
import { getQueryRunnerWithRandomWalkQuery } from './queries';
|
import { getQueryRunnerWithRandomWalkQuery } from './queries';
|
||||||
|
|
||||||
export function getFlexLayoutTest(standalone: boolean): Scene | EmbeddedScene {
|
export function getFlexLayoutTest(): DashboardScene {
|
||||||
const state = {
|
return new DashboardScene({
|
||||||
title: 'Flex layout test',
|
title: 'Flex layout test',
|
||||||
body: new SceneFlexLayout({
|
body: new SceneFlexLayout({
|
||||||
direction: 'row',
|
direction: 'row',
|
||||||
@ -63,19 +62,17 @@ export function getFlexLayoutTest(standalone: boolean): Scene | EmbeddedScene {
|
|||||||
$timeRange: new SceneTimeRange(),
|
$timeRange: new SceneTimeRange(),
|
||||||
$data: getQueryRunnerWithRandomWalkQuery(),
|
$data: getQueryRunnerWithRandomWalkQuery(),
|
||||||
actions: [new SceneTimePicker({})],
|
actions: [new SceneTimePicker({})],
|
||||||
};
|
});
|
||||||
|
|
||||||
return standalone ? new Scene(state) : new EmbeddedScene(state);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
export function getScenePanelRepeaterTest(standalone: boolean): Scene | EmbeddedScene {
|
export function getScenePanelRepeaterTest(): DashboardScene {
|
||||||
const queryRunner = getQueryRunnerWithRandomWalkQuery({
|
const queryRunner = getQueryRunnerWithRandomWalkQuery({
|
||||||
seriesCount: 2,
|
seriesCount: 2,
|
||||||
alias: '__server_names',
|
alias: '__server_names',
|
||||||
scenarioId: 'random_walk',
|
scenarioId: 'random_walk',
|
||||||
});
|
});
|
||||||
|
|
||||||
const state = {
|
return new DashboardScene({
|
||||||
title: 'Panel repeater test',
|
title: 'Panel repeater test',
|
||||||
body: new SceneByFrameRepeater({
|
body: new SceneByFrameRepeater({
|
||||||
body: new SceneFlexLayout({
|
body: new SceneFlexLayout({
|
||||||
@ -133,7 +130,5 @@ export function getScenePanelRepeaterTest(standalone: boolean): Scene | Embedded
|
|||||||
}),
|
}),
|
||||||
new SceneTimePicker({}),
|
new SceneTimePicker({}),
|
||||||
],
|
],
|
||||||
};
|
});
|
||||||
|
|
||||||
return standalone ? new Scene(state) : new EmbeddedScene(state);
|
|
||||||
}
|
}
|
||||||
|
@ -1,19 +1,12 @@
|
|||||||
import {
|
import { VizPanel, SceneTimePicker, SceneFlexLayout, SceneGridLayout, SceneTimeRange } from '@grafana/scenes';
|
||||||
VizPanel,
|
|
||||||
SceneTimePicker,
|
|
||||||
SceneFlexLayout,
|
|
||||||
SceneGridLayout,
|
|
||||||
SceneTimeRange,
|
|
||||||
EmbeddedScene,
|
|
||||||
} from '@grafana/scenes';
|
|
||||||
|
|
||||||
import { Scene } from '../components/Scene';
|
import { DashboardScene } from '../dashboard/DashboardScene';
|
||||||
import { SceneEditManager } from '../editor/SceneEditManager';
|
import { SceneEditManager } from '../editor/SceneEditManager';
|
||||||
|
|
||||||
import { getQueryRunnerWithRandomWalkQuery } from './queries';
|
import { getQueryRunnerWithRandomWalkQuery } from './queries';
|
||||||
|
|
||||||
export function getGridLayoutTest(standalone: boolean): Scene | EmbeddedScene {
|
export function getGridLayoutTest(): DashboardScene {
|
||||||
const state = {
|
return new DashboardScene({
|
||||||
title: 'Grid layout test',
|
title: 'Grid layout test',
|
||||||
body: new SceneGridLayout({
|
body: new SceneGridLayout({
|
||||||
children: [
|
children: [
|
||||||
@ -58,7 +51,5 @@ export function getGridLayoutTest(standalone: boolean): Scene | EmbeddedScene {
|
|||||||
$timeRange: new SceneTimeRange(),
|
$timeRange: new SceneTimeRange(),
|
||||||
$data: getQueryRunnerWithRandomWalkQuery(),
|
$data: getQueryRunnerWithRandomWalkQuery(),
|
||||||
actions: [new SceneTimePicker({})],
|
actions: [new SceneTimePicker({})],
|
||||||
};
|
});
|
||||||
|
|
||||||
return standalone ? new Scene(state) : new EmbeddedScene(state);
|
|
||||||
}
|
}
|
||||||
|
@ -1,25 +1,18 @@
|
|||||||
import {
|
import { VizPanel, SceneGridRow, SceneTimePicker, SceneGridLayout, SceneTimeRange } from '@grafana/scenes';
|
||||||
VizPanel,
|
|
||||||
SceneGridRow,
|
|
||||||
SceneTimePicker,
|
|
||||||
SceneGridLayout,
|
|
||||||
SceneTimeRange,
|
|
||||||
EmbeddedScene,
|
|
||||||
} from '@grafana/scenes';
|
|
||||||
|
|
||||||
import { Scene } from '../components/Scene';
|
import { DashboardScene } from '../dashboard/DashboardScene';
|
||||||
import { SceneEditManager } from '../editor/SceneEditManager';
|
import { SceneEditManager } from '../editor/SceneEditManager';
|
||||||
|
|
||||||
import { getQueryRunnerWithRandomWalkQuery } from './queries';
|
import { getQueryRunnerWithRandomWalkQuery } from './queries';
|
||||||
|
|
||||||
export function getGridWithMultipleTimeRanges(standalone: boolean): Scene | EmbeddedScene {
|
export function getGridWithMultipleTimeRanges(): DashboardScene {
|
||||||
const globalTimeRange = new SceneTimeRange();
|
const globalTimeRange = new SceneTimeRange();
|
||||||
const row1TimeRange = new SceneTimeRange({
|
const row1TimeRange = new SceneTimeRange({
|
||||||
from: 'now-1y',
|
from: 'now-1y',
|
||||||
to: 'now',
|
to: 'now',
|
||||||
});
|
});
|
||||||
|
|
||||||
const state = {
|
return new DashboardScene({
|
||||||
title: 'Grid with rows and different queries and time ranges',
|
title: 'Grid with rows and different queries and time ranges',
|
||||||
body: new SceneGridLayout({
|
body: new SceneGridLayout({
|
||||||
children: [
|
children: [
|
||||||
@ -66,7 +59,5 @@ export function getGridWithMultipleTimeRanges(standalone: boolean): Scene | Embe
|
|||||||
$timeRange: globalTimeRange,
|
$timeRange: globalTimeRange,
|
||||||
$data: getQueryRunnerWithRandomWalkQuery(),
|
$data: getQueryRunnerWithRandomWalkQuery(),
|
||||||
actions: [new SceneTimePicker({})],
|
actions: [new SceneTimePicker({})],
|
||||||
};
|
});
|
||||||
|
|
||||||
return standalone ? new Scene(state) : new EmbeddedScene(state);
|
|
||||||
}
|
}
|
||||||
|
@ -1,19 +1,12 @@
|
|||||||
import {
|
import { VizPanel, SceneTimePicker, SceneFlexLayout, SceneGridLayout, SceneTimeRange } from '@grafana/scenes';
|
||||||
VizPanel,
|
|
||||||
SceneTimePicker,
|
|
||||||
SceneFlexLayout,
|
|
||||||
SceneGridLayout,
|
|
||||||
SceneTimeRange,
|
|
||||||
EmbeddedScene,
|
|
||||||
} from '@grafana/scenes';
|
|
||||||
|
|
||||||
import { Scene } from '../components/Scene';
|
import { DashboardScene } from '../dashboard/DashboardScene';
|
||||||
import { SceneEditManager } from '../editor/SceneEditManager';
|
import { SceneEditManager } from '../editor/SceneEditManager';
|
||||||
|
|
||||||
import { getQueryRunnerWithRandomWalkQuery } from './queries';
|
import { getQueryRunnerWithRandomWalkQuery } from './queries';
|
||||||
|
|
||||||
export function getMultipleGridLayoutTest(standalone: boolean): Scene | EmbeddedScene {
|
export function getMultipleGridLayoutTest(): DashboardScene {
|
||||||
const state = {
|
return new DashboardScene({
|
||||||
title: 'Multiple grid layouts test',
|
title: 'Multiple grid layouts test',
|
||||||
body: new SceneFlexLayout({
|
body: new SceneFlexLayout({
|
||||||
children: [
|
children: [
|
||||||
@ -98,7 +91,5 @@ export function getMultipleGridLayoutTest(standalone: boolean): Scene | Embedded
|
|||||||
$timeRange: new SceneTimeRange(),
|
$timeRange: new SceneTimeRange(),
|
||||||
$data: getQueryRunnerWithRandomWalkQuery(),
|
$data: getQueryRunnerWithRandomWalkQuery(),
|
||||||
actions: [new SceneTimePicker({})],
|
actions: [new SceneTimePicker({})],
|
||||||
};
|
});
|
||||||
|
|
||||||
return standalone ? new Scene(state) : new EmbeddedScene(state);
|
|
||||||
}
|
}
|
||||||
|
@ -1,19 +1,12 @@
|
|||||||
import {
|
import { VizPanel, SceneGridRow, SceneTimePicker, SceneGridLayout, SceneTimeRange } from '@grafana/scenes';
|
||||||
VizPanel,
|
|
||||||
SceneGridRow,
|
|
||||||
SceneTimePicker,
|
|
||||||
SceneGridLayout,
|
|
||||||
SceneTimeRange,
|
|
||||||
EmbeddedScene,
|
|
||||||
} from '@grafana/scenes';
|
|
||||||
|
|
||||||
import { Scene } from '../components/Scene';
|
import { DashboardScene } from '../dashboard/DashboardScene';
|
||||||
import { SceneEditManager } from '../editor/SceneEditManager';
|
import { SceneEditManager } from '../editor/SceneEditManager';
|
||||||
|
|
||||||
import { getQueryRunnerWithRandomWalkQuery } from './queries';
|
import { getQueryRunnerWithRandomWalkQuery } from './queries';
|
||||||
|
|
||||||
export function getGridWithMultipleData(standalone: boolean): Scene | EmbeddedScene {
|
export function getGridWithMultipleData(): DashboardScene {
|
||||||
const state = {
|
return new DashboardScene({
|
||||||
title: 'Grid with rows and different queries',
|
title: 'Grid with rows and different queries',
|
||||||
body: new SceneGridLayout({
|
body: new SceneGridLayout({
|
||||||
children: [
|
children: [
|
||||||
@ -93,7 +86,5 @@ export function getGridWithMultipleData(standalone: boolean): Scene | EmbeddedSc
|
|||||||
$timeRange: new SceneTimeRange(),
|
$timeRange: new SceneTimeRange(),
|
||||||
$data: getQueryRunnerWithRandomWalkQuery(),
|
$data: getQueryRunnerWithRandomWalkQuery(),
|
||||||
actions: [new SceneTimePicker({})],
|
actions: [new SceneTimePicker({})],
|
||||||
};
|
});
|
||||||
|
|
||||||
return standalone ? new Scene(state) : new EmbeddedScene(state);
|
|
||||||
}
|
}
|
||||||
|
@ -1,19 +1,12 @@
|
|||||||
import {
|
import { VizPanel, SceneGridLayout, SceneGridRow, SceneTimePicker, SceneTimeRange } from '@grafana/scenes';
|
||||||
VizPanel,
|
|
||||||
SceneGridLayout,
|
|
||||||
SceneGridRow,
|
|
||||||
SceneTimePicker,
|
|
||||||
SceneTimeRange,
|
|
||||||
EmbeddedScene,
|
|
||||||
} from '@grafana/scenes';
|
|
||||||
|
|
||||||
import { Scene } from '../components/Scene';
|
import { DashboardScene } from '../dashboard/DashboardScene';
|
||||||
import { SceneEditManager } from '../editor/SceneEditManager';
|
import { SceneEditManager } from '../editor/SceneEditManager';
|
||||||
|
|
||||||
import { getQueryRunnerWithRandomWalkQuery } from './queries';
|
import { getQueryRunnerWithRandomWalkQuery } from './queries';
|
||||||
|
|
||||||
export function getGridWithRowLayoutTest(standalone: boolean): Scene | EmbeddedScene {
|
export function getGridWithRowLayoutTest(): DashboardScene {
|
||||||
const state = {
|
return new DashboardScene({
|
||||||
title: 'Grid with row layout test',
|
title: 'Grid with row layout test',
|
||||||
body: new SceneGridLayout({
|
body: new SceneGridLayout({
|
||||||
children: [
|
children: [
|
||||||
@ -76,7 +69,5 @@ export function getGridWithRowLayoutTest(standalone: boolean): Scene | EmbeddedS
|
|||||||
$timeRange: new SceneTimeRange(),
|
$timeRange: new SceneTimeRange(),
|
||||||
$data: getQueryRunnerWithRandomWalkQuery(),
|
$data: getQueryRunnerWithRandomWalkQuery(),
|
||||||
actions: [new SceneTimePicker({})],
|
actions: [new SceneTimePicker({})],
|
||||||
};
|
});
|
||||||
|
|
||||||
return standalone ? new Scene(state) : new EmbeddedScene(state);
|
|
||||||
}
|
}
|
||||||
|
@ -7,12 +7,11 @@ import {
|
|||||||
SceneTimeRange,
|
SceneTimeRange,
|
||||||
} from '@grafana/scenes';
|
} from '@grafana/scenes';
|
||||||
|
|
||||||
import { Scene } from '../components/Scene';
|
import { DashboardScene } from '../dashboard/DashboardScene';
|
||||||
import { SceneEditManager } from '../editor/SceneEditManager';
|
|
||||||
|
|
||||||
import { getQueryRunnerWithRandomWalkQuery } from './queries';
|
import { getQueryRunnerWithRandomWalkQuery } from './queries';
|
||||||
|
|
||||||
export function getGridWithRowsTest(): Scene {
|
export function getGridWithRowsTest(): DashboardScene {
|
||||||
const panel = new VizPanel({
|
const panel = new VizPanel({
|
||||||
pluginId: 'timeseries',
|
pluginId: 'timeseries',
|
||||||
title: 'Fill height',
|
title: 'Fill height',
|
||||||
@ -77,12 +76,12 @@ export function getGridWithRowsTest(): Scene {
|
|||||||
}),
|
}),
|
||||||
],
|
],
|
||||||
});
|
});
|
||||||
const scene = new Scene({
|
|
||||||
|
const scene = new DashboardScene({
|
||||||
title: 'Grid rows test',
|
title: 'Grid rows test',
|
||||||
body: new SceneGridLayout({
|
body: new SceneGridLayout({
|
||||||
children: [cell1, cell2, row1, row2],
|
children: [cell1, cell2, row1, row2],
|
||||||
}),
|
}),
|
||||||
$editor: new SceneEditManager({}),
|
|
||||||
$timeRange: new SceneTimeRange(),
|
$timeRange: new SceneTimeRange(),
|
||||||
$data: getQueryRunnerWithRandomWalkQuery(),
|
$data: getQueryRunnerWithRandomWalkQuery(),
|
||||||
actions: [new SceneTimePicker({})],
|
actions: [new SceneTimePicker({})],
|
||||||
|
@ -1,6 +1,4 @@
|
|||||||
import { EmbeddedScene, SceneObjectBase, SceneState } from '@grafana/scenes';
|
import { DashboardScene } from '../dashboard/DashboardScene';
|
||||||
|
|
||||||
import { Scene } from '../components/Scene';
|
|
||||||
|
|
||||||
import { getFlexLayoutTest, getScenePanelRepeaterTest } from './demo';
|
import { getFlexLayoutTest, getScenePanelRepeaterTest } from './demo';
|
||||||
import { getGridLayoutTest } from './grid';
|
import { getGridLayoutTest } from './grid';
|
||||||
@ -16,7 +14,7 @@ import { getVariablesDemo, getVariablesDemoWithAll } from './variablesDemo';
|
|||||||
|
|
||||||
interface SceneDef {
|
interface SceneDef {
|
||||||
title: string;
|
title: string;
|
||||||
getScene: (standalone: boolean) => Scene | EmbeddedScene;
|
getScene: () => DashboardScene;
|
||||||
}
|
}
|
||||||
export function getScenes(): SceneDef[] {
|
export function getScenes(): SceneDef[] {
|
||||||
return [
|
return [
|
||||||
@ -36,20 +34,18 @@ export function getScenes(): SceneDef[] {
|
|||||||
];
|
];
|
||||||
}
|
}
|
||||||
|
|
||||||
const cache: Record<string, { standalone: boolean; scene: SceneObjectBase<SceneState> }> = {};
|
const cache: Record<string, DashboardScene> = {};
|
||||||
|
|
||||||
export function getSceneByTitle(title: string, standalone = true) {
|
export function getSceneByTitle(title: string) {
|
||||||
if (cache[title]) {
|
if (cache[title]) {
|
||||||
if (cache[title].standalone === standalone) {
|
return cache[title];
|
||||||
return cache[title].scene;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
const scene = getScenes().find((x) => x.title === title);
|
const scene = getScenes().find((x) => x.title === title);
|
||||||
|
|
||||||
if (scene) {
|
if (scene) {
|
||||||
cache[title] = { scene: scene.getScene(standalone), standalone };
|
cache[title] = scene.getScene();
|
||||||
}
|
}
|
||||||
|
|
||||||
return cache[title].scene;
|
return cache[title];
|
||||||
}
|
}
|
||||||
|
@ -1,18 +1,11 @@
|
|||||||
import {
|
import { VizPanel, NestedScene, SceneTimePicker, SceneFlexLayout, SceneTimeRange } from '@grafana/scenes';
|
||||||
VizPanel,
|
|
||||||
NestedScene,
|
|
||||||
SceneTimePicker,
|
|
||||||
SceneFlexLayout,
|
|
||||||
SceneTimeRange,
|
|
||||||
EmbeddedScene,
|
|
||||||
} from '@grafana/scenes';
|
|
||||||
|
|
||||||
import { Scene } from '../components/Scene';
|
import { DashboardScene } from '../dashboard/DashboardScene';
|
||||||
|
|
||||||
import { getQueryRunnerWithRandomWalkQuery } from './queries';
|
import { getQueryRunnerWithRandomWalkQuery } from './queries';
|
||||||
|
|
||||||
export function getNestedScene(standalone: boolean): Scene | EmbeddedScene {
|
export function getNestedScene(): DashboardScene {
|
||||||
const state = {
|
return new DashboardScene({
|
||||||
title: 'Nested Scene demo',
|
title: 'Nested Scene demo',
|
||||||
body: new SceneFlexLayout({
|
body: new SceneFlexLayout({
|
||||||
direction: 'column',
|
direction: 'column',
|
||||||
@ -28,9 +21,7 @@ export function getNestedScene(standalone: boolean): Scene | EmbeddedScene {
|
|||||||
$timeRange: new SceneTimeRange(),
|
$timeRange: new SceneTimeRange(),
|
||||||
$data: getQueryRunnerWithRandomWalkQuery(),
|
$data: getQueryRunnerWithRandomWalkQuery(),
|
||||||
actions: [new SceneTimePicker({})],
|
actions: [new SceneTimePicker({})],
|
||||||
};
|
});
|
||||||
|
|
||||||
return standalone ? new Scene(state) : new EmbeddedScene(state);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
export function getInnerScene(title: string) {
|
export function getInnerScene(title: string) {
|
||||||
|
@ -1,7 +1,6 @@
|
|||||||
import { VariableRefresh } from '@grafana/data';
|
import { VariableRefresh } from '@grafana/data';
|
||||||
import {
|
import {
|
||||||
SceneCanvasText,
|
SceneCanvasText,
|
||||||
SceneSubMenu,
|
|
||||||
SceneTimePicker,
|
SceneTimePicker,
|
||||||
SceneFlexLayout,
|
SceneFlexLayout,
|
||||||
SceneTimeRange,
|
SceneTimeRange,
|
||||||
@ -10,13 +9,12 @@ import {
|
|||||||
CustomVariable,
|
CustomVariable,
|
||||||
DataSourceVariable,
|
DataSourceVariable,
|
||||||
QueryVariable,
|
QueryVariable,
|
||||||
EmbeddedScene,
|
|
||||||
} from '@grafana/scenes';
|
} from '@grafana/scenes';
|
||||||
|
|
||||||
import { Scene } from '../components/Scene';
|
import { DashboardScene } from '../dashboard/DashboardScene';
|
||||||
|
|
||||||
export function getQueryVariableDemo(standalone: boolean): Scene | EmbeddedScene {
|
export function getQueryVariableDemo(): DashboardScene {
|
||||||
const state = {
|
return new DashboardScene({
|
||||||
title: 'Query variable',
|
title: 'Query variable',
|
||||||
$variables: new SceneVariableSet({
|
$variables: new SceneVariableSet({
|
||||||
variables: [
|
variables: [
|
||||||
@ -65,10 +63,6 @@ export function getQueryVariableDemo(standalone: boolean): Scene | EmbeddedScene
|
|||||||
}),
|
}),
|
||||||
$timeRange: new SceneTimeRange(),
|
$timeRange: new SceneTimeRange(),
|
||||||
actions: [new SceneTimePicker({})],
|
actions: [new SceneTimePicker({})],
|
||||||
subMenu: new SceneSubMenu({
|
controls: [new VariableValueSelectors({})],
|
||||||
children: [new VariableValueSelectors({})],
|
});
|
||||||
}),
|
|
||||||
};
|
|
||||||
|
|
||||||
return standalone ? new Scene(state) : new EmbeddedScene(state);
|
|
||||||
}
|
}
|
||||||
|
@ -1,19 +1,12 @@
|
|||||||
import {
|
import { VizPanel, NestedScene, SceneTimePicker, SceneFlexLayout, SceneTimeRange } from '@grafana/scenes';
|
||||||
VizPanel,
|
|
||||||
NestedScene,
|
|
||||||
SceneTimePicker,
|
|
||||||
SceneFlexLayout,
|
|
||||||
SceneTimeRange,
|
|
||||||
EmbeddedScene,
|
|
||||||
} from '@grafana/scenes';
|
|
||||||
|
|
||||||
import { Scene } from '../components/Scene';
|
import { DashboardScene } from '../dashboard/DashboardScene';
|
||||||
import { SceneEditManager } from '../editor/SceneEditManager';
|
import { SceneEditManager } from '../editor/SceneEditManager';
|
||||||
|
|
||||||
import { getQueryRunnerWithRandomWalkQuery } from './queries';
|
import { getQueryRunnerWithRandomWalkQuery } from './queries';
|
||||||
|
|
||||||
export function getSceneWithRows(standalone: boolean): Scene | EmbeddedScene {
|
export function getSceneWithRows(): DashboardScene {
|
||||||
const state = {
|
return new DashboardScene({
|
||||||
title: 'Scene with rows',
|
title: 'Scene with rows',
|
||||||
body: new SceneFlexLayout({
|
body: new SceneFlexLayout({
|
||||||
direction: 'column',
|
direction: 'column',
|
||||||
@ -60,7 +53,5 @@ export function getSceneWithRows(standalone: boolean): Scene | EmbeddedScene {
|
|||||||
$timeRange: new SceneTimeRange(),
|
$timeRange: new SceneTimeRange(),
|
||||||
$data: getQueryRunnerWithRandomWalkQuery(),
|
$data: getQueryRunnerWithRandomWalkQuery(),
|
||||||
actions: [new SceneTimePicker({})],
|
actions: [new SceneTimePicker({})],
|
||||||
};
|
});
|
||||||
|
|
||||||
return standalone ? new Scene(state) : new EmbeddedScene(state);
|
|
||||||
}
|
}
|
||||||
|
@ -1,19 +1,11 @@
|
|||||||
import {
|
import { SceneTimePicker, SceneFlexLayout, VizPanel, SceneDataTransformer, SceneTimeRange } from '@grafana/scenes';
|
||||||
SceneTimePicker,
|
|
||||||
SceneFlexLayout,
|
|
||||||
VizPanel,
|
|
||||||
SceneDataTransformer,
|
|
||||||
SceneTimeRange,
|
|
||||||
EmbeddedScene,
|
|
||||||
} from '@grafana/scenes';
|
|
||||||
|
|
||||||
import { Scene } from '../components/Scene';
|
import { DashboardScene } from '../dashboard/DashboardScene';
|
||||||
import { SceneEditManager } from '../editor/SceneEditManager';
|
|
||||||
|
|
||||||
import { getQueryRunnerWithRandomWalkQuery } from './queries';
|
import { getQueryRunnerWithRandomWalkQuery } from './queries';
|
||||||
|
|
||||||
export function getTransformationsDemo(standalone: boolean): Scene | EmbeddedScene {
|
export function getTransformationsDemo(): DashboardScene {
|
||||||
const state = {
|
return new DashboardScene({
|
||||||
title: 'Transformations demo',
|
title: 'Transformations demo',
|
||||||
body: new SceneFlexLayout({
|
body: new SceneFlexLayout({
|
||||||
direction: 'row',
|
direction: 'row',
|
||||||
@ -63,11 +55,8 @@ export function getTransformationsDemo(standalone: boolean): Scene | EmbeddedSce
|
|||||||
}),
|
}),
|
||||||
],
|
],
|
||||||
}),
|
}),
|
||||||
$editor: new SceneEditManager({}),
|
|
||||||
$timeRange: new SceneTimeRange(),
|
$timeRange: new SceneTimeRange(),
|
||||||
$data: getQueryRunnerWithRandomWalkQuery(),
|
$data: getQueryRunnerWithRandomWalkQuery(),
|
||||||
actions: [new SceneTimePicker({})],
|
actions: [new SceneTimePicker({})],
|
||||||
};
|
});
|
||||||
|
|
||||||
return standalone ? new Scene(state) : new EmbeddedScene(state);
|
|
||||||
}
|
}
|
||||||
|
@ -1,7 +1,6 @@
|
|||||||
import {
|
import {
|
||||||
VizPanel,
|
VizPanel,
|
||||||
SceneCanvasText,
|
SceneCanvasText,
|
||||||
SceneSubMenu,
|
|
||||||
SceneTimePicker,
|
SceneTimePicker,
|
||||||
SceneFlexLayout,
|
SceneFlexLayout,
|
||||||
SceneTimeRange,
|
SceneTimeRange,
|
||||||
@ -10,15 +9,14 @@ import {
|
|||||||
CustomVariable,
|
CustomVariable,
|
||||||
DataSourceVariable,
|
DataSourceVariable,
|
||||||
TestVariable,
|
TestVariable,
|
||||||
EmbeddedScene,
|
|
||||||
} from '@grafana/scenes';
|
} from '@grafana/scenes';
|
||||||
|
|
||||||
import { Scene } from '../components/Scene';
|
import { DashboardScene } from '../dashboard/DashboardScene';
|
||||||
|
|
||||||
import { getQueryRunnerWithRandomWalkQuery } from './queries';
|
import { getQueryRunnerWithRandomWalkQuery } from './queries';
|
||||||
|
|
||||||
export function getVariablesDemo(standalone: boolean): Scene | EmbeddedScene {
|
export function getVariablesDemo(): DashboardScene {
|
||||||
const state = {
|
return new DashboardScene({
|
||||||
title: 'Variables',
|
title: 'Variables',
|
||||||
$variables: new SceneVariableSet({
|
$variables: new SceneVariableSet({
|
||||||
variables: [
|
variables: [
|
||||||
@ -82,16 +80,12 @@ export function getVariablesDemo(standalone: boolean): Scene | EmbeddedScene {
|
|||||||
}),
|
}),
|
||||||
$timeRange: new SceneTimeRange(),
|
$timeRange: new SceneTimeRange(),
|
||||||
actions: [new SceneTimePicker({})],
|
actions: [new SceneTimePicker({})],
|
||||||
subMenu: new SceneSubMenu({
|
controls: [new VariableValueSelectors({})],
|
||||||
children: [new VariableValueSelectors({})],
|
});
|
||||||
}),
|
|
||||||
};
|
|
||||||
|
|
||||||
return standalone ? new Scene(state) : new EmbeddedScene(state);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
export function getVariablesDemoWithAll(): Scene {
|
export function getVariablesDemoWithAll(): DashboardScene {
|
||||||
const scene = new Scene({
|
return new DashboardScene({
|
||||||
title: 'Variables with All values',
|
title: 'Variables with All values',
|
||||||
$variables: new SceneVariableSet({
|
$variables: new SceneVariableSet({
|
||||||
variables: [
|
variables: [
|
||||||
@ -153,10 +147,6 @@ export function getVariablesDemoWithAll(): Scene {
|
|||||||
}),
|
}),
|
||||||
$timeRange: new SceneTimeRange(),
|
$timeRange: new SceneTimeRange(),
|
||||||
actions: [new SceneTimePicker({})],
|
actions: [new SceneTimePicker({})],
|
||||||
subMenu: new SceneSubMenu({
|
controls: [new VariableValueSelectors({})],
|
||||||
children: [new VariableValueSelectors({})],
|
|
||||||
}),
|
|
||||||
});
|
});
|
||||||
|
|
||||||
return scene;
|
|
||||||
}
|
}
|
||||||
|
@ -5121,8 +5121,8 @@ __metadata:
|
|||||||
linkType: soft
|
linkType: soft
|
||||||
|
|
||||||
"@grafana/scenes@npm:latest":
|
"@grafana/scenes@npm:latest":
|
||||||
version: 0.0.5
|
version: 0.0.8
|
||||||
resolution: "@grafana/scenes@npm:0.0.5"
|
resolution: "@grafana/scenes@npm:0.0.8"
|
||||||
dependencies:
|
dependencies:
|
||||||
"@grafana/e2e-selectors": canary
|
"@grafana/e2e-selectors": canary
|
||||||
"@grafana/experimental": 1.0.1
|
"@grafana/experimental": 1.0.1
|
||||||
@ -5130,7 +5130,7 @@ __metadata:
|
|||||||
react-use: 17.4.0
|
react-use: 17.4.0
|
||||||
react-virtualized-auto-sizer: 1.0.7
|
react-virtualized-auto-sizer: 1.0.7
|
||||||
uuid: ^9.0.0
|
uuid: ^9.0.0
|
||||||
checksum: 7388aaccb0788801f94734126d1abab71df3f81131eec41c967b0c462223a13fcfbc5a65ce7a45bf6761032d8efd1330cb85ac8e86136cba9e4dd244f41b1054
|
checksum: 4c76ca9850906b98fc9131b48ea6a664f84a0f8ac5f7d87543d73f8ca8214c33483fc4454447e46d67096826f7cb32f3db70461323e65aefc241c4169c88fd98
|
||||||
languageName: node
|
languageName: node
|
||||||
linkType: hard
|
linkType: hard
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user