Scenes 应用中的标签页导航

SceneAppPage 支持使用标签页导航构建 Grafana 应用。标签页导航对于为复杂的 Grafana 应用设计信息架构特别有用，可以将可视化内容分组到有意义的部分。

为 Scenes 应用添加标签页导航

要使用 Scenes 为应用定义标签页导航，您需要使用 SceneAppPage 的 tabs 属性。

步骤 1. 创建 Scenes 应用

请按照使用 Scenes 构建应用指南构建您的应用。

步骤 2. 为单个标签页创建 Scenes

每个标签页渲染自己的 scene，类似于 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 对象实例。与创建 scene 页面类似，您可以创建标签页。要渲染标签页，请使用 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 请求摘要。处理程序标签页包含一个表格面板，其中包含每个处理程序的 Prometheus HTTP 请求平均持续时间摘要。