This guide is mostly concerned with the legacy ONOS GUI (GUI1 - based on AngularJS - the obsolete version 1.x of Angular). The code for this is under onos/web/gui
It does not cover ONOS GUI2 (based on Angular 7+ - the replacement).
The archetype supports only creating a Custom View. This can be changed to a Tabular view by following the design of any tabular view e.g. Device View. Topology overlays are not supported yet in GUI2
For GUI2 the main code is under:
onos/web/gui2-fw-lib - the GUI framework utility components and classes
onos/web/gui2-topo-lib - the Topology view
onos/web/gui2 - the main GUI2 application
The text below is not modified for GUI2 and remains as it was for legacy GUI.
It is possible to run GUI1 or GUI2 on ONOS - GUI2 is the default - change to GUI1 use "app deactivate gui2" and then "app activate gui".
There are a number of ways that your application can integrate new content into the ONOS Web GUI. Below are a some walkthroughs that you may wish to peruse...
, as described below.
The following tutorials – using a fictitious company, Meowster, Inc. – show how each of these styles of content can be created. The tutorials build on each other, so it is recommended that you work through them in order.
- Creating a Custom View
- Web UI Tutorial - Creating a Tabular View
- Web UI Tutorial - Creating a Topology Overlay
Each of these tutorials describes a fictitious company – Meowster, Inc. – and walks through creating a type of ONOS application that injects new content into the GUI. If you want to work through all three tutorials, it is recommended that you create a top level directory, say meow, and build each example application under there.
Also see the tutorial session presented at ONS 2016
- Websocket communication
- Defining key-bindings
- Creating and using "fly-in" panels
- Defining custom "glyphs"