Grafana Panel插件開發實踐

前期準備

技術準備：

1. Angular
2. grunt
3. npm

項目準備：

1. grafana提供的plugin開發文檔
2. grafana自帶的樣式庫

環境搭建

1. 安裝grafana
2. 將granfana的配置文件grafana.ini中的plugins目錄結構修改成本身存放開發插件的目錄

   

3. 瞭解如何查看grafana log命令：tail -f /var/log/grafana/grafana.log（這個grafana.log是個人log路徑）
4. 加入新插件或者更改插件中的plugin.json文件時要重啓grafana：brew services restart grafana， grafana掃描plugin.json文件新的插件將自動被發現並註冊，更改插件中的js時，不須要重啓

plugin開發

目錄結構：

├── src
    ├── controller.js
    ├── css
    │   ├── dark.css
    │   └── light.css
    ├── editor
    │   ├── content-editor.html
    │   └── style-editor.html
    ├── img
    │   └── icon.jpeg
    ├── module.html
    └── module.js
├── Gruntfile.js
├── LICENSE
├── README.md
├── package.json
├── plugin.json
複製代碼

插件目錄由兩部分構成，一部分是插件元數據文件，一個是插件源代碼文件。

1. 元數據文件有plugin.json和README.md兩個文件。 plugin.json和package.json概念相似，保存元數據，package.json保存npm安裝時的元數據，plugin.json保存plugin的元數據。Grafana在掃描插件目錄時查找plugin.json文件，並自動註冊插件

plugin.json文件格式

{
    id: '',  // 重要！！！插件的惟一名稱，不能重複！！！id命名約定爲 [github username/org]-[plugin name]-[datasource|app|panel]
    type: 'panel',  // 插件類型，有panel/datasource/app
    name: 'Clock',  // 插件名稱
    info: {
        description: 'Clock panel for grafana',
        author: {
            "name": "Raintank Inc.",
            "url": "http://raintank.io"
        },
        keywords: ["clock", "panel"],
        logos: '',  // 項目的logo
        version: '1.0.0',
        updated: '2015-03-24',
    },
    dependencies: {
        grafanaVersion: '4.x.x',  // 該插件須要的grafana後端版本
        plugins: [],  // 該插件須要的插件的版本
    }
}
複製代碼

2. 源代碼文件，src文件夾下的文件都是源代碼文件，dist文件是用grunt打包後的文件，在Grafana中，若是dist文件夾存在，grafana會從dist文件夾加載代碼，忽略src文件夾內容。如今咱們先忽略dist文件。

• src中的module.js文件很是重要，它是插件加載的起點文件，可是裏面內容很少，主要是導入controller.js，而後導出爲PanelCtrl。

  

• controller.js裏面放了主要的js代碼。

  

• module.html是一個標準的Angular模板，裏面放了插件的panel展現內容。文件名稱不是固定的，html做爲panel展現頁面須要在ctroller裏面綁定一下。

  

• img文件夾內放的圖片資源。

• editor文件夾內放置的自定義的panel編輯模塊的html代碼。 在controller要綁定進行頁面綁定：
  

  

  效果以下：

  

• css文件存放的自定義的樣式文件。有兩種方式來設計插件的樣式，一種是使用grafana自帶的樣式庫，另外一種是使用自定義的樣式庫。使用自定義的樣式庫時要注意適配grafana的dark和light風格。

  

打包測試

如今能夠在項目根目錄下執行grunt命令打包了。若是是第一次加載插件，須要重啓grafana。若是已經加載過該插件，打完包後刷新grafana看效果。

grafana提供的監聽函數有：

init-edit-mode:  // panel的進入編輯狀態時的鉤子函數
panel-teardown:  // clean up時的鉤子函數
data-received:  //在panel接收到數據或更細數據時的鉤子函數
data-snapshot-load:  // 在快照模式下載入數據時的鉤子函數
data-error:  // 在dashboard刷新時發生錯誤時的鉤子函數
複製代碼

使用方式：

this.events.on('init-edit-mode', this.onInitEditMode.bind(this));
複製代碼

grafana提供的sdk中包含三種插件共咱們使用：

import { PanelCtrl } from 'app/features/panel/panel_ctrl';
import { MetricsPanelCtrl } from 'app/features/panel/metrics_panel_ctrl';  // 自動添加"Metrics"度量標準查詢編輯
import { QueryCtrl } from 'app/features/panel/query_ctrl';
複製代碼