Jaws20140117

チャラチャッチャチャラッチャー
でちょっと良いものができた話

Copyright © 2014 AGREX INC.

14年1月18日土曜日

まず、ごめんなさい



2

まず、ごめんなさい

素晴らしいお話の数々の後では、
完全にお耳汚しですw



2

プロフィール
てるいまさし

照井将士
http://www.facebook.com/marcy.terui
(株)アグレックス札幌事業所システム部

AWS Certiﬁed Solutions Architect
1987年東京都大田区生まれ
1992年札幌移住
2011年 (株)アグレックス入社

役職：下っ端・雑用係

好きなサービス
Route53、CloudWatch、RDS(MySQL)



3

プロフィール
てるいまさし

照井将士
http://www.facebook.com/marcy.terui
(株)アグレックス札幌事業所システム部

AWS Certiﬁed Solutions Architect
1987年東京都大田区生まれ
1992年札幌移住
2011年 (株)アグレックス入社

役職：下っ端・雑用係

好きなサービス

AWSチームリーダーに
クラスアップしました！
※注現状１人チームだからリーダーなだけw

Route53、CloudWatch、RDS(MySQL)



3

とある問題がありました。



4


アカウントが増えてきて、
CloudWatchのアラート状況の
把握が難しくなってきた。



4


アカウントが増えてきて、
CloudWatchのアラート状況の
把握が難しくなってきた。
コンソールからは当然アカウント単位でしか見れない。
でも、データストアとか監視サーバの管理しなくて良いし、
アカウント単位で誰かに見せたくなったらIAMユーザ使ったりできて良い所も一杯あるから、
辞めてZabbixに集約とかっていうのも微妙なんですよね∼



4

ウチにはこんな子が居ます。

ウチの警子ちゃん
http://www.isa-j.co.jp/keiko-10th/index[1].html



5

CloudWatchのアラームが上がると…


ピピピピ




5

CloudWatchのアラームが上がると…


ピピピピ


なんで鳴ってるの…？
アラートメールどこ行った？？


5

ということで

クロスアカウントで、
アラーム状態を集約して見られる
ダッシュボード的なものが欲しい！



6

ということで

作ってみました。



7

どんな感じで作った？

こんな感じです。



8

ミュージックスタート！古いって言わないでｗｗｗ



9

チャラチャッチャチャラッチャ∼♪
ｫ" __,,,.. ､ `､
ﾁ,, _,,..､"" ,,,ｨｪｪｫーﾝ`''" ､ヾヽ、
ｲ;;: :.／~`''" ￣￣ ¨ ¨`ﾘ､"ヾ､、、ヽ
f;;::/ ミヾヽ、、 .}
. ∨ .::::... ミ、、 ;'i
. { ..:;::.. ミ゛、、', .}
,ｧ'ｰ-､:{i:t,,..--'"`ヽ､`ヽ:::::`ヾ、｀、', }
'"''t--=ゞ、`ｰ三''"￣` `:::: | 、',. .|
无ｴﾆ=/ ::（ｱｴｴ=-､_,.::: | y=､ .リ
广;;''/ ::.`ｰ ''"~ ::. | ﾁ''" ｨ''ヾヽﾘ
{ .::/ .....::､ .......::::::: | / , ､ヾﾉ / ,'
`､（ ,zzｭ,,ﾘ:. ....::::::::: | / r' ｲ='./ / ,'
|,ｨｴｪｴta､ :::. ..::::. | .|::（"'´゛.／ ,/
ｷ'"､＿_`ヾｯ, :: ~´;;;;`ｰイ ,'
,,,..ｨ==t､ `､¨`ｰ'"ｱ"::.. ..:::::: /;;; :| ,'
以zzt､;;;;`、ヾ､,,,;:'"....;;;;;;..:::: ／;;;;; :| .,'
f三三~`,,`､} |i |;;;ﾐ ,,.イ;;;;;;;;; :| ,'
〉==- ､三;/ {ヾt;;;ﾐ＿,,,,,.ｨﾂ;;;;;;;;;;;;;;;; ﾂ_
/ `ヾﾅ `ｰ====ﾏ-''";;;;;;;;;;;; ∨` i
. / ./ ﾘt;;;;;;;;; :::: ／ `t､
/ /. / :i;;;;::.... ／ / `､
. / / ,. ｨ"i `､;;;:: ,.イ / ヽ、
/ / ,. - '" | `､;: ,. イ / `ｰ
／~＼ ,... /,. - ' " /-- .､〉-r''" /
,. ｨ''",,.. ､ `Y |" f:::::::::__/`ｰ-ﾅ--――-ｧ／,'
r'"￣ `ヽ、!、〉 {::::::ｰ''ﾘ､;;;;ﾁ`ｰ=ﾆ_::::::/ / ./
{,,.. =---''`ヽ、`}:: .{ ',::::::::::／~`､ヾ`ヽ,,::: / ／ ,'

左


右
9

チャラチャッチャチャラッチャ∼♪
ｫ" __,,,.. ､ `､
ﾁ,, _,,..､"" ,,,ｨｪｪｫーﾝ`''" ､ヾヽ、
ｲ;;: :.／~`''" ￣￣ ¨ ¨`ﾘ､"ヾ､、、ヽ
f;;::/ ミヾヽ、、 .}
. ∨ .::::... ミ、、 ;'i
. { ..:;::.. ミ゛、、', .}
,ｧ'ｰ-､:{i:t,,..--'"`ヽ､`ヽ:::::`ヾ、｀、', }
'"''t--=ゞ、`ｰ三''"￣` `:::: | 、',. .|
无ｴﾆ=/ ::（ｱｴｴ=-､_,.::: | y=､ .リ
广;;''/ ::.`ｰ ''"~ ::. | ﾁ''" ｨ''ヾヽﾘ
{ .::/ .....::､ .......::::::: | / , ､ヾﾉ / ,'
`､（ ,zzｭ,,ﾘ:. ....::::::::: | / r' ｲ='./ / ,'
|,ｨｴｪｴta､ :::. ..::::. | .|::（"'´゛.／ ,/
ｷ'"､＿_`ヾｯ, :: ~´;;;;`ｰイ ,'
,,,..ｨ==t､ `､¨`ｰ'"ｱ"::.. ..:::::: /;;; :| ,'
以zzt､;;;;`、ヾ､,,,;:'"....;;;;;;..:::: ／;;;;; :| .,'
f三三~`,,`､} |i |;;;ﾐ ,,.イ;;;;;;;;; :| ,'
〉==- ､三;/ {ヾt;;;ﾐ＿,,,,,.ｨﾂ;;;;;;;;;;;;;;;; ﾂ_
/ `ヾﾅ `ｰ====ﾏ-''";;;;;;;;;;;; ∨` i
. / ./ ﾘt;;;;;;;;; :::: ／ `t､
/ /. / :i;;;;::.... ／ / `､
. / / ,. ｨ"i `､;;;:: ,.イ / ヽ、
/ / ,. - '" | `､;: ,. イ / `ｰ
／~＼ ,... /,. - ' " /-- .､〉-r''" /
,. ｨ''",,.. ､ `Y |" f:::::::::__/`ｰ-ﾅ--――-ｧ／,'
r'"￣ `ヽ、!、〉 {::::::ｰ''ﾘ､;;;;ﾁ`ｰ=ﾆ_::::::/ / ./
{,,.. =---''`ヽ、`}:: .{ ',::::::::::／~`､ヾ`ヽ,,::: / ／ ,'

(((((【右から】ｃ(･ｪ･ｃ｀)三(´っ･ｪ･)っ((((((【左へ】受け流す∼♪

左


右
9

わかりましたか？

すいません。
ちゃんと説明します。



10

require dirname(__DIR__) . '/init.php';
use AwsCloudWatchCloudWatchClient;
use DashBoardUtilPropaties;
$data = array();
foreach (new DirectoryIterator(PROPATIES_DIR) as $fileInfo) {
if($fileInfo->isDot()) continue;
$prop = new Propaties(PROPATIES_DIR . "/" . $fileInfo->getFilename());
$cloudwatch = CloudWatchClient::factory(array(
'key' => $prop->get(PROPATIES_ACCESS_KEY),
'secret' => $prop->get(PROPATIES_SECRET_KEY),
'region' => AWS_REGION
));
$model = $cloudwatch->describeAlarms();
$data[$prop->get(PROPATIES_SYSTEM_NAME)] = $model->get("MetricAlarms");
}
$rows = "";
foreach ($data as $systemName => $alarms) {
foreach ($alarms as $alarm) {
$rows .= "['{$systemName}', '{$alarm['AlarmName']}', '{$alarm['AlarmDescription']}', '{$alarm['MetricName']}',
'{$alarm['StateValue']}'],n";
}
}
$date = date("Y-m-d H:i:s");
$content = "
<html>
<head>
<script type='text/javascript' src='https://www.google.com/jsapi'></script>
<script type='text/javascript'>
google.load('visualization', '1', {packages:['table']});
google.setOnLoadCallback(drawTable);
function drawTable() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'SystemName');
data.addColumn('string', 'AlarmName');
data.addColumn('string', 'AlarmDescription');
data.addColumn('string', 'MetricName');
data.addColumn('string', 'StateValue');
data.addRows([
{$rows}
]);
var table = new google.visualization.Table(document.getElementById('table_div'));
var formatter = new google.visualization.ColorFormat();
formatter.addRange('ALARM', 'INSUFFICIENT_DATA', 'white', 'red');
formatter.addRange('INSUFFICIENT_DATA', 'OK', 'white', 'orange');
formatter.addRange('OK', null, 'white', '#33ff33');
formatter.format(data, 4);
table.draw(data, {allowHtml: true, showRowNumber: true});
}
</script>
</head>
<body>
<h1>{$date}時点</h1>
<div id='table_div'></div>
</body>
</html>
";
echo $content;



11

$data = array();
));
}

①AWS CloudWatch APIからデータもらう
×アカウント数

$rows = "";
}
}
$content = "
<html>
<head>
data.addRows([
{$rows}
]);
}
</script>
</head>
<body>
</body>
</html>
";
echo $content;



11

$data = array();
));
}


$rows = "";
}
}
$content = "
<html>
<head>
data.addRows([
{$rows}
]);
}
</script>
</head>
<body>
</body>
</html>
";
echo $content;



11

②受け取った内容を軽く整形する

$data = array();
));
}


$rows = "";
}
}
$content = "
<html>
<head>
data.addRows([
{$rows}
]);
}
</script>
</head>
<body>

③Google Charts APIに投げる

</body>
</html>
";
echo $content;



②受け取った内容を軽く整形する

11

つまり

Cloudwatch API (右) から
Google Charts API (左) に
渡す(受け流す)だけ



12

…で、こんなんできましたー



13

…で、こんなんできましたー
INSUFICIENT_DATAがオレンジ
ALARMが赤になる
各ヘッダをクリックすると昇順降順の並べ替えができる



13

参考とまとめ



14

参考とまとめ
AWS SDK for PHP(他にもJava、.NET、Ruby、Python、Node.jsとかあります)
http://docs.aws.amazon.com/aws-sdk-php/guide/latest/index.html



14

参考とまとめ
Google Charts
https://google-developers.appspot.com/chart/



14

参考とまとめ
Google Charts

ムーディ○山の現在
http://blog.livedoor.jp/aokichanyon444/archives/54385877.html



14

参考とまとめ
Google Charts

ムーディ○山の現在
http://blog.livedoor.jp/aokichanyon444/archives/54385877.html

思わず歌っちゃうほど簡単に、
ちょっと良いものができました。
他にも、異なるAPI同士を
組み合わせることで、
手間無く良いものができたりする例は一杯ありそう。


14

ありがとうございました！



15

Jaws20140117

Recommended

Recommended

More Related Content

More from Terui Masashi

More from Terui Masashi (20)

Recently uploaded

Recently uploaded (14)

Jaws20140117