DT-152 - batch terminate (#952)

* Add advanced visibility check for new workflows page

* Fix some calendar issues, rip out bulk from old workflows page

* Add filter on row for workflowId

* Fix timepicker with better UI

* Add button instead of divs, use outside-click on date picker

* batch terminate

- refactor workflows summary table not to use SelectableTable
- implement BATCH terminate eg. select ALL all

* Change label to Start and End

* Fix Back to Workflows query logic for new filters to keep query

* Clear time filter on advanced search filter
clear

* Remove unused imports

* fix copy on toasts and confirmation modal.
also make toasts primary

* fix modal styling
revert changes to table css (so selectable tables still can be used)

* WIP

* clear reason on modal close

* Fix AM/PM with errors, add back cypress tests

* Fix bulk actions test

* Fix back to workflows query for basic

* Fix cypress tests

* Add isCloud check to supportsAdvancedVisibility

* fix/add cy tests

* Add ability to input a custom date

* Capitalize ID

* fix nav back to workflows retaining query
change wf sort limit to 1MM
format wf count numbers consistently

* fix whitespace in modal content

Co-authored-by: Alex Tideman <[email protected]>

Author: rossedfort

Diff for: cypress/integration/workflow-bulk-actions.spec.js

@@ -1,6 +1,6 @@
 /// <reference types="cypress" />
 
-describe('Bulk Termination', () => {
+describe('Bulk Terminate', () => {
   it("disallows bulk actions for cluster that doesn't have elasticsearch enabled", () => {
     cy.interceptApi();
 
@@ -12,23 +12,50 @@ describe('Bulk Termination', () => {
     cy.get('#workflows-table-with-bulk-actions').should('not.exist');
   });
 
-  it('allows running workflows to be terminated for cluster that does have elasticsearch enabled', () => {
-    cy.interceptApi();
-    cy.intercept(Cypress.env('VITE_API_HOST') + '/api/v1/cluster*', {
-      fixture: 'cluster-with-elasticsearch.json',
-    }).as('cluster-api-elasticsearch');
-
-    cy.visit('/namespaces/default/workflows');
-
-    cy.wait('@cluster-api-elasticsearch');
-    cy.wait('@workflows-api');
-
-    cy.get('#workflows-table-with-bulk-actions').should('exist');
-
-    cy.get('th.selectable > label.checkbox > span.label').click();
-    cy.get('[data-cy="bulk-terminate-button"]').click();
-    cy.get('#bulk-terminate-reason').type('Sarah Connor');
-    cy.get('div.modal button.destructive').click();
-    cy.get('#batch-terminate-success-toast');
+  describe('for cluster that does have elasticsearch enabled', () => {
+    it('allows running workflows to be terminated by ID', () => {
+      cy.interceptApi();
+      cy.intercept(Cypress.env('VITE_API_HOST') + '/api/v1/cluster*', {
+        fixture: 'cluster-with-elasticsearch.json',
+      }).as('cluster-api-elasticsearch');
+
+      cy.visit('/namespaces/default/workflows');
+
+      cy.wait('@cluster-api-elasticsearch');
+      cy.wait('@workflows-api');
+
+      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('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.visit('/namespaces/default/workflows');
+
+      cy.wait('@cluster-api-elasticsearch');
+      cy.wait('@workflows-api');
+
+      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="batch-action-workflows-query"]').should(
+        'have.text',
+        'ExecutionStatus="Running"',
+      );
+      cy.get('#bulk-terminate-reason').type('Sarah Connor');
+      cy.get('div.modal button.destructive').click();
+      cy.get('#batch-terminate-success-toast');
+    });
   });
 });

Diff for: cypress/integration/workflow-executions-with-new-search.spec.js

@@ -35,7 +35,7 @@ describe('Workflow Executions List With Search', () => {
       cy.get('#workflowType').should('have.value', 'ImportantWorkflowType');
 
       cy.get('[data-cy="workflow-count"]').should(
-        'contain',
+        'have.text',
         'Results 15 of 15 workflows',
       );
     });
@@ -55,7 +55,7 @@ describe('Workflow Executions List With Search', () => {
       );
 
       cy.get('[data-cy="workflow-count"]').should(
-        'contain',
+        'have.text',
         'Results 15 of 15 workflows',
       );
 
@@ -78,7 +78,7 @@ describe('Workflow Executions List With Search', () => {
         'WorkflowId="002c98_Running"',
       );
       cy.get('[data-cy="workflow-count"]').should(
-        'contain',
+        'have.text',
         'Results 15 of 15 workflows',
       );
 
@@ -100,7 +100,7 @@ describe('Workflow Executions List With Search', () => {
         'ExecutionStatus="Running"',
       );
       cy.get('[data-cy="workflow-count"]').should(
-        'contain',
+        'have.text',
         'Results 15 of 15 workflows',
       );
     });
@@ -157,7 +157,7 @@ describe('Workflow Executions List With Search', () => {
 
       cy.url().should('contain', 'StartTime+BETWEEN');
       cy.get('[data-cy="workflow-count"]').should(
-        'contain',
+        'have.text',
         'Results 15 of 15 workflows',
       );
     });
@@ -169,7 +169,7 @@ describe('Workflow Executions List With Search', () => {
 
       cy.url().should('contain', 'CloseTime+BETWEEN');
       cy.get('[data-cy="workflow-count"]').should(
-        'contain',
+        'have.text',
         'Results 15 of 15 workflows',
       );
     });
@@ -213,7 +213,7 @@ describe('Workflow Executions List With Search', () => {
           encodeURIComponent(`ExecutionStatus="Running"`),
         );
         cy.get('[data-cy="workflow-count"]').should(
-          'contain',
+          'have.text',
           'Results 15 of 15 workflows',
         );
       });

Diff for: src/lib/components/workflow/workflow-advanced-search.svelte

@@ -9,6 +9,7 @@
   import Button from '$lib/holocene/button.svelte';
   import { workflowFilters, workflowSorts } from '$lib/stores/filters';
   import { toListWorkflowFilters } from '$lib/utilities/query/to-list-workflow-filters';
+  import { workflowsQuery } from '$lib/stores/workflows';
 
   let manualSearchString = '';
 
@@ -26,6 +27,7 @@
     if (!manualSearchString) {
       $workflowFilters = [];
       $workflowSorts = [];
+      $workflowsQuery = '';
     } else {
       try {
         $workflowFilters = toListWorkflowFilters(manualSearchString);

Diff for: src/lib/components/workflow/workflows-summary-row-with-filters.svelte

@@ -1,26 +1,29 @@
 <script lang="ts">
   import { page } from '$app/stores';
+  import { createEventDispatcher } from 'svelte';
 
   import { formatDate } from '$lib/utilities/format-date';
   import { getMilliseconds } from '$lib/utilities/format-time';
-  import {
-    routeForEventHistory,
-    routeForWorkflow,
-  } from '$lib/utilities/route-for';
+  import { routeForEventHistory } from '$lib/utilities/route-for';
 
   import WorkflowStatus from '$lib/components/workflow-status.svelte';
   import FilterOrCopyButtons from '$holocene/filter-or-copy-buttons.svelte';
   import TableRow from '$holocene/table/table-row.svelte';
   import { workflowFilters, workflowSorts } from '$lib/stores/filters';
   import { updateQueryParamsFromFilter } from '$lib/utilities/query/to-list-workflow-filters';
-  import SelectableTableRow from '$lib/holocene/table/selectable-table-row.svelte';
+  import Checkbox from '$lib/holocene/checkbox.svelte';
   import { eventViewType } from '$lib/stores/event-view';
 
+  const dispatch = createEventDispatcher<{
+    toggleWorkflow: { workflowRunId: string; checked: boolean };
+  }>();
+
   export let bulkActionsEnabled: boolean = false;
   export let selected: boolean = false;
   export let namespace: string;
   export let workflow: WorkflowExecution;
   export let timeFormat: TimeFormat | string;
+  export let checkboxDisabled: boolean;
 
   $: href = routeForEventHistory({
     view: $eventViewType,
@@ -54,15 +57,27 @@
 
     updateQueryParamsFromFilter($page.url, $workflowFilters, $workflowSorts);
   };
+
+  const handleCheckboxChange = (event: CustomEvent<{ checked: boolean }>) => {
+    dispatch('toggleWorkflow', {
+      workflowRunId: workflow.runId,
+      checked: event.detail.checked,
+    });
+  };
 </script>
 
-<svelte:component
-  this={bulkActionsEnabled ? SelectableTableRow : TableRow}
-  item={workflow}
-  {selected}
-  {href}
-  class="workflow-summary-row"
->
+<TableRow {href} class="workflow-summary-row">
+  {#if bulkActionsEnabled}
+    <td on:keypress|stopPropagation on:click|stopPropagation>
+      <div class="absolute">
+        <Checkbox
+          disabled={checkboxDisabled}
+          bind:checked={selected}
+          on:change={handleCheckboxChange}
+        />
+      </div>
+    </td>
+  {/if}
   <td>
     <WorkflowStatus
       status={workflow.status}
@@ -128,7 +143,7 @@
       {formatDate(workflow.endTime, timeFormat)}
     </p>
   </td>
-</svelte:component>
+</TableRow>
 
 <style lang="postcss">
   :global(.workflow-summary-row:hover) {