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