AngularJS 到 React：自定义配置组件

使用本指南学习如何将面板的自定义配置组件从 AngularJS 迁移到 React。

背景

Grafana SDK 为开发者提供了许多实用的配置组件，例如输入数字范围、阈值、单位选择和颜色选择。您可以在 @grafana/ui 中查看这些元素的描述和示例。

一些面板的配置选项比其他面板更复杂。这些面板要求您构建一个自定义组件来支持从 AngularJS 到 React 的移植。

本文档重点以 grafana-polystat-panel 为例，这是一个大型复杂插件，已从 AngularJS 转换为 React。

AngularJS 版本的 polystat 有一个用于组合指标的自定义编辑器。使用组合指标允许同时处理一组指标来确定整体状态。

组合指标的一个例子是服务器，其中包含 CPU 使用率、内存使用率、磁盘使用率、网络带宽和 API 响应速率的查询。通过组合创建一个单一指标来代表所有这些不同的指标，并为每个指标设置独特的阈值，最终以具有“最差”状态（即最低值）的多边形显示结果。

组合指标编辑器包含全局选项，以及许多适用于特定组合指标的自定义选项。例如

当您展开一个组合指标 (COMPOSITE1) 时，会显示详细信息。添加新的组合指标会提供合理的默认值，并在左侧显示带顺序的名称。

可以在此处查看面板版本 1 的源代码：Polystat Panel v1.x。

AngularJS 组合指标编辑器是 HTML 和用于管理 UI 的代码的组合。例如

这个 AngularJS 插件在 Grafana 10 版本中可以工作，但编辑器难以使用，因为它需要左右滚动才能看到所有值。此外，您必须将编辑器侧面板展开到几乎全屏才能看到所有选项。一旦 AngularJS 被禁用，插件就不再起作用。

将您的组件移植到 React 需要创建一个如下所示的自定义编辑器组件

组合指标编辑器现在垂直显示，不再需要左右滚动即可看到所有选项。您还可以像过滤其他配置项一样过滤编辑器。

该组件的源代码现在是自包含的，可以在 Grafana GitHub 仓库中查看。

新编辑器相对于 AngularJS 版本有许多优点