From 1a5289d10378527ce9d55a00914d49109f26610c Mon Sep 17 00:00:00 2001
From: Jan Faracik <43062514+janfaracik@users.noreply.github.com>
Date: Tue, 19 Dec 2023 14:41:25 +0000
Subject: [PATCH] More

---
 .../src/main/resources/lib/hudson/queue.jelly | 49 +++++++------
 .../resources/lib/hudson/queue.properties     |  3 +
 .../scss/components/_side-panel-widgets.scss  | 70 ++++++++++++++++---
 3 files changed, 93 insertions(+), 29 deletions(-)

diff --git a/core/src/main/resources/lib/hudson/queue.jelly b/core/src/main/resources/lib/hudson/queue.jelly
index b2530becb009..454bec64f466 100644
--- a/core/src/main/resources/lib/hudson/queue.jelly
+++ b/core/src/main/resources/lib/hudson/queue.jelly
@@ -36,7 +36,7 @@ THE SOFTWARE.
       Indicates that the queue has been filtered, i.e. might not show all items.
     </st:attribute>
   </st:documentation>
-  <t:setIconSize/>
+
   <j:choose>
     <j:when test="${filtered}">
       <j:set var="title" value="${%Filtered Build Queue(items.size())}" />
@@ -45,7 +45,8 @@ THE SOFTWARE.
       <j:set var="title" value="${%Build Queue(items.size())}" />
     </j:otherwise>
   </j:choose>
-  <l:pane title="${title}" width="2" id="buildQueue">
+
+  <l:pane title="${title}" id="buildQueue">
     <st:adjunct includes="lib.form.link.link"/>
     <j:if test="${app.quietingDown}">
       <div class="banana">
@@ -63,38 +64,46 @@ THE SOFTWARE.
       </j:when>
       <j:otherwise>
         <j:forEach var="item" items="${items}">
-          <tr>
-            <td class="pane pane-grow" style="white-space: normal;">
-              <j:set var="stuck" value="${item.isStuck()}"/>
+          <div class="mandelson">
+            <j:set var="stuck" value="${item.isStuck()}"/>
+            <j:set var="hasPermission" value="${h.hasPermission(item.task,item.task.READ)}" />
+
+            <div class="mandelson__text">
               <j:choose>
-                <j:when test="${h.hasPermission(item.task,item.task.READ)}">
-                  <a href="${rootURL}/${item.task.url}" class="model-link inside tl-tr" tooltip="${item.causesDescription} ${item.why} ${item.params} \n ${%WaitingFor(item.inQueueForString)}">
+                <j:when test="${hasPermission}">
+                  <a href="${rootURL}/${item.task.url}" class="model-link rollsroyce" tooltip="${item.causesDescription} ${item.why} ${item.params} \n ${%WaitingFor(item.inQueueForString)}">
                     <l:breakable value="${item.displayName}"/>
                   </a>
-                  <!-- TODO include estimated number as in BuildHistoryWidget/entries.jelly if possible -->
-                <j:if test="${stuck}">
-                  <td class="pane" width="16" align="center" valign="middle">
-                    <a href="https://www.jenkins.io/redirect/troubleshooting/executor-starvation">
-                      <l:icon src="symbol-hourglass" class="icon-sm"/>
-                    </a>
-                  </td>
-                </j:if>
                 </j:when>
                 <j:otherwise>
-                  <span>${%Unknown Task}</span>
+                  ${%Unknown Task}
                 </j:otherwise>
               </j:choose>
-            </td>
-            <td class="pane" width="16" align="center" valign="middle">
+            </div>
+
+            <div class="mandelson__controls">
+              <!-- TODO include estimated number as in BuildHistoryWidget/entries.jelly if possible -->
+              <j:if test="${stuck and hasPermission}">
+                <j:set var="tooltip">
+                  <div class="tooltippy">
+                    <div>${%stuck}</div>
+                    <div>${%stuck.description} <l:icon src="symbol-external" /></div>
+                  </div>
+                </j:set>
+                <a class="brown" data-html-tooltip="${tooltip}" href="https://www.jenkins.io/redirect/troubleshooting/executor-starvation" target="_blank">
+                  <l:icon src="symbol-hourglass" class="icon-sm"/>
+                </a>
+              </j:if>
               <j:if test="${item.hasCancelPermission()}">
                 <l:stopButton href="${rootURL}/queue/cancelItem?id=${item.id}" confirm="${%confirm(item.displayName)}" alt="${%cancel this build}"/>
               </j:if>
-             </td>
-          </tr>
+            </div>
+          </div>
         </j:forEach>
       </j:otherwise>
     </j:choose>
   </l:pane>
+
   <!-- schedule updates only for the full page reload -->
   <j:if test="${ajax==null and h.hasPermission(app.READ)}">
     <div class="widget-refresh-reference" data-id="buildQueue" data-url="${rootURL}/${it.url}ajax"/>
diff --git a/core/src/main/resources/lib/hudson/queue.properties b/core/src/main/resources/lib/hudson/queue.properties
index fe169ad54559..5192e734232f 100644
--- a/core/src/main/resources/lib/hudson/queue.properties
+++ b/core/src/main/resources/lib/hudson/queue.properties
@@ -3,3 +3,6 @@ Filtered\ Build\ Queue=Filtered Build Queue{0,choice,0#|0< ({0,number})}
 WaitingFor=Waiting for {0}
 confirm=Are you sure you want to cancel the queued run of {0}?
 No\ builds\ in\ the\ queue.=No builds in the queue
+cancel\ this\ build=Cancel
+stuck=This build is stuck
+stuck.description=Click for more information
diff --git a/war/src/main/scss/components/_side-panel-widgets.scss b/war/src/main/scss/components/_side-panel-widgets.scss
index 716e22291e24..196967838d59 100644
--- a/war/src/main/scss/components/_side-panel-widgets.scss
+++ b/war/src/main/scss/components/_side-panel-widgets.scss
@@ -3,6 +3,67 @@
 $padding-x: 1rem;
 $padding-y: 0.65rem;
 
+#side-panel .pane-frame {
+  border-radius: 1rem;
+  background: var(--card-background);
+  border: var(--card-border-width) solid var(--card-border-color);
+  margin-left: 10px;
+  margin-bottom: calc(var(--section-padding) / 2);
+  overflow: hidden;
+
+  a {
+    color: var(--text-color);
+  }
+}
+
+.tooltippy {
+  display: flex;
+  flex-direction: column;
+
+  div {
+    &:last-of-type {
+      display: flex;
+      align-items: center;
+      color: var(--text-color-secondary);
+      gap: 0.3rem;
+
+      svg {
+        width: 0.75rem;
+        height: 0.75rem;
+      }
+    }
+  }
+}
+
+.mandelson {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+  margin: 0 $padding-x $padding-y $padding-x;
+  font-size: var(--font-size-sm);
+
+  &__text {
+    color: var(--text-color-secondary);
+
+    a {
+      color: var(--link-color) !important;
+    }
+  }
+
+  &__controls {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+  }
+}
+
+.brown {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
 .banana {
   position: relative;
   margin: 0 $padding-x $padding-y $padding-x;
@@ -18,15 +79,6 @@ $padding-y: 0.65rem;
   font-size: var(--font-size-sm);
 }
 
-#side-panel .pane-frame {
-  border-radius: 1rem;
-  background: var(--card-background);
-  border: var(--card-border-width) solid var(--card-border-color);
-  margin-left: 10px;
-  margin-bottom: calc(var(--section-padding) / 2);
-  overflow: hidden;
-}
-
 #side-panel .pane-header {
   font-size: var(--font-size-sm);
   display: flex;