将插件从 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@4 和 webpack@5 之间的更改，使用自定义 Webpack 配置的插件可能会中断。请参阅 官方 webpack 迁移指南 以获得帮助。

Webpack 5 默认不包含 node.js 核心模块的 polyfill（例如，buffer、stream、os）。这可能会导致插件构建失败。如果需要 polyfill，建议在插件仓库的根目录中创建自定义 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 构建错误消息或 官方迁移指南，以获得有关回退的帮助。