Grafana Panel插件开发实践

前期准备

技术准备：

Angular
grunt
npm

项目准备：

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

环境搭建

安装grafana
将granfana的配置文件grafana.ini中的plugins目录结构修改为自己存放开发插件的目录
了解如何查看grafana log命令：tail -f /var/log/grafana/grafana.log（这个grafana.log是我的log路径）
加入新插件或者更改插件中的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

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

元数据文件有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: [],  // 该插件需要的插件的版本
    }
}

源代码文件，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';