Smoothie ChartsとBottleを使ったリアルタイムパフォーマンスモニタ

今週はシルバーウィーク。 しばらく楽しくプログラムを書いてなかったし、 せっかくの長い休みなので、単にイカで遊び呆けるだけじゃなくて、 ちょっとしたものを工作してみようと思い立った。

サマリ

Smoothie ChartsとBottleを使って、こんな感じのものができた。 f:id:nbisco:20150923214841p:plain

ソースコードはここ。READMEはまだ。。。 github.com

使い方

以下の通り立ち上げて、ブラウザでアクセスすれば上記画像のような画面が現れる(はず)。 mpstat、iostat、vmstat、sarを使うので、sysstatをaptとかで入れておく。

$ sudo aptitude install sysstat
$ git clone https://github.com/bisco/easy_perfmon.git
$ cd easy_perfmon
## 引数なしだとPort 8080をListenして立ち上がる。引数あげるとそのPort番号をListenして立ち上がる。
$ python easy_perfmon.py

経緯

Linuxサーバの負荷状況を見るツールはいろいろあるわけだけど、 CUIなのでいかんせん味気ない。グラフとして見えたほうがいいよね、ということで、 Linuxサーバの負荷状況を可視化することにした。

単に可視化するだけじゃなく、どうせならリアルタイムに負荷を見たい。 ということで、リアルタイムに負荷状況が見えるツールを作ることにした。

使ったライブラリ

Smoothie Charts

お手軽に可視化するにはブラウザ+Javascriptの組み合わせが一番(だと思う)。 なので、Javascriptで簡単にリアルタイムなグラフが描けるSmoothie Chartsを選んだ。 Smoothie Chartsは大変シンプルで、設定できる項目もあまりないんだけど、 その分簡単に使えるのがよいところ。 本家サイトに行けば、コードジェネレータ(!)があるので、 それを使いながら見た目の調整ができる。何とも楽ちん。

Bottle

BottleはPythonで書かれたweb frameworkの1つで、 非常にシンプルで簡単に使えるのが特徴。

今回は、主にSmoothie Chartsにデータを渡すために使用。 mpstatやiostatなどの結果をJSONに変換して、httpでアクセスできるようにした。

bootstrap

おなじみbootstrap。見た目調整のために使用。

プログラムのおおよその構造

JavascriptでBottleから定期的にJSONを取得し、Smoothie Chartsに渡しているだけ。 定期取得の部分はjQueryのAJAX関数を使って実装した。

はまったところ

AJAXで同期的に情報を取ろうとしてはまった。 AJAXは基本非同期動作なので、同期的に情報を取るときは、明示的に同期動作にしてやらないといけない。

$.ajaxSetup({ async: false }); 
$.getJSON(); 
$.ajaxSetup({ async: true });

まとめと感想

Smoothie ChartsとBottleでお手軽にLinuxの負荷状況を可視化するツールを作った。 グラフィカルに見えるものを作るのは大変でもあり、楽しくもあり、って感じでした。