我们可以开发任何数据库的插件,插件通过http协议与数据库进行通信。
项目目录结构
├── src
├── css
├── img
│ └── server-logo.png
├── module
│ ├── annotationsQueryCtrl.js
│ ├── configCtrl.js
│ ├── datasource.js
│ ├── queryCtrl.js
│ └── queryOptionsCtrl.js
├── module.js
├── page
│ ├── annotationsQuery.html
│ ├── config.html
│ ├── query.html
│ └── queryOptions.html
└── plugin.json
├── Gruntfile.js
├── README.md
├── package.json
复制代码
元数据文件有plugin.json
和README.md
两个,Gruntfile.js
是grunt工具的元数据文件,这三个文件就不多少了。 datasource plugin的主要源码在src文件中,css文件夹存放样式文件,img文件夹放图片文件,也可以直接略过。 剩下的是module文件夹、page文件夹、module.js文件和plugin.json文件。
plugin.json文件
在plugin.json文件中,有两个关于datasource特定的设置,其中一个必须为true
"metrics": true, // 是否在panel中支持metrics
"annotations": false, // 在dashboard中支持annotations查询
复制代码
plugin.json保存plugin的元数据,Grafana在扫描插件目录时查找plugin.json文件,并自动注册插件,文件中的内容会被提取并封装成对象使用。 plugin.json文件示例:
{
"name": "代理服务端",
"id": "grafana-server-datasource",
"type": "datasource",
"metrics": true,
"annotations": true,
"info": {
"description": "代理服务端作为数据源",
"author": {
"name": "liuchunhui",
"url": "https://grafana.com"
},
"logos": {
"small": "img/server-logo.png",
"large": "img/server-logo.png"
},
"links": [
{"name": "Github", "url": ""},
{"name": "MIT License", "url": ""}
],
"version": "1.0.0",
"updated": "2018-04-23"
},
"dependencies": {
"grafanaVersion": "3.x.x",
"plugins": []
}
}
复制代码
module.js
module.js文件非常重要,它是插件加载的起点文件。与Grafana的其余部分进行交互,插件文件需要导出以下5个模块:
Datasource // Required
QueryCtrl // Required
ConfigCtrl // Required
QueryOptionsCtrl //
AnnotationsQueryCtrl //
复制代码
所以在module中,负责导出这五个模块。 module.js文件代码示例:
import GenericAnnotationsQueryCtrl from './module/annotationsQueryCtrl';
import GenericConfigCtrl from './module/configCtrl';
import GenericDatasource from './module/datasource';
import GenericQueryCtrl from './module/queryCtrl';
import GenericQueryOptionsCtrl from './module/queryOptionsCtrl';
export {
GenericAnnotationsQueryCtrl as AnnotationsQueryCtrl,
GenericConfigCtrl as ConfigCtrl,
GenericDatasource as Datasource,
GenericQueryCtrl as QueryCtrl,
GenericQueryOptionsCtrl as QueryOptionsCtrl
};
复制代码
module文件夹
│ ├── annotationsQueryCtrl.js
│ ├── configCtrl.js
│ ├── datasource.js
│ ├── queryCtrl.js
│ └── queryOptionsCtrl.js
复制代码
这五个文件对应module.js需要导出的五个模块,将来会被转换为五个angular的控制器。
page文件夹
│ ├── annotationsQuery.html
│ ├── config.html
│ ├── query.html
│ └── queryOptions.html
复制代码
这四个文件对应module文件夹下annotationsQueryCtrl
、configCtrl
、queryCtrl
、queryOptionsCtrl
四个模块需要绑定的页面模板, datasource
模块不需要页面模板。
下一篇详细介绍在开发中的内容Grafana的Datasource插件开发实践二