Tilting at windmills

Duncan Mac-Vicar P.'s blog

Modernizing Spacewalk’s user interface

9 Comments

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

Screenshot from 2013-10-30 09:42:09

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:

Image

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.

laptop-mobile

what-we-have-screenshot-002 what-we-have-screenshot-001

spacewalk-mobile

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.

9 thoughts on “Modernizing Spacewalk’s user interface

  1. Thanks for this great work. It is really a step forward for Spacewalk and SUSEmanager.

  2. Reblogged this on Linux Mauritius and commented:
    Spacewalk gets a modern look

  3. THIS IS SO GOOD! I was wondering a few days ago why nobody retouched the UI with bootstrap and why things are not modular in spacewalk.

    I love spacewalk and use it along with CHEF-SOLO. Spacewalk is a beast and sometimes wish I can turn some things off. UI retouch is a good start to make it more appealing.

    WHERE CAN I GET IT? 🙂

    Thanks

  4. Hi Duncan,

    thanks for sharing this. This is pretty awesome!
    I’d really appreciate if this change would be commited to Spacewalk code.

    Do you offer code patches for your that? I’d like to give it a try in my test environment.

    Best regards,
    Christian.

    • The changes described in the post were submitted and merged upstream. They were already released with Spacewalk 2.1.

      There is still work to do. There are some pages that are not looking as they do and not all fixes made it into 2.1. They will be released later as updates or later with Spacewalk 2.2. We will backport lot of those for the next SUSE Manager release.

  5. Pingback: Erster Blick auf Red Hat Spacewalk 2.1 | /var/pub/chris_blog

  6. Hey, I think your site might be having browser compatibility issues.

    When I look at your website in Safari, it looks fine but when
    opening in Internet Explorer, it has some overlapping. I just
    wanted to give you a quick heads up! Other then that, superb blog!

  7. Pingback: Red Hat Satellite 5.7 veröffentlicht | /var/pub/chris_blog

  8. Pingback: Stankowic development РRed Hat Satellite 5.7 ver̦ffentlicht

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s