Modernizing Spacewalk’s user interface

October 30, 2013 by duncan 9 Comments

Spacewalk is SUSE Manager upstream project. We base our product on Spacewalk’s codebase and contribute features and fixes back.

There are lot of advantages of working in a mature codebase. At the same time, you get to work everyday with legacy code.

We want SUSE Manager to look great and behave like a modern web application. We want it to survive a rapidly changing environment that gives you new challenges like mobile. Our main goals were:

• Better mobile responsiveness
• A standard and documented CSS framework as a base
• Easier customization of the CSS (e.g. LESS)
• Deprecate the Prototype library and use JQuery
• Nicer icons

The topic was first discussed as “what could we do” in order to keep everything current and relevant. Then we presented a quick prototype migrating the user interface to something based on Twitter Bootstrap. This is what the prototype looked like:

The idea was well received. There were (valid) concerns. Spacewalk is a huge application, and a refactoring like this was going to be an intrusive change.

For our department workshop, we assembled a squad and did a very succesful first iteration. We managed to port the main structure and also get a first Spacewalk “black theme”. Some of us continued for the SUSE Hackweek. After that we integrated the development into our main sprints and at some point we started pushing our branch to upstream.

What do we have right now?

• A mobile responsive layout based on Bootstrap 3, the most popular CSS framework.
• Scalable font-based icons powered by Font Awesome 4
• A beautiful Spacewalk “black theme”
• Most of the code was refactored towards HTML5, current CSS, jQuery and LESS.

More detailed screenshots of how it looked before on mobile 1 & 2. How it looks now: 1 & 2 & 3 & 4

There are still some items in our backlog:

• Un-styled pages here and there
• Cosmetic details due to “misbehaving” html (manual breaks, inline styles)
• Custom tags unit tests (WIP)
• Perl-part data list widget (but the layout is there)
• Replacing gifs with icons (WIP)

Now our main goal is a first upstream merge so that we can continue working on this without blocking other features where we want to take advantage of the base user interface.

I hope you enjoyed this report. I will follow up with a more technical post detailing some refactorings and how we automated some tedious changes.