场景应用程序中的标签导航

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 将渲染一个带有两个标签的场景应用程序：概述 和 处理程序。概述 标签包含一个带有 Prometheus HTTP 请求摘要的时间序列面板。处理程序 标签包含一个带有 Prometheus HTTP 请求平均持续时间摘要（按处理程序）的表格面板。