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,57 @@ 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}">
+ <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}">
+ <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,52 @@ 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="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" />
+ </button>
+ <button class="jenkins-button jenkins-button--tertiary jenkins-card__unveil" id="down">
+ <l:icon src="symbol-arrow-right" />
+ </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,47 @@ 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;">
- <l:icon src="symbol-parameters" class="icon-sm" tooltip="Build Parameters:${item.params}"/>
- </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>
+ <j:if test="${build.building}">
+ <div class="app-builds-container__item__inner__controls">
+ <j:if test="${item.hasCancelPermission()}">
+ <l:stopButton href="${rootURL}/queue/cancelItem?id=${item.id}" alt="${%cancel this build}"/>
+ </j:if>
+ </div>
+ </j:if>
+ <div class="app-builds-container__item__inner__controls">
+ <j:if test="${!item.params.isEmpty()}">
+ <div tooltip="Build Parameters: ${item.params}">
+ <l:icon class="icon-notepad icon-sm"/>
+ </div>
+ </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>