Over the years working with SDN and networking technologies, we realized there is a recurring request to display network topology in real-time, reactive manner, and in consumable fashion. While using already existing and open source tools (like Next UI in OpenDaylight) would suffice most times, we were hitting more and more problems while delivering solutions based on these technologies. To solve all issues with scaling, responsiveness, feature-set etc., we created the Topology Visualization Component that consolidates all features in one place for reuse.
We have developed the Topology Visualization Component as an Angular component, which can be used in Angular applications to create network visualization applications. Thanks to its modularity and customizability, the component can visualize any network from small company networks to large-scale data centers with thousands of nodes and links.
As every use case’s demands, requirements, and scale widely differ from each other, a scalable and universal component was needed. That is why we have based the topology visualization component on the Angular framework, which allows rapid development of responsive, modular and scalable applications.
Our previous experiences showed us that SVG technology for topology visualization is not performing well with very large network topologies. That is why we decided to use HTML5 Canvas instead. Canvas provides seamless animations and has great responsiveness even with thousands of nodes and links.
The topology visualization component includes extensive documentation and examples to help the developer while application creation. With Angular CLI, a basic application can be set up in minutes.
The basic application could easily be customized to a desired state. We have developed the topology visualization component with customization in mind.
The topology visualization component is developed as separate modules. The developer can decide and use which modules are needed for a particular project and add other modules whenever they are required.
Angular and HTML5 Canvas are used to ensure even with large amounts of data the application will be running effortlessly.
The topology visualization component works with small network topology with few nodes and links but truly shines with large-scale topologies. We are continually adding new features based on our client’s requests and needs. Watch this space out for many exciting features to be announced in the near future.
