Add cancel button to pipeline overview (jenkinsci#766)

Co-authored-by: Tim Jacomb <21194782+timja@users.noreply.github.com>
Co-authored-by: Tim Jacomb <timjacomb1@gmail.com>

Author: stuartrowe

pom.xml

@@ -111,6 +111,11 @@
       <version>1.52.0</version>
       <scope>test</scope>
     </dependency>
+    <dependency>
+      <groupId>io.jenkins.configuration-as-code</groupId>
+      <artifactId>test-harness</artifactId>
+      <scope>test</scope>
+    </dependency>
     <dependency>
       <groupId>org.awaitility</groupId>
       <artifactId>awaitility</artifactId>

src/main/java/io/jenkins/plugins/pipelinegraphview/utils/AbstractPipelineViewAction.java

@@ -8,8 +8,10 @@
 import hudson.model.BallColor;
 import hudson.model.Item;
 import hudson.model.Queue;
+import hudson.model.Result;
 import hudson.security.Permission;
 import hudson.util.HttpResponses;
+import io.jenkins.plugins.pipelinegraphview.Messages;
 import java.io.IOException;
 import java.util.concurrent.ExecutionException;
 import java.util.concurrent.TimeoutException;
@@ -41,10 +43,18 @@ public boolean isBuildable() {
         return run.getParent().isBuildable();
     }
 
+    public boolean isBuildInProgress() {
+        return run.isBuilding();
+    }
+
     public Permission getPermission() {
         return run.getParent().BUILD;
     }
 
+    public Permission getCancelPermission() {
+        return Item.CANCEL;
+    }
+
     public Permission getConfigurePermission() {
         return run.getParent().CONFIGURE;
     }
@@ -53,6 +63,10 @@ public String getBuildDisplayName() {
         return run.getDisplayName();
     }
 
+    public String getBuildFullDisplayName() {
+        return run.getFullDisplayName();
+    }
+
     /**
      * Handles the rebuild request using ReplayAction feature
      */
@@ -73,6 +87,27 @@ public boolean doRebuild() throws IOException, ExecutionException {
         return false;
     }
 
+    /**
+     * Handles the cancel request.
+     */
+    @RequirePOST
+    @JavaScriptMethod
+    public HttpResponse doCancel() throws IOException, ExecutionException {
+        if (run != null) {
+            run.checkPermission(getCancelPermission());
+            if (run.isBuilding()) {
+                run.doStop();
+                return HttpResponses.okJSON();
+            } else {
+                String message = Result.ABORTED.equals(run.getResult())
+                        ? Messages.run_alreadyCancelled()
+                        : Messages.run_isFinished();
+                return HttpResponses.errorJSON(message);
+            }
+        }
+        return HttpResponses.errorJSON("No run to cancel");
+    }
+
     public String getFullBuildDisplayName() {
         return run.getFullDisplayName();
     }

src/main/resources/io/jenkins/plugins/pipelinegraphview/Messages.properties

@@ -28,3 +28,6 @@ cause.user=Manually run by {0}
 
 FlowNodeWrapper.parallel=Parallel
 FlowNodeWrapper.noStage=System Generated
+
+run.alreadyCancelled=Run was already cancelled
+run.isFinished=Run is already finished

src/main/resources/io/jenkins/plugins/pipelinegraphview/consoleview/PipelineConsoleViewAction/index.jelly

@@ -8,6 +8,18 @@
             <j:out value="${h.generateConsoleAnnotationScriptAndStylesheet()}"/>
 
             <j:set var="controls">
+                <j:if test="${it.buildInProgress}">
+                    <l:hasPermission permission="${it.cancelPermission}">
+                        <j:set var="proxyId" value="${h.generateId()}" />
+                        <st:bind value="${it}" var="cancelAction${proxyId}"/>
+                        <button id="pgv-cancel" data-confirm="${%Confirm(it.buildFullDisplayName)}"
+                                data-proxy-name="cancelAction${proxyId}"
+                                class="jenkins-button jenkins-!-error-color">
+                            <l:icon src="symbol-stop-circle-outline plugin-ionicons-api"/>
+                            ${%Cancel}
+                        </button>
+                    </l:hasPermission>
+                </j:if>
                 <j:if test="${it.buildable}">
                     <l:hasPermission permission="${it.permission}">
                         <j:set var="proxyId" value="${h.generateId()}" />

src/main/resources/io/jenkins/plugins/pipelinegraphview/consoleview/PipelineConsoleViewAction/index.properties

@@ -0,0 +1,2 @@
+Cancel=Cancel
+Confirm=Are you sure you want to abort {0}?

src/main/webapp/js/build.js

@@ -12,3 +12,48 @@ if (rebuildButton) {
     });
   })
 }
+
+const cancelButton = document.getElementById('pgv-cancel');
+
+if (cancelButton) {
+  cancelButton.addEventListener('click', event => {
+    event.preventDefault();
+    const question = cancelButton.getAttribute("data-confirm");
+    const execute = function () {
+      const cancelAction = window[`${cancelButton.dataset.proxyName}`];
+      cancelAction.doCancel();
+    };
+
+    if (question != null) {
+      /*eslint-disable no-undef*/
+      dialog.confirm(question).then(() => {
+        execute();
+        return null;
+      }).catch((error) => {
+        console.error("Error in cancel confirm dialog:", error);
+      })
+    } else {
+      execute();
+    }
+
+    function updateCancelButton() {
+      const buildCaption = document.querySelector(".jenkins-build-caption");
+      const url = buildCaption.dataset.statusUrl;
+      fetch(url).then((rsp) => {
+        if (rsp.ok) {
+          const isBuilding = rsp.headers.get("X-Building");
+          if (isBuilding === "true") {
+            setTimeout(updateCancelButton, 5000);
+          } else {
+            cancelButton.style.display = "none";
+          }
+        }
+        return null;
+      })
+      .catch((error) => {
+        console.error("Error fetching build caption statsus:", error);
+      })
+    }
+    setTimeout(updateCancelButton, 5000);
+  })
+}

src/test/java/io/jenkins/plugins/pipelinegraphview/PipelineGraphViewCancelTest.java

@@ -0,0 +1,36 @@
+package io.jenkins.plugins.pipelinegraphview;
+
+import com.microsoft.playwright.Page;
+import com.microsoft.playwright.junit.UsePlaywright;
+import hudson.model.Result;
+import io.jenkins.plugins.casc.misc.ConfiguredWithCode;
+import io.jenkins.plugins.casc.misc.JenkinsConfiguredWithCodeRule;
+import io.jenkins.plugins.casc.misc.junit.jupiter.WithJenkinsConfiguredWithCode;
+import io.jenkins.plugins.pipelinegraphview.playwright.PipelineJobPage;
+import io.jenkins.plugins.pipelinegraphview.playwright.PlaywrightConfig;
+import io.jenkins.plugins.pipelinegraphview.utils.TestUtils;
+import org.jenkinsci.plugins.workflow.job.WorkflowRun;
+import org.jenkinsci.plugins.workflow.test.steps.SemaphoreStep;
+import org.junit.jupiter.api.Test;
+
+@WithJenkinsConfiguredWithCode
+@UsePlaywright(PlaywrightConfig.class)
+class PipelineGraphViewCancelTest {
+
+    @Test
+    @ConfiguredWithCode("configure-appearance.yml")
+    void cancelButtonCancelsBuild(Page p, JenkinsConfiguredWithCodeRule j) throws Exception {
+        WorkflowRun run = TestUtils.createAndRunJobNoWait(j, "indefiniteWait", "indefiniteWait.jenkinsfile")
+                .waitForStart();
+        SemaphoreStep.waitForStart("wait/1", run);
+        new PipelineJobPage(p, run.getParent())
+                .goTo()
+                .hasBuilds(1)
+                .nthBuild(0)
+                .goToBuild()
+                .goToPipelineOverview()
+                .cancel();
+        SemaphoreStep.success("wait/1", null);
+        j.assertBuildStatus(Result.ABORTED, j.waitForCompletion(run));
+    }
+}

src/test/java/io/jenkins/plugins/pipelinegraphview/playwright/PipelineOverviewPage.java

@@ -132,4 +132,11 @@ public PipelineOverviewPage stageIsVisibleInTree(String stage) {
         tree.stageIsVisible(stage);
         return this;
     }
+
+    public PipelineOverviewPage cancel() {
+        page.click("#pgv-cancel");
+        page.getByRole(AriaRole.BUTTON, new Page.GetByRoleOptions().setName("Yes"))
+                .click();
+        return this;
+    }
 }

src/test/resources/io/jenkins/plugins/pipelinegraphview/configure-appearance.yml

@@ -0,0 +1,7 @@
+appearance:
+  consoleUrlProvider:
+    providers:
+      - "pipelineGraphView"
+  pipelineGraphView:
+    showGraphOnBuildPage: true
+    showGraphOnJobPage: true

src/test/resources/io/jenkins/plugins/pipelinegraphview/utils/indefiniteWait.jenkinsfile

@@ -0,0 +1,10 @@
+pipeline {
+    agent any
+    stages {
+        stage('Wait') {
+            steps {
+                semaphore 'wait'
+            }
+        }
+    }
+}