Netoviz

Netoviz (Network Topology Visualizer) is a tool to visualize network topology data that based on RFC8345.

See also Netomox (Network topology modeling toolbox), the tool to construct RFC8345 based network topology data.

Demo

A live demo (with limited functions) can be viewed at the following URI.

• https://netoviz.herokuapp.com/

Demo movie

Blog

• Batfish を使ってネットワーク構成を可視化してみよう (1) - Qiita
• Batfish を使ってネットワーク構成を可視化してみよう (2) - Qiita
• Batfish を使ってネットワーク構成を可視化してみよう (3) - Qiita
• モデルベースのNW図で差分を可視化する - Qiita
• ネットワーク構成図のレイアウト処理を考えてみる - Qiita

Slide

• 「ネットワーク図」のモデル化とモデルを起点にした自動化の可能性 / onic2018 - Speaker Deck
• ここまでできる! 設定ファイルからのネットワーク構成可視化 / npstudy17 - Speaker Deck

Installation

Environment setup

This application depends on:

• Node.js (v10.x or later)
• NPM (v6.x or later)

Project setup

This application depends on:

• D3.js v4
• Nuxt.js

npm install

Initialize database file

To highlight hosts in the dialog by event log, SQLite3 database is used in this application.

For development mode (environment variable NODE_ENV is not production)

./bin/dbmigrate.sh

For production mode

NODE_ENV=production ./bin/dbmigrate.sh

To send a dummy log message (after running web server), use test script like below. It selects a name of hosts from specified model file and send random message to API server. (NOTE: push_alert.rb calls curl command.)

./bin/push_alert.rb ./static/model/target.json

Run the application

for development

npm run dev

for production

Build (compile and minify) script for production,

npm run build

and run the application.

npm run start

Development

Directory

• libraries
  • Basic class structure
  • lib/graph: Visualizer library
  • server/graph: RFC8345 data model and data convert library
• static/model: Topology data files (json)
  • Each topology data files are generated by Netomox. (see. netomox-examples)
• server: API Server

URI/API

Application (see pages)

• List/Table to select diagram
  • /
  • /model[/:modelFile]
  • /visualizer[/:visualizer]
• Diagram
  • /model/:modelFile/:visualizer
  • /visualizer/:visualizer/:modelFile

Server (JSON API) (see server/api.js)

• Alert handling
  • POST /api/alert (see push_alert.rb)
  • GET /api/alert/:number
  • GET /api/alert/all
• Topology data handling
  • GET /api/models (return topology model list)
  • POST /api/graph/:graphName/:jsonName
    • to save layout (for nested-graph)
  • GET /api/graph/:graphName/:jsonName
    • return diagram data converted from RFC8345-based topology model.

Lints and fixes files

npm run lint
npm run lint:fix