From 7316cdd19e42ba0128f25e8761d402dfcd142a6c Mon Sep 17 00:00:00 2001
From: shlomomdahan <64103471+shlomomdahan@users.noreply.github.com>
Date: Sun, 3 Nov 2024 17:01:40 -0500
Subject: [PATCH 1/4] extract inline script bpp.jelly

---
 .../buildpipeline/BuildPipelineView/bpp.jelly | 55 ++++++++----------
 .../BuildPipelineView/build-pipeline-init.js  | 56 +++++++++++++++++++
 src/main/webapp/js/build-pipeline.js          |  2 +-
 3 files changed, 80 insertions(+), 33 deletions(-)
 create mode 100644 src/main/resources/au/com/centrumsystems/hudson/plugin/buildpipeline/BuildPipelineView/build-pipeline-init.js

diff --git a/src/main/resources/au/com/centrumsystems/hudson/plugin/buildpipeline/BuildPipelineView/bpp.jelly b/src/main/resources/au/com/centrumsystems/hudson/plugin/buildpipeline/BuildPipelineView/bpp.jelly
index f349bfc8..e7b1ea91 100644
--- a/src/main/resources/au/com/centrumsystems/hudson/plugin/buildpipeline/BuildPipelineView/bpp.jelly
+++ b/src/main/resources/au/com/centrumsystems/hudson/plugin/buildpipeline/BuildPipelineView/bpp.jelly
@@ -19,24 +19,26 @@
     <script src="${rootURL}/plugin/build-pipeline-plugin/js/jquery.tooltip.min.js"></script>
     <script src="${rootURL}/plugin/build-pipeline-plugin/js/build-pipeline.js"></script>
 
-<script id="build-card-template" type="text/x-handlebars-template">
+<span id="build-card-template" type="text/x-handlebars-template" style="display: none">
     <st:include page="buildCardTemplate.jelly"
                 from="${from.getBuildCard()}"
                 it="${from}"/>
-</script>
+</span>
 
-<script id="project-card-template" type="text/x-handlebars-template">
+<span id="project-card-template" type="text/x-handlebars-template" style="display: none">
     <st:include page="projectCardTemplate.jelly"
                 from="${from.getColumnHeaders()}"
                 it="${from}" />
-</script>
+</span>
 
     <st:bind var="buildPipelineViewProxy" value="${from}" />
-    <script type="text/javascript">
-        var buildCardTemplateSource = jQuery("#build-card-template").html();
-        var projectCardTemplateSource = jQuery("#project-card-template").html();
-        var buildPipeline = new BuildPipeline(buildPipelineViewProxy, Handlebars.compile(buildCardTemplateSource), Handlebars.compile(projectCardTemplateSource), ${from.getRefreshFrequencyInMillis()});
-    </script>
+    <span class="pipeline-refresh-frequency" data-refresh-frequency="${from.getRefreshFrequencyInMillis()}" style="display: none"/>
+    <st:adjunct includes="au.com.centrumsystems.hudson.plugin.buildpipeline.BuildPipelineView.build-pipeline-init"/>
+<!--    <script type="text/javascript">-->
+<!--        var buildCardTemplateSource = jQuery("#build-card-template").html();-->
+<!--        var projectCardTemplateSource = jQuery("#project-card-template").html();-->
+<!--        var buildPipeline = new BuildPipeline(buildPipelineViewProxy, Handlebars.compile(buildCardTemplateSource), Handlebars.compile(projectCardTemplateSource), ${from.getRefreshFrequencyInMillis()});-->
+<!--    </script>-->
 
     <st:include page="buildCardHelpers.jelly"
                 from="${from.getBuildCard()}"
@@ -131,29 +133,18 @@
                                 <j:forEach begin="${0}" end="${buildPipelineForm.getGridWidth() - 1}" indexVar="y">
                                     <j:set var="build" type="au.com.centrumsystems.hudson.plugin.buildpipeline.BuildForm" value="${buildGrid.get(x,y)}" />
                                     <j:if test="${build != null}">
-                                        <td id="build-${build.getId()}"></td>
-                                        <script>
-                                            // generate build-card
-                                            var buildData = ${build.asJSON()};
-                                            jQuery("#build-${build.getId()}").append(buildPipeline.buildCardTemplate(buildData));
-                                            // add build proxy to proxies for future use
-                                            buildPipeline.buildProxies[${build.getId()}] = <st:bind value="${build}" />;
-                                            <j:if test="${build.getStatus() == 'BUILDING'}">
-                                                buildPipeline.showProgress(${build.getId()}, ${build.getDependencyIds()});
-                                            </j:if>
-                                            <j:if test="${build.getStatus() == 'PENDING'}">
-                                                jQuery("#pipelines").bind("show-status-${build.getId()}", function() {
-                                                <j:choose>
-                                                    <j:when test="${build.isManualTrigger()}">
-                                                        buildPipeline.updateBuildCard(${build.getId()});
-                                                    </j:when>
-                                                    <j:otherwise>
-                                                        buildPipeline.updateNextBuildAndShowProgress(${build.getId()}, ${build.getNextBuildNumber()}, ${build.getDependencyIds()});
-                                                    </j:otherwise>
-                                                </j:choose>
-                                                });
-                                            </j:if>
-                                        </script>
+                                        <td id="build-${build.getId()}">
+                                            <j:set var="buildDataJson" value="${build.asJSON()}" />
+                                            <div class="build-data"
+                                                 data-build-id="${build.getId()}"
+                                                 data-build-info="${buildDataJson}"
+                                                 data-build-status="${build.getStatus()}"
+                                                 data-is-manual-trigger="${build.isManualTrigger()}"
+                                                 data-next-build-number="${build.getNextBuildNumber()}"
+                                                 data-dependency-ids="${build.getDependencyIds()}">
+                                            </div>
+                                            <st:bind var="buildProxy_${build.getId()}" value="${build}" />
+                                        </td>
                                         <j:if test="${(y + 1 != buildPipelineForm.getGridWidth())}">
                                             <!-- Changing length to size() to get rid of arrows when there are no more child jobs.-->
                                         <td class="next">
diff --git a/src/main/resources/au/com/centrumsystems/hudson/plugin/buildpipeline/BuildPipelineView/build-pipeline-init.js b/src/main/resources/au/com/centrumsystems/hudson/plugin/buildpipeline/BuildPipelineView/build-pipeline-init.js
new file mode 100644
index 00000000..aa785481
--- /dev/null
+++ b/src/main/resources/au/com/centrumsystems/hudson/plugin/buildpipeline/BuildPipelineView/build-pipeline-init.js
@@ -0,0 +1,56 @@
+const buildCardTemplateSource = jQuery("#build-card-template").html();
+const projectCardTemplateSource = jQuery("#project-card-template").html();
+const refreshFrequency = parseInt(document.querySelector(".pipeline-refresh-frequency").dataset.refreshFrequency, 10);
+
+var buildPipeline = new BuildPipeline(
+buildPipelineViewProxy,
+Handlebars.compile(buildCardTemplateSource),
+Handlebars.compile(projectCardTemplateSource),
+refreshFrequency
+);
+
+
+function initializeBuildCards() {
+    // Find all build data elements
+    document.querySelectorAll('.build-data').forEach(buildElement => {
+
+        const buildId = buildElement.dataset.buildId;
+        const buildData = JSON.parse(buildElement.dataset.buildInfo);
+        const buildStatus = buildElement.dataset.buildStatus;
+        const isManualTrigger = buildElement.dataset.isManualTrigger === 'true';
+        const nextBuildNumber = parseInt(buildElement.dataset.nextBuildNumber, 10);
+        console.log(nextBuildNumber);
+        const dependencyIds = buildElement.dataset.dependencyIds
+            .split(',')
+            .filter(Boolean)
+            .map(id => parseInt(id, 10));
+
+
+        // Generate build card
+        jQuery(buildElement).append(buildPipeline.buildCardTemplate(buildData));
+
+        // add build proxy to proxies for future use-->
+        buildPipeline.buildProxies[buildId] = window[`buildProxy_${buildId}`];
+
+        if (buildStatus === 'BUILDING') {
+            buildPipeline.showProgress(buildId, dependencyIds, nextBuildNumber);
+        }
+
+        if (buildStatus === 'PENDING') {
+            jQuery("table.pipelines").on(`show-status-${buildId}`, function() {
+                if (isManualTrigger) {
+                    buildPipeline.updateBuildCard(buildId);
+                } else {
+                    buildPipeline.updateNextBuildAndShowProgress(
+                        buildId,
+                        nextBuildNumber,
+                        dependencyIds
+                    );
+                }
+            });
+        }
+
+    });
+}
+
+document.addEventListener('DOMContentLoaded', initializeBuildCards);
\ No newline at end of file
diff --git a/src/main/webapp/js/build-pipeline.js b/src/main/webapp/js/build-pipeline.js
index 6ce69423..3d650c9d 100644
--- a/src/main/webapp/js/build-pipeline.js
+++ b/src/main/webapp/js/build-pipeline.js
@@ -26,7 +26,7 @@ BuildPipeline.prototype = {
                         buildPipeline.updateAllBuildCards(dependencies);
                         // trigger all dependency tracking
                         jQuery.each(dependencies, function(){
-                            jQuery("#pipelines").trigger("show-status-" + this);
+                            jQuery("table.pipelines").trigger("show-status-" + this);
                         });
                     }
                 });

From 86b17503e71710c2a0aa8f7127909f7c291ec839 Mon Sep 17 00:00:00 2001
From: shlomomdahan <64103471+shlomomdahan@users.noreply.github.com>
Date: Sun, 3 Nov 2024 17:04:09 -0500
Subject: [PATCH 2/4] extract inline script bpp.jelly

---
 .../hudson/plugin/buildpipeline/BuildPipelineView/bpp.jelly  | 5 -----
 .../buildpipeline/BuildPipelineView/build-pipeline-init.js   | 2 +-
 2 files changed, 1 insertion(+), 6 deletions(-)

diff --git a/src/main/resources/au/com/centrumsystems/hudson/plugin/buildpipeline/BuildPipelineView/bpp.jelly b/src/main/resources/au/com/centrumsystems/hudson/plugin/buildpipeline/BuildPipelineView/bpp.jelly
index e7b1ea91..267e61ee 100644
--- a/src/main/resources/au/com/centrumsystems/hudson/plugin/buildpipeline/BuildPipelineView/bpp.jelly
+++ b/src/main/resources/au/com/centrumsystems/hudson/plugin/buildpipeline/BuildPipelineView/bpp.jelly
@@ -34,11 +34,6 @@
     <st:bind var="buildPipelineViewProxy" value="${from}" />
     <span class="pipeline-refresh-frequency" data-refresh-frequency="${from.getRefreshFrequencyInMillis()}" style="display: none"/>
     <st:adjunct includes="au.com.centrumsystems.hudson.plugin.buildpipeline.BuildPipelineView.build-pipeline-init"/>
-<!--    <script type="text/javascript">-->
-<!--        var buildCardTemplateSource = jQuery("#build-card-template").html();-->
-<!--        var projectCardTemplateSource = jQuery("#project-card-template").html();-->
-<!--        var buildPipeline = new BuildPipeline(buildPipelineViewProxy, Handlebars.compile(buildCardTemplateSource), Handlebars.compile(projectCardTemplateSource), ${from.getRefreshFrequencyInMillis()});-->
-<!--    </script>-->
 
     <st:include page="buildCardHelpers.jelly"
                 from="${from.getBuildCard()}"
diff --git a/src/main/resources/au/com/centrumsystems/hudson/plugin/buildpipeline/BuildPipelineView/build-pipeline-init.js b/src/main/resources/au/com/centrumsystems/hudson/plugin/buildpipeline/BuildPipelineView/build-pipeline-init.js
index aa785481..734d2cf1 100644
--- a/src/main/resources/au/com/centrumsystems/hudson/plugin/buildpipeline/BuildPipelineView/build-pipeline-init.js
+++ b/src/main/resources/au/com/centrumsystems/hudson/plugin/buildpipeline/BuildPipelineView/build-pipeline-init.js
@@ -53,4 +53,4 @@ function initializeBuildCards() {
     });
 }
 
-document.addEventListener('DOMContentLoaded', initializeBuildCards);
\ No newline at end of file
+document.addEventListener('DOMContentLoaded', initializeBuildCards);

From 5dab85111a114e1d8314aee728a088beeda5b4ee Mon Sep 17 00:00:00 2001
From: shlomomdahan <64103471+shlomomdahan@users.noreply.github.com>
Date: Mon, 4 Nov 2024 16:48:30 -0500
Subject: [PATCH 3/4] fix existing functionality - extract JS

---
 .../buildpipeline/BuildPipelineView/bpp.jelly   |  5 ++---
 .../BuildPipelineView/build-pipeline-init.js    | 17 ++++++-----------
 2 files changed, 8 insertions(+), 14 deletions(-)

diff --git a/src/main/resources/au/com/centrumsystems/hudson/plugin/buildpipeline/BuildPipelineView/bpp.jelly b/src/main/resources/au/com/centrumsystems/hudson/plugin/buildpipeline/BuildPipelineView/bpp.jelly
index 267e61ee..f3e42b9e 100644
--- a/src/main/resources/au/com/centrumsystems/hudson/plugin/buildpipeline/BuildPipelineView/bpp.jelly
+++ b/src/main/resources/au/com/centrumsystems/hudson/plugin/buildpipeline/BuildPipelineView/bpp.jelly
@@ -130,14 +130,13 @@
                                     <j:if test="${build != null}">
                                         <td id="build-${build.getId()}">
                                             <j:set var="buildDataJson" value="${build.asJSON()}" />
-                                            <div class="build-data"
+                                            <span class="build-data"
                                                  data-build-id="${build.getId()}"
                                                  data-build-info="${buildDataJson}"
                                                  data-build-status="${build.getStatus()}"
                                                  data-is-manual-trigger="${build.isManualTrigger()}"
                                                  data-next-build-number="${build.getNextBuildNumber()}"
-                                                 data-dependency-ids="${build.getDependencyIds()}">
-                                            </div>
+                                                 data-dependency-ids="${build.getDependencyIds()}"/>
                                             <st:bind var="buildProxy_${build.getId()}" value="${build}" />
                                         </td>
                                         <j:if test="${(y + 1 != buildPipelineForm.getGridWidth())}">
diff --git a/src/main/resources/au/com/centrumsystems/hudson/plugin/buildpipeline/BuildPipelineView/build-pipeline-init.js b/src/main/resources/au/com/centrumsystems/hudson/plugin/buildpipeline/BuildPipelineView/build-pipeline-init.js
index 734d2cf1..268da39b 100644
--- a/src/main/resources/au/com/centrumsystems/hudson/plugin/buildpipeline/BuildPipelineView/build-pipeline-init.js
+++ b/src/main/resources/au/com/centrumsystems/hudson/plugin/buildpipeline/BuildPipelineView/build-pipeline-init.js
@@ -3,10 +3,10 @@ const projectCardTemplateSource = jQuery("#project-card-template").html();
 const refreshFrequency = parseInt(document.querySelector(".pipeline-refresh-frequency").dataset.refreshFrequency, 10);
 
 var buildPipeline = new BuildPipeline(
-buildPipelineViewProxy,
-Handlebars.compile(buildCardTemplateSource),
-Handlebars.compile(projectCardTemplateSource),
-refreshFrequency
+    buildPipelineViewProxy,
+    Handlebars.compile(buildCardTemplateSource),
+    Handlebars.compile(projectCardTemplateSource),
+    refreshFrequency
 );
 
 
@@ -19,12 +19,7 @@ function initializeBuildCards() {
         const buildStatus = buildElement.dataset.buildStatus;
         const isManualTrigger = buildElement.dataset.isManualTrigger === 'true';
         const nextBuildNumber = parseInt(buildElement.dataset.nextBuildNumber, 10);
-        console.log(nextBuildNumber);
-        const dependencyIds = buildElement.dataset.dependencyIds
-            .split(',')
-            .filter(Boolean)
-            .map(id => parseInt(id, 10));
-
+        const dependencyIds = JSON.parse(buildElement.dataset.dependencyIds);
 
         // Generate build card
         jQuery(buildElement).append(buildPipeline.buildCardTemplate(buildData));
@@ -33,7 +28,7 @@ function initializeBuildCards() {
         buildPipeline.buildProxies[buildId] = window[`buildProxy_${buildId}`];
 
         if (buildStatus === 'BUILDING') {
-            buildPipeline.showProgress(buildId, dependencyIds, nextBuildNumber);
+            buildPipeline.showProgress(buildId, dependencyIds);
         }
 
         if (buildStatus === 'PENDING') {

From 08c66cab0458dc5693da6db178c99140823e64f8 Mon Sep 17 00:00:00 2001
From: shlomomdahan <64103471+shlomomdahan@users.noreply.github.com>
Date: Mon, 4 Nov 2024 16:49:30 -0500
Subject: [PATCH 4/4] fix existing functionality - extract JS

---
 .../buildpipeline/BuildPipelineView/build-pipeline-init.js       | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/main/resources/au/com/centrumsystems/hudson/plugin/buildpipeline/BuildPipelineView/build-pipeline-init.js b/src/main/resources/au/com/centrumsystems/hudson/plugin/buildpipeline/BuildPipelineView/build-pipeline-init.js
index 268da39b..2987cde3 100644
--- a/src/main/resources/au/com/centrumsystems/hudson/plugin/buildpipeline/BuildPipelineView/build-pipeline-init.js
+++ b/src/main/resources/au/com/centrumsystems/hudson/plugin/buildpipeline/BuildPipelineView/build-pipeline-init.js
@@ -11,7 +11,6 @@ var buildPipeline = new BuildPipeline(
 
 
 function initializeBuildCards() {
-    // Find all build data elements
     document.querySelectorAll('.build-data').forEach(buildElement => {
 
         const buildId = buildElement.dataset.buildId;