Custom Jenkins UI

Recently I had to make the buy vs build decision regarding continuous integration @ work. After reviewing several of the cloud-based CI solutions, I decided on the devil I know ~ Jenkins. Being a long-lived open source project, the cost was ideal. Initial config can be cumbersome though due to the flexibility Jenkins provides but once that’s done you can crank out the actual build jobs fairly quickly.

All of that being said, one thing that irked me every time I logged into the instance was the “updated” default UI that still looks outdated (c. 1994). This perception is based largely on the iconography. So, I asked myself, “what are my options for refreshing the UI?”.

I figured that in 2015 I couldn’t be the only one so inclined to spruce up my Jenkins dashboard so I decided to ask the Google. There were various results on the subject but a few really stood out to me. In the end, I decided the best course of action to achieve my goal was:

  1. to install the Simple Theme Plugin
  2. to invest some time in tweaking the canon-rackspace theme.

Why? Because I didn’t want to spend days on any of the other more involved solutions when simply refreshing the icons would put my mind @ ease.

After installing the plugin, I added the URLs to the theme CSS + JS overrides that I planned to use.

From there it was a matter of adjusting the canon-rackspace CSS + JS to suit my needs. To start I opted to use JavaScript to replace the weather report and scheduler icons on the dashboard. Jenkins leverages Prototype.js so, I used code similar to the following to replace the desired icons based on their predefined CSS classes:

$$(".icon-health-00to19.icon-lg").each( function(img){ img.src="/jenkins/userContent/themes/jenkins/canon-jenkins/icons/32x32/stormy.png"; } );

This resulted in a look and feel I could live with:

Seeing the difference those small changes made, I then proceeded to catalog the other icons and add them to the list of overrides. Unfortunately, during this process, I learned that the CSS classes for several of the default icons were either missing or improperly associated to tasks.

To overcome this, I installed the jQuery Plugin which I prefer for accessing DOM elements in scenarios like this. With this plugin installed I could then execute code similar to the following to replace the orphaned and mis-classed icons:

  var peopleTaskIconLink = Q('a[href="/jenkins/asynchPeople/"]');
  var peopleTaskIcon = peopleTaskIconLink.children('img');
  peopleTaskIcon.attr('src','/jenkins/userContent/themes/jenkins/canon-jenkins/icons/24x24/people.png');

fx_jenkins_custom_dashboard_sidebar_icons

Now, I don’t mind spending time managing my builds in the Jenkins UI. Best of all, this solution was fairly quick to implement.

* Icons courtesy of Freepik @ flaticons

UPDATE: You can now access this project on Github.

6 comments

  1. Oh how I feel the same with Jenkins. Very nice work. Is it possible to share the full css & javascript for this look?

Leave a Reply

Your email address will not be published. Required fields are marked *