JENKINS-74732 - Move jelly inline event handlers and script blocks to…

… JavaScript. (#76) * Modify floatingbox.jelly according to CSP requirements * Revert "Modify floatingbox.jelly according to CSP requirements" This reverts commit ba1db71. * Move js inline handlers from jelly to js file * Add trailing slash * Move failedcases onlick handlers to javascript * Combine DOMContentLodaded event handlers
jenkinsci · Nov 4, 2024 · cd4cde3 · cd4cde3
1 parent f6ccfc4
commit cd4cde3
Show file tree

Hide file tree

Showing 7 changed files with 66 additions and 34 deletions.
diff --git a/src/main/resources/hudson/plugins/robot/RobotProjectAction/floatingBox.jelly b/src/main/resources/hudson/plugins/robot/RobotProjectAction/floatingBox.jelly
@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="UTF-8"?>	
+<?xml version="1.0" encoding="UTF-8"?>
 <!--
 Copyright 2008-2014 Nokia Solutions and Networks Oy
 
@@ -25,13 +25,13 @@ limitations under the License.
             <a href="${from.urlName}">
                 <img id="passfailgraph" src="" title="Browse results" width="500" height="200"/>
             </a><br/>
-            <p><label><input type="checkbox" id="zoomToChanges" onclick="redrawPassFailGraph('${from.urlName}/');"/>Zoom to changes</label></p>
-            <p><label><input type="checkbox" id="failedOnly" onclick="redrawPassFailGraph('${from.urlName}/');"/>Show only failed</label></p>
-            <p><label><input type="checkbox" id="criticalOnly" onclick="redrawPassFailGraph('${from.urlName}/');"/>Show only critical</label></p>
-            <p><label><input min="0" max="9999" step="1" placeholder="all" value="" type="number" id="maxBuildsToShow" onchange="redrawPassFailGraph('${from.urlName}/');"/>Max builds</label></p>
+            <span id="robot-fromurl-id" data-url="${from.urlName}/"></span>
+            <p><label><input type="checkbox" id="zoomToChanges"/>Zoom to changes</label></p>
+            <p><label><input type="checkbox" id="failedOnly"/>Show only failed</label></p>
+            <p><label><input type="checkbox" id="criticalOnly"/>Show only critical</label></p>
+            <p><label><input min="0" max="9999" step="1" placeholder="all" value="" type="number" id="maxBuildsToShow"/>Max builds</label></p>
             <br/><p style="float:right"><a id="passfailgraph_hd_link" href="">Show bigger image</a></p>
         </div>
-        <script>initPassFailGraph('${from.urlName}/');</script>
     </div>
     </j:if>
 </j:jelly>
diff --git a/src/main/resources/hudson/plugins/robot/model/RobotCaseResult/index.jelly b/src/main/resources/hudson/plugins/robot/model/RobotCaseResult/index.jelly
@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="UTF-8"?>	
+<?xml version="1.0" encoding="UTF-8"?>
 <!--
 Copyright 2008-2014 Nokia Solutions and Networks Oy
 
@@ -54,19 +54,17 @@ limitations under the License.
         <a id="passfailgraph_hd" href="">
           <img id="passfailgraph" src="" title="Show bigger image" width="500" height="200"/>
         </a><br/>
-        <p><label><input min="0" step="1" max="9999" value="" placeholder="all" type="number" id="maxBuildsToShow"
-                         onchange="redrawPassFailGraph(''); redrawDurationGraph('');"/>Max builds</label></p>
+        <span id="robot-fromurl-id" data-url=""></span>
+        <p><label><input min="0" step="1" max="9999" value="" placeholder="all" type="number" id="maxBuildsToShow"/>Max builds</label></p>
         <br/><p style="float:right"><a id="passfailgraph_hd_link" href="">Show bigger image</a></p>
        </div>
-       <script>initPassFailGraph('');</script>
        <div style="float:left; margin: 20px; border: 1px solid #ccc; padding: 10px;">
         <h3>Duration Trend</h3>
           <a id="durationgraph_hd" href="">
             <img id="durationgraph" src="" title="Show bigger image" width="500" height="200"/>
           </a><br/>
           <p style="float:right"><a id="durationgraph_hd_link" href="">Show bigger image</a></p>
         </div>
-       <script>initDurationGraph('');</script>
        <div style="clear:both;"></div>
       </div>
       </l:main-panel>

diff --git a/src/main/resources/hudson/plugins/robot/model/RobotResult/index.jelly b/src/main/resources/hudson/plugins/robot/model/RobotResult/index.jelly
@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="UTF-8"?>	
+<?xml version="1.0" encoding="UTF-8"?>
 <!--
 Copyright 2008-2014 Nokia Solutions and Networks Oy
 
@@ -58,22 +58,20 @@ limitations under the License.
         <a id="passfailgraph_hd" href="">
           <img id="passfailgraph" src="" title="Show bigger image" width="500" height="200"/>
         </a><br/>
-        <p><label><input type="checkbox" id="zoomToChanges" onclick="redrawPassFailGraph('');"/>Zoom to changes</label></p>
-        <p><label><input type="checkbox" id="failedOnly" onclick="redrawPassFailGraph('');"/>Show only failed</label></p>
-        <p><label><input type="checkbox" id="criticalOnly" onclick="redrawPassFailGraph('');"/>Show only critical</label></p>
-        <p><label><input min="0" max="9999" step="1" placeholder="all" value="" type="number" id="maxBuildsToShow"
-                         onchange="redrawPassFailGraph(''); redrawDurationGraph('');"/>Max builds</label></p>
+        <span id="robot-fromurl-id" data-url=""></span>
+        <p><label><input type="checkbox" id="zoomToChanges"/>Zoom to changes</label></p>
+        <p><label><input type="checkbox" id="failedOnly"/>Show only failed</label></p>
+        <p><label><input type="checkbox" id="criticalOnly"/>Show only critical</label></p>
+        <p><label><input min="0" max="9999" step="1" placeholder="all" value="" type="number" id="maxBuildsToShow"/>Max builds</label></p>
         <br/><p style="float:right"><a id="passfailgraph_hd_link" href="">Show bigger image</a></p>
        </div>
-       <script>initPassFailGraph('');</script>
        <div style="float:left; margin: 20px; border: 1px solid #ccc; padding: 10px;">
          <h3>Duration Trend</h3>
           <a id="durationgraph_hd" href="">
             <img id="durationgraph" src="" title="Show bigger image" width="500" height="200"/>
           </a><br/>
           <p style="float:right"><a id="durationgraph_hd_link" href="">Show bigger image</a></p>
        </div>
-       <script>initDurationGraph('');</script>
        <div style="clear:both;"></div>
       </div>
       <div style="float:left;">

diff --git a/src/main/resources/hudson/plugins/robot/model/RobotSuiteResult/index.jelly b/src/main/resources/hudson/plugins/robot/model/RobotSuiteResult/index.jelly
@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="UTF-8"?>	
+<?xml version="1.0" encoding="UTF-8"?>
 <!--
 Copyright 2008-2014 Nokia Solutions and Networks Oy
 
@@ -59,14 +59,13 @@ limitations under the License.
         <a id="passfailgraph_hd" href="">
           <img id="passfailgraph" src="" title="Show bigger image" width="500" height="200"/>
         </a><br/>
-        <p><label><input type="checkbox" id="zoomToChanges" onclick="redrawPassFailGraph('');"/>Zoom to changes</label></p>
-        <p><label><input type="checkbox" id="failedOnly" onclick="redrawPassFailGraph('');"/>Show only failed</label></p>
-        <p><label><input type="checkbox" id="criticalOnly" onclick="redrawPassFailGraph('');"/>Show only critical</label></p>
-        <p><label><input min="0" step="1" max="9999" value="" placeholder="all" type="number" id="maxBuildsToShow"
-                         onchange="redrawPassFailGraph(''); redrawDurationGraph('');"/>Max builds</label></p>
+        <span id="robot-fromurl-id" data-url=""></span>
+        <p><label><input type="checkbox" id="zoomToChanges"/>Zoom to changes</label></p>
+        <p><label><input type="checkbox" id="failedOnly"/>Show only failed</label></p>
+        <p><label><input type="checkbox" id="criticalOnly"/>Show only critical</label></p>
+        <p><label><input min="0" step="1" max="9999" value="" placeholder="all" type="number" id="maxBuildsToShow"/>Max builds</label></p>
         <br/><p style="float:right"><a id="passfailgraph_hd_link" href="">Show bigger image</a></p>
        </div>
-       <script>initPassFailGraph('');</script>
        <div style="float:left; margin: 20px; border: 1px solid #ccc; padding: 10px;">
         <h3>Duration Trend</h3>
           <a id="durationgraph_hd" href="">
@@ -76,7 +75,6 @@ limitations under the License.
         </div>
        <div style="clear:both;"></div>
       </div>
-      <script>initDurationGraph('');</script>
       <j:if test="${!it.caseResults.isEmpty()}">
       <h2>Test Cases</h2>
       <table class="pane sortable">

diff --git a/src/main/resources/hudson/plugins/robot/model/RobotTestObject/robotcss.jelly b/src/main/resources/hudson/plugins/robot/model/RobotTestObject/robotcss.jelly
@@ -40,18 +40,18 @@ span.FAIL {
 table.listsummary th, table.listsummary td {
     font-size:100%;
 }
-.expand {
+.robot-expand {
     background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAGCAQAAABKxSfDAAAAAmJLR0QA/4ePzL8AAAAJcEhZcwAACxMAAAsTAQCanBgAAAAHdElNRQfeCR0JCDHdVYtxAAAAM0lEQVQI103MMQqAMBQFwVHyITaB3P+W1sKzSBC3mW6hRFw0pUB5DvF1bu9FN0RM3X/wAk98CUnvFTakAAAAAElFTkSuQmCC);
         background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI4IiBoZWlnaHQ9IjgiIHZpZXdCb3g9IjAgMCA4IDgiPgogIDxwYXRoIGQ9Ik0zIDB2M2gtM3YyaDN2M2gydi0zaDN2LTJoLTN2LTNoLTJ6IiAvPgo8L3N2Zz4=), none;
 }
-.collapse {
+.robot-collapse {
     background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAGCAQAAABKxSfDAAAAAmJLR0QA/4ePzL8AAAAJcEhZcwAACxMAAAsTAQCanBgAAAAHdElNRQfeCR0JChSkZz20AAAAGklEQVQI12NgQAKMDKzInP8IDhOqMk4G7AAANQwBE427PYUAAAAASUVORK5CYII=);
         background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI4IiBoZWlnaHQ9IjgiIHZpZXdCb3g9IjAgMCA4IDgiPgogIDxwYXRoIGQ9Ik0wIDB2Mmg4di0yaC04eiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMCAzKSIgLz4KPC9zdmc+), none;
 }
 .error-message {
     white-space: pre;
 }
-.expand, .collapse {
+.robot-expand, .robot-collapse {
     display: block;
     float: left;
     left: 3px;

diff --git a/src/main/resources/hudson/plugins/robot/util/failedCases.jelly b/src/main/resources/hudson/plugins/robot/util/failedCases.jelly
@@ -1,6 +1,7 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <?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:u="/util">
+    <script src="${rootURL}/plugin/robot/robot.js"/>
     <j:if test="${!it.allFailedCases.isEmpty()}">
         <style>
             td.pane {
@@ -21,8 +22,8 @@
                 <j:set var="escapedName" value="${h.escape(fullName)}" />
                 <tr>
                     <td class="pane">
-                        <a id="${escapedName}-showlink" href="#" onclick="javascript:showStackTrace('${h.jsStringEscape(escapedName)}','${h.jsStringEscape(relativeId)}/summary')" class="expand"></a>
-                        <a id="${escapedName}-hidelink" href="#" onclick="javascript:hideStackTrace('${h.jsStringEscape(escapedName)}')" style="display:none" class="collapse"></a>
+                        <a id="${escapedName}-showlink" href="#" class="robot-expand" data-escaped-name="${escapedName}" data-relative-id="${relativeId}/summary"></a>
+                        <a id="${escapedName}-hidelink" href="#" style="display:none" class="robot-collapse" data-escaped-name="${escapedName}"></a>
                         <st:nbsp/>
                         <a href="${relativeId}"><small>${case.getRelativeParent(it)}</small>${case.name}</a>
                         <div id="${escapedName}" class="hidden" style="display:none">

diff --git a/src/main/webapp/robot.js b/src/main/webapp/robot.js
@@ -49,8 +49,9 @@ function setDurationGraphSrc(target, maxBuildsToShow) {
     setLinks("durationgraph", href);
 }
 
-function redrawPassFailGraph(target) {
+function redrawPassFailGraph() {
     var mode = false;
+    var target = document.getElementById("robot-fromurl-id").getAttribute("data-url");
     if (document.getElementById("zoomToChanges")) {
         mode = Boolean(document.getElementById('zoomToChanges').checked).toString();
         setCookie("RobotResult_zoom",mode, 365);
@@ -72,7 +73,8 @@ function redrawPassFailGraph(target) {
     setPassFailGraphSrc(target, mode, failedOnly, criticalOnly, maxBuildsToShow);
 }
 
-function redrawDurationGraph(target) {
+function redrawDurationGraph() {
+    var target = document.getElementById("robot-fromurl-id").getAttribute("data-url");
     var maxBuildsToShow = getMaxBuildsToShow();
     setDurationGraphSrc(target, maxBuildsToShow);
 }
@@ -112,3 +114,38 @@ function hideStackTrace(id) {
     document.getElementById(id + "-showlink").style.display = "";
     document.getElementById(id + "-hidelink").style.display = "none";
 }
+
+document.addEventListener("DOMContentLoaded", function(){
+    var element = document.getElementById("robot-fromurl-id");
+    if (element) {
+        var url = element.getAttribute("data-url");
+
+        ["zoomToChanges", "failedOnly", "criticalOnly"].forEach(function(id) {
+            if (document.getElementById(id))
+                document.getElementById(id).addEventListener("click", redrawPassFailGraph);
+        });
+
+        if (document.getElementById("maxBuildsToShow")) {
+            document.getElementById("maxBuildsToShow").addEventListener("change", redrawPassFailGraph);
+            if (url == "")
+                document.getElementById("maxBuildsToShow").addEventListener("change", redrawDurationGraph);
+        }
+        initPassFailGraph(url);
+        if (url == "")
+            initDurationGraph(url);
+    }
+
+    document.querySelectorAll('.robot-expand').forEach(function(element) {
+            element.addEventListener('click', function(event) {
+                event.preventDefault();
+                showStackTrace(event.target.dataset.escapedName, event.target.dataset.relativeId);
+            });
+        });
+
+    document.querySelectorAll('.robot-collapse').forEach(function(element) {
+        element.addEventListener('click', function(event) {
+            event.preventDefault();
+            hideStackTrace(event.target.dataset.escapedName);
+        });
+    });
+});