Add actions column in QueuesOverviewTable component

ui/src/api.ts

@@ -107,7 +107,6 @@ export async function listQueues(): Promise<ListQueuesResponse> {
     method: "get",
     url: `${BASE_URL}/queues`,
   });
-  console.log("debug: listQueues response", resp.data);
   return resp.data;
 }
 

ui/src/components/QueuesOverviewTable.tsx

@@ -13,6 +13,8 @@ import TableSortLabel from "@material-ui/core/TableSortLabel";
 import IconButton from "@material-ui/core/IconButton";
 import PauseCircleFilledIcon from "@material-ui/icons/PauseCircleFilled";
 import PlayCircleFilledIcon from "@material-ui/icons/PlayCircleFilled";
+import DeleteIcon from "@material-ui/icons/Delete";
+import MoreHorizIcon from "@material-ui/icons/MoreHoriz";
 import { Queue } from "../api";
 import { queueDetailsPath } from "../paths";
 
@@ -37,6 +39,11 @@ const useStyles = makeStyles((theme) => ({
     left: 0,
     background: theme.palette.common.white,
   },
+  actionIconsContainer: {
+    display: "flex",
+    justifyContent: "center",
+    width: "100px",
+  },
 }));
 
 interface QueueWithMetadata extends Queue {
@@ -60,6 +67,8 @@ enum SortBy {
   Processed,
   Succeeded,
   Failed,
+
+  None, // no sort support
 }
 
 enum SortDirection {
@@ -67,17 +76,40 @@ enum SortDirection {
   Desc = "desc",
 }
 
-const columnConfig = [
+interface ColumnConfig {
-  { label: "Queue", key: "queue", sortBy: SortBy.Queue },
+  label: string;
-  { label: "Size", key: "size", sortBy: SortBy.Size },
+  key: string;
-  { label: "Active", key: "active", sortBy: SortBy.Active },
+  sortBy: SortBy;
-  { label: "Pending", key: "pending", sortBy: SortBy.Pending },
+  align: "left" | "right" | "center";
-  { label: "Scheduled", key: "scheduled", sortBy: SortBy.Scheduled },
+}
-  { label: "Retry", key: "retry", sortBy: SortBy.Retry },
+
-  { label: "Dead", key: "dead", sortBy: SortBy.Dead },
+const colConfigs: ColumnConfig[] = [
-  { label: "Processed", key: "processed", sortBy: SortBy.Processed },
+  { label: "Queue", key: "queue", sortBy: SortBy.Queue, align: "left" },
-  { label: "Succeeded", key: "Succeeded", sortBy: SortBy.Succeeded },
+  { label: "Size", key: "size", sortBy: SortBy.Size, align: "right" },
-  { label: "Failed", key: "failed", sortBy: SortBy.Failed },
+  { label: "Active", key: "active", sortBy: SortBy.Active, align: "right" },
+  { label: "Pending", key: "pending", sortBy: SortBy.Pending, align: "right" },
+  {
+    label: "Scheduled",
+    key: "scheduled",
+    sortBy: SortBy.Scheduled,
+    align: "right",
+  },
+  { label: "Retry", key: "retry", sortBy: SortBy.Retry, align: "right" },
+  { label: "Dead", key: "dead", sortBy: SortBy.Dead, align: "right" },
+  {
+    label: "Processed",
+    key: "processed",
+    sortBy: SortBy.Processed,
+    align: "right",
+  },
+  {
+    label: "Succeeded",
+    key: "Succeeded",
+    sortBy: SortBy.Succeeded,
+    align: "right",
+  },
+  { label: "Failed", key: "failed", sortBy: SortBy.Failed, align: "right" },
+  { label: "Actions", key: "actions", sortBy: SortBy.None, align: "center" },
 ];
 
 // sortQueues takes a array of queues and return a sorted array.
@@ -95,6 +127,7 @@ export default function QueuesOverviewTable(props: Props) {
   const classes = useStyles();
   const [sortBy, setSortBy] = useState<SortBy>(SortBy.Queue);
   const [sortDir, setSortDir] = useState<SortDirection>(SortDirection.Asc);
+  const [activeRowIndex, setActiveRowIndex] = useState<number>(-1);
   const total = getAggregateCounts(props.queues);
 
   const createSortClickHandler = (sortKey: SortBy) => (e: React.MouseEvent) => {
@@ -170,12 +203,13 @@ export default function QueuesOverviewTable(props: Props) {
       <Table className={classes.table} aria-label="queues overview table">
         <TableHead>
           <TableRow>
-            {columnConfig.map((cfg, i) => (
+            {colConfigs.map((cfg, i) => (
               <TableCell
                 key={cfg.key}
-                align={i === 0 ? "left" : "right"}
+                align={cfg.align}
                 className={clsx(i === 0 && classes.fixedCell)}
               >
+                {cfg.sortBy !== SortBy.None ? (
                   <TableSortLabel
                     active={sortBy === cfg.sortBy}
                     direction={sortDir}
@@ -183,13 +217,20 @@ export default function QueuesOverviewTable(props: Props) {
                   >
                     {cfg.label}
                   </TableSortLabel>
+                ) : (
+                  <div>{cfg.label}</div>
+                )}
               </TableCell>
             ))}
           </TableRow>
         </TableHead>
         <TableBody>
-          {sortQueues(props.queues, cmpFunc).map((q) => (
+          {sortQueues(props.queues, cmpFunc).map((q, i) => (
-            <TableRow key={q.queue}>
+            <TableRow
+              key={q.queue}
+              onMouseEnter={() => setActiveRowIndex(i)}
+              onMouseLeave={() => setActiveRowIndex(-1)}
+            >
               <TableCell
                 component="th"
                 scope="row"
@@ -248,7 +289,10 @@ export default function QueuesOverviewTable(props: Props) {
               </TableCell>
               <TableCell align="right">{q.processed - q.failed}</TableCell>
               <TableCell align="right">{q.failed}</TableCell>
-              {/* <TableCell align="right">
+              <TableCell align="center">
+                <div className={classes.actionIconsContainer}>
+                  {activeRowIndex === i ? (
+                    <React.Fragment>
                       {q.paused ? (
                         <IconButton
                           color="secondary"
@@ -266,7 +310,19 @@ export default function QueuesOverviewTable(props: Props) {
                           <PauseCircleFilledIcon />
                         </IconButton>
                       )}
-              </TableCell> */}
+                      <IconButton
+                        onClick={() => console.log("TODO: delete this queue")}
+                      >
+                        <DeleteIcon />
+                      </IconButton>
+                    </React.Fragment>
+                  ) : (
+                    <IconButton>
+                      <MoreHorizIcon />
+                    </IconButton>
+                  )}
+                </div>
+              </TableCell>
             </TableRow>
           ))}
         </TableBody>