[JENKINS-43786] Blog post about JENKINS-43786

jenkins-infra · Jan 14, 2018 · ad8ca90 · ad8ca90
1 parent eb565d7
commit ad8ca90
Show file tree

Hide file tree

Showing 5 changed files with 139 additions and 0 deletions.
diff --git a/content/blog/2018/01/2018-01-15-overhaul-of-manage-jenkins-page.adoc b/content/blog/2018/01/2018-01-15-overhaul-of-manage-jenkins-page.adoc
@@ -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
diff --git a/content/images/post-images/2018-01-15-JENKINS-43786/JENKINS-43786_1.png b/content/images/post-images/2018-01-15-JENKINS-43786/JENKINS-43786_1.png
diff --git a/content/images/post-images/2018-01-15-JENKINS-43786/JENKINS-43786_2.png b/content/images/post-images/2018-01-15-JENKINS-43786/JENKINS-43786_2.png
diff --git a/content/images/post-images/2018-01-15-JENKINS-43786/JENKINS-43786_3-before.png b/content/images/post-images/2018-01-15-JENKINS-43786/JENKINS-43786_3-before.png
diff --git a/content/images/post-images/2018-01-15-JENKINS-43786/JENKINS-43786_4-before.png b/content/images/post-images/2018-01-15-JENKINS-43786/JENKINS-43786_4-before.png