Add delete button for scheduled and dead tasks

ui/src/components/DeadTasksTable.tsx

@@ -22,14 +22,17 @@ import AlertTitle from "@material-ui/lab/AlertTitle";
 import SyntaxHighlighter from "react-syntax-highlighter";
 import syntaxHighlightStyle from "react-syntax-highlighter/dist/esm/styles/hljs/github";
 import { AppState } from "../store";
-import { listDeadTasksAsync } from "../actions/tasksActions";
-import { DeadTask } from "../api";
+import {
+  listDeadTasksAsync,
+  deleteDeadTaskAsync,
+} from "../actions/tasksActions";
 import TablePaginationActions, {
   defaultPageSize,
   rowsPerPageOptions,
 } from "./TablePaginationActions";
 import { timeAgo } from "../timeutil";
 import { usePolling } from "../hooks";
+import { DeadTaskExtended } from "../reducers/tasksReducer";
 
 const useStyles = makeStyles({
   table: {
@@ -53,7 +56,7 @@ function mapStateToProps(state: AppState) {
   };
 }
 
-const mapDispatchToProps = { listDeadTasksAsync };
+const mapDispatchToProps = { listDeadTasksAsync, deleteDeadTaskAsync };
 
 const connector = connect(mapStateToProps, mapDispatchToProps);
 
@@ -126,7 +129,13 @@ function DeadTasksTable(props: Props & ReduxProps) {
         </TableHead>
         <TableBody>
           {props.tasks.map((task) => (
-            <Row key={task.id} task={task} />
+            <Row
+              key={task.id}
+              task={task}
+              onDeleteClick={() => {
+                props.deleteDeadTaskAsync(queue, task.key);
+              }}
+            />
           ))}
         </TableBody>
         <TableFooter>
@@ -152,7 +161,12 @@ function DeadTasksTable(props: Props & ReduxProps) {
   );
 }
 
-function Row(props: { task: DeadTask }) {
+interface RowProps {
+  task: DeadTaskExtended;
+  onDeleteClick: () => void;
+}
+
+function Row(props: RowProps) {
   const { task } = props;
   const [open, setOpen] = React.useState(false);
   const classes = useRowStyles();
@@ -175,7 +189,9 @@ function Row(props: { task: DeadTask }) {
         <TableCell>{timeAgo(task.last_failed_at)}</TableCell>
         <TableCell>{task.error_message}</TableCell>
         <TableCell>
-          <Button>Cancel</Button>
+          <Button onClick={props.onDeleteClick} disabled={task.requestPending}>
+            Delete
+          </Button>
         </TableCell>
       </TableRow>
       <TableRow>

ui/src/components/RetryTasksTable.tsx

@@ -163,7 +163,12 @@ const useRowStyles = makeStyles({
   },
 });
 
-function Row(props: { task: RetryTaskExtended; onDeleteClick: () => void }) {
+interface RowProps {
+  task: RetryTaskExtended;
+  onDeleteClick: () => void;
+}
+
+function Row(props: RowProps) {
   const { task } = props;
   const [open, setOpen] = React.useState(false);
   const classes = useRowStyles();

ui/src/components/ScheduledTasksTable.tsx

@@ -21,15 +21,18 @@ import Alert from "@material-ui/lab/Alert";
 import AlertTitle from "@material-ui/lab/AlertTitle";
 import SyntaxHighlighter from "react-syntax-highlighter";
 import syntaxHighlightStyle from "react-syntax-highlighter/dist/esm/styles/hljs/github";
-import { listScheduledTasksAsync } from "../actions/tasksActions";
+import {
+  listScheduledTasksAsync,
+  deleteScheduledTaskAsync,
+} from "../actions/tasksActions";
 import { AppState } from "../store";
-import { ScheduledTask } from "../api";
 import TablePaginationActions, {
   defaultPageSize,
   rowsPerPageOptions,
 } from "./TablePaginationActions";
 import { durationBefore } from "../timeutil";
 import { usePolling } from "../hooks";
+import { ScheduledTaskExtended } from "../reducers/tasksReducer";
 
 const useStyles = makeStyles({
   table: {
@@ -45,7 +48,10 @@ function mapStateToProps(state: AppState) {
   };
 }
 
-const mapDispatchToProps = { listScheduledTasksAsync };
+const mapDispatchToProps = {
+  listScheduledTasksAsync,
+  deleteScheduledTaskAsync,
+};
 
 const connector = connect(mapStateToProps, mapDispatchToProps);
 
@@ -117,7 +123,13 @@ function ScheduledTasksTable(props: Props & ReduxProps) {
         </TableHead>
         <TableBody>
           {props.tasks.map((task) => (
-            <Row key={task.id} task={task} />
+            <Row
+              key={task.id}
+              task={task}
+              onDeleteClick={() => {
+                props.deleteScheduledTaskAsync(queue, task.key);
+              }}
+            />
           ))}
         </TableBody>
         <TableFooter>
@@ -151,7 +163,12 @@ const useRowStyles = makeStyles({
   },
 });
 
-function Row(props: { task: ScheduledTask }) {
+interface RowProps {
+  task: ScheduledTaskExtended;
+  onDeleteClick: () => void;
+}
+
+function Row(props: RowProps) {
   const { task } = props;
   const [open, setOpen] = React.useState(false);
   const classes = useRowStyles();
@@ -173,7 +190,9 @@ function Row(props: { task: ScheduledTask }) {
         <TableCell>{task.type}</TableCell>
         <TableCell>{durationBefore(task.next_process_at)}</TableCell>
         <TableCell>
-          <Button>Cancel</Button>
+          <Button onClick={props.onDeleteClick} disabled={task.requestPending}>
+            Delete
+          </Button>
         </TableCell>
       </TableRow>
       <TableRow>