20130629 linkdraw

自作描画ツール Linkdraw の紹介

Toshikatsu Murakoshi

2013/06/29

自己紹介

● 村越俊克 (Murakoshi Toshikatsu)● 出身: 静岡県藤枝市

● 趣味: サッカー、音楽

● 仕事: インフラ周りの運用

– Server, NW, Python, Ruby, etc

概要

● 自作描画ツールの紹介– 開発の背景、仕組み、インストール

● 運用への導入– 実際の運用での導入事例

自作描画ツールの紹介

Linkdrawという描画ツールを作ってみました。

Linkdraw

● 無数に存在するアイテムとアイテム間の繋がりをドラッガブル且つリンカブルに描画する為のツール。

背景

背景 (1)

● 運用をしていると...– 複雑な機器設定

– 昨日見た設定を今日も見直す

– 知らない間に機器が増えている

– 今どんな状態？

● けっこうな時間と労力をかけている。

あらかじめ

可視化

しておきたい

どう可視化する？

表

From To BWidth State

A B １G Uｐ

B C １G Up

C D １G Down

D A １G Up

D A １G 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 サーバへ置くと２つのサークルとそれらを繋ぐ１本の線が描画される。

http://www.w3.org/Graphics/SVG/

SVG Sample

仕組み(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": "" } ]}

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 という３つのノード間に１本ずつ太さ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/

おしまい

Documents

20130629 linkdraw