Just 40 minutes? 2 Outline A Brief Introduction to the ONOS Web - PowerPoint PPT Presentation

ONOS Web UI -- Designed for Extensibility Simon Hunt ONOS Mini Summit ONS 2016 Open Networking Lab

So much content, so little time! Just 40 minutes? 2

Outline ● A Brief Introduction to the ONOS Web UI ● Web UI Architecture ○ Overview Schematic ○ Source File Directory Structure ● Use Maven Archetypes to… ○ Create a Custom View ○ Create a Table-based View ○ Create a Topology Overlay ● Q & A 3

Introduction to the ONOS Web UI ● A visualization of your network ● A view into the ONOS cluster [Demo] 4

Web UI Architecture -- Overview Schematic (1) Core UI Extension UI Extension Service ClusterService DeviceService UiMessageHandlerFactory LinkService RequestHandler UiView UiMessageHandler HostService RequestHandler UiView UiMessageHandler RequestHandler IntentService UiView UiMessageHandler RequestHandler RequestHandler js.html HTML JS css.html CSS UiWebSocket Web UI 5

Web UI Architecture -- Overview Schematic (2) JSON UiWebSocket Web UI ClusterService ClusterService RequestHandler RequestHandler RequestHandler { DeviceService DeviceService “event”: “deviceDetailsRequest”, UiMessageHandler UiMessageHandler “payload”: { RequestHandler RequestHandler RequestHandler “id”: “of:0000000000000002” LinkService LinkService } UiMessageHandler UiMessageHandler RequestHandler RequestHandler RequestHandler } HostService HostService UiMessageHandler UiMessageHandler RequestHandler RequestHandler RequestHandler { IntentService IntentService “event”: “deviceDetailsResponse”, RequestHandler RequestHandler RequestHandler “payload”: { “id”: “of:0000000000000002”, “name”: “switch-2”, “type”: “SWITCH”, “mfr”: “ACME Switch Co.”, ... } } 6

Web UI Architecture -- Overview Schematic (3) Core UI Extension UI Extension Service ClusterService @Component Register during @Activate My UI Extension Unregister during @Deactivate DeviceService LinkService UiMessageHandlerFactory HostService RequestHandler UiView UiMessageHandler RequestHandler IntentService js.html HTML JS css.html CSS 7

Web UI Architecture -- Source File Directory Structure src main AppComponent java AppUiComponent org.foo.app UiView “viewId” resources AppUiMessageHandler app RequestHandler view viewId viewId .html viewId .js viewId .css js.html viewId css.html 8

Creating a Custom View ● A “blank slate” ● Create a skeleton using the ui archetype [Demo] 9

Creating a Table-based View ● Tabular Data ● Create a skeleton using the uitab archetype “Nothing to see here… Move right along…” [Demo] 10

Creating a Topology Overlay ● Adding functionality to the Topology View ● Create a skeleton using the uitopo archetype ● Unfortunately, we’ll be glossing over many details ○ Your homework is to study the code in your own time :) [Demo] 11

References ● Documentation on the Wiki ○ The ONOS Web GUI ○ GUI Topology View goo.gl/Ci2GZr ○ Tutorials: ■ Creating a Custom View ■ Creating a Tabular View ■ Creating a Topology Overlay ● This Presentation ○ goo.gl/Ci2GZr 12

Q & A ? 13

Thank you! ! 14

ONOS -- Building a Better Network Software Defined Transformation of Service Provider Networks Join the journey @ onosproject.org 15