场景应用中的钻取页面

钻取页面是构建复杂、数据驱动应用程序的有力工具。它允许您创建一个用户可以与之交互并逐步探索以揭示底层数据的概述。

将钻取页面添加到场景应用中

SceneAppPage 随附一个 API，允许您创建深层嵌套的钻取页面。

注意

开始之前：在继续本指南之前，您必须已经了解 React Router URL 参数、Grafana 字段配置和数据链接。

要创建钻取页面，请使用 SceneAppPage 对象的 drilldown 属性。

步骤 1. 创建场景应用

按照使用场景构建应用程序指南来构建您的应用程序。

步骤 2. 构建顶级钻取页面

使用以下代码构建一个页面，使用Grafana的表格面板显示Prometheus API端点的平均请求持续时间摘要

function getOverviewScene() {
  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,
      },
    ],
  });

  const tablePanel = PanelBuilders.table().setTitle('Average duration of HTTP request').setData(queryRunner).build();

  return new EmbeddedScene({
    body: new SceneFlexLayout({
      direction: 'column',
      children: [
        new SceneFlexItem({
          minHeight: 300,
          body: tablePanel,
        }),
      ],
    }),
  });
}

function getSceneApp() {
  return new SceneApp({
    pages: [
      new SceneAppPage({
        title: 'HTTP handlers overview',
        url: '/a/<PLUGIN_ID>/my-app',
        getScene: getOverviewScene,
      }),
    ],
  });
}

要显示钻取页面，您需要提供导航。配置表格面板数据链接（在官方Grafana文档中了解数据链接）。然后修改表格面板配置以设置handler字段的链接

import { sceneUtils, PanelBuilders } from '@grafana/scenes';

// ...

const tablePanel = PanelBuilders.table()
  .setTitle('Average duration of HTTP request')
  .setData(queryRunner)
  .setOverrides((b) =>
    b.matchFieldsWithName('handler').overrideLinks([
      {
        title: 'Go to handler overview',
        url: '/a/<PLUGIN_ID>/my-app/${__value.text}${__url.params}',
      },
    ])
  )
  .build();

生成的面板将为handler字段的全部值提供链接。点击某个值将重定向到特定的端点钻取URL，该URL将显示“未找到页面”错误。您将在下一个步骤中设置此页面。

注意

fieldConfig选项与您在表格面板检查器中查看面板JSON时在典型仪表板面板中看到的选项相同。要访问面板检查器，请点击面板编辑菜单中的检查。

步骤4. 构建钻取页面

修改getSceneApp函数以设置钻取场景。使用SceneAppPage对象的drilldowns属性。该drilldowns属性接受一个SceneAppDrilldownView对象数组。它允许渲染钻取URL和页面的配置

export interface SceneAppDrilldownView {
  /** Use to provide parametrized drilldown URL, for example, /app/clusters/:clusterId **/
  routePath: string;
  /** Function that returns a page object for a given drilldown route match. Use parent to configure drilldown view parent SceneAppPage via getParentPage method. **/
  getPage: (routeMatch: SceneRouteMatch<any>, parent: SceneAppPageLike) => SceneAppPageLike;
}

配置API端点钻取视图

function getSceneApp() {
  return new SceneApp({
    pages: [
      new SceneAppPage({
        title: 'HTTP handlers overview',
        url: '/a/<PLUGIN_ID>/my-app',
        getScene: getOverviewScene,
        drilldowns: [
          {
            routePath: '/a/<PLUGIN_ID>/my-app/:handler',
            getPage: getHandlerDrilldownPage,
          },
        ],
      }),
    ],
  });
}

定义一个函数，它返回用于钻取视图的SceneAppPage。此函数接收两个参数

routeMatch - 包含有关URL参数的信息。
parentPage - 包含对父SceneAppPage的引用，以正确配置面包屑。

function getHandlerDrilldownPage(routeMatch: SceneRouteMatch<{ handler: string }>, parent: SceneAppPageLike) {
  // Retrieve handler from the URL params
  const handler = decodeURIComponent(routeMatch.params.handler);

  return new SceneAppPage({
    // Set up a particular handler drill-down URL
    url: `/a/<PLUGIN_ID>/my-app/${encodeURIComponent(handler)}`,
    // Important: Set this up for breadcrumbs to be built
    getParentPage: () => parent,
    title: `${handler} endpoint overview`,
    getScene: () => getHandlerDrilldownScene(handler),
  });
}

步骤5. 构建钻取场景

定义将在钻取页面上渲染的场景

function getHandlerDrilldownScene(handler: string) {
  const requestsDuration = new SceneQueryRunner({
    datasource: {
      type: 'prometheus',
      uid: '<PROVIDE_GRAFANA_DS_UID>',
    },
    queries: [
      {
        refId: 'A',
        expr: `avg without(job, instance) (rate(prometheus_http_request_duration_seconds_sum{handler="${handler}"}[5m])) * 1e3`,
      },
    ],
  });

  const requestsCount = new SceneQueryRunner({
    datasource: {
      type: 'prometheus',
      uid: '<PROVIDE_GRAFANA_DS_UID>',
    },
    queries: [
      {
        refId: 'A',
        expr: `sum without(job, instance) (rate(prometheus_http_request_duration_seconds_count{handler="${handler}"}[5m])) `,
      },
    ],
  });

  return new EmbeddedScene({
    body: new SceneFlexLayout({
      direction: 'column',
      children: [
        new SceneFlexItem({
          minHeight: 300,
          body: PanelBuilders.timeseries().setTitle('Requests duration').setData(requestsDuration),
        }),
        new SceneFlexItem({
          minHeight: 300,
          body: PanelBuilders.timeseries().setTitle('Requests count').setData(requestsCount),
        }),
      ],
    }),
  });
}

完整示例

以下是一个具有钻取页面的Scenes应用程序的完整代码

function getOverviewScene() {
  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,
      },
    ],
  });

  const tablePanel = PanelBuilders.table()
    .setTitle('Average duration of HTTP request')
    .setData(queryRunner)
    .setOverrides((b) =>
      b.matchFieldsWithName('handler').overrideLinks([
        {
          title: 'Go to handler overview',
          url: '/a/<PLUGIN_ID>/my-app/${__value.text}${__url.params}',
        },
      ])
    )
    .build();

  return new EmbeddedScene({
    body: new SceneFlexLayout({
      direction: 'column',
      children: [
        new SceneFlexItem({
          minHeight: 300,
          body: tablePanel,
        }),
      ],
    }),
  });
}

function getHandlerDrilldownPage(routeMatch: SceneRouteMatch<{ handler: string }>, parent: SceneAppPageLike) {
  // Retrieve handler from the URL params.
  const handler = decodeURIComponent(routeMatch.params.handler);

  return new SceneAppPage({
    // Setup particular handler drilldown URL
    url: `/a/<PLUGIN_ID>/my-app/${encodeURIComponent(handler)}`,
    // Important: setup this for breadcrumbs to be built
    getParentPage: () => parent,
    title: `${handler} endpoint overview`,
    getScene: () => getHandlerDrilldownScene(handler),
  });
}

function getHandlerDrilldownScene(handler: string) {
  const requestsDuration = new SceneQueryRunner({
    datasource: {
      type: 'prometheus',
      uid: '<PROVIDE_GRAFANA_DS_UID>',
    },
    queries: [
      {
        refId: 'A',
        expr: `avg without(job, instance) (rate(prometheus_http_request_duration_seconds_sum{handler="${handler}"}[5m])) * 1e3`,
      },
    ],
  });

  const requestsCount = new SceneQueryRunner({
    datasource: {
      type: 'prometheus',
      uid: '<PROVIDE_GRAFANA_DS_UID>',
    },
    queries: [
      {
        refId: 'A',
        expr: `sum without(job, instance) (rate(prometheus_http_request_duration_seconds_count{handler="${handler}"}[5m])) `,
      },
    ],
  });

  return new EmbeddedScene({
    body: new SceneFlexLayout({
      direction: 'column',
      children: [
        new SceneFlexItem({
          minHeight: 300,
          body: PanelBuilders.timeseries().setTitle('Requests duration').setData(requestsDuration),
        }),
        new SceneFlexItem({
          minHeight: 300,
          body: PanelBuilders.timeseries().setTitle('Requests count').setData(requestsCount),
        }),
      ],
    }),
  });
}

function getSceneApp() {
  return new SceneApp({
    pages: [
      new SceneAppPage({
        title: 'HTTP handlers overview',
        url: '/a/<PLUGIN_ID>/my-app',
        getScene: getOverviewScene,
        drilldowns: [
          {
            routePath: '/a/<PLUGIN_ID>/my-app/:handler',
            getPage: getHandlerDrilldownPage,
          },
        ],
      }),
    ],
  });
}

将钻取页面添加到场景应用中​

步骤 1. 创建场景应用​

步骤 2. 构建顶级钻取页面​

步骤3. 设置钻取导航​

步骤4. 构建钻取页面​

步骤5. 构建钻取场景​

完整示例​