Grafana的Datasource插件开发实践一

我们可以开发任何数据库的插件，插件通过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插件开发实践二

转载于:https://juejin.im/post/5addbcbd5188256715474452