Central Frontend for Segment Routing Applications

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

Objective: The goal is to create a central user interface that connects all existing and future SR apps. The Central Frontend should provide modularity, extensibility and reusability of the components.

In this thesis, the Central Frontend should have a landing page that draws up to 1000 SR nodes onto a map. GPU-accelerated processing is required to meet the performance requirements. The graph should cluster the nodes together into groups to maintain visibility. 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 applications to be launched. A mock SR App should be integrated in this thesis.

Result: It was decided to implement a ReactJS application that communicates with the Jalapeno API Gateway via gRPC-web. The sigma.js graph visualization library, which uses webGL, is used to display and render the network on a leaflet map in a performant way. TypeScript is used as the programming language.

The Central Frontend covers all mandatory features and use cases and renders up to 1000 nodes in less than two seconds. Additionally, a custom clustering algorithm groups the nodes together regionally to increase visibility. An SR app list was implemented to search and launch different applications. A node and edge counter was implemented as a mock SR app.