AngularJS 到 React：自定义配置组件

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

背景

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

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

本文档重点介绍 grafana-polystat-panel，它是一个从 AngularJS 转换为 React 的大型复杂插件的示例。

AngularJS 版本的 polystat 具有用于复合指标的自定义编辑器。使用复合指标可以一起处理一系列指标，以确定总体状态。

复合指标的一个示例是服务器，它具有 CPU 使用率、内存使用率、磁盘使用率、网络带宽和 API 响应率的查询。单个指标被组合起来表示所有这些不同的指标，每个指标都有其独特的阈值，并生成一个以“最差”状态（即最低值）显示的 polygon。

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

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

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

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

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

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

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

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

新编辑器比 AngularJS 版本有许多优势

支持重新排序复合指标并对其进行命名以便于识别。编辑器还利用内置的输入字段和验证器，减少了支持面板所需的代码量。
允许许多复杂的配置选项，这些选项在 React 中更容易实现。例如，这些选项包括从正则表达式、模板变量或两者兼有中派生复合指标名称的能力。
包括用于阈值和覆盖的其他自定义编辑器，这些编辑器不同于常见的 @grafana/ui 模式。这些编辑器可以用作参考，了解如何使用复杂逻辑实现这些类型的编辑器。