mirror of
https://github.com/hibiken/asynqmon.git
synced 2025-09-17 20:20:25 +08:00
Initial commit
This commit is contained in:
Ken Hibino
195
ui/src/components/ActiveTasksTable.tsx
Normal file
195
ui/src/components/ActiveTasksTable.tsx
Normal file
@@ -0,0 +1,195 @@
|
||||
import React, { useEffect, useState } from "react";
|
||||
import { connect, ConnectedProps } from "react-redux";
|
||||
import { makeStyles } from "@material-ui/core/styles";
|
||||
import Table from "@material-ui/core/Table";
|
||||
import TableBody from "@material-ui/core/TableBody";
|
||||
import TableCell from "@material-ui/core/TableCell";
|
||||
import Alert from "@material-ui/lab/Alert";
|
||||
import AlertTitle from "@material-ui/lab/AlertTitle";
|
||||
import Button from "@material-ui/core/Button";
|
||||
import TableContainer from "@material-ui/core/TableContainer";
|
||||
import TableHead from "@material-ui/core/TableHead";
|
||||
import TableRow from "@material-ui/core/TableRow";
|
||||
import TableFooter from "@material-ui/core/TableFooter";
|
||||
import TablePagination from "@material-ui/core/TablePagination";
|
||||
import Paper from "@material-ui/core/Paper";
|
||||
import Box from "@material-ui/core/Box";
|
||||
import Collapse from "@material-ui/core/Collapse";
|
||||
import IconButton from "@material-ui/core/IconButton";
|
||||
import KeyboardArrowUpIcon from "@material-ui/icons/KeyboardArrowUp";
|
||||
import KeyboardArrowDownIcon from "@material-ui/icons/KeyboardArrowDown";
|
||||
import Typography from "@material-ui/core/Typography";
|
||||
import SyntaxHighlighter from "react-syntax-highlighter";
|
||||
import syntaxHighlightStyle from "react-syntax-highlighter/dist/esm/styles/hljs/github";
|
||||
import { listActiveTasksAsync } from "../actions/tasksActions";
|
||||
import { AppState } from "../store";
|
||||
import { ActiveTask } from "../api";
|
||||
import TablePaginationActions, {
|
||||
rowsPerPageOptions,
|
||||
defaultPageSize,
|
||||
} from "./TablePaginationActions";
|
||||
|
||||
const useStyles = makeStyles({
|
||||
table: {
|
||||
minWidth: 650,
|
||||
},
|
||||
});
|
||||
|
||||
function mapStateToProps(state: AppState) {
|
||||
return {
|
||||
loading: state.tasks.activeTasks.loading,
|
||||
tasks: state.tasks.activeTasks.data,
|
||||
pollInterval: state.settings.pollInterval,
|
||||
};
|
||||
}
|
||||
|
||||
const mapDispatchToProps = { listActiveTasksAsync };
|
||||
|
||||
const connector = connect(mapStateToProps, mapDispatchToProps);
|
||||
|
||||
type ReduxProps = ConnectedProps<typeof connector>;
|
||||
|
||||
interface Props {
|
||||
queue: string; // name of the queue
|
||||
}
|
||||
|
||||
function ActiveTasksTable(props: Props & ReduxProps) {
|
||||
const { pollInterval, listActiveTasksAsync, queue } = props;
|
||||
const classes = useStyles();
|
||||
const [page, setPage] = useState(0);
|
||||
const [pageSize, setPageSize] = useState(defaultPageSize);
|
||||
|
||||
const handleChangePage = (
|
||||
event: React.MouseEvent<HTMLButtonElement> | null,
|
||||
newPage: number
|
||||
) => {
|
||||
setPage(newPage);
|
||||
};
|
||||
|
||||
const handleChangeRowsPerPage = (
|
||||
event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
|
||||
) => {
|
||||
setPageSize(parseInt(event.target.value, 10));
|
||||
setPage(0);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
listActiveTasksAsync(queue);
|
||||
const interval = setInterval(
|
||||
() => listActiveTasksAsync(queue),
|
||||
pollInterval * 1000
|
||||
);
|
||||
return () => clearInterval(interval);
|
||||
}, [pollInterval, listActiveTasksAsync, queue]);
|
||||
|
||||
if (props.tasks.length === 0) {
|
||||
return (
|
||||
<Alert severity="info">
|
||||
<AlertTitle>Info</AlertTitle>
|
||||
No active tasks at this time.
|
||||
</Alert>
|
||||
);
|
||||
}
|
||||
|
||||
const columns = [
|
||||
{ label: "" },
|
||||
{ label: "ID" },
|
||||
{ label: "Type" },
|
||||
{ label: "Actions" },
|
||||
];
|
||||
|
||||
return (
|
||||
<TableContainer component={Paper}>
|
||||
<Table
|
||||
stickyHeader={true}
|
||||
className={classes.table}
|
||||
aria-label="active tasks table"
|
||||
size="small"
|
||||
>
|
||||
<TableHead>
|
||||
<TableRow>
|
||||
{columns.map((col) => (
|
||||
<TableCell key={col.label}>{col.label}</TableCell>
|
||||
))}
|
||||
</TableRow>
|
||||
</TableHead>
|
||||
<TableBody>
|
||||
{/* TODO: loading and empty state */}
|
||||
{props.tasks.map((task) => (
|
||||
<Row key={task.id} task={task} />
|
||||
))}
|
||||
</TableBody>
|
||||
<TableFooter>
|
||||
<TableRow>
|
||||
<TablePagination
|
||||
rowsPerPageOptions={rowsPerPageOptions}
|
||||
colSpan={columns.length}
|
||||
count={props.tasks.length}
|
||||
rowsPerPage={pageSize}
|
||||
page={page}
|
||||
SelectProps={{
|
||||
inputProps: { "aria-label": "rows per page" },
|
||||
native: true,
|
||||
}}
|
||||
onChangePage={handleChangePage}
|
||||
onChangeRowsPerPage={handleChangeRowsPerPage}
|
||||
ActionsComponent={TablePaginationActions}
|
||||
/>
|
||||
</TableRow>
|
||||
</TableFooter>
|
||||
</Table>
|
||||
</TableContainer>
|
||||
);
|
||||
}
|
||||
|
||||
const useRowStyles = makeStyles({
|
||||
root: {
|
||||
"& > *": {
|
||||
borderBottom: "unset",
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
function Row(props: { task: ActiveTask }) {
|
||||
const { task } = props;
|
||||
const [open, setOpen] = React.useState(false);
|
||||
const classes = useRowStyles();
|
||||
return (
|
||||
<React.Fragment>
|
||||
<TableRow key={task.id} className={classes.root}>
|
||||
<TableCell>
|
||||
<IconButton
|
||||
aria-label="expand row"
|
||||
size="small"
|
||||
onClick={() => setOpen(!open)}
|
||||
>
|
||||
{open ? <KeyboardArrowUpIcon /> : <KeyboardArrowDownIcon />}
|
||||
</IconButton>
|
||||
</TableCell>
|
||||
<TableCell component="th" scope="row">
|
||||
{task.id}
|
||||
</TableCell>
|
||||
<TableCell>{task.type}</TableCell>
|
||||
<TableCell>
|
||||
<Button>Cancel</Button>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
<TableRow>
|
||||
<TableCell style={{ paddingBottom: 0, paddingTop: 0 }} colSpan={6}>
|
||||
<Collapse in={open} timeout="auto" unmountOnExit>
|
||||
<Box margin={1}>
|
||||
<Typography variant="h6" gutterBottom component="div">
|
||||
Payload
|
||||
</Typography>
|
||||
<SyntaxHighlighter language="json" style={syntaxHighlightStyle}>
|
||||
{JSON.stringify(task.payload, null, 2)}
|
||||
</SyntaxHighlighter>
|
||||
</Box>
|
||||
</Collapse>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
</React.Fragment>
|
||||
);
|
||||
}
|
||||
|
||||
export default connector(ActiveTasksTable);
|
||||
200
ui/src/components/DeadTasksTable.tsx
Normal file
200
ui/src/components/DeadTasksTable.tsx
Normal file
@@ -0,0 +1,200 @@
|
||||
import React, { useState, useEffect } from "react";
|
||||
import { connect, ConnectedProps } from "react-redux";
|
||||
import { makeStyles } from "@material-ui/core/styles";
|
||||
import Table from "@material-ui/core/Table";
|
||||
import TableBody from "@material-ui/core/TableBody";
|
||||
import TableCell from "@material-ui/core/TableCell";
|
||||
import Button from "@material-ui/core/Button";
|
||||
import TableContainer from "@material-ui/core/TableContainer";
|
||||
import TableHead from "@material-ui/core/TableHead";
|
||||
import TableRow from "@material-ui/core/TableRow";
|
||||
import Paper from "@material-ui/core/Paper";
|
||||
import Box from "@material-ui/core/Box";
|
||||
import Collapse from "@material-ui/core/Collapse";
|
||||
import IconButton from "@material-ui/core/IconButton";
|
||||
import KeyboardArrowUpIcon from "@material-ui/icons/KeyboardArrowUp";
|
||||
import KeyboardArrowDownIcon from "@material-ui/icons/KeyboardArrowDown";
|
||||
import Typography from "@material-ui/core/Typography";
|
||||
import TableFooter from "@material-ui/core/TableFooter";
|
||||
import TablePagination from "@material-ui/core/TablePagination";
|
||||
import Alert from "@material-ui/lab/Alert";
|
||||
import AlertTitle from "@material-ui/lab/AlertTitle";
|
||||
import SyntaxHighlighter from "react-syntax-highlighter";
|
||||
import syntaxHighlightStyle from "react-syntax-highlighter/dist/esm/styles/hljs/github";
|
||||
import { AppState } from "../store";
|
||||
import { listDeadTasksAsync } from "../actions/tasksActions";
|
||||
import { DeadTask } from "../api";
|
||||
import TablePaginationActions, {
|
||||
defaultPageSize,
|
||||
rowsPerPageOptions,
|
||||
} from "./TablePaginationActions";
|
||||
import { timeAgo } from "../timeutil";
|
||||
|
||||
const useStyles = makeStyles({
|
||||
table: {
|
||||
minWidth: 650,
|
||||
},
|
||||
});
|
||||
|
||||
const useRowStyles = makeStyles({
|
||||
root: {
|
||||
"& > *": {
|
||||
borderBottom: "unset",
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
function mapStateToProps(state: AppState) {
|
||||
return {
|
||||
loading: state.tasks.deadTasks.loading,
|
||||
tasks: state.tasks.deadTasks.data,
|
||||
pollInterval: state.settings.pollInterval,
|
||||
};
|
||||
}
|
||||
|
||||
const mapDispatchToProps = { listDeadTasksAsync };
|
||||
|
||||
const connector = connect(mapStateToProps, mapDispatchToProps);
|
||||
|
||||
type ReduxProps = ConnectedProps<typeof connector>;
|
||||
|
||||
interface Props {
|
||||
queue: string; // name of the queue.
|
||||
totalTaskCount: number; // totoal number of dead tasks.
|
||||
}
|
||||
|
||||
function DeadTasksTable(props: Props & ReduxProps) {
|
||||
const { pollInterval, listDeadTasksAsync, queue } = props;
|
||||
const classes = useStyles();
|
||||
const [page, setPage] = useState(0);
|
||||
const [pageSize, setPageSize] = useState(defaultPageSize);
|
||||
|
||||
const handleChangePage = (
|
||||
event: React.MouseEvent<HTMLButtonElement> | null,
|
||||
newPage: number
|
||||
) => {
|
||||
setPage(newPage);
|
||||
};
|
||||
|
||||
const handleChangeRowsPerPage = (
|
||||
event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
|
||||
) => {
|
||||
setPageSize(parseInt(event.target.value, 10));
|
||||
setPage(0);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
const pageOpts = { page: page + 1, size: pageSize };
|
||||
listDeadTasksAsync(queue, pageOpts);
|
||||
const interval = setInterval(() => {
|
||||
listDeadTasksAsync(queue, pageOpts);
|
||||
}, pollInterval * 1000);
|
||||
return () => clearInterval(interval);
|
||||
}, [pollInterval, listDeadTasksAsync, queue, page, pageSize]);
|
||||
|
||||
if (props.tasks.length === 0) {
|
||||
return (
|
||||
<Alert severity="info">
|
||||
<AlertTitle>Info</AlertTitle>
|
||||
No dead tasks at this time.
|
||||
</Alert>
|
||||
);
|
||||
}
|
||||
|
||||
const columns = [
|
||||
{ label: "" },
|
||||
{ label: "ID" },
|
||||
{ label: "Type" },
|
||||
{ label: "Last Failed" },
|
||||
{ label: "Last Error" },
|
||||
{ label: "Actions" },
|
||||
];
|
||||
|
||||
return (
|
||||
<TableContainer component={Paper}>
|
||||
<Table
|
||||
stickyHeader={true}
|
||||
className={classes.table}
|
||||
aria-label="dead tasks table"
|
||||
size="small"
|
||||
>
|
||||
<TableHead>
|
||||
<TableRow>
|
||||
{columns.map((col) => (
|
||||
<TableCell key={col.label}>{col.label}</TableCell>
|
||||
))}
|
||||
</TableRow>
|
||||
</TableHead>
|
||||
<TableBody>
|
||||
{props.tasks.map((task) => (
|
||||
<Row key={task.id} task={task} />
|
||||
))}
|
||||
</TableBody>
|
||||
<TableFooter>
|
||||
<TableRow>
|
||||
<TablePagination
|
||||
rowsPerPageOptions={rowsPerPageOptions}
|
||||
colSpan={columns.length}
|
||||
count={props.totalTaskCount}
|
||||
rowsPerPage={pageSize}
|
||||
page={page}
|
||||
SelectProps={{
|
||||
inputProps: { "aria-label": "rows per page" },
|
||||
native: true,
|
||||
}}
|
||||
onChangePage={handleChangePage}
|
||||
onChangeRowsPerPage={handleChangeRowsPerPage}
|
||||
ActionsComponent={TablePaginationActions}
|
||||
/>
|
||||
</TableRow>
|
||||
</TableFooter>
|
||||
</Table>
|
||||
</TableContainer>
|
||||
);
|
||||
}
|
||||
|
||||
function Row(props: { task: DeadTask }) {
|
||||
const { task } = props;
|
||||
const [open, setOpen] = React.useState(false);
|
||||
const classes = useRowStyles();
|
||||
return (
|
||||
<React.Fragment>
|
||||
<TableRow key={task.id} className={classes.root}>
|
||||
<TableCell>
|
||||
<IconButton
|
||||
aria-label="expand row"
|
||||
size="small"
|
||||
onClick={() => setOpen(!open)}
|
||||
>
|
||||
{open ? <KeyboardArrowUpIcon /> : <KeyboardArrowDownIcon />}
|
||||
</IconButton>
|
||||
</TableCell>
|
||||
<TableCell component="th" scope="row">
|
||||
{task.id}
|
||||
</TableCell>
|
||||
<TableCell>{task.type}</TableCell>
|
||||
<TableCell>{timeAgo(task.last_failed_at)}</TableCell>
|
||||
<TableCell>{task.error_message}</TableCell>
|
||||
<TableCell>
|
||||
<Button>Cancel</Button>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
<TableRow>
|
||||
<TableCell style={{ paddingBottom: 0, paddingTop: 0 }} colSpan={6}>
|
||||
<Collapse in={open} timeout="auto" unmountOnExit>
|
||||
<Box margin={1}>
|
||||
<Typography variant="h6" gutterBottom component="div">
|
||||
Payload
|
||||
</Typography>
|
||||
<SyntaxHighlighter language="json" style={syntaxHighlightStyle}>
|
||||
{JSON.stringify(task.payload, null, 2)}
|
||||
</SyntaxHighlighter>
|
||||
</Box>
|
||||
</Collapse>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
</React.Fragment>
|
||||
);
|
||||
}
|
||||
|
||||
export default connector(DeadTasksTable);
|
||||
68
ui/src/components/ListItemLink.tsx
Normal file
68
ui/src/components/ListItemLink.tsx
Normal file
@@ -0,0 +1,68 @@
|
||||
import React, { ReactElement } from "react";
|
||||
import clsx from "clsx";
|
||||
import ListItem from "@material-ui/core/ListItem";
|
||||
import ListItemIcon from "@material-ui/core/ListItemIcon";
|
||||
import ListItemText from "@material-ui/core/ListItemText";
|
||||
import { makeStyles } from "@material-ui/core/styles";
|
||||
import {
|
||||
useRouteMatch,
|
||||
Link as RouterLink,
|
||||
LinkProps as RouterLinkProps,
|
||||
} from "react-router-dom";
|
||||
|
||||
const useStyles = makeStyles({
|
||||
listItem: {
|
||||
borderTopRightRadius: "24px",
|
||||
borderBottomRightRadius: "24px",
|
||||
},
|
||||
selected: {
|
||||
backgroundColor: "rgba(0, 0, 0, 0.07)",
|
||||
},
|
||||
boldText: {
|
||||
fontWeight: 600,
|
||||
},
|
||||
});
|
||||
|
||||
interface Props {
|
||||
to: string;
|
||||
primary: string;
|
||||
icon?: ReactElement;
|
||||
}
|
||||
|
||||
// Note: See https://material-ui.com/guides/composition/ for details.
|
||||
function ListItemLink(props: Props): ReactElement {
|
||||
const classes = useStyles();
|
||||
const { icon, primary, to } = props;
|
||||
const isMatch = useRouteMatch({
|
||||
path: to,
|
||||
strict: true,
|
||||
sensitive: true,
|
||||
exact: true,
|
||||
});
|
||||
const renderLink = React.useMemo(
|
||||
() =>
|
||||
React.forwardRef<any, Omit<RouterLinkProps, "to">>((itemProps, ref) => (
|
||||
<RouterLink to={to} ref={ref} {...itemProps} />
|
||||
)),
|
||||
[to]
|
||||
);
|
||||
return (
|
||||
<li>
|
||||
<ListItem
|
||||
button
|
||||
component={renderLink}
|
||||
className={clsx(classes.listItem, isMatch && classes.selected)}
|
||||
>
|
||||
{icon ? <ListItemIcon>{icon}</ListItemIcon> : null}
|
||||
<ListItemText
|
||||
primary={primary}
|
||||
classes={{
|
||||
primary: isMatch ? classes.boldText : undefined,
|
||||
}}
|
||||
/>
|
||||
</ListItem>
|
||||
</li>
|
||||
);
|
||||
}
|
||||
|
||||
export default ListItemLink;
|
||||
195
ui/src/components/PendingTasksTable.tsx
Normal file
195
ui/src/components/PendingTasksTable.tsx
Normal file
@@ -0,0 +1,195 @@
|
||||
import React, { useEffect, useState } from "react";
|
||||
import { connect, ConnectedProps } from "react-redux";
|
||||
import { makeStyles } from "@material-ui/core/styles";
|
||||
import Table from "@material-ui/core/Table";
|
||||
import TableBody from "@material-ui/core/TableBody";
|
||||
import TableCell from "@material-ui/core/TableCell";
|
||||
import Alert from "@material-ui/lab/Alert";
|
||||
import AlertTitle from "@material-ui/lab/AlertTitle";
|
||||
import Button from "@material-ui/core/Button";
|
||||
import TableContainer from "@material-ui/core/TableContainer";
|
||||
import TableHead from "@material-ui/core/TableHead";
|
||||
import TableRow from "@material-ui/core/TableRow";
|
||||
import Paper from "@material-ui/core/Paper";
|
||||
import Box from "@material-ui/core/Box";
|
||||
import Collapse from "@material-ui/core/Collapse";
|
||||
import IconButton from "@material-ui/core/IconButton";
|
||||
import KeyboardArrowUpIcon from "@material-ui/icons/KeyboardArrowUp";
|
||||
import KeyboardArrowDownIcon from "@material-ui/icons/KeyboardArrowDown";
|
||||
import Typography from "@material-ui/core/Typography";
|
||||
import TableFooter from "@material-ui/core/TableFooter";
|
||||
import TablePagination from "@material-ui/core/TablePagination";
|
||||
import SyntaxHighlighter from "react-syntax-highlighter";
|
||||
import syntaxHighlightStyle from "react-syntax-highlighter/dist/esm/styles/hljs/github";
|
||||
import TablePaginationActions, {
|
||||
defaultPageSize,
|
||||
rowsPerPageOptions,
|
||||
} from "./TablePaginationActions";
|
||||
import { listPendingTasksAsync } from "../actions/tasksActions";
|
||||
import { AppState } from "../store";
|
||||
import { PendingTask } from "../api";
|
||||
|
||||
const useStyles = makeStyles({
|
||||
table: {
|
||||
minWidth: 650,
|
||||
},
|
||||
});
|
||||
|
||||
function mapStateToProps(state: AppState) {
|
||||
return {
|
||||
loading: state.tasks.pendingTasks.loading,
|
||||
tasks: state.tasks.pendingTasks.data,
|
||||
pollInterval: state.settings.pollInterval,
|
||||
};
|
||||
}
|
||||
|
||||
const mapDispatchToProps = { listPendingTasksAsync };
|
||||
|
||||
const connector = connect(mapStateToProps, mapDispatchToProps);
|
||||
|
||||
type ReduxProps = ConnectedProps<typeof connector>;
|
||||
|
||||
interface Props {
|
||||
queue: string;
|
||||
totalTaskCount: number; // total number of pending tasks
|
||||
}
|
||||
|
||||
function PendingTasksTable(props: Props & ReduxProps) {
|
||||
const { pollInterval, listPendingTasksAsync, queue } = props;
|
||||
const classes = useStyles();
|
||||
const [page, setPage] = useState(0);
|
||||
const [pageSize, setPageSize] = useState(defaultPageSize);
|
||||
|
||||
const handleChangePage = (
|
||||
event: React.MouseEvent<HTMLButtonElement> | null,
|
||||
newPage: number
|
||||
) => {
|
||||
setPage(newPage);
|
||||
};
|
||||
|
||||
const handleChangeRowsPerPage = (
|
||||
event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
|
||||
) => {
|
||||
setPageSize(parseInt(event.target.value, 10));
|
||||
setPage(0);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
const pageOpts = { page: page + 1, size: pageSize };
|
||||
listPendingTasksAsync(queue, pageOpts);
|
||||
const interval = setInterval(() => {
|
||||
listPendingTasksAsync(queue, pageOpts);
|
||||
}, pollInterval * 1000);
|
||||
return () => clearInterval(interval);
|
||||
}, [pollInterval, listPendingTasksAsync, queue, page, pageSize]);
|
||||
|
||||
if (props.tasks.length === 0) {
|
||||
return (
|
||||
<Alert severity="info">
|
||||
<AlertTitle>Info</AlertTitle>
|
||||
No pending tasks at this time.
|
||||
</Alert>
|
||||
);
|
||||
}
|
||||
|
||||
const columns = [
|
||||
{ label: "" },
|
||||
{ label: "ID" },
|
||||
{ label: "Type" },
|
||||
{ label: "Actions" },
|
||||
];
|
||||
|
||||
return (
|
||||
<TableContainer component={Paper}>
|
||||
<Table
|
||||
stickyHeader={true}
|
||||
className={classes.table}
|
||||
aria-label="pending tasks table"
|
||||
size="small"
|
||||
>
|
||||
<TableHead>
|
||||
<TableRow>
|
||||
{columns.map((col) => (
|
||||
<TableCell key={col.label}>{col.label}</TableCell>
|
||||
))}
|
||||
</TableRow>
|
||||
</TableHead>
|
||||
<TableBody>
|
||||
{props.tasks.map((task) => (
|
||||
<Row key={task.id} task={task} />
|
||||
))}
|
||||
</TableBody>
|
||||
<TableFooter>
|
||||
<TableRow>
|
||||
<TablePagination
|
||||
rowsPerPageOptions={rowsPerPageOptions}
|
||||
colSpan={columns.length}
|
||||
count={props.totalTaskCount}
|
||||
rowsPerPage={pageSize}
|
||||
page={page}
|
||||
SelectProps={{
|
||||
inputProps: { "aria-label": "rows per page" },
|
||||
native: true,
|
||||
}}
|
||||
onChangePage={handleChangePage}
|
||||
onChangeRowsPerPage={handleChangeRowsPerPage}
|
||||
ActionsComponent={TablePaginationActions}
|
||||
/>
|
||||
</TableRow>
|
||||
</TableFooter>
|
||||
</Table>
|
||||
</TableContainer>
|
||||
);
|
||||
}
|
||||
|
||||
const useRowStyles = makeStyles({
|
||||
root: {
|
||||
"& > *": {
|
||||
borderBottom: "unset",
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
function Row(props: { task: PendingTask }) {
|
||||
const { task } = props;
|
||||
const [open, setOpen] = React.useState(false);
|
||||
const classes = useRowStyles();
|
||||
return (
|
||||
<React.Fragment>
|
||||
<TableRow key={task.id} className={classes.root}>
|
||||
<TableCell>
|
||||
<IconButton
|
||||
aria-label="expand row"
|
||||
size="small"
|
||||
onClick={() => setOpen(!open)}
|
||||
>
|
||||
{open ? <KeyboardArrowUpIcon /> : <KeyboardArrowDownIcon />}
|
||||
</IconButton>
|
||||
</TableCell>
|
||||
<TableCell component="th" scope="row">
|
||||
{task.id}
|
||||
</TableCell>
|
||||
<TableCell>{task.type}</TableCell>
|
||||
<TableCell>
|
||||
<Button>Cancel</Button>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
<TableRow>
|
||||
<TableCell style={{ paddingBottom: 0, paddingTop: 0 }} colSpan={8}>
|
||||
<Collapse in={open} timeout="auto" unmountOnExit>
|
||||
<Box margin={1}>
|
||||
<Typography variant="h6" gutterBottom component="div">
|
||||
Payload
|
||||
</Typography>
|
||||
<SyntaxHighlighter language="json" style={syntaxHighlightStyle}>
|
||||
{JSON.stringify(task.payload, null, 2)}
|
||||
</SyntaxHighlighter>
|
||||
</Box>
|
||||
</Collapse>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
</React.Fragment>
|
||||
);
|
||||
}
|
||||
|
||||
export default connector(PendingTasksTable);
|
||||
45
ui/src/components/ProcessedTasksChart.tsx
Normal file
45
ui/src/components/ProcessedTasksChart.tsx
Normal file
@@ -0,0 +1,45 @@
|
||||
import React from "react";
|
||||
import {
|
||||
BarChart,
|
||||
Bar,
|
||||
XAxis,
|
||||
YAxis,
|
||||
CartesianGrid,
|
||||
Tooltip,
|
||||
Legend,
|
||||
ResponsiveContainer,
|
||||
} from "recharts";
|
||||
import { useTheme, Theme } from "@material-ui/core/styles";
|
||||
|
||||
interface Props {
|
||||
data: ProcessedStats[];
|
||||
}
|
||||
|
||||
interface ProcessedStats {
|
||||
queue: string; // name of the queue.
|
||||
succeeded: number; // number of tasks succeeded.
|
||||
failed: number; // number of tasks failed.
|
||||
}
|
||||
|
||||
function ProcessedTasksChart(props: Props) {
|
||||
const theme = useTheme<Theme>();
|
||||
return (
|
||||
<ResponsiveContainer>
|
||||
<BarChart data={props.data} maxBarSize={100}>
|
||||
<CartesianGrid strokeDasharray="3 3" />
|
||||
<XAxis dataKey="queue" />
|
||||
<YAxis />
|
||||
<Tooltip />
|
||||
<Legend />
|
||||
<Bar
|
||||
dataKey="succeeded"
|
||||
stackId="a"
|
||||
fill={theme.palette.success.light}
|
||||
/>
|
||||
<Bar dataKey="failed" stackId="a" fill={theme.palette.error.light} />
|
||||
</BarChart>
|
||||
</ResponsiveContainer>
|
||||
);
|
||||
}
|
||||
|
||||
export default ProcessedTasksChart;
|
||||
45
ui/src/components/QueueSizeChart.tsx
Normal file
45
ui/src/components/QueueSizeChart.tsx
Normal file
@@ -0,0 +1,45 @@
|
||||
import React from "react";
|
||||
import {
|
||||
BarChart,
|
||||
Bar,
|
||||
XAxis,
|
||||
YAxis,
|
||||
CartesianGrid,
|
||||
Tooltip,
|
||||
Legend,
|
||||
ResponsiveContainer,
|
||||
} from "recharts";
|
||||
|
||||
interface Props {
|
||||
data: TaskBreakdown[];
|
||||
}
|
||||
|
||||
interface TaskBreakdown {
|
||||
queue: string; // name of the queue.
|
||||
active: number; // number of active tasks in the queue.
|
||||
pending: number; // number of pending tasks in the queue.
|
||||
scheduled: number; // number of scheduled tasks in the queue.
|
||||
retry: number; // number of retry tasks in the queue.
|
||||
dead: number; // number of dead tasks in the queue.
|
||||
}
|
||||
|
||||
function QueueSizeChart(props: Props) {
|
||||
return (
|
||||
<ResponsiveContainer>
|
||||
<BarChart data={props.data}>
|
||||
<CartesianGrid strokeDasharray="3 3" />
|
||||
<XAxis dataKey="queue" />
|
||||
<YAxis />
|
||||
<Tooltip />
|
||||
<Legend />
|
||||
<Bar dataKey="active" stackId="a" fill="#7bb3ff" />
|
||||
<Bar dataKey="pending" stackId="a" fill="#e86af0" />
|
||||
<Bar dataKey="scheduled" stackId="a" fill="#9e379f" />
|
||||
<Bar dataKey="retry" stackId="a" fill="#493267" />
|
||||
<Bar dataKey="dead" stackId="a" fill="#373854" />
|
||||
</BarChart>
|
||||
</ResponsiveContainer>
|
||||
);
|
||||
}
|
||||
|
||||
export default QueueSizeChart;
|
||||
348
ui/src/components/QueuesOverviewTable.tsx
Normal file
348
ui/src/components/QueuesOverviewTable.tsx
Normal file
@@ -0,0 +1,348 @@
|
||||
import React, { useState } from "react";
|
||||
import clsx from "clsx";
|
||||
import { Link } from "react-router-dom";
|
||||
import { makeStyles } from "@material-ui/core/styles";
|
||||
import Table from "@material-ui/core/Table";
|
||||
import TableBody from "@material-ui/core/TableBody";
|
||||
import TableCell from "@material-ui/core/TableCell";
|
||||
import TableContainer from "@material-ui/core/TableContainer";
|
||||
import TableHead from "@material-ui/core/TableHead";
|
||||
import TableRow from "@material-ui/core/TableRow";
|
||||
import TableFooter from "@material-ui/core/TableFooter";
|
||||
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 { Queue } from "../api";
|
||||
import { queueDetailsPath } from "../paths";
|
||||
|
||||
const useStyles = makeStyles((theme) => ({
|
||||
table: {
|
||||
minWidth: 650,
|
||||
},
|
||||
linkCell: {
|
||||
textDecoration: "none",
|
||||
},
|
||||
footerCell: {
|
||||
fontWeight: 600,
|
||||
fontSize: "0.875rem",
|
||||
borderBottom: "none",
|
||||
},
|
||||
boldCell: {
|
||||
fontWeight: 600,
|
||||
},
|
||||
fixedCell: {
|
||||
position: "sticky",
|
||||
zIndex: 1,
|
||||
left: 0,
|
||||
background: theme.palette.common.white,
|
||||
},
|
||||
}));
|
||||
|
||||
interface QueueWithMetadata extends Queue {
|
||||
pauseRequestPending: boolean; // indicates pause/resume request is pending for the queue.
|
||||
}
|
||||
|
||||
interface Props {
|
||||
queues: QueueWithMetadata[];
|
||||
onPauseClick: (qname: string) => Promise<void>;
|
||||
onResumeClick: (qname: string) => Promise<void>;
|
||||
}
|
||||
|
||||
enum SortBy {
|
||||
Queue,
|
||||
Size,
|
||||
Active,
|
||||
Pending,
|
||||
Scheduled,
|
||||
Retry,
|
||||
Dead,
|
||||
Processed,
|
||||
Succeeded,
|
||||
Failed,
|
||||
}
|
||||
|
||||
enum SortDirection {
|
||||
Asc = "asc",
|
||||
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 },
|
||||
];
|
||||
|
||||
// sortQueues takes a array of queues and return a sorted array.
|
||||
// It returns a new array and leave the original array untouched.
|
||||
function sortQueues(
|
||||
queues: QueueWithMetadata[],
|
||||
cmpFn: (first: QueueWithMetadata, second: QueueWithMetadata) => number
|
||||
): QueueWithMetadata[] {
|
||||
let copy = [...queues];
|
||||
copy.sort(cmpFn);
|
||||
return copy;
|
||||
}
|
||||
|
||||
export default function QueuesOverviewTable(props: Props) {
|
||||
const classes = useStyles();
|
||||
const [sortBy, setSortBy] = useState<SortBy>(SortBy.Queue);
|
||||
const [sortDir, setSortDir] = useState<SortDirection>(SortDirection.Asc);
|
||||
const total = getAggregateCounts(props.queues);
|
||||
|
||||
const createSortClickHandler = (sortKey: SortBy) => (e: React.MouseEvent) => {
|
||||
if (sortKey === sortBy) {
|
||||
// Toggle sort direction.
|
||||
const nextSortDir =
|
||||
sortDir === SortDirection.Asc ? SortDirection.Desc : SortDirection.Asc;
|
||||
setSortDir(nextSortDir);
|
||||
} else {
|
||||
// Change the sort key.
|
||||
setSortBy(sortKey);
|
||||
}
|
||||
};
|
||||
|
||||
const cmpFunc = (q1: QueueWithMetadata, q2: QueueWithMetadata): number => {
|
||||
let isQ1Smaller: boolean;
|
||||
switch (sortBy) {
|
||||
case SortBy.Queue:
|
||||
if (q1.queue === q2.queue) return 0;
|
||||
isQ1Smaller = q1.queue < q2.queue;
|
||||
break;
|
||||
case SortBy.Size:
|
||||
if (q1.size === q2.size) return 0;
|
||||
isQ1Smaller = q1.size < q2.size;
|
||||
break;
|
||||
case SortBy.Active:
|
||||
if (q1.active === q2.active) return 0;
|
||||
isQ1Smaller = q1.active < q2.active;
|
||||
break;
|
||||
case SortBy.Pending:
|
||||
if (q1.pending === q2.pending) return 0;
|
||||
isQ1Smaller = q1.pending < q2.pending;
|
||||
break;
|
||||
case SortBy.Scheduled:
|
||||
if (q1.scheduled === q2.scheduled) return 0;
|
||||
isQ1Smaller = q1.scheduled < q2.scheduled;
|
||||
break;
|
||||
case SortBy.Retry:
|
||||
if (q1.retry === q2.retry) return 0;
|
||||
isQ1Smaller = q1.retry < q2.retry;
|
||||
break;
|
||||
case SortBy.Dead:
|
||||
if (q1.dead === q2.dead) return 0;
|
||||
isQ1Smaller = q1.dead < q2.dead;
|
||||
break;
|
||||
case SortBy.Processed:
|
||||
if (q1.processed === q2.processed) return 0;
|
||||
isQ1Smaller = q1.processed < q2.processed;
|
||||
break;
|
||||
case SortBy.Succeeded:
|
||||
const q1Succeeded = q1.processed - q1.failed;
|
||||
const q2Succeeded = q2.processed - q2.failed;
|
||||
if (q1Succeeded === q2Succeeded) return 0;
|
||||
isQ1Smaller = q1Succeeded < q2Succeeded;
|
||||
break;
|
||||
case SortBy.Failed:
|
||||
if (q1.failed === q2.failed) return 0;
|
||||
isQ1Smaller = q1.failed < q2.failed;
|
||||
break;
|
||||
default:
|
||||
// eslint-disable-next-line no-throw-literal
|
||||
throw `Unexpected order by value: ${sortBy}`;
|
||||
}
|
||||
if (sortDir === SortDirection.Asc) {
|
||||
return isQ1Smaller ? -1 : 1;
|
||||
} else {
|
||||
return isQ1Smaller ? 1 : -1;
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<TableContainer>
|
||||
<Table className={classes.table} aria-label="queues overview table">
|
||||
<TableHead>
|
||||
<TableRow>
|
||||
{columnConfig.map((cfg, i) => (
|
||||
<TableCell
|
||||
key={cfg.key}
|
||||
align={i === 0 ? "left" : "right"}
|
||||
className={clsx(i === 0 && classes.fixedCell)}
|
||||
>
|
||||
<TableSortLabel
|
||||
active={sortBy === cfg.sortBy}
|
||||
direction={sortDir}
|
||||
onClick={createSortClickHandler(cfg.sortBy)}
|
||||
>
|
||||
{cfg.label}
|
||||
</TableSortLabel>
|
||||
</TableCell>
|
||||
))}
|
||||
</TableRow>
|
||||
</TableHead>
|
||||
<TableBody>
|
||||
{sortQueues(props.queues, cmpFunc).map((q) => (
|
||||
<TableRow key={q.queue}>
|
||||
<TableCell
|
||||
component="th"
|
||||
scope="row"
|
||||
className={clsx(classes.boldCell, classes.fixedCell)}
|
||||
>
|
||||
<Link to={queueDetailsPath(q.queue)}>
|
||||
{q.queue}
|
||||
{q.paused ? " (paused)" : ""}
|
||||
</Link>
|
||||
</TableCell>
|
||||
<TableCell align="right" className={classes.boldCell}>
|
||||
{q.size}
|
||||
</TableCell>
|
||||
<TableCell align="right">
|
||||
<Link
|
||||
to={queueDetailsPath(q.queue, "active")}
|
||||
className={classes.linkCell}
|
||||
>
|
||||
{q.active}
|
||||
</Link>
|
||||
</TableCell>
|
||||
<TableCell align="right">
|
||||
<Link
|
||||
to={queueDetailsPath(q.queue, "pending")}
|
||||
className={classes.linkCell}
|
||||
>
|
||||
{q.pending}
|
||||
</Link>
|
||||
</TableCell>
|
||||
<TableCell align="right">
|
||||
<Link
|
||||
to={queueDetailsPath(q.queue, "scheduled")}
|
||||
className={classes.linkCell}
|
||||
>
|
||||
{q.scheduled}
|
||||
</Link>
|
||||
</TableCell>
|
||||
<TableCell align="right">
|
||||
<Link
|
||||
to={queueDetailsPath(q.queue, "retry")}
|
||||
className={classes.linkCell}
|
||||
>
|
||||
{q.retry}
|
||||
</Link>
|
||||
</TableCell>
|
||||
<TableCell align="right">
|
||||
<Link
|
||||
to={queueDetailsPath(q.queue, "dead")}
|
||||
className={classes.linkCell}
|
||||
>
|
||||
{q.dead}
|
||||
</Link>
|
||||
</TableCell>
|
||||
<TableCell align="right" className={classes.boldCell}>
|
||||
{q.processed}
|
||||
</TableCell>
|
||||
<TableCell align="right">{q.processed - q.failed}</TableCell>
|
||||
<TableCell align="right">{q.failed}</TableCell>
|
||||
{/* <TableCell align="right">
|
||||
{q.paused ? (
|
||||
<IconButton
|
||||
color="secondary"
|
||||
onClick={() => props.onResumeClick(q.queue)}
|
||||
disabled={q.pauseRequestPending}
|
||||
>
|
||||
<PlayCircleFilledIcon />
|
||||
</IconButton>
|
||||
) : (
|
||||
<IconButton
|
||||
color="primary"
|
||||
onClick={() => props.onPauseClick(q.queue)}
|
||||
disabled={q.pauseRequestPending}
|
||||
>
|
||||
<PauseCircleFilledIcon />
|
||||
</IconButton>
|
||||
)}
|
||||
</TableCell> */}
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
<TableFooter>
|
||||
<TableRow>
|
||||
<TableCell className={clsx(classes.fixedCell, classes.footerCell)}>
|
||||
Total
|
||||
</TableCell>
|
||||
<TableCell className={classes.footerCell} align="right">
|
||||
{total.size}
|
||||
</TableCell>
|
||||
<TableCell className={classes.footerCell} align="right">
|
||||
{total.active}
|
||||
</TableCell>
|
||||
<TableCell className={classes.footerCell} align="right">
|
||||
{total.pending}
|
||||
</TableCell>
|
||||
<TableCell className={classes.footerCell} align="right">
|
||||
{total.scheduled}
|
||||
</TableCell>
|
||||
<TableCell className={classes.footerCell} align="right">
|
||||
{total.retry}
|
||||
</TableCell>
|
||||
<TableCell className={classes.footerCell} align="right">
|
||||
{total.dead}
|
||||
</TableCell>
|
||||
<TableCell className={classes.footerCell} align="right">
|
||||
{total.processed}
|
||||
</TableCell>
|
||||
<TableCell className={classes.footerCell} align="right">
|
||||
{total.succeeded}
|
||||
</TableCell>
|
||||
<TableCell className={classes.footerCell} align="right">
|
||||
{total.failed}
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
</TableFooter>
|
||||
</Table>
|
||||
</TableContainer>
|
||||
);
|
||||
}
|
||||
|
||||
interface AggregateCounts {
|
||||
size: number;
|
||||
active: number;
|
||||
pending: number;
|
||||
scheduled: number;
|
||||
retry: number;
|
||||
dead: number;
|
||||
processed: number;
|
||||
succeeded: number;
|
||||
failed: number;
|
||||
}
|
||||
|
||||
function getAggregateCounts(queues: Queue[]): AggregateCounts {
|
||||
let total = {
|
||||
size: 0,
|
||||
active: 0,
|
||||
pending: 0,
|
||||
scheduled: 0,
|
||||
retry: 0,
|
||||
dead: 0,
|
||||
processed: 0,
|
||||
succeeded: 0,
|
||||
failed: 0,
|
||||
};
|
||||
queues.forEach((q) => {
|
||||
total.size += q.size;
|
||||
total.active += q.active;
|
||||
total.pending += q.pending;
|
||||
total.scheduled += q.scheduled;
|
||||
total.retry += q.retry;
|
||||
total.dead += q.dead;
|
||||
total.processed += q.processed;
|
||||
total.succeeded += q.processed - q.failed;
|
||||
total.failed += q.failed;
|
||||
});
|
||||
return total;
|
||||
}
|
||||
204
ui/src/components/RetryTasksTable.tsx
Normal file
204
ui/src/components/RetryTasksTable.tsx
Normal file
@@ -0,0 +1,204 @@
|
||||
import React, { useEffect, useState } from "react";
|
||||
import { connect, ConnectedProps } from "react-redux";
|
||||
import { makeStyles } from "@material-ui/core/styles";
|
||||
import Table from "@material-ui/core/Table";
|
||||
import TableBody from "@material-ui/core/TableBody";
|
||||
import TableCell from "@material-ui/core/TableCell";
|
||||
import Button from "@material-ui/core/Button";
|
||||
import TableContainer from "@material-ui/core/TableContainer";
|
||||
import TableHead from "@material-ui/core/TableHead";
|
||||
import TableRow from "@material-ui/core/TableRow";
|
||||
import TableFooter from "@material-ui/core/TableFooter";
|
||||
import TablePagination from "@material-ui/core/TablePagination";
|
||||
import Paper from "@material-ui/core/Paper";
|
||||
import Box from "@material-ui/core/Box";
|
||||
import Collapse from "@material-ui/core/Collapse";
|
||||
import IconButton from "@material-ui/core/IconButton";
|
||||
import KeyboardArrowUpIcon from "@material-ui/icons/KeyboardArrowUp";
|
||||
import KeyboardArrowDownIcon from "@material-ui/icons/KeyboardArrowDown";
|
||||
import Typography from "@material-ui/core/Typography";
|
||||
import Alert from "@material-ui/lab/Alert";
|
||||
import AlertTitle from "@material-ui/lab/AlertTitle";
|
||||
import SyntaxHighlighter from "react-syntax-highlighter";
|
||||
import syntaxHighlightStyle from "react-syntax-highlighter/dist/esm/styles/hljs/github";
|
||||
import { listRetryTasksAsync } from "../actions/tasksActions";
|
||||
import { AppState } from "../store";
|
||||
import { RetryTask } from "../api";
|
||||
import TablePaginationActions, {
|
||||
defaultPageSize,
|
||||
rowsPerPageOptions,
|
||||
} from "./TablePaginationActions";
|
||||
import { durationBefore } from "../timeutil";
|
||||
|
||||
const useStyles = makeStyles({
|
||||
table: {
|
||||
minWidth: 650,
|
||||
},
|
||||
});
|
||||
|
||||
function mapStateToProps(state: AppState) {
|
||||
return {
|
||||
loading: state.tasks.retryTasks.loading,
|
||||
tasks: state.tasks.retryTasks.data,
|
||||
pollInterval: state.settings.pollInterval,
|
||||
};
|
||||
}
|
||||
|
||||
const mapDispatchToProps = { listRetryTasksAsync };
|
||||
|
||||
const connector = connect(mapStateToProps, mapDispatchToProps);
|
||||
|
||||
type ReduxProps = ConnectedProps<typeof connector>;
|
||||
|
||||
interface Props {
|
||||
queue: string; // name of the queue.
|
||||
totalTaskCount: number; // totoal number of scheduled tasks.
|
||||
}
|
||||
|
||||
function RetryTasksTable(props: Props & ReduxProps) {
|
||||
const { pollInterval, listRetryTasksAsync, queue } = props;
|
||||
const classes = useStyles();
|
||||
const [page, setPage] = useState(0);
|
||||
const [pageSize, setPageSize] = useState(defaultPageSize);
|
||||
|
||||
const handleChangePage = (
|
||||
event: React.MouseEvent<HTMLButtonElement> | null,
|
||||
newPage: number
|
||||
) => {
|
||||
setPage(newPage);
|
||||
};
|
||||
|
||||
const handleChangeRowsPerPage = (
|
||||
event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
|
||||
) => {
|
||||
setPageSize(parseInt(event.target.value, 10));
|
||||
setPage(0);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
const pageOpts = { page: page + 1, size: pageSize };
|
||||
listRetryTasksAsync(queue, pageOpts);
|
||||
const interval = setInterval(() => {
|
||||
listRetryTasksAsync(queue, pageOpts);
|
||||
}, pollInterval * 1000);
|
||||
return () => clearInterval(interval);
|
||||
}, [pollInterval, listRetryTasksAsync, queue, page, pageSize]);
|
||||
|
||||
if (props.tasks.length === 0) {
|
||||
return (
|
||||
<Alert severity="info">
|
||||
<AlertTitle>Info</AlertTitle>
|
||||
No retry tasks at this time.
|
||||
</Alert>
|
||||
);
|
||||
}
|
||||
|
||||
const columns = [
|
||||
{ label: "" },
|
||||
{ label: "ID" },
|
||||
{ label: "Type" },
|
||||
{ label: "Retry In" },
|
||||
{ label: "Last Error" },
|
||||
{ label: "Retried" },
|
||||
{ label: "Max Retry" },
|
||||
{ label: "Actions" },
|
||||
];
|
||||
|
||||
return (
|
||||
<TableContainer component={Paper}>
|
||||
<Table
|
||||
stickyHeader={true}
|
||||
className={classes.table}
|
||||
aria-label="retry tasks table"
|
||||
size="small"
|
||||
>
|
||||
<TableHead>
|
||||
<TableRow>
|
||||
{columns.map((col) => (
|
||||
<TableCell key={col.label}>{col.label}</TableCell>
|
||||
))}
|
||||
</TableRow>
|
||||
</TableHead>
|
||||
<TableBody>
|
||||
{props.tasks.map((task) => (
|
||||
<Row key={task.id} task={task} />
|
||||
))}
|
||||
</TableBody>
|
||||
<TableFooter>
|
||||
<TableRow>
|
||||
<TablePagination
|
||||
rowsPerPageOptions={rowsPerPageOptions}
|
||||
colSpan={columns.length}
|
||||
count={props.totalTaskCount}
|
||||
rowsPerPage={pageSize}
|
||||
page={page}
|
||||
SelectProps={{
|
||||
inputProps: { "aria-label": "rows per page" },
|
||||
native: true,
|
||||
}}
|
||||
onChangePage={handleChangePage}
|
||||
onChangeRowsPerPage={handleChangeRowsPerPage}
|
||||
ActionsComponent={TablePaginationActions}
|
||||
/>
|
||||
</TableRow>
|
||||
</TableFooter>
|
||||
</Table>
|
||||
</TableContainer>
|
||||
);
|
||||
}
|
||||
|
||||
const useRowStyles = makeStyles({
|
||||
root: {
|
||||
"& > *": {
|
||||
borderBottom: "unset",
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
function Row(props: { task: RetryTask }) {
|
||||
const { task } = props;
|
||||
const [open, setOpen] = React.useState(false);
|
||||
const classes = useRowStyles();
|
||||
return (
|
||||
<React.Fragment>
|
||||
<TableRow key={task.id} className={classes.root}>
|
||||
<TableCell>
|
||||
<IconButton
|
||||
aria-label="expand row"
|
||||
size="small"
|
||||
onClick={() => setOpen(!open)}
|
||||
>
|
||||
{open ? <KeyboardArrowUpIcon /> : <KeyboardArrowDownIcon />}
|
||||
</IconButton>
|
||||
</TableCell>
|
||||
<TableCell component="th" scope="row">
|
||||
{task.id}
|
||||
</TableCell>
|
||||
<TableCell>{task.type}</TableCell>
|
||||
<TableCell>{durationBefore(task.next_process_at)}</TableCell>
|
||||
<TableCell>{task.error_message}</TableCell>
|
||||
<TableCell>{task.retried}</TableCell>
|
||||
<TableCell>{task.max_retry}</TableCell>
|
||||
<TableCell>
|
||||
<Button>Cancel</Button>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
<TableRow>
|
||||
<TableCell style={{ paddingBottom: 0, paddingTop: 0 }} colSpan={9}>
|
||||
<Collapse in={open} timeout="auto" unmountOnExit>
|
||||
<Box margin={1}>
|
||||
<Typography variant="h6" gutterBottom component="div">
|
||||
Payload
|
||||
</Typography>
|
||||
<SyntaxHighlighter language="json" style={syntaxHighlightStyle}>
|
||||
{JSON.stringify(task.payload, null, 2)}
|
||||
</SyntaxHighlighter>
|
||||
</Box>
|
||||
</Collapse>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
</React.Fragment>
|
||||
);
|
||||
}
|
||||
|
||||
export default connector(RetryTasksTable);
|
||||
197
ui/src/components/ScheduledTasksTable.tsx
Normal file
197
ui/src/components/ScheduledTasksTable.tsx
Normal file
@@ -0,0 +1,197 @@
|
||||
import React, { useEffect, useState } from "react";
|
||||
import { connect, ConnectedProps } from "react-redux";
|
||||
import { makeStyles } from "@material-ui/core/styles";
|
||||
import Table from "@material-ui/core/Table";
|
||||
import TableBody from "@material-ui/core/TableBody";
|
||||
import TableCell from "@material-ui/core/TableCell";
|
||||
import Button from "@material-ui/core/Button";
|
||||
import TableContainer from "@material-ui/core/TableContainer";
|
||||
import TableHead from "@material-ui/core/TableHead";
|
||||
import TableRow from "@material-ui/core/TableRow";
|
||||
import TableFooter from "@material-ui/core/TableFooter";
|
||||
import TablePagination from "@material-ui/core/TablePagination";
|
||||
import Paper from "@material-ui/core/Paper";
|
||||
import Box from "@material-ui/core/Box";
|
||||
import Collapse from "@material-ui/core/Collapse";
|
||||
import IconButton from "@material-ui/core/IconButton";
|
||||
import KeyboardArrowUpIcon from "@material-ui/icons/KeyboardArrowUp";
|
||||
import KeyboardArrowDownIcon from "@material-ui/icons/KeyboardArrowDown";
|
||||
import Typography from "@material-ui/core/Typography";
|
||||
import Alert from "@material-ui/lab/Alert";
|
||||
import AlertTitle from "@material-ui/lab/AlertTitle";
|
||||
import SyntaxHighlighter from "react-syntax-highlighter";
|
||||
import syntaxHighlightStyle from "react-syntax-highlighter/dist/esm/styles/hljs/github";
|
||||
import { listScheduledTasksAsync } from "../actions/tasksActions";
|
||||
import { AppState } from "../store";
|
||||
import { ScheduledTask } from "../api";
|
||||
import TablePaginationActions, {
|
||||
defaultPageSize,
|
||||
rowsPerPageOptions,
|
||||
} from "./TablePaginationActions";
|
||||
import { durationBefore } from "../timeutil";
|
||||
|
||||
const useStyles = makeStyles({
|
||||
table: {
|
||||
minWidth: 650,
|
||||
},
|
||||
});
|
||||
|
||||
function mapStateToProps(state: AppState) {
|
||||
return {
|
||||
loading: state.tasks.scheduledTasks.loading,
|
||||
tasks: state.tasks.scheduledTasks.data,
|
||||
pollInterval: state.settings.pollInterval,
|
||||
};
|
||||
}
|
||||
|
||||
const mapDispatchToProps = { listScheduledTasksAsync };
|
||||
|
||||
const connector = connect(mapStateToProps, mapDispatchToProps);
|
||||
|
||||
type ReduxProps = ConnectedProps<typeof connector>;
|
||||
|
||||
interface Props {
|
||||
queue: string; // name of the queue.
|
||||
totalTaskCount: number; // totoal number of scheduled tasks.
|
||||
}
|
||||
|
||||
function ScheduledTasksTable(props: Props & ReduxProps) {
|
||||
const { pollInterval, listScheduledTasksAsync, queue } = props;
|
||||
const classes = useStyles();
|
||||
const [page, setPage] = useState(0);
|
||||
const [pageSize, setPageSize] = useState(defaultPageSize);
|
||||
|
||||
const handleChangePage = (
|
||||
event: React.MouseEvent<HTMLButtonElement> | null,
|
||||
newPage: number
|
||||
) => {
|
||||
setPage(newPage);
|
||||
};
|
||||
|
||||
const handleChangeRowsPerPage = (
|
||||
event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
|
||||
) => {
|
||||
setPageSize(parseInt(event.target.value, 10));
|
||||
setPage(0);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
const pageOpts = { page: page + 1, size: pageSize };
|
||||
listScheduledTasksAsync(queue, pageOpts);
|
||||
const interval = setInterval(() => {
|
||||
listScheduledTasksAsync(queue, pageOpts);
|
||||
}, pollInterval * 1000);
|
||||
return () => clearInterval(interval);
|
||||
}, [pollInterval, listScheduledTasksAsync, queue, page, pageSize]);
|
||||
|
||||
if (props.tasks.length === 0) {
|
||||
return (
|
||||
<Alert severity="info">
|
||||
<AlertTitle>Info</AlertTitle>
|
||||
No scheduled tasks at this time.
|
||||
</Alert>
|
||||
);
|
||||
}
|
||||
|
||||
const columns = [
|
||||
{ label: "" },
|
||||
{ label: "ID" },
|
||||
{ label: "Type" },
|
||||
{ label: "Process In" },
|
||||
{ label: "Actions" },
|
||||
];
|
||||
|
||||
return (
|
||||
<TableContainer component={Paper}>
|
||||
<Table
|
||||
stickyHeader={true}
|
||||
className={classes.table}
|
||||
aria-label="scheduled tasks table"
|
||||
size="small"
|
||||
>
|
||||
<TableHead>
|
||||
<TableRow>
|
||||
{columns.map((col) => (
|
||||
<TableCell key={col.label}>{col.label}</TableCell>
|
||||
))}
|
||||
</TableRow>
|
||||
</TableHead>
|
||||
<TableBody>
|
||||
{props.tasks.map((task) => (
|
||||
<Row key={task.id} task={task} />
|
||||
))}
|
||||
</TableBody>
|
||||
<TableFooter>
|
||||
<TableRow>
|
||||
<TablePagination
|
||||
rowsPerPageOptions={rowsPerPageOptions}
|
||||
colSpan={columns.length}
|
||||
count={props.totalTaskCount}
|
||||
rowsPerPage={pageSize}
|
||||
page={page}
|
||||
SelectProps={{
|
||||
inputProps: { "aria-label": "rows per page" },
|
||||
native: true,
|
||||
}}
|
||||
onChangePage={handleChangePage}
|
||||
onChangeRowsPerPage={handleChangeRowsPerPage}
|
||||
ActionsComponent={TablePaginationActions}
|
||||
/>
|
||||
</TableRow>
|
||||
</TableFooter>
|
||||
</Table>
|
||||
</TableContainer>
|
||||
);
|
||||
}
|
||||
|
||||
const useRowStyles = makeStyles({
|
||||
root: {
|
||||
"& > *": {
|
||||
borderBottom: "unset",
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
function Row(props: { task: ScheduledTask }) {
|
||||
const { task } = props;
|
||||
const [open, setOpen] = React.useState(false);
|
||||
const classes = useRowStyles();
|
||||
return (
|
||||
<React.Fragment>
|
||||
<TableRow key={task.id} className={classes.root}>
|
||||
<TableCell>
|
||||
<IconButton
|
||||
aria-label="expand row"
|
||||
size="small"
|
||||
onClick={() => setOpen(!open)}
|
||||
>
|
||||
{open ? <KeyboardArrowUpIcon /> : <KeyboardArrowDownIcon />}
|
||||
</IconButton>
|
||||
</TableCell>
|
||||
<TableCell component="th" scope="row">
|
||||
{task.id}
|
||||
</TableCell>
|
||||
<TableCell>{task.type}</TableCell>
|
||||
<TableCell>{durationBefore(task.next_process_at)}</TableCell>
|
||||
<TableCell>
|
||||
<Button>Cancel</Button>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
<TableRow>
|
||||
<TableCell style={{ paddingBottom: 0, paddingTop: 0 }} colSpan={5}>
|
||||
<Collapse in={open} timeout="auto" unmountOnExit>
|
||||
<Box margin={1}>
|
||||
<Typography variant="h6" gutterBottom component="div">
|
||||
Payload
|
||||
</Typography>
|
||||
<SyntaxHighlighter language="json" style={syntaxHighlightStyle}>
|
||||
{JSON.stringify(task.payload, null, 2)}
|
||||
</SyntaxHighlighter>
|
||||
</Box>
|
||||
</Collapse>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
</React.Fragment>
|
||||
);
|
||||
}
|
||||
export default connector(ScheduledTasksTable);
|
||||
107
ui/src/components/TablePaginationActions.tsx
Normal file
107
ui/src/components/TablePaginationActions.tsx
Normal file
@@ -0,0 +1,107 @@
|
||||
import React from "react";
|
||||
import {
|
||||
useTheme,
|
||||
makeStyles,
|
||||
Theme,
|
||||
createStyles,
|
||||
} from "@material-ui/core/styles";
|
||||
import IconButton from "@material-ui/core/IconButton";
|
||||
import FirstPageIcon from "@material-ui/icons/FirstPage";
|
||||
import KeyboardArrowLeft from "@material-ui/icons/KeyboardArrowLeft";
|
||||
import KeyboardArrowRight from "@material-ui/icons/KeyboardArrowRight";
|
||||
import LastPageIcon from "@material-ui/icons/LastPage";
|
||||
|
||||
const useStyles = makeStyles((theme: Theme) =>
|
||||
createStyles({
|
||||
root: {
|
||||
flexShrink: 0,
|
||||
marginLeft: theme.spacing(2.5),
|
||||
},
|
||||
})
|
||||
);
|
||||
|
||||
interface TablePaginationActionsProps {
|
||||
count: number;
|
||||
page: number;
|
||||
rowsPerPage: number;
|
||||
onChangePage: (
|
||||
event: React.MouseEvent<HTMLButtonElement>,
|
||||
newPage: number
|
||||
) => void;
|
||||
}
|
||||
|
||||
function TablePaginationActions(props: TablePaginationActionsProps) {
|
||||
const classes = useStyles();
|
||||
const theme = useTheme();
|
||||
const { count, page, rowsPerPage, onChangePage } = props;
|
||||
|
||||
const handleFirstPageButtonClick = (
|
||||
event: React.MouseEvent<HTMLButtonElement>
|
||||
) => {
|
||||
onChangePage(event, 0);
|
||||
};
|
||||
|
||||
const handleBackButtonClick = (
|
||||
event: React.MouseEvent<HTMLButtonElement>
|
||||
) => {
|
||||
onChangePage(event, page - 1);
|
||||
};
|
||||
|
||||
const handleNextButtonClick = (
|
||||
event: React.MouseEvent<HTMLButtonElement>
|
||||
) => {
|
||||
onChangePage(event, page + 1);
|
||||
};
|
||||
|
||||
const handleLastPageButtonClick = (
|
||||
event: React.MouseEvent<HTMLButtonElement>
|
||||
) => {
|
||||
onChangePage(event, Math.max(0, Math.ceil(count / rowsPerPage) - 1));
|
||||
};
|
||||
|
||||
return (
|
||||
<div className={classes.root}>
|
||||
<IconButton
|
||||
onClick={handleFirstPageButtonClick}
|
||||
disabled={page === 0}
|
||||
aria-label="first page"
|
||||
>
|
||||
{theme.direction === "rtl" ? <LastPageIcon /> : <FirstPageIcon />}
|
||||
</IconButton>
|
||||
<IconButton
|
||||
onClick={handleBackButtonClick}
|
||||
disabled={page === 0}
|
||||
aria-label="previous page"
|
||||
>
|
||||
{theme.direction === "rtl" ? (
|
||||
<KeyboardArrowRight />
|
||||
) : (
|
||||
<KeyboardArrowLeft />
|
||||
)}
|
||||
</IconButton>
|
||||
<IconButton
|
||||
onClick={handleNextButtonClick}
|
||||
disabled={page >= Math.ceil(count / rowsPerPage) - 1}
|
||||
aria-label="next page"
|
||||
>
|
||||
{theme.direction === "rtl" ? (
|
||||
<KeyboardArrowLeft />
|
||||
) : (
|
||||
<KeyboardArrowRight />
|
||||
)}
|
||||
</IconButton>
|
||||
<IconButton
|
||||
onClick={handleLastPageButtonClick}
|
||||
disabled={page >= Math.ceil(count / rowsPerPage) - 1}
|
||||
aria-label="last page"
|
||||
>
|
||||
{theme.direction === "rtl" ? <FirstPageIcon /> : <LastPageIcon />}
|
||||
</IconButton>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default TablePaginationActions;
|
||||
|
||||
export const rowsPerPageOptions = [10, 20, 30, 60, 100];
|
||||
export const defaultPageSize = 20;
|
||||
332
ui/src/components/TasksTable.tsx
Normal file
332
ui/src/components/TasksTable.tsx
Normal file
@@ -0,0 +1,332 @@
|
||||
import React from "react";
|
||||
import { connect, ConnectedProps } from "react-redux";
|
||||
import styled from "styled-components";
|
||||
import { makeStyles } from "@material-ui/core/styles";
|
||||
import Tabs from "@material-ui/core/Tabs";
|
||||
import Tab from "@material-ui/core/Tab";
|
||||
import ActiveTasksTable from "./ActiveTasksTable";
|
||||
import PendingTasksTable from "./PendingTasksTable";
|
||||
import ScheduledTasksTable from "./ScheduledTasksTable";
|
||||
import RetryTasksTable from "./RetryTasksTable";
|
||||
import DeadTasksTable from "./DeadTasksTable";
|
||||
import { useHistory } from "react-router-dom";
|
||||
import { queueDetailsPath } from "../paths";
|
||||
import { Typography } from "@material-ui/core";
|
||||
import Paper from "@material-ui/core/Paper/Paper";
|
||||
import { QueueInfo } from "../reducers/queuesReducer";
|
||||
import { AppState } from "../store";
|
||||
|
||||
interface TabPanelProps {
|
||||
children?: React.ReactNode;
|
||||
selected: string; // currently selected value
|
||||
value: string; // tab panel will be shown if selected value equals to the value
|
||||
}
|
||||
|
||||
const TabPanelRoot = styled.div`
|
||||
flex: 1;
|
||||
overflow-y: scroll;
|
||||
`;
|
||||
|
||||
function TabPanel(props: TabPanelProps) {
|
||||
const { children, value, selected, ...other } = props;
|
||||
|
||||
return (
|
||||
<TabPanelRoot
|
||||
role="tabpanel"
|
||||
hidden={value !== selected}
|
||||
id={`scrollable-auto-tabpanel-${selected}`}
|
||||
aria-labelledby={`scrollable-auto-tab-${selected}`}
|
||||
{...other}
|
||||
>
|
||||
{value === selected && children}
|
||||
</TabPanelRoot>
|
||||
);
|
||||
}
|
||||
|
||||
function a11yProps(value: string) {
|
||||
return {
|
||||
id: `scrollable-auto-tab-${value}`,
|
||||
"aria-controls": `scrollable-auto-tabpanel-${value}`,
|
||||
};
|
||||
}
|
||||
|
||||
const Container = styled.div`
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
`;
|
||||
|
||||
const TaskCount = styled.div`
|
||||
font-size: 2rem;
|
||||
font-weight: 600;
|
||||
margin: 0;
|
||||
`;
|
||||
|
||||
const Heading = styled.div`
|
||||
opacity: 0.7;
|
||||
font-size: 1.7rem;
|
||||
font-weight: 500;
|
||||
background: #f5f7f9;
|
||||
padding-left: 28px;
|
||||
padding-top: 28px;
|
||||
padding-bottom: 28px;
|
||||
`;
|
||||
|
||||
const PanelContainer = styled.div`
|
||||
padding: 24px;
|
||||
background: #ffffff;
|
||||
`;
|
||||
|
||||
const TabsContainer = styled.div`
|
||||
background: #f5f7f9;
|
||||
`;
|
||||
|
||||
const useStyles = makeStyles((theme) => ({
|
||||
paper: {
|
||||
padding: theme.spacing(2),
|
||||
marginBottom: theme.spacing(2),
|
||||
display: "flex",
|
||||
justifyContent: "space-between",
|
||||
},
|
||||
heading: {
|
||||
padingLeft: theme.spacing(2),
|
||||
},
|
||||
tabsRoot: {
|
||||
paddingLeft: theme.spacing(2),
|
||||
background: theme.palette.background.default,
|
||||
},
|
||||
tabsIndicator: {
|
||||
right: "auto",
|
||||
left: "0",
|
||||
},
|
||||
tabroot: {
|
||||
width: "204px",
|
||||
textAlign: "left",
|
||||
padding: theme.spacing(2),
|
||||
},
|
||||
tabwrapper: {
|
||||
alignItems: "flex-start",
|
||||
},
|
||||
tabSelected: {
|
||||
background: theme.palette.common.white,
|
||||
boxShadow: theme.shadows[1],
|
||||
},
|
||||
}));
|
||||
|
||||
function PanelHeading(props: {
|
||||
queue: string;
|
||||
processed: number;
|
||||
failed: number;
|
||||
paused: boolean;
|
||||
}) {
|
||||
const classes = useStyles();
|
||||
return (
|
||||
<Paper className={classes.paper}>
|
||||
<div>
|
||||
<Typography variant="overline" display="block">
|
||||
Queue Name
|
||||
</Typography>
|
||||
<Typography variant="h5">{props.queue}</Typography>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Typography variant="overline" display="block">
|
||||
Processed Today (UTC)
|
||||
</Typography>
|
||||
<Typography variant="h5">{props.processed}</Typography>
|
||||
</div>
|
||||
<div>
|
||||
<Typography variant="overline" display="block">
|
||||
Failed Today (UTC)
|
||||
</Typography>
|
||||
<Typography variant="h5">{props.failed}</Typography>
|
||||
</div>
|
||||
<div>
|
||||
<Typography variant="overline" display="block">
|
||||
Paused
|
||||
</Typography>
|
||||
<Typography variant="h5">{props.paused ? "YES" : "No"}</Typography>
|
||||
</div>
|
||||
</Paper>
|
||||
);
|
||||
}
|
||||
|
||||
function mapStatetoProps(state: AppState, ownProps: Props) {
|
||||
// TODO: Add loading state for each queue.
|
||||
const queueInfo = state.queues.data.find(
|
||||
(q: QueueInfo) => q.name === ownProps.queue
|
||||
);
|
||||
const currentStats = queueInfo
|
||||
? queueInfo.currentStats
|
||||
: {
|
||||
queue: ownProps.queue,
|
||||
paused: false,
|
||||
size: 0,
|
||||
active: 0,
|
||||
pending: 0,
|
||||
scheduled: 0,
|
||||
retry: 0,
|
||||
dead: 0,
|
||||
processed: 0,
|
||||
failed: 0,
|
||||
timestamp: "n/a",
|
||||
};
|
||||
return { currentStats };
|
||||
}
|
||||
|
||||
const connector = connect(mapStatetoProps);
|
||||
|
||||
type ReduxProps = ConnectedProps<typeof connector>;
|
||||
|
||||
interface Props {
|
||||
queue: string;
|
||||
selected: string;
|
||||
}
|
||||
|
||||
function TasksTable(props: Props & ReduxProps) {
|
||||
const { currentStats } = props;
|
||||
const classes = useStyles();
|
||||
const history = useHistory();
|
||||
|
||||
return (
|
||||
<Container>
|
||||
<TabsContainer>
|
||||
<Heading>Tasks</Heading>
|
||||
<Tabs
|
||||
value={props.selected}
|
||||
onChange={(_, value: string) =>
|
||||
history.push(queueDetailsPath(props.queue, value))
|
||||
}
|
||||
aria-label="tasks table"
|
||||
orientation="vertical"
|
||||
classes={{ root: classes.tabsRoot, indicator: classes.tabsIndicator }}
|
||||
>
|
||||
<Tab
|
||||
value="active"
|
||||
label="Active"
|
||||
icon={<TaskCount>{currentStats.active}</TaskCount>}
|
||||
classes={{
|
||||
root: classes.tabroot,
|
||||
wrapper: classes.tabwrapper,
|
||||
selected: classes.tabSelected,
|
||||
}}
|
||||
{...a11yProps("active")}
|
||||
/>
|
||||
<Tab
|
||||
value="pending"
|
||||
label="Pending"
|
||||
icon={<TaskCount>{currentStats.pending}</TaskCount>}
|
||||
classes={{
|
||||
root: classes.tabroot,
|
||||
wrapper: classes.tabwrapper,
|
||||
selected: classes.tabSelected,
|
||||
}}
|
||||
{...a11yProps("pending")}
|
||||
/>
|
||||
<Tab
|
||||
value="scheduled"
|
||||
label="Scheduled"
|
||||
icon={<TaskCount>{currentStats.scheduled}</TaskCount>}
|
||||
classes={{
|
||||
root: classes.tabroot,
|
||||
wrapper: classes.tabwrapper,
|
||||
selected: classes.tabSelected,
|
||||
}}
|
||||
{...a11yProps("scheduled")}
|
||||
/>
|
||||
<Tab
|
||||
value="retry"
|
||||
label="Retry"
|
||||
icon={<TaskCount>{currentStats.retry}</TaskCount>}
|
||||
classes={{
|
||||
root: classes.tabroot,
|
||||
wrapper: classes.tabwrapper,
|
||||
selected: classes.tabSelected,
|
||||
}}
|
||||
{...a11yProps("retry")}
|
||||
/>
|
||||
<Tab
|
||||
value="dead"
|
||||
label="Dead"
|
||||
icon={<TaskCount>{currentStats.dead}</TaskCount>}
|
||||
classes={{
|
||||
root: classes.tabroot,
|
||||
wrapper: classes.tabwrapper,
|
||||
selected: classes.tabSelected,
|
||||
}}
|
||||
{...a11yProps("dead")}
|
||||
/>
|
||||
</Tabs>
|
||||
</TabsContainer>
|
||||
<TabPanel value="active" selected={props.selected}>
|
||||
<PanelContainer>
|
||||
<PanelHeading
|
||||
queue={props.queue}
|
||||
processed={currentStats.processed}
|
||||
failed={currentStats.failed}
|
||||
paused={currentStats.paused}
|
||||
/>
|
||||
<ActiveTasksTable queue={props.queue} />
|
||||
</PanelContainer>
|
||||
</TabPanel>
|
||||
<TabPanel value="pending" selected={props.selected}>
|
||||
<PanelContainer>
|
||||
<PanelHeading
|
||||
queue={props.queue}
|
||||
processed={currentStats.processed}
|
||||
failed={currentStats.failed}
|
||||
paused={currentStats.paused}
|
||||
/>
|
||||
<PendingTasksTable
|
||||
queue={props.queue}
|
||||
totalTaskCount={currentStats.pending}
|
||||
/>
|
||||
</PanelContainer>
|
||||
</TabPanel>
|
||||
<TabPanel value="scheduled" selected={props.selected}>
|
||||
<PanelContainer>
|
||||
<PanelHeading
|
||||
queue={props.queue}
|
||||
processed={currentStats.processed}
|
||||
failed={currentStats.failed}
|
||||
paused={currentStats.paused}
|
||||
/>
|
||||
<ScheduledTasksTable
|
||||
queue={props.queue}
|
||||
totalTaskCount={currentStats.scheduled}
|
||||
/>
|
||||
</PanelContainer>
|
||||
</TabPanel>
|
||||
<TabPanel value="retry" selected={props.selected}>
|
||||
<PanelContainer>
|
||||
<PanelHeading
|
||||
queue={props.queue}
|
||||
processed={currentStats.processed}
|
||||
failed={currentStats.failed}
|
||||
paused={currentStats.paused}
|
||||
/>
|
||||
<RetryTasksTable
|
||||
queue={props.queue}
|
||||
totalTaskCount={currentStats.retry}
|
||||
/>
|
||||
</PanelContainer>
|
||||
</TabPanel>
|
||||
<TabPanel value="dead" selected={props.selected}>
|
||||
<PanelContainer>
|
||||
<PanelHeading
|
||||
queue={props.queue}
|
||||
processed={currentStats.processed}
|
||||
failed={currentStats.failed}
|
||||
paused={currentStats.paused}
|
||||
/>
|
||||
<DeadTasksTable
|
||||
queue={props.queue}
|
||||
totalTaskCount={currentStats.dead}
|
||||
/>
|
||||
</PanelContainer>
|
||||
</TabPanel>
|
||||
</Container>
|
||||
);
|
||||
}
|
||||
|
||||
export default connector(TasksTable);
|
||||
13
ui/src/components/Tooltip.tsx
Normal file
13
ui/src/components/Tooltip.tsx
Normal file
@@ -0,0 +1,13 @@
|
||||
import { Theme, withStyles } from "@material-ui/core/styles";
|
||||
import Tooltip from "@material-ui/core/Tooltip";
|
||||
|
||||
// Export custom style tooltip.
|
||||
export default withStyles((theme: Theme) => ({
|
||||
tooltip: {
|
||||
backgroundColor: "#f5f5f9",
|
||||
color: "rgba(0, 0, 0, 0.87)",
|
||||
maxWidth: 400,
|
||||
fontSize: theme.typography.pxToRem(12),
|
||||
border: "1px solid #dadde9",
|
||||
},
|
||||
}))(Tooltip);
|
||||
Reference in New Issue
Block a user