[JENKINS-69113] renovate progressBar

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

@@ -29,8 +29,12 @@ 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}" />
+  <st:setHeader name="X-Executor-Stuck" value="${it.executor.likelyStuck}" />
+  <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/hudson/model/UpdateCenter/DownloadJob/Installing/status.jelly

@@ -28,6 +28,6 @@ THE SOFTWARE.
     <l:icon class="icon-nobuilt-anime icon-md"/> ${%Installing}
   </div>
   <div style="padding-left: 32px">
-    <t:progressBar pos="${it.percentage}" />
+    <t:progressBar pos="${it.percentage}" animate="true"/>
   </div>
 </j:jelly>

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

@@ -1,25 +1,51 @@
 (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 stuck = rsp.headers.get("X-Executor-Stuck");
+          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 (stuck === "true") {
+              progressBar.classList.add("app-progress-bar--error");
+            } else {
+              progressBar.classList.remove("app-progress-bar--error");
+            }
+          }
+          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>
@@ -44,9 +44,9 @@ THE SOFTWARE.
                 ${%Progress}:
               </td>
               <td class="build-caption-progress-bar">
-                <t:buildProgressBar build="${it}"/>
+                <t:buildProgressBar build="${it}" animate="true"/>
               </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

@@ -32,9 +32,14 @@ THE SOFTWARE.
     <st:attribute name="executor">
       Executor that's carrying out the build. If null, defaults to "build.executor"
     </st:attribute>
+    <st:attribute name="animate">
+      animate the progress bar
+    </st:attribute>
   </st:documentation>
   <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')}"
+                 animate="${attrs.animate}"/>
 </j:jelly>

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

@@ -22,29 +22,48 @@ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 THE SOFTWARE.
 -->
 
-<!--
-  Progress bar. @pos (0-100) specifies the current position
-
-  Attributes:
-    pos  : 0-100 to indicates the current progress. -1 if the progress is unknown
-    href : if set, the progress bar becomes a hyperlink
-    red  : if set to non-null, the progress bar will be drawn in red, to indicate that the processing is likely stuck.
--->
 <?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}">
-    <j:choose>
-      <j:when test="${pos lt 0}">
-        <!-- style sheet will fill in the progress bar image -->
-        <tbody><tr class="unknown"><td/></tr></tbody>
-      </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>
-      </j:otherwise>
-    </j:choose>
-  </table>
+<j:jelly xmlns:j="jelly:core" xmlns:x="jelly:xml" xmlns:st="jelly:stapler">
+  <st:documentation>
+    <st:attribute name="pos" use="required">
+      0-100 to indicates the current progress. -1 if the progress is unknown
+    </st:attribute>
+    <st:attribute name="href" use="optional">
+      if set, the progress bar becomes a hyperlink
+    </st:attribute>
+    <st:attribute name="red" use="optional">
+      if set to non-null, the progress bar will be drawn in red, to indicate that the processing is likely stuck.
+    </st:attribute>
+    <st:attribute name="id" use="optional">
+      If set, id will be the identifier for the component
+    </st:attribute>
+    <st:attribute name="large" use="optional">
+      If set, the progress bar will have the double size
+    </st:attribute>
+    <st:attribute name="tooltip" use="optional">
+      Tooltip with more progress details.
+    </st:attribute>
+    <st:attribute name="tooltipTemplate" use="optional">
+      Template for the tooltip, so the tooltip can be updated dynamically via javascript. Used by buildCaption.
+    </st:attribute>
+    <st:attribute name="animate" use="optional">
+      If set the progress bar will be animated. Animation will also be used when the current progress is unknown.
+    </st:attribute>
+  </st:documentation>
+  <j:set var="animate" value="${(attrs.animate != null || attrs.pos lt 0) ? 'app-progress-bar--animate' : null}"/>
+  <x:element name="${attrs.href != null ? 'a' : 'div'}">
+    <x:attribute name="class">app-progress-bar ${attrs.large?'app-progress-bar--large':null} ${attrs.red?'app-progress-bar--error':null}</x:attribute>
+    <x:attribute name="href">${attrs.href}</x:attribute>
+    <x:attribute name="tooltip"><j:out value="${attrs.tooltip}"/></x:attribute>
+    <x:attribute name="id">${attrs.id}</x:attribute>
+    <x:attribute name="data-tooltip-template"><j:out value="${attrs.tooltipTemplate}"/></x:attribute>
+      <j:choose>
+        <j:when test="${pos lt 0}">
+          <span class="${animate} app-progress-bar--unknown"/>
+        </j:when>
+        <j:otherwise>
+          <span class="${animate}" style="width: ${pos}%;"/>
+        </j:otherwise>
+      </j:choose>
+  </x:element>
 </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" animate="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/components/_index.scss

@@ -13,6 +13,7 @@
 @use "page-header";
 @use "panes-and-bigtable";
 @use "progress-animation";
+@use "progress-bar";
 @use "row-selection-controller";
 @use "section";
 @use "side-panel-tasks";

war/src/main/scss/components/_progress-bar.scss

@@ -0,0 +1,79 @@
+.app-progress-bar {
+  --color: var(--accent-color);
+
+  height: 12px;
+  width: 104px;
+  padding: 2px;
+  border-radius: 6px;
+  background-color: color-mix(
+    in sRGB,
+    var(--text-color-secondary) 25%,
+    transparent
+  );
+  margin-top: 2px;
+  display: block;
+  opacity: 1 !important;
+
+  &--error > span {
+    --color: var(--error-color);
+  }
+
+  &--unknown {
+    width: 100%;
+  }
+
+  &--large {
+    height: 24px;
+    width: 208px;
+    padding: 4px;
+    border-radius: 12px;
+
+    & > span {
+      border-radius: 8px !important;
+    }
+  }
+
+  & > span {
+    height: 100%;
+    min-width: 8%;
+    background-color: var(--color);
+    display: block;
+    border-radius: 4px;
+  }
+
+  &--animate {
+    background-image: linear-gradient(
+      -45deg,
+      var(--background) 25%,
+      transparent 25%,
+      transparent 50%,
+      var(--background) 50%,
+      var(--background) 75%,
+      transparent 75%,
+      transparent
+    );
+    z-index: 1;
+    background-size: 25px 25px;
+    animation: progress-bar 5s linear infinite;
+
+    @keyframes progress-bar {
+      0% {
+        background-position: 0 0;
+      }
+
+      100% {
+        background-position: 25px 25px;
+      }
+    }
+  }
+
+  &:link {
+    &:hover {
+      opacity: 0.75 !important;
+    }
+
+    &:active {
+      opacity: 0.5 !important;
+    }
+  }
+}

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) {