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

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

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

awsplug – awsplug.php GitHub Gist

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



awsplug

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

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

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

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