Merge pull request #357 from yaroslavafenkin/JENKINS-73911

[JENKINS-73911] Un-inline JavaScript in trend-chart.jelly
jenkinsci · Oct 15, 2024 · 9aa496d · 9aa496d
2 parents f1df76f + d542ca5
commit 9aa496d
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 8 deletions.
diff --git a/src/main/resources/charts/trend-chart.jelly b/src/main/resources/charts/trend-chart.jelly
@@ -23,7 +23,8 @@
 
   </st:documentation>
 
-  <j:set var="chartId" value="history-chart-${h.generateId()}" />
+  <j:set var="generatedId" value="${h.generateId()}" />
+  <j:set var="chartId" value="history-chart-${generatedId}" />
   <j:if test="${it.isTrendVisible()}">
 
     <div class="test-trend-caption">
@@ -42,13 +43,14 @@
       <st:adjunct includes="io.jenkins.plugins.echarts-trend-default-setup"/>
 
     </j:if>
-
-    <script>
-      {
-          const trendProxy = <st:bind value="${it}"/>;
-          echartsJenkinsApi.renderConfigurableTrendChart('${chartId}', '${enableLinks}', '${configurationId}', trendProxy);
-      }
-    </script>
+    <st:bind value="${it}" var="trendProxy${generatedId}" />
+    <span class="echarts-api-trend-chart-data-holder"
+          data-generated-id="${generatedId}"
+          data-chart-id="${chartId}"
+          data-enable-links="${enableLinks}"
+          data-configuration-id="${configurationId}"
+          style="display:none" />
+    <st:adjunct includes="io.jenkins.plugins.echarts.render-configurable-trend-chart"/>
 
   </j:if>
 

diff --git a/src/main/resources/io/jenkins/plugins/echarts/render-configurable-trend-chart.js b/src/main/resources/io/jenkins/plugins/echarts/render-configurable-trend-chart.js
@@ -0,0 +1,12 @@
+window.addEventListener("DOMContentLoaded", () => {
+    const dataHolders = document.querySelectorAll(".echarts-api-trend-chart-data-holder");
+
+    dataHolders.forEach(dataHolder => {
+        const chartId = dataHolder.getAttribute("data-chart-id");
+        const enableLinks = dataHolder.getAttribute("data-enable-links");
+        const configurationId = dataHolder.getAttribute("data-configuration-id");
+        const generatedId = dataHolder.getAttribute("data-generated-id");
+
+        echartsJenkinsApi.renderConfigurableTrendChart(`${chartId}`, `${enableLinks}`, `${configurationId}`, window[`trendProxy${generatedId}`]);
+    });
+});