share facebook facebook2 twitter menu hatena pocket slack

2011.11.10 THU

実験くん(jsPlumbでAWSの構成を可視化)

三浦 悟

WRITTEN BY 三浦 悟

jsPlumbという、HTMLのエレメント同士をコネクタで接続して移動させることができるライブラリがあります。

jsPlumbはjQueryのプラグインとしてもリリースしているので、
これを使用してEC2とセキュリティグループの関係を接続図としてHTMLレンダリングするように実験してみました。

EC2とセキュリティグループの情報をjsonで出力するPHPを以下のように用意します。

awsplug – awsplug.php GitHub Gist

<?php 
require_once("/opt/aws/php/default/sdk.class.php");


$ec2 = new AmazonEC2('xxxxxxxxxxxxx','xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx');

$ec2->set_region(AmazonEC2::REGION_APAC_NE1);
$instance_res = $ec2->describe_instances();
$instance = json_decode($instance_res->body->reservationSet->to_json());
$sg_res = $ec2->describe_security_groups();
$sg = json_decode($sg_res->body->securityGroupInfo->to_json());
$aws = array('ec2' => $instance, 'sg' => $sg);
echo json_encode($aws);


?>

jsPlumbはGoogleCodeでホストされているので、以下からダウンロードします。

・jsPlumb
Downloads – jsplumb – Google Project Hosting

次に、HTMLページを用意し、PHPからJSONを取得したものをjsPlumbに適用させます。

awsplug – index.html GitHub Gist

<html>
<head>
<title>awsplug</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<style type="text/css">
#stage{
padding: 20px;
}
.component {
opacity:0.8;
filter:alpha(opacity=80);
background-color:white;
cursor:pointer;
position:absolute;
border:2px solid #346789;
width:12em;
height:10em;
z-index:20;
font-size:0.9em;
font-weight:bold;
font-family:helvetica;
padding:0.5em;
/*margin:1em;*/
}
.ec2 {background-color: #ffe0e0;}
.sg {background-color: #e0e0ff;}
</style>
</head>
<body>
<div id="stage" style="position:absolute">
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js"></script>
<script type="text/javascript" src="jquery.jsPlumb-1.3.3-all-min.js "></script>
<script type="text/javascript">
;(function(){
window.awsplug = {
init : function(json){
jsPlumb.DefaultDragOptions = { cursor: "pointer", zIndex:2000 };
jsPlumb.setMouseEventsEnabled(true);
var instance = [];
for(var i=0; i<json.sg.item.length;i++){
var groupId = json.sg.item[i].groupId;
$("#stage").append("<div id="" + groupId + ""></div>");
$("#" + groupId ).attr("class", "sg component")
.css("top", "30em")
.css("left", 200*i + 20)
.append(json.sg.item[i].groupName);
}
for(var i=0; i<json.ec2.item.length;i++){
instance[i] = json.ec2.item[i].instancesSet.item;
var instanceId = instance[i].instanceId;
$("#stage").append("<div id="" + instanceId + ""></div>");
$("#" + instanceId).attr("class", "ec2 component")
.append(instanceId)
.css("top", "10em")
.css("left", 200*i + 20);
var groups = instance[i].groupSet.item;
groups = groups instanceof Array ? groups : new Array(groups);
for(var j=0; j<groups.length;j++){

jsPlumb.connect({source:instanceId,
target:groups[j].groupId,
connector:"Flowchart",
anchors:["Center", "Center"] });

}
}
}
};
})();
jsPlumb.ready(function() {
document.onselectstart = function () { return false; };
$.getJSON("/awsplug/awsplug.php", function(json){
awsplug.init(json);
});
});
</script>
</body>
</html>

上記のみで設定完了なので、早速実行してみます。
下記のように正しく表示されました。
これにより、セキュリティグループの違うものが一目でわかります。

jsPlumbはjQueryUI.Draggableをサポートしているので、コネクタで接続されたエンドポイント(ノード)は
ドラッグで移動することもできます。

ELBの接続状況など、いろいろなことが可視化できそうです。

こちらの記事はなかの人(memorycraft)監修のもと掲載しています。
元記事は、こちら

三浦 悟

三浦 悟

高円寺在住のなんじゃ系男子 またの名をmemorycraftといいます。 炭水化物大好き 日々の「なんじゃ?」を記事にしてます。