Topoviewer

Overview

Yo, listen up! This mind-blowing project is all about hooking you up with the dopest network visualization tool out there. We're talking about taking your topology data and turning it into a sick cytoscape graph model that you can peep using https://js.cytoscape.org. It's like having a virtual eye candy for your network!

Now, let's break it down into two rad sections:

TopoEngine: This bad boy is all about converting your topology data (right now it's Container Lab) into a sick cytoscape graph model. Once translated, you can visualize that bad boy and watch your network come to life.

CloudshellWrapper: Here's the deal, we've got a wicked wrapper for https://github.com/zephinzer/cloudshell. It's like having your own personal Xterm.js frontend that connects to a Go backend and gives you a shell right in your browser. Yeah, you heard it right, access your shell using your browser. It's like having a virtual command center at your fingertips. And guess what? If you're running CloudshellWrapper on the same host as containerlab, you can even access the nodes of containerlab through your browser. How cool is that?

But hey, keep in mind, exposing your shell via a browser can be risky business. We're just putting it out there, so if you decide to dive in, do it at your own risk. Stay rad, my friend!

Quickstart

The simplest approach to utilise TopoViewer with Containerlab is to include the under the 'nodes:' section to a topology YAML file.

copy paste below start-up script, to deploy a Containerlab topology with topoviewer.

bash -c "$(wget -qO - https://raw.githubusercontent.com/asadarafat/nokia-DataCenterFabric-lab/main/demo-deploy.sh)"

Here is the quickstart video clip.

How-to guides

• See node Properties

  Simply click the node

  

• See link Properties

  Simply click the node

  

• Get to the node console

  web console

  
  terminal console

  

• Packet capture

  Wireshark Client Helper

  There are two type of suported client here, Windows version and MAC version, both of the clients can be find in "Setting Menu, TopoViewer Helper App". Once the Wireshark client helper installed, simply click Cross Launch Button in link Properties.

  Using Windows version of Wireshark Client Helper:

  • Download and install the Windows version of Wireshark Client Helper.
  • Ensure PowerShell installed in Windows client side
  • Ensure the Wireshark is installed in client side, from client side, otherwise the password need tobe entered manually
  • Setup SSH keyless access to ContainerLab host
  • Copy clabcapture.bat and clab-capture.reg into C:\Program Files\clab-client
  • Merge clab-capture.reg into Windows Registry, simply double click it.

  Using MAC version of Wireshark Client Helper:

  • Download and install the MAC version of Wireshark Client Help, extract and copy the app into /Applications folder
  • Ensure iTerm installed in MAC client side
  • Ensure the Wireshark is installed in client side.
  • Setup SSH keyless access to ContainerLab host from client side, otherwise the password need tobe entered manually
  • From link properties, click Capture Source/Target Endpoint cross-launch button

• Link impairment

Tested Environment

• containerlab version: 0.41.2, 0.44.3, 0.46.0
• docker-ce version: 24.0.2

Build TopoViewer Binary - Linux

build linux amd64 binary

vscode ➜ /workspaces/topoViewer (development) $ GOOS=linux GOARCH=amd64 go build -ldflags="-s -w" -o topoviewer cloudshellwrap
per/cmd/main.go 

Run TopoViewer Binary

Ensure to run binary file in the same directory with html folder Running inside dist folder

vscode ➜ /workspaces/topoViewer/dist (development ✗) $ ./topoviewer clab -t topo-topoViewerDemo.yaml  

Create Distribution Folder

vscode ➜ /workspaces/topoViewer (development ✗) $ ./tools/dist.sh 

Run TopoViewer Code

vscode ➜ /workspaces/topoViewer (development ✗) go run go_cloudshellwrapper/cmd/main.go clab --allowed-hostnames 149.204.21.68 --clab-user aarafat  --server-port 8087 --topology-file-json ./rawTopoFile/clab/nokia-MultiAccessGateway-lab/clab-nokia-MAGc-lab/topology-data.json 

Run TopoViewer Binary

 [aarafat@nsp-clab1 topoViewer]$ sudo topoviewer clab --allowed-hostnames 149.204.21.68 --clab-user aarafat  --server-port 8087 --topology-file-json /home/aarafat/topoViewer/rawTopoFile/clab/nokia-MultiAccessGateway-lab/clab-nokia-MAGc-lab/topology-data.json