跳到主要内容

将插件从 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 Hook。

/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 });

Toolkit 9 和 webpack​

使用自定义 Webpack 配置的插件可能会由于 webpack@4 和 webpack@5 之间的更改而出现问题。请参考 官方 webpack 迁移指南以获取帮助。

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

// 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 构建错误消息或官方迁移指南以获取 fallback 的帮助。