Add kill functionality to scheduled and retry tasks table

ui/src/components/DeadTasksTable.tsx

@@ -124,13 +124,13 @@ function DeadTasksTable(props: Props & ReduxProps) {
 
   const handleBatchRunClick = () => {
     props
-      .batchDeleteDeadTasksAsync(queue, selectedKeys)
+      .batchRunDeadTasksAsync(queue, selectedKeys)
       .then(() => setSelectedKeys([]));
   };
 
   const handleBatchDeleteClick = () => {
     props
-      .batchRunDeadTasksAsync(queue, selectedKeys)
+      .batchDeleteDeadTasksAsync(queue, selectedKeys)
       .then(() => setSelectedKeys([]));
   };
 

ui/src/components/RetryTasksTable.tsx

@@ -25,11 +25,14 @@ import syntaxHighlightStyle from "react-syntax-highlighter/dist/esm/styles/hljs/
 import {
   batchDeleteRetryTasksAsync,
   batchRunRetryTasksAsync,
+  batchKillRetryTasksAsync,
   deleteAllRetryTasksAsync,
   runAllRetryTasksAsync,
+  killAllRetryTasksAsync,
   listRetryTasksAsync,
   deleteRetryTaskAsync,
   runRetryTaskAsync,
+  killRetryTaskAsync,
 } from "../actions/tasksActions";
 import { AppState } from "../store";
 import TablePaginationActions, {
@@ -60,11 +63,14 @@ function mapStateToProps(state: AppState) {
 const mapDispatchToProps = {
   batchDeleteRetryTasksAsync,
   batchRunRetryTasksAsync,
+  batchKillRetryTasksAsync,
   deleteAllRetryTasksAsync,
   runAllRetryTasksAsync,
+  killAllRetryTasksAsync,
   listRetryTasksAsync,
   deleteRetryTaskAsync,
   runRetryTaskAsync,
+  killRetryTaskAsync,
 };
 
 const connector = connect(mapStateToProps, mapDispatchToProps);
@@ -114,15 +120,25 @@ function RetryTasksTable(props: Props & ReduxProps) {
     props.deleteAllRetryTasksAsync(queue);
   };
 
+  const handleKillAllClick = () => {
+    props.killAllRetryTasksAsync(queue);
+  };
+
   const handleBatchRunClick = () => {
     props
-      .batchDeleteRetryTasksAsync(queue, selectedKeys)
+      .batchRunRetryTasksAsync(queue, selectedKeys)
       .then(() => setSelectedKeys([]));
   };
 
   const handleBatchDeleteClick = () => {
     props
-      .batchRunRetryTasksAsync(queue, selectedKeys)
+      .batchDeleteRetryTasksAsync(queue, selectedKeys)
+      .then(() => setSelectedKeys([]));
+  };
+
+  const handleBatchKillClick = () => {
+    props
+      .batchKillRetryTasksAsync(queue, selectedKeys)
       .then(() => setSelectedKeys([]));
   };
 
@@ -163,8 +179,10 @@ function RetryTasksTable(props: Props & ReduxProps) {
         showBatchActions={numSelected > 0}
         onRunAllClick={handleRunAllClick}
         onDeleteAllClick={handleDeleteAllClick}
+        onKillAllClick={handleKillAllClick}
         onBatchRunClick={handleBatchRunClick}
         onBatchDeleteClick={handleBatchDeleteClick}
+        onBatchKillClick={handleBatchKillClick}
       />
       <TableContainer component={Paper}>
         <Table
@@ -212,6 +230,9 @@ function RetryTasksTable(props: Props & ReduxProps) {
                 onDeleteClick={() => {
                   props.deleteRetryTaskAsync(task.queue, task.key);
                 }}
+                onKillClick={() => {
+                  props.killRetryTaskAsync(task.queue, task.key);
+                }}
               />
             ))}
           </TableBody>
@@ -253,6 +274,7 @@ interface RowProps {
   onSelectChange: (checked: boolean) => void;
   onDeleteClick: () => void;
   onRunClick: () => void;
+  onKillClick: () => void;
   allActionPending: boolean;
 }
 
@@ -295,6 +317,12 @@ function Row(props: RowProps) {
           >
             Run
           </Button>
+          <Button
+            onClick={props.onKillClick}
+            disabled={task.requestPending || props.allActionPending}
+          >
+            Kill
+          </Button>
           <Button
             disabled={task.requestPending}
             onClick={props.onDeleteClick || props.allActionPending}

ui/src/components/ScheduledTasksTable.tsx

@@ -25,11 +25,14 @@ import syntaxHighlightStyle from "react-syntax-highlighter/dist/esm/styles/hljs/
 import {
   batchDeleteScheduledTasksAsync,
   batchRunScheduledTasksAsync,
+  batchKillScheduledTasksAsync,
   deleteAllScheduledTasksAsync,
   runAllScheduledTasksAsync,
+  killAllScheduledTasksAsync,
   listScheduledTasksAsync,
   deleteScheduledTaskAsync,
   runScheduledTaskAsync,
+  killScheduledTaskAsync,
 } from "../actions/tasksActions";
 import { AppState } from "../store";
 import TablePaginationActions, {
@@ -59,12 +62,15 @@ function mapStateToProps(state: AppState) {
 
 const mapDispatchToProps = {
   listScheduledTasksAsync,
-  deleteScheduledTaskAsync,
   batchDeleteScheduledTasksAsync,
   batchRunScheduledTasksAsync,
+  batchKillScheduledTasksAsync,
   deleteAllScheduledTasksAsync,
   runAllScheduledTasksAsync,
+  killAllScheduledTasksAsync,
+  deleteScheduledTaskAsync,
   runScheduledTaskAsync,
+  killScheduledTaskAsync,
 };
 
 const connector = connect(mapStateToProps, mapDispatchToProps);
@@ -114,15 +120,25 @@ function ScheduledTasksTable(props: Props & ReduxProps) {
     props.deleteAllScheduledTasksAsync(queue);
   };
 
+  const handleKillAllClick = () => {
+    props.killAllScheduledTasksAsync(queue);
+  };
+
   const handleBatchRunClick = () => {
     props
-      .batchDeleteScheduledTasksAsync(queue, selectedKeys)
+      .batchRunScheduledTasksAsync(queue, selectedKeys)
       .then(() => setSelectedKeys([]));
   };
 
   const handleBatchDeleteClick = () => {
     props
-      .batchRunScheduledTasksAsync(queue, selectedKeys)
+      .batchDeleteScheduledTasksAsync(queue, selectedKeys)
+      .then(() => setSelectedKeys([]));
+  };
+
+  const handleBatchKillClick = () => {
+    props
+      .batchKillScheduledTasksAsync(queue, selectedKeys)
       .then(() => setSelectedKeys([]));
   };
 
@@ -159,9 +175,11 @@ function ScheduledTasksTable(props: Props & ReduxProps) {
         batchActionPending={props.batchActionPending}
         showBatchActions={numSelected > 0}
         onRunAllClick={handleRunAllClick}
+        onKillAllClick={handleKillAllClick}
         onDeleteAllClick={handleDeleteAllClick}
         onBatchRunClick={handleBatchRunClick}
         onBatchDeleteClick={handleBatchDeleteClick}
+        onBatchKillClick={handleBatchKillClick}
       />
       <TableContainer component={Paper}>
         <Table
@@ -209,6 +227,9 @@ function ScheduledTasksTable(props: Props & ReduxProps) {
                 onDeleteClick={() => {
                   props.deleteScheduledTaskAsync(queue, task.key);
                 }}
+                onKillClick={() => {
+                  props.killScheduledTaskAsync(queue, task.key);
+                }}
               />
             ))}
           </TableBody>
@@ -250,6 +271,7 @@ interface RowProps {
   onSelectChange: (checked: boolean) => void;
   onRunClick: () => void;
   onDeleteClick: () => void;
+  onKillClick: () => void;
   allActionPending: boolean;
 }
 
@@ -289,6 +311,12 @@ function Row(props: RowProps) {
           >
             Run
           </Button>
+          <Button
+            onClick={props.onKillClick}
+            disabled={task.requestPending || props.allActionPending}
+          >
+            Kill
+          </Button>
           <Button
             onClick={props.onDeleteClick}
             disabled={task.requestPending || props.allActionPending}

ui/src/components/TableActions.tsx

@@ -20,10 +20,12 @@ interface Props {
   allActionPending: boolean;
   onRunAllClick: () => void;
   onDeleteAllClick: () => void;
+  onKillAllClick?: () => void;
   showBatchActions: boolean;
   batchActionPending: boolean;
   onBatchRunClick: () => void;
   onBatchDeleteClick: () => void;
+  onBatchKillClick?: () => void;
 }
 
 export default function TableActions(props: Props) {
@@ -61,6 +63,18 @@ export default function TableActions(props: Props) {
         >
           Run All
         </MenuItem>
+        {props.onKillAllClick && (
+          <MenuItem
+            onClick={() => {
+              if (!props.onKillAllClick) return;
+              props.onKillAllClick();
+              closeMenu();
+            }}
+            disabled={props.allActionPending}
+          >
+            Kill All
+          </MenuItem>
+        )}
         <MenuItem
           onClick={() => {
             props.onDeleteAllClick();
@@ -83,7 +97,17 @@ export default function TableActions(props: Props) {
           >
             Run
           </Button>
-          <Button>Kill</Button>
+          {props.onBatchKillClick && (
+            <Button
+              disabled={props.batchActionPending}
+              onClick={() => {
+                if (!props.onBatchKillClick) return;
+                props.onBatchKillClick();
+              }}
+            >
+              Kill
+            </Button>
+          )}
           <Button
             disabled={props.batchActionPending}
             onClick={props.onBatchDeleteClick}