Mackerel Advent Calendar 2016 - Qiita 7日目の記事です。
昨日は @syou6162@github さんの nasneの残量やGoogle Analyticsの情報をMackerelに監視させよう - yasuhisa's blog でした。明日は @t_mrt さんです。

Mackerelの Free プランではカスタムダッシュボードが使用できません。
導入前の検証では機能制限の無い Trial プランを使えますが、2週間という期限付きです。

開発や検証環境で使用したい場合に予算の都合上 Free プランを選択することがありました。
無いものはしようがないのですが、ロール毎のグラフを一覧で俯瞰的に参照したいとやはり思ってしまいます。

基本的なダッシュボードは標準で置いて欲しいという願望持ちつつ、極力簡単にできる方法を模索してみました。

ロールグラフ

サービス、ロールを選択するとロールグラフが参照できます。
メトリックは切り替え方式なので、一画面で複数メトリック(グラフ)を表示できません。

ダッシュボードモドキ

グラフの共有機能があるので、それを利用してダッシュボードモドキのHTMLを作成します。
といってもやることは以下だけです。

共有URLを取得する
共有URLを並べたHTMLを作成する
HTMLをWebサーバへ配置する

実際はテンプレートとして使用するHTMLを置いておき、それを基に各ロールのグラフを生成してます。
もっと簡単な方法があると良いのですが、検証用としては必要十分かと思います。

1. 共有URLの取得

グラフの共有から iframe のリンクを取得します。

画像でも良いのですが、全画面表示リンク等を付けられるので iframe が便利かと思います。
画像で取得しておき、日次レポートを作成するというような使い方もできそうです。( Free プランのグラフ表示期間は1日なので微妙ですが)
取得したリンクは↓のようになっています。

<iframe src="https://mackerel.io/embed/orgs/オーガニゼーション/services/サービス/ロール?graph=グラフ;stacked=false&amp;simplified=false&amp;period=30m" height="200" width="400" frameborder="0"></iframe>

2. 表示用HTMLの作成

iframe のリンクを並べます。
以下、Linux OSで MackerelAgent 標準で取得できるメトリックのグラフ例です。

<html><title>Agent Graph | __ORG__</title><h1>__ORG__ [__SERVICE__:__ROLE__] Agent Graph (__PERIOD1__-__PERIOD2__)</h1><body bgcolor="LightCyan">
<h2>loadavg5 (__PERIOD1__/__PERIOD2__)</h2>
<table>
<tr>
<td>
<iframe src="https://mackerel.io/embed/orgs/__ORG__/services/__SERVICE__/__ROLE__?graph=loadavg5&period=__PERIOD1__&stacked=false&simplified=false" height="300" width="600" frameborder="0"></iframe>
</td>
<td>
<iframe src="https://mackerel.io/embed/orgs/__ORG__/services/__SERVICE__/__ROLE__?graph=loadavg5&period=__PERIOD2__&stacked=false&simplified=false" height="300" width="600" frameborder="0"></iframe>
</td>
</tr>
</table>
<h2>cpu.{user,iowait,system} (__PERIOD1__/__PERIOD2__)</h2>
<table>
<tr>
<td>
<iframe src="https://mackerel.io/embed/orgs/__ORG__/services/__SERVICE__/__ROLE__?graph=cpu.{user,iowait,system}&period=__PERIOD1__&stacked=false&simplified=false" height="300" width="600" frameborder="0"></iframe>
</td>
<td>
<iframe src="https://mackerel.io/embed/orgs/__ORG__/services/__SERVICE__/__ROLE__?graph=cpu.{user,iowait,system}&period=__PERIOD2__&stacked=false&simplified=false" height="300" width="600" frameborder="0"></iframe>
</td>
</tr>
</table>
<h2>memory.used (__PERIOD1__/__PERIOD2__)</h2>
<table>
<tr>
<td>
<iframe src="https://mackerel.io/embed/orgs/__ORG__/services/__SERVICE__/__ROLE__?graph=memory.used&period=__PERIOD1__&stacked=false&simplified=false" height="300" width="600" frameborder="0"></iframe>
</td>
<td>
<iframe src="https://mackerel.io/embed/orgs/__ORG__/services/__SERVICE__/__ROLE__?graph=memory.used&period=__PERIOD2__&stacked=false&simplified=false" height="300" width="600" frameborder="0"></iframe>
</td>
</tr>
</table>
<h2>disk.{reads,writes} (__PERIOD1__/__PERIOD2__)</h2>
<table>
<tr>
<td>
<iframe src="https://mackerel.io/embed/orgs/__ORG__/services/__SERVICE__/__ROLE__?graph=disk.{reads,writes}&period=__PERIOD1__&stacked=false&simplified=false" height="300" width="600" frameborder="0"></iframe>
</td>
<td>
<iframe src="https://mackerel.io/embed/orgs/__ORG__/services/__SERVICE__/__ROLE__?graph=disk.{reads,writes}&period=__PERIOD2__&stacked=false&simplified=false" height="300" width="600" frameborder="0"></iframe>
</td>
</tr>
</table>
<h2>interface.{rxBytes,txBytes} (__PERIOD1__/__PERIOD2__)</h2>
<table>
<tr>
<td>
<iframe src="https://mackerel.io/embed/orgs/__ORG__/services/__SERVICE__/__ROLE__?graph=interface.{rxBytes,txBytes}&period=__PERIOD1__&stacked=false&simplified=false" height="300" width="600" frameborder="0"></iframe>
</td>
<td>
<iframe src="https://mackerel.io/embed/orgs/__ORG__/services/__SERVICE__/__ROLE__?graph=interface.{rxBytes,txBytes}&period=__PERIOD2__&stacked=false&simplified=false" height="300" width="600" frameborder="0"></iframe>
</td>
</tr>
</table>
</body></html>

文字列を置き換えすることである程度汎用的に使えます。

__ORG__     = オーガニゼーション
__SERVICE__ = サービス
__ROLE__    = ロール
__PERIOD1__  = 期間1 (m=分、h=時、d=日、w=週、y=年)
__PERIOD2__  = 期間2 (m=分、h=時、d=日、w=週、y=年)

3. 表示用HTMLをWebサーバへ配置

Webサーバは何でも良いのですが、今回はS3の WebSite Hosting を使用しました。

Amazon S3 での静的ウェブサイトのホスティング

配置後は、Webブラウザで作成したHTMLへアクセスします。
認証が入るので、目的のオーガニゼーションが参照できるユーザで Mackerel へログインした状態にしておきます。

併せてインデックスページを作っておくと良いかもしれません。同じ場所に↓のような index.html を置いてます。