これは Elasticsearch Advent Calendar 2015 の記事です。

複数のセンサーデータを取得してfluentd経由でelasticsearchに流して可視化する内容です。構成的にはこんな感じです。

これだけ見れば普通にサクッと出来そうですね。golang/fluentdとセンサー周辺の設定、データ形式やコードについてはこちらの記事を参照。elastic/kibanaは次のような感じです。

elastic : 2.0.0-rc1
kibana : 4.3.0

kibanaについてはgitにある最新版を使ってみました。これは一つにダークテーマを使いたいという、これ１点に尽きます。開発時点ではテーマの選択が出来なくて白い感じので、何となくクールでカッコイイテーマを使いたくて、4.3を使おうとしたらelasticのバージョンも上げないとダメ…という事でどちらも最新版を使ったですね。多分だけど、ダークなテーマが好きって人は多いと思われ。

んでセンサーデータの表示画面はこんな感じで。

照度(光センサーの値)が上がると、電球マークが光る。

そうですね…kibanaのUIというか表示をいじって、インタラクティブな要素を入れています。ってことで、kibanaのざっくりした構成を読み解くと。

実装: NodeJS
グラフ周り : D3
フレームワーク : AngularJS

デバックモードで起動してあげると、コードを修正すると自動でリロードがかかってdeploy&チェックできるという仕組み(その時、js周りの圧縮もかかったりも)だったり、nodejsのmoduleが山ほど入っている。ただ、このNodeJS/D3/AngularJS周りを抑えておけば、独自の改造はどーにかなると思われ。基本的にpluginの形式で、ほとんどのUI(dashboardも)が作られているからね。

んで、このダッシュボードに追加するボックスの単位はlegendという扱いになっていて、中のUIを変更するために src/ui/public/vislib/lib/legend.js にゴリゴリっと手を入れている。他にも手を入れているけど、メインはその周辺あたり。

[その他]
今回、地域毎に大量のダッシュボードを用意した。色んな地域、国にセンサーを置いていて、それ毎にダッシュボードを用意した。

このダッシュボードの追加での対応を楽にしたい!!という欲求があって、色々と試してみたらKibanaの便利機能を発見(というか、ですよねー的な)した。流れとしては、

1. visualization を基本要素(温度、湿度、照度)で作る。
2. Dashboardを作る
3. Dashbaordの”Edit dashboard Object”でクエリーを直接書いて、地域選択

という流れ。これでvisualizationで作る要素を基本要素だけにして、dashboardを用意してちょっとクエリでキーを追加してあげれば完成という流れ。これはメチャクチャ便利だと思った。基本のvisualizationだけ用意すれば、あとの表示要素はどうとでもなるから。

実際の流れは…

1. visualization を基本要素(温度、湿度、照度)で作る。
実際、３つしか作っていない。

2. Dashboardを作る
とりあえず、Dashbaordの”+ボタン”で追加する。

3. Dashbaordの”Edit dashboard Object”でクエリーを直接書いて、地域選択
dashboardの一覧画面の編集から..

んで、IDを設定して完了。

という流れ。表示要素はほぼ同じで、ダッシュボードを大量に作って区別するときは、こんな感じでVisualizationで基本要素を作っておいて、Dashboard側のちょっとした変更でとっても簡単&大量に作ることができる。