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插件開發實踐二