Overview
Recently some UI improvements around the Manage Jenkins page have been introduced. The visual changes are very subtle but behind them, there are interesting benefits.
Some of the goals that we have tried to achieve:
Applying a semantic HTML
Removing the
<table>tag usage for implementing layouts and content structures. Read this article if you want to know reasons and/or arguments.Small re-styling focused on spacing, margins, composition, etc..
Accessibility
In order to provide a quick overview of the visual changes, let’s take a look at these screenshots.
Manage Jenkins page (after)
Information about how this change can affect the current implementations of Administrative Monitors can be found in the following section
For core developers
Let’s use a real example for showing how this proposal works.
This is the original UI implementation of HudsonHomeDiskUsageMonitor.java:
<?jelly escape-by-default='true'?><j:jellyxmlns:j="jelly:core"xmlns:st="jelly:stapler"xmlns:d="jelly:define"xmlns:l="/lib/layout"xmlns:t="/lib/hudson"xmlns:f="/lib/form"><divclass="warning"><formmethod="post"action="${rootURL}/${it.url}/act"name="${it.id}"><divstyle="float:right"><f:submitname="yes"value="${%Tell me more}"/><f:submitname="no"value="${%Dismiss}"/></div>
${%blurb(app.rootDir)}</form></div></j:jelly>And this is the proposed change:
<?jelly escape-by-default='true'?><j:jellyxmlns:j="jelly:core"xmlns:st="jelly:stapler"xmlns:d="jelly:define"xmlns:l="/lib/layout"xmlns:t="/lib/hudson"xmlns:f="/lib/form"><divclass="alert alert-warning"><formmethod="post"action="${rootURL}/${it.url}/act"name="${it.id}"><f:submitname="yes"value="${%Tell me more}"/><f:submitname="no"value="${%Dismiss}"/></form>
${%blurb(app.rootDir)}</div></j:jelly>Some highlights:
No more ad hoc UI compositions
No more custom CSS classes when Jenkins project is already using Bootstrap for many different things
Based on Bootstrap Alert
All administrative monitors defined in Jenkins core have been adapted as part of this proposal.
For plugin developers
No changes are really needed, but we do recommend you to adapt your plugins to this proposal so Jenkins users have a better user experience.
Taking into account that you want to keep backward compatibility, you will need some changes.
In your implementation of Administrative Monitor, add this helper method:
/**
* This method can be removed when the baseline is updated to 2.103
*
* @return If this version of the plugin is running on a Jenkins version where JENKINS-43786 is included.
*/@Restricted(DoNotUse.class)publicboolean isTheNewDesignAvailable() {if (Jenkins.getVersion().isNewerThan(new VersionNumber("2.103"))) {returntrue;
}returnfalse;
}In your view (a.k.a. Jelly file or Groovy file):
<?jelly escape-by-default='true'?><j:jellyxmlns:j="jelly:core"><j:iftest="${!it.isTheNewDesignAvailable}"><divclass="warning"><p>SSH Host Key Verifiers are not configured for all SSH slaves on this Jenkins instance. This could leave these slaves open to man-in-the-middle attacks. <ahref="${rootURL}/computer/">Update your slave configuration</a> to resolve this.</p></div></j:if><j:iftest="${it.isTheNewDesignAvailable}"><divclass="alert alert-warning">
SSH Host Key Verifiers are not configured for all SSH slaves on this Jenkins instance. This could leave these slaves open to man-in-the-middle attacks. <ahref="${rootURL}/computer/">Update your slave configuration</a> to resolve this.</div></j:if></j:jelly>If you don’t want to keep a strict backward compatibility, the impact is minimal. In fact, you can see an example on GitHub Plugin.
Some helpful references:
JIRA issue where the proposal was tracked
Pull Request with the change in Jenkins core. You can find several screenshots
Pull Request for adapting SSH Slave Plugin
Do not hesitate to ping me if you decide to adapt your Administrative Monitors.