Batfish を使ってネットワーク構成を可視化してみよう (2)

## 前回からのつづき

[前回、Batfish を使ってネットワーク構成を可視化してみよう(1)](https://qiita.com/corestate55/items/8a39af553785fd77c20a) では、Batfish からどうにかして RFC8345 なトポロジデータを作って可視化する、そのデータは複数の階層(レイヤ)を入れることができて、レイヤ内での隣接情報だけでなく、レイヤ間での関係性を定義できることを解説しました。階層のあるトポロジの「見せ方」について、観点を分けてふたつ使ったのですが、今回は残りのもうひとつの「見せ方」を紹介します。

## 隣接関係(トポロジ)と階層間関係を合成してみる

### 何をしているものなのか?

NW 構成図(トポロジ) を自動的に描画するときに問題になること : ひとつは、複数の階層があるものをどうやって見せる (= 人に理解させる)か。もうひとつが、前回補足です取り上げた "NWトポロジ可視化でのレイアウト" をどう考えるか、です。そこに対するアプローチとしてこういう「見せ方」はどうでしょう、というのがこの記事で話をしたいトピックです。

まず、レイアウト問題。今回ここは(半)手動という形にしました。自動で良い感じにレイアウトするロジックが思いつかないし、手書きするときの「位置に意味を満たせる」に特定のルールを見つけることは難しいと思うので。ひとまず、もともとのトポロジ情報(位置情報を持たない)に対して、オブジェクト描画のための位置情報を後付けする形でやっています。

もうひとつの、複数の階層があるものをどう(見る人が)理解するのか……という点。普段は階層ごとに描いたものをどうにかして脳内マップして作業をしていると思います。でも、これはそれなりに習熟が必要なんですよね。なので、できればひとつの図の中にほかの階層の情報も埋め込みたい。そういう試みのひとつとして  [ネットワーク図を書くときに考えること\(2\) \- \# cat /var/log/stereocat \| tail \-n3](http://stereocat.hatenablog.com/entry/20120708/1341733222) でやってるような描き方があって、これは NW を構築・操作するうえで必要な情報を トポロジ + NW 機器コンフィグの重ね合わせ、みたいなイメージで表現している。

こんな感じのものをモデルベースにやれないかということで、以下で説明するような「見せ方」を作ってみました。個人的には「入れ子表現」といっています。階層間の上下(親子)関係を Tree 形式に変形して、親の中に子をいれる(再帰的に入れ子にしていく)形で描画します。(くりかえしになりますが、元データは同じで、可視化の方法が違うだけです。)
![a1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154230/b74e43fe-7254-b630-a95c-69c12babcea5.png)


### 上のレイヤから

ということでまず BGP AS を Root node (一番上) としたときの図を出してみましょう。イメージとしては、NW全体を「上」(上位レイヤ) から俯瞰するイメージになります。マクロな構造はどうつながっているのか、その中には何があるのか。

![01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154230/7e309124-fe24-65a9-1240-e2cc7fb22e8e.png)

これ、最初のほうにあげた AS 間トポロジ

<!-- ![02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154230/5631b69e-e036-5ba9-a18f-b5695b3d6b72.png) -->
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154230/5631b69e-e036-5ba9-a18f-b5695b3d6b72.png" width="40%">

と等価な形になっているのが分かりますか? 各 AS の中には、ASの子要素である BGP Proc, OSPF Area/Proc, Layer3 の各要素が入っています。(また、それらの子要素間のリンクも描画されています。) [デモ動画](https://www.youtube.com/embed/YKKWg7Ap6H8)に合わせて AS1 の子要素のスクリーンショットを貼ってみましょう。

BGP AS (AS1)

<!-- ![03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154230/c802ef22-17b0-a6d8-c94b-d15d3233b047.png) -->
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154230/c802ef22-17b0-a6d8-c94b-d15d3233b047.png" width="60%">

BGP Process (1.1.1.1/as1border1)

<!-- ![04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154230/13035eba-afbf-ca03-2f5a-b0f348cd3572.png) -->
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154230/13035eba-afbf-ca03-2f5a-b0f348cd3572.png" width="85%">

OSPF Area (Area1)

<!-- ![05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154230/30449e06-1f02-f5b7-d642-8bc3dcdde8c0.png) -->
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154230/30449e06-1f02-f5b7-d642-8bc3dcdde8c0.png" width="60%">

OSPF Process (as1core1)

<!-- ![06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154230/bdeb4560-5ab4-3d60-0b28-c041751acaf6.png) -->
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154230/bdeb4560-5ab4-3d60-0b28-c041751acaf6.png" width="60%">

Layer3 (as1core1)

<!-- ![07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154230/6bdbac7c-d263-cecf-c3f0-6bd5ea16f4c1.png) -->
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154230/6bdbac7c-d263-cecf-c3f0-6bd5ea16f4c1.png" width="60%">

さて。Layer3 のノードを選択したときに 2 か所ハイライトされていますね? これは、ふたつの routing process (bgp/ospf) がひとつのルータの上で動作していることを表しています。(階層間の関係 Tree の中でふたつの要素が共通の子ノードを持つ状態。)

### 下のレイヤから

今度は視点ひっくり返して、Layer3 のノードを Root にするとどうなるかを見ます。これは [元の NW 図](https://github.com/batfish/pybatfish/blob/master/jupyter_notebooks/networks/example/example-network.png) の再現でもあります。下から見た場合は、ネットワークを構成する機器と、その上にあるプロセス (あるいはその NW 機器が持つコンフィグ) およびその隣接関係を可視化するようなイメージになります。どのルータがどことつながっているのか、そこには何のプロトコルをしゃべるプロセスがいるのか、プロセスはどこのルータのプロセスと neighbor を張っているのか。

![08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154230/7416c1a8-8dbc-f1fc-6f10-0b9a4d838f32.png)


説明していませんでしたが、緑色の点線が grid (ドラッグして位置を変えられる) になっています。Root node が指定された grid の交点に合わせて描画される、というのが(半)自動レイアウトといっていた内容ですね。(Root node の位置だけ grid 座標指定で Root node の中身は自動レイアウト。) 入れ子になっている、ほかの階層にあるノード間リンクも描いちゃってるのでちょっと煩雑な図になっています。

Layer3 (as1core1)

<!-- ![09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154230/edb9463c-74d1-2d77-22ec-26c9e9b035fe.png) -->
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154230/edb9463c-74d1-2d77-22ec-26c9e9b035fe.png" width="70%">

OSPF Process

<!-- ![10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154230/7bba6c12-74d4-438e-5699-723cae287c42.png) -->
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154230/7bba6c12-74d4-438e-5699-723cae287c42.png" width="70%">

OSPF Area (Area1)

<!-- ![11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154230/29d90c95-475a-4dcf-a499-af314f71e92e.png) -->
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154230/29d90c95-475a-4dcf-a499-af314f71e92e.png" width="50%">

BGP Process (1.10.1.1/as1core1)

<!-- ![12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154230/5947cd63-f4b3-ee03-0799-75f041833913.png) -->
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154230/5947cd63-f4b3-ee03-0799-75f041833913.png" width="70%">

BGP AS (AS1)

<!-- ![13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154230/06774576-765e-07fb-ad81-a6e894fdd512.png) -->
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154230/06774576-765e-07fb-ad81-a6e894fdd512.png" width="40%">

今度は AS1 を選択すると3つのルータ(6個のプロセス)それぞれでハイライトされました。BGP AS が共通の親ノードとして複数のルータにかかっていることが分かります。逆に言うと、AS1 に関するプロセスを持っているノードが AS1 の構成範囲ですね。

## まとめ

階層のあるネットワークトポロジを定義すること・それを描画することについて、いくつか試してみたものを紹介しました。今回、データソースは NW 機器コンフィグで、そこから情報を batfish を使って取り出しています。ルーティングプロトコルごとの隣接関係と、Layer3 の情報をもとに複数のネットワークトポロジ(レイヤ)を組み立てて、レイヤ内の隣接関係とレイヤ間の関係性をどうやって可視化できるか、いくつかのビューを提示しています。

最終的には、こういうのをうまいこと使って、NW全体の構成をどう定義できるか、NWの全体感を把握して、どこに何があるのかをぱっとわかりやすく提示できないか、みたいなことを考えています。もっと先の狙いを言えば、まず先にこういう図を描いたらそのままコンフィグ生成してデバイスに投げてくれるとかできないかな……つまり、設計のために図を描いたんだったら、その図を "読んで" 自動的にNW作ってくれないかな、というようなことを考えています。

### 課題点

データソースとして Batfish のチュートリアルにあるコンフィグを持ってきたんですけど、これすごいシンプルな NW なんですよね。全部 Layer3 だから 物理構成 = L3トポロジ になっている。VLAN や VRF なんかの仮想化技術も使ってないし、クラスタリングするような冗長化機能もないし、オーバーレイみたいなのもない。そういう、実システムで理解や状態把握が厄介なあれこれ(仮想化・冗長化して重ねて見せるもの)をどうやるとうまく扱えるだろうか、というのがまだまだ見えていないところですね。

作ってるツールもいろいろ(アプリの設計上の)課題があるし……どうにかしたいもののフロントエンドの知識とか開発力が足りていない。

### 次回

タイトルに Batfish といれたものの、Batfish でデータとるところの話をごっそり飛ばしてしまっているので、[次回はそこの話をもうちょっと続けます](https://qiita.com/corestate55/items/10673ef74c33a24a0389)。