[JENKINS-69113] renovate progressBar

core/src/main/resources/hudson/model/Run/statusIcon.jelly

@@ -29,8 +29,11 @@ THE SOFTWARE.
 -->
 <?jelly escape-by-default='true'?>
 <st:compress xmlns:j="jelly:core" xmlns:st="jelly:stapler" xmlns:d="jelly:define" xmlns:l="/lib/layout" xmlns:t="/lib/hudson" xmlns:f="/lib/form" xmlns:i="jelly:fmt">
-<st:setHeader name="X-Building" value="${it.building}" />
-<l:ajax>
-  <l:icon alt="${it.iconColor.description}" src="symbol-status-${it.iconColor.iconName}" class="icon-xlg" tooltip="${it.iconColor.description}"/>
-</l:ajax>
+  <st:setHeader name="X-Building" value="${it.building}" />
+  <st:setHeader name="X-Progress" value="${it.executor.progress}" />
+  <st:setHeader name="X-Executor-Runtime" value="${it.executor.timestampString}" />
+  <st:setHeader name="X-Executor-Remaining" value="${it.executor.estimatedRemainingTime}" />
+  <l:ajax>
+    <l:icon alt="${it.iconColor.description}" src="symbol-status-${it.iconColor.iconName}" class="icon-xlg" tooltip="${it.iconColor.description}"/>
+  </l:ajax>
 </st:compress>

core/src/main/resources/lib/hudson/build-caption.js

@@ -1,25 +1,45 @@
 (function () {
   function updateBuildCaptionIcon() {
-    fetch("statusIcon").then((rsp) => {
-      var isBuilding = rsp.headers.get("X-Building");
-      if (isBuilding === "true") {
-        setTimeout(updateBuildCaptionIcon, 5000);
-      } else {
-        var progressBar = document.querySelector(
-          ".build-caption-progress-container",
-        );
-        if (progressBar) {
-          progressBar.style.display = "none";
+    const buildCaption = document.querySelector(".jenkins-build-caption");
+    const url = buildCaption.dataset.statusUrl;
+    fetch(url).then((rsp) => {
+      if (rsp.ok) {
+        let isBuilding = rsp.headers.get("X-Building");
+        if (isBuilding === "true") {
+          setTimeout(updateBuildCaptionIcon, 5000);
+          let progress = rsp.headers.get("X-Progress");
+          let runtime = rsp.headers.get("X-Executor-Runtime");
+          let remaining = rsp.headers.get("X-Executor-Remaining");
+          let progressBar = document.querySelector(".app-progress-bar");
+          let progressBarDone = document.querySelector(
+            ".app-progress-bar span",
+          );
+          if (progressBar) {
+            let tooltip = progressBar.dataset.tooltipTemplate;
+            tooltip = tooltip.replace("%0", runtime).replace("%1", remaining);
+            progressBar.setAttribute("tooltip", tooltip);
+            progressBar.setAttribute("title", tooltip);
+            Behaviour.applySubtree(progressBar, true);
+          }
+          if (progressBarDone) {
+            progressBarDone.style.width = `${progress}%`;
+          }
+        } else {
+          let progressBar = document.querySelector(
+            ".build-caption-progress-container",
+          );
+          if (progressBar) {
+            progressBar.style.display = "none";
+          }
         }
+        rsp.text().then((responseText) => {
+          document.querySelector(".jenkins-build-caption svg").outerHTML =
+            responseText;
+          Behaviour.applySubtree(buildCaption, false);
+        });
       }
-      rsp.text().then((responseText) => {
-        document.querySelector(".jenkins-build-caption .icon-xlg").outerHTML =
-          responseText;
-      });
     });
   }
 
-  window.addEventListener("load", function () {
-    window.addEventListener("jenkins:consoleFinished", updateBuildCaptionIcon);
-  });
+  setTimeout(updateBuildCaptionIcon, 5000);
 })();

core/src/main/resources/lib/hudson/buildCaption.jelly

@@ -28,7 +28,7 @@ THE SOFTWARE.
 <?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="jenkins-app-bar">
-    <div class="jenkins-app-bar__content jenkins-build-caption">
+    <div class="jenkins-app-bar__content jenkins-build-caption" data-status-url="${rootURL}/${it.url}statusIcon">
       <l:icon alt="${it.iconColor.description}" src="symbol-status-${it.iconColor.iconName}"
           tooltip="${it.iconColor.description}"/>
       <h1>
@@ -46,7 +46,7 @@ THE SOFTWARE.
               <td class="build-caption-progress-bar">
                 <t:buildProgressBar build="${it}"/>
               </td>
-              <td>
+              <td class="jenkins-table__link">
                 <j:if test="${it.parent.hasAbortPermission()}">
                   <l:stopButton href="stop" confirm="${%confirm(it.fullDisplayName)}"
                           alt="${%cancel}"/>

core/src/main/resources/lib/hudson/buildProgressBar.jelly

@@ -36,5 +36,6 @@ THE SOFTWARE.
   <j:set var="executor" value="${executor?:build.executor}" /> <!-- TODO use Executor.of -->
   <t:progressBar tooltip="${%text(executor.timestampString,executor.estimatedRemainingTime)}"
                  red="${executor.isLikelyStuck()}"
-                 pos="${executor.progress}" href="${h.getConsoleUrl(build) ?: (rootURL + '/' + build.url + 'console')}"/>
+                 pos="${executor.progress}" href="${h.getConsoleUrl(build) ?: (rootURL + '/' + build.url + 'console')}"
+                 tooltipTemplate="${%text('%0','%1')}"/>
 </j:jelly>

core/src/main/resources/lib/hudson/progressBar.jelly

@@ -32,19 +32,20 @@ THE SOFTWARE.
 -->
 <?jelly escape-by-default='true'?>
 <j:jelly xmlns:j="jelly:core" xmlns:x="jelly:xml" xmlns:st="jelly:stapler" xmlns:d="jelly:define" xmlns:l="/lib/layout" xmlns:t="/lib/hudson" xmlns:f="/lib/form">
-  <table class="progress-bar ${attrs.red?'red':null}" id="${attrs.id}" tooltip="${attrs.tooltip}" href="${attrs.href}" style="${attrs.href!=null ? 'cursor:pointer' : null}">
+  <div class="app-progress-bar ${attrs.large?'app-progress-bar-large':null} ${attrs.red?'red':null}"
+       href="${attrs.href}"
+       tooltip="${attrs.tooltip}"
+       id="${attrs.id}"
+       style="${attrs.href!=null ? 'cursor:pointer' : null}"
+       data-tooltip-template="${attrs.tooltipTemplate}"
+  >
     <j:choose>
       <j:when test="${pos lt 0}">
-        <!-- style sheet will fill in the progress bar image -->
-        <tbody><tr class="unknown"><td/></tr></tbody>
+        <span class="app-progress-bar-animate unknown"/>
       </j:when>
       <j:otherwise>
-          <tbody><tr>
-            <td class="progress-bar-done" style="width:${pos}%;"/>
-            <td class="progress-bar-left" style="width:${100-pos}%"/>
-          </tr>
-        </tbody>
+        <span class="app-progress-bar-animate" style="width: ${pos}%;"/>
       </j:otherwise>
     </j:choose>
-  </table>
+  </div>
 </j:jelly>

core/src/main/resources/lib/layout/progressiveRendering.jelly

@@ -36,7 +36,7 @@ THE SOFTWARE.
     </st:documentation>
     <st:adjunct includes="lib.layout.progressiveRendering.progressiveRendering"/>
     <j:set var="id" value="${h.generateId()}"/>
-    <t:progressBar id="${id}" pos="0" tooltip="${tooltip ?: '%progressMessage'}"/>
+    <t:progressBar id="${id}" pos="0" tooltip="${tooltip ?: '%progressMessage'}" large="true"/>
     <st:bind var="proxy" value="${handler}" />
     <div class="progressive-rendering-information-holder" data-id="${id}" data-callback="${callback}" />
 </j:jelly>

core/src/main/resources/lib/layout/progressiveRendering/progressiveRendering.js

@@ -30,24 +30,17 @@ function progressivelyRender(handler, callback, statusId) {
       document.getElementById(statusId).style.display = "none";
     } else if (r.status == "canceled") {
       // TODO ugly; replace with single tr of class=unknown?
-      document.querySelector("#" + statusId + " .progress-bar-done").innerHTML =
-        "Aborted.";
+      document.querySelector("#" + statusId + " span").innerHTML = "Aborted.";
     } else if (r.status == "error") {
-      document.querySelector(
-        "#" + statusId + " .progress-bar-done",
-      ).style.width = "100%";
-      document.querySelector(
-        "#" + statusId + " .progress-bar-left",
-      ).style.width = "0%";
-      document.getElementById(statusId).className = "progress-bar red";
+      document.querySelector("#" + statusId + " span").style.width = "100%";
+      document.getElementById(statusId).classList.add("red");
+      document
+        .getElementById(statusId)
+        .classList.remove("app-progress-bar-animate");
     } else {
       callback(r.data);
-      document.querySelector(
-        "#" + statusId + " .progress-bar-done",
-      ).style.width = 100 * r.status + "%";
-      document.querySelector(
-        "#" + statusId + " .progress-bar-left",
-      ).style.width = 100 - 100 * r.status + "%";
+      document.querySelector("#" + statusId + " span").style.width =
+        100 * r.status + "%";
       checkNewsLater(500);
     }
   }

test/src/test/java/hudson/model/AsynchPeopleTest.java

@@ -48,10 +48,10 @@ public class AsynchPeopleTest {
         HtmlPage page = wc.goTo("asynchPeople");
         assertEquals(0, wc.waitForBackgroundJavaScript(120000));
         boolean found = false;
-        for (DomElement table : page.getElementsByTagName("table")) {
-            if (table.getAttribute("class").contains("progress-bar")) {
+        for (DomElement div : page.getElementsByTagName("div")) {
+            if (div.getAttribute("class").contains("app-progress-bar")) {
                 found = true;
-                assertEquals("display: none;", table.getAttribute("style"));
+                assertEquals("display: none;", div.getAttribute("style"));
                 break;
             }
         }

war/src/main/scss/abstracts/_theme.scss

@@ -311,6 +311,12 @@ $semantics: (
   --item-background--active: hsla(240, 25%, 75%, 0.225);
   --item-box-shadow--focus: hsla(240, 25%, 75%, 0.105);
 
+  // progress-bar
+  --progress-done: #3465a4;
+  --progress-done-red: #c00;
+  --progress-left: #bababa;
+  --progress-anime-bg: white;
+
   // Deprecated
   --primary: var(--accent-color); // Use var(--accent-color) instead
   --success: var(--green); // Use var(--success-color) instead

war/src/main/scss/base/_style.scss

@@ -832,6 +832,68 @@ textarea {
 
 /* ========================= progress bar ========================= */
 
+.app-progress-bar {
+  height: 12px;
+  width: 100px;
+  padding: 2px;
+  border-radius: 6px;
+  background-color: var(--progress-left);
+  margin-top: 2px;
+
+  &-large {
+    height: 24px;
+    width: 200px;
+    padding: 4px;
+    border-radius: 12px;
+
+    & > span {
+      border-radius: 10px !important;
+    }
+  }
+
+  & > span {
+    height: 100%;
+    min-width: 8%;
+    background-color: var(--progress-done);
+    display: block;
+    border-radius: 4px;
+  }
+
+  &-animate {
+    background-image: linear-gradient(
+      -45deg,
+      var(--progress-anime-bg) 25%,
+      transparent 25%,
+      transparent 50%,
+      var(--progress-anime-bg) 50%,
+      var(--progress-anime-bg) 75%,
+      transparent 75%,
+      transparent
+    );
+    z-index: 1;
+    background-size: 25px 25px;
+    animation: progress-bar 5s linear infinite;
+  }
+
+  &.red > span {
+    background-color: var(--progress-done-red);
+  }
+
+  & > .unknown {
+    width: 100%;
+  }
+}
+
+@keyframes progress-bar {
+  0% {
+    background-position: 0 0;
+  }
+
+  100% {
+    background-position: 25px 25px;
+  }
+}
+
 table.progress-bar {
   border-collapse: collapse;
   border: 1px solid #3465a4;

war/src/main/webapp/scripts/hudson-behavior.js

@@ -1228,7 +1228,7 @@ function rowvgStartEachRow(recursive, f) {
   });
 
   Behaviour.specify(
-    "TABLE.progress-bar",
+    "TABLE.progress-bar, div.app-progress-bar",
     "table-progress-bar",
     ++p,
     function (e) {