GUI Overview

The ONOS GUI is a single-page web-application, providing a visual interface to the ONOS controller (or cluster of controllers).

For documentation on how applications running on ONOS can inject content to the GUI at runtime, see Injecting UI Content.

For documentation on the design of the GUI, see the GUI Architecture page.

GUI Configuration Notes

• The onos-gui feature must be installed in ONOS.
• The GUI listens on port 8181.
• The base URL is /onos/ui; for example, to access the GUI on localhost, use: http://localhost:8181/onos/ui
• The GUI has been developed to work on Google Chrome. The GUI has been tested on Safari and Firefox and minor compatibility adjustments have been made; these and other browsers may work, but have not been extensively tested, and are not actively supported, at this time.
• The key bindings associated with any view will work on any keyboard. The "Cmd" (⌘) key on an Apple keyboard is bound to the same key as the "Windows" or "Alt" keys on Windows or other keyboards.

GUI Session Notes

Note that the current version of the GUI does not support the concept of users, nor require login credentials. These enhancements will be added in a later release.

On launching the GUI you should see a screen that looks something like this:

The gray bar at the top is the Masthead, which provides a location for general GUI controls. In the current version (1.2.0 "Cardinal") the masthead contains:

•  the Navigation Menu Button

 (In future versions, the masthead will include session controls, such as user ID, user preferences, logout etc.)

The remainder of the screen is the "view", which defaults to the Topology View when the GUI is first loaded – a cluster-wide view of the network topology.

• The ONOS Cluster Node Panel indicates the controllers in the cluster.
• The Summary Panel gives a brief summary of properties of the network topology.
• The Topology Toolbar provides pushbutton / togglebutton actions to interact with the topology view.

For more detailed information about this view, see the Topology View page.

GUI Views

The GUI is capable of supporting multiple views. As new views are added to the base release, they will be documented here.

NOTE: The capability of adding views to the GUI dynamically at run-time is being developed. This will allow, for example, an ONOS App developer to create GUI content that works specifically with their application. The content will be injected dynamically into the GUI when the app is installed, and removed automatically from the GUI when the app is uninstalled. For more details on this feature, see Injecting UI Content.

The views included with the base release are:

*Tabular View: The GUI has multiple "tabular views" that are similar in look and interaction, but display different information. For a general overview of tabular usage, see the Tabular View page. For specifics on each view, follow the links in the above table.

For application-specific views, please see the documentation for those applications. (link to summary list of applications?)

Release Notes

This section provides a reverse-chronological listing of changes to the GUI for each release.

Cardinal – 1.2.0

• Websocket mechanism promoted to be framework-wide; a shared resource amongst the views.
• More tabular views added:
  • Links
  • Hosts
  • Intents
  • Applications
  • Cluster Nodes
  • Device Flows (hidden view)
  • Device Ports (hidden view)
  • Device Groups (hidden view)
• Changes to the Topology View:
  • links are now selectable.
  • toolbar added (note, keystroke commands still available)
    • node layer buttons moved from masthead to toolbar
  • sprite layer added
  • user selection choices persisted across sessions
  • summary and detail panels adjust size to window height
• Changes to the Device View:
  • slide out details panel appears when a device is clicked on
• Navigation Menu changes:
  • glyphs next to links for navigation
  • views organized into categories
• Note that the legacy (Avocet) GUI has been deprecated, and that the (Angular-based) GUI loads by default.

Blackbird – 1.1.0

• GUI Framework migrated to use AngularJS.
  • View-agnostic features refactored as Angular Services.
• Topology View refactored to be an Angular module.
  • Topology source code broken out into multiple source files.
  • Port Highlighting on links added.
• Device View added.
  • Implemented as a simple table for now; one device per row, sortable by column header clicks.
• Sample View added.
  • Skeletal example code.
• Light and Dark themes fully implemented.
  • Press the 'T' key to toggle theme.
• Beginnings of UIExtension mechanism implemented
  • Over future releases, this will facilitate the ability of Apps to inject their own content into the GUI.
    
    
• Note that the new (Angular-based) GUI currently co-exists with the old (Avocet) GUI.
  • By default, the Avocet GUI is launched; the base URL http://localhost:8181/onos/ui is mapped to http://localhost:8181/onos/ui/legacy/index.html#topo.
  • The new Angular-based GUI can be launched by manually adjusting the URL to be:  http://localhost:8181/onos/ui/index.html#topo, (that is, remove "legacy/"). 

Avocet – 1.0.0

• GUI implemented using a home-grown framework. 
• Single view (Topology View) implemented, displaying network topology and providing a certain level of interaction to show traffic & flow information.
• Although the 'T' key-binding (toggle theme) is present, the "dark" theme has not been implemented.

Previous : The ONOS CLI
Next : Distributed ONOS