incorporate feedback

use existing colors only animate when unknown or with flag animate via build caption and progressive rendering
jenkinsci · Jan 3, 2024 · ba0e055 · ba0e055
1 parent 28e2c16
commit ba0e055
Show file tree

Hide file tree

Showing 11 changed files with 134 additions and 97 deletions.
diff --git a/core/src/main/resources/hudson/model/Run/statusIcon.jelly b/core/src/main/resources/hudson/model/Run/statusIcon.jelly
@@ -33,6 +33,7 @@ THE SOFTWARE.
   <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>

diff --git a/core/src/main/resources/hudson/model/UpdateCenter/DownloadJob/Installing/status.jelly b/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>
diff --git a/core/src/main/resources/lib/hudson/build-caption.js b/core/src/main/resources/lib/hudson/build-caption.js
@@ -10,6 +10,7 @@
           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",
@@ -20,6 +21,11 @@
             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}%`;

diff --git a/core/src/main/resources/lib/hudson/buildCaption.jelly b/core/src/main/resources/lib/hudson/buildCaption.jelly
@@ -44,7 +44,7 @@ THE SOFTWARE.
                 ${%Progress}:
               </td>
               <td class="build-caption-progress-bar">
-                <t:buildProgressBar build="${it}"/>
+                <t:buildProgressBar build="${it}" animate="true"/>
               </td>
               <td class="jenkins-table__link">
                 <j:if test="${it.parent.hasAbortPermission()}">

diff --git a/core/src/main/resources/lib/hudson/buildProgressBar.jelly b/core/src/main/resources/lib/hudson/buildProgressBar.jelly
@@ -32,10 +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')}"
-                 tooltipTemplate="${%text('%0','%1')}"/>
+                 tooltipTemplate="${%text('%0','%1')}"
+                 animate="${attrs.animate}"/>
 </j:jelly>
diff --git a/core/src/main/resources/lib/hudson/progressBar.jelly b/core/src/main/resources/lib/hudson/progressBar.jelly
@@ -22,30 +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">
-  <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}">
-        <span class="app-progress-bar-animate unknown"/>
-      </j:when>
-      <j:otherwise>
-        <span class="app-progress-bar-animate" style="width: ${pos}%;"/>
-      </j:otherwise>
-    </j:choose>
-  </div>
+<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>
diff --git a/core/src/main/resources/lib/layout/progressiveRendering.jelly b/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'}" large="true"/>
+    <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>
diff --git a/war/src/main/scss/abstracts/_theme.scss b/war/src/main/scss/abstracts/_theme.scss
@@ -311,12 +311,6 @@ $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

diff --git a/war/src/main/scss/base/_style.scss b/war/src/main/scss/base/_style.scss
@@ -832,68 +832,6 @@ 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;

diff --git a/war/src/main/scss/components/_index.scss b/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";

diff --git a/war/src/main/scss/components/_progress-bar.scss b/war/src/main/scss/components/_progress-bar.scss
@@ -0,0 +1,75 @@
+.app-progress-bar {
+  --color: var(--accent-color);
+
+  height: 12px;
+  width: 104px;
+  padding: 2px;
+  border-radius: 6px;
+  background-color: var(--text-color-secondary);
+  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;
+    }
+  }
+}