CasperJSを使ってGrafanaのグラフのスクリーンキャプチャを撮る

最近はサーバのメトリクス収集にPrometheus，その可視化の為のフロントエンドとしてGrafanaをハードに使っている．Grafanaは予想よりもはるかに格好良いグラフが生成されるのでやる気が出て良い．デモを触るとなんとなく温度感がわかると思う．
そうしているうちに，これは便利なのでサーバのメトリクス以外の情報も入れてみましょうという発想があり，サービスのKPIに関するような情報も入れ始めている．
とまあここまでは良いのだけれど，そうやって収集したデータも，格好良く可視化したグラフも，人に見られなければ一切の意味が無いのでそうした無意味を避けるためにデイリーでグラフを社内チャットに放流することにした．

という事になるとGrafanaで描画したグラフを画像としてエクスポートする必要が出てくる．
Grafanaにはグラフを画像としてシェアする機能があるのだけれど，これはブラウザをポチポチする必要があるみたいで，APIもぱっと見つからなかった (もしあったら教えて下さい) ので利用を見送った．あとどうやらこの画像データはSQLiteに入るみたいでホイホイ使って良いのかどうかあまり判断が付かなかった (間違ってたら教えて下さい)．
というわけで今回はCasperJSを使ってGrafanaのグラフをキャプチャすることにした (結局CasperJS使うんだったらそれでGrafanaの画像シェア機能をポチポチすれば良かったんではないか，という意見もあることだろう．確かに！)．
CasperJSはご存知の通りPhantomJS (かSlimerJS) を使ってスクレイピングやテストの実行をするのを助ける便利ライブラリ．CSS セレクタで指定すると，その範囲だけスクリーンキャプチャを撮ってくれるという機能があって大変便利なので使うことにした．

以下の様な感じでキャプチャが撮れる．

var casper = require('casper').create();

// login処理
casper.start('https://your-grafana.example.com/dashboard/db/your-dashboard?from=now-24h', function () {
    this.fill('div.login-inner-box > form', {
        username: 'Grafana user name',
        password: 'Grafana password',
    }, true);
});
casper.then(function () {
    this.click('div.gf-form-button-row > button');
});

// キャプチャ撮る
var waitMillis = 2000;
casper.viewport(1536, 1536).wait(waitMillis, function () {
    this.captureSelector('capture.png', 'div.grafana-row');
});

casper.run();

ログイン処理の部分は最初にfillしてからログインボタンをclickするように書いてある．シンプルなフォームだとfillの部分だけで認証が通るのだけれど，Grafanaはリッチな感じ (buttonのng-clickで処理が走るっぽい) なのでマニュアルでclickする処理を入れている．
認証が通ったらキャプチャを撮る処理を走らせる．ここで即座にキャプチャを撮ってしまうとグラフが未描画の場合があるので，気持ち待ってからキャプチャを撮る処理を開始している (例だと2秒)．

で，これらをやる上で考えるべき点としては

グラフの時間スケール
viewportのサイズ
対象となるグラフのCSS セレクタ

というのが挙げられる．

グラフの時間スケールと言うのは，どの時間スケール (直近5分とか直近24時間とか) のグラフを取得するかという点．Grafanaは時間スケールの情報はダッシュボード自身と紐付いていて，自分あるいは自分以外のユーザが時間スケールを変更すると全てのユーザに影響する．
そうした状態で時間スケールを特に指定せずにグラフを取得してキャプチャを撮ってしまうとめちゃくちゃになってしまうのでちゃんと指定してやる必要がある，という感じ．
例で言う所の https://your-grafana.example.com/dashboard/db/your-dashboard?from=now-24h の ?from=now-24h の部分がそれに当たる．

viewpointのサイズというのはCasperJSの話．要は仮想的なブラウザの大きさをどうするかみたいなもので，デフォルトの状態のままだとかなり小さめに設定されている．従ってほぼ確実に調整が必要になる部分だと思う．
Grafanaのグラフの大きさはブラウザの画面サイズに応じて可変なので，良い感じの数値を探っていくという泥臭い作業が要求されるのだけれど，まあ適当に妥協しましょう．

対象となるグラフのCSS セレクタというのは若干厄介．
今回は div.grafana-row というのを指定しているのだけれど，これはGrafanaのダッシュボードのrowそのものを表しているので，そのrowに属するグラフ等のパネルを全てキャプチャできる．
div.panel-container というのを指定すると個別のパネルをキャプチャできるので，用途に応じて使い分けると良い……という感じなのだがそう簡単には済まない．
なぜかというと，例えばrowが2つ有ると div.grafana-row というCSS セレクタも2つhtmlに表れてしまう為，先に出た方が優先されてしまう．つまりどちらか片方しかキャプチャができない．id要素などが付いているわけではない，本当に同一のCSS セレクタが出てきてしまうので面倒くさい……という感じ．もちろんパネルが複数個あればその個数分だけ div.panel-container が出てくるので問題は変わらない．
まあここら辺をなんとかする方法としては

気合
キャプチャ用のダッシュボードを新たに作る

などといった解決方法があるので頑張れば問題がない．頑張りましょう．

こんな感じでGrafanaのグラフをキャプチャできるようになった．それを社内Gyazoに投げつけた上で社内チャットに毎日放流するという事が自動行えるようになって便利！
なお自動化はcronでやってます．

その手の平は尻もつかめるさ

ギジュツ的な事をメーンで書く予定です

CasperJSを使ってGrafanaのグラフのスクリーンキャプチャを撮る