自作描画ツール 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つの
サークルとそれ...
SVG Sample
仕組み(2) config
● 描画の為の Config は json 形式。
● 上記の例は、A, B, C の3つのノード間を1本ずつ
線を引く Config 。
● 描画させたい情報をこの形式に変換する。
{
"lines": [
{ "...
Config sample
仕組み(3) Position
● ポジションは、ブラウザが更新される度にランダム
な座標が与えられる。
● ドラッグ&ドロップでポジション変更可能。
● SAVE すると次回からそのポジションを使う。
Random Random Saved
Position
(Json)
CGI
Linkdraw
仕組み イメージ
Config
(Json)
描画する為の情報
ノード、線、色、リンク、などなど
※ 設定したインターバルで定期的に読み込まれる。
Json
読込
Json
読込 座標
...
インストール
パッケージについて
● 現在、Linkdrawは、野良パッケージです。
● jQuery と D3 に依存しています。
– jQuery 公式パッケージ
● libjs-jquery
– D3 野良パッケージ
● http://code.lin...
インストール
● まず、jQuery をインストール。
● 次に D3 と Linkdraw を取得してインストール。
sudo apt-get install libjs-jquery
wget http://code.linkdraw.or...
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
|...
template.html
<!DOCTYPE html>
<meta charset="utf-8">
<head>
<script src="js/jquery.min.js"></script>
<script src="js/d3.mi...
template_config.json
● 描画情報を定義する設定ファイル。
● A, B, C という3つのノード間に1本ずつ太さ1pxで
線を引く設定。
{
"lines": [
{ "source": "A", "target": "B...
template_position.json
● ポジションをキープしておく為のファイル。
● 設置時は、空ファイルで ok.
● CGI プログラム によってポジションが保存される
為、書き込み権限が必要。
-rw------- 1 www-...
write.cgi
● ポジションを保存する為のCGIプログラム。
● /usr/share/linkdraw/src/write.cgi
● python2.6 以上で動作
-rwxr-xr-x 1 www-data www-data 412...
テンプレートの設定を
カスタマイズ
設定書式
{
"time": "20XX-01-23 01:23:45",
"descr": "This is test.",
"nodeColors": [
{ "id": "V1", "descr": "VENDOR1", "color":...
設定 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"></s...
Demo
運用への導入
Cacti + Linkdraw
● Cacti が既に運用で使われていた。
● Cacti が snmp 情報を定期的に取得している。
● Cacti (snmp) が持つ情報
– 機器名、ベンダ情報、インタフェース情報(インタフェー
ス名、...
用途
● 材料
– SNMP
– xFlow
– IP L3
– OSPF LSA, Neighbor
– BGP Peer
– AS Path, Route
– 機器設定
– 配線表
● 対象
– サービスNW
– オフィスNW
– 実験用N...
最新情報はコチラ
https://github.com/mtoshi/linkdraw/wiki/
おしまい
Upcoming SlideShare
Loading in …5
×

20130629 linkdraw

2,136
-1

Published on

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

  • Be the first to like this

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

No notes for slide

20130629 linkdraw

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

    Clipping is a handy way to collect important slides you want to go back to later.

×