[JENKINS-73613] refresh buildhistory in all cases

refresh the buildHistory widget instantly when the window gets focus,
e.g. after switching browser tabs but also when one was in another
application and clicks in the browser window.
When the window is visible it will update even when it has no focus.

Additionally the buildHistory will be updated now when it is not on the
first page as long as there are still runs that are not finished. As
soon as all runs are finished refresh will end. Minor drawback would be
that if someone deletes a run, adjusts displayname or changes the
description this would not be reflected. On the pro side it will stop
polling the controller when all runs are finished.

core/src/main/java/jenkins/widgets/HistoryPageFilter.java

@@ -73,6 +73,7 @@ public class HistoryPageFilter<T> {
 
     public long newestOnPage = Long.MIN_VALUE; // see updateNewestOldest()
     public long oldestOnPage = Long.MAX_VALUE; // see updateNewestOldest()
+    public boolean activeRuns = false;
 
     /**
      * Create a history page filter instance.
@@ -259,6 +260,7 @@ private void addQueueItem(QueueItem item) {
         HistoryPageEntry<QueueItem> entry = new HistoryPageEntry<>(item);
         queueItems.add(entry);
         updateNewestOldest(entry.getEntryId());
+        updateActiveRuns(true);
     }
 
     private void addRun(Run run) {
@@ -271,13 +273,18 @@ private void addRun(Run run) {
         }
         runs.add(entry);
         updateNewestOldest(entry.getEntryId());
+        updateActiveRuns(run.isBuilding());
     }
 
     private void updateNewestOldest(long entryId) {
         newestOnPage = Math.max(newestOnPage, entryId);
         oldestOnPage = Math.min(oldestOnPage, entryId);
     }
 
+    private void updateActiveRuns(boolean isActive) {
+      activeRuns = activeRuns || isActive;
+    }
+
     private boolean add(Object entry) {
         // Purposely not calling isFull(). May need to add a greater number of entries
         // to the page initially, newerThan then cutting it back down to size using cutLeading()

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

@@ -43,7 +43,8 @@ THE SOFTWARE.
        data-page-entry-newest="${page.newestOnPage}"
        data-page-entry-oldest="${page.oldestOnPage}"
        data-page-has-up="${page.hasUpPage}"
-       data-page-has-down="${page.hasDownPage}">
+       data-page-has-down="${page.hasDownPage}"
+       data-active-runs="${page.activeRuns}">
     <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' : ''}"/>
@@ -56,7 +57,7 @@ THE SOFTWARE.
         <div id="jenkins-build-history" class="app-builds-container__items">
         </div>
 
-        <div class="app-builds-container__controls" id="controls">
+        <div class="app-builds-container__controls jenkins-hidden" 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>

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

@@ -29,7 +29,8 @@ THE SOFTWARE.
       <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}">
+           data-page-has-down="${it.hasDownPage}"
+           data-active-runs="${it.activeRuns}">
         <st:include page="entries.jelly" />
       </div>
     </j:if>

war/src/main/js/pages/project/builds-card.js

@@ -26,16 +26,39 @@ const updateBuildsRefreshInterval = 5000;
  */
 function load(options = {}) {
   /** @type {QueryParameters} */
+  cancelRefreshTimeout();
+  let newSearch = false;
+  if ("newSearch" in options) {
+    newSearch = true;
+    delete options.newSearch;
+  }
   const params = Object.assign({}, options, { search: pageSearchInput.value });
-
-  // Avoid fetching if the page isn't active
-  if (document.hidden) {
-    if (buildHistoryPage.dataset.pageHasUp === "false") {
-      createRefreshTimeout();
-    }
+  const paginationOrFirst =
+    buildHistoryPage.dataset.pageHasUp === "false" ||
+    "older-than" in params ||
+    "newer-than" in params;
+
+  // Avoid fetching if the page isn't active or we're not on the first page and all
+  // runs are finished
+  if (
+    document.hidden ||
+    (!paginationOrFirst &&
+      !newSearch &&
+      buildHistoryPage.dataset.activeRuns !== "true")
+  ) {
     return;
   }
 
+  createRefreshTimeout();
+
+  // When we're not on the first page and this is not a load due to pagination
+  // we need to set the correct value for older-than so we fetch the same set if runs
+  if (!paginationOrFirst) {
+    params["older-than"] = (
+      BigInt(buildHistoryPage.dataset.pageEntryNewest) + 1n
+    ).toString();
+  }
+
   fetch(ajaxUrl + toQueryString(params)).then((rsp) => {
     if (rsp.ok) {
       rsp.text().then((responseText) => {
@@ -69,6 +92,7 @@ function load(options = {}) {
           pageHasDown: innerChild.dataset.pageHasDown === "true",
           pageEntryNewest: innerChild.dataset.pageEntryNewest,
           pageEntryOldest: innerChild.dataset.pageEntryOldest,
+          activeRuns: innerChild.dataset.activeRuns,
         });
       });
     } else {
@@ -95,24 +119,17 @@ function updateCardControls(parameters) {
     !parameters.pageHasDown,
   );
 
-  // We only want the list to refresh if the user is on the first page of results
-  if (!parameters.pageHasUp) {
-    createRefreshTimeout();
-  } else {
-    cancelRefreshTimeout();
-  }
-
   buildHistoryPage.dataset.pageEntryNewest = parameters.pageEntryNewest;
   buildHistoryPage.dataset.pageEntryOldest = parameters.pageEntryOldest;
   buildHistoryPage.dataset.pageHasUp = parameters.pageHasUp;
+  buildHistoryPage.dataset.activeRuns = parameters.activeRuns;
 }
 
 paginationPrevious.addEventListener("click", () => {
   load({ "newer-than": buildHistoryPage.dataset.pageEntryNewest });
 });
 
 paginationNext.addEventListener("click", () => {
-  cancelRefreshTimeout();
   load({ "older-than": buildHistoryPage.dataset.pageEntryOldest });
 });
 
@@ -132,7 +149,7 @@ function cancelRefreshTimeout() {
 }
 
 const debouncedLoad = debounce(() => {
-  load();
+  load({ newSearch: true });
 }, 150);
 
 document.addEventListener("DOMContentLoaded", function () {
@@ -143,4 +160,8 @@ document.addEventListener("DOMContentLoaded", function () {
   });
 
   load();
+
+  window.addEventListener("focus", function () {
+    load();
+  });
 });