Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
自作描画ツール Linkdraw の紹介
Toshikatsu Murakoshi
2013/06/29
自己紹介
● 村越 俊克 (Murakoshi Toshikatsu)
● 出身: 静岡県藤枝市
● 趣味: サッカー、音楽
● 仕事: インフラ周りの運用
– Server, NW, Python, Ruby, etc
概要
● 自作描画ツールの紹介
– 開発の背景、仕組み、インストール
● 運用への導入
– 実際の運用での導入事例
自作描画ツールの紹介
Linkdraw
という描画ツールを作ってみました。
Linkdraw
● 無数に存在するアイテムとアイテム間の繋がりをド
ラッガブル且つリンカブルに描画する為のツール。
背景
背景 (1)
● 運用をしていると...
– 複雑な機器設定
– 昨日見た設定を今日も見直す
– 知らない間に機器が増えている
– 今どんな状態?
● けっこうな時間と労力をかけている。
あらかじめ
可視化
しておきたい
どう可視化する?
表
From To BWidth State
A B 1G Up
B C 1G Up
C D 1G Down
D A 1G Up
D A 1G Down
トポロジ
トポロジ
だとうれしい。
背景(2)
● 運用をしていると...
– 資料の場所がわからない
– あの WEB UI の URL なんだっけ、どこだっけ
● やはり、けっこうな時間と労力をかけている。
直ぐに辿りつきたい
運用情報
● 運用情報は、既に何らかの形式で存在してたりする。
– 設計図 visio, pdf ...
– 運用情報 wiki …
– 統計情報 snmp, rrd ...
– 監視情報 nagios, cacti …
– その他 DB …
...
既存運用情報の
設置位置や形式を工夫して...
可視化したトポロジ
と
運用情報をリンク したい。
イメージ
● ブラウザ でトポロジを表示。
● トポロジと既存の運用情報をリンク。
Click
連絡先
Tips
グラフ
機器設定
監視情報
Click
Click
ブラウザ
wiki
作ってみました。
描画ツール
Linkdraw
サンプル
http://linkdraw.org/sample.html
仕組み
仕組み(1) SVG
● 描画は SVG(Scalable Vector Graphics)
● http://www.w3.org/Graphics/SVG/
● これを test.svg として web サーバへ置くと2つの
サークルとそれ...
SVG Sample
仕組み(2) config
● 描画の為の Config は json 形式。
● 上記の例は、A, B, C の3つのノード間を1本ずつ
線を引く Config 。
● 描画させたい情報をこの形式に変換する。
{
"lines": [
{ "...
Config sample
仕組み(3) Position
● ポジションは、ブラウザが更新される度にランダム
な座標が与えられる。
● ドラッグ&ドロップでポジション変更可能。
● SAVE すると次回からそのポジションを使う。
Random Random Saved
Position
(Json)
CGI
Linkdraw
仕組み イメージ
Config
(Json)
描画する為の情報
ノード、線、色、リンク、などなど
※ 設定したインターバルで定期的に読み込まれる。
Json
読込
Json
読込 座標
...
インストール
パッケージについて
● 現在、Linkdrawは、野良パッケージです。
● jQuery と D3 に依存しています。
– jQuery 公式パッケージ
● libjs-jquery
– D3 野良パッケージ
● http://code.lin...
インストール
● まず、jQuery をインストール。
● 次に D3 と Linkdraw を取得してインストール。
sudo apt-get install libjs-jquery
wget http://code.linkdraw.or...
Template 設置
● setup.sh で template などを任意のパスへ設置します。
sudo bash /usr/share/linkdraw/utils/setup.sh /path/to/linkdraw/
テンプレート確認
● http://example.org/path/to/linkdraw/template.html
Template 解説
Template 構成
path/to/linkdraw/
|-- template.html
|-- js
| |-- jquery.min.js -> /usr/share/javascript/jquery/jquery.min.js
|...
template.html
<!DOCTYPE html>
<meta charset="utf-8">
<head>
<script src="js/jquery.min.js"></script>
<script src="js/d3.mi...
template_config.json
● 描画情報を定義する設定ファイル。
● A, B, C という3つのノード間に1本ずつ太さ1pxで
線を引く設定。
{
"lines": [
{ "source": "A", "target": "B...
template_position.json
● ポジションをキープしておく為のファイル。
● 設置時は、空ファイルで ok.
● CGI プログラム によってポジションが保存される
為、書き込み権限が必要。
-rw------- 1 www-...
write.cgi
● ポジションを保存する為のCGIプログラム。
● /usr/share/linkdraw/src/write.cgi
● python2.6 以上で動作
-rwxr-xr-x 1 www-data www-data 412...
テンプレートの設定を
カスタマイズ
設定書式
{
"time": "20XX-01-23 01:23:45",
"descr": "This is test.",
"nodeColors": [
{ "id": "V1", "descr": "VENDOR1", "color":...
設定 Tutorial
http://linkdraw.org/sample.html
自動更新
自動更新
<!DOCTYPE html>
<meta charset="utf-8">
<head>
<script src="js/jquery.min.js"></script>
<script src="js/d3.min.js"></s...
Demo
運用への導入
Cacti + Linkdraw
● Cacti が既に運用で使われていた。
● Cacti が snmp 情報を定期的に取得している。
● Cacti (snmp) が持つ情報
– 機器名、ベンダ情報、インタフェース情報(インタフェー
ス名、...
用途
● 材料
– SNMP
– xFlow
– IP L3
– OSPF LSA, Neighbor
– BGP Peer
– AS Path, Route
– 機器設定
– 配線表
● 対象
– サービスNW
– オフィスNW
– 実験用N...
最新情報はコチラ
https://github.com/mtoshi/linkdraw/wiki/
おしまい
Upcoming SlideShare
Loading in …5
×

20130629 linkdraw

2,709 views

Published on

  • Be the first to comment

  • Be the first to like this

20130629 linkdraw

  1. 1. 自作描画ツール Linkdraw の紹介 Toshikatsu Murakoshi 2013/06/29
  2. 2. 自己紹介 ● 村越 俊克 (Murakoshi Toshikatsu) ● 出身: 静岡県藤枝市 ● 趣味: サッカー、音楽 ● 仕事: インフラ周りの運用 – Server, NW, Python, Ruby, etc
  3. 3. 概要 ● 自作描画ツールの紹介 – 開発の背景、仕組み、インストール ● 運用への導入 – 実際の運用での導入事例
  4. 4. 自作描画ツールの紹介
  5. 5. Linkdraw という描画ツールを作ってみました。
  6. 6. Linkdraw ● 無数に存在するアイテムとアイテム間の繋がりをド ラッガブル且つリンカブルに描画する為のツール。
  7. 7. 背景
  8. 8. 背景 (1) ● 運用をしていると... – 複雑な機器設定 – 昨日見た設定を今日も見直す – 知らない間に機器が増えている – 今どんな状態? ● けっこうな時間と労力をかけている。
  9. 9. あらかじめ 可視化 しておきたい
  10. 10. どう可視化する?
  11. 11. 表 From To BWidth State A B 1G Up B C 1G Up C D 1G Down D A 1G Up D A 1G Down
  12. 12. トポロジ
  13. 13. トポロジ だとうれしい。
  14. 14. 背景(2) ● 運用をしていると... – 資料の場所がわからない – あの WEB UI の URL なんだっけ、どこだっけ ● やはり、けっこうな時間と労力をかけている。
  15. 15. 直ぐに辿りつきたい
  16. 16. 運用情報 ● 運用情報は、既に何らかの形式で存在してたりする。 – 設計図 visio, pdf ... – 運用情報 wiki … – 統計情報 snmp, rrd ... – 監視情報 nagios, cacti … – その他 DB … – などなど。
  17. 17. 既存運用情報の 設置位置や形式を工夫して...
  18. 18. 可視化したトポロジ と 運用情報をリンク したい。
  19. 19. イメージ ● ブラウザ でトポロジを表示。 ● トポロジと既存の運用情報をリンク。 Click 連絡先 Tips グラフ 機器設定 監視情報 Click Click ブラウザ wiki
  20. 20. 作ってみました。
  21. 21. 描画ツール Linkdraw
  22. 22. サンプル http://linkdraw.org/sample.html
  23. 23. 仕組み
  24. 24. 仕組み(1) SVG ● 描画は SVG(Scalable Vector Graphics) ● http://www.w3.org/Graphics/SVG/ ● これを test.svg として web サーバへ置くと2つの サークルとそれらを繋ぐ1本の線が描画される。
  25. 25. SVG Sample
  26. 26. 仕組み(2) config ● 描画の為の Config は json 形式。 ● 上記の例は、A, B, C の3つのノード間を1本ずつ 線を引く Config 。 ● 描画させたい情報をこの形式に変換する。 { "lines": [ { "source": "A", "target": "B","color": "red", "width": "1", "descr": "1G Up", "link": "" }, { "source": "B", "target": "C","color": "blue", "width": "1", "descr": "1G Up", "link": "" }, { "source": "C", "target": "A","color": "green", "width": "1", "descr": "1G Up", "link": "" } ] }
  27. 27. Config sample
  28. 28. 仕組み(3) Position ● ポジションは、ブラウザが更新される度にランダム な座標が与えられる。 ● ドラッグ&ドロップでポジション変更可能。 ● SAVE すると次回からそのポジションを使う。 Random Random Saved
  29. 29. Position (Json) CGI Linkdraw 仕組み イメージ Config (Json) 描画する為の情報 ノード、線、色、リンク、などなど ※ 設定したインターバルで定期的に読み込まれる。 Json 読込 Json 読込 座標 書込 ポジション情報(座標など) ※起動時の1回だけ読み込む。(無ければランダム) ※保存命令の度にCGI経由で書き込まれる。 SVG 出力 座標保存 命令 ブラウザ Save 1 1 2 3
  30. 30. インストール
  31. 31. パッケージについて ● 現在、Linkdrawは、野良パッケージです。 ● jQuery と D3 に依存しています。 – jQuery 公式パッケージ ● libjs-jquery – D3 野良パッケージ ● http://code.linkdraw.org/deb/libjs-d3_3.1.10-1_all.deb – Linkdraw 野良パッケージ ● http://code.linkdraw.org/deb/libjs-linkdraw_0.2.4-1_all.deb
  32. 32. インストール ● まず、jQuery をインストール。 ● 次に D3 と Linkdraw を取得してインストール。 sudo apt-get install libjs-jquery wget http://code.linkdraw.org/deb/libjs-d3_3.1.10-1_all.deb wget http://code.linkdraw.org/deb/libjs-linkdraw_0.2.4-1_all.deb sudo dpkg -i libjs-d3_3.1.10-1_all.deb libjs-linkdraw_0.2.4-1_all.deb
  33. 33. Template 設置 ● setup.sh で template などを任意のパスへ設置します。 sudo bash /usr/share/linkdraw/utils/setup.sh /path/to/linkdraw/
  34. 34. テンプレート確認 ● http://example.org/path/to/linkdraw/template.html
  35. 35. Template 解説
  36. 36. Template 構成 path/to/linkdraw/ |-- template.html |-- js | |-- jquery.min.js -> /usr/share/javascript/jquery/jquery.min.js | |-- d3.min.js -> /usr/share/javascript/d3/d3.min.js | |-- linkdraw.js -> /usr/share/javascript/linkdraw/linkdraw.js |-- configs | `-- template_config.json |-- positions | `-- template_position.json `-- write.cgi ● setup.sh で path/to/linkdraw へ設置されたもの。 ベースとなる HTML jQuery, D3.js, Linkdraw のシムリンク 描画情報 線とかノードとか ポジション情報 ポジション情報を書き 込むCGIスクリプト ※ 一部省略
  37. 37. template.html <!DOCTYPE html> <meta charset="utf-8"> <head> <script src="js/jquery.min.js"></script> <script src="js/d3.min.js"></script> <script src="js/linkdraw.js"></script> <script> $(function(){ $("#template").linkDraw({ "configPath": "configs/template_config.json", "positionPath": "positions/template_position.json", "positionWriter": "write.cgi", //"positionSave": false, "width": 600, "height": 400, "interval": 300 }); }); </script> <title>Linkdraw</title> </head> <body> <div id="template"></div> </body> </html> ※ 一部省略
  38. 38. template_config.json ● 描画情報を定義する設定ファイル。 ● A, B, C という3つのノード間に1本ずつ太さ1pxで 線を引く設定。 { "lines": [ { "source": "A", "target": "B","color": "", "width": "1", "descr": "", "link": "" }, { "source": "B", "target": "C","color": "", "width": "1", "descr": "", "link": "" }, { "source": "C", "target": "A","color": "", "width": "1", "descr": "", "link": "" } ] }
  39. 39. template_position.json ● ポジションをキープしておく為のファイル。 ● 設置時は、空ファイルで ok. ● CGI プログラム によってポジションが保存される 為、書き込み権限が必要。 -rw------- 1 www-data www-data 0 Jun 26 22:41 positions/template_position.json
  40. 40. write.cgi ● ポジションを保存する為のCGIプログラム。 ● /usr/share/linkdraw/src/write.cgi ● python2.6 以上で動作 -rwxr-xr-x 1 www-data www-data 412 Jun 26 22:41 write.cgi
  41. 41. テンプレートの設定を カスタマイズ
  42. 42. 設定書式 { "time": "20XX-01-23 01:23:45", "descr": "This is test.", "nodeColors": [ { "id": "V1", "descr": "VENDOR1", "color": "green" }, { "id": "V2", "descr": "VENDOR2", "color": "blue" }, { "id": "V3", "descr": "VENDOR3", "color": "black" } ], "lineColors": [ { "id": "C1", "descr": "STATE Up", "color": "#00688B" }, { "id": "C2", "descr": "STATE Down", "color": "#AAAAAA" } ], "nodes": [ { "name": "A", "r": "6", "color": "V1", "link": "" }, { "name": "B", "r": "6", "color": "V2", "link": "" }, { "name": "C", "r": "6", "color": "V3", "link": "" } ], "lines": [ { "source": "A", "target": "B","color": "C1", "width": "1", "descr": "1G Up", "link": "" }, { "source": "B", "target": "C","color": "C2", "width": "1", "descr": "Down", "link": "" }, { "source": "C", "target": "A","color": "C1", "width": "1", "descr": "1G Up", "link": "" } ] } 画面左上の文字列 時間、説明 ノードのカラーチャート 色ID, 説明, 色 ラインのカラーチャート 色ID, 説明, 色 ノード設定 名前、大きさ、色、リンク ライン設定 区間、色、太さ、説明、リンク
  43. 43. 設定 Tutorial http://linkdraw.org/sample.html
  44. 44. 自動更新
  45. 45. 自動更新 <!DOCTYPE html> <meta charset="utf-8"> <head> <script src="js/jquery.min.js"></script> <script src="js/d3.min.js"></script> <script src="js/linkdraw.js"></script> <script> $(function(){ $("#template").linkDraw({ "configPath": "configs/template_config.json", "positionPath": "positions/template_position.json", "positionWriter": "write.cgi", //"positionSave": false, "width": 600, "height": 400, "interval": 300 }); }); </script> <title>Linkdraw</title> </head> <body> <div id="template"></div> </body> </html> cron とかで 定期的に置き換え 設定ファイルを読み込むインターバル
  46. 46. Demo
  47. 47. 運用への導入
  48. 48. Cacti + Linkdraw ● Cacti が既に運用で使われていた。 ● Cacti が snmp 情報を定期的に取得している。 ● Cacti (snmp) が持つ情報 – 機器名、ベンダ情報、インタフェース情報(インタフェー ス名、Up/Down、帯域、トラフィックなどなど) ● これらを定期的に取得する。 ● 取得した情報を Linkdraw の config(json) に変換 し定期的に置き換える。
  49. 49. 用途 ● 材料 – SNMP – xFlow – IP L3 – OSPF LSA, Neighbor – BGP Peer – AS Path, Route – 機器設定 – 配線表 ● 対象 – サービスNW – オフィスNW – 実験用NW – 設定確認
  50. 50. 最新情報はコチラ https://github.com/mtoshi/linkdraw/wiki/
  51. 51. おしまい

×