Jenkins : UI Enhancements

Introduction

This page should give an overview of ideas and suggestions how the Jenkins UI can be improved, streamlined or just kept as it is (if applicable).

  • There is an old wiki page showing some UI Mockups.

Ideas from the mailing list thread

I tried to digest the ideas coming from this mailinglist thread: https://groups.google.com/forum/?fromgroups#!topic/jenkinsci-users/mz0rJNTzqms|https://groups.google.com/forum/?fromgroups#!topic/jenkinsci-users/mz0rJNTzqms
As the thread gets pushed down quite fast, this might be a way to keep the ideas in one place. If there are ideas considered worth pursuing they should be turned into JIRA feature requests.

WORK IN PROGRESS

TODO about this page:

  • add missing comments
  • put the ideas into categories
  • add links to existing JIRA issues

Managing views/tabs

  • Add the ability to custom order job list tabs (currently it seems to be alphabetic) (Nathan Perrier)

    This is an extension point, so all we need is a plugin that offers more controls to the user. (Kohsuke Kawaguchi)

  • The views-list on the top is also a source of clutter. My project has about 20 views - it makes the screen look terrible.
    Could we have an alternative method to access the views, for example from a heirarchical pop-down menu? That would make things a great deal better. (Salim Fadhley)

    Have you tried out the DropDown ViewsTabBar Plugin yet? It replaces the view tabs with a drop down menu. (Fred G)

    Many people want to see tabs take less space. Someone already suggested installing the https://wiki.jenkins-ci.org/display/JENKINS/DropDown+ViewsTabBar+Plugin
    It works. (Sami)

  • View tabs – having a lot makes them less useful (moving to folders instead has helped here – but removed the dashboard views L) (teilo)
  • Views have "Filter Built Queue" and "Filter Build Executors", but
    "Filter Build Executors" shows me executors that could run jobs in
    my view. Instead, I'd like to filter them to only show executors that
    are running jobs in my view. (pgweiss)
  • A better way to manage views would be helpful.
    some thing I can't seem to find:
    1. a way to hide/delete a view
    2. a way to add an existing build to a populated view (an empty view has links to add projects) (Al)

    1) oh, yes: I have simple issue with them: ordering.
    The view tabs seems ordered alphabetically.. So to get a specific order (of importance, for example), a workaround is to add numbers as prefixes in the names.. a bit clumsy.
    Could we support manually ordering as well?
    2) also about views: I have several list/sectioned views with same column layout.. however this is a bit tedious to set up and to keep consistent.
    So, it would be great to define the tables columns once (eg. one with build button, preference button, etc) , then refer to that definition in all the views.
    (Gergo)

  • Views
    Could this be more customizable for default behaviour. I don't think
    many of my users set personal views and I would like more control over
    what the default views are. Change the order of the views - seems
    alphabetical, possibility to remove "All", permissions for particular
    views would be nice too. (Tony P.)

Configuration page

  • Make the page robust against performance issue and broken plugin. Tolerate an error in a section.
  • splitting config to multiple tabs, using more AJAX to update data in the page without reload (domi)

    +1
    and lazy loading, as jobs with a lot of config load very long time to show
    config page (vjuranek)

  • Tabs are a good idea, but if we use it in jobs config, they must be used in every config pages. (Daniel PETISME)
  • I'm not a big fan of having tabs in the config page, since I'm always
    finding myself hitting "Ctrl + f" to find things on that page. With tabs,
    I'll have to visit each tab to execute my search... (grayaii)

    I am against tabs myself - please keep everything on one page. (vladsed)

    +1 (Ferenc Kovacs)

  • [] As for overall UI, I'm probably unusual this way, but I really hate things
    that hide sections behind tabs or don't expose options until you push
    the right button. Would much prefer a way to see every option in one
    big page so I can use the browser's search feature instead of having
    to google for instructions on which tab to open or which button to
    click to get a screen with the option I want to change. Color coding
    active/non active sections would be nice, though. And when I see a
    bunch of stuff at once, then I want a way to enter a regexp to make
    changes across everything instead of having to move to every form
    field and repeat it - this might be particularly useful after copying
    an existing job to a new one. (LesMikesell)
  • Splitting long configuration pages into separate pages or tabs would prevent a lot of scrolling to get to the item you want to configure.
    It also may result in quicker page loads. It seems faster to me to be able to click a tab rather than having to scroll for a few pages to find what you want. (Brian J)
  • It seems there are differing opinions on the most efficient navigation. Perhaps we can address both with enabling a couple different view styles.
    So far it looks like I'm seeing "more tabs, expand everything" and "no tabs, more collapsing". We won't please everyone, but perhaps a small number of styles would take care of most. (Brian J)
  • the handle in the config page that lets you reorder steps is apparently very hard to find (domi)
  • I find the "delete" button to be confusing where it belongs to, for certain build steps (domi)
  • When you have a lot of plugins, the $JENKINS/configure page is really big and the button save is far away at the bottom of the page. Maybe this page should be redesigned. (Grégory Bougeard)
  • Please use fieldsets + borders for separating the configuration blocks a little bit more. (Ferenc Kovacs)
  • On the main configuration page settings should be grouped together and put in better order (eg. settings related to plugins should be in one group) (Fred G)
  • With many plugins installed, sometimes it is hard to tell which section on configure pages (both global and job) is introduced by which plugin (or by core).
    In some extreme situation, the only way to find out is to uninstall some plugins and see which configuration is gone.
    Maybe a tooltip over the configuration label with plugin name? (John Vacz)

    + 0.5 for the nifty idea.
    You'll get my other 0.5 if you can explain why this feature would be
    useful to you. (Sami)

  • I would throw into the mix in IE8 the matrix based security – the groups and names of permissions are printed vertically which
    is much better than on chrome where they are printed horizontally taking up much more real estate forcing you to scroll left/right to see the full list. (teilo)

Expanding/collapsing sections

  • About config editing: it would be great if parts of the big config page could be expandable/foldable.
    Eg. hide details under bigger blocks like Build Steps, environment.. similar to how webmail and google Reader works. You can always 'Expand all' to make Ctrl+F addicts happy(smile)
    Of course foldable options are already there but only under "Advanced" buttons of specific details.
    I'd assume the loading of the page can be much faster, only loading unfolded options parts. (Gergo)
  • It would be also really nice, if I would be able to collapse/expand the blocks (we already do that for some stuff, like advanced options). (Ferenc Kovacs)
  • What about a expand/collapse sections mechanisms ? The sections could be lazy loaded (Load a section if the user ask to expand it).
    The configurations are XML trees, why not use Tree views as UI ? (Daniel PETISME)

    I'm perfectly fine with expand/collapse (maybe even better than tabs), my main
    point was lazy loading as waitng for a page to load is quite annoying for me (vjuranek)

  • +1 on expand/collapse sections in job config with lazy load and expand/collapse all options
    at the top for those that use ctrl-F to jump to what they need (Ann Campell)

Advanced settings button

  • “Advanced” plugin button expanded in config page by default if master config param set (Nathan Perrier)
  • Settings in "Advanced"/collapsed areas are often difficult to find, and even if you know where the setting is, it takes several clicks and scrolling to get to it.
    In many cases having everything expanded would make it easier to find a setting. (Brian J)
  • I'd like to see "Advanced" sections expanded by default if they
    contain non-default configs. (Ann Campell)
  • I'd like to be able to re-collapse an Advanced section (Ann Campell)

Navigation

  • Add config link to core UI in job list (one less mouse click) (Nathan Perrier)

    A config link in the job list is already available if you use the "configure project column" of the Extra Columns Plugin. If this is what you want
    and more people find it useful maybe it can be pulled up to the core. (Fred G)

  • Navigation between jobs could be improved. (If you select a job which is part of a view or a matrix configuration, links to the next and previous job of the same view/matrix would be nice.) (Fred G)
  • For parametrised builds, currently the build Button navigates away from where you pressed it, to set parameters. It would be better if that could be a simple non-disruptive popup, especially for the above use case. (Gergo)
  • I would also miss the option to jump quickly to various parts of the admin area, it would be really nice if we could have some quick navigation bar or something,
    so that I don't have to visit the Manage Jenkins page every time when I want to go to Manage plugins or Configure System. (Ferenc Kovacs)

    This "I want to reduce the number of clicks" seem to be a common theme.
    Maybe some kind of drop-down menu or something to provide quicker
    nagivation or something. (Kohsuke Kawaguchi)

  • less clicks required would be great in general (Gergo)
  • there are some improvements which could make work much faster: less
    clicks to go to the pages I need often:
    • I am in the job page and see some failed builds in the list. To see
      the reason, I have to click on the build, and then on the show console
      message. I hate failed builds, not because they are failed, but
      because I have to click twice to see the console. There is a plugin to
      add the latest console to the views, but not to the job build list
    • Every time I make config changes to Jenkins, saving the config will
      lead me to the main page and not to the admin page. So when testing
      something which needs serveral config changes, I always need two
      clicks to get into the jenkins config again.
    • There are two jobs running, and I want to see both console outputs,
      but the jobs are in another view. Strg-Click on the little blue
      progress bar does not open the console in a new window, so I have to
      open both jobs with Strg-left-Click and then I can click on the
      progress bars. Two clicks to much (wink) (Florian R.)

      Hello Florian,
      I submitted a patch a while ago, which will jump to the console
      immediately. Clicking on the status icon (blue, yellow, red) of a
      build will go directly to the console output (seehttps://github.com/jenkinsci/jenkins/pull/93).
      Regards Mirko (Mirko Friedenhagen)

  • +1 for fixing the admin page, it is an issue to have to got to manage
    jenkins to get to manage plugins, etc... (Mark Donohoe)
  • +1 for making it easier to delete a job using the shelved projects plugin.
    (Mark Donohoe)
  • I would have to say though what would really be nice is if the search bar would allow us to search through all of the config files, especially for when we have to branch the pipeline that would be a really life saver. Find and Replace for config files. (Charles Murray)
  • Copy Project
    When copying projects you have to put the name of the project you want
    to copy. Would be nice if this was a dropdown. (Tony P.)

    Tony P,
    When you are copying a project, you have to type a letter (at least in Firefox) in the "to be copied" field to get a drop down list of all the existing projects with names beginning with that letter. I don't know how to see the whole list of existing projects. Maybe there is a way.
    I can think of several ways to make that easier when there is a large list of existing projects. Something to click that brings up a popup window (sort of the way calendars pop up). That window shows the whole list or lets you select a view and shows only those projects or, maybe, you type something and the list shows matching project names.
    It sure isn't a major problem though.(Lee Meador)

Update Manager (IN PROGRESS)

  • The Available Plugins page has also become rather long, assuming most people have more plugins not installed than installed.
    Possible solutions would be a search mechanism, a second set of tabs by category, or links to jump to a certain category. (Brian J)

=> JENKINS-12868 Improve navigation on the "Available Plugins" tab of the update center

Keyboard Shortcuts (DONE)

  • How about supporting keyboard shortcuts? Granted they're more for power users, but those tend to be the ones who would need to change/save configs too frequently.
    Eg. 'c' to configure current job, '<Tab><Enter> - save job, Tab or 'p'/'n' : prev/next configuration group*.
    (inspired by http://support.google.com/mail/bin/answer.py?hl=en&answer=6594 ) (Gergo)
  • 2) More keyboard shortcuts for faster navigation: E.g. I'd love a key
    to take me to the Jenkins search box at the top. The search box should
    allow fuzzy matching for job names. It should search for job
    descriptions too. It would be great it if allowed me to jump directly
    to a certain build of a job too.
    In other words: I want to see more without scrolling and I want to
    navigate without reaching for the mouse. (Sami)

=> Some of the suggestions have been implemented in Keyboard Shortcuts Plugin!

Graphs

  • How about providing some standard widgets for graphs etc. That way they are consistent between the different plugins that track numbers over time. (Nick)
  • Graphs – IMAPs don’t work in IE8 but do in chrome (JENKINS-6879). (teilo)

Slaves

  • The slave-list on the left gets cluttered with mostly irrelevant information. I'd like to see online nodes at the top, offline nodes at the bottom.
    I'd like an option to disable the display of non-active executors to save space. (Salim Fadhley)
  • “build now here” option (for testing new slaves). (Terry)
  • Slave info page – have a “your slave.jar is not up to date” message. And probably in the connection string “connected via XXX, with version YYY, on arch (x32|x64).” (Terry)
  • “run elsewhere” option/button for queued builds. (Terry)

Artifacts

  • Artifacts
    I would like to have more control over this. We generally spit out a
    handful of artifacts and it would be nice if they were able to be on
    the job screen. The names of the artifacts change for any given build
    and I always end in a situation where you have to drill down a little
    bit to get to them (Tony P.)
  • Also when displaying artificats it seems if there is only a small
    number the widget or whatever it is, works and you can just get to the
    artifact by clicking on "+" - great. If the number of artifacts is too
    big this completely disappears and you have to drill down several
    pages. This cutover is not for thousands of files but what seems to be
    a relatively small number. (Tony P.)
  • We should be able to control the visibility of artifacts with permissions, for example: have anonymous read of the job but require login before you can see and download the artifacts. (Liam Bennett)

Icons

  • Unique Icons for different actions. (Right now the same icons get reused in core and also in plugins for different actions, eg. Build History, Script Console, Changes all share the same icon) (Fred G)

    This is because we draw from the Tango icon set and hence the choice is
    limited. I still think it's better than us pulling icons that feel
    different from all over the place.
    But if we have someone interested in writing icons in the same theme,
    that's entirely different story... (Kohsuke Kawaguchi)

    Could look at the famfam silk icon set, its very nice and has a very large set of icons. Not sure on the available format though.(slide)

    The license looks right, but the icons appear to only be in 16x16 format. (Jesse Farinacci)

  • Add icons to the status balls. Advantages:
    • great help for color blind users
    • easier to notice for regular users too
      Suggestions: x (cross) for red, v (check mark) for green, !
      (exclamation) for yellow, - (dash) for disabled/aborted. (Costin)

Layout

  • make fonts bigger and use less borders (domi)
  • background color changes in different regions to group things together (domi)
  • Whatever change happens, it would be nice to have the option to configure
    it ourselves. Some sort of UI that allows users to change colors, fonts,
    maybe even layouts, maybe even icons, etc.etc. would be nice. (grayaii)
  • Currently, the webpage does a good job at maximizing its real-estate.
    Meaning that banners and graphics don't take up too much space. But, when
    the amount of views/jobs/etc grows, jenkins has a hard time displaying that
    information. I remember that Dean Yu gave a presentation on how to handle
    displaying 100+ views, but it would nice if that sort of functionality is
    built into jenkins. (I don't remember if there is plugin for this or not) Or
    at least take this into consideration when re-doing the graphics. (grayaii)
  • This is minor, but I posted a question a while back about changing the
    icons of the view folder. Here is thehttp://jenkins.361315.n4.nabble.com/Different-Icons-for-Different-Views-td3649489.html
    link (grayaii)
  • Overall, IMHO, the layout does its job quite nicely, so if changes are
    coming, hopefully they will not be too disruptive (The microsoft Ribbon
    comes to mind... I don't think I met anyone who liked that UI...) (grayaii)
  • 1) Find ways to pack more information into the browser window. A
    serious Jenkins site with lots of jobs and slaves requires one to
    scroll too much. Make sidebars shrink when mouse is not over them
    (like Gmail's label list). Make executor list smaller. (Sami)

Improve page load times

  • Load performance (certainly in IE8 is not brilliant in a few pages) (teilo)
  • Improve page load times. Running tools such as Yslow against certain key pages may give some hints for how to improve in this area.
    Some preliminary tests suggest there might be some room for improvement in how js/CSS is handled. (Brian J)
  • The autorefresh thing is nice but it should be "ajaxified" to not refresh the whole page and just widgets which could be autorefreshed. (Grégory Bougeard)

Dynamic update of page contents

  • My biggest peve is stale pages. The job has been finished for 1 hour
    and the build page button is still blinking!
    I configure a job and the page is stale, I refresh, it's good, I save
    and get the dreaded can't find class error, do it again
    and hope it works. If you turn on auto refresh (I have mine set for 7
    seconds) you can't read reports as a refresh takes you to another page.
    This is the only application I use that has this problem. Is this a
    java thing? (I don't code in java). (Mark Donohoe)
    • +1 - This is pretty annoying indeed (Tomas Brambora)

Misc

  • The ability to define your own report page. For example, my users want
    colored indicators next to reports. My reports may report errors in the
    run, so those reports get 'red'. Reports that show a clean run get
    green, reports that have some other problem show yellow, modules with no
    tests show orange. I can to this now by creating a directory with my
    own index.html in it with the reports, but it would nice to have some
    sort of template system that could be used. (Mark Donohoe)
  • It would be nice to indicate a particular view that was able to be viewed by everyone (without them logging in). It would be up to you to make sure that view didn't include any options you didn't want exposed to the world.
    This would let me set up particular status views that show projects of interest to non-advanced web users. I put a link on their phone or computer and they click to see how things are going.
    Notice that it fools with the security model that says the project itself decides who can see anything about it. In this case, the view would do that. I haven't thought through the implications so just ignore me quietly if it introduces a security hole that isn't fixable. What I don't want is to make these folks log in but I don't want to open all the project info the the world at large. The view can limit what is seen about all the projects in that view.
    (Lee Meador)
  • I can set a description on a view-by-view basis, but sometimes I need
    to be able to set a system-wide message that would appear on every
    view (and project and build?) It would be really spiffy if the area
    reserved for this message did an auto refresh - on a configurable time
    limit - the same way the build queue does. (Ann Campell)
    +1 - Jason Wooster
  • I'd love to be able to configure on a job-by-job basis what the
    "build" link said. We have many jobs that are pure "deploy" and this
    sometimes causes confusion. (Ann Campell)
  • Recently saw discussed in some other tool the ability to "View
    as" [], which I have craved in Jenkins but didn't know how
    to say it. As an admin I often have trouble understanding what other
    users can/can't see without hanging over their shoulders. It would be
    nice if I could verify their experience before I told them to "go look/
    do..." Ditto as a plugin writer w/r/t the view/execute perms I put on
    features. (Ann Campell)
    +1 - Jason Wooster
  • Better plugin support for multi jobs. Can you summarise the multi job data better within a plugin? (Terry)
  • How about an easy way to convert a working single target job to a matrix build? (LesMikesell)
  • +1 - converting from one job-type to another could be quite useful. Single->Matrix, Maven->Freestyle, Single->(template,build-flow etc)
  • I think depending on who you ask you will get conflicting reports of what works/doesn’t – I haven’t herad anybody at work complain about the UI in Jenkins.
    (apart from where its’s broken or displays badly in IE – plugin descriptions I’m looking at you!) (teilo)
  • Ability to have common options for all jobs (like columns, timestamping, ...) (Grégory Bougeard)
  • I'm not aware of which web technology is used for Jenkins GUI but today great things can be done with tools like GWT or Primefaces (JSF2) or jQuery to have a really nice UI.
    I would have a look on it (big grin) (Grégory Bougeard)

    From my understanding, the idea here was to get UX designer to help improve look and feel, usability and such things, not to fully redesign the UI framework (smile)
    As a side note, GWT can't be used on Jenkins as it requires all UI code to be available at compile time, so can't handle plugins to contribute UI. (nicolas de loof)

  • Complete the Twitter bootstrap integration that was started. What are the current remaining issues? Compatibiltiy implications?
    • Done: Integration with Bootstrap and jQuery. Red and black Jenkins theme.
    • Done: Some improvements. For instance, collapsible advanced block, responsive layout.
    • Issue: Plugin compatibility. Some plugins have assumption on CSS rules. Importing Bootstrap changes many CSS rules. Especially PRE tags look ugly in some plugins.
    • Issue: Conflicts with master branch. hudson-behavior.js has been modularized in master branch and these changes cannot be merged.
  • Allow more flexible placement of parameter description. In many cases it makes sense to have the description displayed above/before the parameter entry (Ioannis Moutsatsos)
  • Allow display of build forms uncluttered by the side-panel (hyperlinks/build history)

Revisiting context menu

  • Many people told me that the automatic pop-up of the menu is annoying as it hides what they are trying to see. The suggestions for mitigation includes:
    • Allowing users to individually disable
    • Show a small arrow on the right upon hover, then click that arrow to open the menu.