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

ONOS Web UI -- Designed for Extensibility

Simon Hunt

Open Networking Lab ONOS Mini Summit

ONS 2016

2

So much content, so little time!

Just 40 minutes?

3

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

4

Introduction to the ONOS Web UI

• A visualization
• f your network
• A view into the

ONOS cluster [Demo]

5

Core UI Extension

Web UI Architecture -- Overview Schematic (1)

UI Extension Service

UiMessageHandlerFactory UiView UiView UiView UiMessageHandler UiMessageHandler UiMessageHandler RequestHandler RequestHandler RequestHandler RequestHandler RequestHandler

css.html js.html

HTML JS CSS

Web UI UiWebSocket ClusterService DeviceService LinkService HostService IntentService

6

Web UI Architecture -- Overview Schematic (2)

Web UI UiMessageHandler UiMessageHandler UiMessageHandler RequestHandler RequestHandler RequestHandler RequestHandler RequestHandler UiWebSocket ClusterService DeviceService LinkService HostService IntentService JSON

{ “event”: “deviceDetailsRequest”, “payload”: { “id”: “of:0000000000000002” } } { “event”: “deviceDetailsResponse”, “payload”: { “id”: “of:0000000000000002”, “name”: “switch-2”, “type”: “SWITCH”, “mfr”: “ACME Switch Co.”, ... } }

UiMessageHandler UiMessageHandler UiMessageHandler RequestHandler RequestHandler RequestHandler RequestHandler RequestHandler RequestHandler RequestHandler RequestHandler RequestHandler RequestHandler ClusterService DeviceService LinkService HostService IntentService

7

My UI Extension

Register during @Activate Unregister during @Deactivate @Component

Core UI Extension

Web UI Architecture -- Overview Schematic (3)

UI Extension Service

UiMessageHandlerFactory UiView UiMessageHandler RequestHandler RequestHandler

css.html js.html

HTML JS CSS

ClusterService DeviceService LinkService HostService IntentService

8

Web UI Architecture -- Source File Directory Structure

js.html css.html

viewId resources app view viewId

viewId.html viewId.js viewId.css

java

• rg.foo.app

src main “viewId” AppComponent UiView AppUiComponent RequestHandler AppUiMessageHandler

9

Creating a Custom View

• A “blank slate”
• Create a skeleton using the ui archetype

[Demo]

10

Creating a Table-based View

• Tabular Data
• Create a skeleton using the uitab archetype

“Nothing to see here… Move right along…”

[Demo]

11

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]

12

• Documentation on the Wiki

○ The ONOS Web GUI ○ GUI Topology View ○ Tutorials:

■ Creating a Custom View ■ Creating a Tabular View ■ Creating a Topology Overlay

• This Presentation

○ goo.gl/Ci2GZr

References

goo.gl/Ci2GZr

13

Q & A

?

14

Thank you!

!

15

ONOS -- Building a Better Network

Software Defined Transformation of Service Provider Networks Join the journey @ onosproject.org