Rewrite the build history widget

core/src/main/resources/hudson/widgets/HistoryWidget/entries.jelly

@@ -26,10 +26,19 @@ THE SOFTWARE.
   Render build histories. 
 -->
 <?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" xmlns:i="jelly:fmt">
-  <j:set target="${it}" property="nextBuildNumberToFetch" value="${it.nextBuildNumber}"/>
-  <!-- build history -->
+<j:jelly xmlns:j="jelly:core" xmlns:st="jelly:stapler" xmlns:i="jelly:fmt">
+  <j:set target="${it}" property="nextBuildNumberToFetch" value="${it.nextBuildNumber}" />
+  <j:invokeStatic className="java.time.LocalDate" method="now" var="now" />
+
   <j:forEach var="pageEntry" items="${it.runs}">
+    <i:formatDate value="${pageEntry.entry.timestamp.time}" var="date" type="date" dateStyle="long" />
+    <i:formatDate value="${pageEntry.entry.timestamp.time}" var="simpleDate" type="date" pattern="YYYY-MM-dd" />
+
+    <j:if test="${pastDate != date}">
+      <span class="app-builds-container__heading">${simpleDate == now ? "%Today" : date}</span>
+      <j:set var="pastDate" value="${date}" />
+    </j:if>
+
     <st:include page="/hudson/widgets/HistoryWidget/entry.jelly" />
   </j:forEach>
-</j:jelly>
+</j:jelly>

core/src/main/resources/hudson/widgets/HistoryWidget/entry.jelly

@@ -34,54 +34,58 @@ THE SOFTWARE.
   <j:if test="${h.isUserTimeZoneOverride()}">
     <i:setTimeZone value="${h.getUserTimeZone()}" />
    </j:if>
-  <tr class="build-row ${transitive} single-line" page-entry-id="${pageEntry.entryId}">
-    <td class="build-row-cell">
-      <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 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>
-      </div>
-      <div class="pane build-details" time="${build.timestamp.time.time}">
-        <j:set var="linkTitleAttr" value=""/> 
-        <j:if test="${!build.building}">
-          <j:set var="linkTitleAttr">${%Took} ${build.durationString}</j:set>
-        </j:if>
-        <a class="model-link inside build-link" href="${link}" update-parent-class=".build-row" tooltip="${linkTitleAttr}">
-          <i:formatDate value="${build.timestamp.time}" type="both" dateStyle="medium" timeStyle="short" /> ${h.getUserTimeZonePostfix(build.timestamp.time)}
-        </a>
-        <j:if test="${build.building}">
-	  <j:set target="${it.widget}" property="nextBuildNumberToFetch" value="${build.number}"/>
-          <t:buildProgressBar build="${build}"/>
-        </j:if>
-      </div>
-      <div class="pane build-controls">
-        <div class="middle-align build-badge">
-          <j:set var="badges" value="${build.badgeActions}"/>
-          <j:if test="${!empty(badges)}">
-            <st:nbsp/>
-            <j:forEach var="badge" items="${badges}">
-              <st:include it="${badge}" page="badge.jelly" />
-            </j:forEach>
+
+  <div class="app-builds-container__item" page-entry-id="${pageEntry.entryId}">
+    <a class="app-builds-container__item__icon"
+       href="${h.getConsoleUrl(build)}"
+       tooltip="${build.iconColor.description}"
+       data-tooltip-append-to-parent="true">
+      <l:icon src="symbol-status-${build.iconColor.iconName}" />
+    </a>
+
+    <div class="app-builds-container__item__inner">
+      <a href="${link}" class="app-builds-container__item__inner__link">
+        ${build.displayName}
+        <span class="app-builds-container__item__time" time="${build.timestamp.time.time}">
+          <j:set var="linkTitleAttr" value="${null}" />
+          <j:if test="${!build.building}">
+            <j:set var="linkTitleAttr">${%Took} ${build.durationString}</j:set>
           </j:if>
-        </div>
-        <j:if test="${build.building}">
-          <div class="build-stop">
-            <!-- Check CANCEL permission for Project, Admin permission otherwise -->
-            <j:if test="${empty(it.widget.owner.CANCEL) ? h.hasPermission(app.ADMINISTER) : it.widget.owner.hasPermission(it.widget.owner.CANCEL)}">
-              <l:stopButton href="${link}stop" alt="${%Cancel}" confirm="${%confirm(build.fullDisplayName)}" />
-            </j:if>
+          <div tooltip="${linkTitleAttr}" data-tooltip-append-to-parent="true">
+            <i:formatDate value="${build.timestamp.time}" type="time" timeStyle="short" />
+            ${h.getUserTimeZonePostfix()}
           </div>
+        </span>
+      </a>
+      <div class="app-builds-container__item__inner__controls">
+        <j:if test="${build.building}">
+          <j:if test="${build.building}">
+            <j:set target="${it.widget}" property="nextBuildNumberToFetch" value="${build.number}"/>
+            <t:buildProgressBar build="${build}"/>
+          </j:if>
+
+          <!-- Check CANCEL permission for Project, Admin permission otherwise -->
+          <j:if test="${empty(it.widget.owner.CANCEL) ? h.hasPermission(app.ADMINISTER) : it.widget.owner.hasPermission(it.widget.owner.CANCEL)}">
+            <l:stopButton href="${link}stop" alt="${%Cancel}" confirm="${%confirm(build.fullDisplayName)}" />
+          </j:if>
         </j:if>
+
+        <j:set var="badges" value="${build.badgeActions}"/>
+        <j:if test="${!empty(badges)}">
+          <j:forEach var="badge" items="${badges}">
+            <st:include it="${badge}" page="badge.jelly" />
+          </j:forEach>
+        </j:if>
+      </div>
+    </div>
+
+    <button class="jenkins-card__reveal jenkins-jumplist-link" data-href="${link}">
+      <l:icon src="symbol-menu" />
+    </button>
+    <j:if test="${!empty build.truncatedDescription}">
+      <div class="app-builds-container__item__description">
+        <j:out value="${app.markupFormatter.translate(build.truncatedDescription)}"/>
       </div>
-      <j:if test="${!empty build.truncatedDescription}">
-        <div class="pane desc indent-multiline">
-          <j:out value="${app.markupFormatter.translate(build.truncatedDescription)}"/>
-        </div>
-      </j:if>
-      <div class="left-bar" />
-    </td>
-  </tr>
+    </j:if>
+  </div>
 </j:jelly>

core/src/main/resources/hudson/widgets/HistoryWidget/index.jelly

@@ -23,76 +23,54 @@ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 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" xmlns:i="jelly:fmt">
-  <j:parse var="paneTitle">
-    <j:invokeStatic var="currentThread" className="java.lang.Thread" method="currentThread"/>
-    <j:invoke var="jobClass" on="${currentThread.contextClassLoader}" method="loadClass">
-      <j:arg value="hudson.model.Job"/>
-    </j:invoke>
+<j:jelly xmlns:j="jelly:core" xmlns:l="/lib/layout" xmlns:dd="/lib/layout/dropdowns">
+  <script src="${resURL}/jsbundles/pages/project/builds-card.js" type="text/javascript" defer="true" />
 
-    <div class="jenkins-pane__header--build-history">
-      <j:if test="${jobClass.isAssignableFrom(it.owner.class)}">
-        <t:buildHealth job="${it.owner}" iconSizeClass="icon-sm" link="${it.baseUrl}/lastBuild"/>
-      </j:if>
-      ${it.displayName}
-      <j:if test="${jobClass.isAssignableFrom(it.owner.class)}">
-        <a href="${it.baseUrl}/buildTimeTrend">${%trend}</a>
-      </j:if>
-    </div>
-  </j:parse>
+  <j:set var="page" value="${it.historyPageFilter}" />
 
-  <j:parse var="paneFooter">
-    <!--
-      RSS link
-    -->
-    <span class="build-rss-links">
-        <a class="build-rss-all-link" href="${it.baseUrl}/rssAll">
-          <span class="build-rss-all-icon">
-            <l:icon src="symbol-rss" />
-          </span>
-          Atom feed ${%for all}
-        </a>
-        <a class="build-rss-failed-link" href="${it.baseUrl}/rssFailed">
-          <span class="build-rss-failed-icon">
-            <l:icon src="symbol-rss" />
-          </span>
-          Atom feed ${%for failures}
-        </a>
-    </span>
-  </j:parse>
+  <j:set var="controls">
+    <l:overflowButton icon="symbol-menu" clazz="jenkins-card__reveal">
+      <dd:item icon="symbol-rss"
+               text="Atom feed ${%for all}"
+               href="${it.baseUrl}/rssAll" />
+      <dd:item icon="symbol-rss"
+               text="Atom feed ${%for failures}"
+               href="${it.baseUrl}/rssFailed" />
+    </l:overflowButton>
+  </j:set>
 
-  <j:set var="page" value="${it.historyPageFilter}" />
-  <div id="buildHistoryPage" page-ajax="${it.baseUrl}/buildHistory/ajax" page-entry-newest="${page.newestOnPage}" page-entry-oldest="${page.oldestOnPage}" page-has-up="${page.hasUpPage}" page-has-down="${page.hasDownPage}">
-    <div id="buildHistoryPageNav">
-      <div class="buildHistoryPageNav__item buildHistoryPageNav__item--page-one pageOne" title="Page 1 (Newest/Latest Builds)">
-        <div class="buildHistoryPageNav__item-page-one-top"></div>
-        <l:svgIcon href="${resURL}/images/svgs/go-up.svg#arrow" viewBox="0 0 16 16" />
-      </div>
-      <div class="buildHistoryPageNav__item pageUp" title="Newer Builds">
-        <l:svgIcon href="${resURL}/images/svgs/go-up.svg#arrow" viewBox="0 0 16 16" />
-      </div>
-      <div class="buildHistoryPageNav__item pageDown" title="Older Builds">
-        <l:svgIcon href="${resURL}/images/svgs/go-down.svg#arrow" viewBox="0 0 16 16" />
-      </div>
-    </div>
+  <div id="buildHistoryPage" page-ajax="${it.baseUrl}/buildHistory/ajax"
+       data-page-entry-newest="${page.newestOnPage}"
+       data-page-entry-oldest="${page.oldestOnPage}"
+       data-page-has-up="${page.hasUpPage}"
+       data-page-has-down="${page.hasDownPage}">
+    <l:card id="jenkins-builds" title="Builds" controls="${controls}" expandable="${it.baseUrl}/buildTimeTrend">
+      <l:search-bar placeholder="${%find}"
+                    clazz="${page.runs.isEmpty() and page.queueItems.isEmpty() ? 'jenkins-hidden' : ''}"/>
 
-    <l:pane width="3" title="${h.runScript(paneTitle)}" footer="${h.runScript(paneFooter)}" id="buildHistory" class="jenkins-pane stripped">
-      <tr class="build-search-row">
-        <td>
-          <l:search-bar placeholder="${%find}" clazz="${page.runs.isEmpty() and page.queueItems.isEmpty() ? 'jenkins-hidden' : ''}"/>
-          <div id="no-builds" class="jenkins-pane__information" style="${page.runs.isEmpty() and page.queueItems.isEmpty() ? '' : 'display: none;'}">
-            ${%No builds}
-          </div>
-        </td>
-      </tr>
+      <div class="app-builds-container">
+        <div id="no-builds" class="app-builds-container__placeholder">
+          ${%No builds}
+        </div>
 
-      <st:include page="entries.jelly" it="${page}" />
+        <div id="jenkins-build-history" class="app-builds-container__items">
+        </div>
 
-    </l:pane>
+        <div class="app-builds-container__controls" id="controls">
+          <button class="jenkins-button jenkins-button--tertiary jenkins-card__unveil" id="up">
+            <l:icon src="symbol-arrow-left" />
+            <span class="jenkins-visually-hidden">${%Newer builds}</span>
+          </button>
+          <button class="jenkins-button jenkins-button--tertiary jenkins-card__unveil" id="down">
+            <l:icon src="symbol-arrow-right" />
+            <span class="jenkins-visually-hidden">${%Older builds}</span>
+          </button>
+        </div>
+      </div>
 
-    <!--The value for `page-next-build` is modified inside of `entries.jelly` on render, so set the attribute-->
-    <!--after that component has been rendered to get the correct value to use in `filter-build-history.js`-->
-    <div id="properties" page-next-build="${it.nextBuildNumberToFetch ?: it.owner.nextBuildNumber}"/>
+      <!--The value for `page-next-build` is modified inside of `entries.jelly` on render, so set the attribute-->
+      <!--after that component has been rendered to get the correct value to use in `builds-card.js`-->
+      <div id="properties" page-next-build="${it.nextBuildNumberToFetch ?: it.owner.nextBuildNumber}"/>
+    </l:card>
   </div>
-  <script src="${resURL}/jsbundles/filter-build-history.js" type="text/javascript"/>
 </j:jelly>

core/src/main/resources/hudson/widgets/HistoryWidget/index.properties

@@ -1 +1 @@
-find=Filter...
+find=Filter

core/src/main/resources/jenkins/widgets/HistoryPageFilter/ajaxBuildHistory.jelly

@@ -22,20 +22,16 @@ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 THE SOFTWARE.
 -->
 
-<!--
--->
 <?jelly escape-by-default='true'?>
 <j:jelly xmlns:j="jelly:core" xmlns:st="jelly:stapler" xmlns:l="/lib/layout">
   <l:ajax>
-    <j:choose>
-      <j:when test="${it.size() > 0}">
-	<table class="pane hasPageData" page-entry-newest="${it.newestOnPage}" page-entry-oldest="${it.oldestOnPage}" page-has-up="${it.hasUpPage}" page-has-down="${it.hasDownPage}">
-	  <st:include page="entries.jelly" />
-	</table>
-      </j:when>
-      <j:otherwise>
-	<table class="pane"></table>
-      </j:otherwise>
-    </j:choose>
+    <j:if test="${it.size() > 0}">
+      <div data-page-entry-newest="${it.newestOnPage}"
+           data-page-entry-oldest="${it.oldestOnPage}"
+           data-page-has-up="${it.hasUpPage}"
+           data-page-has-down="${it.hasDownPage}">
+        <st:include page="entries.jelly" />
+      </div>
+    </j:if>
   </l:ajax>
-</j:jelly>
+</j:jelly>

core/src/main/resources/jenkins/widgets/HistoryPageFilter/queue-items.jelly

@@ -28,50 +28,43 @@ THE SOFTWARE.
 -->
 <?jelly escape-by-default='true'?>
 <j:jelly xmlns:j="jelly:core" xmlns:st="jelly:stapler" xmlns:l="/lib/layout">
-  <!-- pending build -->
-  <j:set var="queuedItems" value="${it.queueItems}" />
-  <j:if test="${!queuedItems.isEmpty()}">
-    <j:forEach var="pageEntry" items="${queuedItems}" indexVar="i">
-      <j:set var="item" value="${pageEntry.entry}"/>
-      <j:set var="id" value="${h.generateId()}"/>
-      <tr class="build-row build-pending transitive single-line" id="${item.id}"  page-entry-id="${pageEntry.entryId}">
-	<td class="build-row-cell">
-	  <div class="pane build-name">
-	    <div class="build-icon">
-        <l:icon src="symbol-status-nobuilt" class="icon-sm"/>
-	    </div>
-	    <!-- Don't use math unless needed, in case nextBuildNumber is not numeric -->
-	    <div class="display-name" title="${%Expected build number}">
-	    #${queuedItems.size()==1 ? it.widget.owner.nextBuildNumber
-	       : it.widget.owner.nextBuildNumber+queuedItems.size()-i-1}
-	    </div>
-	  </div>
-	  <div class="pane build-details indent-multiline">
-	    <j:set var="cause" value="${item.getCauseOfBlockage()}"/>
-	    <j:choose>
-	      <j:when test="${cause!=null}">
-		(${%pending}—<st:include it="${cause}" page="summary.jelly"/>)
-	      </j:when>
-	      <j:otherwise>
-		(${%pending})
-	      </j:otherwise>
-	    </j:choose>
-	  <j:if test="${!item.params.isEmpty()}">
-	    <div style="float:right;margin-right:10px;" tooltip="Build Parameters:${item.params}" data-tooltip-append-to-parent="true">
-	      <l:icon src="symbol-parameters" class="icon-sm" />
-	    </div>
-	  </j:if>
-	  </div>
-	  <div class="pane build-controls">
-	    <div class="build-stop">
-	      <j:if test="${item.hasCancelPermission()}">
-		<l:stopButton href="${rootURL}/queue/cancelItem?id=${item.id}" alt="${%Cancel this build}"/>
-	      </j:if>
-	    </div>
-	  </div>
-	  <div class="left-bar"></div>
-	</td>
-      </tr>
-    </j:forEach>
-  </j:if>
+    <!-- pending build -->
+    <j:set var="queuedItems" value="${it.queueItems}"/>
+    <j:if test="${!queuedItems.isEmpty()}">
+        <span class="app-builds-container__heading">${%Pending}</span>
+        <j:forEach var="pageEntry" items="${queuedItems}">
+            <j:set var="item" value="${pageEntry.entry}"/>
+            <j:set var="id" value="${h.generateId()}"/>
+
+            <div class="app-builds-container__item app-builds-container__item--not-interactable" page-entry-id="${pageEntry.entryId}">
+                <div class="app-builds-container__item__icon">
+                    <l:icon src="symbol-status-nobuilt" />
+                </div>
+                <div class="app-builds-container__item__inner">
+                    <div class="app-builds-container__item__inner__link">
+                        <!-- Don't use math unless needed, in case nextBuildNumber is not numeric -->
+                        #${queuedItems.size() == 1 ? it.widget.owner.nextBuildNumber : it.widget.owner.nextBuildNumber+queuedItems.size()-i-1}
+                    </div>
+                    <div class="app-builds-container__item__inner__controls">
+                        <j:if test="${!item.params.isEmpty()}">
+                            <div tooltip="Build Parameters: ${item.params}" data-tooltip-append-to-parent="true">
+                                <l:icon src="symbol-parameters" class="icon-sm" />
+                            </div>
+                        </j:if>
+                        <j:if test="${item.hasCancelPermission()}">
+                            <l:stopButton href="${rootURL}/queue/cancelItem?id=${item.id}" alt="${%Cancel}"/>
+                        </j:if>
+                    </div>
+                </div>
+                <div class="app-builds-container__item__description">
+                    <j:set var="cause" value="${item.getCauseOfBlockage()}"/>
+                    <j:choose>
+                        <j:when test="${cause!=null}">
+                            <st:include it="${cause}" page="summary.jelly"/>
+                        </j:when>
+                    </j:choose>
+                </div>
+            </div>
+        </j:forEach>
+    </j:if>
 </j:jelly>