Grafanaデータソースプラグインの作り方[その1]
この記事では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を実装したいと思います。
この記事が気に入ったらサポートをしてみませんか?