[JENKINS-73964] Extract event handlers in `MultiJobTestResults/index.…

…jelly` (#376)
jenkinsci · Oct 22, 2024 · 6633374 · 6633374
1 parent 56b5bcb
commit 6633374
Show file tree

Hide file tree

Showing 2 changed files with 58 additions and 26 deletions.
diff --git a/src/main/resources/com/tikal/jenkins/plugins/multijob/MultiJobTestResults/index.jelly b/src/main/resources/com/tikal/jenkins/plugins/multijob/MultiJobTestResults/index.jelly
@@ -4,28 +4,7 @@
         <st:include page="sidepanel.jelly" it="${it.owner}"/>
         <l:main-panel>
             <st:once>
-                <script type="text/javascript">
-                    <!-- TODO make sure load doesn't happen every time -->
-                    function showFailureSummary(id,query) {
-                        var element = document.getElementById(id)
-                        element.style.display = "";
-                        document.getElementById(id + "-showlink").style.display = "none";
-                        document.getElementById(id + "-hidelink").style.display = "";
-
-                        if (typeof query !== 'undefined') {
-                            var rqo = new XMLHttpRequest();
-                            rqo.open('GET', query, true);
-                            rqo.onreadystatechange = function() { element.innerHTML = rqo.responseText; }
-                            rqo.send(null);
-                        }
-                    }
-
-                    function hideFailureSummary(id) {
-                        document.getElementById(id).style.display = "none";
-                        document.getElementById(id + "-showlink").style.display = "";
-                        document.getElementById(id + "-hidelink").style.display = "none";
-                    }
-                </script>
+                <st:adjunct includes="com.tikal.jenkins.plugins.multijob.MultiJobTestResults.show-hide-failure-summary" />
                 <style type="text/css">
                     .failure-summary {
                     margin-left: 2em;
@@ -130,12 +109,10 @@
                                 <tr>
                                     <td class="pane">
                                         <j:set var="id" value="${h.jsStringEscape(f.url)}${h.jsStringEscape(report.child.fullDisplayName)}"/>
-                                        <j:set var="open" value="showFailureSummary('test-${id}','${rootURL}/${report.child.url}testReport/${f.getRelativePathFrom(report.result)}/summary')"/>
-                                        <j:set var="close" value="hideFailureSummary('test-${id}')"/>
-                                        <a id="test-${id}-showlink" onclick="${open}" title="${%Show details}">
+                                        <a id="test-${id}-showlink" data-query-url='${rootURL}/${report.child.url}testReport/${f.getRelativePathFrom(report.result)}/summary' title="${%Show details}">
                                           <l:icon src="symbol-add-outline plugin-ionicons-api" class="icon-sm"/>
                                         </a>
-                                        <a id="test-${id}-hidelink" onclick="${close}" title="${%Hide details}" style="display:none">
+                                        <a id="test-${id}-hidelink" title="${%Hide details}" style="display:none">
                                           <l:icon src="symbol-remove-outline plugin-ionicons-api" class="icon-sm"/>
                                         </a>
                                         <st:nbsp/>

diff --git a/...urces/com/tikal/jenkins/plugins/multijob/MultiJobTestResults/show-hide-failure-summary.js b/...urces/com/tikal/jenkins/plugins/multijob/MultiJobTestResults/show-hide-failure-summary.js
@@ -0,0 +1,55 @@
+const PREFIX = "test-";
+const SHOWLINK_SUFFIX = "-showlink";
+const HIDELINK_SUFFIX = "-hidelink";
+
+function showFailureSummary(summaryId, query) {
+    let element = document.getElementById(summaryId);
+
+    element.style.display = "";
+    document.getElementById(summaryId + SHOWLINK_SUFFIX).style.display = "none";
+    document.getElementById(summaryId + HIDELINK_SUFFIX).style.display = "";
+
+    if (typeof query !== 'undefined' && element.innerHTML.trim() === 'Loading...') {
+        let rqo = new XMLHttpRequest();
+        rqo.open('GET', query, true);
+        rqo.onreadystatechange = function() {
+            element.innerHTML = rqo.responseText;
+            initializeShowHideLinks(element);
+        }
+        rqo.send(null);
+    }
+
+}
+
+function hideFailureSummary(summaryId) {
+    document.getElementById(summaryId).style.display = "none";
+    document.getElementById(summaryId + SHOWLINK_SUFFIX).style.display = "";
+    document.getElementById(summaryId + HIDELINK_SUFFIX).style.display = "none";
+}
+
+function initializeShowHideLinks(container) {
+    container = container || document;
+
+    container.querySelectorAll('a[id$="-showlink"], a[id$="-hidelink"]').forEach(link => {
+        link.addEventListener('click', handleShowHideClick);
+        link.style.cursor = 'pointer';
+    });
+}
+
+function handleShowHideClick(event) {
+    event.preventDefault();
+
+    let link = event.target.closest('a[id$="-showlink"], a[id$="-hidelink"]');
+    const id = link.id.replace(/-showlink$/, '').replace(/-hidelink$/, '');
+    const queryUrl = link.dataset.queryUrl;
+
+    if (link.id.endsWith('-showlink')) {
+        showFailureSummary(id, queryUrl);
+    } else {
+        hideFailureSummary(id);
+    }
+}
+
+document.addEventListener('DOMContentLoaded', () => {
+    initializeShowHideLinks();
+});