跳到主要内容

从 AngularJS 迁移到 React

如果要将插件迁移到 Grafana 基于 React 的插件平台，建议您以新的主版本发布它。

虽然没有从 Angular 插件迁移到新 React 平台的标准路径，但我们了解到最简单的迁移方法之一是：

  1. 创建一个名为 migrate-to-react 的新分支。
  2. 使用 create-plugin 工具提供的一个模板从头开始。
  3. 将现有代码逐步迁移到新插件中，一次迁移一个组件。

迁移面板插件​

从 Grafana 7.0 开始，插件从 module.ts 导出 PanelPlugin，其中 MyPanel 是一个包含 PanelProps 属性的 React 组件。

src/module.ts
import { PanelPlugin } from '@grafana/data';

export const plugin = new PanelPlugin<MyOptions>(MyPanel);
src/MyPanel.tsx
import { PanelProps } from '@grafana/data';

interface Props extends PanelProps<SimpleOptions> {}

export function MyPanel({ options, data, width, height }: Props) {
  // ...
}

迁移数据源插件​

虽然所有插件都不同，但我们希望分享一个对某些用户有效的迁移过程。

  1. 定义您的配置模型和 ConfigEditor。对于许多插件来说，配置编辑器是最简单的组件，因此是开始迁移的好选择。
  2. 在扩展 DataSourceApi 的类上实现 testDatasource() 方法。使用配置模型中的设置确保您可以成功配置和访问外部 API。
  3. 实现 query() 方法。此时，您可以硬编码查询，因为我们尚未实现查询编辑器。query() 方法同时支持新的数据帧响应和旧的 TimeSeries 响应，因此暂时无需担心转换为新格式。
  4. 实现 QueryEditor。所需工作量取决于您的查询模型的复杂程度。

至此，您应该可以发布新版本了。

要完全迁移到新的插件平台，请将时间序列响应转换为数据帧响应。

指南​

以下指南将帮助您执行特定的迁移操作。