Node.js + blessed-contribでCUIダッシュボードを作る

はじめに

佐々木です。昨晩早く寝過ぎて朝4時に起きてしまい、仕方がないのでブログを書き始めました。

先週JAWS-UGコンテナ支部 #3に参加したのですが、AWSJ岩永さんがデモでblessed-contribを使ったCUIダッシュボードを見せてくださいました。また、先日開催された「AWSモバイル/IoTサービス徹底攻略！！〜Developers.IO Meetup番外編〜」の中で行われたIoTハンズオンでも、AWSJ吉田さんがblessed-contribを使っていました。

これ、カッコイイし、なんか流行ってるっぽいので、やってみたい！と意気込んでやってみたのがこのブログ記事になります。

やってみた

環境はMac OS X(Yosemite)です。node.jsとnpmはHomebrewでインストール済みとします。

blessed-contribのインストール

gitリポジトリをcloneし、npmでインストールします。

$ git clone https://github.com/yaronn/blessed-contrib.git
$ cd blessed-contrib
$ npm install -g

動かしてみる

こんなスクリプトを書いてみました。Gridで上下2画面を作成し、上部はLine Chartで過去5分間のCPUロードアベレージを、下部はRolling Logでuptimeの実行結果を表示します。

require('date-utils');

var execSync = require('child_process').execSync;
var linecmd = "uptime | sed -e 's/.*average: //g' -e 's/,//g' | awk '{print $11}'";
var logcmd = "uptime";

var blessed = require('blessed')
  , contrib = require('blessed-contrib')
  , screen = blessed.screen()
  , grid = new contrib.grid({rows:12, cols:12, screen: screen})
  , lineData = {x:[], y:[]};

// Set Grid
var line = grid.set(0, 0, 6, 12, contrib.line,
             { style:
               { line: "yellow"
               , text: "green"
               , baseline: "black"
               }
               , xLabelPadding: 3
               , xPadding: 5
               , label: 'CPU Load Average(5min)'
             }
           )

var log = grid.set(6, 0, 6, 12, contrib.log,
            { fg: "green"
            , label: 'uptime'
            , height: "30%"
            , tags: true
            , border: {type: "line", fg: "cyan"}
            }
          )

// Write Line
line.setData(lineData);

screen.key(['escape', 'q', 'C-c'], function(ch, key) {
  return process.exit(0);
});

setInterval(function() {
  var date = new Date();
  lineData.y.push(execSync(linecmd));
  lineData.x.push(date.toFormat("SS"));
  line.setData(lineData);

  screen.render();

}, 1000);

// Write Log
setInterval(function() {
  log.log("uptime: " + execSync(logcmd));
  screen.render();
}, 1000);

動かした結果

こんな感じになります。カッコいい！

さいごに

とりあえず動かし方はわかりました。これでAWS SDKと組み合わせてカッコいいダッシュボードを作りたいです。今度チャレンジします！