ネットワーク構成図のレイアウト処理を考えてみる (2)

## はじめに

[ネットワーク構成図のレイアウト処理を考えてみる (1)](https://qiita.com/corestate55/items/9a1194cdb2c54d80c08e) では、構成図を描画する際にスケーラビリティが課題だという話をしました。

> こういったフィルタや絞り込みの機能を入れたところで、100 個～とか構成要素があるようなケースは現状まだまだ「見せる」のは難しいんですけどね (絞り込みとかをしていく段階で 100 個の候補がべろっと出てしまう)。

この "べろっと出てしまう" のをどうにかするために「ノード集約」を試してみたので今回はその話をします。

## 元データ

* layer1
  * 2 台のスイッチ (switch1, switch2)
  * 2 台のハイパーバイザ (hyp1, hyp2)
* layer2
  * 4 個のスイッチ (switch1/2, hyp1/2上の vSwitch)
  * 各スイッチに 10 個の VLAN (vlan10-19)
* layer3
  * 10 個の L3 Segment (Seg.10-19 : VLAN10-19 にそれぞれ対応)
  * 各セグメントごとに 2 つの VM

という構成になっています。テスト用のデータなので各セグメントは全部同じつくり。下記のデモは heroku で動かしているのでそちらを参照してみてください。

* http://netoviz.herokuapp.com/model/aggregate_check.json/nested

## 従来の NW 構成可視化

VLAN が 10 個程度あるだけでも、表示する階層を増やすとあっというまに図が埋まってしまいます。switch1/2 だけでも 10 x 2 = 20 vlan node が描画されているので、全部描画するとどうしてもこうなる。

![no-aggr.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154230/0c23eb74-3d7d-e4b0-8f5f-77cea178caa6.gif)

## ノード集約

### 概要

定義されている構成要素がドバっと出て埋まってしまわないように、以下の処理を加えました。

* 子ノード (下の階層にあるノード) が多数ある場合に集約して表示
  * これを疑似的にひとつのノードとして表示していて、まとめられたノードを「集約ノード」と呼んでいます。画面上、枠線が点線になっているものがそう。
* 集約ノードのツールチップで、どのノードを集約したのかをリスト表示
  * リストのうち見たいものをクリックしてドリルダウン

![aggr.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154230/41c530fa-af62-02b4-59ee-c21780324bfa.gif)

### 操作内容の詳細

上の例では、まず "Base depth" をいじって表示レイヤ数を増やしています。が、複数ある子ノードを束ねてひとつのノード(集約ノード)として見せてしまっているので、従来のように描画される情報が増えません。これは、表示される情報量が一気に増えて発散しないですむというメリットはあるものの、詳細化して見たい情報が拾えないというデメリットもあります。そこで、見たいノードについてはドリルダウンして集約から外します。

switch1 の子ノードの中から "switch1-vlan13" を選択

![01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154230/6b77beff-744e-164e-7e4b-f9b4cbe7f7a0.png)

選択するとこうなります。

![02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154230/ec3f7185-702e-4e25-c78b-112c74cdcaee.png)

となりの集約ノードのリストから "switch1-vlan13" がなくなっていることに注目してください。集約ノードの中から見たいものを取り出したので含まれていません。

続いて "switch1-vlan13" の子ノードとして "Seg.13" があるのでさらにそれを選択します。

![03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154230/6acd9e27-7c85-d0db-cff3-8ce8f058bef0.png)

”Seg.13" は switch1/2・hyp1/2 上の vSwitch にまたがっているので 4 箇所でハイライトされています。このとき、各ノードにある集約ノードの中から "Seg.13" のツリーに含まれるノード (vlan13) を取り出しています。「必要なもの・注目したいもの」 = 「選択したノードと、階層間で親子関係にあるもの」として抽出し、それ以外を集約ノードの中に束ねて入れてあります。

![04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154230/fc1a0c6b-a000-d0d2-83e1-ac5eefeabe61.png)

レイヤの上下をひっくり返してみましょう。さっきは layer1 を root node とするビューだったのを、layer3 が root node になるようにしてみます。これも数が多いですが、root node を変に集約してしまうと全体の構造がずれてしまうのでまあ仕方がない……。

![05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154230/4feedbc3-d4cb-0e18-06c0-38f361521199.png)

ハイライトされている "Seg.13" のところを拡大。

![06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154230/918359ae-ee44-4e29-aac2-e0e25731406b.png)

"Seg.13" は 4 つのスイッチにある VLAN bridge で構成されていることがわかります。

## おわりに

図のスケーラビリティを高めるための試みとしてノード集約を試してみました。いまのところ集約させるための条件はごくシンプルで、詳細表示のために選択されたノードまたはその親子かどうか、あとは子ノードのレイヤが同じかどうかという程度です。これでどのくらいまで実用性があるのかどうかとかは今後もうちょっと実際的なデータをもとに試してみることになるでしょう。

試してみてどうなるかはまだこれからですが、もしかすると、子ノードのレイヤ以外にもノードの種別とかごとに分けて集約させる……みたいな処理が必要になる? あとは隣接するノードへの接続とか子ノードまで見て同じパターンのものを集約するとか……? (そういった高度なノード集約機能が要るかどうか・要るってなった時に「同じパターン」をどうやって区別するのか……)