Add delete and archive action buttons to PendingTasksTable

ui/src/components/PendingTasksTable.tsx

@@ -1,4 +1,5 @@
 import React, { useCallback, useState } from "react";
+import clsx from "clsx";
 import { connect, ConnectedProps } from "react-redux";
 import { makeStyles } from "@material-ui/core/styles";
 import Table from "@material-ui/core/Table";
@@ -12,6 +13,7 @@ import TableRow from "@material-ui/core/TableRow";
 import Tooltip from "@material-ui/core/Tooltip";
 import Paper from "@material-ui/core/Paper";
 import Box from "@material-ui/core/Box";
+import Checkbox from "@material-ui/core/Checkbox";
 import Collapse from "@material-ui/core/Collapse";
 import IconButton from "@material-ui/core/IconButton";
 import KeyboardArrowUpIcon from "@material-ui/icons/KeyboardArrowUp";
@@ -19,17 +21,29 @@ import KeyboardArrowDownIcon from "@material-ui/icons/KeyboardArrowDown";
 import Typography from "@material-ui/core/Typography";
 import TableFooter from "@material-ui/core/TableFooter";
 import TablePagination from "@material-ui/core/TablePagination";
+import DeleteIcon from "@material-ui/icons/Delete";
+import ArchiveIcon from "@material-ui/icons/Archive";
+import MoreHorizIcon from "@material-ui/icons/MoreHoriz";
 import SyntaxHighlighter from "./SyntaxHighlighter";
 import TablePaginationActions, {
   defaultPageSize,
   rowsPerPageOptions,
 } from "./TablePaginationActions";
-import { listPendingTasksAsync } from "../actions/tasksActions";
+import TableActions from "./TableActions";
+import {
+  listPendingTasksAsync,
+  deletePendingTaskAsync,
+  batchDeletePendingTasksAsync,
+  deleteAllPendingTasksAsync,
+  archivePendingTaskAsync,
+  batchArchivePendingTasksAsync,
+  archiveAllPendingTasksAsync,
+} from "../actions/tasksActions";
 import { AppState } from "../store";
-import { PendingTask } from "../api";
 import { usePolling } from "../hooks";
 import { uuidPrefix } from "../utils";
 import { TableColumn } from "../types/table";
+import { PendingTaskExtended } from "../reducers/tasksReducer";
 
 const useStyles = makeStyles((theme) => ({
   table: {
@@ -44,11 +58,21 @@ function mapStateToProps(state: AppState) {
   return {
     loading: state.tasks.pendingTasks.loading,
     tasks: state.tasks.pendingTasks.data,
+    batchActionPending: state.tasks.pendingTasks.batchActionPending,
+    allActionPending: state.tasks.pendingTasks.allActionPending,
     pollInterval: state.settings.pollInterval,
   };
 }
 
-const mapDispatchToProps = { listPendingTasksAsync };
+const mapDispatchToProps = {
+  listPendingTasksAsync,
+  deletePendingTaskAsync,
+  batchDeletePendingTasksAsync,
+  deleteAllPendingTasksAsync,
+  archivePendingTaskAsync,
+  batchArchivePendingTasksAsync,
+  archiveAllPendingTasksAsync,
+};
 
 const connector = connect(mapStateToProps, mapDispatchToProps);
 
@@ -64,6 +88,8 @@ function PendingTasksTable(props: Props & ReduxProps) {
   const classes = useStyles();
   const [page, setPage] = useState(0);
   const [pageSize, setPageSize] = useState(defaultPageSize);
+  const [selectedKeys, setSelectedKeys] = useState<string[]>([]);
+  const [activeTaskId, setActiveTaskId] = useState<string>("");
 
   const handleChangePage = (
     event: React.MouseEvent<HTMLButtonElement> | null,
@@ -79,6 +105,35 @@ function PendingTasksTable(props: Props & ReduxProps) {
     setPage(0);
   };
 
+  const handleSelectAllClick = (event: React.ChangeEvent<HTMLInputElement>) => {
+    if (event.target.checked) {
+      const newSelected = props.tasks.map((t) => t.key);
+      setSelectedKeys(newSelected);
+    } else {
+      setSelectedKeys([]);
+    }
+  };
+
+  const handleDeleteAllClick = () => {
+    props.deleteAllPendingTasksAsync(queue);
+  };
+
+  const handleArchiveAllClick = () => {
+    props.archiveAllPendingTasksAsync(queue);
+  };
+
+  const handleBatchDeleteClick = () => {
+    props
+      .batchDeletePendingTasksAsync(queue, selectedKeys)
+      .then(() => setSelectedKeys([]));
+  };
+
+  const handleBatchArchiveClick = () => {
+    props
+      .batchArchivePendingTasksAsync(queue, selectedKeys)
+      .then(() => setSelectedKeys([]));
+  };
+
   const fetchData = useCallback(() => {
     const pageOpts = { page: page + 1, size: pageSize };
     listPendingTasksAsync(queue, pageOpts);
@@ -99,9 +154,42 @@ function PendingTasksTable(props: Props & ReduxProps) {
     { key: "icon", label: "", align: "left" },
     { key: "id", label: "ID", align: "left" },
     { key: "type", label: "Type", align: "left" },
+    { key: "actions", label: "Actions", align: "center" },
   ];
 
+  const rowCount = props.tasks.length;
+  const numSelected = selectedKeys.length;
   return (
+    <div>
+      <TableActions
+        showIconButtons={numSelected > 0}
+        iconButtonActions={[
+          {
+            tooltip: "Delete",
+            icon: <DeleteIcon />,
+            onClick: handleBatchDeleteClick,
+            disabled: props.batchActionPending,
+          },
+          {
+            tooltip: "Archive",
+            icon: <ArchiveIcon />,
+            onClick: handleBatchArchiveClick,
+            disabled: props.batchActionPending,
+          },
+        ]}
+        menuItemActions={[
+          {
+            label: "Delete All",
+            onClick: handleDeleteAllClick,
+            disabled: props.allActionPending,
+          },
+          {
+            label: "Archive All",
+            onClick: handleArchiveAllClick,
+            disabled: props.allActionPending,
+          },
+        ]}
+      />
       <TableContainer component={Paper}>
         <Table
           stickyHeader={true}
@@ -111,6 +199,19 @@ function PendingTasksTable(props: Props & ReduxProps) {
         >
           <TableHead>
             <TableRow>
+              <TableCell
+                padding="checkbox"
+                classes={{ stickyHeader: classes.stickyHeaderCell }}
+              >
+                <Checkbox
+                  indeterminate={numSelected > 0 && numSelected < rowCount}
+                  checked={rowCount > 0 && numSelected === rowCount}
+                  onChange={handleSelectAllClick}
+                  inputProps={{
+                    "aria-label": "select all tasks shown in the table",
+                  }}
+                />
+              </TableCell>
               {columns.map((col) => (
                 <TableCell
                   key={col.key}
@@ -124,14 +225,37 @@ function PendingTasksTable(props: Props & ReduxProps) {
           </TableHead>
           <TableBody>
             {props.tasks.map((task) => (
-            <Row key={task.id} task={task} />
+              <Row
+                key={task.id}
+                task={task}
+                isSelected={selectedKeys.includes(task.key)}
+                onSelectChange={(checked: boolean) => {
+                  if (checked) {
+                    setSelectedKeys(selectedKeys.concat(task.key));
+                  } else {
+                    setSelectedKeys(
+                      selectedKeys.filter((key) => key !== task.key)
+                    );
+                  }
+                }}
+                allActionPending={props.allActionPending}
+                onDeleteClick={() =>
+                  props.deletePendingTaskAsync(queue, task.key)
+                }
+                onArchiveClick={() => {
+                  props.archivePendingTaskAsync(queue, task.key);
+                }}
+                onActionCellEnter={() => setActiveTaskId(task.id)}
+                onActionCellLeave={() => setActiveTaskId("")}
+                showActions={activeTaskId === task.id}
+              />
             ))}
           </TableBody>
           <TableFooter>
             <TableRow>
               <TablePagination
                 rowsPerPageOptions={rowsPerPageOptions}
-              colSpan={columns.length}
+                colSpan={columns.length + 1}
                 count={props.totalTaskCount}
                 rowsPerPage={pageSize}
                 page={page}
@@ -147,6 +271,7 @@ function PendingTasksTable(props: Props & ReduxProps) {
           </TableFooter>
         </Table>
       </TableContainer>
+    </div>
   );
 }
 
@@ -156,15 +281,46 @@ const useRowStyles = makeStyles({
       borderBottom: "unset",
     },
   },
+  actionCell: {
+    width: "96px",
+  },
+  activeActionCell: {
+    display: "flex",
+    justifyContent: "space-between",
+  },
 });
 
-function Row(props: { task: PendingTask }) {
+interface RowProps {
+  task: PendingTaskExtended;
+  isSelected: boolean;
+  onSelectChange: (checked: boolean) => void;
+  onDeleteClick: () => void;
+  onArchiveClick: () => void;
+  allActionPending: boolean;
+  showActions: boolean;
+  onActionCellEnter: () => void;
+  onActionCellLeave: () => void;
+}
+
+function Row(props: RowProps) {
   const { task } = props;
   const [open, setOpen] = React.useState(false);
   const classes = useRowStyles();
   return (
     <React.Fragment>
-      <TableRow key={task.id} className={classes.root}>
+      <TableRow
+        key={task.id}
+        className={classes.root}
+        selected={props.isSelected}
+      >
+        <TableCell padding="checkbox">
+          <Checkbox
+            onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
+              props.onSelectChange(event.target.checked)
+            }
+            checked={props.isSelected}
+          />
+        </TableCell>
         <TableCell>
           <Tooltip title={open ? "Hide Details" : "Show Details"}>
             <IconButton
@@ -180,6 +336,42 @@ function Row(props: { task: PendingTask }) {
           {uuidPrefix(task.id)}
         </TableCell>
         <TableCell>{task.type}</TableCell>
+        <TableCell
+          align="center"
+          className={clsx(
+            classes.actionCell,
+            props.showActions && classes.activeActionCell
+          )}
+          onMouseEnter={props.onActionCellEnter}
+          onMouseLeave={props.onActionCellLeave}
+        >
+          {props.showActions ? (
+            <React.Fragment>
+              <Tooltip title="Delete">
+                <IconButton
+                  onClick={props.onDeleteClick}
+                  disabled={task.requestPending || props.allActionPending}
+                  size="small"
+                >
+                  <DeleteIcon fontSize="small" />
+                </IconButton>
+              </Tooltip>
+              <Tooltip title="Archive">
+                <IconButton
+                  onClick={props.onArchiveClick}
+                  disabled={task.requestPending || props.allActionPending}
+                  size="small"
+                >
+                  <ArchiveIcon fontSize="small" />
+                </IconButton>
+              </Tooltip>
+            </React.Fragment>
+          ) : (
+            <IconButton size="small" onClick={props.onActionCellEnter}>
+              <MoreHorizIcon fontSize="small" />
+            </IconButton>
+          )}
+        </TableCell>
       </TableRow>
       <TableRow>
         <TableCell style={{ paddingBottom: 0, paddingTop: 0 }} colSpan={8}>

ui/src/reducers/queuesReducer.ts

@@ -44,6 +44,12 @@ import {
   RUN_RETRY_TASK_SUCCESS,
   RUN_SCHEDULED_TASK_SUCCESS,
   TasksActionTypes,
+  ARCHIVE_PENDING_TASK_SUCCESS,
+  DELETE_PENDING_TASK_SUCCESS,
+  BATCH_ARCHIVE_PENDING_TASKS_SUCCESS,
+  BATCH_DELETE_PENDING_TASKS_SUCCESS,
+  ARCHIVE_ALL_PENDING_TASKS_SUCCESS,
+  DELETE_ALL_PENDING_TASKS_SUCCESS,
 } from "../actions/tasksActions";
 import { Queue } from "../api";
 
@@ -217,6 +223,23 @@ function queuesReducer(
       return { ...state, data: newData };
     }
 
+    case ARCHIVE_PENDING_TASK_SUCCESS: {
+      const newData = state.data.map((queueInfo) => {
+        if (queueInfo.name !== action.queue) {
+          return queueInfo;
+        }
+        return {
+          ...queueInfo,
+          currentStats: {
+            ...queueInfo.currentStats,
+            archived: queueInfo.currentStats.archived + 1,
+            pending: queueInfo.currentStats.pending - 1,
+          },
+        };
+      });
+      return { ...state, data: newData };
+    }
+
     case ARCHIVE_SCHEDULED_TASK_SUCCESS: {
       const newData = state.data.map((queueInfo) => {
         if (queueInfo.name !== action.queue) {
@@ -251,6 +274,22 @@ function queuesReducer(
       return { ...state, data: newData };
     }
 
+    case DELETE_PENDING_TASK_SUCCESS: {
+      const newData = state.data.map((queueInfo) => {
+        if (queueInfo.name !== action.queue) {
+          return queueInfo;
+        }
+        return {
+          ...queueInfo,
+          currentStats: {
+            ...queueInfo.currentStats,
+            pending: queueInfo.currentStats.pending - 1,
+          },
+        };
+      });
+      return { ...state, data: newData };
+    }
+
     case DELETE_SCHEDULED_TASK_SUCCESS: {
       const newData = state.data.map((queueInfo) => {
         if (queueInfo.name !== action.queue) {
@@ -267,6 +306,79 @@ function queuesReducer(
       return { ...state, data: newData };
     }
 
+    case BATCH_ARCHIVE_PENDING_TASKS_SUCCESS: {
+      const newData = state.data.map((queueInfo) => {
+        if (queueInfo.name !== action.queue) {
+          return queueInfo;
+        }
+        return {
+          ...queueInfo,
+          currentStats: {
+            ...queueInfo.currentStats,
+            archived:
+              queueInfo.currentStats.archived +
+              action.payload.archived_keys.length,
+            pending:
+              queueInfo.currentStats.pending -
+              action.payload.archived_keys.length,
+          },
+        };
+      });
+      return { ...state, data: newData };
+    }
+
+    case BATCH_DELETE_PENDING_TASKS_SUCCESS: {
+      const newData = state.data.map((queueInfo) => {
+        if (queueInfo.name !== action.queue) {
+          return queueInfo;
+        }
+        return {
+          ...queueInfo,
+          currentStats: {
+            ...queueInfo.currentStats,
+            pending:
+              queueInfo.currentStats.pending -
+              action.payload.deleted_keys.length,
+          },
+        };
+      });
+      return { ...state, data: newData };
+    }
+
+    case ARCHIVE_ALL_PENDING_TASKS_SUCCESS: {
+      const newData = state.data.map((queueInfo) => {
+        if (queueInfo.name !== action.queue) {
+          return queueInfo;
+        }
+        return {
+          ...queueInfo,
+          currentStats: {
+            ...queueInfo.currentStats,
+            archived:
+              queueInfo.currentStats.archived + queueInfo.currentStats.pending,
+            pending: 0,
+          },
+        };
+      });
+      return { ...state, data: newData };
+    }
+
+    case DELETE_ALL_PENDING_TASKS_SUCCESS: {
+      const newData = state.data.map((queueInfo) => {
+        if (queueInfo.name !== action.queue) {
+          return queueInfo;
+        }
+        return {
+          ...queueInfo,
+          currentStats: {
+            ...queueInfo.currentStats,
+            pending: 0,
+          },
+        };
+      });
+      return { ...state, data: newData };
+    }
+
     case BATCH_RUN_SCHEDULED_TASKS_SUCCESS: {
       const newData = state.data.map((queueInfo) => {
         if (queueInfo.name !== action.queue) {

ui/src/reducers/tasksReducer.ts

@@ -133,6 +133,12 @@ export interface ActiveTaskExtended extends ActiveTask {
   canceling: boolean;
 }
 
+export interface PendingTaskExtended extends PendingTask {
+  // Indicates that a request has been sent for this
+  // task and awaiting for a response.
+  requestPending: boolean;
+}
+
 export interface ScheduledTaskExtended extends ScheduledTask {
   // Indicates that a request has been sent for this
   // task and awaiting for a response.
@@ -164,7 +170,7 @@ interface TasksState {
     batchActionPending: boolean;
     allActionPending: boolean;
     error: string;
-    data: PendingTask[];
+    data: PendingTaskExtended[];
   };
   scheduledTasks: {
     loading: boolean;
@@ -284,7 +290,10 @@ function tasksReducer(
           ...state.pendingTasks,
           loading: false,
           error: "",
-          data: action.payload.tasks,
+          data: action.payload.tasks.map((task) => ({
+            ...task,
+            requestPending: false,
+          })),
         },
       };