跳转到主要内容

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

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

使用 React 18 验证插件行为​

Grafana 10 包含了我们对 React 18 的升级和使用新的 React 客户端渲染 API。这些更改通过 PR 64428 集成到核心 grafana 仓库。

尽管这些更新带来了许多显著的好处，但也可能影响插件的工作方式。特别是，由于改善与 useEffect 定时和状态更新自动批处理的一致性，可能会产生意外的副作用。

建议采取的措施

数据帧字段值现在只是数组​

在 Grafana 10 中，数据帧中的值现在以简单的 JavaScript 数组的形式管理（参见 PR #66480）。现在不再需要将值包装在 Vector 实现中。

大多数针对 9.x 的代码将继续无问题地运行。例外情况是，现有代码直接实现了 Vector 而不是扩展或使用基类。在这种情况下，代码应返回数组或扩展 FunctionalVector。所有 Vector 实现都已弃用，并将在未来移除。

当编写应在 9.x 上运行的插件时，继续使用 Vector 接口。在这种情况下，当针对版本 10+ 时，现在可以使用简单的数组而不是包装类。

为了使这个过渡无缝，我们使用了原始 JavaScript Sin™。也就是说，我们通过添加几个 Vector 方法扩展了本地 Array 原型。

更新到 React Router v6​

从 Grafana 10 开始，插件可以开始使用 react-router 的 v6 版本。总的来说，react-router v6 旨在简化路由配置，并为开发者提供更灵活和直观的 API。

如果您的当前插件版本需要与 Grafana v9 兼容，那么您可以在 Grafana v10 中继续使用 react-router@v5。两个版本都对插件可用。然而，我们强烈建议开发者尽快将他们的插件更新为使用 v6 版本的 react-router，因为 v5 版本将在 Grafana v11 中被弃用，并随后被移除。

有关更多信息，请参阅官方 React Router v5 到 v6 迁移指南。

使用 @grafana/create-plugin 更新​

按照以下步骤开始在使用您的插件中使用 react-router v6

通过在 <project-root>/.cprc.json 中设置以下功能标志启用使用 react-router@v6

{
  "features": {
    "useReactRouterV6": true
  }
}

现在使用 create-plugin 工具更新构建配置

npx @grafana/create-plugin@latest update

更新构建配置后，您可能需要更新插件的其他部分。为此，请按照以下步骤操作

2. 使用 <Routes> 而不是 <Switch>：​

// Using <Routes> instead of <Switch> in `react-router` v6
import { Routes } from 'react-router-dom';

// ...

return (
  <Routes>
    <Route path="/" element={<Home />} />
  </Routes>
);

3. 从 <Route> 组件中移除 exact 属性：​

return (
  <Routes>
    {/* BAD (Until v5) */}
    <Route exact path="/" element={<Home />} />

    {/* GOOD (From v6) */}
    {/* (Routes are "exact" by default, you need to use the "*" to match sub-routes) */}
    <Route path="/" element={<Home />} />
  </Routes>
);

4. 参考原始的 react-router 迁移指南以获取更深入的更改：​

访问官方react-router v5到v6迁移指南以获取更多信息。