From 5f76f3840c2fe61d3937f947df0bdca293832fb7 Mon Sep 17 00:00:00 2001
From: Jan Faracik <43062514+janfaracik@users.noreply.github.com>
Date: Mon, 20 Nov 2023 16:00:14 +0000
Subject: [PATCH] Init

---
 .editorconfig                                 |  2 +-
 .../hudson/model/Job/buildTimeTrend.jelly     |  8 ++
 .../model/Job/buildTimeTrend_resources.js     | 75 ++-----------------
 .../hudson/views/StatusColumn/column.jelly    | 18 ++++-
 .../hudson/widgets/HistoryWidget/entry.jelly  |  2 +-
 .../jenkins/model/Jenkins/_legend.jelly       | 32 ++++----
 .../resources/lib/hudson/buildListTable.jelly |  9 +++
 .../resources/lib/hudson/projectView.jelly    | 10 ++-
 .../images/symbols/status-aborted-anime.svg   |  5 ++
 .../images/symbols/status-aborted.svg         |  4 +
 .../images/symbols/status-blue-anime.svg      |  5 ++
 .../resources/images/symbols/status-blue.svg  |  4 +
 .../images/symbols/status-disabled-anime.svg  |  6 ++
 .../images/symbols/status-disabled.svg        |  5 ++
 .../images/symbols/status-nobuilt-anime.svg   |  7 ++
 .../images/symbols/status-nobuilt.svg         |  6 ++
 .../images/symbols/status-red-anime.svg       |  5 ++
 .../resources/images/symbols/status-red.svg   |  4 +
 .../images/symbols/status-yellow-anime.svg    |  6 ++
 .../images/symbols/status-yellow.svg          |  5 ++
 war/src/main/scss/base/_style.scss            | 13 +++-
 war/src/main/scss/pages/_dashboard.scss       | 11 +++
 22 files changed, 148 insertions(+), 94 deletions(-)
 create mode 100644 war/src/main/resources/images/symbols/status-aborted-anime.svg
 create mode 100644 war/src/main/resources/images/symbols/status-aborted.svg
 create mode 100644 war/src/main/resources/images/symbols/status-blue-anime.svg
 create mode 100644 war/src/main/resources/images/symbols/status-blue.svg
 create mode 100644 war/src/main/resources/images/symbols/status-disabled-anime.svg
 create mode 100644 war/src/main/resources/images/symbols/status-disabled.svg
 create mode 100644 war/src/main/resources/images/symbols/status-nobuilt-anime.svg
 create mode 100644 war/src/main/resources/images/symbols/status-nobuilt.svg
 create mode 100644 war/src/main/resources/images/symbols/status-red-anime.svg
 create mode 100644 war/src/main/resources/images/symbols/status-red.svg
 create mode 100644 war/src/main/resources/images/symbols/status-yellow-anime.svg
 create mode 100644 war/src/main/resources/images/symbols/status-yellow.svg

diff --git a/.editorconfig b/.editorconfig
index af8f0cf310a8..049d90619a70 100644
--- a/.editorconfig
+++ b/.editorconfig
@@ -1,6 +1,6 @@
 root = true
 
-[*.{js, scss, css, hbs}]
+[*.{js, scss, css, hbs, svg}]
 indent_style = space
 indent_size = 2
 trim_trailing_whitespace = true
diff --git a/core/src/main/resources/hudson/model/Job/buildTimeTrend.jelly b/core/src/main/resources/hudson/model/Job/buildTimeTrend.jelly
index 4021ab4109a4..274231845baf 100644
--- a/core/src/main/resources/hudson/model/Job/buildTimeTrend.jelly
+++ b/core/src/main/resources/hudson/model/Job/buildTimeTrend.jelly
@@ -31,6 +31,14 @@ THE SOFTWARE.
     <l:breadcrumb title="${%Build Time Trend}" />
     <st:adjunct includes="hudson.model.Job.buildTimeTrend_resources" />
     <l:main-panel>
+      <template id="icons">
+        <l:icon src="symbol-status-blue" id="blue" />
+        <l:icon src="symbol-status-yellow" id="yellow" />
+        <l:icon src="symbol-status-red" id="red" />
+        <l:icon src="symbol-status-nobuilt" id="nobuilt" />
+        <l:icon src="symbol-status-aborted" id="aborted" />
+        <l:icon src="symbol-status-disabled" id="disabled" />
+      </template>
       <h1>${%Build Time Trend}</h1>
           <div align="center">
             <img class="build-time-graph" src="buildTimeGraph/png" width="500" height="400" lazymap="buildTimeGraph/map" alt="[${%Build time graph}]" />
diff --git a/core/src/main/resources/hudson/model/Job/buildTimeTrend_resources.js b/core/src/main/resources/hudson/model/Job/buildTimeTrend_resources.js
index 105cdbc06ed2..3b5e70c2caf8 100644
--- a/core/src/main/resources/hudson/model/Job/buildTimeTrend_resources.js
+++ b/core/src/main/resources/hudson/model/Job/buildTimeTrend_resources.js
@@ -67,76 +67,11 @@ window.buildTimeTrend_displayBuilds = function (data) {
 /**
  * Generate SVG Icon
  */
-function generateSVGIcon(iconName, iconSizeClass) {
-  const imagesURL = document.head.getAttribute("data-imagesurl");
-
-  const isInProgress = iconName.endsWith("anime");
-  let buildStatus = "never-built";
-  switch (iconName) {
-    case "red":
-    case "red-anime":
-      buildStatus = "last-failed";
-      break;
-    case "yellow":
-    case "yellow-anime":
-      buildStatus = "last-unstable";
-      break;
-    case "blue":
-    case "blue-anime":
-      buildStatus = "last-successful";
-      break;
-    case "grey":
-    case "grey-anime":
-    case "disabled":
-    case "disabled-anime":
-      buildStatus = "last-disabled";
-      break;
-    case "aborted":
-    case "aborted-anime":
-      buildStatus = "last-aborted";
-      break;
-    case "nobuilt":
-    case "nobuilt-anime":
-      buildStatus = "never-built";
-      break;
-  }
+function generateSVGIcon(iconName) {
+  const icons = document.querySelector("#icons");
+  iconName = iconName.replace("-anime", "");
 
-  const svg1 = document.createElementNS("http://www.w3.org/2000/svg", "svg");
-  svg1.setAttribute("class", "svg-icon");
-  svg1.setAttribute("viewBox", "0 0 24 24");
-  const use1 = document.createElementNS("http://www.w3.org/2000/svg", "use");
-  use1.setAttribute(
-    "href",
-    imagesURL +
-      "/build-status/build-status-sprite.svg#build-status-" +
-      (isInProgress ? "in-progress" : "static"),
-  );
-  svg1.appendChild(use1);
-
-  const svg2 = document.createElementNS("http://www.w3.org/2000/svg", "svg");
-  svg2.setAttribute(
-    "class",
-    "svg-icon icon-" + iconName + " " + (iconSizeClass || "icon-sm"),
-  );
-  svg2.setAttribute("viewBox", "0 0 24 24");
-  const use2 = document.createElementNS("http://www.w3.org/2000/svg", "use");
-  use2.setAttribute(
-    "href",
-    imagesURL + "/build-status/build-status-sprite.svg#" + buildStatus,
-  );
-  svg2.appendChild(use2);
-
-  const span = document.createElement("span");
-  span.classList.add("build-status-icon__wrapper", "icon-" + iconName);
-
-  let span2 = document.createElement("span");
-  span2.classList.add("build-status-icon__outer");
-  span2.appendChild(svg1);
-
-  span.appendChild(span2);
-  span.appendChild(svg2);
-
-  return span;
+  return icons.content.querySelector(`#${iconName}`).cloneNode(true);
 }
 
 /**
@@ -155,7 +90,7 @@ window.displayBuilds = function (data) {
     td1.classList.add("jenkins-table__cell--tight", "jenkins-table__icon");
     var div1 = document.createElement("div");
     div1.classList.add("jenkins-table__cell__button-wrapper");
-    var svg = generateSVGIcon(e.iconName, p.dataset.iconSizeClass);
+    var svg = generateSVGIcon(e.iconName);
     div1.appendChild(svg);
     td1.appendChild(div1);
     tr.appendChild(td1);
diff --git a/core/src/main/resources/hudson/views/StatusColumn/column.jelly b/core/src/main/resources/hudson/views/StatusColumn/column.jelly
index 5297d99809a3..5ac989e40521 100644
--- a/core/src/main/resources/hudson/views/StatusColumn/column.jelly
+++ b/core/src/main/resources/hudson/views/StatusColumn/column.jelly
@@ -23,6 +23,18 @@ THE SOFTWARE.
 -->
 
 <?jelly escape-by-default='true'?>
-<j:jelly xmlns:j="jelly:core" xmlns:t="/lib/hudson">
-    <t:ballColorTd it="${job.iconColor}" />
-</j:jelly>
\ No newline at end of file
+<j:jelly xmlns:j="jelly:core" xmlns:l="/lib/layout">
+  <td class="jenkins-table__cell--tight jenkins-table__icon" data="${job.iconColor.ordinal()}">
+    <div class="jenkins-table__cell__button-wrapper">
+      <j:choose>
+        <j:when test="${job.iconColor.iconName != null}">
+          <l:icon src="symbol-status-${job.iconColor.iconName}" tooltip="${job.iconColor.description}" />
+        </j:when>
+        <j:otherwise>
+          <!-- This is for special conditions, such as folders -->
+          <l:icon src="${job.iconColor.iconClassName}" />
+        </j:otherwise>
+      </j:choose>
+    </div>
+  </td>
+</j:jelly>
diff --git a/core/src/main/resources/hudson/widgets/HistoryWidget/entry.jelly b/core/src/main/resources/hudson/widgets/HistoryWidget/entry.jelly
index 366071ebf7fa..d203b8a98344 100644
--- a/core/src/main/resources/hudson/widgets/HistoryWidget/entry.jelly
+++ b/core/src/main/resources/hudson/widgets/HistoryWidget/entry.jelly
@@ -39,7 +39,7 @@ THE SOFTWARE.
       <div class="pane build-name">
         <div class="build-icon">
           <a class="build-status-link" href="${h.getConsoleUrl(build)}" tooltip="${build.iconColor.description} > ${%Console Output}">
-            <l:icon class="${build.buildStatusIconClassName} icon-sm" />
+            <l:icon src="symbol-status-${build.iconColor.iconName}" />
           </a>
         </div>
         <a class="model-link inside build-link display-name" update-parent-class=".build-row" href="${link}">${build.displayName}</a>
diff --git a/core/src/main/resources/jenkins/model/Jenkins/_legend.jelly b/core/src/main/resources/jenkins/model/Jenkins/_legend.jelly
index 9ae7a079e739..90d8e8b89a13 100644
--- a/core/src/main/resources/jenkins/model/Jenkins/_legend.jelly
+++ b/core/src/main/resources/jenkins/model/Jenkins/_legend.jelly
@@ -29,87 +29,87 @@ THE SOFTWARE.
 
   <dl class="app-icon-legend">
     <dt>
-      <l:icon class="icon-blue icon-lg"/>
+      <l:icon src="symbol-status-blue" />
     </dt>
     <dd>
       ${%blue}
     </dd>
 
     <dt>
-      <l:icon class="icon-blue-anime icon-lg"/>
+      <l:icon src="symbol-status-blue-anime" />
     </dt>
     <dd>
       ${%blue_anime}
     </dd>
 
     <dt>
-      <l:icon class="icon-yellow icon-lg"/>
+      <l:icon src="symbol-status-yellow" />
     </dt>
     <dd>
       ${%yellow}
     </dd>
 
     <dt>
-      <l:icon class="icon-yellow-anime icon-lg"/>
+      <l:icon src="symbol-status-yellow-anime" />
     </dt>
     <dd>
       ${%yellow_anime}
     </dd>
 
     <dt>
-      <l:icon class="icon-red icon-lg"/>
+      <l:icon src="symbol-status-red" />
     </dt>
     <dd>
       ${%red}
     </dd>
 
     <dt>
-      <l:icon class="icon-red-anime icon-lg"/>
+      <l:icon src="symbol-status-red-anime" />
     </dt>
     <dd>
       ${%red_anime}
     </dd>
 
     <dt>
-      <l:icon class="icon-nobuilt icon-lg"/>
+      <l:icon src="symbol-status-nobuilt" />
     </dt>
     <dd>
       ${%lightgrey}
     </dd>
 
     <dt>
-      <l:icon class="icon-nobuilt-anime icon-lg"/>
+      <l:icon src="symbol-status-nobuilt-anime" />
     </dt>
     <dd>
       ${%lightgrey_anime}
     </dd>
 
     <dt>
-      <l:icon class="icon-disabled icon-lg"/>
+      <l:icon src="symbol-status-aborted" />
     </dt>
     <dd>
-      ${%grey}
+      ${%darkgrey}
     </dd>
 
     <dt>
-      <l:icon class="icon-disabled-anime icon-lg"/>
+      <l:icon src="symbol-status-aborted-anime" />
     </dt>
     <dd>
-      ${%grey_anime}
+      ${%darkgrey_anime}
     </dd>
 
     <dt>
-      <l:icon class="icon-aborted icon-lg"/>
+      <l:icon src="symbol-status-disabled" />
     </dt>
     <dd>
-      ${%darkgrey}
+      ${%grey}
     </dd>
 
     <dt>
-      <l:icon class="icon-aborted-anime icon-lg"/>
+      <l:icon src="symbol-status-disabled-anime" />
     </dt>
     <dd>
-      ${%darkgrey_anime}
+      ${%grey_anime}
     </dd>
   </dl>
 
diff --git a/core/src/main/resources/lib/hudson/buildListTable.jelly b/core/src/main/resources/lib/hudson/buildListTable.jelly
index cd617715838e..43791a19e27a 100644
--- a/core/src/main/resources/lib/hudson/buildListTable.jelly
+++ b/core/src/main/resources/lib/hudson/buildListTable.jelly
@@ -30,6 +30,15 @@ THE SOFTWARE.
       A collection of builds to be displayed.
     </st:attribute>
   </st:documentation>
+  <template id="icons">
+    <l:icon src="symbol-status-blue" id="blue" />
+    <l:icon src="symbol-status-yellow" id="yellow" />
+    <l:icon src="symbol-status-red" id="red" />
+    <l:icon src="symbol-status-nobuilt" id="nobuilt" />
+    <l:icon src="symbol-status-aborted" id="aborted" />
+    <l:icon src="symbol-status-disabled" id="disabled" />
+    <l:icon src="symbol-terminal" id="console" />
+  </template>
 
   <t:setIconSize/>
   <st:adjunct includes="hudson.model.Job.buildTimeTrend_resources" />
diff --git a/core/src/main/resources/lib/hudson/projectView.jelly b/core/src/main/resources/lib/hudson/projectView.jelly
index e2bae523dfcf..27d5cf967c6d 100644
--- a/core/src/main/resources/lib/hudson/projectView.jelly
+++ b/core/src/main/resources/lib/hudson/projectView.jelly
@@ -93,7 +93,15 @@ THE SOFTWARE.
           <div class="jenkins-jobs-list__item">
             <a class="jenkins-jobs-list__item__details" href="${jobBaseUrl}${job.shortUrl}">
               <div class="jenkins-jobs-list__item__icons">
-                <t:ballColorTd it="${job.iconColor}" />
+                <j:choose>
+                  <j:when test="${job.iconColor.iconName != null}">
+                    <l:icon src="symbol-status-${job.iconColor.iconName}" tooltip="${job.iconColor.description}" />
+                  </j:when>
+                  <j:otherwise>
+                    <!-- This is for special conditions, such as folders -->
+                    <l:icon src="${job.iconColor.iconClassName}" />
+                  </j:otherwise>
+                </j:choose>
               </div>
               <div class="jenkins-jobs-list__item__details__text">
                 <p class="jenkins-jobs-list__item__label">${job.displayName}</p>
diff --git a/war/src/main/resources/images/symbols/status-aborted-anime.svg b/war/src/main/resources/images/symbols/status-aborted-anime.svg
new file mode 100644
index 000000000000..308e6d7578c7
--- /dev/null
+++ b/war/src/main/resources/images/symbols/status-aborted-anime.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+    <ellipse opacity="0.4" cx="256" cy="256" rx="210" ry="210" fill="none" stroke="var(--text-color-secondary)" stroke-linecap="round" stroke-miterlimit="10" stroke-width="36" />
+    <path d="M256 46C140.02 46 46 140.02 46 256" fill="transparent" stroke="var(--text-color-secondary)" stroke-width="36" stroke-miterlimit="10" stroke-linecap="round" data-symbol-animation="spin" />
+    <path fill="none" stroke="var(--text-color-secondary)" stroke-linecap="round" stroke-linejoin="round" stroke-width="36" d="M192 320l128-128"/>
+</svg>
diff --git a/war/src/main/resources/images/symbols/status-aborted.svg b/war/src/main/resources/images/symbols/status-aborted.svg
new file mode 100644
index 000000000000..fee388a4f27b
--- /dev/null
+++ b/war/src/main/resources/images/symbols/status-aborted.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+    <ellipse cx="256" cy="256" rx="210" ry="210" fill="none" stroke="var(--text-color-secondary)" stroke-linecap="round" stroke-miterlimit="10" stroke-width="36" />
+    <path fill="none" stroke="var(--text-color-secondary)" stroke-linecap="round" stroke-linejoin="round" stroke-width="36" d="M192 320l128-128" />
+</svg>
diff --git a/war/src/main/resources/images/symbols/status-blue-anime.svg b/war/src/main/resources/images/symbols/status-blue-anime.svg
new file mode 100644
index 000000000000..b11da163e9f7
--- /dev/null
+++ b/war/src/main/resources/images/symbols/status-blue-anime.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+    <ellipse opacity="0.4" cx="256" cy="256" rx="210" ry="210" fill="none" stroke="var(--success-color)" stroke-linecap="round" stroke-miterlimit="10" stroke-width="36" />
+    <path d="M256 46C140.02 46 46 140.02 46 256" fill="transparent" stroke="var(--success-color)" stroke-width="36" stroke-miterlimit="10" stroke-linecap="round" data-symbol-animation="spin" />
+    <path d="M336 189L224 323L176 269.4" fill="transparent" stroke="var(--success-color)" stroke-width="36" stroke-linecap="round" stroke-linejoin="round" />
+</svg>
diff --git a/war/src/main/resources/images/symbols/status-blue.svg b/war/src/main/resources/images/symbols/status-blue.svg
new file mode 100644
index 000000000000..2427dd5286dc
--- /dev/null
+++ b/war/src/main/resources/images/symbols/status-blue.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+    <ellipse cx="256" cy="256" rx="210" ry="210" fill="none" stroke="var(--success-color)" stroke-linecap="round" stroke-miterlimit="10" stroke-width="36" />
+    <path d="M336 189L224 323L176 269.4" fill="transparent" stroke="var(--success-color)" stroke-width="36" stroke-linecap="round" stroke-linejoin="round" />
+</svg>
diff --git a/war/src/main/resources/images/symbols/status-disabled-anime.svg b/war/src/main/resources/images/symbols/status-disabled-anime.svg
new file mode 100644
index 000000000000..138edc7a9ec3
--- /dev/null
+++ b/war/src/main/resources/images/symbols/status-disabled-anime.svg
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+    <ellipse opacity="0.4" cx="256" cy="256" rx="210" ry="210" fill="none" stroke="var(--text-color-secondary)" stroke-linecap="round" stroke-miterlimit="10" stroke-width="36" />
+    <path d="M256 46C140.02 46 46 140.02 46 256" fill="transparent" stroke="var(--text-color-secondary)" stroke-width="36" stroke-miterlimit="10" stroke-linecap="round" data-symbol-animation="spin" />
+    <ellipse cx="256" cy="256" rx="100" ry="100" fill="none" stroke="var(--text-color-secondary)" stroke-linecap="round" stroke-miterlimit="10" stroke-width="36" />
+    <path fill="none" stroke="var(--text-color-secondary)" stroke-linecap="round" stroke-linejoin="round" stroke-width="36" d="M192 320l128-128" />
+</svg>
diff --git a/war/src/main/resources/images/symbols/status-disabled.svg b/war/src/main/resources/images/symbols/status-disabled.svg
new file mode 100644
index 000000000000..32aa7eaef687
--- /dev/null
+++ b/war/src/main/resources/images/symbols/status-disabled.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+    <ellipse cx="256" cy="256" rx="210" ry="210" fill="none" stroke="var(--text-color-secondary)" stroke-linecap="round" stroke-miterlimit="10" stroke-width="36" />
+    <ellipse cx="256" cy="256" rx="100" ry="100" fill="none" stroke="var(--text-color-secondary)" stroke-linecap="round" stroke-miterlimit="10" stroke-width="36" />
+    <path fill="none" stroke="var(--text-color-secondary)" stroke-linecap="round" stroke-linejoin="round" stroke-width="36" d="M192 320l128-128" />
+</svg>
diff --git a/war/src/main/resources/images/symbols/status-nobuilt-anime.svg b/war/src/main/resources/images/symbols/status-nobuilt-anime.svg
new file mode 100644
index 000000000000..9a534d34d237
--- /dev/null
+++ b/war/src/main/resources/images/symbols/status-nobuilt-anime.svg
@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+  <ellipse opacity="0.4" cx="256" cy="256" rx="210" ry="210" fill="none" stroke="var(--blue)" stroke-linecap="round" stroke-miterlimit="10" stroke-width="36" />
+  <path d="M256 46C140.02 46 46 140.02 46 256" fill="transparent" stroke="var(--blue)" stroke-width="36" stroke-miterlimit="10" stroke-linecap="round" data-symbol-animation="spin" />
+  <circle cx="256" cy="256" r="30" fill="var(--blue)" />
+  <circle cx="352" cy="256" r="30" fill="var(--blue)" />
+  <circle cx="160" cy="256" r="30" fill="var(--blue)" />
+</svg>
diff --git a/war/src/main/resources/images/symbols/status-nobuilt.svg b/war/src/main/resources/images/symbols/status-nobuilt.svg
new file mode 100644
index 000000000000..a2ba0f13edbc
--- /dev/null
+++ b/war/src/main/resources/images/symbols/status-nobuilt.svg
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+  <ellipse cx="256" cy="256" rx="210" ry="210" fill="none" stroke="var(--blue)" stroke-linecap="round" stroke-miterlimit="10" stroke-width="36" />
+  <circle cx="256" cy="256" r="30" fill="var(--blue)" />
+  <circle cx="352" cy="256" r="30" fill="var(--blue)" />
+  <circle cx="160" cy="256" r="30" fill="var(--blue)" />
+</svg>
diff --git a/war/src/main/resources/images/symbols/status-red-anime.svg b/war/src/main/resources/images/symbols/status-red-anime.svg
new file mode 100644
index 000000000000..76b3bca95af1
--- /dev/null
+++ b/war/src/main/resources/images/symbols/status-red-anime.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+    <ellipse opacity="0.4" cx="256" cy="256" rx="210" ry="210" fill="none" stroke="var(--red)" stroke-linecap="round" stroke-miterlimit="10" stroke-width="36" />
+    <path d="M256 46C140.02 46 46 140.02 46 256" fill="transparent" stroke="var(--red)" stroke-width="36" stroke-miterlimit="10" stroke-linecap="round" data-symbol-animation="spin" />
+    <path fill="none" stroke="var(--red)" stroke-linecap="round" stroke-linejoin="round" stroke-width="36" d="M320 320L192 192M192 320l128-128"/>
+</svg>
diff --git a/war/src/main/resources/images/symbols/status-red.svg b/war/src/main/resources/images/symbols/status-red.svg
new file mode 100644
index 000000000000..547dc4a13f2d
--- /dev/null
+++ b/war/src/main/resources/images/symbols/status-red.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+    <ellipse cx="256" cy="256" rx="210" ry="210" fill="none" stroke="var(--red)" stroke-linecap="round" stroke-miterlimit="10" stroke-width="36" />
+    <path fill="none" stroke="var(--red)" stroke-linecap="round" stroke-linejoin="round" stroke-width="36" d="M320 320L192 192M192 320l128-128"/>
+</svg>
diff --git a/war/src/main/resources/images/symbols/status-yellow-anime.svg b/war/src/main/resources/images/symbols/status-yellow-anime.svg
new file mode 100644
index 000000000000..c241c3c88024
--- /dev/null
+++ b/war/src/main/resources/images/symbols/status-yellow-anime.svg
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" class="ionicon" viewBox="0 0 512 512">
+    <ellipse opacity="0.4" cx="256" cy="256" rx="210" ry="210" fill="none" stroke="var(--orange)" stroke-linecap="round" stroke-miterlimit="10" stroke-width="36" />
+    <path d="M256 46C140.02 46 46 140.02 46 256" fill="transparent" stroke="var(--orange)" stroke-width="36" stroke-miterlimit="10" stroke-linecap="round" data-symbol-animation="spin" />
+    <path d="M250.26 166.05L256 288l5.73-121.95a5.74 5.74 0 00-5.79-6h0a5.74 5.74 0 00-5.68 6z" fill="none" stroke="var(--orange)" stroke-linecap="round" stroke-linejoin="round" stroke-width="36" />
+    <ellipse cx="256" cy="350" rx="26" ry="26" fill="var(--orange)" />
+</svg>
diff --git a/war/src/main/resources/images/symbols/status-yellow.svg b/war/src/main/resources/images/symbols/status-yellow.svg
new file mode 100644
index 000000000000..57aab84b73de
--- /dev/null
+++ b/war/src/main/resources/images/symbols/status-yellow.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" class="ionicon" viewBox="0 0 512 512">
+    <ellipse cx="256" cy="256" rx="210" ry="210" fill="none" stroke="var(--orange)" stroke-linecap="round" stroke-miterlimit="10" stroke-width="36" />
+    <path d="M250.26 166.05L256 288l5.73-121.95a5.74 5.74 0 00-5.79-6h0a5.74 5.74 0 00-5.68 6z" fill="none" stroke="var(--orange)" stroke-linecap="round" stroke-linejoin="round" stroke-width="36" />
+    <ellipse cx="256" cy="350" rx="26" ry="26" fill="var(--orange)" />
+</svg>
diff --git a/war/src/main/scss/base/_style.scss b/war/src/main/scss/base/_style.scss
index e1957b7f01c1..40bffdf916ab 100644
--- a/war/src/main/scss/base/_style.scss
+++ b/war/src/main/scss/base/_style.scss
@@ -866,13 +866,22 @@ table.progress-bar.red td.progress-bar-done {
 
 /* Unknown */
 
+[data-symbol-animation] {
+  animation: spin 1s linear infinite;
+  transform-origin: center;
+
+  @media (prefers-reduced-motion) {
+    animation-duration: 3s;
+  }
+}
+
 @keyframes spin {
   from {
-    transform: rotate(0deg) translateZ(0);
+    transform: rotate(0deg);
   }
 
   to {
-    transform: rotate(360deg) translateZ(0);
+    transform: rotate(360deg);
   }
 }
 
diff --git a/war/src/main/scss/pages/_dashboard.scss b/war/src/main/scss/pages/_dashboard.scss
index 732b7db61001..cb029a9861a9 100644
--- a/war/src/main/scss/pages/_dashboard.scss
+++ b/war/src/main/scss/pages/_dashboard.scss
@@ -169,3 +169,14 @@ $min-button-size: 36px;
     }
   }
 }
+
+.build-status-link {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+
+  svg {
+    width: 1rem;
+    height: 1rem;
+  }
+}