From d53da8c62d8f81b0b9001564a01b91b890a31fed Mon Sep 17 00:00:00 2001
From: Jan Faracik <43062514+janfaracik@users.noreply.github.com>
Date: Wed, 28 Feb 2024 20:18:36 +0000
Subject: [PATCH] More

---
 .../hudson/model/Job/buildTimeTrend.jelly     |   9 +-
 .../model/Job/buildTimeTrend_resources.js     | 359 +++++++++---------
 war/src/main/js/components/graph/index.js     |  73 ++--
 .../main/js/components/search-bar/index.js    |   5 +-
 war/src/main/js/pages/project/builds/index.js |  91 +++++
 war/src/main/scss/base/_style.scss            |  11 +-
 war/webpack.config.js                         |   3 +
 7 files changed, 318 insertions(+), 233 deletions(-)
 create mode 100644 war/src/main/js/pages/project/builds/index.js

diff --git a/core/src/main/resources/hudson/model/Job/buildTimeTrend.jelly b/core/src/main/resources/hudson/model/Job/buildTimeTrend.jelly
index 09952a19e0aa..9618d28ebb51 100644
--- a/core/src/main/resources/hudson/model/Job/buildTimeTrend.jelly
+++ b/core/src/main/resources/hudson/model/Job/buildTimeTrend.jelly
@@ -29,8 +29,6 @@ THE SOFTWARE.
   <l:layout title="${%title(it.displayName)}" type="one-column">
     <l:breadcrumb title="${%Builds}" />
 
-    <st:adjunct includes="hudson.model.Job.buildTimeTrend_resources" />
-
     <l:main-panel>
       <template id="jenkins-build-status-icons">
         <l:icon src="symbol-status-blue" id="blue" />
@@ -57,6 +55,8 @@ THE SOFTWARE.
           </div>
       </div>
 
+    <script src="${resURL}/jsbundles/pages/project/builds.js" type="text/javascript" />
+
 <!--      <j:set var="job" value="${it}" />-->
 <!--      <j:forEach var="p" items="${it.permalinks}">-->
 <!--        <st:include page="link.jelly" it="${p}" />-->
@@ -111,12 +111,11 @@ THE SOFTWARE.
           <tr>
             <th class="jenkins-table__cell--tight">S</th>
             <th initialSortDir="up">${%Build}</th>
-              <th>${%Duration}</th>
-              <th>${%Completed}</th>
+            <th>${%Duration}</th>
             <j:if test="${isDistributedBuildEnabled}">
               <th>${%Agent}</th>
             </j:if>
-              <th>${%overflow}</th>
+            <th>${%overflow}</th>
           </tr>
           <tbody></tbody>
         </thead>
diff --git a/core/src/main/resources/hudson/model/Job/buildTimeTrend_resources.js b/core/src/main/resources/hudson/model/Job/buildTimeTrend_resources.js
index 2fc72e614d3d..5e8ce4a685bc 100644
--- a/core/src/main/resources/hudson/model/Job/buildTimeTrend_resources.js
+++ b/core/src/main/resources/hudson/model/Job/buildTimeTrend_resources.js
@@ -1,182 +1,177 @@
-/**
- * Public method to be called by progressiveRendering's callback
- */
-window.buildTimeTrend_displayBuilds = function (data) {
-  var p = document.getElementById("trend");
-  var isDistributedBuildsEnabled =
-    "true" === p.getAttribute("data-is-distributed-build-enabled");
-  var rootURL = document.head.getAttribute("data-rooturl");
-
-  for (var x = 0; data.length > x; x++) {
-    var e = data[x];
-    var tr = document.createElement("tr");
-
-    let td = document.createElement("td");
-    td.setAttribute("data", e.iconColorOrdinal);
-
-    let link = document.createElement("a");
-    link.classList.add("build-status-link");
-    link.href = e.consoleUrl;
-    td.appendChild(link);
-    let svg = generateSVGIcon(e.iconName);
-    link.appendChild(svg);
-    tr.appendChild(td);
-
-    td = document.createElement("td");
-    td.setAttribute("data", e.number);
-
-    link = document.createElement("a");
-    link.href = e.number + "/";
-    link.classList.add("model-link", "iamlink");
-    link.innerText = escapeHTML(e.displayName);
-
-    td.appendChild(link);
-    tr.appendChild(td);
-
-    td = document.createElement("td");
-    td.setAttribute("data", e.duration);
-
-    td.innerText = escapeHTML(e.durationString);
-
-    tr.appendChild(td);
-    if (isDistributedBuildsEnabled) {
-      var buildInfo = null;
-      var buildInfoStr = escapeHTML(e.builtOnStr || "");
-      if (e.builtOn) {
-        buildInfo = document.createElement("a");
-        buildInfo.href = rootURL + "/computer/" + e.builtOn;
-        buildInfo.classList.add("model-link", "inside");
-        buildInfo.innerText = buildInfoStr;
-      } else {
-        buildInfo = buildInfoStr;
-      }
-      td = document.createElement("td");
-      if (buildInfo instanceof Node) {
-        td.appendChild(buildInfo);
-      } else {
-        td.innerText = buildInfo;
-      }
-      tr.appendChild(td);
-    }
-    p.appendChild(tr);
-    Behaviour.applySubtree(tr);
-  }
-  ts_refresh(p);
-
-  doThing()
-};
-
-/**
- * Generate SVG Icon
- */
-function generateSVGIcon(iconName) {
-  const icons = document.querySelector("#jenkins-build-status-icons");
-
-  return icons.content.querySelector(`#${iconName}`).cloneNode(true);
-}
-
-/**
- * Public method to be called by progressiveRendering's callback
- */
-window.displayBuilds = function (data) {
-  var rootUrl = document.head.getAttribute("data-rooturl");
-  var p = document.getElementById("projectStatus");
-  p.style.display = "";
-  for (var x = 0; data.length > x; x++) {
-    var e = data[x];
-    var tr = document.createElement("tr");
-
-    var td1 = document.createElement("td");
-    td1.setAttribute("data", e.iconColorOrdinal);
-    td1.classList.add("jenkins-table__cell--tight", "jenkins-table__icon");
-    var div1 = document.createElement("div");
-    div1.classList.add("jenkins-table__cell__button-wrapper");
-    var svg = generateSVGIcon(e.iconName);
-    div1.appendChild(svg);
-    td1.appendChild(div1);
-    tr.appendChild(td1);
-
-    var td2 = document.createElement("td");
-    var a1 = document.createElement("a");
-    a1.classList.add("jenkins-table__link", "model-link");
-    a1.href = rootUrl + "/" + e.parentUrl;
-    var span1 = document.createElement("span");
-    // TODO port Functions#breakableString to JavaScript and use .textContent rather than .innerHTML
-    span1.innerHTML = e.parentFullDisplayName;
-    a1.appendChild(span1);
-    td2.appendChild(a1);
-    var a2 = document.createElement("a");
-    a2.classList.add(
-      "jenkins-table__link",
-      "jenkins-table__badge",
-      "model-link",
-      "inside",
-    );
-    a2.href = rootUrl + "/" + e.url;
-    a2.textContent = e.displayName;
-    td2.appendChild(a2);
-    tr.appendChild(td2);
-
-    var td3 = document.createElement("td");
-    td3.setAttribute("data", e.timestampString2);
-    td3.textContent = e.timestampString;
-    tr.appendChild(td3);
-
-    var td4 = document.createElement("td");
-    if (e.buildStatusSummaryWorse) {
-      td4.style.color = "var(--red)";
-    }
-    td4.textContent = e.buildStatusSummaryMessage;
-    tr.appendChild(td4);
-
-    var td5 = document.createElement("td");
-    td5.classList.add("jenkins-table__cell--tight");
-    var div2 = document.createElement("div");
-    div2.classList.add("jenkins-table__cell__button-wrapper");
-    var a3 = document.createElement("a");
-    a3.classList.add("jenkins-table__button");
-    a3.href = e.consoleUrl;
-    a3.innerHTML = p.dataset.consoleOutputIcon;
-    div2.appendChild(a3);
-    td5.appendChild(div2);
-    tr.appendChild(td5);
-
-    p.appendChild(tr);
-    Behaviour.applySubtree(tr);
-  }
-  ts_refresh(p);
-
-
-
-};
-
-function doThing() {
-  const searchBarInput = document.querySelector("#search-bar-builds");
-
-  console.log('light years')
-  console.log('light years')
-  console.log(document.querySelectorAll("tbody tr"))
-
-  console.log(Array.from(document.querySelectorAll("tbody tr"))
-    .map((item) => ({
-      url: item.querySelector(".iamlink").href,
-      icon: item.querySelector(
-        "svg",
-      ).outerHTML,
-      label: item.querySelector(".iamlink").textContent,
-    })))
-
-  searchBarInput.suggestions = function () {
-    return Array.from(document.querySelectorAll("tbody tr"))
-      .map((item) => ({
-        url: item.querySelector(".iamlink").href,
-        icon: item.querySelector(
-          "svg",
-        ).outerHTML,
-        label: item.querySelector(".iamlink").textContent,
-      }));
-  };
-
-  Behaviour.applySubtree(searchBarInput, true)
-}
-
+// /**
+//  * Public method to be called by progressiveRendering's callback
+//  */
+// window.buildTimeTrend_displayBuilds = function (data) {
+//   var p = document.getElementById("trend");
+//   var isDistributedBuildsEnabled =
+//     "true" === p.getAttribute("data-is-distributed-build-enabled");
+//   var rootURL = document.head.getAttribute("data-rooturl");
+//
+//   for (var x = 0; data.length > x; x++) {
+//     var e = data[x];
+//     var tr = document.createElement("tr");
+//
+//     let td = document.createElement("td");
+//     td.setAttribute("data", e.iconColorOrdinal);
+//
+//     let link = document.createElement("a");
+//     link.classList.add("build-status-link");
+//     link.href = e.consoleUrl;
+//     td.appendChild(link);
+//     let svg = generateSVGIcon(e.iconName);
+//     link.appendChild(svg);
+//     tr.appendChild(td);
+//
+//     td = document.createElement("td");
+//     td.setAttribute("data", e.number);
+//
+//     link = document.createElement("a");
+//     link.href = e.number + "/";
+//     link.classList.add("model-link", "iamlink");
+//     link.innerText = escapeHTML(e.displayName);
+//
+//     td.appendChild(link);
+//     tr.appendChild(td);
+//
+//     td = document.createElement("td");
+//     td.setAttribute("data", e.duration);
+//
+//     td.innerText = escapeHTML(e.durationString);
+//
+//     tr.appendChild(td);
+//     if (isDistributedBuildsEnabled) {
+//       var buildInfo = null;
+//       var buildInfoStr = escapeHTML(e.builtOnStr || "");
+//       if (e.builtOn) {
+//         buildInfo = document.createElement("a");
+//         buildInfo.href = rootURL + "/computer/" + e.builtOn;
+//         buildInfo.classList.add("model-link");
+//         buildInfo.innerText = buildInfoStr;
+//       } else {
+//         buildInfo = buildInfoStr;
+//       }
+//       td = document.createElement("td");
+//       if (buildInfo instanceof Node) {
+//         td.appendChild(buildInfo);
+//       } else {
+//         td.innerText = buildInfo;
+//       }
+//       tr.appendChild(td);
+//     }
+//     p.appendChild(tr);
+//     Behaviour.applySubtree(tr);
+//   }
+//   ts_refresh(p);
+//
+//   doThing()
+// };
+//
+// /**
+//  * Generate SVG Icon
+//  */
+// function generateSVGIcon(iconName) {
+//   const icons = document.querySelector("#jenkins-build-status-icons");
+//
+//   return icons.content.querySelector(`#${iconName}`).cloneNode(true);
+// }
+//
+// /**
+//  * Public method to be called by progressiveRendering's callback
+//  */
+// window.displayBuilds = function (data) {
+//   var rootUrl = document.head.getAttribute("data-rooturl");
+//   var p = document.getElementById("projectStatus");
+//   p.style.display = "";
+//   for (var x = 0; data.length > x; x++) {
+//     var e = data[x];
+//     var tr = document.createElement("tr");
+//
+//     var td1 = document.createElement("td");
+//     td1.setAttribute("data", e.iconColorOrdinal);
+//     td1.classList.add("jenkins-table__cell--tight", "jenkins-table__icon");
+//     var div1 = document.createElement("div");
+//     div1.classList.add("jenkins-table__cell__button-wrapper");
+//     var svg = generateSVGIcon(e.iconName);
+//     div1.appendChild(svg);
+//     td1.appendChild(div1);
+//     tr.appendChild(td1);
+//
+//     var td2 = document.createElement("td");
+//     var a1 = document.createElement("a");
+//     a1.classList.add("jenkins-table__link", "model-link");
+//     a1.href = rootUrl + "/" + e.parentUrl;
+//     var span1 = document.createElement("span");
+//     // TODO port Functions#breakableString to JavaScript and use .textContent rather than .innerHTML
+//     span1.innerHTML = e.parentFullDisplayName;
+//     a1.appendChild(span1);
+//     td2.appendChild(a1);
+//     var a2 = document.createElement("a");
+//     a2.classList.add(
+//       "jenkins-table__link",
+//       "jenkins-table__badge",
+//       "model-link",
+//     );
+//     a2.href = rootUrl + "/" + e.url;
+//     a2.textContent = e.displayName;
+//     td2.appendChild(a2);
+//     tr.appendChild(td2);
+//
+//     var td3 = document.createElement("td");
+//     td3.setAttribute("data", e.timestampString2);
+//     td3.textContent = e.timestampString;
+//     tr.appendChild(td3);
+//
+//     var td4 = document.createElement("td");
+//     if (e.buildStatusSummaryWorse) {
+//       td4.style.color = "var(--red)";
+//     }
+//     td4.textContent = e.buildStatusSummaryMessage;
+//     tr.appendChild(td4);
+//
+//     var td5 = document.createElement("td");
+//     td5.classList.add("jenkins-table__cell--tight");
+//     var div2 = document.createElement("div");
+//     div2.classList.add("jenkins-table__cell__button-wrapper");
+//     var a3 = document.createElement("a");
+//     a3.classList.add("jenkins-table__button");
+//     a3.href = e.consoleUrl;
+//     a3.innerHTML = p.dataset.consoleOutputIcon;
+//     div2.appendChild(a3);
+//     td5.appendChild(div2);
+//     tr.appendChild(td5);
+//
+//     p.appendChild(tr);
+//     Behaviour.applySubtree(tr);
+//   }
+//   ts_refresh(p);
+//
+//
+//
+// };
+//
+// function doThing() {
+//   const searchBarInput = document.querySelector("#search-bar-builds");
+//
+//   console.log(Array.from(document.querySelectorAll("tbody tr"))
+//     .map((item) => ({
+//       url: item.querySelector(".iamlink").href,
+//       icon: item.querySelector(
+//         "svg",
+//       ).outerHTML,
+//       label: item.querySelector(".iamlink").textContent,
+//     })))
+//
+//   searchBarInput.suggestions = function () {
+//     return Array.from(document.querySelectorAll("tbody tr"))
+//       .map((item) => ({
+//         url: item.querySelector(".iamlink").href,
+//         icon: item.querySelector(
+//           "svg",
+//         ).outerHTML,
+//         label: item.querySelector(".iamlink").textContent,
+//       }));
+//   };
+//
+//   Behaviour.applySubtree(searchBarInput, true)
+// }
+//
diff --git a/war/src/main/js/components/graph/index.js b/war/src/main/js/components/graph/index.js
index 194f28973e46..6b9e063d14d6 100644
--- a/war/src/main/js/components/graph/index.js
+++ b/war/src/main/js/components/graph/index.js
@@ -1,63 +1,66 @@
 // import Jumplists from "@/components/dropdowns/jumplists";
-import Chart from 'chart.js/auto';
+import Chart from "chart.js/auto";
 
 function init() {
-  const ctx = document.getElementById('myChart');
-  const things = eval(ctx.dataset.labels).reverse()
-  const labels = things.map(e => e.label).map(e => '#' + e)
-  const values = eval(ctx.dataset.values).reverse()
+  const ctx = document.getElementById("myChart");
+  const things = eval(ctx.dataset.labels).reverse();
+  const labels = things.map((e) => e.label).map((e) => "#" + e);
+  const values = eval(ctx.dataset.values).reverse();
 
-  const textColor = getComputedStyle(ctx).getPropertyValue('--text-color');
+  const textColor = getComputedStyle(ctx).getPropertyValue("--text-color");
 
   const skipped = (context) => {
     if (context.p0DataIndex >= things.length) {
-      return 'orange'
+      return "orange";
     }
 
     let color = things[context.p0DataIndex].color;
 
-    if (color === 'blue') {
-      color = 'green'
+    if (color === "blue") {
+      color = "green";
     }
 
-    return getComputedStyle(ctx).getPropertyValue('--' + color);
+    return getComputedStyle(ctx).getPropertyValue("--" + color);
   };
 
   new Chart(ctx, {
-    type: 'line',
+    type: "line",
     data: {
       labels: labels,
-      datasets: [{
-        data: values,
-        fill: 'start',
-        segment: {
-          backgroundColor: () => 'transparent',
-          borderColor: ctx => skipped(ctx),
-          backgroundOpacity: 0.5
+      datasets: [
+        {
+          data: values,
+          fill: "start",
+          segment: {
+            backgroundColor: () => "transparent",
+            borderColor: (ctx) => skipped(ctx),
+            backgroundOpacity: 0.5,
+          },
+          // spanGaps: true,
+          pointStyle: false,
+          // pointRadius: 1,
+          // pointHoverRadius: 10
         },
-        // spanGaps: true,
-        pointStyle: false,
-        // pointRadius: 1,
-        // pointHoverRadius: 10
-      }]
+      ],
     },
     options: {
       plugins: {
         legend: {
-          display: false
-        }
+          display: false,
+        },
       },
       elements: {
         line: {
-          tension: 0.3
-        }
+          tension: 0.3,
+        },
       },
       scales: {
         x: {
           border: {
-            display: false
-          },grid: {
-            drawOnChartArea:false
+            display: false,
+          },
+          grid: {
+            drawOnChartArea: false,
           },
           ticks: {
             color: textColor,
@@ -65,17 +68,17 @@ function init() {
         },
         y: {
           border: {
-            display: false
+            display: false,
           },
           grid: {
-            drawOnChartArea:false
+            drawOnChartArea: false,
           },
           ticks: {
             color: textColor,
           },
-        }
-      }
-    }
+        },
+      },
+    },
   });
 
   // Jumplists.init();
diff --git a/war/src/main/js/components/search-bar/index.js b/war/src/main/js/components/search-bar/index.js
index 4720764c2f86..a0c02545898b 100644
--- a/war/src/main/js/components/search-bar/index.js
+++ b/war/src/main/js/components/search-bar/index.js
@@ -13,7 +13,6 @@ function init() {
     "jenkins-search__input",
     0,
     (searchBar) => {
-
       if (!searchBar.suggestions) {
         return;
       }
@@ -120,12 +119,12 @@ function init() {
 
         hideResultsContainer();
       });
-    });
+    },
+  );
 
   // Array.from(searchBarInputs)
   //   .filter((searchBar) => searchBar.suggestions)
   //   .forEach((searchBar) => {
-
 }
 
 export default { init };
diff --git a/war/src/main/js/pages/project/builds/index.js b/war/src/main/js/pages/project/builds/index.js
new file mode 100644
index 000000000000..b97b2e381b36
--- /dev/null
+++ b/war/src/main/js/pages/project/builds/index.js
@@ -0,0 +1,91 @@
+import behaviorShim from "@/util/behavior-shim";
+import { createElementFromHtml } from "@/util/dom";
+import { xmlEscape } from "@/util/security";
+
+/**
+ * @typedef {Object} Build
+ * @property {string} iconName
+ * @property {number} iconColorOrdinal
+ * @property {string} iconColorDescription
+ * @property {number} number
+ * @property {string} displayName
+ * @property {number} duration
+ * @property {string} durationString
+ * @property {string} consoleUrl
+ */
+
+/**
+ * Public method to be called by progressiveRendering's callback
+ * @param {Build[]} data
+ */
+window.buildTimeTrend_displayBuilds = function (data) {
+  const p = document.querySelector("tbody");
+  const isDistributedBuildsEnabled =
+    "true" === p.getAttribute("data-is-distributed-build-enabled");
+  const rootURL = document.head.getAttribute("data-rooturl");
+
+  console.log(data);
+
+  data.forEach((item) => {
+    const tableRow = createElementFromHtml(`<tr>
+<td data="${item.iconColorOrdinal}"><a href="${item.consoleUrl}">${generateSVGIcon(item.iconName)}</a></td>
+<td class="model-link iamlink" data="${item.number}"><a href="${item.number}/">${xmlEscape(item.displayName)}</a></td>
+<td data="${item.duration}">${xmlEscape(item.durationString)}</td>
+<td>${item}</td>
+<td><button class="jenkins-button">...</button></td>
+</tr>`);
+
+    p.append(tableRow);
+    behaviorShim.applySubtree(tableRow);
+  });
+
+  //   tr.appendChild(td);
+  //   if (isDistributedBuildsEnabled) {
+  //     var buildInfo = null;
+  //     var buildInfoStr = escapeHTML(e.builtOnStr || "");
+  //     if (e.builtOn) {
+  //       buildInfo = document.createElement("a");
+  //       buildInfo.href = rootURL + "/computer/" + e.builtOn;
+  //       buildInfo.classList.add("model-link");
+  //       buildInfo.innerText = buildInfoStr;
+  //     } else {
+  //       buildInfo = buildInfoStr;
+  //     }
+  //     td = document.createElement("td");
+  //     if (buildInfo instanceof Node) {
+  //       td.appendChild(buildInfo);
+  //     } else {
+  //       td.innerText = buildInfo;
+  //     }
+  //     tr.appendChild(td);
+  //   }
+  //   p.appendChild(tr);
+  //   Behaviour.applySubtree(tr);
+  // }
+  // ts_refresh(p);
+
+  generateSearchResults();
+};
+
+/**
+ * Generate SVG Icon
+ */
+function generateSVGIcon(iconName) {
+  const icons = document.querySelector("#jenkins-build-status-icons");
+
+  return icons.content.querySelector(`#${iconName}`).outerHTML;
+}
+
+function generateSearchResults() {
+  const searchBarInput = document.querySelector("#search-bar-builds");
+
+  searchBarInput.suggestions = function () {
+    return Array.from(document.querySelectorAll("tbody tr")).map((item) => ({
+      url: item.querySelector(".iamlink").href,
+      icon: item.querySelector("svg").outerHTML,
+      label: item.querySelector(".iamlink").textContent,
+    }));
+  };
+
+  behaviorShim.applySubtree(searchBarInput, true);
+}
diff --git a/war/src/main/scss/base/_style.scss b/war/src/main/scss/base/_style.scss
index b06c8b6b6129..d66989accec1 100644
--- a/war/src/main/scss/base/_style.scss
+++ b/war/src/main/scss/base/_style.scss
@@ -1208,9 +1208,9 @@ svg.icon-xlg {
 
 /* -------------------------------------- */
 
-.canvaas, .iteem {
+.canvaas,
+.iteem {
   background: var(--card-background);
-
 }
 
 .canvaas {
@@ -1237,7 +1237,6 @@ svg.icon-xlg {
 
   a.iteem {
     cursor: pointer;
-
     text-decoration: none !important;
   }
 
@@ -1258,11 +1257,7 @@ svg.icon-xlg {
     .backplate {
       position: absolute;
       inset: 0;
-      mask-image:  radial-gradient(
-                      at top right,
-                      white,
-                      transparent 70%
-      );
+      mask-image: radial-gradient(at top right, white, transparent 70%);
       opacity: 0.2;
 
       &::before {
diff --git a/war/webpack.config.js b/war/webpack.config.js
index 4817f8d5367d..144332616259 100644
--- a/war/webpack.config.js
+++ b/war/webpack.config.js
@@ -27,6 +27,9 @@ module.exports = (env, argv) => ({
         "src/main/js/pages/manage-jenkins/system-information",
       ),
     ],
+    "pages/project/builds": [
+      path.join(__dirname, "src/main/js/pages/project/builds"),
+    ],
     app: [path.join(__dirname, "src/main/js/app.js")],
     "pages/cloud-set": [
       path.join(__dirname, "src/main/js/pages/cloud-set/index.js"),