Grafana的Datasource外掛開發實踐一

劉春輝同學發表於2019-03-02
Grafana

我們可以開發任何資料庫的外掛，外掛通過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外掛開發實踐二

相關文章