[JENKINS-70934] Remove Prototype usages from buildListTable.jelly (#…

…7830) * [JENKINS-70934] Remove Prototype usages from buildListTable.jelly * #7830 (comment) * #7830 (comment) * #7830 (comment)
jenkinsci · Apr 19, 2023 · ebc9aa6 · ebc9aa6
1 parent 7073fbb
commit ebc9aa6
Show file tree

Hide file tree

Showing 2 changed files with 86 additions and 32 deletions.
diff --git a/core/src/main/resources/hudson/model/Job/buildTimeTrend_resources.js b/core/src/main/resources/hudson/model/Job/buildTimeTrend_resources.js
@@ -122,3 +122,85 @@ function generateSVGIcon(iconName, iconSizeClass) {
 
   return span;
 }
+
+/**
+ * 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, p.dataset.iconSizeClass);
+    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);
+    var button = document.createElement("button");
+    button.classList.add("jenkins-table__link");
+    button.setAttribute("tooltip", p.dataset.scrollTooltip);
+    button.setAttribute(
+      "onclick",
+      'javascript:tl.getBand(0).scrollToCenter(Timeline.DateTime.parseGregorianDateTime("' +
+        e.timestampString3 +
+        '"))'
+    );
+    button.textContent = e.timestampString;
+    td3.appendChild(button);
+    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 = rootUrl + "/" + e.url + "console";
+    a3.innerHTML = p.dataset.consoleOutputIcon;
+    div2.appendChild(a3);
+    td5.appendChild(div2);
+    tr.appendChild(td5);
+
+    p.appendChild(tr);
+    Behaviour.applySubtree(tr);
+  }
+  ts_refresh(p);
+};
diff --git a/core/src/main/resources/lib/hudson/buildListTable.jelly b/core/src/main/resources/lib/hudson/buildListTable.jelly
@@ -33,41 +33,13 @@ THE SOFTWARE.
 
   <t:setIconSize/>
   <st:adjunct includes="hudson.model.Job.buildTimeTrend_resources" />
-  <script>
-      function displayBuilds(data) {
-          var p = $$('projectStatus');
-          p.show();
-          for (var x = 0; data.length > x; x++) {
-              var e = data[x];
-              var tr = new Element('tr');
-              tr.insert(new Element('td', {data: e.iconColorOrdinal, class: 'jenkins-table__cell--tight jenkins-table__icon'}).
-                  insert(new Element('div', {class: 'jenkins-table__cell__button-wrapper'}).
-                      insert(generateSVGIcon(e.iconName, "${iconSizeClass}"))));
-              tr.insert(new Element('td').
-                  insert(new Element('a', {class: 'jenkins-table__link model-link', href: '${rootURL}/' + e.parentUrl}).
-                   insert(new Element('span').
-                      update(e.parentFullDisplayName))).
-                  insert(new Element('a', {class: 'jenkins-table__link jenkins-table__badge model-link inside', href: '${rootURL}/' + e.url}).
-                      update(e.displayName.escapeHTML())));
-              tr.insert(new Element('td', {data: e.timestampString2}).
-                  insert(new Element('button', {class: 'jenkins-table__link', tooltip: '${%Click to center timeline on event}', onclick: 'javascript:tl.getBand(0).scrollToCenter(Timeline.DateTime.parseGregorianDateTime("' + e.timestampString3 + '"))'}).
-                    update(e.timestampString.escapeHTML())));
-              tr.insert(new Element('td', {style: e.buildStatusSummaryWorse ? 'color: var(--red)' : ''}).
-                  update(e.buildStatusSummaryMessage.escapeHTML()));
-              tr.insert(new Element('td', {class: 'jenkins-table__cell--tight'}).
-                    insert(new Element('div', {class: 'jenkins-table__cell__button-wrapper'}).
-                        insert(new Element('a', {class: 'jenkins-table__button', href: '${rootURL}/' + e.url + 'console'}).
-                            insert(`<l:icon src="symbol-terminal" alt="${%Console output}" />`))));
-              p.insert(tr);
-              Behaviour.applySubtree(tr);
-          }
-          ts_refresh(p);
-      }
-  </script>
   <j:new var="handler" className="jenkins.widgets.BuildListTable"/>
   ${handler.setBuilds(attrs.builds)}
   <l:progressiveRendering handler="${handler}" callback="displayBuilds"/>
-  <table class="jenkins-table ${iconSize == '16x16' ? 'jenkins-table--small' : iconSize == '24x24' ? 'jenkins-table--medium' : ''} sortable" id="projectStatus" style="display: none;">
+  <j:set var="consoleOutputIcon" trim="true">
+    <l:icon src="symbol-terminal" alt="${%Console output}" />
+  </j:set>
+  <table class="jenkins-table ${iconSize == '16x16' ? 'jenkins-table--small' : iconSize == '24x24' ? 'jenkins-table--medium' : ''} sortable" id="projectStatus" style="display: none;" data-icon-size-class="${iconSizeClass}" data-scroll-tooltip="${%Click to center timeline on event}" data-console-output-icon="${consoleOutputIcon}">
     <thead>
         <tr>
             <th class="jenkins-table__cell--tight">${%S}</th>