More Related Content
Similar to 20130629 linkdraw
Similar to 20130629 linkdraw (20)
20130629 linkdraw
- 2. 自己紹介
● 村越 俊克 (Murakoshi Toshikatsu)
● 出身: 静岡県藤枝市
● 趣味: サッカー、音楽
● 仕事: インフラ周りの運用
– Server, NW, Python, Ruby, etc
- 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
- 24. 仕組み(1) SVG
● 描画は SVG(Scalable Vector Graphics)
● http://www.w3.org/Graphics/SVG/
● これを test.svg として web サーバへ置くと2つの
サークルとそれらを繋ぐ1本の線が描画される。
- 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": "" }
]
}
- 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/
- 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": "" }
]
}
- 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, 説明, 色
ノード設定
名前、大きさ、色、リンク
ライン設定
区間、色、太さ、説明、リンク
- 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 とかで
定期的に置き換え
設定ファイルを読み込むインターバル
- 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
– 設定確認