跳至主要内容

将插件从 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 可以是 LegacyResponseDataDataFrame

toDataFrame() 函数将旧响应(例如 TimeSeriesTable)转换为 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