go-pkg/asynqmon
2
0
Fork 0
mirror of https://github.com/hibiken/asynqmon.git synced 2025-01-19 03:05:53 +08:00
Code Issues Projects Releases Wiki Activity

Add alert dialog for delete action in QueuesOverviewTable

Browse Source
This commit is contained in:
Ken Hibino 2020-11-26 22:39:22 -08:00
parent 26e5890a4e
commit 003a88d17b
1 changed files with 185 additions and 144 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

49
ui/src/components/QueuesOverviewTable.tsx
View File

@ -2,6 +2,12 @@ import React, { useState } from "react";
import clsx from "clsx"; import clsx from "clsx";
import { Link } from "react-router-dom"; import { Link } from "react-router-dom";
import { makeStyles } from "@material-ui/core/styles"; import { makeStyles } from "@material-ui/core/styles";
import Button from "@material-ui/core/Button";
import Dialog from "@material-ui/core/Dialog";
import DialogActions from "@material-ui/core/DialogActions";
import DialogContent from "@material-ui/core/DialogContent";
import DialogContentText from "@material-ui/core/DialogContentText";
import DialogTitle from "@material-ui/core/DialogTitle";
import Table from "@material-ui/core/Table"; import Table from "@material-ui/core/Table";
import TableBody from "@material-ui/core/TableBody"; import TableBody from "@material-ui/core/TableBody";
import TableCell from "@material-ui/core/TableCell"; import TableCell from "@material-ui/core/TableCell";
@ -112,6 +118,7 @@ export default function QueuesOverviewTable(props: Props) {
const [sortBy, setSortBy] = useState<SortBy>(SortBy.Queue); const [sortBy, setSortBy] = useState<SortBy>(SortBy.Queue);
const [sortDir, setSortDir] = useState<SortDirection>(SortDirection.Asc); const [sortDir, setSortDir] = useState<SortDirection>(SortDirection.Asc);
const [activeRowIndex, setActiveRowIndex] = useState<number>(-1); const [activeRowIndex, setActiveRowIndex] = useState<number>(-1);
const [queueToDelete, setQueueToDelete] = useState<Queue | null>(null);
const total = getAggregateCounts(props.queues); const total = getAggregateCounts(props.queues);
const createSortClickHandler = (sortKey: SortBy) => (e: React.MouseEvent) => { const createSortClickHandler = (sortKey: SortBy) => (e: React.MouseEvent) => {
@ -168,7 +175,12 @@ export default function QueuesOverviewTable(props: Props) {
} }
}; };
const handleDialogClose = () => {
setQueueToDelete(null);
};
return ( return (
<React.Fragment>
<TableContainer> <TableContainer>
<Table className={classes.table} aria-label="queues overview table"> <Table className={classes.table} aria-label="queues overview table">
<TableHead> <TableHead>
@ -275,9 +287,7 @@ export default function QueuesOverviewTable(props: Props) {
<PauseCircleFilledIcon /> <PauseCircleFilledIcon />
</IconButton> </IconButton>
)} )}
<IconButton <IconButton onClick={() => setQueueToDelete(q)}>
onClick={() => console.log("TODO: delete this queue")}
>
<DeleteIcon /> <DeleteIcon />
</IconButton> </IconButton>
</React.Fragment> </React.Fragment>
@ -293,7 +303,9 @@ export default function QueuesOverviewTable(props: Props) {
</TableBody> </TableBody>
<TableFooter> <TableFooter>
<TableRow> <TableRow>
<TableCell className={clsx(classes.fixedCell, classes.footerCell)}> <TableCell
className={clsx(classes.fixedCell, classes.footerCell)}
>
Total Total
</TableCell> </TableCell>
<TableCell className={classes.footerCell} align="right"> <TableCell className={classes.footerCell} align="right">
@ -318,6 +330,35 @@ export default function QueuesOverviewTable(props: Props) {
</TableFooter> </TableFooter>
</Table> </Table>
</TableContainer> </TableContainer>
<Dialog
open={queueToDelete !== null}
onClose={handleDialogClose}
aria-labelledby="alert-dialog-title"
aria-describedby="alert-dialog-description"
>
{queueToDelete !== null && (
<>
<DialogTitle id="alert-dialog-title">
Are you sure you want to delete "{queueToDelete.queue}"?
</DialogTitle>
<DialogContent>
<DialogContentText id="alert-dialog-description">
All of the tasks in the queue will be deleted. You can't undo
this action.
</DialogContentText>
</DialogContent>
<DialogActions>
<Button onClick={handleDialogClose} color="primary">
Cancel
</Button>
<Button onClick={handleDialogClose} color="primary" autoFocus>
Delete
</Button>
</DialogActions>
</>
)}
</Dialog>
</React.Fragment>
); );
} }