跳转到主要内容

与嵌套插件协同工作

Grafana 应用插件可以嵌套数据源、前端和后端,以及面板插件,以便您可以提供完整的用户体验。

在开始之前

搭建应用插件。有关说明,请参考构建应用插件教程。

嵌套插件的解剖结构

嵌套插件位于应用插件的 src 文件夹中。它们通常遵循插件相同的结构,并有自己的 plugin.json,但没有自己的 package.json.config 文件夹。

以下是一个嵌套数据源插件的示例

./src
├── README.md
├── components
+├── nested-datasource
+│ ├── components
+│ │ ├── ConfigEditor.tsx
+│ │ └── QueryEditor.tsx
+│ ├── datasource.ts
+│ ├── img
+│ ├── module.ts
+│ ├── plugin.json
+│ └── types.ts
├── img
│ └── logo.svg
├── module.ts
└── plugin.json

何时使用嵌套插件

当您有一个希望与您的应用插件一起分发的数据源或面板插件时,

每个嵌套数据源都可以有自己的后端,独立于应用插件的后端。

注意

请注意,插件 nested-datasource 没有自己的 package.json 文件。嵌套插件文件夹的名称并不重要。

如何将嵌套插件添加到应用程序插件中

  1. 创建一个将成为嵌套插件的新的插件

    重要

    开始之前,请确保你处于应用程序插件的目录之外。

    使用 create-plugin 工具生成一个新的插件

    npx @grafana/create-plugin@latest

    选择所需的插件类型(数据源或面板),提供一个名称,并使用与你的应用程序插件相同的组织。

  2. 准备嵌套插件

    将新生成的插件中的 src 文件夹重命名为反映其特定用途的名称(例如,nested-datasource)。

  3. 集成到你的应用程序插件中

    将重命名的 src 文件夹直接复制到你的应用程序插件的 src 文件夹中。你可以安全地忽略其他生成的文件(如 package.json.config 等)。这些文件在应用程序中不需要。

  4. (可选)将你的数据源添加到已配置的数据源中

    如果你正在添加嵌套数据源,请记住将其添加到已配置数据源的 YAML 配置文件中。有关详细信息,请参阅配置 Grafana 的文档。

  5. (可选)清理你的目录

    你现在可以删除最初生成的嵌套插件的整个目录。

按照这些步骤,你的应用程序插件现在包含了嵌套数据源或面板的源代码,准备进行进一步开发。