Add cancel action button to ActiveTasksTable

ui/src/components/ActiveTasksTable.tsx

@@ -17,6 +17,7 @@ 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 CancelIcon from "@material-ui/icons/Cancel";
 import KeyboardArrowUpIcon from "@material-ui/icons/KeyboardArrowUp";
 import KeyboardArrowDownIcon from "@material-ui/icons/KeyboardArrowDown";
 import Typography from "@material-ui/core/Typography";
@@ -31,6 +32,7 @@ import TablePaginationActions, {
   rowsPerPageOptions,
   defaultPageSize,
 } from "./TablePaginationActions";
+import TableActions from "./TableActions";
 import { usePolling } from "../hooks";
 import { ActiveTaskExtended } from "../reducers/tasksReducer";
 import { uuidPrefix } from "../utils";
@@ -115,6 +117,25 @@ function ActiveTasksTable(props: Props & ReduxProps) {
   const rowCount = props.tasks.length;
   const numSelected = selectedIds.length;
   return (
+    <div>
+      <TableActions
+        showIconButtons={numSelected > 0}
+        iconButtonActions={[
+          {
+            tooltip: "Cancel",
+            icon: <CancelIcon />,
+            onClick: () => console.log("TODO"),
+            disabled: false,
+          },
+        ]}
+        menuItemActions={[
+          {
+            label: "Cancel All",
+            onClick: () => console.log("TODO"),
+            disabled: false,
+          },
+        ]}
+      />
       <TableContainer component={Paper}>
         <Table
           stickyHeader={true}
@@ -181,6 +202,7 @@ function ActiveTasksTable(props: Props & ReduxProps) {
           </TableFooter>
         </Table>
       </TableContainer>
+    </div>
   );
 }