跳到主要内容

设置 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 侧边栏、导航和插件页面集成,请遵循场景应用指南。

源代码

查看示例源代码