[BlueOnyx:26751] 5211R: GUI development: Done!
Michael Stauber
mstauber at blueonyx.it
Sun Feb 18 01:01:58 -05 2024
Hi all,
I'm happy to announce that the development of the new GUI for BlueOnyx
5211R is now finished. \o/
The whole endeavor took 95 days (minus two weeks of holidays over
Christmas) and as I feared: It was an exhausting all out effort with
many long days and nights.
So far the feedback from the testers who had a chance to test drive the
preview has been overwhelmingly positive. It also contained productive
suggestions which have been promptly implemented whenever feasible and
useful. Therefore I sincerely hope that you'll love the result as much
as we did.
Release roadmap for 5211R:
===========================
Preparation:
-------------
ALL BlueOnyx 5211R GUI pages now have changes and are no longer entirely
compatible with the older 5211R GUI.
If one were to run older 5211R Shop packages on a BlueOnyx 5211R with
the new GUI, then some GUI elements (mostly buttons) will not be
visible. Not all buttons, but typically buttons such as those to
modify/delete Users, Vsites, DNS Records and such. Category buttons or
those for "Save" or "Cancel" would still work.
These "invisible" buttons would even happen if the GUI were switched
back from "Elmer" to the older "Adminica". Because even "Adminica" got
overhauled during this update to be more in line with "Elmer" as far as
instantiating and using GUI features go.
In order to prepare for the release of BlueOnyx 5211R with the new GUI
we will therefore be publishing updated Shop PKGs for all PKGs that have
affected GUI elements:
- NewLinQ
- WebApp Installer
- AV-SPAM
- Easy-Backup
- Fail2ban
- Firewall
- OpenVPN
All these PKGs now have GUI pages that work with old style (pre-Update)
"Adminica", new style "Adminica" and new style "Elmer".
These PKGs will be released to NewLinQ on Sunday afternoon and can be
installed in advance of the release of the BlueOnyx 5211R update.
The updated NewLinQ will probably get installed automatically, but the
rest of them you will have to update manually if your subscription is
current.
Packaging:
-----------
Most of next week will be spent building RPMs of the updated BlueOnyx
5211R modules and testing the upgrade procedure to make sure that
everything goes smooth.
Publishing:
------------
The development version of the new BlueOnyx 5211R RPMs will hit the
[BlueOnyx-5211R-Testing] YUM repository first.
This can be activated in /etc/yum.repos.d/BlueOnyx.repo on any BlueOnyx
5211R server and it is usually NOT activated.
If you currently HAVE it activated due to a manual modification you once
did (and then promptly forgot)? If you don't want to participate in the
public Beta test, then it's time to turn the [BlueOnyx-5211R-Testing]
YUM repository off again. :o)
After a brief testing period and if no show stopping errors are
reported? In that case the YUM updates will be released to the regular
BlueOnyx 5211R YUM repository.
This may happen on or around the next weekend at the soonest.
A new ISO image will then also be released and will contain all the
updates. A YUM update on an existing BlueOnyx 5211R is however
sufficient to bring you up to speed.
Post release:
==============
Is there anything you need to do after the YUM updates have been installed?
Basically: No. Provided you install all updated PKGs from the shop for
purchased or rented software you should be good to go.
Changes and updated behaviors:
===============================
Theme selection:
-----------------
After the YUM update the GUI will default to the new "Elmer" theme.
This can be changed in two places:
1.) Server wide setting:
"Sever Management " / "Maintenance" / "Server Desktop":
There you can configure which theme is the default and which themes are
available for end users.
2.) Per User setting:
Each User can configure for himself which of the allowed themes he wants
to use and can select from several options for appearance. "Elmer" comes
with a "light" and a "dark" theme and also has various styles for the
menu background color and menu text colors.
Two factor authentication (2FA):
---------------------------------
You can now protect the GUI with 2FA. Means: Aside from just entering
username and password a 2FA token (or a one-time-key) can be required
for users to login.
This is turned OFF by default and must be enabled manually.
You can enable "GUI-Login: 2FA required" in "Sever Management " /
"Maintenance" / "Server Desktop" and can choose wo MUST use 2FA in order
to login to the GUI:
- Nobody (if "GUI-Login: 2FA required" is disabled)
- All users with enabled 2FA (per Vsite & per User setting)
- All Server administrators with enabled 2FA
- All Server and Vsite administrators with enabled 2FA
Integrated searchable Logfile viewer:
--------------------------------------
This has already been showcased here in a video:
https://www.blueonyx.it/news/332/15/BlueOnyx-5211R-New-GUI-Development/
That new logfile viewer is finally something pretty useful and allows
you to watch the logfiles more or less in real-time (few seconds delay).
And it is searchable.
Enhanced usability on mobile devices:
--------------------------------------
The new "Elmer" theme is fully usable on mobile devices. All menus are
now on the left-hand side and if not enough screen width is present,
then the menu will fold in an can (if needed) be extended again by
clicking on a "hamburger" icon in the top of the screen.
"Elmer" uses the full screen width that is available and if not enough
space is present to display all row elements in the same row, it will
neatly fold them into the next row without disturbing the context. This
works even fine on mobile phones with small screens without much loss of
comfort.
Email Statistics:
------------------
The Email Server Statistics under "Server Management" / "Usage
Information" / "Email" had been somewhat broken since the initial
release of 5211R. This has now been fixed and massively overhauled and
should now (again) give you a pretty good overview over the email
activity of your server, your Vsites and Users.
Please note: That page works best with the GUI theme switched to
"Elmer". If you use it with the "Adminica" theme there is still a
noticeable delay when switching between tabs.
Other improvements (for the technically minded):
-------------------------------------------------
[Or skip to the end]
Email forwarding and Vacation messages now have a proper Datepicker if
you use the "Elmer" theme and "Personal Profile" / "Email" now look much
cleaner and less confusing.
That's because the options for "Email Forwarding" and "Vacation
Messages" will only be shown if these features are active.
DataTables: That are the often searchable tables we use in the GUI to
display things like the user list, vsite list and other tabular data.
These also now look much more crisp in "Elmer" and even "Adminica" got a
newer version of DataTables installed due to compatibility issues. The
old DataTables in "Adminica" often threw script errors if we tried to
nest DataTables in tabs and it has issues initializing DataTables that
were in hidden tabs on page loads.
This has now been solved the updated "Adminica" version. This also means
that these DataTables now look slightly different than before as far as
the styling of the pagination buttons (and the "Search" field) go.
During the overhaul of the GUI many improvements have been made
throughout the entire code base. Too many to list individually, but a
few are worth mentioning:
GUI Icons ("Adminica" and "Elmer"):
------------------------------------
"Elmer" uses fonts (mostly Fontawesome, but also ZDMI and GlypIcons) for
GUI icons. "Adminica" used three different methods for icons: Fonts,
Graphics and vectors cut out of larger graphics.
While redesigning the Button.php Class for both "Adminica" and "Elmer" I
switched "Adminica" to use the same buttons (fonts) as "Elmer". This
means that in some places in "Adminica" you will now see slightly
different Icons than before. In most cases these changes are subtle.
i18n (Internationalization):
-----------------------------
That's used to display the GUI texts in various languages. Once upon a
time (until 5208R) we used a PHP Zend API module for this, which was
incredibly fast. But we were unable to port this to newer PHP versions,
so it got replaced with native PHP code (slow and ugly).
At the earliest stage of the development of the new GUI I tackled i18n
again and trimmed a whole heap of fat from it to make it lean, mean and
fast. This chafed around 50-80% off from the page load times of most GUI
pages. For some larger pages this even trims the load time down from 2.9
seconds to 0.9 seconds.
Error Message Handling:
------------------------
This has generally been improved leaps and bounds. Error messages are
now properly handled in a standardized fashion during processing of data
and are stored in the session data. Errors will then be displayed during
the subsequent page load. So when you hit "Save" on one page and another
page handles the processing of the form data and throws errors? When
you're redirected to the GUI page where the form data was entered, it
will now consistently show whatever errors had happened during any of
the pages that processed the data.
Thorough security review:
--------------------------
While integrating the 2FA GUI login mechanism I was messing with our
holy cow: The security mechanisms of Sausalito. After entering username
and password the GUI authenticates you against CCEd and you get a
sessionId. With a valid sessionId you ARE logged in and can usually see
whatever pages you have privileges for. 2FA enabled or not.
Tacking on 2FA to this mechanism was like throwing the key to the
cistern away after the child had already fallen into the well. So I
revised and extended the mechanism that we used to auto-login into
additional services such as phpMyAdmin, GoAccess, Monitorix or the
Radicale CalDAV/CardDAV GUI.
Aside from a valid sessionId a GUI user now also needs a security token
in the session data in order to login to the GUI and to be able to see
any privileged pages.
This security token is auto-generated with OpenSSL during the login -
even if 2FA is disabled. The encryption key for this is randomly
generated for each BlueOnyx server and usually only valid for a given
session - until logout or session expiry due to inactivity.
This new security token gets set in the stage where we determine if 2FA
is enabled for the user or not. If 2FA is enabled and the user doesn't
provide a 2FA token or one-time-key? Then he doesn't get past the login
page - valid sessionId or not. Upon entering an incorrect 2FA token the
sessionId gets revoked and the GUI's "Brute Force Detector" (see: "Sever
Management " / "Maintenance" / "Server Desktop") will also count this as
a failed login attempt and may block further access for the offending IP
if the number of failed attempts exceeds the configured values in the
given time frame.
Likewise: phpMyAdmin, GoAccess, Monitorix and the Radicale
CalDAV/CardDAV GUI now use this mechanism to generate secure tokens via
OpenSSL for auto-logins to the respective services (if the user is
privileged to use them).
Under the hood:
================
So HOW exactly does it work that the GUI now can display two different
themes, even if the actual GUI pages are the same?
Each GUI page polls $BX_SESSION from our BaseController:
$BX_SESSION = $CI->getBX_SESSION();
$System = $CI->getSystem();
$user = $BX_SESSION['loginUser'];
Depending on the users preferences the key $BX_SESSION['gui_theme'] will
either be set to "adminica" or "elmer".
The GUI class ServerScriptHelper.php will then either initialize the
libraries from ...
/usr/sausalito/ui/chorizo/ci4/app/Libraries/uifc1/ <-- Adminica
... or ...
/usr/sausalito/ui/chorizo/ci4/app/Libraries/uifc2/ <-- Elmer
... in order to render all GUI elements.
The Class that generates GUI pages (BxPage.php) will then decide which
HTML template to use to fill in the blanks with the menus and the page
content generated by the UIFC1 or UIFC2 Classes.
Example:
uifc1/Button.php will render all Buttons in Adminica style
uifc2/Button.php will render all Buttons in Elmer style
And we have around 80 Classes for the different GUI elements, so that
was by far the biggest time sink to get all those working for both Elmer
as well as the modernized Adminica. <sigh>
How to detect if a BlueOnyx hasn't been upgraded to an Elmer capable GUI?
Something like that does the trick:
//
//--- Handle pre-Elmer Systems:
//
$pre_Elmer = 0;
if (!isset($BX_SESSION['gui_theme'])) {
// Server not yet upgraded:
// Assume therefore that the GUI still uses Adminica:
$BX_SESSION['gui_theme'] = 'adminica';
$pre_Elmer = 1;
}
We use that in Shop PKGs to then not use the new button mechanism:
// Add the button:
if ($pre_Elmer === 1) {
// Pre-Elmer button:
$button = '<button title="' . $i18n->getHtml("editUser_help") .
'" class="tiny icon_only div_icon tooltip hover right link_button"
data-link="$url" target="_self" formtarget="_self"><div class="ui-icon
ui-icon-pencil"></div></button>';
}
else {
// Buttons for systems with new combined Adminica/Elmer GUI:
// Edit-Button:
$editButton = $factory->getModifyButton($url);
$editButton->setDescription($i18n->get("editUser_help"));
$editButton->setButtonSize("small");
if ($BX_SESSION['gui_theme'] === 'adminica') {
$editButton->setButtonSize("xs");
}
$editButton->setButtonSpecialStyle('square_animated');
$editButton->setIcon('fa fa-edit');
$editButton->setImageOnly(TRUE);
$editButton->setTarget('_self');
$button = $editButton->toHtml();
}
Further Development Roadmap:
=============================
I expect to be busy with release and post-release errands for the next
14 days. But once that is done I will start porting the new BlueOnyx
5211R GUI to our older BlueOnyx 5210R as well.
HOWEVER:
---------
THAT will be much more disruptive.
If you have BlueOnyx Shop packages installed and the new BlueOnyx 5210R
GUI is released? Those GUI pages for the Shop PKGs will break. Hard.
There is NO way around that other than updating the PKGs with the latest
versions from the shop.
I will add a trigger that the "NewLinQ" PKG is directly and
automatically installed after the YUM update, but the rest of the
updated PKGs (if any) then need to be installed by you.
When to expect the release of the new BlueOnyx 5210R GUI? I'd
tentatively say: Before the end of March.
--
With best regards
Michael Stauber
More information about the Blueonyx
mailing list