Tidy up

janfaracik · Dec 12, 2023 · d1fd7a9 · d1fd7a9
1 parent 512b9a1
commit d1fd7a9
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 20 deletions.
diff --git a/core/src/main/resources/hudson/widgets/HistoryWidget/index.jelly b/core/src/main/resources/hudson/widgets/HistoryWidget/index.jelly
@@ -23,7 +23,7 @@ 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:jelly xmlns:j="jelly:core" xmlns:l="/lib/layout" xmlns:t="/lib/hudson" xmlns:f="/lib/form">
   <j:set var="page" value="${it.historyPageFilter}" />
 
   <j:set var="controls">
@@ -48,15 +48,17 @@ THE SOFTWARE.
        page-entry-oldest="${page.oldestOnPage}"
        page-has-up="${page.hasUpPage}"
        page-has-down="${page.hasDownPage}">
-    <l:card title="Builds" controls="${controls}" expandable="buildTimeTrend">
+    <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' : ''}"/>
 
-      <div id="no-builds" class="nobuilds">
-        ${%No builds}
-      </div>
+      <div class="app-builds-container">
+        <div id="no-builds" class="app-builds-container__placeholder">
+          ${%No builds}
+        </div>
 
-      <div id="xander">
+        <div id="xander" class="app-builds-container__items">
+        </div>
       </div>
 
       <!--The value for `page-next-build` is modified inside of `entries.jelly` on render, so set the attribute-->

diff --git a/war/src/main/js/filter-build-history.js b/war/src/main/js/filter-build-history.js
@@ -5,10 +5,12 @@ const pageSearchInput = buildHistoryPage.querySelector(
   "input",
 );
 const ajaxUrl = buildHistoryPage.getAttribute("page-ajax");
-const xander = document.querySelector("#xander");
-const noBuilds = document.querySelector("#no-builds")
+const card = document.querySelector("#jenkins-builds");
+const xander = card.querySelector("#xander");
+const container = card.querySelector(".app-builds-container");
+const noBuilds = card.querySelector("#no-builds")
 
-const updateBuildsRefreshInterval = 500000;
+const updateBuildsRefreshInterval = 5000;
 
 function loadPage() {
   const params = {
@@ -18,6 +20,8 @@ function loadPage() {
   fetch(ajaxUrl + toQueryString(params)).then((rsp) => {
     if (rsp.ok) {
       rsp.text().then((responseText) => {
+        container.classList.remove("app-builds-container--loading");
+
         if (responseText.trim() === "") {
           xander.innerHTML = "";
           noBuilds.style.display = "block";
@@ -39,13 +43,19 @@ const handleFilter = function () {
 const debouncedFilter = debounce(handleFilter, 300);
 
 setInterval(() => {
-  loadPage({})
+  loadPage()
 }, updateBuildsRefreshInterval)
 
 document.addEventListener("DOMContentLoaded", function () {
   pageSearchInput.addEventListener("input", function () {
+    container.classList.add("app-builds-container--loading");
     debouncedFilter();
   });
 
   loadPage({});
 });
+
+document.querySelectorAll(".task-link").forEach((taskLink) =>
+  taskLink.addEventListener('click', () => {
+    loadPage();
+}))
diff --git a/war/src/main/scss/components/_buttons.scss b/war/src/main/scss/components/_buttons.scss
@@ -389,10 +389,6 @@ $jenkins-split-button-border-radius: 0.2rem;
   flex-direction: column;
 }
 
-#xander {
-  margin-bottom: -0.5rem;
-}
-
 .willow {
   display: flex;
   font-size: 0.75rem;
@@ -434,10 +430,29 @@ $jenkins-split-button-border-radius: 0.2rem;
   }
 }
 
-.nobuilds {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  text-align: center;
-  padding: 3rem;
+.app-builds-container {
+  transition: opacity var(--standard-transition);
+
+  &__items {
+    margin-bottom: -0.5rem;
+  }
+
+  &__placeholder {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    padding: 3rem;
+    animation: timeonthefloor var(--standard-transition);
+
+    @keyframes timeonthefloor {
+      from {
+        opacity: 0;
+      }
+    }
+  }
+
+  &--loading {
+    opacity: 0.3;
+  }
 }