Central Frontend for Segment Routing Applications (Folgearbeit)

Initial Situation:

Many segment routing (SR) applications are developed and maintained at the INS and each of those applications has to create its own UI, usually from scratch.
The implementation of these user interfaces is never the main focus during the development, resulting in additional effort for each SR app project and reimplementation of existing components without maintaining a unified look and feel for each frontend.

Objective:

The goal is to create a centralised user interface that on the one hand dynamically connects and launches existing SR apps, and on the other hand makes the process of creating new user interfaces in a unified way very accessible.
With modularity and reusability of the components in mind, we want to create a process as well as a product to create and maintain the ecosystem.

To solve this, a Micro Frontend approach should be implemented, that allows for certain components to be hosted on a standalone web server and being rendered in the central web application.

The Central Frontend for Segment Routing Applications should contain a landing page that renders and clusters up to a thousand nodes in less than 10 seconds onto a geographical map. These performance requirements are achievable by using a graphical processing unit (GPU) supporting graph plotting framework. The landing page should be interchangeable with any other Micro Frontend.

Printed graphs should support a point clustering mechanism that groups nodes into clusters to maintain visibility depending on the zoom level of the map. The nodes and edges should be interactive and show the corresponding information coming from the Jalapeno API Gateway.

In addition, the Central Frontend should allow other SR apps to be launched and displayed inside a container on the same page.

Result:

The Central Frontend has been implemented as a React frontend (with TypeScript) that communicates with a Go API to manage and display the incorporated Micro Frontends.

The landing page Micro Frontend communicates with the Jalapeno API Gateway via gRPC-web and handles visualisation of the network onto a Leaflet map using the framework SigmaJS which supports webGL rendering. Additionally, the landing page clusters the network topology geographically to improve the visibility and user experience.

The Central Frontend covers all defined mandatory features and use cases, and the project was a success.