DRAFT FOR TESTING - CSP TICKETS

src/main/java/au/com/centrumsystems/hudson/plugin/util/ProjectUtil.java

@@ -105,7 +105,7 @@ public static boolean isManualTrigger(final AbstractProject<?, ?> upstreamProjec
                     final String manualDownstreamProjects = ((BuildPipelineTrigger) upstreamPub).getDownstreamProjectNames();
                     final String[] downstreamProjs = manualDownstreamProjects.split(",");
                     for (final String nextProj : downstreamProjs) {
-                        if (Jenkins.getInstance().getItem(nextProj.trim(), upstreamProject) == downstreamProject) {
+                        if (Jenkins.getInstance().getItem(nextProj.trim(), upstreamProject).getName().equals(downstreamProject.getName())) {
                             manualTrigger = true;
                             break;
                         }

src/main/resources/au/com/centrumsystems/hudson/plugin/buildpipeline/BuildPipelineView/bpp-trigger-pipeline.js

@@ -0,0 +1,13 @@
+Behaviour.specify(".bpp-trigger-pipeline-parameterized", 'BuildPipelineView.TriggerPipelineParameterized', 0, function(element) {
+    element.addEventListener('click', function() {
+        const href = element.dataset.fillDialogHref;
+        const title = element.dataset.fillDialogTitle;
+        buildPipeline.fillDialog(href, title);
+    });
+});
+
+Behaviour.specify("#trigger-pipeline-button", 'BuildPipelineView.TriggerPipeline', 0, function(element) {
+    element.addEventListener('click', function(e) {
+        document.getElementById('triggerPipelineForm').submit();
+    });
+});

src/main/resources/au/com/centrumsystems/hudson/plugin/buildpipeline/BuildPipelineView/bpp.jelly

@@ -12,31 +12,30 @@
     </j:if>
 
     <st:adjunct includes="io.jenkins.plugins.jquery3"/>
+    <st:adjunct includes="au.com.centrumsystems.hudson.plugin.buildpipeline.extension.BuildCardExtension.build-card-template-onclicks"/>
+    <st:adjunct includes="au.com.centrumsystems.hudson.plugin.buildpipeline.BuildPipelineView.bpp-trigger-pipeline"/>
     <script src="${rootURL}/plugin/build-pipeline-plugin/js/jquery-migrate-1.2.1.min.js"></script>
     <script type="text/javascript" src="${rootURL}/plugin/build-pipeline-plugin/js/jquery-ui-1.8.14.custom.min.js"></script>
     <script type="text/javascript" src="${rootURL}/plugin/build-pipeline-plugin/js/handlebars-1.0.0.beta.6.js"></script>
     <script src="${rootURL}/plugin/build-pipeline-plugin/js/jquery.fancybox-1.3.4.js"></script>
     <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"/>
 
     <st:include page="buildCardHelpers.jelly"
                 from="${from.getBuildCard()}"
@@ -62,13 +61,13 @@
         <j:if test="${hasBuildPermission}">
             <div class="icon-container">
             <j:if test="${from.isProjectParameterized()}">
-                <span class="pointer" onclick="buildPipeline.fillDialog('${app.rootUrl}${from.gridBuilder.firstJobLink}/build?delay=0sec', 'Starts the pipeline with parameters')">
+                <span class="bpp-trigger-pipeline-parameterized pointer" data-fill-dialog-href="${app.rootUrl}${from.gridBuilder.firstJobLink}/build?delay=0sec" data-fill-dialog-title="Starts the pipeline with parameters">
                     <l:icon src="icon-clock icon-md" alt="Trigger a Pipeline" />
                                 <span>Run</span>
                 </span>
             </j:if>
             <j:if test="${!from.isProjectParameterized()}">
-              <a id="trigger-pipeline-button" href='#' onclick="document.getElementById('triggerPipelineForm').submit()">
+              <a id="trigger-pipeline-button" href='#'>
                 <l:icon src="icon-clock icon-md" alt="Trigger a Pipeline" />
                                 <span>Run</span>
               </a>
@@ -131,29 +130,17 @@
                                 <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()}" />
+                                            <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()}"/>
+                                            <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">

src/main/resources/au/com/centrumsystems/hudson/plugin/buildpipeline/BuildPipelineView/build-pipeline-init.js

@@ -0,0 +1,47 @@
+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() {
+    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);
+        const dependencyIds = JSON.parse(buildElement.dataset.dependencyIds);
+
+        // 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);
+        }
+
+        jQuery("table.pipelines").on(`show-status-${buildId}`, function() {
+            if (isManualTrigger) {
+                buildPipeline.updateBuildCard(buildId);
+            } else {
+                buildPipeline.updateNextBuildAndShowProgress(
+                    buildId,
+                    nextBuildNumber,
+                    dependencyIds
+                );
+            }
+        });
+    });
+}
+
+document.addEventListener('DOMContentLoaded', initializeBuildCards);

src/main/resources/au/com/centrumsystems/hudson/plugin/buildpipeline/BuildPipelineView/toggle-build-details.js

@@ -1,4 +1,3 @@
-// show/hide build details
 jQuery(document).ready(function() {
     jQuery(".header").click(function() {
         var parent = jQuery(this).parent();

src/main/resources/au/com/centrumsystems/hudson/plugin/buildpipeline/extension/AbstractNameValueHeader/build-parameters-tooltip.js

@@ -0,0 +1,6 @@
+const buildId = document.querySelector('.pipeline-info .revision .title').dataset.buildId;
+jQuery('#build-parameters-trigger-' + buildId).tooltip({
+    bodyHandler: function() {
+        return jQuery('#build-parameters-' + buildId).html();
+    },
+});

src/main/resources/au/com/centrumsystems/hudson/plugin/buildpipeline/extension/AbstractNameValueHeader/rowHeader.jelly

@@ -8,7 +8,7 @@
 
     <div class="pipeline-info">
         <div class="revision rounded">
-            <div class="title">Pipeline ${buildGrid.get(0,0).getRevision()}</div>
+            <div class="title" data-build-id="${buildGrid.get(0,0).getId()}" id="build-parameters-trigger-${buildGrid.get(0,0).getId()}">Pipeline ${buildGrid.get(0,0).getRevision()}</div>
             <j:choose>
                 <j:when test="${buildGrid.get(0,0).getParameters().isEmpty()}">
                     <div class="description">No parameters</div>
@@ -21,13 +21,7 @@
                             </j:forEach>
                         </ul>
                     </div>
-                    <script>
-                        jQuery('#build-parameters-trigger-${buildGrid.get(0,0).getId()}').tooltip({
-                            bodyHandler: function() {
-                                return jQuery('#build-parameters-${buildGrid.get(0,0).getId()}').html();
-                            }
-                        });
-                    </script>
+                    <st:adjunct includes="au.com.centrumsystems.hudson.plugin.buildpipeline.extension.AbstractNameValueHeader.build-parameters-tooltip"/>
                 </j:otherwise>
             </j:choose>
         </div>

src/main/resources/au/com/centrumsystems/hudson/plugin/buildpipeline/extension/BuildCardExtension/build-card-template-onclicks.js

@@ -0,0 +1,91 @@
+function parseDataAttributes(container) {
+    return {
+        id: parseInt(container.dataset.showSpinnerId, 10),
+        buildExtId: container.dataset.rerunBuildExtId,
+        dependencyIds: container.dataset.rerunBuildDependencyIds
+            .split(",")
+            .filter(Boolean)
+            .map(id => parseInt(id, 10))
+    };
+}
+
+function parseTriggerAttributes(container) {
+    return {
+        id: parseInt(container.dataset.showSpinnerId, 10),
+        upstreamProjectName: container.dataset.upstreamProjectName,
+        upstreamBuildNumber: parseInt(container.dataset.upstreamBuildNumber, 10),
+        projectName: container.dataset.projectName,
+        dependencyIds: container.dataset.dependencyIds
+            .split(",")
+            .filter(Boolean)
+            .map(id => parseInt(id, 10))
+    };
+}
+
+function handleDialogClick(dataContainer) {
+    const href = dataContainer.dataset.fillDialogHref;
+    const title = dataContainer.dataset.fillDialogTitle;
+    buildPipeline.fillDialog(href, title);
+}
+
+function handleRerunClick(dataContainer) {
+    const { id, buildExtId, dependencyIds } = parseDataAttributes(dataContainer);
+    buildPipeline.showSpinner(id);
+    buildPipeline.rerunBuild(id, buildExtId, dependencyIds);
+}
+
+function handleTriggerBuild(dataContainer) {
+    const { id, upstreamProjectName, upstreamBuildNumber, projectName, dependencyIds } = parseTriggerAttributes(dataContainer);
+    buildPipeline.showSpinner(id);
+    buildPipeline.triggerBuild(id, upstreamProjectName, upstreamBuildNumber, projectName, dependencyIds);
+}
+
+function createClickHandler(parentElement, targetSelector, handlerFn) {
+    const newHandler = function(event) {
+        const clickTarget = event.target.closest(targetSelector);
+        if (!clickTarget || !parentElement.contains(clickTarget)) return;
+
+        handlerFn(clickTarget);
+    };
+
+    parentElement.addEventListener("click", newHandler);
+}
+
+const onclickElements = {
+    ".bct-progress-bar-onclick": {
+        handler: handleDialogClick
+    },
+    ".bct-console-icon-onclick": {
+        handler: handleDialogClick
+    },
+    ".bct-rerun-successful-build-onclick": {
+        handler: handleRerunClick
+    },
+    ".bct-rerun-failed-latest-build-onclick": {
+        handler: handleRerunClick
+    },
+    ".bct-rerun-failed-manual-build-onclick": {
+        handler: handleTriggerBuild
+    },
+    ".bct-rerun-failed-build-onclick": {
+        handler: handleRerunClick
+    },
+    ".bct-trigger-manual-build-latest-onclick": {
+        handler: handleTriggerBuild
+    },
+    ".bct-trigger-manual-build-onclick": {
+        handler: handleTriggerBuild
+    }
+};
+
+document.addEventListener("DOMContentLoaded", function () {
+    const pipelineWrappers = document.querySelectorAll(".pipeline-wrapper");
+
+    if (!pipelineWrappers.length) return;
+
+    pipelineWrappers.forEach(wrapper => {
+        Object.entries(onclickElements).forEach(function([selector, { handler }]) {
+            createClickHandler(wrapper, selector, handler);
+        });
+    });
+});