For as long as GenieACS has existed, development was primarily focused on core features related to scripting and automation while the user interface had taken the back seat. The user interface, while serviceable, left something to be desired and, in my opinion, did not give a fair first impression of GenieACS and its capabilities. In the upcoming release this will at last be addressed with a new and refined web UI. In this post I will highlight the exciting new features!

Last year we embarked on a journey to rewrite the user interface from the ground up. One of the primary objectives was to bring modularity to the UI to facilitate deeper customization of the interface given the CPEs’ capabilities and business requirements. Often times I get asked if GenieACS supports a certain data model such as TR-143, and while GenieACS supports any data model, the lack of visual representation in the UI of the information exposed by the data model is what it comes down to in the end. The new component based architecture should make this a simple matter of enabling a special component for TR-143.

Considerable time and effort have been put into rethinking every element of the UI. We ended up going a few steps further beyond our stated objective in terms of features and polish, but kept the unintimidating and clutter free design. Read on for a highlight of the most significant changes and new features.

Single-page application (SPA)

SPA screenshot

That’s right, GenieACS UI is now a single-page application where all the rendering and navigation happens in Javascript at the client side. The most obvious benefit is that the task queue now persists after committing or even navigating away from the page.

New query language

New query language screenshot

Starting from v1.2 we’re introducing a new SQL-like query language that is replacing the MongoDB style queries. This is a major milestone towards making GenieACS database agnostic and supporting other database engines. Queries are seamlessly translated from the SQL-like format to MongoDB format when performing a search. Currently only the UI is using the new query format while the API remains unchanged for compatibility. In a future 2.0 release we’ll have the luxury of being able to break compatibility and introduce a new API that uses the new query format.

Smart search screenshot

More often than not, users find a device by performing a simple search on serial number or MAC address. Writing a proper query can be tedious and error prone so we wanted to give the user an easier way to perform quick searches all the while maintaining the ability to use full queries. Note in the animation above how the search can be made to understand that the value we’re searching for is a MAC address and will sanitize and unpack the query accordingly.

Batch actions

Batch actions screenshot

Presets in GenieACS are a powerful tool to perform operations on devices in bulk. However, occasionally we just want to make a quick one time action such as reboot a few devices or assign them a tag. Well now we can!

Tasks

Tasks screenshot

The task queue has received a much needed overhaul. Most notably, it now gives the user visibility on the status of the task and lets them retry a faulty task directly from the pop-up drawer.

Admin pages

Admin pages screenshot

Presets and related pages have been restructured and put together under one “admin” tab for a cleaner look. As can be seen in the animation above we’ve added pages for users, permissions, as well as a config page.

Further remarks

This is shaping up rather nicely in time for the upcoming v1.2 release (soon-ish). The old UI (genieacs-gui) will remain supported, however this will be receiving more attention going forward. Unlike genieacs-gui, the new UI is no longer a separate repo but is part of the main codebase. That said, it remains an independent service adhering to the microservices architecture principles, so you can choose to run it on a different server or not run it at all in case of a headless deployment.

The screenshots and what I have described here do not necessarily represent the final state as things could change between now and stable release. The code is available in the master branch in GenieACS repo on Github so feel free to play around with it and maybe send bug reports or PRs.