Moving the CORD GUI to a Single Page App

Post by Matteo Scandolo, UI Developer for CORD at ON.Lab

In order to support new features in CORD and XOS we have decided to completely separate the GUI from the core and to make it a javascript-driven client side Single Page Application. The main feature we intend to support, and that drove this decision, is to enable the stacking of different XOS instances. This would give us the ability to configure multiple Central Offices from a single entry point, which is a requirement for E-CORD

The current CORD interface (screenshot below) leverages the Django Admin UI functionalities to enable a fast and simple prototyping of the data model. There are limits to this implementation, mostly in terms of how flexible and extensible the system is. Being a server side rendered application it would have been complex to integrate functionalities such as real time notifications and the ability to collect data from multiple backends.

screen-shot-2016-12-02-at-4-56-54-pm

That’s why we decided to migrate toward a client-side application, and along with the establishment of modern web technologies and best practices, this refactoring will give us the opportunity to improve CORD’s usability, as well as its look and feel. Of course these are two objectives that can be fully achieved only with the help of the community, and in this particular case both from the operator and developer point of view.

The key features we aim to enable with this project are:

  • Retrieve information from different XOS instances, combining them into the same view
  • Receive real-time WebSocket based notifications
  • Dynamically on-board custom views along with services in the system
  • Automatically generate the views that support basic CRUD (Create, Read, Update and Delete) operations

We plan to drive the new implementation by taking advantage of the Angular2 framework, as it is already used in XOS. All the custom views that are available in the current system are based on Angular 1.5.8, and so they can be imported using the ngUpgrade module.

On the graphic design side we decided to kick it off using a template. We’ve picked a selection of templates below that look like they could work well. Feel free to send us ideas for other options if you know of other templates that might work better.

INSPINIA
screen-shot-2016-12-01-at-8-23-21-am

Pixel Admin
screen-shot-2016-12-01-at-8-23-10-am

LUNA
screen-shot-2016-12-01-at-8-22-50-am

We are strongly looking for support from the community on this project, as we feel that the main control interface of CORD is something important that can drive the success of the project.

How can you get involved?

Whether you are a developer, an operator or simply a stakeholder of CORD feel free to send us your comments and suggestion.

We are particularly looking to collect uses cases or desired data representation and technical contributions.

Feel free to reach us via direct email at teo at onlab dot us, through the cord-discuss@opencord.org mailing list or on the OpenCord slack in the #UI channel.

Why should you get involved?

If you are an operator this will be a great opportunity to request views and behaviour that will simplify your daily job.

If you are a developer you’ll have the opportunity to participate in the development of a big and complex application that will involve cutting edge technologies and well established workflows, while at the same time collaborate with other great developers in the community and gaining knowledge in frontend development tools and on the CORD project.