View
1.161
Download
9
Category
Preview:
DESCRIPTION
Citation preview
自作描画ツール 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つのサークルとそれらを繋ぐ1本の線が描画される。
SVG Sample
仕組み(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": "" } ]}
Config sample
仕組み(3) Position
● ポジションは、ブラウザが更新される度にランダムな座標が与えられる。
● ドラッグ&ドロップでポジション変更可能。
● SAVE すると次回からそのポジションを使う。
Random Random Saved
Position(Json)
CGI
Linkdraw
仕組み イメージ
Config(Json)
描画する為の情報ノード、線、色、リンク、などなど
※ 設定したインターバルで定期的に読み込まれる。
Json読込
Json読込 座標
書込
ポジション情報(座標など)
※起動時の1回だけ読み込む。(無ければランダム)※保存命令の度にCGI経由で書き込まれる。
SVG出力
座標保存命令
ブラウザ
Save
1 1
2
3
インストール
パッケージについて
● 現在、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
インストール
● まず、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
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| |-- 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スクリプト
※ 一部省略
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>
※ 一部省略
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": "" } ]}
template_position.json
● ポジションをキープしておく為のファイル。
● 設置時は、空ファイルで ok. ● CGI プログラム によってポジションが保存される
為、書き込み権限が必要。
-rw------- 1 www-data www-data 0 Jun 26 22:41 positions/template_position.json
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
テンプレートの設定を カスタマイズ
設定書式{ "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, 説明, 色
ノード設定名前、大きさ、色、リンク
ライン設定区間、色、太さ、説明、リンク
設定 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"></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 とかで定期的に置き換え
設定ファイルを読み込むインターバル
Demo
運用への導入
Cacti + Linkdraw
● Cacti が既に運用で使われていた。
● Cacti が snmp 情報を定期的に取得している。
● Cacti (snmp) が持つ情報
– 機器名、ベンダ情報、インタフェース情報(インタフェース名、Up/Down、帯域、トラフィックなどなど)
● これらを定期的に取得する。
● 取得した情報を Linkdraw の config(json) に変換し定期的に置き換える。
用途
● 材料
– SNMP
– xFlow
– IP L3
– OSPF LSA, Neighbor
– BGP Peer
– AS Path, Route– 機器設定
– 配線表
● 対象
– サービスNW
– オフィスNW
– 実験用NW– 設定確認
最新情報はコチラ
https://github.com/mtoshi/linkdraw/wiki/
おしまい
Recommended