跳转到主要内容

使用应用程序插件包含仪表板

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

我们将引导您将仪表板打包到插件中的过程。这个过程包括创建仪表板，将其添加到您的插件中，然后将其导入到插件中。您还可以可选地添加导航链接，使用户更容易发现其所有功能。

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

结论​

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