Jenkins UI Improvements!

Written by: Nicolas De Loof
4 min read

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 . 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.

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 ").

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!

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

Stay up to date

We'll never share your email address and you can opt out at any time, we promise.