diff --git a/ui/src/api.ts b/ui/src/api.ts index c157a23..4c8ff42 100644 --- a/ui/src/api.ts +++ b/ui/src/api.ts @@ -107,7 +107,6 @@ export async function listQueues(): Promise { method: "get", url: `${BASE_URL}/queues`, }); - console.log("debug: listQueues response", resp.data); return resp.data; } diff --git a/ui/src/components/QueuesOverviewTable.tsx b/ui/src/components/QueuesOverviewTable.tsx index 30ffcca..e7aff6f 100644 --- a/ui/src/components/QueuesOverviewTable.tsx +++ b/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 = [ - { label: "Queue", key: "queue", sortBy: SortBy.Queue }, - { label: "Size", key: "size", sortBy: SortBy.Size }, - { label: "Active", key: "active", sortBy: SortBy.Active }, - { label: "Pending", key: "pending", sortBy: SortBy.Pending }, - { label: "Scheduled", key: "scheduled", sortBy: SortBy.Scheduled }, - { label: "Retry", key: "retry", sortBy: SortBy.Retry }, - { label: "Dead", key: "dead", sortBy: SortBy.Dead }, - { label: "Processed", key: "processed", sortBy: SortBy.Processed }, - { label: "Succeeded", key: "Succeeded", sortBy: SortBy.Succeeded }, - { label: "Failed", key: "failed", sortBy: SortBy.Failed }, +interface ColumnConfig { + label: string; + key: string; + sortBy: SortBy; + align: "left" | "right" | "center"; +} + +const colConfigs: ColumnConfig[] = [ + { label: "Queue", key: "queue", sortBy: SortBy.Queue, align: "left" }, + { label: "Size", key: "size", sortBy: SortBy.Size, align: "right" }, + { 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.Queue); const [sortDir, setSortDir] = useState(SortDirection.Asc); + const [activeRowIndex, setActiveRowIndex] = useState(-1); const total = getAggregateCounts(props.queues); const createSortClickHandler = (sortKey: SortBy) => (e: React.MouseEvent) => { @@ -170,26 +203,34 @@ export default function QueuesOverviewTable(props: Props) { - {columnConfig.map((cfg, i) => ( + {colConfigs.map((cfg, i) => ( - - {cfg.label} - + {cfg.sortBy !== SortBy.None ? ( + + {cfg.label} + + ) : ( +
{cfg.label}
+ )}
))}
- {sortQueues(props.queues, cmpFunc).map((q) => ( - + {sortQueues(props.queues, cmpFunc).map((q, i) => ( + setActiveRowIndex(i)} + onMouseLeave={() => setActiveRowIndex(-1)} + > {q.processed - q.failed} {q.failed} - {/* - {q.paused ? ( - props.onResumeClick(q.queue)} - disabled={q.pauseRequestPending} - > - - - ) : ( - props.onPauseClick(q.queue)} - disabled={q.pauseRequestPending} - > - - - )} - */} + +
+ {activeRowIndex === i ? ( + + {q.paused ? ( + props.onResumeClick(q.queue)} + disabled={q.pauseRequestPending} + > + + + ) : ( + props.onPauseClick(q.queue)} + disabled={q.pauseRequestPending} + > + + + )} + console.log("TODO: delete this queue")} + > + + + + ) : ( + + + + )} +
+
))}