diff --git a/content/blog/2018/01/2018-01-21-overhaul-of-manage-jenkins-page.adoc b/content/blog/2018/01/2018-01-21-overhaul-of-manage-jenkins-page.adoc new file mode 100644 index 000000000000..268deceb8a64 --- /dev/null +++ b/content/blog/2018/01/2018-01-21-overhaul-of-manage-jenkins-page.adoc @@ -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 `` 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] +---- + + +
+
+
+ + +
+ ${%blurb(app.rootDir)} + +
+ +---- + +And this is the proposed change: + +[source,html] +---- + + +
+
+ + + + ${%blurb(app.rootDir)} +
+ +---- + +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] +---- + + + + +
+

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. Update your slave configuration to resolve this.

+
+ + + +
+ 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. Update your slave configuration to resolve this. +
+ + + +---- + +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. 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 new file mode 100644 index 000000000000..9c9c55236dc1 Binary files /dev/null and b/content/images/post-images/2018-01-15-JENKINS-43786/JENKINS-43786_1.png differ 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 new file mode 100644 index 000000000000..66156608524e Binary files /dev/null and b/content/images/post-images/2018-01-15-JENKINS-43786/JENKINS-43786_2.png differ 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 new file mode 100644 index 000000000000..d6d5f8c954db Binary files /dev/null and b/content/images/post-images/2018-01-15-JENKINS-43786/JENKINS-43786_3-before.png differ 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 new file mode 100644 index 000000000000..3a0b58511781 Binary files /dev/null and b/content/images/post-images/2018-01-15-JENKINS-43786/JENKINS-43786_4-before.png differ