转换

注意

开始之前：您必须已经了解在场景应用中连接数据，才能继续学习本指南。

转换是操纵SceneQueryRunner对象返回的数据并在场景呈现可视化之前对其进行处理的强大方法。使用转换，您可以

重命名字段
联接时间序列数据
跨查询执行数学运算
将一个转换的输出用作另一个转换的输入

使用转换，您可以查询一次数据，对其进行处理，然后在场景中显示数据。

在Grafana 官方文档中详细了解 Grafana 转换。

在场景中转换查询结果

步骤 1. 创建场景

使用单个表格面板和一个 Prometheus 查询创建一个场景。示例查询返回 Prometheus API 端点 HTTP 请求的平均持续时间。生成的表格包含三个列：Time、handler 和 Value。

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 scene = new EmbeddedScene({
  $data: queryRunner,
  body: new SceneFlexLayout({
    direction: 'column',
    children: [
      new SceneFlexItem({
        body: PanelBuilders.table().setTitle('Average duration of HTTP request').build(),
      }),
    ],
  }),
});

步骤 2. 配置数据转换

上一步中生成的表格将类似于以下表格

时间	处理程序	值
2023-05-09 14:00:00.000	/metrics	1.10
2023-05-09 14:00:00.000	/api/v1/label/:name/values	0.361
2023-05-09 14:00:00.000	/api/v1/metadata	0.113
2023-05-09 14:00:00.000	/api/v1/query_range	0.0847
2023-05-09 14:00:00.000	/api/v1/query	0.14
2023-05-09 14:00:00.000	/api/v1/labels	0.0194
2023-05-09 14:00:00.000	/api/v1/series	0
2023-05-09 14:00:00.000	/api/v1/status/buildinfo	0

添加整理字段转换以隐藏Time字段

创建SceneDataTransformer对象

const transformedData = new SceneDataTransformer({
  $data: queryRunner,
  transformations: [
    {
      id: 'organize',
      options: {
        excludeByName: {
          Time: true,
        },
        indexByName: {},
        renameByName: {},
      },
    },
  ],
});

注意

在transformations中使用的对象与您在典型的仪表盘面板中查看JSON选项卡时在面板检查抽屉中看到的转换配置对象相同。要访问此选项卡，请在面板编辑菜单中点击检查 > 面板 JSON。

使用新创建的transformedData对象代替之前使用的SceneQueryRunner

const scene = new EmbeddedScene({
  $data: transformedData,
  body: new SceneFlexLayout({
    direction: 'column',
    children: [
      new SceneFlexItem({
        body: PanelBuilders.table().setTitle('Average duration of HTTP request').build(),
      }),
    ],
  }),
});

生成的表格将类似于以下表格

处理程序	值
/metrics	1.10
/api/v1/label/:name/values	0.361
/api/v1/metadata	0.113
/api/v1/query_range	0.0847
/api/v1/query	0.14
/api/v1/labels	0.0194
/api/v1/series	0
/api/v1/status/buildinfo	0

步骤 3. 配置多个转换

SceneDataTransformer允许您配置多个转换。转换以它们添加到transformations数组的顺序执行。

修改transformedData对象并添加使用正则表达式重命名转换以更改字段名称：handler 更改为 Handler，Value 更改为 Average duration

const transformedData = new SceneDataTransformer({
  $data: queryRunner,
  transformations: [
    {
      id: 'organize',
      options: {
        excludeByName: {
          Time: true,
        },
        indexByName: {},
        renameByName: {},
      },
    },
    {
      id: 'renameByRegex',
      options: {
        regex: 'handler',
        renamePattern: 'Handler',
      },
    },
    {
      id: 'renameByRegex',
      options: {
        regex: 'Value',
        renamePattern: 'Average duration',
      },
    },
  ],
});

生成的表格将类似于以下表格

处理程序	平均持续时间
/metrics	1.10
/api/v1/label/:name/values	0.361
/api/v1/metadata	0.113
/api/v1/query_range	0.0847
/api/v1/query	0.14
/api/v1/labels	0.0194
/api/v1/series	0
/api/v1/status/buildinfo	0

添加自定义转换

除了 Grafana 中提供的所有转换之外，场景还允许您创建自定义转换。

SceneDataTransformer接受CustomTransformOperator作为transformations数组的项

  transformations: Array<DataTransformerConfig | CustomTransformOperator>;

CustomTransformOperator是一个函数，它返回 RxJS 运算符，该运算符会转换数据

type CustomTransformOperator = (context: DataTransformContext) => MonoTypeOperatorFunction<DataFrame[]>;

注意

在RxJS 官方文档中详细了解 RxJS 运算符。

步骤 1. 创建自定义转换

创建一个自定义转换，该转换将应用于handler字段，并将所有值加上 URL 前缀

注意

自定义转换在很大程度上依赖于操纵称为数据帧的 Grafana 内部数据对象。在Grafana 官方文档中详细了解数据帧。

import { DataFrame } from '@grafana/data';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';

const prefixHandlerTransformation: CustomTransformOperator = () => (source: Observable<DataFrame[]>) => {
  return source.pipe(
    map((data: DataFrame[]) => {
      return data.map((frame: DataFrame) => {
        return {
          ...frame,
          fields: frame.fields.map((field) => {
            if (field.name === 'handler') {
              return {
                ...field,
                values: field.values.map((v) => 'http://www.my-api.com' + v),
              };
            }
            return field;
          }),
        };
      });
    })
  );
};

步骤 2. 使用自定义转换

将自定义转换添加到之前创建的transformedData对象中

const transformedData = new SceneDataTransformer({
  $data: queryRunner,
  transformations: [
    prefixHandlerTransformation,
    {
      id: 'organize',
      options: {
        excludeByName: {
          Time: true,
        },
        indexByName: {},
        renameByName: {},
      },
    },
    {
      id: 'renameByRegex',
      options: {
        regex: 'handler',
        renamePattern: 'Handler',
      },
    },
    {
      id: 'renameByRegex',
      options: {
        regex: 'Value',
        renamePattern: 'Average duration',
      },
    },
  ],
});

注意

prefixHandlerTransformation自定义转换作为第一个转换添加，因为它应用于handler字段，该字段在以下转换中被重命名为Handler。您可以修改自定义转换的实现，使其不必在其他转换之前使用。

生成的表格将类似于以下表格

处理程序	平均持续时间
`http://www.my-api.com/metrics`	1.10
`http://www.my-api.com/api/v1/label/:name/values`	0.361
`http://www.my-api.com/api/v1/metadata`	0.113
`http://www.my-api.com/api/v1/query_range`	0.0847
`http://www.my-api.com/api/v1/query`	0.14
`http://www.my-api.com/api/v1/labels`	0.0194
`http://www.my-api.com/api/v1/series`	0
`http://www.my-api.com/api/v1/status/buildinfo`	0

组合和过滤

使用转换（自定义和内置）可以做的一件很强大的事情是，以有趣的方式在面板之间共享查询结果。这使您能够将大多数查询放置在一个位于场景顶部的单一查询运行器中。然后，您可以在VizPanel级别上使用SceneDataTransformer对象以不同的方式联接和过滤生成的数据。一些面板可能需要两个查询的结果，而另一个面板可能需要所有查询的结果。

使用DataFrame上的refId属性，很容易过滤生成DataFrame数组，以确定它们来自哪个查询。

源代码

查看示例源代码

在场景中转换查询结果​

步骤 1. 创建场景​

步骤 2. 配置数据转换​

步骤 3. 配置多个转换​

添加自定义转换​

步骤 1. 创建自定义转换​

步骤 2. 使用自定义转换​

组合和过滤​

源代码​

在场景中转换查询结果

步骤 1. 创建场景

步骤 2. 配置数据转换

步骤 3. 配置多个转换

添加自定义转换

步骤 1. 创建自定义转换

步骤 2. 使用自定义转换

组合和过滤

源代码