enable and production-ize bulk termination (#936)

* re-enable batch termination

* close pagination loophole

* handle perPage params that aren't included in options

* get rid of obsolete tests

* add cy test for bulk terminate happy path

* add store/guard for bulk actions

* fix test

* fix bulk terminate for small screens

* add test for clusters that don't support advanced vis

* fix test descriptions

Author: rossedfort

Diff for: cypress/fixtures/batch-operation-status.json

@@ -0,0 +1,12 @@
+{
+  "operationType": "Terminate",
+  "jobId": "6216d7c6-c987-4b27-a854-3bb9c72b3bbb",
+  "state": "Completed",
+  "startTime": "2022-11-01T00:00:00.000000000Z",
+  "closeTime": "2022-11-01T00:00:00.000000000Z",
+  "totalOperationCount": "10",
+  "completeOperationCount": "10",
+  "failureOperationCount": "0",
+  "identity": "",
+  "reason": ""
+}

Diff for: cypress/fixtures/cluster-with-elasticsearch.json

@@ -0,0 +1,37 @@
+{
+  "supportedClients": {
+    "temporal-cli": "\u003c2.0.0",
+    "temporal-go": "\u003c2.0.0",
+    "temporal-java": "\u003c2.0.0",
+    "temporal-php": "\u003c2.0.0",
+    "temporal-server": "\u003c2.0.0",
+    "temporal-typescript": "\u003c2.0.0",
+    "temporal-ui": "\u003c3.0.0"
+  },
+  "serverVersion": "1.18.4",
+  "clusterId": "17235226-f862-4d2a-a809-898c52dc8ab4",
+  "versionInfo": {
+    "current": {
+      "version": "1.18.4",
+      "releaseTime": "2022-10-31T22:14:46Z",
+      "notes": ""
+    },
+    "recommended": {
+      "version": "1.18.4",
+      "releaseTime": "2022-10-31T22:14:46Z",
+      "notes": ""
+    },
+    "instructions": "",
+    "alerts": [
+      {
+        "message": "🪐 A new release is available!",
+        "severity": "Low"
+      }
+    ],
+    "lastUpdateTime": "2022-11-09T22:29:04.612659335Z"
+  },
+  "clusterName": "active",
+  "historyShardCount": 4,
+  "persistenceStore": "postgres",
+  "visibilityStore": "postgres,elasticsearch"
+}

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

@@ -0,0 +1,34 @@
+/// <reference types="cypress" />
+
+describe('Bulk Termination', () => {
+  it("disallows bulk actions for cluster that doesn't have elasticsearch enabled", () => {
+    cy.interceptApi();
+
+    cy.visit('/namespaces/default/workflows');
+
+    cy.wait('@workflows-api');
+    cy.wait('@cluster-api');
+
+    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('@workflows-api');
+    cy.wait('@cluster-api-elasticsearch');
+
+    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');
+  });
+});

Diff for: cypress/support/commands.js

@@ -133,6 +133,22 @@ Cypress.Commands.add('interceptScheduleApi', () => {
   ).as('schedule-api');
 });
 
+Cypress.Commands.add('interceptBatchTerminateApi', () => {
+  cy.intercept(
+    Cypress.env('VITE_API_HOST') +
+      `/api/v1/namespaces/*/workflows/batch/terminate?`,
+    { statusCode: 200, body: {} },
+  ).as('batch-terminate-api');
+});
+
+Cypress.Commands.add('interceptDescribeBatchOperationApi', () => {
+  cy.intercept(
+    Cypress.env('VITE_API_HOST') +
+      `/api/v1/namespaces/*/workflows/batch/describe?jobId=*`,
+    { fixture: 'batch-operation-status.json' },
+  ).as('describe-batch-operation-api');
+});
+
 Cypress.Commands.add(
   'interceptApi',
   ({ namespace, archived } = { namespace: 'default', archived: false }) => {
@@ -149,5 +165,7 @@ Cypress.Commands.add(
     cy.interceptSearchAttributesApi();
     cy.interceptSchedulesApi();
     cy.interceptScheduleApi();
+    cy.interceptBatchTerminateApi();
+    cy.interceptDescribeBatchOperationApi();
   },
 );

Diff for: src/lib/components/workflow/workflows-summary-table.svelte

@@ -26,6 +26,7 @@
 
 {#if bulkActionsEnabled}
   <SelectableTable
+    id="workflows-table-with-bulk-actions"
     class="w-full md:table-fixed"
     bind:allSelected
     bind:selectedItems={selectedWorkflows}
@@ -41,12 +42,13 @@
       <th class="table-cell md:hidden" colspan="3">Summary</th>
     </svelte:fragment>
     <svelte:fragment slot="bulk-action-headers">
-      <th class="hidden w-32 md:table-cell">
+      <th class="inline-block w-32 md:table-cell">
         <span class="font-semibold">{selectedWorkflows.length} selected</span>
       </th>
-      <th class="hidden h-10 md:table-cell md:w-60 xl:w-auto">
+      <th class="h-10 md:w-60 xl:w-auto">
         {#if terminableWorkflowCount > 0}
           <BulkActionButton
+            dataCy="bulk-terminate-button"
             disabled={terminateDisabled}
             on:click={handleBulkTerminate}>Terminate</BulkActionButton
           >

Diff for: src/lib/holocene/api-pagination.svelte

@@ -5,7 +5,7 @@
   import SkeletonTable from '$lib/holocene/skeleton/table.svelte';
 
   import { createPaginationStore } from '$lib/stores/api-pagination';
-  import { perPageOptions } from '$lib/stores/pagination';
+  import { options } from '$lib/stores/pagination';
 
   type T = $$Generic;
   type PaginatedRequest = (
@@ -101,7 +101,7 @@
           label="Per Page"
           parameter={$store.key}
           value={String($store.pageSize)}
-          options={perPageOptions($store.pageSize)}
+          {options}
         />
         <div class="flex items-center justify-center gap-1">
           <button
@@ -142,7 +142,7 @@
           label="Per Page"
           parameter={$store.key}
           value={String($store.pageSize)}
-          options={perPageOptions($store.pageSize)}
+          {options}
         />
         <div class="flex items-center justify-center gap-1">
           <button

Diff for: src/lib/holocene/pagination.svelte

@@ -2,9 +2,11 @@
   import { onMount } from 'svelte';
   import { page } from '$app/stores';
   import {
+    MAX_PAGE_SIZE,
     pagination,
     perPageFromSearchParameter,
-    perPageOptions,
+    options,
+    defaultItemsPerPage,
   } from '$lib/stores/pagination';
   import { updateQueryParameters } from '$lib/utilities/update-query-parameters';
   import FilterSelect from '$lib/holocene/select/filter-select.svelte';
@@ -22,6 +24,22 @@
   $: perPage = String(
     perPageFromSearchParameter($page.url.searchParams.get(perPageKey)),
   ).toString();
+
+  $: {
+    if (parseInt(perPage, 10) > parseInt(MAX_PAGE_SIZE, 10)) {
+      updateQueryParameters({
+        parameter: perPageKey,
+        value: MAX_PAGE_SIZE,
+        url: $page.url,
+      });
+    } else if (!options.includes(perPage)) {
+      updateQueryParameters({
+        parameter: perPageKey,
+        value: defaultItemsPerPage,
+        url: $page.url,
+      });
+    }
+  }
   $: store = pagination(items, perPage, startingIndex);
   $: currentPage =
     $page.url.searchParams.get(currentPageKey) ?? $store.currentPage;
@@ -70,7 +88,7 @@
         label="Per Page"
         parameter={perPageKey}
         value={perPage}
-        options={perPageOptions(perPage)}
+        {options}
       />
       <div class="flex items-center justify-center gap-1">
         <button
@@ -112,8 +130,8 @@
       <FilterSelect
         label="Per Page"
         parameter={perPageKey}
-        value={String(perPage)}
-        options={perPageOptions(perPage)}
+        value={perPage}
+        {options}
       />
       <div class="flex items-center justify-center gap-1">
         <button

Diff for: src/lib/holocene/table/bulk-action-button.svelte

@@ -1,8 +1,9 @@
 <script lang="ts">
+  export let dataCy: string = null;
   export let disabled: boolean = true;
 </script>
 
-<button {disabled} on:click class="bulk-action-button">
+<button data-cy={dataCy} {disabled} on:click class="bulk-action-button">
   <slot />
 </button>
 

Diff for: src/lib/holocene/table/selectable-table.svelte

@@ -22,12 +22,14 @@
     allSelected?: boolean;
     checkboxLabel?: string;
     class?: string;
+    id?: string;
   }
 
   export let items: Item[];
   export let checkboxLabel: string = null;
   export let allSelected: boolean = false;
   export let selectedItems: Item[] = [];
+  export let id: string = null;
 
   const handleSelectAll = (event: CustomEvent<{ checked: boolean }>) => {
     allSelected = !allSelected;
@@ -58,7 +60,7 @@
   });
 </script>
 
-<Table variant="fancy" class={$$props.class} {...$$props}>
+<Table variant="fancy" {id} class={$$props.class} {...$$props}>
   <TableHeaderRow
     slot="headers"
     selectable

Diff for: src/lib/holocene/table/table-header-row.svelte

@@ -11,6 +11,7 @@
   <th class:selectable>
     {#if selectable}
       <Checkbox
+        id="selectable-table-check-all"
         onDark
         bind:checked={selected}
         {indeterminate}

Diff for: src/lib/holocene/table/table.svelte

@@ -3,9 +3,10 @@
 
   export let variant: 'simple' | 'fancy' = 'fancy';
   export let updating = false;
+  export let id: string = null;
 </script>
 
-<table class="{variant} {$$props.class}">
+<table class="{variant} {$$props.class}" {id}>
   <thead>
     <slot name="headers" />
     {#if updating}

Diff for: src/lib/holocene/toaster.svelte

@@ -63,6 +63,7 @@
 <div class="absolute top-4 right-4 z-50 flex flex-col items-end gap-2">
   {#each $toasts as { message, variant, id: key } (key)}
     <article
+      id={key}
       class="flex grow-0 items-center justify-between gap-4 rounded py-3 px-4 shadow {variant}"
       in:send={{ key }}
       out:receive={{ key }}

Diff for: src/lib/pages/workflows.svelte

@@ -89,6 +89,7 @@
     toaster.push({
       variant: 'primary',
       message: `Successfully terminated ${terminableWorkflows.length} workflows.`,
+      id: 'batch-terminate-success-toast',
     });
     selectedWorkflows = [];
     allSelected = false;

Diff for: src/lib/stores/bulk-actions.ts

@@ -0,0 +1,14 @@
+import { derived } from 'svelte/store';
+
+import { advancedVisibilityEnabled } from '$lib/utilities/advanced-visibility-enabled';
+import { isVersionNewer } from '$lib/utilities/version-check';
+
+import { cluster } from './cluster';
+import { temporalVersion } from './versions';
+
+export const supportsBulkActions = derived(
+  [temporalVersion, cluster],
+  ([$temporalVersion, $cluster]) =>
+    isVersionNewer($temporalVersion, '1.18.0') &&
+    advancedVisibilityEnabled($cluster),
+);

Diff for: src/lib/stores/pagination.test.ts

@@ -9,7 +9,6 @@ import {
   getValidPage,
   pagination,
   perPageFromSearchParameter,
-  perPageOptions,
 } from './pagination';
 import { stringifyWithBigInt } from '../utilities/parse-with-big-int';
 
@@ -384,39 +383,3 @@ describe('perPageFromSearchParameter', () => {
     expect(perPageFromSearchParameter({} as any)).toBe(100);
   });
 });
-
-describe('perPageOptions', () => {
-  it('should return the default options', () => {
-    expect(perPageOptions(undefined)).toEqual(['100', '250', '500']);
-  });
-
-  it('should return the default options with an additional string', () => {
-    expect(perPageOptions('25')).toEqual(['25', '100', '250', '500']);
-  });
-
-  it('should return the default options with an additional number a a string', () => {
-    expect(perPageOptions(25)).toEqual(['25', '100', '250', '500']);
-  });
-
-  it('should not return duplicate options', () => {
-    expect(perPageOptions('250')).toEqual(['100', '250', '500']);
-  });
-
-  it('should return not return duplicate options if passed in as a number', () => {
-    expect(perPageOptions(250)).toEqual(['100', '250', '500']);
-  });
-
-  it('should accept bogus strings', () => {
-    expect(perPageOptions('bogus input')).toEqual(['100', '250', '500']);
-  });
-
-  for (const input of [null, undefined, {}, []]) {
-    it(`should ignore ${stringifyWithBigInt(input)}`, () => {
-      expect(perPageOptions(input as unknown as any)).toEqual([
-        '100',
-        '250',
-        '500',
-      ]);
-    });
-  }
-});

Diff for: src/lib/stores/pagination.ts

@@ -2,7 +2,8 @@ import { derived, writable, get } from 'svelte/store';
 import type { Readable } from 'svelte/store';
 
 export const defaultItemsPerPage = 100;
-const options: string[] = ['100', '250', '500'];
+export const options: string[] = ['100', '250', '500'];
+export const MAX_PAGE_SIZE = options[options.length - 1];
 
 type PaginationMethods<T> = {
   adjustPageSize: (n: number | string) => void;
@@ -28,11 +29,6 @@ type PaginationStore<T> = PaginationMethods<T> &
     totalPages: number;
   }>;
 
-export const perPageOptions = (perPage: number | string): string[] => {
-  const itemsPerPage = String(perPageFromSearchParameter(perPage));
-  return options.includes(itemsPerPage) ? options : [itemsPerPage, ...options];
-};
-
 export const getPageForIndex = (i: number, pageSize: number): number => {
   return Math.floor(i / pageSize) + 1;
 };