簡(jiǎn)介
Panels能夠幫助我們通過不同的方式可視化數(shù)據(jù)，grafana里面已經(jīng)集成了一些panel，但是我們也可以自定義開發(fā)panel，來支持一些官方panel插件不支持的顯示。
準(zhǔn)備工作
- 安裝grafana
- 安裝nodejs 12.x
- 安裝yarn
npm install yarn -g
環(huán)境配置
在開發(fā)grafana插件之前，我們先需要配置好grafana的配置環(huán)境
grafana將會(huì)掃描插件目錄，其具體的地址取決于讀者的操作系統(tǒng)
在讀者電腦新建一個(gè)文件夾
grafana-plugins，該目錄未來為開發(fā)插件的工作目錄-
找到在配置文件（/path/to/grafana/conf/defaults.ini）內(nèi)的
plugins屬性，屬性值修改成為工作目錄的路徑[paths] plugins = "/path/to/grafana-plugins" # plugins = D:/grafana-plugins 重啟grafana加載配置
linux平臺(tái)，systemctl restart grafana-server
windows平臺(tái)，任務(wù)管理器-》服務(wù)-》grafana 右鍵重新啟動(dòng)
也可以通過docker 啟動(dòng)grafana，具體命令如下：
docker run -d -p 3000:3000 \
-v "$(pwd)"/grafana-plugins:/var/lib/grafana/plugins \
--name=grafana grafana/grafana:7.2.0
如果重新添加插件之后需要重啟grafana
docker restart grafana
創(chuàng)建一個(gè)新的插件
# 進(jìn)入插件工作目錄
cd /path/to/grafana-plugins
# 創(chuàng)建插件
npx @grafana/toolkit plugin:create my-plugin
cd my-plugin
# 下載必要的依賴
yarn install
# 編譯插件
yarn dev
# 重啟grafana 啟用插件，這時(shí)打開grafana,檢查configuration -> plugins，確保系統(tǒng)加載了該插件
插件剖析
具體插件的代碼都不盡相同，但是在我們深入研究之前，我們先看看各個(gè)插件共性的部分，每個(gè)插件都有plugin.json和module.ts 這2個(gè)文件。
plugin.json
grafana開始的時(shí)候，將會(huì)掃描plugin文件夾下所有子文件下都包含一個(gè)plugin.json文件，該文件包含plugin的基本信息，告訴grafana該插件的類型、能力以及依賴：
-
type類型，grafana支持panel,datasource和app -
name用戶在插件list中看到的插件名字 -
id插件的唯一表示，為了避免和其他插件沖突，最好該名字是grafana賬戶名開始，可在官網(wǎng)注冊(cè)你的用戶名
更多的plugin.json配置，請(qǐng)查看官網(wǎng)
module.ts
grafana讀取了插件的信息之后，需要加載插件，module.ts文件既為加載插件的入口文件，module.ts暴露了插件的實(shí)現(xiàn)。
module.ts需要實(shí)現(xiàn)如下三個(gè)類之一
panel 插件
從grafana 6開始panel插件使用reactJS組件實(shí)現(xiàn)
panel屬性
PanelProps 接口暴露panel的運(yùn)行信息，如輪廓尺寸、當(dāng)前的時(shí)間區(qū)間。
我們可以通過props屬性訪問panel屬性
src/SimplePanel.tsx
const { options, data, width, height } = props;
開發(fā)流程
下面我們來學(xué)習(xí)如何開發(fā)自己的panel的基本流程，編譯grafana然后重啟grafana來生效我們的改動(dòng)
首先我們需要添加panel到dashboard上：
- 在瀏覽器上打開grafana.
- 創(chuàng)建一個(gè)新的dashboard，添加一個(gè)新的pannel.
- 從visualizaion類型中選擇panel類型.
- 保存dashboard.
現(xiàn)在我們可以看在頁面上看到該panel，嘗試著修改panel的代碼:
- 修改文件
SimplePanel.tsx中圓的顏色. - 運(yùn)行
yarn dev編譯插件. - 在瀏覽器重新加載，即可看到改變（無需重啟grafana）
添加panel配置
有時(shí)，我們想為用戶提供一些可配置的行為，這時(shí)需要panel有參數(shù)輸入的能力，具體步驟如下：
添加一個(gè)配置項(xiàng)
SimpleOptions 是一個(gè)用來描述panel 配置對(duì)象的一個(gè)對(duì)象。
在types.ts內(nèi)添加一個(gè)CircleColor 類型來保存用戶可以選擇的顏色，并在SimpleOptions 內(nèi)添加color顏色
type SeriesSize = 'sm' | 'md' | 'lg';
type CircleColor = 'red' | 'green' | 'blue';
export interface SimpleOptions {
text: string;
showSeriesCount: boolean;
seriesCountSize: SeriesSize;
color: CircleColor;
}
添加一個(gè)配置控制面板
為了可以配置panel編輯器，我們需要綁定顏色選項(xiàng)和顏色控制器。
grafana支持范圍控制器、text輸入、開關(guān)和radio groups
該場(chǎng)景我們創(chuàng)建一個(gè)radio控制器然后綁定可選顏色。
修改文件 src/module.ts,末尾添加如下builder:
.addRadio({
path: 'color',
name: 'Circle color',
defaultValue: 'red',
settings: {
options: [
{
value: 'red',
label: 'Red',
},
{
value: 'green',
label: 'Green',
},
{
value: 'blue',
label: 'Blue',
},
],
}
});
path熟悉用來綁定這個(gè)control到option，我們也可以綁定一個(gè)嵌套的控制器，在控制器內(nèi)options屬性聲明對(duì)應(yīng)對(duì)象即可，如：colors.background.
Grafana builds an options editor for you and displays it in the panel editor sidebar in the Display section.
配置參數(shù)的使用
在SimplePanel.tsx文件中添加參數(shù)的在圖形的應(yīng)用。
src/SimplePanel.tsx
let color: string;
switch (options.color) {
case 'red':
color = theme.palette.redBase;
break;
case 'green':
color = theme.palette.greenBase;
break;
case 'blue':
color = theme.palette.blue95;
break;
}
Configure the circle to use the color.
<g>
<circle style={{ fill: color }} r={100} />
</g>
完整的工程請(qǐng)查看：
