跳到主要内容

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

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

Grafana 7.0 的新特性？​

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

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

新的数据格式​

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

以前，数据源插件可以以时间序列或表格的形式发送数据。使用 data frames，数据源可以以表格状结构发送任何数据。这让您在 Grafana 中可视化数据时具有更大的灵活性。

改进的 TypeScript 支持​

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

Grafana Toolkit​

Grafana 7.0 发布了一个新工具，使插件开发更加容易。在此之前，您需要使用 Gulp、Grunt 或类似工具来生成压缩资源。Grafana Toolkit 负责构建和测试您的插件，无需复杂的配置文件。

更多信息，请参阅@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 引入了后端插件签名，社区插件如果未签名，默认将不会加载。

迁移到 data frames​

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

Grafana 7.0 向后兼容旧版本中使用的数据格式。使用旧格式的面板和数据源仍可与使用新 data frame 格式的插件配合使用。

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

The 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 变更​

The 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。