UX Topology proposal

Introduction

OpenNMS provides network link discovery capabilities using protocols like CDP, LLDP, or using the Bridge MIB entries. Additionally, topologies can be visualized from VMware and also from custom GraphML data structures. This is a proposal to be able to show large network topologies with enrichted monitoring information based on the OpenNMS data models.

The current network topology represents network nodes through individual SVG icons (1). Monitoring information is indicated with additional icons for the severity (2). Links show detailed connection endpoint information with a tooltip (3), i.e. physical port, port speed, and the protocol which was used to discover the link you are looking at.

Problems in the current User Interface

Visualizing large networks (order of magnitude of 1000) in bigger deployments we see mainly scaling problems in the following form:

  • Different dimensions of icons make useful dynamic layouts complicated
  • Custom icons are very expensive to render and limits the browser to display a large network efficiently
  • Icons can’t be scaled in size very easily
  • We don’t see information related to a link endpoint
  • Monitoring information need to be arranged along with the icon and make layout complicated
  • Custom icons are error-prone, tedious, and hard to maintain, the effort-benefit ratio is very low
  • If you look at a larger more complex topology today, all you see is a big mesh of lines and icons you even can’t click anymore cause they are just too dense.

The following proposal is intended to improve this issue.

Research

There exist some benchmarks which give an idea of what modern browsers are capable of displaying.

As an orientation, with around 2000 simple circle elements the performance of the browser drops running on a Mid-2015 MacBook Pro with Core i7 2,8 GHz with Safari.

Some resources:

Similar solutions

Large network topologies need also to be visualized in the Freifunk project. The software which is used is called Meshviewer. The approach here is to use primitive logical icons and order them in a sphere.
The functions and status of nodes and links are coded as colors. The visualizedemphasized text network topology graph can be complex and does not require hierarchy.

These concepts are similar to visualize network topologies in OpenNMS with LLDP, CDP, Bridge MIB, OSPF, IS-IS, and VMware.

UX Concept and Drafts

Instead of showing icons, a node is represented as a simple circle where the color is coded as the Alarm Status (Severity). The concepts of detail level and how links are highlighted in Meshviewer and what OpenNMS is using on the geographical map for showing status information are combined.

In further the information panel is already similar to Meshviewer and is used in a similar way. The context and detail level are streamlined and in this UX concept driven by the focus of the selected items.

Besides the current status, the historical availability is shown as a ring in percentage.

To address the issue of displaying a large number of elements a concept used in computer graphics can be adapted to adjust display complexity with distance - Level of Detail (LoD). To have a better visual representation, the symbols use physical properties, like repelling each other so they don’t overlap and give enough space for node labels. In this concept, LOD 1 is more detailed than LOD 2. This concept is using the Discrete Level of Detail where each defined distance level has an associated representation model. The LoD is applied on the node and the link shown in the draft below:

A Link between nodes is divided in the most detailed representation. It gives the possibility to associate information for each connection endpoint and can be color-coded to represent alarm status on the specific link connection endpoint.

Not all links have status information associated and they are represented in a neutral color and are used to show the endpoint information, e.g. physical port, OSPF area with the interface, etc.

Workflow in the Topology

Displaying a large topology in LOD 3 will show just the nodes and links without any names and just the current Alarm Status. The links are just lines and don’t show status information. This is the mode whereas most information needs to be visualized in the most efficient way.

When a node is selected this node will be changed to the most detailed level and all directly connected neighbors get an increased LOD to show more context information. The links related to the selected node get the LOD 1 to show detailed link and connection endpoint information.

All nodes on further hop distance stay in LOD 3.

In a zoomed-out topology with LOD 3 and a Link is clicked, both Nodes get to the most detailed level including the associated Links. The Nodes connected to the nodes related to the selected Link increase LOD to 2. All other Nodes stay in the least detail Level 3.