Scenes 应用中的选项卡导航

SceneAppPage 提供对构建带有选项卡导航的 Grafana 应用程序的支持。选项卡导航对于为复杂的 Grafana 应用程序设计信息架构特别有用，在这些应用程序中，可视化被分组到有意义的部分中。

向 Scenes 应用添加选项卡导航

为使用 Scenes 的应用程序定义选项卡导航需要您使用 SceneAppPage 属性 tabs。

步骤 1. 创建 Scenes 应用

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

步骤 2. 为各个选项卡创建 scene

每个选项卡渲染其自己的 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 请求平均持续时间摘要的表格面板。