跳至主要内容

将仪表盘包含在应用插件中

本指南介绍如何将预先配置的仪表盘添加到应用插件中。通过将预先配置的仪表盘集成到您的插件中，您可以为用户提供一个现成的模板，从而使他们无需从头开始构建仪表盘。

我们将引导您完成将仪表盘捆绑到插件的过程。该过程包括创建仪表盘、将其添加到插件中，然后将其导入插件。您还可以选择添加导航链接，以便用户更容易发现其所有功能。

步骤 1：创建仪表盘​

首先创建您想与插件捆绑在一起的仪表盘。create-plugin 提供的 开发环境 可以帮助创建和测试仪表盘。

设置数据源变量​

为了便于用户自定义，请创建一个仪表盘数据源变量。这允许用户在导入后轻松链接他们自己的数据源实例。

  1. 通过选择数据源变量类型并为其命名来创建数据源变量。
    Data source variable
    数据源变量
  2. 为创建的每个面板选择数据源变量作为数据源。
    Data source selection
    数据源选择

导出仪表盘​

  1. 在 Grafana 应用程序中转到您的仪表盘。
  2. 点击仪表盘左上角的 **共享** 图标。
  3. 点击 **导出**，然后点击 **保存到文件**。
  4. 在代码编辑器中打开仪表盘 JSON 文件，并将它的 id 属性设置为 null。

步骤 2：将仪表盘添加到插件中​

  1. 在插件项目 src 目录中创建一个 dashboards 文件夹。

  2. 将导出的仪表盘 JSON 文件移动到新的 dashboards 文件夹中。

    myorg-myplugin-datasource/
    └── src/
        ├── dashboards/
        │   └── overview.json
        ├── module.ts
        └── plugin.json

  3. 更新您的 plugin.json 文件以包含对新仪表盘资源的引用，并指定仪表盘文件在 src 文件夹中的相对路径。

    src/plugin.json
    {
      "includes": [
        {
          "name": "overview",
          "path": "dashboards/overview.json",
          "type": "dashboard"
        }
      ]
    }
    info

    确保路径相对于 src 目录。这是插件在构建前端后从 dist 目录正确引用仪表盘 JSON 文件所必需的。

  4. 将仪表盘添加到插件后，重建插件并重新启动 Grafana 以应用新配置。

  5. 包含在应用插件中的仪表盘会由 Grafana 服务器自动导入。导航到您的仪表盘以验证它是否按预期工作。

应用插件可以通过在 plugin.json 中添加导航链接来增强用户导航。包含的路径应引用捆绑的仪表盘 uid 属性。

src/plugin.json
{
  "includes": [
    {
      "name": "My App Dashboard",
      "path": "dashboards/overview.json",
      "type": "dashboard"
    },
    {
      "addToNav": true,
      "name": "My App Dashboard",
      "path": "d/ffb13c35-2f2f-4f36-99b1-bde7244e8de3",
      "type": "page"
    }
  ]
}

结论​

通过将仪表盘与您的应用插件捆绑在一起，您可以显著改善用户入门体验。预先配置的仪表盘消除了用户从头开始设置常见变量、面板或查询的必要性。这可以极大地提高用户满意度和效率！