Your SlideShare is downloading. ×
20130629 linkdraw
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

20130629 linkdraw

1,346

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,346
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
1
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. 自作描画ツール Linkdraw の紹介 Toshikatsu Murakoshi 2013/06/29
  • 2. 自己紹介 ● 村越 俊克 (Murakoshi Toshikatsu) ● 出身: 静岡県藤枝市 ● 趣味: サッカー、音楽 ● 仕事: インフラ周りの運用 – Server, NW, Python, Ruby, etc
  • 3. 概要 ● 自作描画ツールの紹介 – 開発の背景、仕組み、インストール ● 運用への導入 – 実際の運用での導入事例
  • 4. 自作描画ツールの紹介
  • 5. Linkdraw という描画ツールを作ってみました。
  • 6. Linkdraw ● 無数に存在するアイテムとアイテム間の繋がりをド ラッガブル且つリンカブルに描画する為のツール。
  • 7. 背景
  • 8. 背景 (1) ● 運用をしていると... – 複雑な機器設定 – 昨日見た設定を今日も見直す – 知らない間に機器が増えている – 今どんな状態? ● けっこうな時間と労力をかけている。
  • 9. あらかじめ 可視化 しておきたい
  • 10. どう可視化する?
  • 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. トポロジ
  • 13. トポロジ だとうれしい。
  • 14. 背景(2) ● 運用をしていると... – 資料の場所がわからない – あの WEB UI の URL なんだっけ、どこだっけ ● やはり、けっこうな時間と労力をかけている。
  • 15. 直ぐに辿りつきたい
  • 16. 運用情報 ● 運用情報は、既に何らかの形式で存在してたりする。 – 設計図 visio, pdf ... – 運用情報 wiki … – 統計情報 snmp, rrd ... – 監視情報 nagios, cacti … – その他 DB … – などなど。
  • 17. 既存運用情報の 設置位置や形式を工夫して...
  • 18. 可視化したトポロジ と 運用情報をリンク したい。
  • 19. イメージ ● ブラウザ でトポロジを表示。 ● トポロジと既存の運用情報をリンク。 Click 連絡先 Tips グラフ 機器設定 監視情報 Click Click ブラウザ wiki
  • 20. 作ってみました。
  • 21. 描画ツール Linkdraw
  • 22. サンプル http://linkdraw.org/sample.html
  • 23. 仕組み
  • 24. 仕組み(1) SVG ● 描画は SVG(Scalable Vector Graphics) ● http://www.w3.org/Graphics/SVG/ ● これを test.svg として web サーバへ置くと2つの サークルとそれらを繋ぐ1本の線が描画される。
  • 25. SVG Sample
  • 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. Config sample
  • 28. 仕組み(3) Position ● ポジションは、ブラウザが更新される度にランダム な座標が与えられる。 ● ドラッグ&ドロップでポジション変更可能。 ● SAVE すると次回からそのポジションを使う。 Random Random Saved
  • 29. Position (Json) CGI Linkdraw 仕組み イメージ Config (Json) 描画する為の情報 ノード、線、色、リンク、などなど ※ 設定したインターバルで定期的に読み込まれる。 Json 読込 Json 読込 座標 書込 ポジション情報(座標など) ※起動時の1回だけ読み込む。(無ければランダム) ※保存命令の度にCGI経由で書き込まれる。 SVG 出力 座標保存 命令 ブラウザ Save 1 1 2 3
  • 30. インストール
  • 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. インストール ● まず、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. Template 設置 ● setup.sh で template などを任意のパスへ設置します。 sudo bash /usr/share/linkdraw/utils/setup.sh /path/to/linkdraw/
  • 34. テンプレート確認 ● http://example.org/path/to/linkdraw/template.html
  • 35. Template 解説
  • 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. 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. 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. template_position.json ● ポジションをキープしておく為のファイル。 ● 設置時は、空ファイルで ok. ● CGI プログラム によってポジションが保存される 為、書き込み権限が必要。 -rw------- 1 www-data www-data 0 Jun 26 22:41 positions/template_position.json
  • 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. テンプレートの設定を カスタマイズ
  • 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. 設定 Tutorial http://linkdraw.org/sample.html
  • 44. 自動更新
  • 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. Demo
  • 47. 運用への導入
  • 48. Cacti + Linkdraw ● Cacti が既に運用で使われていた。 ● Cacti が snmp 情報を定期的に取得している。 ● Cacti (snmp) が持つ情報 – 機器名、ベンダ情報、インタフェース情報(インタフェー ス名、Up/Down、帯域、トラフィックなどなど) ● これらを定期的に取得する。 ● 取得した情報を Linkdraw の config(json) に変換 し定期的に置き換える。
  • 49. 用途 ● 材料 – SNMP – xFlow – IP L3 – OSPF LSA, Neighbor – BGP Peer – AS Path, Route – 機器設定 – 配線表 ● 対象 – サービスNW – オフィスNW – 実験用NW – 設定確認
  • 50. 最新情報はコチラ https://github.com/mtoshi/linkdraw/wiki/
  • 51. おしまい

×