场景应用中的标签页导航
SceneAppPage
提供了构建带有标签页导航的 Grafana 应用程序的支持。标签页导航特别适用于为复杂的 Grafana 应用程序设计信息架构,其中可视化被分组到有意义的部分。
将标签页导航添加到场景应用
使用场景为应用程序定义标签页导航需要您使用 SceneAppPage
属性,tabs
。
步骤 1. 创建场景应用
按照 使用场景构建应用指南 构建您的应用程序。
步骤 2. 为单个标签创建场景
每个标签渲染自己的场景,类似于 SceneAppPage
const getOverviewScene =() => {
const queryRunner = new SceneQueryRunner({
$timeRange: new SceneTimeRange()
datasource: {
type: 'prometheus',
uid: '<PROVIDE_GRAFANA_DS_UID>',
},
queries: [
{
refId: 'A',
expr: 'rate(prometheus_http_requests_total{}[5m])',
},
],
});
return new EmbeddedScene({
$data: queryRunner,
body: new SceneFlexLayout({
direction: 'column',
children: [new SceneFlexItem({
minHeight: 300,
body: PanelBuilders.timeseries().setTitle('HTTP Requests per handler').build(),
})],
}),
});
}
const getHandlersScene =() => {
const queryRunner = new SceneQueryRunner({
$timeRange: new SceneTimeRange()
datasource: {
type: 'prometheus',
uid: '<PROVIDE_GRAFANA_DS_UID>',
},
queries: [
{
refId: 'A',
expr: 'sort_desc(avg by(handler) (rate(prometheus_http_request_duration_seconds_sum {}[5m]) * 1e3))',
format: 'table',
instant: true,
},
],
});
return new EmbeddedScene({
$data: queryRunner,
body: new SceneFlexLayout({
direction: 'column',
children: [new SceneFlexItem({
minHeight: 300,
body: PanelBuilders.table().setTitle('HTTP Requests per handler').build(),
})],
}),
});
}
步骤 3. 配置页面上的标签
标签是 SceneAppPage
对象的实例。类似于创建场景页面,您创建标签。要渲染标签,请使用 SceneAppPage
对象的 tabs
属性
const overviewTab = new SceneAppPage({
title: 'Overview',
url: '/a/<PLUGIN_ID>/my-app/overview',
getScene: getOverviewScene,
});
const handlersTab = new SceneAppPage({
title: 'Handlers',
url: '/a/<PLUGIN_ID>/my-app/handlers',
getScene: getHandlersScene,
});
const myAppPage = new SceneAppPage({
title: 'Grafana Scenes App',
url: '`/a/<PLUGIN_ID>/my-app`,
tabs: [
overviewTab,
handlersTab
]
});
访问 https://your-grafana.url/a/<PLUGIN_ID>/my-app
将显示一个具有两个标签页的Scenes应用:概览 和 处理程序。 概览 标签页包含一个时间序列面板,其中包含Prometheus HTTP请求摘要。 处理程序 标签页包含一个表格面板,其中包含每个处理程序的平均HTTP请求持续时间摘要。