Skip to content
Permalink
Browse files

[JENKINS-43786] Blog post about JENKINS-43786

  • Loading branch information
recena committed Jan 14, 2018
1 parent eb565d7 commit ad8ca90a2347852c3f7c8db208308c365b7c39e5
@@ -0,0 +1,139 @@
---
layout: post
title: "Overhaul of Manage Jenkins page"
tags:
- jenkins
- ui
- restyling
author: recena
---

== Overview

Recently we have introduced some UI improvements around to the Manage Jenkins page. The visual changes are very subtle but behind of them, there are interesting benefits.

Some of goals that we have tried to achieve:

* Apply a https://en.wikipedia.org/wiki/Semantic_HTML[semantic HTML]
* Remove the `<table>` tag usage for implementing layouts and content structures. Read this https://www.hotdesign.com/seybold[article] if you want to know reasons and / or arguments.
* Small re-style focused on spacing, margins, composition, etc..
* Accesibility

In order to provide a quick view of the visual changes, let's take a look at these screenshots.

===== System tray with administrative messages (before)

image:/images/post-images/2018-01-15-JENKINS-43786/JENKINS-43786_3-before.png[role="center"]

===== System tray with administrative messages (after)

image:/images/post-images/2018-01-15-JENKINS-43786/JENKINS-43786_2.png[role="center"]

===== Manage Jenkins page (before)

image:/images/post-images/2018-01-15-JENKINS-43786/JENKINS-43786_4-before.png[role="center"]

===== Manage Jenkins page (after)

image:/images/post-images/2018-01-15-JENKINS-43786/JENKINS-43786_1.png[role="center"]

In the following section you will find information about how this change can affect to the current implementations of the https://jenkins.io/doc/developer/extensions/jenkins-core/#administrativemonitor[Administrative Monitors].

== For core developers

Let's use an real example for showing how this proposal works.

This is the original UI implementation of `HudsonHomeDiskUsageMonitor.java`:

[source,html]
----
<?jelly escape-by-default='true'?>
<j:jelly xmlns:j="jelly:core" xmlns:st="jelly:stapler" xmlns:d="jelly:define" xmlns:l="/lib/layout" xmlns:t="/lib/hudson" xmlns:f="/lib/form">
<div class="warning">
<form method="post" action="${rootURL}/${it.url}/act" name="${it.id}">
<div style="float:right">
<f:submit name="yes" value="${%Tell me more}"/>
<f:submit name="no" value="${%Dismiss}"/>
</div>
${%blurb(app.rootDir)}
</form>
</div>
</j:jelly>
----

And this is the proposed change:

[source,html]
----
<?jelly escape-by-default='true'?>
<j:jelly xmlns:j="jelly:core" xmlns:st="jelly:stapler" xmlns:d="jelly:define" xmlns:l="/lib/layout" xmlns:t="/lib/hudson" xmlns:f="/lib/form">
<div class="alert alert-warning">
<form method="post" action="${rootURL}/${it.url}/act" name="${it.id}">
<f:submit name="yes" value="${%Tell me more}"/>
<f:submit name="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 https://getbootstrap.com[Bootstrap] for many different things

All administrative monitors defined in Jenkins core have been adapted as part of this proposal.

== For plugin developers

No change 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 https://jenkins.io/doc/developer/extensions/jenkins-core/#administrativemonitor[Administrative Monitor], add this helper method:

[source,java]
----
/**
* This method can be removed when the baseline is updated to 2.101
*
* @return If this version of the plugin is running on a Jenkins version where JENKINS-43786 is included.
*/
@Restricted(DoNotUse.class)
public boolean isTheNewDesignAvailable() {
if (Jenkins.getVersion().isNewerThan(new VersionNumber("2.101"))) {
return true;
}
return false;
}
----

In your view (a.k.a. Jelly file):

[source,html]
----
<?jelly escape-by-default='true'?>
<j:jelly xmlns:j="jelly:core">
<j:if test="${!it.isTheNewDesignAvailable}">
<div class="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. <a href="${rootURL}/computer/">Update your slave configuration</a> to resolve this.</p>
</div>
</j:if>
<j:if test="${it.isTheNewDesignAvailable}">
<div class="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. <a href="${rootURL}/computer/">Update your slave configuration</a> to resolve this.
</div>
</j:if>
</j:jelly>
----

If you don't want to keep the backward compatibility, the impact is minimum. In fact, you can see an https://github.com/jenkinsci/github-plugin/pull/177#issuecomment-337266953[example] on GitHub Plugin.

Some helpful links:

* https://issues.jenkins-ci.org/browse/JENKINS-43786[JIRA issue] where the proposal was tracked
* https://github.com/jenkinsci/jenkins/pull/2857[Pull Request] with change in Jenkins core. You can find several screenshots
* https://github.com/jenkinsci/ssh-slaves-plugin/pull/70[Pull Request] for adapting SSH Slave Plugin
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.

0 comments on commit ad8ca90

Please sign in to comment.
You can’t perform that action at this time.