Tab navigation in Scenes apps
SceneAppPage
provides support for building Grafana applications with tabs navigation. Tabs navigation is especially useful for designing information architecture for complex Grafana apps, where visualizations are grouped into meaningful sections.
Add tabs navigation to Scenes apps
Defining tabs navigation for apps using Scenes requires you to use the SceneAppPage
property, tabs
.
Step 1. Create a Scenes app
Follow the Building apps with Scenes guide to build your app.
Step 2. Create scenes for individual tabs
Each tab renders its own scene, similar to 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(),
})],
}),
});
}
Step 3. Configure tabs for the page
Tabs are instances of SceneAppPage
objects. Similar to creating a scene page, you create tabs. To render tabs, use the tabs
property of the SceneAppPage
object:
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
]
});
Navigating to https://your-grafana.url/a/<PLUGIN_ID>/my-app
will render a Scenes app with two tabs: Overview and Handlers. The Overview tab contains a time series panel with a Prometheus HTTP Requests summary. The Handlers tab contains a table panel with a Prometheus HTTP request average duration summary, per handler.