跳到主要内容

在应用插件中包含仪表盘

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

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

步骤 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"
        }
      ]
    }
    信息

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

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

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

应用插件可以通过在 plugin.json 中添加导航链接来增强用户导航。include 的路径应该引用捆绑的仪表盘的 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"
    }
  ]
}

结论​

通过将仪表盘与你的应用插件打包，你可以显著改善用户入门体验。预配置的仪表盘消除了用户从头开始设置常见变量、面板或查询的需求。这可以极大地提高用户满意度和效率！