跳转到主要内容

将插件从 Grafana 版本 8.x 迁移到 9.x

按照以下说明将插件从 8.x 版本迁移到 9.x。

9.0 的破坏性更改​

以下破坏性更改是在 Grafana 9.0 版本中引入的。

theme.visualization.getColorByName 替换了 getColorForTheme​

getColorForTheme 已被删除，因此您应使用 theme.visualization.getColorByName。

示例

// before
fillColor: getColorForTheme(panel.sparkline.fillColor, config.theme)

// after
fillColor: config.theme.visualization.getColorByName(panel.sparkline.fillColor),

VizTextDisplayOptions 替换了 TextDisplayOptions​

TextDisplayOptions 已被删除，因此您应使用 VizTextDisplayOptions。

示例

// before
interface Options {
...
text?: TextDisplayOptions;
...
}

// after
interface Options {
...
text?: VizTextDisplayOptions;
...
}

backendSrv.fetch() 的内部更改​

我们已经更改了 backendSrv.fetch() 的内部实现，使其在响应为不正确的 JSON 时抛出错误。请确保在调用 backendSrv.fetch()（或任何其他 backendSrv 方法）的位置处理可能的错误。

// PREVIOUSLY: this was returning with an empty object {} - in case the response is an invalid JSON
return await getBackendSrv().post(`${API_ROOT}/${id}/install`);

// AFTER THIS CHANGE: the following will throw an error - in case the response is an invalid JSON
return await getBackendSrv().post(`${API_ROOT}/${id}/install`);

GrafanaTheme2 和 useStyles2 替换了 getFormStyles​

我们从 grafana-ui 中删除了已弃用的 getFormStyles 函数。使用 GrafanaTheme2 和 useStyles2 钩子代替。

/api/ds/query 替换了 /api/tsdb/query​

我们已经移除了过时的 /api/tsdb/query 指标端点。请使用 /api/ds/query 代替。

selectOptionInTest 已被移除​

前端测试中使用的 @grafana/ui 包辅助函数 selectOptionInTest 已被移除，因为它导致测试库被打包到 Grafana 的生产代码中。如果您在测试中使用了此辅助函数，请相应地更新您的代码。

// before
import { selectOptionInTest } from '@grafana/ui';
// ...test usage
await selectOptionInTest(selectEl, 'Option 2');

// after
import { select } from 'react-select-event';
// ...test usage
await select(selectEl, 'Option 2', { container: document.body });

工具包 9 和 webpack​

使用自定义 Webpack 配置的插件可能会因为 webpack@4 和 webpack@5 之间的变化而损坏。请参考官方 webpack 迁移指南以获取帮助。

Webpack 5 默认不包含 node.js 核心模块的 polyfills（例如，buffer、stream、os）。这可能导致插件的构建失败。如果需要 polyfills，建议在插件仓库的根目录中创建自定义 webpack 配置并添加所需的回退。

// webpack.config.js

module.exports.getWebpackConfig = (config, options) => ({
  ...config,
  resolve: {
    ...config.resolve,
    fallback: {
      os: require.resolve('os-browserify/browser'),
      stream: require.resolve('stream-browserify'),
      timers: require.resolve('timers-browserify'),
    },
  },
});

请参考 webpack 构建错误消息或官方迁移指南以获取回退的帮助。