Matteo Scandolo

Italian

Web/Cloud Application

ONF Member of Technical staff

Developer

from a

developer

to

developers

What UIs are autogenerated from the data model? How does that work?

How can we extend the UIs to provide custom functionality?

How could they be used to operate CORD in production?

What is

controlling CORD

about ?

Who are our users?

Operators

deploy CORD, attach subscribers to it and monitor the system

Expectations:

  • bulk changes
  • status report
  • realtime notifications

Developers

introduce new features on top of a stable platform

Expectations:

  • stable APIs
  • documentation
  • debugging tools

The generative toolchain

a journey from xProto to the UIs

xProto


							option app_label = "core";

							message ServiceInstance (XOSBase, AttributeMixin) {
								optional string name = 1 [db_index = False, max_length = 200, null = True, content_type = "stripped", blank = True];
								required manytoone owner->Service:service_instances = 2 [db_index = True, null = False, blank = False];
								optional string service_specific_id = 3 [db_index = False, max_length = 30, null = True, content_type = "stripped", blank = True];
								optional string service_specific_attribute = 10 [db_index = False, null = True, blank = True, varchar = True];
								optional uint32 link_deleted_count = 11 [default = 0, help_text = "Incremented each time a provided_link is deleted from this ServiceInstance"];
							}

xProto options for GUIs: models

app_label
tosca_description
gui_hidden

xProto options for GUIs: fields

help_text
default, max_length, blank
verbose_name
gui_hidden
choices
validators
tosca_key

CORD Components

xos-tosca

Enable well adopted standards to be used in CORD

Chameleon

Provide a binding between the gRPC APIs exposed and REST APIs

  • borrowed from VOLTHA

  • expose a python webserver

xos-ws

Listen to changes in the
data-model and emit events
via web-sockets

  • read only

  • provide real time notification

  • enable progressive caching in the GUI

xos-gui

the operator portal

CRUD

+

Custom Views

Auto
generated

progressive
caching

progressive caching enables

  • full text search
  • dynamic population of relations dropdowns
  • real-time notifications

keyboard
shortcuts

  • Any view has its own shortcuts
  • view them by pressing ?

debug

extensibility

Services are that different that is not possible to generate a

one size fits all

visualization

The XOS GUI is extensible by design and support:

Custom views

  • At service level
  • At profile level

Custom views can access any API provided by and any component defined in the gui-core

UI Components

A component is a set of
Html + Js/Ts + Css
that combine functionalities in an isolated entity that can be included in an Html page

Component injection

  • In the dashboard
  • In the sidebar

Injected components can access any API provided by and any component defined in the gui-core

XosComponentInjector.injectComponent(
	'#dashboard-component-container',
	'xosAlert',
	{config: {type: 'success'}, show: true},
	'Welcome to CORD Build!',
	false
);

Extensibility is available through runtime loading of client side applications

Generator

Based on Yeoman

Setup the application skeleton

Create a development environment

yo xos-gui-extension

# Documentation

guide.opencord.org

  • Based on gitbook
  • Combine .md files from all the repos

API Doc

  • Generated from xProto
  • Exposed via swagger
guide.opencord.org/operate/rest_apis

Roadmap

Operational status

Better reporting

Desktop notifications

Notifications history

Faster build

Docker multi-stage build

Webpack chunk build

Service Graph

Improve positioning

Add feedback state

Support constraints

XOS CLI

Document xossh

Create a wrapper around it

Slice.objects.all()

slice list

Get involved in CORD!

change networking

cutting edge technologies

fun community

Requirements

You are the user!

this is your call!

CORD-UI

Bi Weekly meeting

Monday 10 -> 11am PDT

Thanks

@teone