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

Make cancel button functional in ActiveTasksTable

Browse Source
This commit is contained in:
Ken Hibino 2020-12-05 14:31:33 -08:00
parent a737eea675
commit fa3e9ec761
2 changed files with 31 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
ui/src/components/ActiveTasksTable.tsx
View File

@ -21,14 +21,17 @@ import KeyboardArrowDownIcon from "@material-ui/icons/KeyboardArrowDown";
import Typography from "@material-ui/core/Typography"; import Typography from "@material-ui/core/Typography";
import SyntaxHighlighter from "react-syntax-highlighter"; import SyntaxHighlighter from "react-syntax-highlighter";
import syntaxHighlightStyle from "react-syntax-highlighter/dist/esm/styles/hljs/github"; import syntaxHighlightStyle from "react-syntax-highlighter/dist/esm/styles/hljs/github";
import { listActiveTasksAsync } from "../actions/tasksActions"; import {
listActiveTasksAsync,
cancelActiveTaskAsync,
} from "../actions/tasksActions";
import { AppState } from "../store"; import { AppState } from "../store";
import { ActiveTask } from "../api";
import TablePaginationActions, { import TablePaginationActions, {
rowsPerPageOptions, rowsPerPageOptions,
defaultPageSize, defaultPageSize,
} from "./TablePaginationActions"; } from "./TablePaginationActions";
import { usePolling } from "../hooks"; import { usePolling } from "../hooks";
import { ActiveTaskExtended } from "../reducers/tasksReducer";
const useStyles = makeStyles({ const useStyles = makeStyles({
table: { table: {
@ -44,7 +47,7 @@ function mapStateToProps(state: AppState) {
}; };
} }
const mapDispatchToProps = { listActiveTasksAsync }; const mapDispatchToProps = { listActiveTasksAsync, cancelActiveTaskAsync };
const connector = connect(mapStateToProps, mapDispatchToProps); const connector = connect(mapStateToProps, mapDispatchToProps);
@ -90,11 +93,11 @@ function ActiveTasksTable(props: Props & ReduxProps) {
); );
} }
const columns = [ const columns: { label: string; align: "left" | "center" | "right" }[] = [
{ label: "" }, { label: "", align: "left" },
{ label: "ID" }, { label: "ID", align: "left" },
{ label: "Type" }, { label: "Type", align: "left" },
{ label: "Actions" }, { label: "Actions", align: "center" },
]; ];
return ( return (
@ -108,14 +111,22 @@ function ActiveTasksTable(props: Props & ReduxProps) {
<TableHead> <TableHead>
<TableRow> <TableRow>
{columns.map((col) => ( {columns.map((col) => (
<TableCell key={col.label}>{col.label}</TableCell> <TableCell key={col.label} align={col.align}>
{col.label}
</TableCell>
))} ))}
</TableRow> </TableRow>
</TableHead> </TableHead>
<TableBody> <TableBody>
{/* TODO: loading and empty state */} {/* TODO: loading and empty state */}
{props.tasks.map((task) => ( {props.tasks.map((task) => (
<Row key={task.id} task={task} /> <Row
key={task.id}
task={task}
onCancelClick={() => {
props.cancelActiveTaskAsync(queue, task.id);
}}
/>
))} ))}
</TableBody> </TableBody>
<TableFooter> <TableFooter>
@ -149,7 +160,7 @@ const useRowStyles = makeStyles({
}, },
}); });
function Row(props: { task: ActiveTask }) { function Row(props: { task: ActiveTaskExtended; onCancelClick: () => void }) {
const { task } = props; const { task } = props;
const [open, setOpen] = React.useState(false); const [open, setOpen] = React.useState(false);
const classes = useRowStyles(); const classes = useRowStyles();
@ -169,8 +180,14 @@ function Row(props: { task: ActiveTask }) {
{task.id} {task.id}
</TableCell> </TableCell>
<TableCell>{task.type}</TableCell> <TableCell>{task.type}</TableCell>
<TableCell> <TableCell align="center">
<Button>Cancel</Button> <Button
color="primary"
onClick={props.onCancelClick}
disabled={task.requestPending || task.canceling}
>
{task.canceling ? "Canceling..." : "Cancel"}
</Button>
</TableCell> </TableCell>
</TableRow> </TableRow>
<TableRow> <TableRow>

2
ui/src/reducers/tasksReducer.ts
View File

@ -27,7 +27,7 @@ import {
ScheduledTask, ScheduledTask,
} from "../api"; } from "../api";
interface ActiveTaskExtended extends ActiveTask { export interface ActiveTaskExtended extends ActiveTask {
// Indicates that a request has been sent for this // Indicates that a request has been sent for this
// task and awaiting for a response. // task and awaiting for a response.
requestPending: boolean; requestPending: boolean;