Modern Theme Screenshots

Only for curious users. :-)

I think it is time to let the cat out of the bag and to show off some of the things that I have been working on. :-)

How about this:

So does this look good? :-)

Whoopsie! That's actually a blast from the past!

I meant this one:

You will be able to replace the big BlueOnyx logo on top with an image of your own. Which can be uploaded through the admin account.  The "Thank you ..." message is a clickable and dismissible element. It'll show if your session has expired, if the login credentials have been entered incorrectly or will greet you upon logins.

The I18n support of the GUI for support of different languages is also already working. This is how the login screen looks in Japanese:

And here it is in German:

Ok, enough teasing on the porch. Let's take a look inside and past the login screen:

You can click on this image for a larger version.

Now this is just a first draft of the GUI. You can see we have the same horizontal menus on top that the current BlueOnyx has. And on the left side we see the same vertical menu that we're used to so far. "System Settings" has been clicked on to expand the sub-menu entries that it contains. You also notice that the menu text "Server Administrators" is too long and is wrapped. Which isn't pretty and I will tackle this later on. Like said: This is a draft and there is more that the new theme can do for us in terms of eye candy and usability.

You can also see that (for this screenshot) I had benchmarking enabled, to check the loading time and memory usage.

Here is a screenshot of the Japanese version of this page and with the dialog that pops up when you click on "logout":

This new theme of BlueOnyx will eventually replace the old frame based traditional themes entirely. As the new theme is CSS based, it allows for a lot more flexibility in terms of re-theming. But different themes are already included and can easily be activated. Here are some impressions:

That's a darker theme. Regardless of the theme, certain elements such as the menu on the left or the box that shows the currently logged in user aren't fixed. The lefthand menu can be turned into a slide-in / slide-out style of menu. When you move the mouse onto the "+" sign in the left upper corner of the browser, the menu will slide in and will overlap a part of the page (like in this case). Also notice the active theme switcher at the bottom of the screen. This is where you can pick from various options to modify the themes appearance to your liking.

Another darker theme, but this time again with the lefthand menu in a fixed position.

Here is something in more friendly colours again. So there are already a ton of options to choose from.

When will it be finished?

Don't ask. I'll be damned if I know. Seriously.

The last four weeks I worked a lot on it and the amount or progress has been extraordinary. There have been obstacles, as you can imagine. Very early on I had made up my mind to do the new GUI using the PHP framework CodeIgniter. After starting with CodeIgniter, I quickly got fed up and looked at Kohana, then Symfony and some other options. The longest I strayed with Symfony, because it has a lot of potential, lots of eye candy and helpers that I would have loved to have. But then I returned to CodeIgniter and started coding in earnest.

All good frameworks more or less force you to follow the MVC model if you want to use them:

• The Model represents your data structures. Typically your model classes will contain functions that help you retrieve, insert, and update information in your database.
• The View is the information that is being presented to a user. A View will normally be a web page, but in CodeIgniter, a view can also be a page fragment like a header or footer. It can also be an RSS page, or any other type of "page".
• The Controller serves as an intermediary between the Model, the View, and any other resources needed to process the HTTP request and generate a web page.

CodeIgniter is no different there, but allows for a bit more flexibility. After all, we're not (like other more traditional PHP projects) talking to a MySQL database, but use our trusty old transactional CODB database. At least we will continue to use it for now, although in the future this might (hopefully) eventually be changed to MySQL or another (similar) relational database with bolted on transactional support for handlers.

Now each and any framework takes time to get used to. As a programmer I never hesitate to learn new tricks, but the learning curve of the different frameworks varies a lot. This is where you depend on the frameworks documentation to provide you with information, technical details and (most importantly!) examples. While I liked Symfony a lot, its documentation just plain sucked, whereas CodeIgniters documentation just rocks. I was quickly able to crank out code that works and then discovered how full of useful helpers CodeIgniter is.

Just one example: The menus in BlueOnyx are based on XML files. These XML files reside in sundirectories of /usr/sausalito/ui/menu/ and the number of menu XML files present depend on what software you have installed. Third party PKGs bring their own XML files aboard, too, as they expand existing menus or add new menus.

The old Sausalito based BlueOnyx interface uses several PHP classes and around 20 PHP functions to slurp in the XML files, to parse the XML, extract the data into Arrays, walz through them to eventually render the menus based on your access rights in the GUI.

I couldn't simply re-use the original libraries. Because this is no longer 1998 and we're no longer using PHP-4.1.2 or even PHP-5.2. We now have "register_globals", "register_long_globals" and other deprecated PHP functions turned off entirely for AdmServ. And all the old Sausalito classes heavily depend on "register_globals" being enabled.

So I had to write the XML parsing and menu rendering from scratch using CodeIgniter. XML parsing is not difficult in PHP. So I quickly ended up with a massive Array like this:

This actually goes on for quite a bit. To really construct a menu tree from this (which also takes into account the access rights, as not everyone is allowed to see everything!) you need to resolve dependencies. Which entry is a child of which parent? Is there more than one child? If so, which one is shown first? Also, not all fields are always filled in. Some are optional, some mandatory. At certain points you have to assume safe defaults.

The original Cobalt developers had to code this data mining procedure from scratch and the way they did it just worked. It wasn't elegant, easily maintainable or simple. So they ended up with like 20 functions from various classes that dealt with this.

In CodeIgniter I initially started to reproduce the original path and ended up with a lot of heavily nested foreach() loops where I was going through things repeatedly just to grab what I needed. But then I discovered the beauty of the elements() helper in CodeIgniter, which allows you to easily grab selected items from an array and to optionally substitute defaults if the element is missing.

So instead of 20 functions related to XML parsing and generation of a single array that contains all the information we need for the menu rendering, I ended up with a single short function that's fast, efficient, extensible and easy to maintain:

My first attempt at this (I don't dare to present it!) was like 8x longer, had tons of foreach() loops, was very inefficient and that was even before it was finished.

So coding in CodeIgniter is quite a time saviour. Which is good.

The new GUI will also have a different directory layout for the GUI related stuff:

The changed directory layout is a necessity due to CodeIgniter and us abandoning the old fame based GUI. Instead the new GUI will only have one publically exposed PHP script. Yes, that's right. Everything else is in directories that are not directly accessible via the browser.

Almost everything related to the new GUI will reside in /usr/sausalito/ui/ci/ instead. This also includes the PHP libraries that we need to interface with Sausalito, CODB, i18n and what not. In the screenshot above you can see which of the old Sausalito related libraries have already been ported to CodeIgniter.

What's next?

As you can see, the bare metal basics of the new GUI are in place.

What's finished:

• We are able to log in and can correctly authenticate users.
• The basic appearance of the GUI has been decided on.
• Parsing and presenting of the XML based menus works.
• i18n (support for various GUI languages) works.
• Communication with CCE: Works 100% and we have the backend data at our fingertips.

What needs to be done:

• Capabilities: Not all users have equal access rights. The 'Capabilities' library handles which parts of the GUI a user can see and work with. Porting of this library is in progress, but not yet finished.
• The 'UIExtension' library needs to be imported into CodeIgniter. It allows for the extensibility of certain GUI pages such as 'Active Monitor' and others, which can be extended by third party modules.
• The entire directory 'uifc' (which is full of libraries dealing with rendering of GUI elements such as tables, input fields and such) needs to be scrapped, abandoned or imported whereas applicable. This is a design decission I haven't made yet. I will most likely just create new functions from scratch, which are less ambiguous and cryptic as the existing functions.
• All existing GUI pages need to be coded using CodeIgniter, the new theme and the new functions for generating HTML output. And that's actually the easy part, although it'll probably require the most man hours.
• XML menus of all modules need to be updated to reflect the changed paths that they're accessible under. While at it, the XML files get updated with more (optional) fields such as which icon to display in the new GUI and other gimmicks.
• New directory structure for modules (both BlueOnyx modules and third party modules!) needs to be decided on. It will be along the way of CodeIgniters support for third party modules to make things easier.
• Packaging: The traditional way of building BlueOnyx modules and RPMs needs to be expanded to allow us to maintain and package the code in an easy fashion. This should also take downward compatability into account, so that most modules will work on the "old" BlueOnyx versions (as they contain the old /web and /menu directories working there), but also have the new CodeIgniter related stuff in new (additional) directories.

That's just the short version of it. There are tons of details that I have forgotten about or that I'll run into sometime down the road.

As some will ask, I'll address it now:

Will it require a new install? Or is an update possible?

The definite answer can only be given when I'm done. So take what I say next with a grain of salt:

The design goal is to make the new GUI available during a regular YUM based update.

After all, the new GUI is "just" cosmetics. But we also  want to give you a choice to choose the time when (and if!) you switch to the new theme. So it will most likely be a bit of both:

1. Eventually the new BlueOnyx will be made available: In the YUM repositories, as downloadable ISO image for new installs and OpenVZ OS template.
2. To upgrade an existing BlueOnyx you may have to "trigger" the update manually from the command line by executing a script.

This script will then examine your system and will tie you into the new (separate) YUM repository of the new GUI. From there YUM will fetch all the updates to make the transition.

When the updates are done, your BlueOnyx 5107R or 5108R will be transformed into a BlueOnyx 5207R or 5208R with the new GUI enabled and the old GUI gone entirely.

But ... but ... but ... what about BlueOnyx 5106R?

Oh? You noticed the omission? Dang. I thought I could get away with it! ;-)

There is one problem: PHP-5.1.6

BlueOnyx 5106R shows its age. Yes, it is the BlueOnyx with the widest and most numerous user base. But it's based on an OS that's just a bit shy of getting EOL'ed and the PHP version that ships with it is really, really, really lacking. While I am considering various options for making the new GUI available on 5106R as well, I will absolutely make no promises towards that end.

Well, that concludes todays excursion into the realms of the re-themed BlueOnyx. Stay tuned for more info and more screenshots in the close future!