Empfohlen
Weitere ähnliche Inhalte
Was ist angesagt?
Was ist angesagt? (18)
Ähnlich wie 20130629 linkdraw
Ähnlich wie 20130629 linkdraw (20)
20130629 linkdraw
- 1. 自作描画ツール Linkdraw の紹介 Toshikatsu Murakoshi 2013/06/29
- 2. 自己紹介 ● 村越 俊克 (Murakoshi Toshikatsu) ● 出身: 静岡県藤枝市 ● 趣味: サッカー、音楽 ● 仕事: インフラ周りの運用 – Server, NW, Python, Ruby, etc
- 3. 概要 ● 自作描画ツールの紹介 – 開発の背景、仕組み、インストール ● 運用への導入 – 実際の運用での導入事例
- 4. 自作描画ツールの紹介
- 7. 背景
- 8. 背景 (1) ● 運用をしていると... – 複雑な機器設定 – 昨日見た設定を今日も見直す – 知らない間に機器が増えている – 今どんな状態？ ● けっこうな時間と労力をかけている。
- 10. どう可視化する？
- 11. 表 From To BWidth State A B １G Uｐ B C １G Up C D １G Down D A １G Up D A １G Down
- 12. トポロジ
- 13. トポロジ だとうれしい。
- 14. 背景(2) ● 運用をしていると... – 資料の場所がわからない – あの WEB UI の URL なんだっけ、どこだっけ ● やはり、けっこうな時間と労力をかけている。
- 15. 直ぐに辿りつきたい
- 16. 運用情報 ● 運用情報は、既に何らかの形式で存在してたりする。 – 設計図 visio, pdf ... – 運用情報 wiki … – 統計情報 snmp, rrd ... – 監視情報 nagios, cacti … – その他 DB … – などなど。
- 19. イメージ ● ブラウザ でトポロジを表示。 ● トポロジと既存の運用情報をリンク。 Click 連絡先 Tips グラフ 機器設定 監視情報 Click Click ブラウザ wiki
- 20. 作ってみました。
- 21. 描画ツール Linkdraw
- 23. 仕組み
- 24. 仕組み(1) SVG ● 描画は SVG(Scalable Vector Graphics) ● http://www.w3.org/Graphics/SVG/ ● これを test.svg として web サーバへ置くと２つの サークルとそれらを繋ぐ１本の線が描画される。
- 25. SVG Sample
- 26. 仕組み(2) config ● 描画の為の Config は json 形式。 ● 上記の例は、A, B, C の３つのノード間を１本ずつ 線を引く 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/
- 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 という３つのノード間に１本ずつ太さ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
- 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, 説明, 色 ノード設定 名前、大きさ、色、リンク ライン設定 区間、色、太さ、説明、リンク
- 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 – 設定確認
- 51. おしまい