Grafana Panel插件开发实践

前期准备

技术准备：

1. Angular
2. grunt
3. npm

项目准备：

1. grafana提供的plugin开发文档
2. grafana自带的样式库

环境搭建

1. 安装grafana
2. 将granfana的配置文件grafana.ini中的plugins目录结构修改成本身存放开发插件的目录

   

3. 了解如何查看grafana log命令：tail -f /var/log/grafana/grafana.log（这个grafana.log是个人log路径）
4. 加入新插件或者更改插件中的plugin.json文件时要重启grafana：brew services restart grafana， grafana扫描plugin.json文件新的插件将自动被发现并注册，更改插件中的js时，不须要重启

plugin开发

目录结构：

├── src
    ├── controller.js
    ├── css
    │   ├── dark.css
    │   └── light.css
    ├── editor
    │   ├── content-editor.html
    │   └── style-editor.html
    ├── img
    │   └── icon.jpeg
    ├── module.html
    └── module.js
├── Gruntfile.js
├── LICENSE
├── README.md
├── package.json
├── plugin.json
复制代码

插件目录由两部分构成，一部分是插件元数据文件，一个是插件源代码文件。

1. 元数据文件有plugin.json和README.md两个文件。 plugin.json和package.json概念相似，保存元数据，package.json保存npm安装时的元数据，plugin.json保存plugin的元数据。Grafana在扫描插件目录时查找plugin.json文件，并自动注册插件

plugin.json文件格式

{
    id: '',  // 重要！！！插件的惟一名称，不能重复！！！id命名约定为 [github username/org]-[plugin name]-[datasource|app|panel]
    type: 'panel',  // 插件类型，有panel/datasource/app
    name: 'Clock',  // 插件名称
    info: {
        description: 'Clock panel for grafana',
        author: {
            "name": "Raintank Inc.",
            "url": "http://raintank.io"
        },
        keywords: ["clock", "panel"],
        logos: '',  // 项目的logo
        version: '1.0.0',
        updated: '2015-03-24',
    },
    dependencies: {
        grafanaVersion: '4.x.x',  // 该插件须要的grafana后端版本
        plugins: [],  // 该插件须要的插件的版本
    }
}
复制代码

2. 源代码文件，src文件夹下的文件都是源代码文件，dist文件是用grunt打包后的文件，在Grafana中，若是dist文件夹存在，grafana会从dist文件夹加载代码，忽略src文件夹内容。如今咱们先忽略dist文件。

• src中的module.js文件很是重要，它是插件加载的起点文件，可是里面内容很少，主要是导入controller.js，而后导出为PanelCtrl。

  

• controller.js里面放了主要的js代码。

  

• module.html是一个标准的Angular模板，里面放了插件的panel展现内容。文件名称不是固定的，html做为panel展现页面须要在ctroller里面绑定一下。

  

• img文件夹内放的图片资源。

• editor文件夹内放置的自定义的panel编辑模块的html代码。 在controller要绑定进行页面绑定：
  

  

  效果以下：

  

• css文件存放的自定义的样式文件。有两种方式来设计插件的样式，一种是使用grafana自带的样式库，另外一种是使用自定义的样式库。使用自定义的样式库时要注意适配grafana的dark和light风格。

  

打包测试

如今能够在项目根目录下执行grunt命令打包了。若是是第一次加载插件，须要重启grafana。若是已经加载过该插件，打完包后刷新grafana看效果。

grafana提供的监听函数有：

init-edit-mode:  // panel的进入编辑状态时的钩子函数
panel-teardown:  // clean up时的钩子函数
data-received:  //在panel接收到数据或更细数据时的钩子函数
data-snapshot-load:  // 在快照模式下载入数据时的钩子函数
data-error:  // 在dashboard刷新时发生错误时的钩子函数
复制代码

使用方式：

this.events.on('init-edit-mode', this.onInitEditMode.bind(this));
复制代码

grafana提供的sdk中包含三种插件共咱们使用：

import { PanelCtrl } from 'app/features/panel/panel_ctrl';
import { MetricsPanelCtrl } from 'app/features/panel/metrics_panel_ctrl';  // 自动添加"Metrics"度量标准查询编辑
import { QueryCtrl } from 'app/features/panel/query_ctrl';
复制代码