Grafanaデータソースプラグインの作り方[その１]

この記事ではGrafanaのデータソースプラグインの作成方法を紹介します。例題としてGrafanaからOpenWeatherMap APIをアクセスして世界の天気の可視化してみます。今回は長くなるので空のプラグインを作成してロードするところまでです。

背景

データの可視化にGrafanaを使われている方は多いと思います。Grafanaは様々なデータベースに接続可能なように、多数のプラグインが用意されていますが、特殊なデータベースやAPIの場合既存のプラグインが利用できないこともあるでしょう。そんな時データソースプラグインを開発すれば問題解決です。

プラグインはTypeScriptで書き、Reactを使います。現在GrafanaプロジェクトはAngularからReactに移行しつつあります。プラグインについてググるとAngularやJavaScriptで書かれた記事が見つかると思います。それらは現在でも動きますが、古い方法ですので注意してください。

環境

・Grafana 6.7

・Mac OS

・ TypeScript, yarn

準備

まずは必要なアプリをインストールします。grafana toolkitが今回の記事の肝で、Grafanaプロジェクトのコード規約に従ったプラグインをテンプレートから一気に作ってくれます。

brew install grafana
brew install yarn
yarn global add @grafana/toolkit

次にプラグインプロジェクトのディレクトリを作成します。~/goの下に作成するのは、後々紹介するアラート機能がGo言語で実装されるためです。今は気にしなくて良いですし、アラート機能が不要であればどこでも構いません。

mkdir ~/go/src/github.com/knoguchi/openweathermap-datasource

プラグイン作成

カレントディレクトリを移し、toolkitを起動します。

cd ~/go/src/github.com/knoguchi/openweathermap-datasource
/usr/local/bin/grafana-toolkit

Datasourceを選択し、適当に質問に答えていきます。

? Select plugin type Datasource plugin
✔ Fetching plugin template...
? Plugin name penweathermap-datasource
? Organization (used as part of plugin ID) knoguchi
? Description OpenWeatherMap datasource
? Keywords (separated by comma) weather
? Author (Kenji Noguchi) Yes
? Your URL (i.e. organisation url) https://github.com/knoguchi
   Your plugin details
   ---
   Name:  openweathermap-datasource
   ID:  knoguchi-openweathermap-datasource
   Description:  OpenWeatherMap datasource
   Keywords:  [ 'weather' ]
   Author:  Kenji Noguchi
   Organisation:  knoguchi
   Website:  https://github.com/knoguchi
? Is that ok? Yes
✔ Saving package.json and plugin.json files
✔ Cleaning

これでビルド可能なプラグインのソースができました。ディレクトリの中身はこんな感じです。

.
├── .circleci
├── .gitignore
├── .prettierrc.js
├── LICENSE
├── README.md
├── appveyor.yml
├── coverage
│   └── junit.xml
├── package.json
├── src
│   ├── ConfigEditor.tsx
│   ├── DataSource.ts
│   ├── QueryEditor.tsx
│   ├── img
│   │   └── logo.svg
│   ├── module.test.ts
│   ├── module.ts
│   ├── plugin.json
│   └── types.ts
├── tsconfig.json
└── yarn.lock

.prettierrcはPrettierコードフォーマッタの設定ファイルで、ビルドする度にフォーマッタが走り、Grafanaプロジェクト標準の書式に整形してくれます。

*.test.tsはJestによるユニットテストです。

circleciはCircleCI社のCI/CD環境の設定ファイルですが、有料なため使える人は少ないでしょう。

この時点でgitにチェックインしましょう。

git init
git add -A
git status
git commit -m "initial commit"

ビルド

yarn installで依存関係にあるモジュールをインストールし、ビルドを実行します。

yarn install
yarn build

Prettier、Jest、コンパイル、ミニファイが走り、distディレクトリにプラグインが出来上がっているはずです。

.
├── LICENSE
├── README.md
├── img
│   └── logo.svg
├── module.js
├── module.js.map
└── plugin.json

ちなみにyarnのターゲットはbuildのほか、test, dev, watchがあります。

・test ユニットテストのみの実行

・dev ミニファイしていないプラグインの作成。ブラウザのデバッガでソースがみられる。

・watch ファイルシステムを監視して、ソースに変更があれば自動的にdev

プラグインのロードと実行

Grafanaのpluginsディレクトリからプロジェクトのディレクトリへシンボリックリンクを張り、ロードしてみます。初回に限りGrafanaの再起動が必要なようです。

cd /usr/local/var/lib/grafana/plugins
ln -s ~/go/src/github.com/knoguchi/openweathermap-datasource
brew services restart grafana

http://localhost:3000/datasources/new をアクセスしてみるとプラグインが見つかるはずです。

ダッシュボードを作成して、グラフパネルを追加すると、今作成したデータソースが選択可能になっています。

ConstantとQuery Textはtoolkitが作成したデモです。このデータソースはまだ何もできません。

今回のまとめ

grafana-toolkitを使いテンプレートから、プラグインプロジェクトを作成する方法を紹介しました。ビルド手順が標準化されているため、品質の向上が期待できます。

・Prettierによりコードの書式整形

・tslintによるリント (注意: Grafana 7.0以降はtslintではなくeslintに変更)

・Jestによるユニットテスト

・ミニファイ

次回はOpenWeatherMapのAPIを実装したいと思います。