Skip to content
RFC8345-based Network Topology Visualizer
JavaScript Vue CSS Other
Branch: develop
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
bin
components
fig
layouts
lib Update packages and fix lint issues Nov 17, 2019
pages
server Fix topology-data-api for netomox-examples. Oct 1, 2019
static
store Use Nuxt.js Sep 29, 2019
.editorconfig Use Nuxt.js Sep 29, 2019
.eslintrc.js
.gitignore
.prettierrc
LICENSE
Procfile Use Nuxt.js Sep 29, 2019
README.md
babel.config.js
nuxt.config.js Use Nuxt.js Sep 29, 2019
package-lock.json
package.json Update packages and fix lint issues Nov 17, 2019

README.md

Netoviz

JavaScript Style Guide

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.

Demo movie

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

Blog

Slide

Installation

Environment setup

This application depends on:

Project setup

This application depends on:

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)
  • 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
You can’t perform that action at this time.