Central Frontend for Segment Routing Applications

Obernhuber, Leonard and Gajic, Davor (2022) Central Frontend for Segment Routing Applications. Other thesis, OST Ostschweizer Fachhochschule.

[thumbnail of HS 2021 2022-SA-EP-Obernhuber-Gajic-Central frontend for Segment Routing applications.pdf] Text
HS 2021 2022-SA-EP-Obernhuber-Gajic-Central frontend for Segment Routing applications.pdf - Supplemental Material

Download (6MB)


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.

Item Type: Thesis (Other)
Subjects: Technologies > Network
Brands > Cisco
Technologies > Frameworks and Libraries > React
Technologies > Programming Languages > TypeScript
Metatags > INS (Institute for Networked Solutions)
Divisions: Bachelor of Science FHO in Informatik > Student Research Project
Depositing User: HSR Deposit User
Thesis advisor
Metzger, Laurent
Date Deposited: 20 Apr 2022 08:53
Last Modified: 20 Apr 2022 08:53
URI: https://eprints.ost.ch/id/eprint/1023

Actions (login required)

View Item
View Item