From 6a0953e6baf51d329e9bba0e94e6d87546d4fe33 Mon Sep 17 00:00:00 2001
From: Ross Edfort <rossedfort@gmail.com>
Date: Mon, 5 Dec 2022 10:30:59 -0700
Subject: [PATCH] DT-143 - batch cancel workflows on Recent Workflows page
 (#959)

* DT-143 - batch cancel

* fix cy tests

* use old batch api endpoints for versoins !> 2.9.0

* fix cy tests

* fix some layout issues

* change cancel single workflow to opt in

* remove extra th and fix filter indicator animation

Co-authored-by: Alex Tideman <alex.tideman@gmail.com>
---
 .../integration/workflow-bulk-actions.spec.js |  60 ++++---
 cypress/support/commands.js                   |   6 +-
 src/api.d.ts                                  |  16 +-
 src/lib/components/dropdown-menu.svelte       |   6 +-
 src/lib/components/workflow-actions.svelte    |   2 +-
 .../batch-operation-confirmation-modal.svelte |  80 +++++++++
 ...orkflows-summary-table-with-filters.svelte |  33 +++-
 .../holocene/table/bulk-action-button.svelte  |  15 +-
 src/lib/layouts/workflow-header.svelte        |   2 +-
 src/lib/layouts/workflow-run-layout.svelte    |   2 +-
 .../pages/workflows-with-new-search.svelte    | 170 ++++++++++--------
 ...{terminate-service.ts => batch-service.ts} | 111 ++++++++----
 src/lib/services/workflow-service.ts          |  30 +++-
 src/lib/utilities/route-for-api.ts            |   8 +
 .../[workflow]/[run]/__layout@root.svelte     |   2 +-
 .../[namespace]/workflows/index@root.svelte   |   5 +-
 16 files changed, 385 insertions(+), 163 deletions(-)
 create mode 100644 src/lib/components/workflow/batch-operation-confirmation-modal.svelte
 rename src/lib/services/{terminate-service.ts => batch-service.ts} (55%)

diff --git a/cypress/integration/workflow-bulk-actions.spec.js b/cypress/integration/workflow-bulk-actions.spec.js
index a6df3b795..e7c46a00b 100644
--- a/cypress/integration/workflow-bulk-actions.spec.js
+++ b/cypress/integration/workflow-bulk-actions.spec.js
@@ -1,20 +1,23 @@
 /// <reference types="cypress" />
 
-describe('Bulk Terminate', () => {
-  it("disallows bulk actions for cluster that doesn't have elasticsearch enabled", () => {
-    cy.interceptApi();
+describe('Batch and Bulk Workflow Actions', () => {
+  describe('when advanced visibility is disabled', () => {
+    it('disallows bulk and batch actions', () => {
+      cy.interceptApi();
 
-    cy.visit('/namespaces/default/workflows');
+      cy.visit('/namespaces/default/workflows');
 
-    cy.wait('@cluster-api');
-    cy.wait('@workflows-api');
+      cy.wait('@cluster-api');
+      cy.wait('@workflows-api');
 
-    cy.get('#workflows-table-with-bulk-actions').should('not.exist');
+      cy.get('#workflows-table-with-bulk-actions').should('not.exist');
+    });
   });
 
-  describe('for cluster that does have elasticsearch enabled', () => {
-    it('allows running workflows to be terminated by ID', () => {
+  describe('when advanced visibility is enabled', () => {
+    beforeEach(() => {
       cy.interceptApi();
+
       cy.intercept(Cypress.env('VITE_API_HOST') + '/api/v1/cluster*', {
         fixture: 'cluster-with-elasticsearch.json',
       }).as('cluster-api-elasticsearch');
@@ -23,39 +26,56 @@ describe('Bulk Terminate', () => {
 
       cy.wait('@cluster-api-elasticsearch');
       cy.wait('@workflows-api');
+    });
 
+    it('allows running workflows to be terminated by ID', () => {
       cy.get('#workflows-table-with-bulk-actions').should('exist');
 
       cy.get('#select-visible-workflows').click({ force: true });
       cy.get('[data-cy="bulk-terminate-button"]').click();
-      cy.get('#bulk-terminate-reason').type('Sarah Connor');
+      cy.get('#bulk-action-reason').type('Sarah Connor');
       cy.get('div.modal button.destructive').click();
       cy.get('#batch-terminate-success-toast');
     });
 
     it('allows running workflows to be terminated by a query', () => {
-      cy.interceptApi();
-      cy.intercept(Cypress.env('VITE_API_HOST') + '/api/v1/cluster*', {
-        fixture: 'cluster-with-elasticsearch.json',
-      }).as('cluster-api-elasticsearch');
+      cy.get('#workflows-table-with-bulk-actions').should('exist');
 
-      cy.visit('/namespaces/default/workflows');
+      cy.get('#select-visible-workflows').click({ force: true });
+      cy.get('[data-cy="select-all-workflows"]').click();
+      cy.get('[data-cy="bulk-terminate-button"]').click();
+      cy.get('[data-cy="batch-action-workflows-query"]').should(
+        'have.text',
+        'ExecutionStatus="Running"',
+      );
+      cy.get('#bulk-action-reason').type('Sarah Connor');
+      cy.get('div.modal button.destructive').click();
+      cy.get('#batch-terminate-success-toast');
+    });
 
-      cy.wait('@cluster-api-elasticsearch');
-      cy.wait('@workflows-api');
+    it('allows running workflows to be cancelled by ID', () => {
+      cy.get('#workflows-table-with-bulk-actions').should('exist');
+
+      cy.get('#select-visible-workflows').click({ force: true });
+      cy.get('[data-cy="bulk-cancel-button"]').click();
+      cy.get('#bulk-action-reason').type('Sarah Connor');
+      cy.get('div.modal button.destructive').click();
+      cy.get('#batch-cancel-success-toast');
+    });
 
+    it('allows running workflows to be cancelled by a query', () => {
       cy.get('#workflows-table-with-bulk-actions').should('exist');
 
       cy.get('#select-visible-workflows').click({ force: true });
       cy.get('[data-cy="select-all-workflows"]').click();
-      cy.get('[data-cy="bulk-terminate-button"]').click();
+      cy.get('[data-cy="bulk-cancel-button"]').click();
       cy.get('[data-cy="batch-action-workflows-query"]').should(
         'have.text',
         'ExecutionStatus="Running"',
       );
-      cy.get('#bulk-terminate-reason').type('Sarah Connor');
+      cy.get('#bulk-action-reason').type('Sarah Connor');
       cy.get('div.modal button.destructive').click();
-      cy.get('#batch-terminate-success-toast');
+      cy.get('#batch-cancel-success-toast');
     });
   });
 });
diff --git a/cypress/support/commands.js b/cypress/support/commands.js
index c6efff1e6..cf7194eb0 100644
--- a/cypress/support/commands.js
+++ b/cypress/support/commands.js
@@ -133,12 +133,12 @@ Cypress.Commands.add('interceptScheduleApi', () => {
   ).as('schedule-api');
 });
 
-Cypress.Commands.add('interceptBatchTerminateApi', () => {
+Cypress.Commands.add('interceptCreateBatchOperationApi', () => {
   cy.intercept(
     Cypress.env('VITE_API_HOST') +
       `/api/v1/namespaces/*/workflows/batch/terminate?`,
     { statusCode: 200, body: {} },
-  ).as('batch-terminate-api');
+  ).as('create-batch-operation-api');
 });
 
 Cypress.Commands.add('interceptDescribeBatchOperationApi', () => {
@@ -181,7 +181,7 @@ Cypress.Commands.add(
     cy.interceptSearchAttributesApi();
     cy.interceptSchedulesApi();
     cy.interceptScheduleApi();
-    cy.interceptBatchTerminateApi();
+    cy.interceptCreateBatchOperationApi();
     cy.interceptDescribeBatchOperationApi();
     cy.interceptTerminateWorkflowApi();
     cy.interceptCancelWorkflowApi();
diff --git a/src/api.d.ts b/src/api.d.ts
index 4134266a1..d1c42789b 100644
--- a/src/api.d.ts
+++ b/src/api.d.ts
@@ -1,9 +1,7 @@
 type WorkflowsAPIRoutePath =
   | 'workflows'
   | 'workflows.archived'
-  | 'workflows.count'
-  | 'workflows.batch.terminate'
-  | 'workflows.batch.describe';
+  | 'workflows.count';
 
 type WorkflowAPIRoutePath =
   | 'workflow'
@@ -13,6 +11,13 @@ type WorkflowAPIRoutePath =
   | 'events.descending'
   | 'query';
 
+type BatchAPIRoutePath =
+  | 'batch-operations'
+  | 'batch-operation.describe'
+  // TODO: Remove when new batch APIs are deployed
+  | 'workflows.batch.terminate'
+  | 'workflows.batch.describe';
+
 type NamespaceAPIRoutePath = 'namespace';
 
 type TaskQueueAPIRoutePath = 'task-queue';
@@ -29,7 +34,8 @@ type APIRoutePath =
   | TaskQueueAPIRoutePath
   | WorkflowAPIRoutePath
   | WorkflowsAPIRoutePath
-  | NamespaceAPIRoutePath;
+  | NamespaceAPIRoutePath
+  | BatchAPIRoutePath;
 
 type APIRouteParameters = {
   namespace: string;
@@ -49,6 +55,8 @@ type WorkflowRouteParameters = Pick<
   'namespace' | 'workflowId' | 'runId'
 >;
 
+type BatchRouteParameters = Pick<APIRouteParameters, 'namespace'>;
+
 type TaskQueueRouteParameters = Pick<APIRouteParameters, 'namespace' | 'queue'>;
 
 type ValidWorkflowEndpoints = WorkflowsAPIRoutePath;
diff --git a/src/lib/components/dropdown-menu.svelte b/src/lib/components/dropdown-menu.svelte
index b5586b3bf..6cc31efe5 100644
--- a/src/lib/components/dropdown-menu.svelte
+++ b/src/lib/components/dropdown-menu.svelte
@@ -86,11 +86,7 @@
       </div>
     {/if}
     {#if value}
-      <span
-        in:scale={{ duration: 200, start: 0.65 }}
-        out:scale={{ duration: 100, start: 0.65 }}
-        class="dot"
-      />
+      <span in:scale={{ duration: 200, start: 0.65 }} class="dot" />
     {/if}
   </div>
 </Tooltip>
diff --git a/src/lib/components/workflow-actions.svelte b/src/lib/components/workflow-actions.svelte
index e0e4da362..0d2147fa2 100644
--- a/src/lib/components/workflow-actions.svelte
+++ b/src/lib/components/workflow-actions.svelte
@@ -2,7 +2,7 @@
   import { tick } from 'svelte';
 
   import { refresh } from '$lib/stores/workflow-run';
-  import { terminateWorkflow } from '$lib/services/terminate-service';
+  import { terminateWorkflow } from '$lib/services/workflow-service';
   import { settings } from '$lib/stores/settings';
   import { writeActionsAreAllowed } from '$lib/utilities/write-actions-are-allowed';
 
diff --git a/src/lib/components/workflow/batch-operation-confirmation-modal.svelte b/src/lib/components/workflow/batch-operation-confirmation-modal.svelte
new file mode 100644
index 000000000..50b00718a
--- /dev/null
+++ b/src/lib/components/workflow/batch-operation-confirmation-modal.svelte
@@ -0,0 +1,80 @@
+<script lang="ts">
+  import { createEventDispatcher } from 'svelte';
+  import Modal from '$lib/holocene/modal.svelte';
+  import { pluralize } from '$lib/utilities/pluralize';
+  import Input from '$lib/holocene/input/input.svelte';
+  export let open: boolean;
+  export let action: 'Terminate' | 'Cancel';
+  export let loading: boolean;
+  export let allSelected: boolean;
+  export let actionableWorkflowsLength: number;
+  export let query: string;
+
+  const dispatch = createEventDispatcher<{
+    confirm: { reason: string };
+  }>();
+
+  let reason: string;
+
+  const handleConfirmModal = () => {
+    dispatch('confirm', { reason });
+    open = false;
+    reason = '';
+  };
+
+  const handleCancelModal = () => {
+    open = false;
+    reason = '';
+  };
+
+  $: confirmText = action === 'Cancel' ? 'Confirm' : action;
+</script>
+
+<Modal
+  {open}
+  confirmType="destructive"
+  confirmDisabled={reason === ''}
+  {confirmText}
+  {loading}
+  on:cancelModal={handleCancelModal}
+  on:confirmModal={handleConfirmModal}
+>
+  <h3 slot="title">{action} Workflows</h3>
+  <svelte:fragment slot="content">
+    <div class="mb-4 flex flex-col">
+      {#if allSelected}
+        <p class="mb-2">
+          Are you sure you want to {action.toLowerCase()} all worklfows matching
+          the following query? This action cannot be undone.
+        </p>
+        <div
+          class="mb-2 overflow-scroll whitespace-nowrap rounded border border-primary bg-gray-100 p-2"
+        >
+          <code data-cy="batch-action-workflows-query">
+            {query}
+          </code>
+        </div>
+        <span class="text-xs"
+          >Note: The actual count of workflows that will be affected is the
+          total number of running workflows matching this query at the time of
+          clicking "{confirmText}".</span
+        >
+      {:else}
+        <p class="mb-4">
+          Are you sure you want to {action.toLowerCase()}
+          <strong
+            >{actionableWorkflowsLength} running {pluralize(
+              'workflow',
+              actionableWorkflowsLength,
+            )}</strong
+          >?
+        </p>
+      {/if}
+    </div>
+    <Input
+      id="bulk-action-reason"
+      bind:value={reason}
+      placeholder="Enter a reason"
+    />
+  </svelte:fragment>
+</Modal>
diff --git a/src/lib/components/workflow/workflows-summary-table-with-filters.svelte b/src/lib/components/workflow/workflows-summary-table-with-filters.svelte
index 846145b8b..9e79a43a4 100644
--- a/src/lib/components/workflow/workflows-summary-table-with-filters.svelte
+++ b/src/lib/components/workflow/workflows-summary-table-with-filters.svelte
@@ -16,11 +16,13 @@
 
   const dispatch = createEventDispatcher<{
     terminateWorkflows: undefined;
+    cancelWorkflows: undefined;
     toggleAll: { checked: boolean };
     togglePage: { checked: boolean; visibleWorkflows: WorkflowExecution[] };
   }>();
 
   export let bulkActionsEnabled: boolean = false;
+  export let cancelEnabled: boolean = false;
   export let updating: boolean = false;
   export let visibleWorkflows: WorkflowExecution[];
   export let selectedWorkflowsCount: number;
@@ -35,6 +37,10 @@
     dispatch('terminateWorkflows');
   };
 
+  const handleBulkCancel = () => {
+    dispatch('cancelWorkflows');
+  };
+
   const handleSelectAll = (event: MouseEvent | KeyboardEvent) => {
     if (
       event instanceof MouseEvent ||
@@ -55,7 +61,7 @@
 
   let coreUser = coreUserStore();
 
-  $: terminateDisabled = $coreUser.namespaceWriteDisabled(
+  $: namespaceWriteDisabled = $coreUser.namespaceWriteDisabled(
     $page.params.namespace,
   );
 
@@ -107,18 +113,27 @@
               >)
             </span>
           {/if}
-          <BulkActionButton
-            class="ml-4"
-            dataCy="bulk-terminate-button"
-            disabled={terminateDisabled}
-            on:click={handleBulkTerminate}>Terminate</BulkActionButton
-          >
+          <div class="ml-4 inline-flex gap-2">
+            {#if cancelEnabled}
+              <BulkActionButton
+                dataCy="bulk-cancel-button"
+                disabled={namespaceWriteDisabled}
+                on:click={handleBulkCancel}
+                >Request Cancellation</BulkActionButton
+              >
+            {/if}
+            <BulkActionButton
+              variant="destructive"
+              dataCy="bulk-terminate-button"
+              disabled={namespaceWriteDisabled}
+              on:click={handleBulkTerminate}>Terminate</BulkActionButton
+            >
+          </div>
         </th>
         <th class="table-cell md:w-60 xl:w-auto" />
-        <th class="hidden md:table-cell md:w-60 xl:w-80" />
+        <th class="table-cell md:w-60 xl:w-80" />
         <th class="hidden xl:table-cell xl:w-60" />
         <th class="hidden xl:table-cell xl:w-60" />
-        <th class="table-cell md:hidden" />
       {:else}
         <th class="table-cell w-48"
           ><div class="flex items-center gap-1">
diff --git a/src/lib/holocene/table/bulk-action-button.svelte b/src/lib/holocene/table/bulk-action-button.svelte
index d6fd7cde2..ac296d2cc 100644
--- a/src/lib/holocene/table/bulk-action-button.svelte
+++ b/src/lib/holocene/table/bulk-action-button.svelte
@@ -1,20 +1,29 @@
 <script lang="ts">
   export let dataCy: string = null;
-  export let disabled: boolean = true;
+  export let disabled: boolean = false;
+  export let variant: 'primary' | 'destructive' = 'primary';
 </script>
 
 <button
   data-cy={dataCy}
   {disabled}
   on:click
-  class="bulk-action-button {$$props.class}"
+  class="bulk-action-button {variant} {$$props.class}"
 >
   <slot />
 </button>
 
 <style lang="postcss">
   .bulk-action-button {
-    @apply rounded border border-danger bg-danger px-2 py-1 leading-3 text-white hover:border-white hover:bg-blue-700;
+    @apply rounded border px-2 py-1 text-xs leading-3 text-white;
+  }
+
+  .bulk-action-button.primary {
+    @apply border-white bg-primary hover:bg-blue-700;
+  }
+
+  .bulk-action-button.destructive {
+    @apply border-danger bg-danger hover:border-white hover:bg-blue-700;
   }
 
   .bulk-action-button:disabled {
diff --git a/src/lib/layouts/workflow-header.svelte b/src/lib/layouts/workflow-header.svelte
index f1d0ce19f..7be978db4 100644
--- a/src/lib/layouts/workflow-header.svelte
+++ b/src/lib/layouts/workflow-header.svelte
@@ -31,7 +31,7 @@
   export let namespace: string;
   export let workflow: WorkflowExecution;
   export let workers: GetPollersResponse;
-  export let cancelEnabled: boolean = true;
+  export let cancelEnabled: boolean = false;
 
   let refreshInterval;
   const refreshRate = 15000;
diff --git a/src/lib/layouts/workflow-run-layout.svelte b/src/lib/layouts/workflow-run-layout.svelte
index b407bd66a..02faed6f8 100644
--- a/src/lib/layouts/workflow-run-layout.svelte
+++ b/src/lib/layouts/workflow-run-layout.svelte
@@ -9,7 +9,7 @@
   import { onDestroy, onMount } from 'svelte';
   import { eventFilterSort, EventSortOrder } from '$lib/stores/event-view';
 
-  export let cancelEnabled: boolean = true;
+  export let cancelEnabled: boolean = false;
 
   onMount(() => {
     const sort = $page.url.searchParams.get('sort');
diff --git a/src/lib/pages/workflows-with-new-search.svelte b/src/lib/pages/workflows-with-new-search.svelte
index 5aedfc3f5..2668a2754 100644
--- a/src/lib/pages/workflows-with-new-search.svelte
+++ b/src/lib/pages/workflows-with-new-search.svelte
@@ -28,24 +28,26 @@
   import WorkflowDateTimeFilter from '$lib/components/workflow/dropdown-filter/workflow-datetime-filter.svelte';
   import Loading from '$lib/holocene/loading.svelte';
   import {
+    batchCancelByQuery,
     batchTerminateByQuery,
-    bulkTerminateBySelection,
+    bulkCancelByIDs,
+    bulkTerminateByIDs,
     pollBatchOperation,
-  } from '$lib/services/terminate-service';
+  } from '$lib/services/batch-service';
   import { updateQueryParameters } from '$lib/utilities/update-query-parameters';
   import { toaster } from '$lib/holocene/toaster.svelte';
-  import Modal from '$lib/holocene/modal.svelte';
-  import Input from '$lib/holocene/input/input.svelte';
-  import { pluralize } from '$lib/utilities/pluralize';
+  import BatchOperationConfirmationModal from '$lib/components/workflow/batch-operation-confirmation-modal.svelte';
 
   export let bulkActionsEnabled: boolean = false;
+  export let cancelEnabled: boolean = false;
 
   let selectedWorkflows: { [index: string]: boolean } = {};
-  let reason: string = '';
-  let showBulkOperationConfirmationModal: boolean = false;
+  let showBatchTerminateConfirmationModal: boolean = false;
+  let showBatchCancelConfirmationModal: boolean = false;
   let allSelected: boolean = false;
   let pageSelected: boolean = false;
   let terminating: boolean = false;
+  let cancelling: boolean = false;
 
   $: query = $page.url.searchParams.get('query');
 
@@ -81,14 +83,16 @@
     $refresh = Date.now();
   };
 
-  const handleBulkTerminate = () => {
-    showBulkOperationConfirmationModal = true;
+  const handleBatchTerminate = () => {
+    showBatchTerminateConfirmationModal = true;
   };
 
-  const clearAfterTerminate = () => {
+  const handleBatchCancel = () => {
+    showBatchCancelConfirmationModal = true;
+  };
+
+  const resetPageToDefaultState = () => {
     terminating = false;
-    showBulkOperationConfirmationModal = false;
-    reason = '';
 
     $workflowFilters = [];
     $workflowSorts = [];
@@ -129,15 +133,17 @@
     );
   };
 
-  const terminateWorkflows = async () => {
+  const terminateWorkflows = async (event: CustomEvent<{ reason: string }>) => {
     const { namespace } = $page.params;
+    const { reason } = event.detail;
 
     if (allSelected) {
-      const query = !$workflowsQuery
-        ? 'ExecutionStatus="Running"'
-        : $workflowsQuery;
       // Idea: persist the job ID and display a progress indicator for large jobs
-      batchTerminateByQuery({ namespace, reason, query });
+      await batchTerminateByQuery({
+        namespace,
+        reason,
+        query: batchOperationQuery,
+      });
       toaster.push({
         message: 'The batch terminate request is processing in the background.',
         id: 'batch-terminate-success-toast',
@@ -145,7 +151,7 @@
     } else {
       terminating = true;
       try {
-        const jobId = await bulkTerminateBySelection({
+        const jobId = await bulkTerminateByIDs({
           namespace,
           reason,
           workflows: terminableWorkflows,
@@ -159,29 +165,74 @@
           id: 'batch-terminate-success-toast',
         });
       } catch (error) {
-        showBulkOperationConfirmationModal = false;
         toaster.push({
           variant: 'error',
           message: 'Unable to terminate workflows.',
         });
       }
     }
-
-    clearAfterTerminate();
+    showBatchTerminateConfirmationModal = false;
+    resetPageToDefaultState();
   };
 
-  const handleCancelBulkTerminateModal = () => {
-    showBulkOperationConfirmationModal = false;
-    reason = '';
+  const cancelWorkflows = async (event: CustomEvent<{ reason: string }>) => {
+    const { namespace } = $page.params;
+    const { reason } = event.detail;
+
+    if (allSelected) {
+      await batchCancelByQuery({
+        namespace,
+        reason,
+        query: batchOperationQuery,
+      });
+      toaster.push({
+        message: 'The batch cancel request is processing in the background.',
+        id: 'batch-cancel-success-toast',
+      });
+    } else {
+      cancelling = true;
+      try {
+        const jobId = await bulkCancelByIDs({
+          namespace,
+          reason,
+          workflows: cancelableWorkflows,
+        });
+        const workflowsCancelled = await pollBatchOperation({
+          namespace,
+          jobId,
+        });
+        toaster.push({
+          message: `Successfully cancelled ${workflowsCancelled} workflows.`,
+          id: 'batch-cancel-success-toast',
+        });
+      } catch {
+        toaster.push({
+          variant: 'error',
+          message: 'Unable to cancel workflows.',
+        });
+      }
+    }
+    showBatchCancelConfirmationModal = false;
+    resetPageToDefaultState();
   };
 
+  $: batchOperationQuery = !$workflowsQuery
+    ? 'ExecutionStatus="Running"'
+    : $workflowsQuery;
+
   $: terminableWorkflows = $workflows.filter(
     (workflow) => selectedWorkflows[workflow.runId] && workflow.canBeTerminated,
   );
 
+  $: cancelableWorkflows = $workflows.filter(
+    (workflow) =>
+      selectedWorkflows[workflow.runId] && workflow.status === 'Running',
+  );
+
   $: totalWorkflowCount = new Intl.NumberFormat('en-US').format(
     $workflowCount?.totalCount ?? 0,
   );
+
   $: filteredWorkflowCount = new Intl.NumberFormat('en-US').format(
     $workflowCount?.count ?? 0,
   );
@@ -196,53 +247,24 @@
   }
 </script>
 
-<Modal
-  open={showBulkOperationConfirmationModal}
-  confirmText="Terminate"
-  confirmType="destructive"
-  confirmDisabled={reason === ''}
+<BatchOperationConfirmationModal
+  action="Terminate"
+  bind:open={showBatchTerminateConfirmationModal}
   loading={terminating}
-  on:cancelModal={handleCancelBulkTerminateModal}
-  on:confirmModal={terminateWorkflows}
->
-  <h3 slot="title">Terminate Workflows</h3>
-  <svelte:fragment slot="content">
-    <div class="mb-4 flex flex-col">
-      {#if allSelected}
-        <p class="mb-2">
-          Are you sure you want to terminate all worklfows matching the
-          following query? This action cannot be undone.
-        </p>
-        <div
-          class="mb-2 overflow-scroll whitespace-nowrap rounded border border-primary bg-gray-100 p-2"
-        >
-          <code data-cy="batch-action-workflows-query">
-            {!$workflowsQuery ? 'ExecutionStatus="Running"' : $workflowsQuery}
-          </code>
-        </div>
-        <span class="text-xs"
-          >Note: The actual count of workflows that will be terminated is the
-          total number of running workflows matching this query at the time of
-          clicking “Terminate”.</span
-        >
-      {:else}
-        <p class="mb-4">
-          Are you sure you want to terminate <strong
-            >{terminableWorkflows.length} running {pluralize(
-              'workflow',
-              terminableWorkflows.length,
-            )}</strong
-          >?
-        </p>
-      {/if}
-    </div>
-    <Input
-      id="bulk-terminate-reason"
-      bind:value={reason}
-      placeholder="Enter a reason"
-    />
-  </svelte:fragment>
-</Modal>
+  {allSelected}
+  actionableWorkflowsLength={terminableWorkflows.length}
+  query={batchOperationQuery}
+  on:confirm={terminateWorkflows}
+/>
+<BatchOperationConfirmationModal
+  action="Cancel"
+  bind:open={showBatchCancelConfirmationModal}
+  loading={false}
+  {allSelected}
+  actionableWorkflowsLength={cancelableWorkflows.length}
+  query={batchOperationQuery}
+  on:confirm={cancelWorkflows}
+/>
 
 <div class="mb-2 flex justify-between">
   <div>
@@ -285,13 +307,15 @@
   </svelte:fragment>
   <WorkflowsSummaryTableWithFilters
     {bulkActionsEnabled}
+    {cancelEnabled}
     updating={$updating}
     visibleWorkflows={visibleItems}
     {selectedWorkflowsCount}
     filteredWorkflowCount={query ? filteredWorkflowCount : totalWorkflowCount}
     {allSelected}
     {pageSelected}
-    on:terminateWorkflows={handleBulkTerminate}
+    on:terminateWorkflows={handleBatchTerminate}
+    on:cancelWorkflows={handleBatchCancel}
     on:toggleAll={handleToggleAll}
     on:togglePage={handleTogglePage}
   >
@@ -307,8 +331,8 @@
       />
     {:else}
       <TableRow>
-        <td colspan="2" class="hidden xl:table-cell" />
-        <td colspan="3">
+        <td class="hidden xl:table-cell" />
+        <td colspan="4">
           {#if $loading}
             <Loading />
           {:else}
diff --git a/src/lib/services/terminate-service.ts b/src/lib/services/batch-service.ts
similarity index 55%
rename from src/lib/services/terminate-service.ts
rename to src/lib/services/batch-service.ts
index c3adc44be..20ca43071 100644
--- a/src/lib/services/terminate-service.ts
+++ b/src/lib/services/batch-service.ts
@@ -2,29 +2,9 @@ import { v4 as uuidv4 } from 'uuid';
 import { stringifyWithBigInt } from '$lib/utilities/parse-with-big-int';
 import { requestFromAPI } from '$lib/utilities/request-from-api';
 import { routeForApi } from '$lib/utilities/route-for-api';
-
-type TerminateWorkflowOptions = {
-  workflow: WorkflowExecution;
-  namespace: string;
-  reason: string;
-};
-
-export async function terminateWorkflow({
-  workflow,
-  namespace,
-  reason,
-}: TerminateWorkflowOptions): Promise<null> {
-  const route = await routeForApi('workflow.terminate', {
-    namespace,
-    workflowId: workflow.id,
-    runId: workflow.runId,
-  });
-  return await requestFromAPI<null>(route, {
-    options: { method: 'POST', body: stringifyWithBigInt({ reason }) },
-    shouldRetry: false,
-    notifyOnError: false,
-  });
-}
+import { uiVersion } from '$lib/stores/versions';
+import { get } from 'svelte/store';
+import { isVersionNewer } from '$lib/utilities/version-check';
 
 const queryFromWorkflows = (
   workflowExecutions: WorkflowExecution[],
@@ -40,42 +20,96 @@ const queryFromWorkflows = (
   }, '');
 };
 
-type BulkTerminateWorkflowOptions = {
+type CreateBatchOperationOptions = {
   namespace: string;
   reason: string;
 };
 
-type BatchTerminateWorkflowByQueryOptions = BulkTerminateWorkflowOptions & {
+type CreateBatchOperationWithQueryOptions = CreateBatchOperationOptions & {
   query: string;
 };
 
-type BulkTerminateWorkflowBySelectionOptions = BulkTerminateWorkflowOptions & {
+type CreateBatchOperationWithIDsOptions = CreateBatchOperationOptions & {
   workflows: WorkflowExecution[];
 };
 
-export async function bulkTerminateBySelection({
+type DescribeBatchOperationOptions = {
+  jobId: string;
+  namespace: string;
+};
+
+export async function bulkTerminateByIDs({
   namespace,
   reason,
   workflows,
-}: BulkTerminateWorkflowBySelectionOptions) {
-  const query = queryFromWorkflows(workflows);
-  return terminateWorkflows(namespace, query, reason);
+}: CreateBatchOperationWithIDsOptions) {
+  return terminateWorkflows(namespace, queryFromWorkflows(workflows), reason);
 }
 
 export async function batchTerminateByQuery({
   namespace,
   query,
   reason,
-}: BatchTerminateWorkflowByQueryOptions) {
+}: CreateBatchOperationWithQueryOptions) {
   return terminateWorkflows(namespace, query, reason);
 }
 
+export async function bulkCancelByIDs({
+  namespace,
+  workflows,
+  reason,
+}: CreateBatchOperationWithIDsOptions): Promise<string> {
+  return cancelWorkflows(namespace, queryFromWorkflows(workflows), reason);
+}
+
+export async function batchCancelByQuery({
+  namespace,
+  query,
+  reason,
+}: CreateBatchOperationWithQueryOptions) {
+  return cancelWorkflows(namespace, query, reason);
+}
+
+async function cancelWorkflows(
+  namespace: string,
+  query: string,
+  reason: string,
+): Promise<string> {
+  const version = get(uiVersion);
+  const routeId = isVersionNewer(version, '2.9.0')
+    ? 'batch-operations'
+    : 'workflows.batch.terminate';
+  const route = await routeForApi(routeId, { namespace });
+  const jobId = uuidv4();
+
+  await requestFromAPI<null>(route, {
+    options: {
+      method: 'POST',
+      body: stringifyWithBigInt({
+        jobId,
+        namespace,
+        visibilityQuery: query,
+        reason,
+        cancellationOperation: {},
+      }),
+    },
+    shouldRetry: false,
+    notifyOnError: false,
+  });
+
+  return jobId;
+}
+
 async function terminateWorkflows(
   namespace: string,
   query: string,
   reason: string,
 ): Promise<string> {
-  const route = await routeForApi('workflows.batch.terminate', { namespace });
+  const version = get(uiVersion);
+  const routeId = isVersionNewer(version, '2.9.0')
+    ? 'batch-operations'
+    : 'workflows.batch.terminate';
+  const route = await routeForApi(routeId, { namespace });
   const jobId = uuidv4();
 
   await requestFromAPI<null>(route, {
@@ -96,11 +130,6 @@ async function terminateWorkflows(
   return jobId;
 }
 
-type DescribeBatchOperationOptions = {
-  jobId: string;
-  namespace: string;
-};
-
 export async function pollBatchOperation({
   namespace,
   jobId,
@@ -130,7 +159,13 @@ async function describeBatchOperation({
   jobId,
   namespace,
 }: DescribeBatchOperationOptions): Promise<BatchOperationInfo> {
-  const route = await routeForApi('workflows.batch.describe', { namespace });
+  const version = get(uiVersion);
+  const routeId = isVersionNewer(version, '2.9.0')
+    ? 'batch-operation.describe'
+    : 'workflows.batch.describe';
+  const route = await routeForApi(routeId, {
+    namespace,
+  });
 
   return requestFromAPI<BatchOperationInfo>(route, {
     params: { jobId },
diff --git a/src/lib/services/workflow-service.ts b/src/lib/services/workflow-service.ts
index abfa0f13a..399718c25 100644
--- a/src/lib/services/workflow-service.ts
+++ b/src/lib/services/workflow-service.ts
@@ -14,6 +14,7 @@ import {
   isUnauthorized,
 } from '$lib/utilities/handle-error';
 import { noop } from 'svelte/internal';
+import { stringifyWithBigInt } from '$lib/utilities/parse-with-big-int';
 
 export type GetWorkflowExecutionRequest = NamespaceScopedRequest & {
   workflowId: string;
@@ -32,6 +33,12 @@ type CancelWorkflowExecutionParameters = {
   runId: string;
 };
 
+type TerminateWorkflowOptions = {
+  workflow: WorkflowExecution;
+  namespace: string;
+  reason: string;
+};
+
 export type FetchWorkflow =
   | typeof fetchAllWorkflows
   | typeof fetchAllArchivedWorkflows;
@@ -171,10 +178,27 @@ export async function fetchWorkflow(
   return requestFromAPI(route, { request }).then(toWorkflowExecution);
 }
 
-export const cancelWorkflow = async (
+export async function terminateWorkflow({
+  workflow,
+  namespace,
+  reason,
+}: TerminateWorkflowOptions): Promise<null> {
+  const route = await routeForApi('workflow.terminate', {
+    namespace,
+    workflowId: workflow.id,
+    runId: workflow.runId,
+  });
+  return await requestFromAPI<null>(route, {
+    options: { method: 'POST', body: stringifyWithBigInt({ reason }) },
+    shouldRetry: false,
+    notifyOnError: false,
+  });
+}
+
+export async function cancelWorkflow(
   { namespace, workflowId, runId }: CancelWorkflowExecutionParameters,
   request = fetch,
-) => {
+) {
   const route = await routeForApi('workflow.cancel', {
     namespace,
     workflowId,
@@ -188,7 +212,7 @@ export const cancelWorkflow = async (
       method: 'POST',
     },
   });
-};
+}
 
 export async function fetchWorkflowForSchedule(
   parameters: GetWorkflowExecutionRequest,
diff --git a/src/lib/utilities/route-for-api.ts b/src/lib/utilities/route-for-api.ts
index e2397ccb1..c1a0186e4 100644
--- a/src/lib/utilities/route-for-api.ts
+++ b/src/lib/utilities/route-for-api.ts
@@ -74,6 +74,11 @@ export function routeForApi(
   parameters: WorkflowRouteParameters,
   shouldEncode?: boolean,
 ): Promise<string>;
+export function routeForApi(
+  route: BatchAPIRoutePath,
+  parameters: BatchRouteParameters,
+  shouldEncode?: boolean,
+): Promise<string>;
 export function routeForApi(
   route: ScheduleAPIRoutePath,
   parameters: ScheduleRouteParameters,
@@ -114,6 +119,9 @@ export function routeForApi(
     'workflows.archived': `/namespaces/${parameters?.namespace}/workflows/archived`,
     workflows: `/namespaces/${parameters?.namespace}/workflows`,
     'workflows.count': `/namespaces/${parameters?.namespace}/workflows/count`,
+    'batch-operations': `/namespaces/${parameters.namespace}/batch-operations`,
+    'batch-operation.describe': `/namespaces/${parameters.namespace}/batch-operations/describe`,
+    // TODO: Remove when new batch APIs are deployed
     'workflows.batch.terminate': `/namespaces/${parameters.namespace}/workflows/batch/terminate`,
     'workflows.batch.describe': `/namespaces/${parameters.namespace}/workflows/batch/describe`,
   };
diff --git a/src/routes/namespaces/[namespace]/workflows/[workflow]/[run]/__layout@root.svelte b/src/routes/namespaces/[namespace]/workflows/[workflow]/[run]/__layout@root.svelte
index 26a772fbe..4578173e3 100644
--- a/src/routes/namespaces/[namespace]/workflows/[workflow]/[run]/__layout@root.svelte
+++ b/src/routes/namespaces/[namespace]/workflows/[workflow]/[run]/__layout@root.svelte
@@ -8,6 +8,6 @@
   });
 </script>
 
-<WorkflowRunLayout>
+<WorkflowRunLayout cancelEnabled>
   <slot />
 </WorkflowRunLayout>
diff --git a/src/routes/namespaces/[namespace]/workflows/index@root.svelte b/src/routes/namespaces/[namespace]/workflows/index@root.svelte
index 5511fa1ef..0e5eb10bf 100644
--- a/src/routes/namespaces/[namespace]/workflows/index@root.svelte
+++ b/src/routes/namespaces/[namespace]/workflows/index@root.svelte
@@ -15,6 +15,9 @@
 />
 
 <AdvancedVisibilityGuard>
-  <WorkflowsWithNewSearch bulkActionsEnabled={$supportsBulkActions} />
+  <WorkflowsWithNewSearch
+    bulkActionsEnabled={$supportsBulkActions}
+    cancelEnabled
+  />
   <Workflows slot="fallback" />
 </AdvancedVisibilityGuard>