Dashingで簡単にダッシュボードを作る方法

 2014/03/17
このエントリーをはてなブックマークに追加

全国1億2000万人のImmutable Infrastructure好きの皆様こんばんは。

去年あたりに色々な場所で紹介されたりして知っている人が多いと思うのですが、簡単に自分用にダッシュボードを作れるDashingが結構使いやすいので改めて紹介しておきます。APIを用意しているミドルウェアやシステムであれば簡単にデータを引っ張ってきてゴニョゴニョできます。

Dashingとは

http://shopify.github.io/dashing/で公開されているSinatraベースで作られたダッシュボード作成用のフレームワーク。 非常に見た目の良いダッシュボードが作れます。デモは、こちらで公開されています。 ウィジェット型のアーキテクチャーのため、色々なダッシュボード用のパーツを独立して作成し、自由に配置することができること、データを自動で更新できること等も特徴です。

インストール

Dashingを動作させるためにはRuby 1.9以上が必要です。それだけあれば簡単に動作させることが出来ます。なお本番環境で使う場合はnginxやpassengerなんかと組み合わせたりすることになるでしょう。

(1) 必要なライブラリのインストール

gem install dashing

(2) プロジェクトの作成(プロジェクト名は自分の好きなものを設定)

dashing new sample_project

(3) プロジェクトディレクトリに移動してその他に必要なgemをインストール

bundle

(4) 実行

dashing start

(5) http://localhost:3030/ にアクセス。こんな画面が表示されれば無事動作していることになる

ディレクトリ構成

Dashingのディレクトリ構成はいたってシンプルですが、以下に主なディレクトリとその用途を紹介します。

assets

画像やCSSなどを配置する

dashboards

ダッシュボードのレイアウトを決めるためのerbファイルを配置する

widgets

ダッシュボードで利用する各部品を配置する。この中は更にウィジェットごとにサブディレクトリがある。デフォルトでは、clock、comments、graph、iframe、list、meter、number、text が用意されている。もちろん自分で作成することも可能

jobs

データ等を自動で定期的に取得し、ウィジェットに対してデータを送信するためのジョブファイルを配置する。デフォルトで配置されている4つのジョブはいずれもダミーのジョブだが、もちろん自分で作成すればOK。このディレクトリの中に配置したジョブは自動で実行される

lib

共通ライブラリを配置する

public

公開用の静的ファイル(html)を配置する

ウィジェットの作り方

ウィジェットを作るには、widgetsディレクトリに専用のディレクトリを作成し、その中に3つのファイルを用意します。 例えば、monitorというウィジェットを作るには、widgetsディレクトリ内にmonitorというディレクトリを作成した上で、以下の3ファイルを用意します。

monitor.html

データをどのように表示するかを定義するもの。単純なhtml形式。タグにdata-bind=“XXXX”のような形で指定することで、ジョブが送信する値をはめ込むことができる 例えば以下のような感じになる。

<h1 class="servername" data-bind="servername"></h1>
<h3 class="checkname" data-bind="checkname"></h3>
<h3 class="value" data-bind="value"></h3>
<p class="more-info" data-bind="moreinfo"></p>
<p class="updated-at" data-bind="updatedAtMessage"></p>

monitor.coffee

データの加工処理や計算処理をしたりする場合に利用するcoffeeスクリプト。例えば値によって適用するCSSを切り替えたりするのにも使う。

monitor.scss

SCSSのスクリプト。ウィジェットを表示する際の背景色やフォントサイズやレイアウトなどのデザインを定義する

他人が公開しているウィジェットを利用する

https://github.com/Shopify/dashing/wiki/Additional-Widgets を参照して使えそうなウィジェットを探すと良いです。 たとえばGraphiteのグラフを直接見れるようにするウィジェットをはじめとして数10個のウィジェットが公開されています。

ダッシュボードへのウィジェットのはめ込み

ダッシュボードにどのようなウィジェットをどのようなレイアウトで配置するかは、自由に決めることが出来ます。 実際のウィジェットの埋め込みは以下のような形になります。

<div data-id="welcome" data-view="Text" data-title="Hello" data-text="This is your shiny new dashboard." data-moreinfo="Protip: You can drag the widgets around!"></div> 

順番に項目を説明します。

data-id

ウィジェットを識別するための固有の値。ジョブを使って値の更新をかける場合(後述)にもこのIDを指定して更新対象の箇所が決められる。

data-view

データを見るために使うウィジェットの種類を指定する。前述の通り、デフォルトだとclock、comments、graph、iframe、list、meter、number、textの利用が可能でもちろん自分で作れるし、DLしたものを使うことも可能

data-xxxx(その他の項目)

その他の項目は、ウィジェットで表示するために引き渡すデータの名称を示す。例えばジョブからデータを更新する場合は、data-の後ろの名前で更新先の値を指定することになる(下記のジョブのサンプルも参照)。

ジョブの作り方

ジョブの作り方も簡単です。jobsディレクトリの中にrubyスクリプトを配置すればOKです。 以下に掲載しているのは、SensuのAPIを利用して監視対象ホストの状態を取得する例です(エラー処理とかしていないので直す必要あり)。

気にするべき点は以下の通りです。

  • SCHEDULERブロックの中が繰り返し実行される。間隔は1mや30sなどの形で指定する
  • send_eventで、ダッシュボードのview (widgetのviewではない)の指定したdata-idに対して、値をイベント通知する。この値をどのように表示するかについてはwidget側のhtmlやcoffeeスクリプトで定義する。もちろんイベントは1つのジョブから複数通知することが可能
require 'net/http'
require 'json'

SENSU_API_ENDPOINT = ENV["SENSU_API_ENDPOINT"]
STATUS_MESSAGE = { '0' => 'OK', '1' => 'WARNING', '2' => 'CRITICAL' }
STATUS_COLOR = { '0' => '#96bf48', '1' => '#FFFF00', '2' => '#FF0000' }

SCHEDULER.every '20s', :first_in => 0 do |job|
  uri = URI.parse(SENSU_API_ENDPOINT)
  http = Net::HTTP.new(uri.host, uri.port)
  response = http.request(Net::HTTP::Get.new("/clients"))
  clients = JSON.parse(response.body)
  clients.each do |client|
    response = http.request(Net::HTTP::Get.new("/clients/#{client['name']}/history"))
    checks = JSON.parse(response.body)
    checks.each do |check|
      next if check['check'] == 'keepalive'
      id = "#{client['name']}-#{check['check']}"
      status = "#{check['last_status']}"
      message = STATUS_MESSAGE[status]
      send_event(id, value: message)
    end
  end
end

その他

Herokuとかにデプロイする場合は、Gemfileに以下の2つのgemの追加が必要です。

gem 'execjs'
gem 'therubyracer'
 2014/03/17
このエントリーをはてなブックマークに追加

サイト内検索


著作

寄稿

Latest post: