grafanaメモ（Plugin）

grafanaのプラグインを見てみる。

公式＆コミュニティが公開するプラグイン
Grafana Plugins - extend and customize your Grafana. | Grafana Labs

プラグインのタイプ（dist/Plugin.jsonで定義）は

• datasource
• app
• panel

のいずれかになる。

Developer Guide | Grafana Labs

The type field should be either datasource app or panel.

プラグインのインストールには「grafana-cli」コマンドを使う。
（アップデートや、特定のバージョンを指定することもできる）
Installing Plugins | Grafana Labs

grafana-cli plugins install <plugin-id>

インストールしたプラグインは「/var/lib/grafana/plugins」配下に置かれる。

dockerコンテナに作成中プラグインのディレクトリをマウントさせる使い方もできる。
以下は「panel」タイプのプラグインであるclock-panelをコンテナ上で使う例。

docker run -p 3000:3000 -d --name grafana-plugin-dev --volume $(pwd)/dist:/var/lib/grafana/plugins/clock-panel grafana/grafana

「clock-panel」プラグインを使ってダッシュボードを作成し、ブラウザからHTMLを確認してみる。
class名が「panel-container」であるdiv要素の下にプラグインの要素が埋め込まれている。

GitHub - grafana/clock-panel: Clock Panel Plugin for Grafana

続いて、Developer guideをもとに、grafanaの内部構成を確認してみる。
grafana/developer-guide.md at master · grafana/grafana · GitHub

Grafana consists of two components; the frontend, and the backend.

2つのコンポーネント「Frontend」と「Backend」から構成される。

Frontend

Node.jsを使う。
そして、「webpack」、「React」、「Grunt」、「babel」などのモジュール群。

Frontend assetのbuildの流れ。

yarn install --pure-lockfile
yarn start

package.json

ソース全体

  "scripts": {
    ...
    "start": "grafana-toolkit core:start --watchTheme",
    ...

プラグイン開発のためのCLIであるgrafana-toolkitを実行する。

packages/grafana-toolkit/package.json

ソース全体

{
  ...
  "bin": {
    "grafana-toolkit": "./bin/grafana-toolkit.js"
  },

packages/grafana-toolkit/bin/grafana-toolkit.js

ソース全体

require('../src/cli/index.ts').run(true);

packages/grafana-toolkit/src/cli/index.ts

ソース全体

import program from 'commander';
...
import { startTask } from './tasks/core.start';
...
export const run = (includeInternalScripts = false) => {
  if (includeInternalScripts) {
    ...
    program
      .command('core:start')
      ...
      .option('-t, --watchTheme', 'Watch for theme changes and regenerate variables.scss files')
      ...
      .action(async cmd => {      
         await execTask(startTask)({
           watchThemes: cmd.watchTheme,
           ...

ここからnodemon、webpackを実行する。

packages/grafana-toolkit/src/cli/tasks/core.start.ts

ソース全体

...
const startTaskRunner: TaskRunner<StartTaskOptions> = async ({ watchThemes, noTsCheck, hot }) => {
  ...
  const jobs = [
    watchThemes && {
      command: 'nodemon -e ts -w ./packages/grafana-ui/src/themes -x yarn run themes:generate',
      name: 'SASS variables generator',
    },
    hot
      ? {
          command: 'webpack-dev-server --progress --colors --config scripts/webpack/webpack.hot.js',
          name: 'Dev server',
        }
      : {
          command: `webpack --progress --colors --watch --env.noTsCheck=${noTsCheckArg} --config scripts/webpack/webpack.dev.js`,
          name: 'Webpack',
        },
  ];
  ...
};

export const startTask = new Task<StartTaskOptions>('Core startTask', startTaskRunner);

Backend

Backendはgolangで書かれている。
プラグイン開発時の実行コマンド。

make run

Makefile

ソース全体

GO = GO111MODULE=on go
...
scripts/go/bin/bra: scripts/go/go.mod
	@cd scripts/go; \
	$(GO) build -o ./bin/bra github.com/unknwon/bra

run: scripts/go/bin/bra ## Build and run web server on filesystem changes.
	@GO111MODULE=on scripts/go/bin/bra run

Bra (Brilliant Ridiculous Assistant)を実行して変更をモニタリングする。

実行時のconfig（.bra.toml）
ソース全体

watch_dirs = [                   # Directories to watch
	"$WORKDIR/pkg",
	"$WORKDIR/public/views",
	"$WORKDIR/conf",
]
watch_exts = [".go",
              ".ini",
              ".toml",
              ".template.html"]  # Extensions to watch

build_delay = 1500               # Minimal interval to Trigger build event