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

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