grafana插件开发--diagram快速改造

Grafana是一个美观好用且开源的监控展示工具，包含了丰富的插件供君使用（插件库：https://grafana.com/grafana/plugins）

一准备

1.安装grafana，win开发在官网上下载相对应版本包，解压，运行bin/grafana-server.exe启动grafana，默认访问localhost:3000即可（也可以在/conf/default.ini中修改端口号）。参考文档在这

2.去插件库下载一个与你需求功能相近的插件，这里用的是diagram。

二 改头换面

1.先把插件代码解压修改文件夹名称，放入相应的路径（windows路径是data/plugins，linux是/var/lib/grafana/plugins)

2.打开插件代码文件夹，打开/dist/plugin.json, 先给插件办个身份证。grafana通过该json文件读取插件的信息。

plugin.json里的三个字段必须修改，分别是

• id：相当于身份证号，具备唯一性。
• type ：类型，一般有3种，panel/datasource/app。
• name ：姓名，显示在界面上的名称。最好也唯一，不然同一个班两个同名同学傻傻分不清楚谁是谁。

至此，刷新页面可以看到一个新的插件在界面中了，可以调试了，接下来就将这个插件改造成你想要的样子。

三 怎么改

由于资源有限而且情况允许，我是直接在插件打包好的文件/dist里进行修改，这样就省去了修改后重新打包的步骤。

主要关注/dist中的几个html，js文件：

• module.js ： 插件的入口文件，指定插件导出哪个类。
• diagramcontrol.js : 这个就是导出的类，负责整个插件的生命活动，一些基础方法可以查看grafana插件开发入门
• module.html：这个就是该插件的面板展示页面
• 其余的editor.html都是在grafana上我们可以编辑插件的页面

改造无非就是在html中加入元素（有需要的话），绑定ctrl.panel的相关值，然后在diagramcontrol.js来操作这些绑定值，进而修改渲染的方法或者数据源。

 

参考：

• Grafana 的插件开发
• grafana插件开发入门
• Grafana 插件开发从零到一