AngularJS 到 React：自定义配置组件
使用本指南了解如何将面板的自定义配置组件从 AngularJS 迁移到 React。
背景
Grafana SDK 为开发者提供了许多有用的配置组件，例如输入数字范围、阈值、单位选择和颜色选择。您可以在 @grafana/ui 中查看这些元素的描述和示例。
一些面板的配置选项比其他面板更复杂。这些面板需要您构建自定义组件以支持从 AngularJS 移植到 React。
Angular 自定义配置示例
本文档以 grafana-polystat-panel 为例，这是一个从 AngularJS 转换为 React 的大型复杂插件。
polystat 的 AngularJS 版本为 复合指标 提供了一个自定义编辑器。使用复合指标可以将一系列指标一起处理以确定整体状态。
复合指标的一个示例是服务器，它包含有关 CPU 使用率、内存使用率、磁盘使用率、网络带宽和 API 响应率的查询。一个单一的指标被组合起来表示所有这些不同的指标，每个指标都有其独特的阈值，并最终以显示“最差”状态（即最低值）的多边形显示。
复合指标编辑器包含全局选项以及许多适用于特定复合指标的自定义选项。例如
展开复合指标（COMPOSITE1）时，会显示详细信息。添加新的复合指标会提供合理的默认值，并在左侧显示有序名称。
面板版本 1 的源代码可以在此处查看：Polystat Panel v1.x。
AngularJS 复合指标编辑器结合了 HTML 和代码来 管理 UI。例如
此 AngularJS 插件可在 Grafana 版本 10 中使用，但编辑器难以使用，因为需要左右滚动才能查看所有值。此外，您必须将编辑器侧边栏扩展到几乎全屏大小才能查看所有选项。禁用 AngularJS 后，插件将不再起作用。
React 组件和配置选项
将您的组件移植到 React 需要创建一个看起来像这样的自定义编辑器组件
复合指标编辑器现在垂直显示，不需要左右滚动即可查看所有选项。您还可以像过滤其他配置项一样过滤编辑器。
组件的源代码现在是自包含的，您可以在 Grafana GitHub 存储库 中查看。
新的编辑器比 AngularJS 版本具有许多优势
- 支持重新排序复合指标并为其命名以方便识别。编辑器还利用内置的输入字段和验证器，减少了支持面板所需的代码量。
- 允许许多复杂的配置选项，这些选项在 React 中更容易实现。例如，这些选项包括能够从正则表达式、模板变量或两者都派生复合指标名称的能力。
- 包括用于阈值和覆盖的附加自定义编辑器，这些编辑器与常见的
@grafana/ui模式不同。这些编辑器可用作有关如何使用复杂逻辑实现此类编辑器的参考。