跳到主要内容

使用 Scenes 构建应用

注意

开始之前:在继续本指南之前,您必须已经了解如何构建 Grafana 插件。在Grafana 官方文档中了解更多信息。

Scenes 附带以下对象,可轻松构建高度交互的 Grafana 应用插件

  • SceneApp
  • SceneAppPage

SceneApp

SceneApp 是根对象,您必须使用它才能充分利用 Scenes 和 Grafana 插件集成。SceneApp 提供对 Scenes 应用路由的支持。

步骤 1. 创建 Scenes 应用

使用 SceneApp 对象定义新的 Scenes 应用

function getSceneApp() {
return new SceneApp({
pages: [],
urlSyncOptions: {
updateUrlOnInit: true,
createBrowserHistorySteps: true,
},
});
}

步骤 2. 在插件中渲染 Scenes 应用

定义一个将渲染 Scenes 应用的组件

function MyApp() {
const scene = useSceneApp(getSceneApp);

return <scene.Component model={scene} />;
}
注意

使用 useSceneApp hook 记忆化和缓存 SceneApp 实例的创建。这对于 URL 同步正常工作非常重要,并且还可以确保当用户离开您的应用并返回时,数据和 scene 应用状态不会丢失。

在应用插件中,渲染 Scenes 应用

export class App extends React.PureComponent<AppRootProps> {
render() {
return (
<PluginPropsContext.Provider value={this.props}>
<MyApp />
</PluginPropsContext.Provider>
);
}
}
注意

前面的示例将渲染一个空白页,因为 SceneApp 构造函数中的 pages 属性为空。使用 SceneAppPage 对象在您的应用中渲染 scene。

SceneAppPage

SceneAppPage 对象允许您在应用插件中轻松渲染 scene。除了渲染 scene 外,它还提供对以下内容的支持

使用 SceneAppPage 构建您的应用页面。它接受以下属性

  /** Page title */
title: string;
/** Page subTitle */
subTitle?: string;
/** For an image before title */
titleImg?: string;
/** For an icon before title */
titleIcon?: IconName;
/** Use to provide absolute page URL, for example, /app/overview **/
url: string;
/** Use to provide parametrized page URL, for example, /app/overview/:clusterId **/
routePath?: string;
/** Array of scene object to be rendered at the top right of the page, inline with the page title */
controls?: SceneObject[];
/** Controls whether or not page should be visible in the breadcrumbs path **/
hideFromBreadcrumbs?: boolean;
/** Array of SceneAppPage objects that are used as page tabs displayed at the top of the page **/
tabs?: SceneAppPageLike[];
/** Function that returns a scene object for the page **/
getScene?: (routeMatch: SceneRouteMatch) => EmbeddedScene;
/** Array of scenes used for drilldown views **/
drilldowns?: SceneAppDrilldownView[];
/** Function that returns a parent page object, used to create breadcrumbs structure **/
getParentPage?: () => SceneAppPageLike;
/** Array of query params that will be preserved in breadcrumb and page tab links, for example, ['from', 'to', 'var-datacenter',...] **/
preserveUrlKeys?: string[];

步骤 1. 创建 scene

首先,创建一个将在 SceneApp 中渲染的 scene

const getScene = () => {
const queryRunner = new SceneQueryRunner({
datasource: {
type: 'prometheus',
uid: '<PROVIDE_GRAFANA_DS_UID>',
},
queries: [
{
refId: 'A',
expr: 'rate(prometheus_http_requests_total{}[5m])',
},
],
});

return new EmbeddedScene({
$data: queryRunner,
$timeRange: new SceneTimeRange(),
body: new SceneFlexLayout({
direction: 'column',
children: [
new SceneFlexItem({
minHeight: 300,
body: PanelBuilders.timeseries().build(),
}),
],
}),
});
};

步骤 2. 创建 SceneAppPage

使用 SceneAppPage 对象配置应用页面

const myAppPage = new SceneAppPage({
title: 'Grafana Scenes App',
url: '/a/<PLUGIN_ID>',
getScene: getScene,
});

步骤 3. 将页面添加到 SceneApp

const getSceneApp = () =>
new SceneApp({
pages: [myAppPage],
});

导航到 https://your-grafana.url/a/<PLUGIN_ID> 将渲染一个 Scenes 应用,其中包含一个时间序列面板,该面板可视化 Prometheus HTTP 请求的数量。