设置 Scenes
本主题介绍如何安装 Scenes 并创建您的第一个“Hello World”场景。
安装
使用 @grafana/create-plugin 启动一个全新的项目。
npx @grafana/create-plugin@latest
或者，通过在您的项目中运行以下命令，将 @grafana/scenes 添加到您的 Grafana 应用程序插件
yarn add @grafana/scenes
Hello World 场景
以下说明描述了如何设置“Hello World”场景。
1. 创建场景
使用下面的代码片段创建您的第一个场景。以下代码将创建一个包含 Grafana 文本面板的 flex 布局的场景
// helloWorldScene.ts
import { EmbeddedScene, SceneFlexLayout, SceneFlexItem, VizPanel, PanelBuilders } from '@grafana/scenes';
export function getScene() {
return new EmbeddedScene({
body: new SceneFlexLayout({
children: [
new SceneFlexItem({
width: '50%',
height: 300,
body: PanelBuilders.text().setTitle('Panel title').setOption('content', 'Hello world!').build(),
}),
],
}),
});
}
2. 渲染场景
在您的 Grafana 应用程序插件页面中使用以下代码来渲染“Hello World”场景
import React from 'react';
import { getScene } from './helloWorldScene';
export const HelloWorldPluginPage = () => {
const scene = getScene();
return <scene.Component model={scene} />;
};
注意
渲染的场景不会在 Grafana 插件页面中渲染。要将场景与 Grafana 侧边栏、导航和插件页面集成，请遵循场景应用指南。