Jenkins UI Improvements!

The process of UI improvement can easily turn into an infinite debate — you will find as many opinions as users. But during the last few months, the Jenkins community took on the challenge of UI enhancement. We know that we still have a long way to go. The new Jenkins UI is certainly better than old school CI xml configuration files, but still far from some recent, flashy web sites.

Here’s a little bit about the process… Some ideas were discussed on the Jenkins mailing list and at the governance meetings, and also collected on https://wiki.jenkins-ci.org/display/JENKINS/UI+Enhancements. During FOSDEM, we took advantage of the fact that many major contributors were co-located for the conference. We were able to take 2 hours to discuss some enhancements that provided significant benefits for users, but that we could implement without requiring a complete refactoring. Some of these improvements are implemented in recent jenkins releases (1.456+).

Dynamic Pop-up Menus
You may like or dislike the general look and feel of Jenkins UI, but a major complaint we heard from users is the number of clicks required to navigate. The UI already had breadcrumbs so you could move up the hierarchy to your job or view. But if you wanted to fix a build parameter, even this shortcut could require up to 3 page loads to switch from a test result detail view to the job configuration.

The most visible change in 1.456 is the addition of dynamic pop-up menus on breadcrumbs and item lists. This menu is generated from UI links based on the underlying model item and displays the associated actions, which you used to see on the left-hand sidebar.
 

Jenkins configuration
 

This menu let you access the major features for each level of the Jenkins hierarchical model, so that you don’t spend time navigating the UI.

Job Configuration Page Improvements
Some other enhancements focus on making the job configuration page simpler to use. The Save button now has a companion Apply button, so that you can stay on the configuration form when you’re adjusting some configuration option. Those buttons also stay on the bottom of your browser, so that you don’t have to scroll down the (sometime long) page to hit Save (or in the case of my French UI below, “Sauver”).

Job Configuration Page Improvements

Show Plugin That Contributed an Option
Another improvement, designed to help administrators and support teams, is that each option you see in the configuration form can now have a small note, on the Help tip, to let you know which plugin contributed this option. With a large set of plugins installed, it is sometimes not intuitive to know who contributed an option, nor where to search for documentation. You now just have to click the link!

Show Plugin That Contributed an Option

Faster Configuration Page Load Time
A more invisible improvement is about the configuration page load time. For large projects, with many plugins installed on Jenkins, loading a job configuration page sometime took seconds, with the user waiting for the grey “loading” glass window to disappear. Some internal improvements and best practices for plugin developers have been defined to avoid this delay and make the UI quicker.

As you can see on the wiki, there is still a large set of ideas to be implemented, some of which are being prototyped by contributors. Some others are trying to refactor the HTML design using some modern javascript / css frameworks. As always in the Jenkins community, we will ensure backward compatibility, but it’s time for Jenkins to polish its UI so we can be not only the best CI tool, but also a great-looking one.

- Nicolas De Loof
Senior Engineer
CloudBees
www.cloudbees.com
 
 
Blog Categories: 

Comments

One more thing, in the configuration page, if you hover your mouse over the "configuration" breadcrumb, you get in-page navigation to different sections!

These are huge improvements, the dynamic popup breadcrumbs make an incredible difference alone. Great going to all involved and thanks!

but there also are few places where it makes my work a little bit more difficult ;) From my point of view - GUI is not so important as API and I would like to have some API improvements (which allows to automate common tasks). Most of my work with GUI is reproducible and I would like to do it with scripts not with mouse :) cheers!

I just upgraded from an older Hudson install to Jenkins. Great to have new features in Jenkins, but I personally don't like the pop-up menus at all. They always get in the way, and they are especially confusing for non-power-users (e.g. all the non-admins that just want to see where they failed the last build.) Is there a switch to disable the pop-up menus? I didn't find any in the configuration options.

Guys, Jenkins could use a serious visual face-lift. The UI is decent, but the graphics need to be polished. Please consider applying some resources in this direction.

How to change the root breadcrumb link text from Jenkins - Home in css and js. Sample code is much appreciated.. Thanks, Senthil

Add new comment