Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Browse files
Browse the repository at this point in the history
Merge pull request #1327 from recena/JENKINS-43786
[JENKINS-43786] Blog post about JENKINS-43786
- Loading branch information
Showing
5 changed files
with
143 additions
and
0 deletions.
There are no files selected for viewing
143 changes: 143 additions & 0 deletions
143
content/blog/2018/01/2018-01-21-overhaul-of-manage-jenkins-page.adoc
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,143 @@ | ||
--- | ||
layout: post | ||
title: "Overhaul of Manage Jenkins page" | ||
tags: | ||
- jenkins | ||
- ui | ||
- restyling | ||
- upgrade | ||
author: recena | ||
--- | ||
|
||
== 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 https://en.wikipedia.org/wiki/Semantic_HTML[semantic HTML] | ||
* Removing 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-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. | ||
|
||
=== 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"] | ||
|
||
Information about how this change can affect the current implementations of https://jenkins.io/doc/developer/extensions/jenkins-core/#administrativemonitor[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`: | ||
|
||
[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 | ||
* Based on https://getbootstrap.com/docs/3.3/components/#alerts[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 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.103 | ||
* | ||
* @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.103"))) { | ||
return true; | ||
} | ||
return false; | ||
} | ||
---- | ||
|
||
In your view (a.k.a. Jelly file or Groovy 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 a _strict_ backward compatibility, the impact is minimal. In fact, you can see an https://github.com/jenkinsci/github-plugin/pull/177#issuecomment-337266953[example] on GitHub Plugin. | ||
|
||
Some helpful references: | ||
|
||
* 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 the 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 | ||
|
||
Do not hesitate to https://github.com/recena[ping me] if you decide to adapt your Administrative Monitors. |
Binary file added
BIN
+177 KB
content/images/post-images/2018-01-15-JENKINS-43786/JENKINS-43786_1.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added
BIN
+97.6 KB
content/images/post-images/2018-01-15-JENKINS-43786/JENKINS-43786_2.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added
BIN
+93.4 KB
content/images/post-images/2018-01-15-JENKINS-43786/JENKINS-43786_3-before.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added
BIN
+223 KB
content/images/post-images/2018-01-15-JENKINS-43786/JENKINS-43786_4-before.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.