Help us understand the problem. What is going on with this article?

Mackerel Free プランでダッシュボード(もどき)

More than 3 years have passed since last update.

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


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

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

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

ロールグラフ

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

20161207_mackerel_fake_dashboard_01.png

ダッシュボードモドキ

グラフの共有機能があるので、それを利用してダッシュボードモドキのHTMLを作成します。

といってもやることは以下だけです。

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

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

1. 共有URLの取得

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

20161207_mackerel_fake_dashboard_02.png

画像でも良いのですが、全画面表示リンク等を付けられるので 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 へログインした状態にしておきます。

20161207_mackerel_fake_dashboard_03.png

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

20161207_mackerel_fake_dashboard_04.png

htnosm
うろ覚えを無くしていこうともがき苦しむ人の備忘録 - nullはナルじゃなくヌル - editorはEmacsじゃなくvi - gitはジットじゃなくギット - 饂飩より蕎麦 - 茸より筍 - 四季は秋
http://htnosm.hatenablog.com/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした