6. Web User Interface

6.1. Preface

When you have trouble with things—whether it’s figuring out whether to push or pull a door or the arbitrary vagaries of the modern computer and electronics industries—it’s not your fault. Don’t blame yourself: blame the designer. (Donald Norman, The Design of Everyday Things, Introduction to the 2002 Edition, p. x)

Please blame us if it is not easy to deal with SANET web user interface ;-)

...but also consider that we are improving it while you are reading this document...

6.2. Goals

The web user interface is the main interface to let end users watch the status of the network and its elements.

Its goals are:

• to put in evidence network problems
• to be as simple and as intuitive as possible
• to show only the monitored resources the user want to see

6.3. Fundamentals

To ease users interaction with SANET, much attention has been addressed towards the design of the interface and its components.

This section will stress out all the features that we hope would have been already perceived, and would keep you comfortable in the environment we designed.

6.3.1. The web user interface

• it is realized for the end user that needs to see, not to configure (task performed by network operators). For this reason the configuration capabilities offered by the interface are restricted to data presentation and classification: saving elements position, adding notes, etc.
• it must be pleasant and intuitive: for particular kind of users, especially for accessibility issues, we propose alternate simpler but more suitable interfaces. The web interface presented here takes advantage of Web 2.0 potentiality and new generation browsers.

6.3.2. Resources presentation

The basic WUI entity is the resource.

Web User Interface - Resources’ graphical features

Resources are characterized by homogeneous graphical representation and interaction model.

• Presentation: each resource is represented by an hyperlink and by a type-related icon.

• Tooltip: hovering with the pointer over a resource and waiting some seconds, a tooltip with resource’s details is shown.
• Contextual menu right-clicking a resource a contextual menu appears, showing the possible operation to execute on the resource.
• Page: each SANET page is referred to a resource. Such resource defines the page’s context and all the informations are shown from its perspective.

6.3.3. Page structure

The page structure (see Web User Interface - General structure)contains:

• Headings: including

  • navigation bar identifies the path followed to reach the present resource
  • section selector shows SANET’s section and highlights the present one
  • logged in username
  • time: set up according to the hardware clock of the machine hosting SANET. All the timestamps used in the rest of the page are synchronized with this one.

• Resource panel: is the main point of access to all the resources of the present section. It includes search block and browse blocks, that is a forest having all the first-level trees as containers.

• Page body (figures: Web user interface - Application blocks and Web User Interface - State block): it includes all the generic blocks and the resource related specific blocks.

Web User Interface - General structure

6.3.4. Page body blocks

Each block in the page body, hence related to the context of the presently visualized resource, has an homogeneous structured composed of header and body. In the header the set of possible block actions are included.

Web user interface - Application blocks

Actions common to each block are:

• Open/close
• Full screen toggle

Blocks whose content can change over time also have the action:

• Autoupdate toggle

If the visualized resource includes other resources, each block refers to the resources included directly or indirectly, obtaining an in depth view.

6.3.5. Colours and states

In SANET there is a direct mapping between possible states and resources colors. The colors used in state charts, current states, states switch, states log, maps, etc. always use the following mapping:

• UP: Green. No problem.
• FAILING: Yellow. Some (tolerated) problem.
• DOWN: Red. Problems present.
• UNCHECKABLE: Gray. It is not possible to check the present state.

6.4. Details

6.4.1. Resources

SANET base resources are presented in Network representation: application resources they are:

• Site: see The site
• Container: see Container
• Node: see Network node
• Interface: see Network interfaces and links
• Target: see Target
• Measure: see Measure

Each application can add its own resources maintaining the interface’s coherence. An example of additional resource is given by:

• Report: it identifies a statistical report for a specific resource or the resources it contains.

6.4.2. Page blocks - Resource Panel

The resource panel is the point of access to all the system’s resources for the present section.

In the main section (state) there are the blocks:

• Search: executes a fast search matching among resource names to rapidly find any system resource
• Browse: tree structure to browse through the resources. Resources are structures hierarchically, hence they are represented as a tree, similar to the directory structure of common file systems.

6.4.3. Page blocks - Page body

In the page body main section (state) the following blocks are present:

• Details: general resource details, including some informations retrieved via SNMP (if the resource is a network interface) and a list of the targets having problems.
• Resource state: it shows quantitative informations about the state of the resource. Targets are grouped by their states. If the resource is a node it also shows the RTT time.
• Monitoring: it includes a list of the targets with their timestamped present state and last state change. It is possible to obtain data of the last performed checks and the DOWN checks through RSS (see Web User Interface - State block).
• Measures: it shows a list of the measures with the possibility to visualize the related charts spanning over various time intervals.
• Logging: it lists all the state changes for any resource’s target and shows the Poller agent’s details. This block is closed by default since its content is only needed for troubleshooting activity.

Web User Interface - State block

6.5. Network maps

Each container is bound to at least one network map. Maps contain resources to be visualized, typically the resources directly contained in the present container, or the resources recursively contained. At the moment it is possible to define what resource to include in each map via Command Line Interface [TDB Link].

Maps are auto-updating and show resources’ and links’ states. To ease the network representation and make it more readable, some states aggregation algorithms are used:

• node or interface DOWN: it happens if the primary target (usually the ping or the operstatus respectively) is DOWN.
• node or interface FAILING: a node or an interface are in FAILING state if at least one of the check they contains is in FAILING or DOWN state.
• container DOWN: it happens when all the checks included in the container are DOWN.

• container FAILING: it happens when at least one check included is in DOWN or FAILING state.

Maps are interactive and allows to:

• show/hide interface names.
• move elements around and save their positions.
• set the zoom level.
• set the edge bending (if multiple links between pair of resources are present).

Maps - Container with multiple links (blue color means UNAPPLIED state)

Maps - Custom icons

`Maps - Routers and switches map