[JENKINS-69113] renovate progressBar (#8821)

* [JENKINS-69113] renovate progressBar

The progressbar used at various places is replaced by a div/span
compbination and gets a new styling that is in sync with other ui
elements. Mainly it has rounded corners.
The bar is always animated opposed to old behaviour where it was only
animated when the estimated remaining time was unknown. Animation is now
based on css and no longer a gif.
All colors are defined via variables so they can be adjusted by themes.
The build progress bar shown on run and console views is now updated
dynamically.
The progress bar used in progressive rendering is doubled in size to
make it more prominent that it is still running (See [JENKINS-72138],
this doesn't solve the problem but might lower the chance that people
reload the mentioned page because they think nothing happens).

* apply prettier

* scss style

* set status url

the parameters page also includes the buildCaption.jelly. But the js is
using a relative url thus accessing `statusIcon` fails.
Store status url in the div and read from there.

* apply behaviour so tooltip is shown after icon update

fix url

* incorporate feedback

use existing colors
only animate when unknown or with flag
animate via build caption and progressive rendering

* adjust class name

* adjust bg color

* fix style

* sRGB

* avoid j:out

---------

Co-authored-by: Alexander Brandes <[email protected]>

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/buildProgressBar.properties

@@ -19,5 +19,4 @@
 # LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 # OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 # THE SOFTWARE.
-
-text=Started {0} ago<br> Estimated remaining time: {1}
+text=Started {0} ago\n Estimated remaining time: {1}

core/src/main/resources/lib/hudson/buildProgressBar_bg.properties

@@ -19,6 +19,5 @@
 # LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 # OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 # THE SOFTWARE.
-
 text=\
- Начало преди {0}<br> Оставащо време: {1}
+ Начало преди {0}\n Оставащо време: {1}

core/src/main/resources/lib/hudson/buildProgressBar_ca.properties

@@ -19,5 +19,4 @@
 # LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 # OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 # THE SOFTWARE.
-
-text=Iniciat fa {0}<br> Temps restant estimat: {1}
+text=Iniciat fa {0}\n Temps restant estimat: {1}

core/src/main/resources/lib/hudson/buildProgressBar_cs.properties

@@ -19,5 +19,4 @@
 # LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 # OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 # THE SOFTWARE.
-
-text=Začalo před {0}<br> Předpokládáný zbývající čas: {1}
+text=Začalo před {0}\n Předpokládáný zbývající čas: {1}

core/src/main/resources/lib/hudson/buildProgressBar_da.properties

@@ -19,5 +19,4 @@
 # LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 # OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 # THE SOFTWARE.
-
-text=Startet for {0} siden<br/>Estimeret resttid: {1}
+text=Startet for {0} siden\nEstimeret resttid: {1}

core/src/main/resources/lib/hudson/buildProgressBar_de.properties

@@ -19,5 +19,4 @@
 # LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 # OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 # THE SOFTWARE.
-
-text=Gestartet vor {0}<br> Ungefähr verbleibende Zeit: {1}
+text=Gestartet vor {0}\n Ungefähr verbleibende Zeit: {1}

core/src/main/resources/lib/hudson/buildProgressBar_el.properties

@@ -19,5 +19,4 @@
 # LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 # OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 # THE SOFTWARE.
-
-text=Άρχισε πριν από {0}<br>Εκτιμώμενος χρόνος: {1}
+text=Άρχισε πριν από {0}\nΕκτιμώμενος χρόνος: {1}

core/src/main/resources/lib/hudson/buildProgressBar_es.properties

@@ -19,6 +19,5 @@
 # LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 # OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 # THE SOFTWARE.
-
-text=Comenzó hace {0}<br> Tiempo restante estimado: {1}
+text=Comenzó hace {0}\n Tiempo restante estimado: {1}
 

core/src/main/resources/lib/hudson/buildProgressBar_es_AR.properties

@@ -1,3 +1,2 @@
 # This file is under the MIT License by authors
-
-text=Inicio hace {0}<br/> Tiempo estimado restante: {1}
+text=Inicio hace {0}\n Tiempo estimado restante: {1}

core/src/main/resources/lib/hudson/buildProgressBar_et.properties

@@ -1,3 +1,2 @@
 # This file is under the MIT License by authors
-
-text=Alustas {0} tagasi<br> Arvatavasti lõpetab kell {1}
+text=Alustas {0} tagasi\n Arvatavasti lõpetab kell {1}

core/src/main/resources/lib/hudson/buildProgressBar_fi.properties

@@ -19,5 +19,4 @@
 # LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 # OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 # THE SOFTWARE.
-
-text=Aloitettiin {0} sitten<br> Arvioitu valmistumisaika: {1}
+text=Aloitettiin {0} sitten\n Arvioitu valmistumisaika: {1}

core/src/main/resources/lib/hudson/buildProgressBar_fr.properties

@@ -19,5 +19,4 @@
 # LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 # OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 # THE SOFTWARE.
-
-text=Démarré il y a {0}<br/> Temps restant estimé : {1}
+text=Démarré il y a {0}\n Temps restant estimé : {1}

core/src/main/resources/lib/hudson/buildProgressBar_he.properties

@@ -19,5 +19,4 @@
 # LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 # OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 # THE SOFTWARE.
-
-text=התחיל לפני {0} <br> זמן מוערך לסיום: {1}
+text=התחיל לפני {0} \n זמן מוערך לסיום: {1}

core/src/main/resources/lib/hudson/buildProgressBar_hu.properties

@@ -19,5 +19,4 @@
 # LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 # OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 # THE SOFTWARE.
-
-text={0} óta fut.<br> Körülbelül {1} van hátra.
+text={0} óta fut.\n Körülbelül {1} van hátra.

core/src/main/resources/lib/hudson/buildProgressBar_it.properties

@@ -20,5 +20,4 @@
 # LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 # OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 # THE SOFTWARE.
-
-text=Avviato {0} fa<br>Tempo rimanente stimato: {1}
+text=Avviato {0} fa\nTempo rimanente stimato: {1}

core/src/main/resources/lib/hudson/buildProgressBar_ja.properties

@@ -19,5 +19,4 @@
 # LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 # OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 # THE SOFTWARE.
-
-text=開始時間: {0}<br>予想残り時間: {1}
+text=開始時間: {0}\n予想残り時間: {1}

core/src/main/resources/lib/hudson/buildProgressBar_ko.properties

@@ -19,5 +19,4 @@
 # LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 # OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 # THE SOFTWARE.
-
-text="{0} 전에 시작<br> 예상 잔여 시간: {1}"
+text="{0} 전에 시작\n 예상 잔여 시간: {1}"

core/src/main/resources/lib/hudson/buildProgressBar_lt.properties

@@ -19,5 +19,4 @@
 # LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 # OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 # THE SOFTWARE.
-
-text=Pradėta prieš {0}<br> Numatoma, kad liko: {1}
+text=Pradėta prieš {0}\n Numatoma, kad liko: {1}

core/src/main/resources/lib/hudson/buildProgressBar_lv.properties

@@ -19,5 +19,4 @@
 # LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 # OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 # THE SOFTWARE.
-
-text=Sāka pirms {0}<br> Palicis aptuveni: {1}
+text=Sāka pirms {0}\n Palicis aptuveni: {1}

core/src/main/resources/lib/hudson/buildProgressBar_nb_NO.properties

@@ -19,5 +19,4 @@
 # LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 # OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 # THE SOFTWARE.
-
-text=Startet for {0} siden<br> Anslått gjenstående tid: {1}
+text=Startet for {0} siden\n Anslått gjenstående tid: {1}

core/src/main/resources/lib/hudson/buildProgressBar_nl.properties

@@ -19,5 +19,4 @@
 # LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 # OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 # THE SOFTWARE.
-
-text=Gestart {0} geleden<br> Geschatte resterende duur: {1}
+text=Gestart {0} geleden\n Geschatte resterende duur: {1}

core/src/main/resources/lib/hudson/buildProgressBar_pl.properties

@@ -19,5 +19,4 @@
 # LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 # OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 # THE SOFTWARE.
-
-text=Zaczęto {0} ago <br> spodziewany czas do końca {1}
+text=Zaczęto {0} ago \n spodziewany czas do końca {1}

core/src/main/resources/lib/hudson/buildProgressBar_pt_BR.properties

@@ -19,5 +19,4 @@
 # LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 # OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 # THE SOFTWARE.
-
-text=Iniciado {0} atrás <br> Tempo estimado restante: {1}
+text=Iniciado {0} atrás \n Tempo estimado restante: {1}

core/src/main/resources/lib/hudson/buildProgressBar_pt_PT.properties

@@ -19,5 +19,4 @@
 # LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 # OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 # THE SOFTWARE.
-
-text=Começou {0} atrás<br> Tempo que falta (estimativa): {1}
+text=Começou {0} atrás\n Tempo que falta (estimativa): {1}

core/src/main/resources/lib/hudson/buildProgressBar_ro.properties

@@ -19,5 +19,4 @@
 # LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 # OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 # THE SOFTWARE.
-
-text=Început {0} in urma<br> Timp rămas estimat: {1}
+text=Început {0} in urma\n Timp rămas estimat: {1}

core/src/main/resources/lib/hudson/buildProgressBar_ru.properties

@@ -19,5 +19,4 @@
 # LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 # OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 # THE SOFTWARE.
-
-text=Запущено {0}<br> Приблизительное время завершения: {1}
+text=Запущено {0}\n Приблизительное время завершения: {1}

core/src/main/resources/lib/hudson/buildProgressBar_sk.properties

@@ -19,5 +19,4 @@
 # LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 # OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 # THE SOFTWARE.
-
-text=Spustené pred {0} <br> Predpokladaný zostávajúci čas: {1}
+text=Spustené pred {0} \n Predpokladaný zostávajúci čas: {1}

core/src/main/resources/lib/hudson/buildProgressBar_sl.properties

@@ -1,3 +1,2 @@
 # This file is under the MIT License by authors
-
-text=Startan pred {0}<br> Predviden preostali čas: {1}
+text=Startan pred {0}\n Predviden preostali čas: {1}

core/src/main/resources/lib/hudson/buildProgressBar_sr.properties

@@ -1,3 +1,2 @@
 # This file is under the MIT License by authors
-
-text=Започето пре {0} <br> Очекивано преостало време: {1}
+text=Започето пре {0} \n Очекивано преостало време: {1}

core/src/main/resources/lib/hudson/buildProgressBar_sv_SE.properties

@@ -19,5 +19,4 @@
 # LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 # OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 # THE SOFTWARE.
-
-text=Startade för {0} sedan<br>Beräknad återstående tid: {1}
+text=Startade för {0} sedan\nBeräknad återstående tid: {1}

core/src/main/resources/lib/hudson/buildProgressBar_tr.properties

@@ -19,5 +19,4 @@
 # LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 # OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 # THE SOFTWARE.
-
-text="{0} önce başladı<br> Kalan tahmini süre: {1}"
+text="{0} önce başladı\n Kalan tahmini süre: {1}"

core/src/main/resources/lib/hudson/buildProgressBar_zh_TW.properties

@@ -20,5 +20,4 @@
 # LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 # OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 # THE SOFTWARE.
-
-text={0}前開始<br /> 預計還要: {1}
+text={0}前開始\n 預計還要: {1}