React - UI

The web app is a more convenient way to gather information about the goSDN network.

Login with your username and password. The default credentials can be found inside the logs of the goSDN docker container: docker logs clab-gosdn_csbi_arista_base-gosdn

Current Functionality

Functional

• Read information about existing and new created switches
• Create new switches

Technical

• Continuously fetching the current state from the backend
• Frontend persistence of configuration

Essential

• Login / Logout
• Custom right click menu that provides functionalities depending on the clicked area

Technical Description

Tech Stack

• React 18
• Bootstrap 5
• Redux 5
• RTK-Query 2

Deployment

The web ui is integrated in the containerlab deployment. This uses the Dockerfile from docker/webserver/Dockerfile. It contains a two stage build. The first stage builds the deliverable HTML, CSS and Javascript. The second stage creates the actual webserver that provides the created web assets. The webserver is a nginx with default production ready configurations.

Development

During development you start the existing containerlab environment by executing

make containerlab-slim-start-configured

After that execute with yarn or npm

yarn
yarn build::api # generates api code provided by the swagger json file from goSDN
yarn dev

Your local dev environment is now accessible at localhost:3000. The dev server is running inside a docker container. The container is attached to the network that contains the rest goSDN containers.