Overview (note: still WIP)

The ONOS GUI is a single-page web-application with hash-navigation. The GUI system comprises client-side code (a single HTML page, javascript libraries and modules, CSS files, etc.) and server-side code (Java classes that interface to ONOS Server APIs). The GUI web page is served up by a web server running on the ONOS instance.

Client-Side Architecture

The client side code is comprised of:

The main application page
  • index.html
Third party libraries
  • tp/jquery-2.1.1.min.js
  • tp/d3.js (v3.4.12)
  • tp/topojson.v1.min.js

Framework code and supporting modules

  • onos.js
  • onosFlash.js
  • onosFloatPanel.js
  • onosMast.js
  • onosQuickHelp.js
Supporting libraries
  • d3Utils.js
  • geometry.js
  • glyphs.js
Topology viewer
  • topo.js
View module templates
  • module-div-template.js
  • module-svg-template.js
Sample views
  • sample.js
  • sampleHash.js
  • sampleKeys.js
  • sampleRadio.js

... along with their associated *.css stylesheets. 

The structure of the framework allows for the registration of multiple "views" and the subsequent navigation between them. 

For the first release, however, there is but a single view, the Topology View.

View Registration and Life-Cycle Callbacks

A view registers with the framework via a call to the addView(...) function.

...code to go here...

 

Topology View

<details of websocket communication with the server>

 

Server-Side Architecture

 <details of web-socket handling, JSON event protocol, etc.>