diff --git a/README.md b/README.md index a418a5ab7f16d48e502888519991e8f9476f7c03..3699e7774a9e7e1a6b01fa046e5fa156851615eb 100644 --- a/README.md +++ b/README.md @@ -394,3 +394,10 @@ There exists a `example_tests` folder where examples of using the `integrationTe Run the integration tests with `make controller-integration-tests`. If you want to debug the tests, use `make controller-integration-tests-debug-up` to start the environment. You can now use the debugger to debug the test (but not the goSDN side). Stop the environment when you are done with `make controller-integration-tests-debug-down`. + +## Web UI +Despite the goSDN console the web ui provides a more convenient way to gather information. The web UI is also integrated in the containerlab so that it also accessible after executing `make containerlab-start`. The web ui is accessible at [localhost:8088](http://localhost:8088) +<img src="documentation/figures/react-ui/landing_page.png" /> +Currently the UI provides a easy way to ready properties of switches. You can also create new switches which is the equivalent command to `mne create` in the console. You find a more detailed docu [here](react-ui/README.md) + + diff --git a/documentation/figures/react-ui/landing_page.png b/documentation/figures/react-ui/landing_page.png new file mode 100644 index 0000000000000000000000000000000000000000..c7b661c63bc96551282d3a34594c24e87b71fa6b Binary files /dev/null and b/documentation/figures/react-ui/landing_page.png differ diff --git a/react-ui/README.md b/react-ui/README.md index b6c8b0ba1ddecd92fd9d705d438f2de760a5085f..3f765437b2349e3b376550cb23b24622ac93cb2a 100755 --- a/react-ui/README.md +++ b/react-ui/README.md @@ -1,11 +1,40 @@ # React - UI -This is the UI for the goSDN project. It's a webapp written in react +The web app is a more convenient way to gather information about the goSDN network. -### Getting started +<img src="../documentation/figures/react-ui/landing_page.png" /> +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` -### Requirements -- Docker +## 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 -### Author -Matthias Feyll \ No newline at end of file +## 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](docker/webserver/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](http://localhost:3000). The dev server is running inside a docker container. The container is attached to the network that contains the rest goSDN containers. \ No newline at end of file