Dear customers and community!

We are going to introduce a new approach for us! Today we are searching for your feedback on a new project we are currently working on. We want to be 100% sure we are on the right path.
The vision is to create an NGCP Admin interface we all will love to use.

The first reaction for such a project usually is "No-no-no, keep the current interface!!!".
TL;DR: we are not planning to change the interface (yet ;-)).

At the first stage, let's synchronize the goals we are trying to achieve:

• Sipwise wants to provide a modern Admin user interface (UI) that is easy to use and develop.

• Sipwise wants to establish communication and collaboration channels with the community and customers. All of us should be able to improve the parts we care about.

• NGCP development should be pleasant. We must have fun doing it!

Right now we would like to present you the VERY FIRST PROTOTYPE of the concept
we have created to achieve all the points mentioned above:

Open

Open

It is available on all mr9.0.1+ systems, to enable it execute:

sudo ngcpcfg set /etc/ngcp-config/config.yml www_admin.http_admin.ui_enable=yes
sudo ngcpcfg apply "Enable Admin v2 interface"

At this stage, you will enable the prototype of the new JS-based Admin interface.
To open it, use URL https://your.ngcp.example.org:1443/v2/.
The prototype is fully operational, and it should be safe to use it even in production.
You will still have your old Perl-based web interface on the well-known URL http://your.ngcp.example.org:1443/,
but you will be able to switch between interfaces on the fly!
Note a small link in the right bottom corner “Go to new admin panel“:

As mentioned, it is a very early prototype. At the moment it doesn't have some essential functionality, like localization, etc. Still, you can play with it a bit and share your feedback with us about the direction we are moving.

What is our plan to achieve our goals? To have fun and speed up with the development:

• We want to escape from a Perl-based Catalyst Admin interface to the modern Vue.JS-based framework. More and more developers speak JavaScript or alike, the Perl language is, unfortunately, less and less popular.

• We want to allow our customers and community to send us fixes and pull requests for the components they would like to fix/improve. Today you can find JS-based Admin UI sources on https://github.com/sipwise/ngcp-admin-ui/ (GPLv3 license). Feel free to fork and improve!

• We want to have fun collaborating with you together! Check the README file on GitHub - it contains very short and very powerful instructions on how to start the playground and develop your first feature/fix on the new Admin UI.
  Literally, in one command you can start a Docker-based environment which has all the necessary dependencies in a proper version (like yarn/quasar/vue.js/...), play with it, and destroy the Docker container to keep your system clean. It opens a long list of possibilities for all of us to collaborate and be in sync!

• TL;DR: we are looking for your feedback and your assist to create an NGCP Admin interface of our dream!

Let's see what we have already on our prototype:

Fully integrated Proof of Concept in NGCP.

Enable one option in config.yml, and the new Admin UI is available for daily usage nearby to the current one.
It should be safe to use it even in production. Still, we would like to remind you that it is a very early prototype, play with it in a LAB first.

Authentication/security.

NGCP Admin v2 interface has built-in Authentication and supports all security models we have, like Administrator/Reseller/CCare/...
All users who can access the current Admin interface should be able to access the new Admin UI v2 too, and it should be safe to work there.

Adoptable interface.

NGCP Admin v2 interface adapts to the screen size on the device you have (and utilize all the free space).
We all are a bit tired of the small pop-up windows on the current Admin interface. The new version allows you to:

• Fold the menu

• Hide the menu

• Expand one/selected table to the full screen

Inline editing

NGCP Admin v2 interface allows you to edit records inline, without opening additional small popup windows. It also saves some mouse clicks:

The "Administrators" page was fully migrated.

At the moment, only one page has been fully migrated from Perl to JS to show you the usability of v2.
It is the "Administrator" page. Please play with it and share your feedback. It is also using NGCP REST API only (see below).

REST/HYBRID/IFRAME modes concept

We are planning to migrate the Admin UI to NGCP REST API only.
Unfortunately, at the moment, not all Admin WEB pages have the necessary NGCP REST API methods and attributes.
To prevent JS-based team dependencies on REST API backend functionality, we have designed a three steps approach.

• Step one: all Perl-based pages are available in v2 using old-school <IFRAME> technology.
  Yes, we aware of the recommendations to avoid iframes for a list of good reasons, but it is a temporary solution to give us the ability to play with the new v2 web interface and keep usability and look&feel in sync with v1.

• Step two: migration from Perl to JS pages can be based on REST API methods (recommended) or JSON blobs returned by Perl-backend for old v1 panel.
  For end-users, it will look like already migrated to the JS page, but under the hood JS-frontend will call v1 Per-backend to receive the data in JSON blobs.

• Step three: ensure all JS pages are using NGCP REST API methods only.
  Such a concept allows us to unblock all the teams (Sipwise-WEB/Backend/Customers/Community) and provide fast delivery for migrated JS pages to the clients to receive the earliest possible feedback.

Faster Admin user interface

Even now, the Perl-based interface is much faster in a new JS-based framework.
It is the result of loading the necessary part of the page only (please notice "framed=1/0" parameter in URL). Example for comparison of load times:

Transitional migration

We all know how painful migrating from one web interface to another can be.
Sipwise is willing to minimize such pain as much as possible.
We plan to keep the same structure and logic of the pages as you have them on the old Perl-based Admin interface.
Literally, at this stage, we do keep the same tables and the order of the same columns on both web interfaces.
It allows you to switch between web interfaces and stay in the context of your task.
For sure we are trying to save your time (by inline editing, better performance, and less clicking) and looking for your feedback here!

Menu

The NGCP menu historically didn't receive a lot of love from Sipwise,
while we all agree it is a very popular and often used part of the web interface.
We have moved it to the left side to better support wide-screen (modern nowadays) interfaces.
We have kept the same menus structure as we had on v1 to support a smooth migration to v2 but we are open to your ideas and pull requests here. Let's develop it together!

How to share Feedback?

Please share your feedback on GitHub (there is a feedback thread available) or create a new issue there. Also you can write us email in our spce-user mailing lists. Customers can create tickets in Support bug-tracking system.

Thank you in advance and looking forward to your feedback and pull requests!