跳转到主要内容

从 Grafana 版本 6.x 迁移到 7.0

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

7.0 版本的 Grafana 有哪些新特性?​

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

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

新的数据格式​

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

之前，数据源插件可以将数据作为时间序列或表格发送。使用数据帧，数据源可以以类似表格的结构发送任何数据。这为您在 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.0 中的支持得到了很大改善。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。