跳到主要内容

将插件从 Grafana 6.x 版本迁移到 7.0

请按照以下说明将 Grafana 从 6.x 版本升级到 7.0。

Grafana 7.0 的新功能？​

Grafana 7.0 引入了一个基于 React 的全新插件平台。这个新平台取代了以前基于 Angular 的插件平台。

使用 Angular 构建的插件在近期仍然可以工作，但我们强烈建议新的插件作者使用新平台进行开发。

新的数据格式​

随着向 React 的迁移，新的插件平台引入了一种新的内部数据格式，称为 数据帧

以前，数据源插件可以将数据作为时间序列或表格发送。使用数据帧，数据源可以以类似表格的结构发送任何数据。这为您提供了更大的灵活性，可以在 Grafana 中可视化您的数据。

改进的 TypeScript 支持​

虽然以前基于 Angular 的插件 SDK 支持 TypeScript，但我们极大地改进了对 React 平台的支持。我们所有的 API 现在都用 TypeScript 编写，这可能需要现有代码更新为新的更严格的类型定义。Grafana 7.0 还为插件开发者引入了几个新的 API，这些 API 利用了 Grafana 7.0 中的许多新功能。

Grafana 工具包​

随着 Grafana 7.0 的发布，我们发布了一个新工具，使插件开发更容易。以前，您需要使用 Gulp、Grunt 或类似的工具来生成缩小的资源。Grafana 工具包负责构建和测试您的插件，而无需复杂的配置文件。

有关更多信息，请参阅 @grafana/toolkit。

注意

从 Grafana 10.0 开始，@grafana/toolkit 已被弃用。它已被 create-plugin 工具取代。

字段选项​

Grafana 7.0 引入了字段选项的概念，这是一种在数据可视化之前配置数据的新方法。由于以前的版本中没有此功能，因此任何启用基于字段配置的插件都无法在以前版本的 Grafana 中工作。

对于 Grafana 7.0 之前的插件，所有选项都被视为显示选项。字段配置的选项卡不可用。

后端插件​

虽然后端插件在以前版本的 Grafana 中作为实验性功能提供，但 Grafana 7 对其支持已大大改进。Grafana 7.0 的后端插件是向后兼容的，并将继续工作。但是，旧的后端插件系统已被弃用，我们建议您使用新的 SDK 来开发后端插件。

由于 Grafana 7.0 引入了后端插件签名，因此如果社区插件未签名，则默认情况下不会加载。

迁移到数据帧​

在 7.0 之前，数据源和面板插件使用时间序列或表格交换数据。从 7.0 开始，插件使用新的数据帧格式将数据从数据源传递到面板。

Grafana 7.0 向后兼容以前版本中使用的旧数据格式。使用旧格式的面板和数据源仍然可以使用使用新数据帧格式的插件。

query 方法返回的 DataQueryResponse 可以是 LegacyResponseData 或 DataFrame。

toDataFrame() 函数将旧的响应（例如 TimeSeries 或 Table）转换为 DataFrame。使用它逐步将您的代码迁移到新格式。

import { toDataFrame } from '@grafana/data';
async query(options: DataQueryRequest<MyQuery>): Promise<DataQueryResponse> {
  return {
    data: options.targets.map(query => {
      const timeSeries: TimeSeries = await doLegacyRequest(query);
      return toDataFrame(timeSeries);
    }
  };
}

插件迁移故障排除​

从 Grafana 7.0 开始，后端插件现在可以进行加密签名以验证其来源。默认情况下，Grafana 会忽略未签名的插件。有关更多信息，请参阅允许未签名的插件。

从 6.5.x 版本到 7.3.0 版本​

请按照本节中的说明将 Grafana 从 6.5.x 版本升级到 7.3.0 版本。

getColorForTheme 更改​

getColorForTheme 函数参数已从 (color: ColorDefinition, theme?: GrafanaThemeType) 更改为 (color: string, theme: GrafanaTheme)。

// before
const color: ColorDefinition = {
  hue: 'green';
  name: 'dark-green';
  variants: {
    light: '#19730E'
    dark: '#37872D'
  };
}
const themeType: GrafanaThemeType = 'dark';
const themeColor = getColorForTheme(color, themeType);

// after
const color = 'green';
const theme: GrafanaTheme = useTheme();
const themeColor = getColorForTheme(color, theme);

从 6.2.x 版本到 v7.4.x 版本​

请按照本节中的说明将 Grafana 从 6.2.x 版本升级到 v7.4.x 版本。

图例组件​

图例组件已重构，并在 @grafana/ui 包中引入了以下更改。

// before
import { LegendItem, LegendOptions, GraphLegend } from '@grafana/ui';

// after
import { VizLegendItem, VizLegendOptions, VizLegend } from '@grafana/ui';
  • LegendPlacement 已从 'under' | 'right' | 'over' 更新为 'bottom' | 'right'，因此您无法再将图例放置在可视化上方。
  • LegendItem 中的 isVisible 属性已在 VizLegendItem 中重命名为 disabled。