Important!
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).
GUI2 replaces only the front end (Javascript side of the GUI) - the Java backend for the 2 are the same.
For GUI2 it is recommended to follow the Template Application Tutorial and use the ui2 archetype at onos/tools/package/archetypes/ui2
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.
- Web UI Tutorial - Creating a Custom View
- Web UI Tutorial - Creating a Tabular View
- Web UI Tutorial - Creating a Topology Overlay
...
Also see the tutorial session presented at ONS 2016
Further topics can be viewed in the Developer's Guide for Customizing and Extending the ONOS GUI:
- Websocket communication
- Defining key-bindings
- Creating and using "fly-in" panels
- Defining custom "glyphs"