Extending and Reusing the New ONOS
GUI2
Sean Condon
Open Networking Foundation
ONOS GUI (2015-2017)
AngularJS 1.x based with Java backend - Web Sockets
ONOS GUI2 (2018-)
Angular 7.x based with same Java backend and Web sockets
Divided in to Framework library, Topo Library and main app
µONOS GUI (2019-)
Angular 7.x based with Go backend and grpc-web
For onos-config and onos-topo
Reuses Framework library
2
A brief history - ONOS GUI, GUI2 and µONOS GUI
What’s new?
• ECMAScript 6+ (ES6) - 2015
• Not the Javascript you knew - OO and functional
• Supported by all modern browsers now
• Typescript - strongly typed extension of ES6+
• Angular 2+ - Google’s open source web app platform
• Node JS 10/12, NPM, Bazel
Tooling
• Intellij Ultimate Edition or Web Storm
• Atom or MS VS Code
• Angular CLI
3
Not your old web app stack
4
Web Development - 3 dimensions
HTML+SVG
(Content)
CSS
(Display)
JavaScript/ES6
(Behaviour)
Angular Component is an isolated section
of all 3
• TS, CSS and HTML
• @Input() for parameters
• @Output() for events
• Inject services
• Referred to by selector
• CSS and dom is isolated
GUI2 on ONOS is about choosing
• best practice
• consistent approach
Libraries to make reusable
Use Angular structures at top level
• Module is a grouping unit
• Component is the main visual
element
5
Lots and lots of choice - too much choice?
Modules
Component
PipesDirectives
ClassesServices
Functions
Libraries
Application
6
ONOS GUI2
gui2-fw-lib
gui2-topo-lib
gui2-fw-lib module
gui2-topo-lib module
gui2
onos module
apps module
details module
flows module
ports module
intent module
...
fm-gui2-lib
fm-gui2-lib module
roadm-gui-lib
roadm-gui-lib module
ONOS GUI
Java Backend
Web sockets & REST
ROADM
App
FM App
ONOS
● Flows
● Intents
● Applications
● ...
7
gui2-topo-lib in more detail
Layout Service
summary
toolbar
instances
details
Zoomable
Draggable
Panel Base
topology
devicenode-svg*
hostnode-svg*
host-svg*
Topology Service
Traffic Service
map-selector
background-svg
grid-svg
map-svg
force-svg
nodevice-svg
subregion-svg*
Force Directed
Graph
µONOS onos-gui
onos-gui
onos-gui module
onos-topo module
utils module
onos-config module
gui2-fw-lib
gui2-topo-lib
gui2-fw-lib module
gui2-topo-lib module
onos-config-envoy
onos-topo-envoy
onos-config
onos-topo
admin
diags
gnmi
admin
diags
devices
grpc-web
gRPC
Kubernetes
microservices
9
Network Changes
Pending
change
selected
Reuse of
mast &
navigation
Delete or
commit
Pending
change
Rollback (if existing
change selected)
Only one
config part
of this
change
Can add
more
Previous
network
changes
10
Configuration view
Layers
panel
Model
plugin
driven
Config
layers
Path
bar
Value
editor
Pending
change
Previous
Config
RW paths (for
adding to config)
11
onos-config in more detail
Configurations
Change Value Pipe
Zoomable
Path Utils
Pending Net
Change Service
Layer SVG*
NW Changes
Models
Configuration
Container SVG*
Value Utils
Details
Details
Link Filter Pipe
Node Filter Pipe
Layers Panel Path Bar String Editor
Boolean Editor
Number Editor
Model Service
Hierarchy
Layout Service
Model Temp
Index Service
OnosConfigAdmin
Service
OnosTopoDevice
Service
OnosConfigGnmi
Service
OnosConfigDiags
Service
12
Code structure
Inputs and
Outputs
Injected
services
Default
layout for
component
Default
layout for
service
13
Angular CLI
1. Create new component to view changes in table
2. In the TS file add a new @Input() for the changeIDs
3. In its constructor add a reference to the OnosConfigDiagsService
4. Make call to service, implement callback - local cache. Proto file
5. Look at the @Component header - HTML, CSS, Selector
6. Edit the HTML to add a table and bind to data - *ngFor
7. Edit the CSS file for the table - border and background
8. Insert the selector for new component in to Layers Panel
9. Run with ‘ng serve’ to see it in action - Console, Inspect,Network
14
Demo - get coding
10. Add an entry to the routing module
11. Make the entry in to Layers Panel in to a button instead
12. Inject Activated Route to constructor
13. Add ngOnInit to handle parameter
14. Can remove ngOnChanges and the @Input
15. Run and show the routing
15
Demo - make a routed component - instead
• Fix all remaining issues on onos-gui
• Update onos-config proto files for continuous updates
• As onos-control is developed migrate topology view to µONOS
• Add in full support for onos-topo
• Upgrade to Angular 8
• Move some onos-gui common pieces to gui2-fw-lib
16
Next steps
How to Engage with Community
• Join #micro-onos channel on onosproject.slack.com
• Attend ONOS TST meetings
• bi-weekly Wednesdays at 9:00 PST/PDT
• Fork and send pull-requests to
https://github.com/onosproject/onos-gui repositories
• Participate in onos-[email protected] mailing list
• Questions?
• email sean@opennetworking.org
