mirror of
https://github.com/hibiken/asynqmon.git
synced 2025-01-19 03:05:53 +08:00
(ui): Convert all tasks tables to use TasksTable component
This commit is contained in:
Ken Hibino
parent
726d58fcda
commit
c22c0206d7
@ -1,22 +1,12 @@
|
|||||||
import Checkbox from "@material-ui/core/Checkbox";
|
import Checkbox from "@material-ui/core/Checkbox";
|
||||||
import IconButton from "@material-ui/core/IconButton";
|
import IconButton from "@material-ui/core/IconButton";
|
||||||
import Paper from "@material-ui/core/Paper";
|
|
||||||
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 TableCell from "@material-ui/core/TableCell";
|
||||||
import TableContainer from "@material-ui/core/TableContainer";
|
|
||||||
import TableFooter from "@material-ui/core/TableFooter";
|
|
||||||
import TableHead from "@material-ui/core/TableHead";
|
|
||||||
import TablePagination from "@material-ui/core/TablePagination";
|
|
||||||
import TableRow from "@material-ui/core/TableRow";
|
import TableRow from "@material-ui/core/TableRow";
|
||||||
import Tooltip from "@material-ui/core/Tooltip";
|
import Tooltip from "@material-ui/core/Tooltip";
|
||||||
import CancelIcon from "@material-ui/icons/Cancel";
|
import CancelIcon from "@material-ui/icons/Cancel";
|
||||||
import FileCopyOutlinedIcon from "@material-ui/icons/FileCopyOutlined";
|
import FileCopyOutlinedIcon from "@material-ui/icons/FileCopyOutlined";
|
||||||
import MoreHorizIcon from "@material-ui/icons/MoreHoriz";
|
import MoreHorizIcon from "@material-ui/icons/MoreHoriz";
|
||||||
import Alert from "@material-ui/lab/Alert";
|
import React from "react";
|
||||||
import AlertTitle from "@material-ui/lab/AlertTitle";
|
|
||||||
import React, { useCallback, useState } from "react";
|
|
||||||
import { connect, ConnectedProps } from "react-redux";
|
import { connect, ConnectedProps } from "react-redux";
|
||||||
import { useHistory } from "react-router-dom";
|
import { useHistory } from "react-router-dom";
|
||||||
import { taskRowsPerPageChange } from "../actions/settingsActions";
|
import { taskRowsPerPageChange } from "../actions/settingsActions";
|
||||||
@ -26,33 +16,12 @@ import {
|
|||||||
cancelAllActiveTasksAsync,
|
cancelAllActiveTasksAsync,
|
||||||
listActiveTasksAsync,
|
listActiveTasksAsync,
|
||||||
} from "../actions/tasksActions";
|
} from "../actions/tasksActions";
|
||||||
import { usePolling } from "../hooks";
|
|
||||||
import { taskDetailsPath } from "../paths";
|
import { taskDetailsPath } from "../paths";
|
||||||
import { ActiveTaskExtended } from "../reducers/tasksReducer";
|
|
||||||
import { AppState } from "../store";
|
import { AppState } from "../store";
|
||||||
import { TableColumn } from "../types/table";
|
import { TableColumn } from "../types/table";
|
||||||
import { durationBefore, prettifyPayload, timeAgo, uuidPrefix } from "../utils";
|
import { durationBefore, prettifyPayload, timeAgo, uuidPrefix } from "../utils";
|
||||||
import SyntaxHighlighter from "./SyntaxHighlighter";
|
import SyntaxHighlighter from "./SyntaxHighlighter";
|
||||||
import TableActions from "./TableActions";
|
import TasksTable, { RowProps, useRowStyles } from "./TasksTable";
|
||||||
import TablePaginationActions, {
|
|
||||||
rowsPerPageOptions,
|
|
||||||
} from "./TablePaginationActions";
|
|
||||||
|
|
||||||
const useStyles = makeStyles((theme) => ({
|
|
||||||
table: {
|
|
||||||
minWidth: 650,
|
|
||||||
},
|
|
||||||
stickyHeaderCell: {
|
|
||||||
background: theme.palette.background.paper,
|
|
||||||
},
|
|
||||||
alert: {
|
|
||||||
borderTopLeftRadius: 0,
|
|
||||||
borderTopRightRadius: 0,
|
|
||||||
},
|
|
||||||
pagination: {
|
|
||||||
border: "none",
|
|
||||||
},
|
|
||||||
}));
|
|
||||||
|
|
||||||
function mapStateToProps(state: AppState) {
|
function mapStateToProps(state: AppState) {
|
||||||
return {
|
return {
|
||||||
@ -67,10 +36,10 @@ function mapStateToProps(state: AppState) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
const mapDispatchToProps = {
|
const mapDispatchToProps = {
|
||||||
listActiveTasksAsync,
|
listTasks: listActiveTasksAsync,
|
||||||
cancelActiveTaskAsync,
|
cancelTask: cancelActiveTaskAsync,
|
||||||
batchCancelActiveTasksAsync,
|
batchCancelTasks: batchCancelActiveTasksAsync,
|
||||||
cancelAllActiveTasksAsync,
|
cancelAllTasks: cancelAllActiveTasksAsync,
|
||||||
taskRowsPerPageChange,
|
taskRowsPerPageChange,
|
||||||
};
|
};
|
||||||
|
|
||||||
@ -93,223 +62,6 @@ interface Props {
|
|||||||
totalTaskCount: number; // total number of active tasks
|
totalTaskCount: number; // total number of active tasks
|
||||||
}
|
}
|
||||||
|
|
||||||
function ActiveTasksTable(props: Props & ReduxProps) {
|
|
||||||
const { pollInterval, listActiveTasksAsync, queue, pageSize } = props;
|
|
||||||
const classes = useStyles();
|
|
||||||
const [page, setPage] = useState(0);
|
|
||||||
const [selectedIds, setSelectedIds] = useState<string[]>([]);
|
|
||||||
const [activeTaskId, setActiveTaskId] = useState<string>("");
|
|
||||||
|
|
||||||
const handlePageChange = (
|
|
||||||
event: React.MouseEvent<HTMLButtonElement> | null,
|
|
||||||
newPage: number
|
|
||||||
) => {
|
|
||||||
setPage(newPage);
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleRowsPerPageChange = (
|
|
||||||
event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
|
|
||||||
) => {
|
|
||||||
props.taskRowsPerPageChange(parseInt(event.target.value, 10));
|
|
||||||
setPage(0);
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleSelectAllClick = (event: React.ChangeEvent<HTMLInputElement>) => {
|
|
||||||
if (event.target.checked) {
|
|
||||||
const newSelected = props.tasks.map((t) => t.id);
|
|
||||||
setSelectedIds(newSelected);
|
|
||||||
} else {
|
|
||||||
setSelectedIds([]);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleCancelAllClick = () => {
|
|
||||||
props.cancelAllActiveTasksAsync(queue);
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleBatchCancelClick = () => {
|
|
||||||
props
|
|
||||||
.batchCancelActiveTasksAsync(queue, selectedIds)
|
|
||||||
.then(() => setSelectedIds([]));
|
|
||||||
};
|
|
||||||
|
|
||||||
const fetchData = useCallback(() => {
|
|
||||||
const pageOpts = { page: page + 1, size: pageSize };
|
|
||||||
listActiveTasksAsync(queue, pageOpts);
|
|
||||||
}, [page, pageSize, queue, listActiveTasksAsync]);
|
|
||||||
|
|
||||||
usePolling(fetchData, pollInterval);
|
|
||||||
|
|
||||||
if (props.error.length > 0) {
|
|
||||||
return (
|
|
||||||
<Alert severity="error" className={classes.alert}>
|
|
||||||
<AlertTitle>Error</AlertTitle>
|
|
||||||
{props.error}
|
|
||||||
</Alert>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (props.tasks.length === 0) {
|
|
||||||
return (
|
|
||||||
<Alert severity="info" className={classes.alert}>
|
|
||||||
<AlertTitle>Info</AlertTitle>
|
|
||||||
No active tasks at this time.
|
|
||||||
</Alert>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
const rowCount = props.tasks.length;
|
|
||||||
const numSelected = selectedIds.length;
|
|
||||||
return (
|
|
||||||
<div>
|
|
||||||
{!window.READ_ONLY && (
|
|
||||||
<TableActions
|
|
||||||
showIconButtons={numSelected > 0}
|
|
||||||
iconButtonActions={[
|
|
||||||
{
|
|
||||||
tooltip: "Cancel",
|
|
||||||
icon: <CancelIcon />,
|
|
||||||
onClick: handleBatchCancelClick,
|
|
||||||
disabled: props.batchActionPending,
|
|
||||||
},
|
|
||||||
]}
|
|
||||||
menuItemActions={[
|
|
||||||
{
|
|
||||||
label: "Cancel All",
|
|
||||||
onClick: handleCancelAllClick,
|
|
||||||
disabled: props.allActionPending,
|
|
||||||
},
|
|
||||||
]}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
<TableContainer component={Paper}>
|
|
||||||
<Table
|
|
||||||
stickyHeader={true}
|
|
||||||
className={classes.table}
|
|
||||||
aria-label="active tasks table"
|
|
||||||
size="small"
|
|
||||||
>
|
|
||||||
<TableHead>
|
|
||||||
<TableRow>
|
|
||||||
{!window.READ_ONLY && (
|
|
||||||
<TableCell
|
|
||||||
padding="checkbox"
|
|
||||||
classes={{ stickyHeader: classes.stickyHeaderCell }}
|
|
||||||
>
|
|
||||||
<IconButton>
|
|
||||||
<Checkbox
|
|
||||||
indeterminate={numSelected > 0 && numSelected < rowCount}
|
|
||||||
checked={rowCount > 0 && numSelected === rowCount}
|
|
||||||
onChange={handleSelectAllClick}
|
|
||||||
inputProps={{
|
|
||||||
"aria-label": "select all tasks shown in the table",
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</IconButton>
|
|
||||||
</TableCell>
|
|
||||||
)}
|
|
||||||
{columns
|
|
||||||
.filter((col) => {
|
|
||||||
// Filter out actions column in readonly mode.
|
|
||||||
return !window.READ_ONLY || col.key !== "actions";
|
|
||||||
})
|
|
||||||
.map((col) => (
|
|
||||||
<TableCell
|
|
||||||
key={col.key}
|
|
||||||
align={col.align}
|
|
||||||
classes={{ stickyHeader: classes.stickyHeaderCell }}
|
|
||||||
>
|
|
||||||
{col.label}
|
|
||||||
</TableCell>
|
|
||||||
))}
|
|
||||||
</TableRow>
|
|
||||||
</TableHead>
|
|
||||||
<TableBody>
|
|
||||||
{/* TODO: loading and empty state */}
|
|
||||||
{props.tasks.map((task) => (
|
|
||||||
<Row
|
|
||||||
key={task.id}
|
|
||||||
task={task}
|
|
||||||
isSelected={selectedIds.includes(task.id)}
|
|
||||||
onSelectChange={(checked: boolean) => {
|
|
||||||
if (checked) {
|
|
||||||
setSelectedIds(selectedIds.concat(task.id));
|
|
||||||
} else {
|
|
||||||
setSelectedIds(selectedIds.filter((id) => id !== task.id));
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
onCancelClick={() => {
|
|
||||||
props.cancelActiveTaskAsync(queue, task.id);
|
|
||||||
}}
|
|
||||||
onActionCellEnter={() => setActiveTaskId(task.id)}
|
|
||||||
onActionCellLeave={() => setActiveTaskId("")}
|
|
||||||
showActions={activeTaskId === task.id}
|
|
||||||
/>
|
|
||||||
))}
|
|
||||||
</TableBody>
|
|
||||||
<TableFooter>
|
|
||||||
<TableRow>
|
|
||||||
<TablePagination
|
|
||||||
rowsPerPageOptions={rowsPerPageOptions}
|
|
||||||
colSpan={columns.length + 1}
|
|
||||||
count={props.totalTaskCount}
|
|
||||||
rowsPerPage={pageSize}
|
|
||||||
page={page}
|
|
||||||
SelectProps={{
|
|
||||||
inputProps: { "aria-label": "rows per page" },
|
|
||||||
native: true,
|
|
||||||
}}
|
|
||||||
onPageChange={handlePageChange}
|
|
||||||
onRowsPerPageChange={handleRowsPerPageChange}
|
|
||||||
ActionsComponent={TablePaginationActions}
|
|
||||||
className={classes.pagination}
|
|
||||||
/>
|
|
||||||
</TableRow>
|
|
||||||
</TableFooter>
|
|
||||||
</Table>
|
|
||||||
</TableContainer>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
const useRowStyles = makeStyles((theme) => ({
|
|
||||||
root: {
|
|
||||||
cursor: "pointer",
|
|
||||||
"& #copy-button": {
|
|
||||||
display: "none",
|
|
||||||
},
|
|
||||||
"&:hover": {
|
|
||||||
boxShadow: theme.shadows[2],
|
|
||||||
},
|
|
||||||
"&:hover $copyButton": {
|
|
||||||
display: "inline-block",
|
|
||||||
},
|
|
||||||
"&:hover .MuiTableCell-root": {
|
|
||||||
borderBottomColor: theme.palette.background.paper,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
idCell: {
|
|
||||||
width: "200px",
|
|
||||||
},
|
|
||||||
copyButton: {
|
|
||||||
display: "none",
|
|
||||||
},
|
|
||||||
IdGroup: {
|
|
||||||
display: "flex",
|
|
||||||
alignItems: "center",
|
|
||||||
},
|
|
||||||
}));
|
|
||||||
|
|
||||||
interface RowProps {
|
|
||||||
task: ActiveTaskExtended;
|
|
||||||
isSelected: boolean;
|
|
||||||
onSelectChange: (checked: boolean) => void;
|
|
||||||
onCancelClick: () => void;
|
|
||||||
showActions: boolean;
|
|
||||||
onActionCellEnter: () => void;
|
|
||||||
onActionCellLeave: () => void;
|
|
||||||
}
|
|
||||||
|
|
||||||
function Row(props: RowProps) {
|
function Row(props: RowProps) {
|
||||||
const { task } = props;
|
const { task } = props;
|
||||||
const classes = useRowStyles();
|
const classes = useRowStyles();
|
||||||
@ -408,4 +160,15 @@ function Row(props: RowProps) {
|
|||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function ActiveTasksTable(props: Props & ReduxProps) {
|
||||||
|
return (
|
||||||
|
<TasksTable
|
||||||
|
taskState="active"
|
||||||
|
columns={columns}
|
||||||
|
renderRow={(rowProps: RowProps) => <Row {...rowProps} />}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
export default connector(ActiveTasksTable);
|
export default connector(ActiveTasksTable);
|
||||||
|
|||||||
@ -1,23 +1,13 @@
|
|||||||
import Checkbox from "@material-ui/core/Checkbox";
|
import Checkbox from "@material-ui/core/Checkbox";
|
||||||
import IconButton from "@material-ui/core/IconButton";
|
import IconButton from "@material-ui/core/IconButton";
|
||||||
import Paper from "@material-ui/core/Paper";
|
|
||||||
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 TableCell from "@material-ui/core/TableCell";
|
||||||
import TableContainer from "@material-ui/core/TableContainer";
|
|
||||||
import TableFooter from "@material-ui/core/TableFooter";
|
|
||||||
import TableHead from "@material-ui/core/TableHead";
|
|
||||||
import TablePagination from "@material-ui/core/TablePagination";
|
|
||||||
import TableRow from "@material-ui/core/TableRow";
|
import TableRow from "@material-ui/core/TableRow";
|
||||||
import Tooltip from "@material-ui/core/Tooltip";
|
import Tooltip from "@material-ui/core/Tooltip";
|
||||||
import DeleteIcon from "@material-ui/icons/Delete";
|
import DeleteIcon from "@material-ui/icons/Delete";
|
||||||
import FileCopyOutlinedIcon from "@material-ui/icons/FileCopyOutlined";
|
import FileCopyOutlinedIcon from "@material-ui/icons/FileCopyOutlined";
|
||||||
import MoreHorizIcon from "@material-ui/icons/MoreHoriz";
|
import MoreHorizIcon from "@material-ui/icons/MoreHoriz";
|
||||||
import PlayArrowIcon from "@material-ui/icons/PlayArrow";
|
import PlayArrowIcon from "@material-ui/icons/PlayArrow";
|
||||||
import Alert from "@material-ui/lab/Alert";
|
import React from "react";
|
||||||
import AlertTitle from "@material-ui/lab/AlertTitle";
|
|
||||||
import React, { useCallback, useState } from "react";
|
|
||||||
import { connect, ConnectedProps } from "react-redux";
|
import { connect, ConnectedProps } from "react-redux";
|
||||||
import { useHistory } from "react-router-dom";
|
import { useHistory } from "react-router-dom";
|
||||||
import { taskRowsPerPageChange } from "../actions/settingsActions";
|
import { taskRowsPerPageChange } from "../actions/settingsActions";
|
||||||
@ -30,36 +20,12 @@ import {
|
|||||||
runAllArchivedTasksAsync,
|
runAllArchivedTasksAsync,
|
||||||
runArchivedTaskAsync,
|
runArchivedTaskAsync,
|
||||||
} from "../actions/tasksActions";
|
} from "../actions/tasksActions";
|
||||||
import { usePolling } from "../hooks";
|
|
||||||
import { taskDetailsPath } from "../paths";
|
import { taskDetailsPath } from "../paths";
|
||||||
import { TaskInfoExtended } from "../reducers/tasksReducer";
|
|
||||||
import { AppState } from "../store";
|
import { AppState } from "../store";
|
||||||
import { TableColumn } from "../types/table";
|
import { TableColumn } from "../types/table";
|
||||||
import { prettifyPayload, timeAgo, uuidPrefix } from "../utils";
|
import { prettifyPayload, timeAgo, uuidPrefix } from "../utils";
|
||||||
import SyntaxHighlighter from "./SyntaxHighlighter";
|
import SyntaxHighlighter from "./SyntaxHighlighter";
|
||||||
import TableActions from "./TableActions";
|
import TasksTable, { RowProps, useRowStyles } from "./TasksTable";
|
||||||
import TablePaginationActions, {
|
|
||||||
rowsPerPageOptions,
|
|
||||||
} from "./TablePaginationActions";
|
|
||||||
|
|
||||||
const useStyles = makeStyles((theme) => ({
|
|
||||||
table: {
|
|
||||||
minWidth: 650,
|
|
||||||
},
|
|
||||||
stickyHeaderCell: {
|
|
||||||
background: theme.palette.background.paper,
|
|
||||||
},
|
|
||||||
alert: {
|
|
||||||
borderTopLeftRadius: 0,
|
|
||||||
borderTopRightRadius: 0,
|
|
||||||
},
|
|
||||||
pagination: {
|
|
||||||
border: "none",
|
|
||||||
},
|
|
||||||
idCell: {
|
|
||||||
width: "200px",
|
|
||||||
},
|
|
||||||
}));
|
|
||||||
|
|
||||||
function mapStateToProps(state: AppState) {
|
function mapStateToProps(state: AppState) {
|
||||||
return {
|
return {
|
||||||
@ -74,13 +40,13 @@ function mapStateToProps(state: AppState) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
const mapDispatchToProps = {
|
const mapDispatchToProps = {
|
||||||
listArchivedTasksAsync,
|
listTasks: listArchivedTasksAsync,
|
||||||
runArchivedTaskAsync,
|
runTask: runArchivedTaskAsync,
|
||||||
runAllArchivedTasksAsync,
|
runAllTasks: runAllArchivedTasksAsync,
|
||||||
deleteArchivedTaskAsync,
|
deleteTask: deleteArchivedTaskAsync,
|
||||||
deleteAllArchivedTasksAsync,
|
deleteAllTasks: deleteAllArchivedTasksAsync,
|
||||||
batchRunArchivedTasksAsync,
|
batchRunTasks: batchRunArchivedTasksAsync,
|
||||||
batchDeleteArchivedTasksAsync,
|
batchDeleteTasks: batchDeleteArchivedTasksAsync,
|
||||||
taskRowsPerPageChange,
|
taskRowsPerPageChange,
|
||||||
};
|
};
|
||||||
|
|
||||||
@ -93,80 +59,6 @@ interface Props {
|
|||||||
totalTaskCount: number; // totoal number of archived tasks.
|
totalTaskCount: number; // totoal number of archived tasks.
|
||||||
}
|
}
|
||||||
|
|
||||||
function ArchivedTasksTable(props: Props & ReduxProps) {
|
|
||||||
const { pollInterval, listArchivedTasksAsync, queue, pageSize } = props;
|
|
||||||
const classes = useStyles();
|
|
||||||
const [page, setPage] = useState(0);
|
|
||||||
const [selectedIds, setSelectedIds] = useState<string[]>([]);
|
|
||||||
const [activeTaskId, setActiveTaskId] = useState<string>("");
|
|
||||||
|
|
||||||
const handlePageChange = (
|
|
||||||
event: React.MouseEvent<HTMLButtonElement> | null,
|
|
||||||
newPage: number
|
|
||||||
) => {
|
|
||||||
setPage(newPage);
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleRowsPerPageChange = (
|
|
||||||
event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
|
|
||||||
) => {
|
|
||||||
props.taskRowsPerPageChange(parseInt(event.target.value, 10));
|
|
||||||
setPage(0);
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleSelectAllClick = (event: React.ChangeEvent<HTMLInputElement>) => {
|
|
||||||
if (event.target.checked) {
|
|
||||||
const newSelected = props.tasks.map((t) => t.id);
|
|
||||||
setSelectedIds(newSelected);
|
|
||||||
} else {
|
|
||||||
setSelectedIds([]);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleRunAllClick = () => {
|
|
||||||
props.runAllArchivedTasksAsync(queue);
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleDeleteAllClick = () => {
|
|
||||||
props.deleteAllArchivedTasksAsync(queue);
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleBatchRunClick = () => {
|
|
||||||
props
|
|
||||||
.batchRunArchivedTasksAsync(queue, selectedIds)
|
|
||||||
.then(() => setSelectedIds([]));
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleBatchDeleteClick = () => {
|
|
||||||
props
|
|
||||||
.batchDeleteArchivedTasksAsync(queue, selectedIds)
|
|
||||||
.then(() => setSelectedIds([]));
|
|
||||||
};
|
|
||||||
|
|
||||||
const fetchData = useCallback(() => {
|
|
||||||
const pageOpts = { page: page + 1, size: pageSize };
|
|
||||||
listArchivedTasksAsync(queue, pageOpts);
|
|
||||||
}, [page, pageSize, queue, listArchivedTasksAsync]);
|
|
||||||
|
|
||||||
usePolling(fetchData, pollInterval);
|
|
||||||
|
|
||||||
if (props.error.length > 0) {
|
|
||||||
return (
|
|
||||||
<Alert severity="error" className={classes.alert}>
|
|
||||||
<AlertTitle>Error</AlertTitle>
|
|
||||||
{props.error}
|
|
||||||
</Alert>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
if (props.tasks.length === 0) {
|
|
||||||
return (
|
|
||||||
<Alert severity="info" className={classes.alert}>
|
|
||||||
<AlertTitle>Info</AlertTitle>
|
|
||||||
No archived tasks at this time.
|
|
||||||
</Alert>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
const columns: TableColumn[] = [
|
const columns: TableColumn[] = [
|
||||||
{ key: "id", label: "ID", align: "left" },
|
{ key: "id", label: "ID", align: "left" },
|
||||||
{ key: "type", label: "Type", align: "left" },
|
{ key: "type", label: "Type", align: "left" },
|
||||||
@ -176,181 +68,6 @@ function ArchivedTasksTable(props: Props & ReduxProps) {
|
|||||||
{ key: "actions", label: "Actions", align: "center" },
|
{ key: "actions", label: "Actions", align: "center" },
|
||||||
];
|
];
|
||||||
|
|
||||||
const rowCount = props.tasks.length;
|
|
||||||
const numSelected = selectedIds.length;
|
|
||||||
return (
|
|
||||||
<div>
|
|
||||||
{!window.READ_ONLY && (
|
|
||||||
<TableActions
|
|
||||||
showIconButtons={numSelected > 0}
|
|
||||||
iconButtonActions={[
|
|
||||||
{
|
|
||||||
tooltip: "Delete",
|
|
||||||
icon: <DeleteIcon />,
|
|
||||||
onClick: handleBatchDeleteClick,
|
|
||||||
disabled: props.batchActionPending,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
tooltip: "Run",
|
|
||||||
icon: <PlayArrowIcon />,
|
|
||||||
onClick: handleBatchRunClick,
|
|
||||||
disabled: props.batchActionPending,
|
|
||||||
},
|
|
||||||
]}
|
|
||||||
menuItemActions={[
|
|
||||||
{
|
|
||||||
label: "Delete All",
|
|
||||||
onClick: handleDeleteAllClick,
|
|
||||||
disabled: props.allActionPending,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: "Run All",
|
|
||||||
onClick: handleRunAllClick,
|
|
||||||
disabled: props.allActionPending,
|
|
||||||
},
|
|
||||||
]}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
<TableContainer component={Paper}>
|
|
||||||
<Table
|
|
||||||
stickyHeader={true}
|
|
||||||
className={classes.table}
|
|
||||||
aria-label="archived tasks table"
|
|
||||||
size="small"
|
|
||||||
>
|
|
||||||
<TableHead>
|
|
||||||
<TableRow>
|
|
||||||
{!window.READ_ONLY && (
|
|
||||||
<TableCell
|
|
||||||
padding="checkbox"
|
|
||||||
classes={{ stickyHeader: classes.stickyHeaderCell }}
|
|
||||||
>
|
|
||||||
<IconButton>
|
|
||||||
<Checkbox
|
|
||||||
indeterminate={numSelected > 0 && numSelected < rowCount}
|
|
||||||
checked={rowCount > 0 && numSelected === rowCount}
|
|
||||||
onChange={handleSelectAllClick}
|
|
||||||
inputProps={{
|
|
||||||
"aria-label": "select all tasks shown in the table",
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</IconButton>
|
|
||||||
</TableCell>
|
|
||||||
)}
|
|
||||||
{columns
|
|
||||||
.filter((col) => {
|
|
||||||
// Filter out actions column in readonly mode.
|
|
||||||
return !window.READ_ONLY || col.key !== "actions";
|
|
||||||
})
|
|
||||||
.map((col) => (
|
|
||||||
<TableCell
|
|
||||||
key={col.key}
|
|
||||||
align={col.align}
|
|
||||||
classes={{ stickyHeader: classes.stickyHeaderCell }}
|
|
||||||
>
|
|
||||||
{col.label}
|
|
||||||
</TableCell>
|
|
||||||
))}
|
|
||||||
</TableRow>
|
|
||||||
</TableHead>
|
|
||||||
<TableBody>
|
|
||||||
{props.tasks.map((task) => (
|
|
||||||
<Row
|
|
||||||
key={task.id}
|
|
||||||
task={task}
|
|
||||||
isSelected={selectedIds.includes(task.id)}
|
|
||||||
onSelectChange={(checked: boolean) => {
|
|
||||||
if (checked) {
|
|
||||||
setSelectedIds(selectedIds.concat(task.id));
|
|
||||||
} else {
|
|
||||||
setSelectedIds(selectedIds.filter((id) => id !== task.id));
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
onRunClick={() => {
|
|
||||||
props.runArchivedTaskAsync(queue, task.id);
|
|
||||||
}}
|
|
||||||
onDeleteClick={() => {
|
|
||||||
props.deleteArchivedTaskAsync(queue, task.id);
|
|
||||||
}}
|
|
||||||
allActionPending={props.allActionPending}
|
|
||||||
onActionCellEnter={() => setActiveTaskId(task.id)}
|
|
||||||
onActionCellLeave={() => setActiveTaskId("")}
|
|
||||||
showActions={activeTaskId === task.id}
|
|
||||||
/>
|
|
||||||
))}
|
|
||||||
</TableBody>
|
|
||||||
<TableFooter>
|
|
||||||
<TableRow>
|
|
||||||
<TablePagination
|
|
||||||
rowsPerPageOptions={rowsPerPageOptions}
|
|
||||||
colSpan={columns.length + 1}
|
|
||||||
count={props.totalTaskCount}
|
|
||||||
rowsPerPage={pageSize}
|
|
||||||
page={page}
|
|
||||||
SelectProps={{
|
|
||||||
inputProps: { "aria-label": "rows per page" },
|
|
||||||
native: true,
|
|
||||||
}}
|
|
||||||
onPageChange={handlePageChange}
|
|
||||||
onRowsPerPageChange={handleRowsPerPageChange}
|
|
||||||
ActionsComponent={TablePaginationActions}
|
|
||||||
className={classes.pagination}
|
|
||||||
/>
|
|
||||||
</TableRow>
|
|
||||||
</TableFooter>
|
|
||||||
</Table>
|
|
||||||
</TableContainer>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
const useRowStyles = makeStyles((theme) => ({
|
|
||||||
root: {
|
|
||||||
cursor: "pointer",
|
|
||||||
"& #copy-button": {
|
|
||||||
display: "none",
|
|
||||||
},
|
|
||||||
"&:hover": {
|
|
||||||
boxShadow: theme.shadows[2],
|
|
||||||
},
|
|
||||||
"&:hover $copyButton": {
|
|
||||||
display: "inline-block",
|
|
||||||
},
|
|
||||||
"&:hover .MuiTableCell-root": {
|
|
||||||
borderBottomColor: theme.palette.background.paper,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
actionCell: {
|
|
||||||
width: "96px",
|
|
||||||
},
|
|
||||||
actionButton: {
|
|
||||||
marginLeft: 3,
|
|
||||||
marginRight: 3,
|
|
||||||
},
|
|
||||||
idCell: {
|
|
||||||
width: "200px",
|
|
||||||
},
|
|
||||||
copyButton: {
|
|
||||||
display: "none",
|
|
||||||
},
|
|
||||||
IdGroup: {
|
|
||||||
display: "flex",
|
|
||||||
alignItems: "center",
|
|
||||||
},
|
|
||||||
}));
|
|
||||||
|
|
||||||
interface RowProps {
|
|
||||||
task: TaskInfoExtended;
|
|
||||||
isSelected: boolean;
|
|
||||||
onSelectChange: (checked: boolean) => void;
|
|
||||||
onRunClick: () => void;
|
|
||||||
onDeleteClick: () => void;
|
|
||||||
allActionPending: boolean;
|
|
||||||
showActions: boolean;
|
|
||||||
onActionCellEnter: () => void;
|
|
||||||
onActionCellLeave: () => void;
|
|
||||||
}
|
|
||||||
|
|
||||||
function Row(props: RowProps) {
|
function Row(props: RowProps) {
|
||||||
const { task } = props;
|
const { task } = props;
|
||||||
const classes = useRowStyles();
|
const classes = useRowStyles();
|
||||||
@ -444,4 +161,15 @@ function Row(props: RowProps) {
|
|||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function ArchivedTasksTable(props: Props & ReduxProps) {
|
||||||
|
return (
|
||||||
|
<TasksTable
|
||||||
|
taskState="archived"
|
||||||
|
columns={columns}
|
||||||
|
renderRow={(rowProps: RowProps) => <Row {...rowProps} />}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
export default connector(ArchivedTasksTable);
|
export default connector(ArchivedTasksTable);
|
||||||
|
|||||||
@ -1,22 +1,12 @@
|
|||||||
import Checkbox from "@material-ui/core/Checkbox";
|
import Checkbox from "@material-ui/core/Checkbox";
|
||||||
import IconButton from "@material-ui/core/IconButton";
|
import IconButton from "@material-ui/core/IconButton";
|
||||||
import Paper from "@material-ui/core/Paper";
|
|
||||||
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 TableCell from "@material-ui/core/TableCell";
|
||||||
import TableContainer from "@material-ui/core/TableContainer";
|
|
||||||
import TableFooter from "@material-ui/core/TableFooter";
|
|
||||||
import TableHead from "@material-ui/core/TableHead";
|
|
||||||
import TablePagination from "@material-ui/core/TablePagination";
|
|
||||||
import TableRow from "@material-ui/core/TableRow";
|
import TableRow from "@material-ui/core/TableRow";
|
||||||
import Tooltip from "@material-ui/core/Tooltip";
|
import Tooltip from "@material-ui/core/Tooltip";
|
||||||
import DeleteIcon from "@material-ui/icons/Delete";
|
import DeleteIcon from "@material-ui/icons/Delete";
|
||||||
import FileCopyOutlinedIcon from "@material-ui/icons/FileCopyOutlined";
|
import FileCopyOutlinedIcon from "@material-ui/icons/FileCopyOutlined";
|
||||||
import MoreHorizIcon from "@material-ui/icons/MoreHoriz";
|
import MoreHorizIcon from "@material-ui/icons/MoreHoriz";
|
||||||
import Alert from "@material-ui/lab/Alert";
|
import React from "react";
|
||||||
import AlertTitle from "@material-ui/lab/AlertTitle";
|
|
||||||
import React, { useCallback, useState } from "react";
|
|
||||||
import { connect, ConnectedProps } from "react-redux";
|
import { connect, ConnectedProps } from "react-redux";
|
||||||
import { useHistory } from "react-router-dom";
|
import { useHistory } from "react-router-dom";
|
||||||
import { taskRowsPerPageChange } from "../actions/settingsActions";
|
import { taskRowsPerPageChange } from "../actions/settingsActions";
|
||||||
@ -26,9 +16,7 @@ import {
|
|||||||
deleteCompletedTaskAsync,
|
deleteCompletedTaskAsync,
|
||||||
listCompletedTasksAsync,
|
listCompletedTasksAsync,
|
||||||
} from "../actions/tasksActions";
|
} from "../actions/tasksActions";
|
||||||
import { usePolling } from "../hooks";
|
|
||||||
import { taskDetailsPath } from "../paths";
|
import { taskDetailsPath } from "../paths";
|
||||||
import { TaskInfoExtended } from "../reducers/tasksReducer";
|
|
||||||
import { AppState } from "../store";
|
import { AppState } from "../store";
|
||||||
import { TableColumn } from "../types/table";
|
import { TableColumn } from "../types/table";
|
||||||
import {
|
import {
|
||||||
@ -39,26 +27,7 @@ import {
|
|||||||
uuidPrefix,
|
uuidPrefix,
|
||||||
} from "../utils";
|
} from "../utils";
|
||||||
import SyntaxHighlighter from "./SyntaxHighlighter";
|
import SyntaxHighlighter from "./SyntaxHighlighter";
|
||||||
import TableActions from "./TableActions";
|
import TasksTable, { RowProps, useRowStyles } from "./TasksTable";
|
||||||
import TablePaginationActions, {
|
|
||||||
rowsPerPageOptions,
|
|
||||||
} from "./TablePaginationActions";
|
|
||||||
|
|
||||||
const useStyles = makeStyles((theme) => ({
|
|
||||||
table: {
|
|
||||||
minWidth: 650,
|
|
||||||
},
|
|
||||||
stickyHeaderCell: {
|
|
||||||
background: theme.palette.background.paper,
|
|
||||||
},
|
|
||||||
alert: {
|
|
||||||
borderTopLeftRadius: 0,
|
|
||||||
borderTopRightRadius: 0,
|
|
||||||
},
|
|
||||||
pagination: {
|
|
||||||
border: "none",
|
|
||||||
},
|
|
||||||
}));
|
|
||||||
|
|
||||||
function mapStateToProps(state: AppState) {
|
function mapStateToProps(state: AppState) {
|
||||||
return {
|
return {
|
||||||
@ -73,10 +42,10 @@ function mapStateToProps(state: AppState) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
const mapDispatchToProps = {
|
const mapDispatchToProps = {
|
||||||
listCompletedTasksAsync,
|
listTasks: listCompletedTasksAsync,
|
||||||
deleteCompletedTaskAsync,
|
deleteTask: deleteCompletedTaskAsync,
|
||||||
deleteAllCompletedTasksAsync,
|
deleteAllTasks: deleteAllCompletedTasksAsync,
|
||||||
batchDeleteCompletedTasksAsync,
|
batchDeleteTasks: batchDeleteCompletedTasksAsync,
|
||||||
taskRowsPerPageChange,
|
taskRowsPerPageChange,
|
||||||
};
|
};
|
||||||
|
|
||||||
@ -89,70 +58,6 @@ interface Props {
|
|||||||
totalTaskCount: number; // totoal number of completed tasks.
|
totalTaskCount: number; // totoal number of completed tasks.
|
||||||
}
|
}
|
||||||
|
|
||||||
function CompletedTasksTable(props: Props & ReduxProps) {
|
|
||||||
const { pollInterval, listCompletedTasksAsync, queue, pageSize } = props;
|
|
||||||
const classes = useStyles();
|
|
||||||
const [page, setPage] = useState(0);
|
|
||||||
const [selectedIds, setSelectedIds] = useState<string[]>([]);
|
|
||||||
const [activeTaskId, setActiveTaskId] = useState<string>("");
|
|
||||||
|
|
||||||
const handlePageChange = (
|
|
||||||
event: React.MouseEvent<HTMLButtonElement> | null,
|
|
||||||
newPage: number
|
|
||||||
) => {
|
|
||||||
setPage(newPage);
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleRowsPerPageChange = (
|
|
||||||
event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
|
|
||||||
) => {
|
|
||||||
props.taskRowsPerPageChange(parseInt(event.target.value, 10));
|
|
||||||
setPage(0);
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleSelectAllClick = (event: React.ChangeEvent<HTMLInputElement>) => {
|
|
||||||
if (event.target.checked) {
|
|
||||||
const newSelected = props.tasks.map((t) => t.id);
|
|
||||||
setSelectedIds(newSelected);
|
|
||||||
} else {
|
|
||||||
setSelectedIds([]);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleDeleteAllClick = () => {
|
|
||||||
props.deleteAllCompletedTasksAsync(queue);
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleBatchDeleteClick = () => {
|
|
||||||
props
|
|
||||||
.batchDeleteCompletedTasksAsync(queue, selectedIds)
|
|
||||||
.then(() => setSelectedIds([]));
|
|
||||||
};
|
|
||||||
|
|
||||||
const fetchData = useCallback(() => {
|
|
||||||
const pageOpts = { page: page + 1, size: pageSize };
|
|
||||||
listCompletedTasksAsync(queue, pageOpts);
|
|
||||||
}, [page, pageSize, queue, listCompletedTasksAsync]);
|
|
||||||
|
|
||||||
usePolling(fetchData, pollInterval);
|
|
||||||
|
|
||||||
if (props.error.length > 0) {
|
|
||||||
return (
|
|
||||||
<Alert severity="error" className={classes.alert}>
|
|
||||||
<AlertTitle>Error</AlertTitle>
|
|
||||||
{props.error}
|
|
||||||
</Alert>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
if (props.tasks.length === 0) {
|
|
||||||
return (
|
|
||||||
<Alert severity="info" className={classes.alert}>
|
|
||||||
<AlertTitle>Info</AlertTitle>
|
|
||||||
No completed tasks at this time.
|
|
||||||
</Alert>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
const columns: TableColumn[] = [
|
const columns: TableColumn[] = [
|
||||||
{ key: "id", label: "ID", align: "left" },
|
{ key: "id", label: "ID", align: "left" },
|
||||||
{ key: "type", label: "Type", align: "left" },
|
{ key: "type", label: "Type", align: "left" },
|
||||||
@ -163,169 +68,6 @@ function CompletedTasksTable(props: Props & ReduxProps) {
|
|||||||
{ key: "actions", label: "Actions", align: "center" },
|
{ key: "actions", label: "Actions", align: "center" },
|
||||||
];
|
];
|
||||||
|
|
||||||
const rowCount = props.tasks.length;
|
|
||||||
const numSelected = selectedIds.length;
|
|
||||||
return (
|
|
||||||
<div>
|
|
||||||
{!window.READ_ONLY && (
|
|
||||||
<TableActions
|
|
||||||
showIconButtons={numSelected > 0}
|
|
||||||
iconButtonActions={[
|
|
||||||
{
|
|
||||||
tooltip: "Delete",
|
|
||||||
icon: <DeleteIcon />,
|
|
||||||
onClick: handleBatchDeleteClick,
|
|
||||||
disabled: props.batchActionPending,
|
|
||||||
},
|
|
||||||
]}
|
|
||||||
menuItemActions={[
|
|
||||||
{
|
|
||||||
label: "Delete All",
|
|
||||||
onClick: handleDeleteAllClick,
|
|
||||||
disabled: props.allActionPending,
|
|
||||||
},
|
|
||||||
]}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
<TableContainer component={Paper}>
|
|
||||||
<Table
|
|
||||||
stickyHeader={true}
|
|
||||||
className={classes.table}
|
|
||||||
aria-label="archived tasks table"
|
|
||||||
size="small"
|
|
||||||
>
|
|
||||||
<TableHead>
|
|
||||||
<TableRow>
|
|
||||||
{!window.READ_ONLY && (
|
|
||||||
<TableCell
|
|
||||||
padding="checkbox"
|
|
||||||
classes={{ stickyHeader: classes.stickyHeaderCell }}
|
|
||||||
>
|
|
||||||
<IconButton>
|
|
||||||
<Checkbox
|
|
||||||
indeterminate={numSelected > 0 && numSelected < rowCount}
|
|
||||||
checked={rowCount > 0 && numSelected === rowCount}
|
|
||||||
onChange={handleSelectAllClick}
|
|
||||||
inputProps={{
|
|
||||||
"aria-label": "select all tasks shown in the table",
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</IconButton>
|
|
||||||
</TableCell>
|
|
||||||
)}
|
|
||||||
{columns
|
|
||||||
.filter((col) => {
|
|
||||||
// Filter out actions column in readonly mode.
|
|
||||||
return !window.READ_ONLY || col.key !== "actions";
|
|
||||||
})
|
|
||||||
.map((col) => (
|
|
||||||
<TableCell
|
|
||||||
key={col.key}
|
|
||||||
align={col.align}
|
|
||||||
classes={{ stickyHeader: classes.stickyHeaderCell }}
|
|
||||||
>
|
|
||||||
{col.label}
|
|
||||||
</TableCell>
|
|
||||||
))}
|
|
||||||
</TableRow>
|
|
||||||
</TableHead>
|
|
||||||
<TableBody>
|
|
||||||
{props.tasks.map((task) => (
|
|
||||||
<Row
|
|
||||||
key={task.id}
|
|
||||||
task={task}
|
|
||||||
isSelected={selectedIds.includes(task.id)}
|
|
||||||
onSelectChange={(checked: boolean) => {
|
|
||||||
if (checked) {
|
|
||||||
setSelectedIds(selectedIds.concat(task.id));
|
|
||||||
} else {
|
|
||||||
setSelectedIds(selectedIds.filter((id) => id !== task.id));
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
onDeleteClick={() => {
|
|
||||||
props.deleteCompletedTaskAsync(queue, task.id);
|
|
||||||
}}
|
|
||||||
allActionPending={props.allActionPending}
|
|
||||||
onActionCellEnter={() => setActiveTaskId(task.id)}
|
|
||||||
onActionCellLeave={() => setActiveTaskId("")}
|
|
||||||
showActions={activeTaskId === task.id}
|
|
||||||
/>
|
|
||||||
))}
|
|
||||||
</TableBody>
|
|
||||||
<TableFooter>
|
|
||||||
<TableRow>
|
|
||||||
<TablePagination
|
|
||||||
rowsPerPageOptions={rowsPerPageOptions}
|
|
||||||
colSpan={columns.length + 1}
|
|
||||||
count={props.totalTaskCount}
|
|
||||||
rowsPerPage={pageSize}
|
|
||||||
page={page}
|
|
||||||
SelectProps={{
|
|
||||||
inputProps: { "aria-label": "rows per page" },
|
|
||||||
native: true,
|
|
||||||
}}
|
|
||||||
onPageChange={handlePageChange}
|
|
||||||
onRowsPerPageChange={handleRowsPerPageChange}
|
|
||||||
ActionsComponent={TablePaginationActions}
|
|
||||||
className={classes.pagination}
|
|
||||||
/>
|
|
||||||
</TableRow>
|
|
||||||
</TableFooter>
|
|
||||||
</Table>
|
|
||||||
</TableContainer>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
const useRowStyles = makeStyles((theme) => ({
|
|
||||||
root: {
|
|
||||||
cursor: "pointer",
|
|
||||||
"& #copy-button": {
|
|
||||||
display: "none",
|
|
||||||
},
|
|
||||||
"&:hover": {
|
|
||||||
boxShadow: theme.shadows[2],
|
|
||||||
"& #copy-button": {
|
|
||||||
display: "inline-block",
|
|
||||||
},
|
|
||||||
},
|
|
||||||
"&:hover $copyButton": {
|
|
||||||
display: "inline-block",
|
|
||||||
},
|
|
||||||
"&:hover .MuiTableCell-root": {
|
|
||||||
borderBottomColor: theme.palette.background.paper,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
actionCell: {
|
|
||||||
width: "96px",
|
|
||||||
},
|
|
||||||
actionButton: {
|
|
||||||
marginLeft: 3,
|
|
||||||
marginRight: 3,
|
|
||||||
},
|
|
||||||
idCell: {
|
|
||||||
width: "200px",
|
|
||||||
},
|
|
||||||
copyButton: {
|
|
||||||
display: "none",
|
|
||||||
},
|
|
||||||
IdGroup: {
|
|
||||||
display: "flex",
|
|
||||||
alignItems: "center",
|
|
||||||
},
|
|
||||||
}));
|
|
||||||
|
|
||||||
interface RowProps {
|
|
||||||
task: TaskInfoExtended;
|
|
||||||
isSelected: boolean;
|
|
||||||
onSelectChange: (checked: boolean) => void;
|
|
||||||
onDeleteClick: () => void;
|
|
||||||
allActionPending: boolean;
|
|
||||||
showActions: boolean;
|
|
||||||
onActionCellEnter: () => void;
|
|
||||||
onActionCellLeave: () => void;
|
|
||||||
}
|
|
||||||
|
|
||||||
function Row(props: RowProps) {
|
function Row(props: RowProps) {
|
||||||
const { task } = props;
|
const { task } = props;
|
||||||
const classes = useRowStyles();
|
const classes = useRowStyles();
|
||||||
@ -421,4 +163,14 @@ function Row(props: RowProps) {
|
|||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function CompletedTasksTable(props: Props & ReduxProps) {
|
||||||
|
return (
|
||||||
|
<TasksTable
|
||||||
|
taskState="completed"
|
||||||
|
columns={columns}
|
||||||
|
renderRow={(rowProps: RowProps) => <Row {...rowProps} />}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
export default connector(CompletedTasksTable);
|
export default connector(CompletedTasksTable);
|
||||||
|
|||||||
@ -1,23 +1,13 @@
|
|||||||
import Checkbox from "@material-ui/core/Checkbox";
|
import Checkbox from "@material-ui/core/Checkbox";
|
||||||
import IconButton from "@material-ui/core/IconButton";
|
import IconButton from "@material-ui/core/IconButton";
|
||||||
import Paper from "@material-ui/core/Paper";
|
|
||||||
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 TableCell from "@material-ui/core/TableCell";
|
||||||
import TableContainer from "@material-ui/core/TableContainer";
|
|
||||||
import TableFooter from "@material-ui/core/TableFooter";
|
|
||||||
import TableHead from "@material-ui/core/TableHead";
|
|
||||||
import TablePagination from "@material-ui/core/TablePagination";
|
|
||||||
import TableRow from "@material-ui/core/TableRow";
|
import TableRow from "@material-ui/core/TableRow";
|
||||||
import Tooltip from "@material-ui/core/Tooltip";
|
import Tooltip from "@material-ui/core/Tooltip";
|
||||||
import ArchiveIcon from "@material-ui/icons/Archive";
|
import ArchiveIcon from "@material-ui/icons/Archive";
|
||||||
import DeleteIcon from "@material-ui/icons/Delete";
|
import DeleteIcon from "@material-ui/icons/Delete";
|
||||||
import FileCopyOutlinedIcon from "@material-ui/icons/FileCopyOutlined";
|
import FileCopyOutlinedIcon from "@material-ui/icons/FileCopyOutlined";
|
||||||
import MoreHorizIcon from "@material-ui/icons/MoreHoriz";
|
import MoreHorizIcon from "@material-ui/icons/MoreHoriz";
|
||||||
import Alert from "@material-ui/lab/Alert";
|
import React from "react";
|
||||||
import AlertTitle from "@material-ui/lab/AlertTitle";
|
|
||||||
import React, { useCallback, useState } from "react";
|
|
||||||
import { connect, ConnectedProps } from "react-redux";
|
import { connect, ConnectedProps } from "react-redux";
|
||||||
import { useHistory } from "react-router-dom";
|
import { useHistory } from "react-router-dom";
|
||||||
import { taskRowsPerPageChange } from "../actions/settingsActions";
|
import { taskRowsPerPageChange } from "../actions/settingsActions";
|
||||||
@ -30,33 +20,12 @@ import {
|
|||||||
deletePendingTaskAsync,
|
deletePendingTaskAsync,
|
||||||
listPendingTasksAsync,
|
listPendingTasksAsync,
|
||||||
} from "../actions/tasksActions";
|
} from "../actions/tasksActions";
|
||||||
import { usePolling } from "../hooks";
|
|
||||||
import { taskDetailsPath } from "../paths";
|
import { taskDetailsPath } from "../paths";
|
||||||
import { TaskInfoExtended } from "../reducers/tasksReducer";
|
|
||||||
import { AppState } from "../store";
|
import { AppState } from "../store";
|
||||||
import { TableColumn } from "../types/table";
|
import { TableColumn } from "../types/table";
|
||||||
import { prettifyPayload, uuidPrefix } from "../utils";
|
import { prettifyPayload, uuidPrefix } from "../utils";
|
||||||
import SyntaxHighlighter from "./SyntaxHighlighter";
|
import SyntaxHighlighter from "./SyntaxHighlighter";
|
||||||
import TableActions from "./TableActions";
|
import TasksTable, { RowProps, useRowStyles } from "./TasksTable";
|
||||||
import TablePaginationActions, {
|
|
||||||
rowsPerPageOptions,
|
|
||||||
} from "./TablePaginationActions";
|
|
||||||
|
|
||||||
const useStyles = makeStyles((theme) => ({
|
|
||||||
table: {
|
|
||||||
minWidth: 650,
|
|
||||||
},
|
|
||||||
stickyHeaderCell: {
|
|
||||||
background: theme.palette.background.paper,
|
|
||||||
},
|
|
||||||
alert: {
|
|
||||||
borderTopLeftRadius: 0,
|
|
||||||
borderTopRightRadius: 0,
|
|
||||||
},
|
|
||||||
pagination: {
|
|
||||||
border: "none",
|
|
||||||
},
|
|
||||||
}));
|
|
||||||
|
|
||||||
function mapStateToProps(state: AppState) {
|
function mapStateToProps(state: AppState) {
|
||||||
return {
|
return {
|
||||||
@ -71,13 +40,13 @@ function mapStateToProps(state: AppState) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
const mapDispatchToProps = {
|
const mapDispatchToProps = {
|
||||||
listPendingTasksAsync,
|
listTasks: listPendingTasksAsync,
|
||||||
deletePendingTaskAsync,
|
deleteTask: deletePendingTaskAsync,
|
||||||
batchDeletePendingTasksAsync,
|
batchDeleteTasks: batchDeletePendingTasksAsync,
|
||||||
deleteAllPendingTasksAsync,
|
deleteAllTasks: deleteAllPendingTasksAsync,
|
||||||
archivePendingTaskAsync,
|
archiveTask: archivePendingTaskAsync,
|
||||||
batchArchivePendingTasksAsync,
|
batchArchiveTasks: batchArchivePendingTasksAsync,
|
||||||
archiveAllPendingTasksAsync,
|
archiveAllTasks: archiveAllPendingTasksAsync,
|
||||||
taskRowsPerPageChange,
|
taskRowsPerPageChange,
|
||||||
};
|
};
|
||||||
|
|
||||||
@ -90,79 +59,6 @@ interface Props {
|
|||||||
totalTaskCount: number; // total number of pending tasks
|
totalTaskCount: number; // total number of pending tasks
|
||||||
}
|
}
|
||||||
|
|
||||||
function PendingTasksTable(props: Props & ReduxProps) {
|
|
||||||
const { pollInterval, listPendingTasksAsync, queue, pageSize } = props;
|
|
||||||
const classes = useStyles();
|
|
||||||
const [page, setPage] = useState(0);
|
|
||||||
const [selectedIds, setSelectedIds] = useState<string[]>([]);
|
|
||||||
const [activeTaskId, setActiveTaskId] = useState<string>("");
|
|
||||||
const handlePageChange = (
|
|
||||||
event: React.MouseEvent<HTMLButtonElement> | null,
|
|
||||||
newPage: number
|
|
||||||
) => {
|
|
||||||
setPage(newPage);
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleRowsPerPageChange = (
|
|
||||||
event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
|
|
||||||
) => {
|
|
||||||
props.taskRowsPerPageChange(parseInt(event.target.value, 10));
|
|
||||||
setPage(0);
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleSelectAllClick = (event: React.ChangeEvent<HTMLInputElement>) => {
|
|
||||||
if (event.target.checked) {
|
|
||||||
const newSelected = props.tasks.map((t) => t.id);
|
|
||||||
setSelectedIds(newSelected);
|
|
||||||
} else {
|
|
||||||
setSelectedIds([]);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleDeleteAllClick = () => {
|
|
||||||
props.deleteAllPendingTasksAsync(queue);
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleArchiveAllClick = () => {
|
|
||||||
props.archiveAllPendingTasksAsync(queue);
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleBatchDeleteClick = () => {
|
|
||||||
props
|
|
||||||
.batchDeletePendingTasksAsync(queue, selectedIds)
|
|
||||||
.then(() => setSelectedIds([]));
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleBatchArchiveClick = () => {
|
|
||||||
props
|
|
||||||
.batchArchivePendingTasksAsync(queue, selectedIds)
|
|
||||||
.then(() => setSelectedIds([]));
|
|
||||||
};
|
|
||||||
|
|
||||||
const fetchData = useCallback(() => {
|
|
||||||
const pageOpts = { page: page + 1, size: pageSize };
|
|
||||||
listPendingTasksAsync(queue, pageOpts);
|
|
||||||
}, [page, pageSize, queue, listPendingTasksAsync]);
|
|
||||||
|
|
||||||
usePolling(fetchData, pollInterval);
|
|
||||||
|
|
||||||
if (props.error.length > 0) {
|
|
||||||
return (
|
|
||||||
<Alert severity="error" className={classes.alert}>
|
|
||||||
<AlertTitle>Error</AlertTitle>
|
|
||||||
{props.error}
|
|
||||||
</Alert>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
if (props.tasks.length === 0) {
|
|
||||||
return (
|
|
||||||
<Alert severity="info" className={classes.alert}>
|
|
||||||
<AlertTitle>Info</AlertTitle>
|
|
||||||
No pending tasks at this time.
|
|
||||||
</Alert>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
const columns: TableColumn[] = [
|
const columns: TableColumn[] = [
|
||||||
{ key: "id", label: "ID", align: "left" },
|
{ key: "id", label: "ID", align: "left" },
|
||||||
{ key: "type", label: "Type", align: "left" },
|
{ key: "type", label: "Type", align: "left" },
|
||||||
@ -172,187 +68,6 @@ function PendingTasksTable(props: Props & ReduxProps) {
|
|||||||
{ key: "actions", label: "Actions", align: "center" },
|
{ key: "actions", label: "Actions", align: "center" },
|
||||||
];
|
];
|
||||||
|
|
||||||
const rowCount = props.tasks.length;
|
|
||||||
const numSelected = selectedIds.length;
|
|
||||||
return (
|
|
||||||
<div>
|
|
||||||
{!window.READ_ONLY && (
|
|
||||||
<TableActions
|
|
||||||
showIconButtons={numSelected > 0}
|
|
||||||
iconButtonActions={[
|
|
||||||
{
|
|
||||||
tooltip: "Delete",
|
|
||||||
icon: <DeleteIcon />,
|
|
||||||
onClick: handleBatchDeleteClick,
|
|
||||||
disabled: props.batchActionPending,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
tooltip: "Archive",
|
|
||||||
icon: <ArchiveIcon />,
|
|
||||||
onClick: handleBatchArchiveClick,
|
|
||||||
disabled: props.batchActionPending,
|
|
||||||
},
|
|
||||||
]}
|
|
||||||
menuItemActions={[
|
|
||||||
{
|
|
||||||
label: "Delete All",
|
|
||||||
onClick: handleDeleteAllClick,
|
|
||||||
disabled: props.allActionPending,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: "Archive All",
|
|
||||||
onClick: handleArchiveAllClick,
|
|
||||||
disabled: props.allActionPending,
|
|
||||||
},
|
|
||||||
]}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
<TableContainer component={Paper}>
|
|
||||||
<Table
|
|
||||||
stickyHeader={true}
|
|
||||||
className={classes.table}
|
|
||||||
aria-label="pending tasks table"
|
|
||||||
size="small"
|
|
||||||
>
|
|
||||||
<TableHead>
|
|
||||||
<TableRow>
|
|
||||||
{!window.READ_ONLY && (
|
|
||||||
<TableCell
|
|
||||||
padding="checkbox"
|
|
||||||
classes={{ stickyHeader: classes.stickyHeaderCell }}
|
|
||||||
>
|
|
||||||
<IconButton>
|
|
||||||
<Checkbox
|
|
||||||
indeterminate={numSelected > 0 && numSelected < rowCount}
|
|
||||||
checked={rowCount > 0 && numSelected === rowCount}
|
|
||||||
onChange={handleSelectAllClick}
|
|
||||||
inputProps={{
|
|
||||||
"aria-label": "select all tasks shown in the table",
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</IconButton>
|
|
||||||
</TableCell>
|
|
||||||
)}
|
|
||||||
{columns
|
|
||||||
.filter((col) => {
|
|
||||||
// Filter out actions column in readonly mode.
|
|
||||||
return !window.READ_ONLY || col.key !== "actions";
|
|
||||||
})
|
|
||||||
.map((col) => (
|
|
||||||
<TableCell
|
|
||||||
key={col.key}
|
|
||||||
align={col.align}
|
|
||||||
classes={{
|
|
||||||
stickyHeader: classes.stickyHeaderCell,
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{col.label}
|
|
||||||
</TableCell>
|
|
||||||
))}
|
|
||||||
</TableRow>
|
|
||||||
</TableHead>
|
|
||||||
<TableBody>
|
|
||||||
{props.tasks.map((task) => (
|
|
||||||
<Row
|
|
||||||
key={task.id}
|
|
||||||
task={task}
|
|
||||||
isSelected={selectedIds.includes(task.id)}
|
|
||||||
onSelectChange={(checked: boolean) => {
|
|
||||||
if (checked) {
|
|
||||||
setSelectedIds(selectedIds.concat(task.id));
|
|
||||||
} else {
|
|
||||||
setSelectedIds(selectedIds.filter((id) => id !== task.id));
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
allActionPending={props.allActionPending}
|
|
||||||
onDeleteClick={() =>
|
|
||||||
props.deletePendingTaskAsync(queue, task.id)
|
|
||||||
}
|
|
||||||
onArchiveClick={() => {
|
|
||||||
props.archivePendingTaskAsync(queue, task.id);
|
|
||||||
}}
|
|
||||||
onActionCellEnter={() => setActiveTaskId(task.id)}
|
|
||||||
onActionCellLeave={() => setActiveTaskId("")}
|
|
||||||
showActions={activeTaskId === task.id}
|
|
||||||
/>
|
|
||||||
))}
|
|
||||||
</TableBody>
|
|
||||||
<TableFooter>
|
|
||||||
<TableRow>
|
|
||||||
<TablePagination
|
|
||||||
rowsPerPageOptions={rowsPerPageOptions}
|
|
||||||
colSpan={columns.length + 1}
|
|
||||||
count={props.totalTaskCount}
|
|
||||||
rowsPerPage={pageSize}
|
|
||||||
page={page}
|
|
||||||
SelectProps={{
|
|
||||||
inputProps: { "aria-label": "rows per page" },
|
|
||||||
native: true,
|
|
||||||
}}
|
|
||||||
onPageChange={handlePageChange}
|
|
||||||
onRowsPerPageChange={handleRowsPerPageChange}
|
|
||||||
ActionsComponent={TablePaginationActions}
|
|
||||||
className={classes.pagination}
|
|
||||||
/>
|
|
||||||
</TableRow>
|
|
||||||
</TableFooter>
|
|
||||||
</Table>
|
|
||||||
</TableContainer>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
const useRowStyles = makeStyles((theme) => ({
|
|
||||||
root: {
|
|
||||||
cursor: "pointer",
|
|
||||||
"& #copy-button": {
|
|
||||||
display: "none",
|
|
||||||
},
|
|
||||||
"&:hover": {
|
|
||||||
boxShadow: theme.shadows[2],
|
|
||||||
"& #copy-button": {
|
|
||||||
display: "inline-block",
|
|
||||||
},
|
|
||||||
},
|
|
||||||
"&:hover $copyButton": {
|
|
||||||
display: "inline-block",
|
|
||||||
},
|
|
||||||
"&:hover .MuiTableCell-root": {
|
|
||||||
borderBottomColor: theme.palette.background.paper,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
|
|
||||||
actionCell: {
|
|
||||||
width: "96px",
|
|
||||||
},
|
|
||||||
actionButton: {
|
|
||||||
marginLeft: 3,
|
|
||||||
marginRight: 3,
|
|
||||||
},
|
|
||||||
idCell: {
|
|
||||||
width: "200px",
|
|
||||||
},
|
|
||||||
copyButton: {
|
|
||||||
display: "none",
|
|
||||||
},
|
|
||||||
IdGroup: {
|
|
||||||
display: "flex",
|
|
||||||
alignItems: "center",
|
|
||||||
},
|
|
||||||
}));
|
|
||||||
|
|
||||||
interface RowProps {
|
|
||||||
task: TaskInfoExtended;
|
|
||||||
isSelected: boolean;
|
|
||||||
onSelectChange: (checked: boolean) => void;
|
|
||||||
onDeleteClick: () => void;
|
|
||||||
onArchiveClick: () => void;
|
|
||||||
allActionPending: boolean;
|
|
||||||
showActions: boolean;
|
|
||||||
onActionCellEnter: () => void;
|
|
||||||
onActionCellLeave: () => void;
|
|
||||||
}
|
|
||||||
|
|
||||||
function Row(props: RowProps) {
|
function Row(props: RowProps) {
|
||||||
const { task } = props;
|
const { task } = props;
|
||||||
const classes = useRowStyles();
|
const classes = useRowStyles();
|
||||||
@ -446,4 +161,15 @@ function Row(props: RowProps) {
|
|||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function PendingTasksTable(props: Props & ReduxProps) {
|
||||||
|
return (
|
||||||
|
<TasksTable
|
||||||
|
taskState="pending"
|
||||||
|
columns={columns}
|
||||||
|
renderRow={(rowProps: RowProps) => <Row {...rowProps} />}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
export default connector(PendingTasksTable);
|
export default connector(PendingTasksTable);
|
||||||
|
|||||||
@ -1,14 +1,6 @@
|
|||||||
import Checkbox from "@material-ui/core/Checkbox";
|
import Checkbox from "@material-ui/core/Checkbox";
|
||||||
import IconButton from "@material-ui/core/IconButton";
|
import IconButton from "@material-ui/core/IconButton";
|
||||||
import Paper from "@material-ui/core/Paper";
|
|
||||||
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 TableCell from "@material-ui/core/TableCell";
|
||||||
import TableContainer from "@material-ui/core/TableContainer";
|
|
||||||
import TableFooter from "@material-ui/core/TableFooter";
|
|
||||||
import TableHead from "@material-ui/core/TableHead";
|
|
||||||
import TablePagination from "@material-ui/core/TablePagination";
|
|
||||||
import TableRow from "@material-ui/core/TableRow";
|
import TableRow from "@material-ui/core/TableRow";
|
||||||
import Tooltip from "@material-ui/core/Tooltip";
|
import Tooltip from "@material-ui/core/Tooltip";
|
||||||
import ArchiveIcon from "@material-ui/icons/Archive";
|
import ArchiveIcon from "@material-ui/icons/Archive";
|
||||||
@ -16,9 +8,7 @@ import DeleteIcon from "@material-ui/icons/Delete";
|
|||||||
import FileCopyOutlinedIcon from "@material-ui/icons/FileCopyOutlined";
|
import FileCopyOutlinedIcon from "@material-ui/icons/FileCopyOutlined";
|
||||||
import MoreHorizIcon from "@material-ui/icons/MoreHoriz";
|
import MoreHorizIcon from "@material-ui/icons/MoreHoriz";
|
||||||
import PlayArrowIcon from "@material-ui/icons/PlayArrow";
|
import PlayArrowIcon from "@material-ui/icons/PlayArrow";
|
||||||
import Alert from "@material-ui/lab/Alert";
|
import React from "react";
|
||||||
import AlertTitle from "@material-ui/lab/AlertTitle";
|
|
||||||
import React, { useCallback, useState } from "react";
|
|
||||||
import { connect, ConnectedProps } from "react-redux";
|
import { connect, ConnectedProps } from "react-redux";
|
||||||
import { useHistory } from "react-router-dom";
|
import { useHistory } from "react-router-dom";
|
||||||
import { taskRowsPerPageChange } from "../actions/settingsActions";
|
import { taskRowsPerPageChange } from "../actions/settingsActions";
|
||||||
@ -34,33 +24,12 @@ import {
|
|||||||
runAllRetryTasksAsync,
|
runAllRetryTasksAsync,
|
||||||
runRetryTaskAsync,
|
runRetryTaskAsync,
|
||||||
} from "../actions/tasksActions";
|
} from "../actions/tasksActions";
|
||||||
import { usePolling } from "../hooks";
|
import TasksTable, { RowProps, useRowStyles } from "./TasksTable";
|
||||||
import { taskDetailsPath } from "../paths";
|
import { taskDetailsPath } from "../paths";
|
||||||
import { TaskInfoExtended } from "../reducers/tasksReducer";
|
|
||||||
import { AppState } from "../store";
|
import { AppState } from "../store";
|
||||||
import { TableColumn } from "../types/table";
|
import { TableColumn } from "../types/table";
|
||||||
import { durationBefore, prettifyPayload, uuidPrefix } from "../utils";
|
import { durationBefore, prettifyPayload, uuidPrefix } from "../utils";
|
||||||
import SyntaxHighlighter from "./SyntaxHighlighter";
|
import SyntaxHighlighter from "./SyntaxHighlighter";
|
||||||
import TableActions from "./TableActions";
|
|
||||||
import TablePaginationActions, {
|
|
||||||
rowsPerPageOptions,
|
|
||||||
} from "./TablePaginationActions";
|
|
||||||
|
|
||||||
const useStyles = makeStyles((theme) => ({
|
|
||||||
table: {
|
|
||||||
minWidth: 650,
|
|
||||||
},
|
|
||||||
stickyHeaderCell: {
|
|
||||||
background: theme.palette.background.paper,
|
|
||||||
},
|
|
||||||
alert: {
|
|
||||||
borderTopLeftRadius: 0,
|
|
||||||
borderTopRightRadius: 0,
|
|
||||||
},
|
|
||||||
pagination: {
|
|
||||||
border: "none",
|
|
||||||
},
|
|
||||||
}));
|
|
||||||
|
|
||||||
function mapStateToProps(state: AppState) {
|
function mapStateToProps(state: AppState) {
|
||||||
return {
|
return {
|
||||||
@ -75,16 +44,16 @@ function mapStateToProps(state: AppState) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
const mapDispatchToProps = {
|
const mapDispatchToProps = {
|
||||||
batchDeleteRetryTasksAsync,
|
batchDeleteTasks: batchDeleteRetryTasksAsync,
|
||||||
batchRunRetryTasksAsync,
|
batchRunTasks: batchRunRetryTasksAsync,
|
||||||
batchArchiveRetryTasksAsync,
|
batchArchiveTasks: batchArchiveRetryTasksAsync,
|
||||||
deleteAllRetryTasksAsync,
|
deleteAllTasks: deleteAllRetryTasksAsync,
|
||||||
runAllRetryTasksAsync,
|
runAllTasks: runAllRetryTasksAsync,
|
||||||
archiveAllRetryTasksAsync,
|
archiveAllTasks: archiveAllRetryTasksAsync,
|
||||||
listRetryTasksAsync,
|
listTasks: listRetryTasksAsync,
|
||||||
deleteRetryTaskAsync,
|
deleteTask: deleteRetryTaskAsync,
|
||||||
runRetryTaskAsync,
|
runTask: runRetryTaskAsync,
|
||||||
archiveRetryTaskAsync,
|
archiveTask: archiveRetryTaskAsync,
|
||||||
taskRowsPerPageChange,
|
taskRowsPerPageChange,
|
||||||
};
|
};
|
||||||
|
|
||||||
@ -97,90 +66,6 @@ interface Props {
|
|||||||
totalTaskCount: number; // totoal number of scheduled tasks.
|
totalTaskCount: number; // totoal number of scheduled tasks.
|
||||||
}
|
}
|
||||||
|
|
||||||
function RetryTasksTable(props: Props & ReduxProps) {
|
|
||||||
const { pollInterval, listRetryTasksAsync, queue, pageSize } = props;
|
|
||||||
const classes = useStyles();
|
|
||||||
const [page, setPage] = useState(0);
|
|
||||||
const [selectedIds, setSelectedIds] = useState<string[]>([]);
|
|
||||||
const [activeTaskId, setActiveTaskId] = useState<string>("");
|
|
||||||
|
|
||||||
const handlePageChange = (
|
|
||||||
event: React.MouseEvent<HTMLButtonElement> | null,
|
|
||||||
newPage: number
|
|
||||||
) => {
|
|
||||||
setPage(newPage);
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleRowsPerPageChange = (
|
|
||||||
event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
|
|
||||||
) => {
|
|
||||||
props.taskRowsPerPageChange(parseInt(event.target.value, 10));
|
|
||||||
setPage(0);
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleSelectAllClick = (event: React.ChangeEvent<HTMLInputElement>) => {
|
|
||||||
if (event.target.checked) {
|
|
||||||
const newSelected = props.tasks.map((t) => t.id);
|
|
||||||
setSelectedIds(newSelected);
|
|
||||||
} else {
|
|
||||||
setSelectedIds([]);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleRunAllClick = () => {
|
|
||||||
props.runAllRetryTasksAsync(queue);
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleDeleteAllClick = () => {
|
|
||||||
props.deleteAllRetryTasksAsync(queue);
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleArchiveAllClick = () => {
|
|
||||||
props.archiveAllRetryTasksAsync(queue);
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleBatchRunClick = () => {
|
|
||||||
props
|
|
||||||
.batchRunRetryTasksAsync(queue, selectedIds)
|
|
||||||
.then(() => setSelectedIds([]));
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleBatchDeleteClick = () => {
|
|
||||||
props
|
|
||||||
.batchDeleteRetryTasksAsync(queue, selectedIds)
|
|
||||||
.then(() => setSelectedIds([]));
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleBatchArchiveClick = () => {
|
|
||||||
props
|
|
||||||
.batchArchiveRetryTasksAsync(queue, selectedIds)
|
|
||||||
.then(() => setSelectedIds([]));
|
|
||||||
};
|
|
||||||
|
|
||||||
const fetchData = useCallback(() => {
|
|
||||||
const pageOpts = { page: page + 1, size: pageSize };
|
|
||||||
listRetryTasksAsync(queue, pageOpts);
|
|
||||||
}, [page, pageSize, queue, listRetryTasksAsync]);
|
|
||||||
|
|
||||||
usePolling(fetchData, pollInterval);
|
|
||||||
|
|
||||||
if (props.error.length > 0) {
|
|
||||||
return (
|
|
||||||
<Alert severity="error" className={classes.alert}>
|
|
||||||
<AlertTitle>Error</AlertTitle>
|
|
||||||
{props.error}
|
|
||||||
</Alert>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
if (props.tasks.length === 0) {
|
|
||||||
return (
|
|
||||||
<Alert severity="info" className={classes.alert}>
|
|
||||||
<AlertTitle>Info</AlertTitle>
|
|
||||||
No retry tasks at this time.
|
|
||||||
</Alert>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
const columns: TableColumn[] = [
|
const columns: TableColumn[] = [
|
||||||
{ key: "id", label: "ID", align: "left" },
|
{ key: "id", label: "ID", align: "left" },
|
||||||
{ key: "type", label: "Type", align: "left" },
|
{ key: "type", label: "Type", align: "left" },
|
||||||
@ -192,199 +77,6 @@ function RetryTasksTable(props: Props & ReduxProps) {
|
|||||||
{ key: "actions", label: "Actions", align: "center" },
|
{ key: "actions", label: "Actions", align: "center" },
|
||||||
];
|
];
|
||||||
|
|
||||||
const rowCount = props.tasks.length;
|
|
||||||
const numSelected = selectedIds.length;
|
|
||||||
return (
|
|
||||||
<div>
|
|
||||||
{!window.READ_ONLY && (
|
|
||||||
<TableActions
|
|
||||||
showIconButtons={numSelected > 0}
|
|
||||||
iconButtonActions={[
|
|
||||||
{
|
|
||||||
tooltip: "Delete",
|
|
||||||
icon: <DeleteIcon />,
|
|
||||||
onClick: handleBatchDeleteClick,
|
|
||||||
disabled: props.batchActionPending,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
tooltip: "Archive",
|
|
||||||
icon: <ArchiveIcon />,
|
|
||||||
onClick: handleBatchArchiveClick,
|
|
||||||
disabled: props.batchActionPending,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
tooltip: "Run",
|
|
||||||
icon: <PlayArrowIcon />,
|
|
||||||
onClick: handleBatchRunClick,
|
|
||||||
disabled: props.batchActionPending,
|
|
||||||
},
|
|
||||||
]}
|
|
||||||
menuItemActions={[
|
|
||||||
{
|
|
||||||
label: "Delete All",
|
|
||||||
onClick: handleDeleteAllClick,
|
|
||||||
disabled: props.allActionPending,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: "Archive All",
|
|
||||||
onClick: handleArchiveAllClick,
|
|
||||||
disabled: props.allActionPending,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: "Run All",
|
|
||||||
onClick: handleRunAllClick,
|
|
||||||
disabled: props.allActionPending,
|
|
||||||
},
|
|
||||||
]}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
<TableContainer component={Paper}>
|
|
||||||
<Table
|
|
||||||
stickyHeader={true}
|
|
||||||
className={classes.table}
|
|
||||||
aria-label="retry tasks table"
|
|
||||||
size="small"
|
|
||||||
>
|
|
||||||
<TableHead>
|
|
||||||
<TableRow>
|
|
||||||
{!window.READ_ONLY && (
|
|
||||||
<TableCell
|
|
||||||
padding="checkbox"
|
|
||||||
classes={{ stickyHeader: classes.stickyHeaderCell }}
|
|
||||||
>
|
|
||||||
<IconButton>
|
|
||||||
<Checkbox
|
|
||||||
indeterminate={numSelected > 0 && numSelected < rowCount}
|
|
||||||
checked={rowCount > 0 && numSelected === rowCount}
|
|
||||||
onChange={handleSelectAllClick}
|
|
||||||
inputProps={{
|
|
||||||
"aria-label": "select all tasks shown in the table",
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</IconButton>
|
|
||||||
</TableCell>
|
|
||||||
)}
|
|
||||||
{columns
|
|
||||||
.filter((col) => {
|
|
||||||
// Filter out actions column in readonly mode.
|
|
||||||
return !window.READ_ONLY || col.key !== "actions";
|
|
||||||
})
|
|
||||||
.map((col) => (
|
|
||||||
<TableCell
|
|
||||||
key={col.label}
|
|
||||||
align={col.align}
|
|
||||||
classes={{ stickyHeader: classes.stickyHeaderCell }}
|
|
||||||
>
|
|
||||||
{col.label}
|
|
||||||
</TableCell>
|
|
||||||
))}
|
|
||||||
</TableRow>
|
|
||||||
</TableHead>
|
|
||||||
<TableBody>
|
|
||||||
{props.tasks.map((task) => (
|
|
||||||
<Row
|
|
||||||
key={task.id}
|
|
||||||
task={task}
|
|
||||||
allActionPending={props.allActionPending}
|
|
||||||
isSelected={selectedIds.includes(task.id)}
|
|
||||||
onSelectChange={(checked: boolean) => {
|
|
||||||
if (checked) {
|
|
||||||
setSelectedIds(selectedIds.concat(task.id));
|
|
||||||
} else {
|
|
||||||
setSelectedIds(selectedIds.filter((id) => id !== task.id));
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
onRunClick={() => {
|
|
||||||
props.runRetryTaskAsync(task.queue, task.id);
|
|
||||||
}}
|
|
||||||
onDeleteClick={() => {
|
|
||||||
props.deleteRetryTaskAsync(task.queue, task.id);
|
|
||||||
}}
|
|
||||||
onArchiveClick={() => {
|
|
||||||
props.archiveRetryTaskAsync(task.queue, task.id);
|
|
||||||
}}
|
|
||||||
onActionCellEnter={() => setActiveTaskId(task.id)}
|
|
||||||
onActionCellLeave={() => setActiveTaskId("")}
|
|
||||||
showActions={activeTaskId === task.id}
|
|
||||||
/>
|
|
||||||
))}
|
|
||||||
</TableBody>
|
|
||||||
<TableFooter>
|
|
||||||
<TableRow>
|
|
||||||
<TablePagination
|
|
||||||
rowsPerPageOptions={rowsPerPageOptions}
|
|
||||||
colSpan={columns.length + 1}
|
|
||||||
count={props.totalTaskCount}
|
|
||||||
rowsPerPage={pageSize}
|
|
||||||
page={page}
|
|
||||||
SelectProps={{
|
|
||||||
inputProps: { "aria-label": "rows per page" },
|
|
||||||
native: true,
|
|
||||||
}}
|
|
||||||
onPageChange={handlePageChange}
|
|
||||||
onRowsPerPageChange={handleRowsPerPageChange}
|
|
||||||
ActionsComponent={TablePaginationActions}
|
|
||||||
className={classes.pagination}
|
|
||||||
/>
|
|
||||||
</TableRow>
|
|
||||||
</TableFooter>
|
|
||||||
</Table>
|
|
||||||
</TableContainer>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
const useRowStyles = makeStyles((theme) => ({
|
|
||||||
root: {
|
|
||||||
cursor: "pointer",
|
|
||||||
"& #copy-button": {
|
|
||||||
display: "none",
|
|
||||||
},
|
|
||||||
"&:hover": {
|
|
||||||
boxShadow: theme.shadows[2],
|
|
||||||
"& #copy-button": {
|
|
||||||
display: "inline-block",
|
|
||||||
},
|
|
||||||
},
|
|
||||||
"&:hover $copyButton": {
|
|
||||||
display: "inline-block",
|
|
||||||
},
|
|
||||||
"&:hover .MuiTableCell-root": {
|
|
||||||
borderBottomColor: theme.palette.background.paper,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
actionCell: {
|
|
||||||
width: "140px",
|
|
||||||
},
|
|
||||||
actionButton: {
|
|
||||||
marginLeft: 3,
|
|
||||||
marginRight: 3,
|
|
||||||
},
|
|
||||||
idCell: {
|
|
||||||
width: "200px",
|
|
||||||
},
|
|
||||||
copyButton: {
|
|
||||||
display: "none",
|
|
||||||
},
|
|
||||||
IdGroup: {
|
|
||||||
display: "flex",
|
|
||||||
alignItems: "center",
|
|
||||||
},
|
|
||||||
}));
|
|
||||||
|
|
||||||
interface RowProps {
|
|
||||||
task: TaskInfoExtended;
|
|
||||||
isSelected: boolean;
|
|
||||||
onSelectChange: (checked: boolean) => void;
|
|
||||||
onDeleteClick: () => void;
|
|
||||||
onRunClick: () => void;
|
|
||||||
onArchiveClick: () => void;
|
|
||||||
allActionPending: boolean;
|
|
||||||
showActions: boolean;
|
|
||||||
onActionCellEnter: () => void;
|
|
||||||
onActionCellLeave: () => void;
|
|
||||||
}
|
|
||||||
|
|
||||||
function Row(props: RowProps) {
|
function Row(props: RowProps) {
|
||||||
const { task } = props;
|
const { task } = props;
|
||||||
const classes = useRowStyles();
|
const classes = useRowStyles();
|
||||||
@ -491,4 +183,15 @@ function Row(props: RowProps) {
|
|||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function RetryTasksTable(props: Props & ReduxProps) {
|
||||||
|
return (
|
||||||
|
<TasksTable
|
||||||
|
taskState="retry"
|
||||||
|
columns={columns}
|
||||||
|
renderRow={(rowProps: RowProps) => <Row {...rowProps} />}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
export default connector(RetryTasksTable);
|
export default connector(RetryTasksTable);
|
||||||
|
|||||||
@ -74,17 +74,6 @@ const columns: TableColumn[] = [
|
|||||||
{ key: "actions", label: "Actions", align: "center" },
|
{ key: "actions", label: "Actions", align: "center" },
|
||||||
];
|
];
|
||||||
|
|
||||||
function ScheduledTasksTable(props: Props & ReduxProps) {
|
|
||||||
return (
|
|
||||||
<TasksTable
|
|
||||||
taskState="scheduled"
|
|
||||||
columns={columns}
|
|
||||||
renderRow={(rowProps: RowProps) => <Row {...rowProps} />}
|
|
||||||
{...props}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
function Row(props: RowProps) {
|
function Row(props: RowProps) {
|
||||||
const { task } = props;
|
const { task } = props;
|
||||||
const classes = useRowStyles();
|
const classes = useRowStyles();
|
||||||
@ -187,4 +176,15 @@ function Row(props: RowProps) {
|
|||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function ScheduledTasksTable(props: Props & ReduxProps) {
|
||||||
|
return (
|
||||||
|
<TasksTable
|
||||||
|
taskState="scheduled"
|
||||||
|
columns={columns}
|
||||||
|
renderRow={(rowProps: RowProps) => <Row {...rowProps} />}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
export default connector(ScheduledTasksTable);
|
export default connector(ScheduledTasksTable);
|
||||||
|
|||||||
@ -14,6 +14,7 @@ import IconButton from "@material-ui/core/IconButton";
|
|||||||
import PlayArrowIcon from "@material-ui/icons/PlayArrow";
|
import PlayArrowIcon from "@material-ui/icons/PlayArrow";
|
||||||
import DeleteIcon from "@material-ui/icons/Delete";
|
import DeleteIcon from "@material-ui/icons/Delete";
|
||||||
import ArchiveIcon from "@material-ui/icons/Archive";
|
import ArchiveIcon from "@material-ui/icons/Archive";
|
||||||
|
import CancelIcon from "@material-ui/icons/Cancel";
|
||||||
import Alert from "@material-ui/lab/Alert";
|
import Alert from "@material-ui/lab/Alert";
|
||||||
import AlertTitle from "@material-ui/lab/AlertTitle";
|
import AlertTitle from "@material-ui/lab/AlertTitle";
|
||||||
import TablePaginationActions, {
|
import TablePaginationActions, {
|
||||||
@ -60,12 +61,15 @@ interface Props {
|
|||||||
batchDeleteTasks?: (qname: string, taskIds: string[]) => Promise<void>;
|
batchDeleteTasks?: (qname: string, taskIds: string[]) => Promise<void>;
|
||||||
batchRunTasks?: (qname: string, taskIds: string[]) => Promise<void>;
|
batchRunTasks?: (qname: string, taskIds: string[]) => Promise<void>;
|
||||||
batchArchiveTasks?: (qname: string, taskIds: string[]) => Promise<void>;
|
batchArchiveTasks?: (qname: string, taskIds: string[]) => Promise<void>;
|
||||||
|
batchCancelTasks?: (qname: string, taskIds: string[]) => Promise<void>;
|
||||||
deleteAllTasks?: (qname: string) => Promise<void>;
|
deleteAllTasks?: (qname: string) => Promise<void>;
|
||||||
runAllTasks?: (qname: string) => Promise<void>;
|
runAllTasks?: (qname: string) => Promise<void>;
|
||||||
archiveAllTasks?: (qname: string) => Promise<void>;
|
archiveAllTasks?: (qname: string) => Promise<void>;
|
||||||
|
cancelAllTasks?: (qname: string) => Promise<void>;
|
||||||
deleteTask?: (qname: string, taskId: string) => Promise<void>;
|
deleteTask?: (qname: string, taskId: string) => Promise<void>;
|
||||||
runTask?: (qname: string, taskId: string) => Promise<void>;
|
runTask?: (qname: string, taskId: string) => Promise<void>;
|
||||||
archiveTask?: (qname: string, taskId: string) => Promise<void>;
|
archiveTask?: (qname: string, taskId: string) => Promise<void>;
|
||||||
|
cancelTask?: (qname: string, taskId: string) => Promise<void>;
|
||||||
taskRowsPerPageChange: (n: number) => void;
|
taskRowsPerPageChange: (n: number) => void;
|
||||||
|
|
||||||
renderRow: (rowProps: RowProps) => JSX.Element;
|
renderRow: (rowProps: RowProps) => JSX.Element;
|
||||||
@ -140,6 +144,13 @@ export default function TasksTable(props: Props) {
|
|||||||
disabled: props.allActionPending,
|
disabled: props.allActionPending,
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
if (props.cancelAllTasks) {
|
||||||
|
allActions.push({
|
||||||
|
label: "Cancel All",
|
||||||
|
onClick: createAllTasksHandler(props.cancelAllTasks),
|
||||||
|
disabled: props.allActionPending,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
let batchActions = [];
|
let batchActions = [];
|
||||||
if (props.batchDeleteTasks) {
|
if (props.batchDeleteTasks) {
|
||||||
@ -166,6 +177,14 @@ export default function TasksTable(props: Props) {
|
|||||||
onClick: createBatchTasksHandler(props.batchRunTasks),
|
onClick: createBatchTasksHandler(props.batchRunTasks),
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
if (props.batchCancelTasks) {
|
||||||
|
batchActions.push({
|
||||||
|
tooltip: "Cancel",
|
||||||
|
icon: <CancelIcon />,
|
||||||
|
disabled: props.batchActionPending,
|
||||||
|
onClick: createBatchTasksHandler(props.batchCancelTasks),
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
const fetchData = useCallback(() => {
|
const fetchData = useCallback(() => {
|
||||||
const pageOpts = { page: page + 1, size: pageSize };
|
const pageOpts = { page: page + 1, size: pageSize };
|
||||||
@ -267,6 +286,9 @@ export default function TasksTable(props: Props) {
|
|||||||
onArchiveClick: props.archiveTask
|
onArchiveClick: props.archiveTask
|
||||||
? createTaskAction(props.archiveTask, task.id)
|
? createTaskAction(props.archiveTask, task.id)
|
||||||
: undefined,
|
: undefined,
|
||||||
|
onCancelClick: props.cancelTask
|
||||||
|
? createTaskAction(props.cancelTask, task.id)
|
||||||
|
: undefined,
|
||||||
onActionCellEnter: () => setActiveTaskId(task.id),
|
onActionCellEnter: () => setActiveTaskId(task.id),
|
||||||
onActionCellLeave: () => setActiveTaskId(""),
|
onActionCellLeave: () => setActiveTaskId(""),
|
||||||
showActions: activeTaskId === task.id,
|
showActions: activeTaskId === task.id,
|
||||||
@ -318,7 +340,7 @@ export const useRowStyles = makeStyles((theme) => ({
|
|||||||
},
|
},
|
||||||
},
|
},
|
||||||
actionCell: {
|
actionCell: {
|
||||||
width: "140px",
|
width: "140px", // TODO: This was 96px for pending/archived/completed row
|
||||||
},
|
},
|
||||||
actionButton: {
|
actionButton: {
|
||||||
marginLeft: 3,
|
marginLeft: 3,
|
||||||
@ -344,6 +366,7 @@ export interface RowProps {
|
|||||||
onRunClick?: () => void;
|
onRunClick?: () => void;
|
||||||
onDeleteClick?: () => void;
|
onDeleteClick?: () => void;
|
||||||
onArchiveClick?: () => void;
|
onArchiveClick?: () => void;
|
||||||
|
onCancelClick?: () => void;
|
||||||
allActionPending: boolean;
|
allActionPending: boolean;
|
||||||
showActions: boolean;
|
showActions: boolean;
|
||||||
onActionCellEnter: () => void;
|
onActionCellEnter: () => void;
|
||||||
|
|||||||
@ -162,20 +162,16 @@ import {
|
|||||||
} from "../actions/tasksActions";
|
} from "../actions/tasksActions";
|
||||||
import { TaskInfo } from "../api";
|
import { TaskInfo } from "../api";
|
||||||
|
|
||||||
export interface ActiveTaskExtended extends TaskInfo {
|
export interface TaskInfoExtended extends TaskInfo {
|
||||||
// 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;
|
||||||
|
|
||||||
// Incidates that a cancelation signal has been
|
// Incidates that a cancelation signal has been
|
||||||
// published for this task.
|
// published for this task.
|
||||||
canceling: boolean;
|
//
|
||||||
}
|
// Only applies to active tasks
|
||||||
|
canceling?: boolean;
|
||||||
export interface TaskInfoExtended extends TaskInfo {
|
|
||||||
// Indicates that a request has been sent for this
|
|
||||||
// task and awaiting for a response.
|
|
||||||
requestPending: boolean;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
interface TasksState {
|
interface TasksState {
|
||||||
@ -184,7 +180,7 @@ interface TasksState {
|
|||||||
batchActionPending: boolean;
|
batchActionPending: boolean;
|
||||||
allActionPending: boolean;
|
allActionPending: boolean;
|
||||||
error: string;
|
error: string;
|
||||||
data: ActiveTaskExtended[];
|
data: TaskInfoExtended[];
|
||||||
};
|
};
|
||||||
pendingTasks: {
|
pendingTasks: {
|
||||||
loading: boolean;
|
loading: boolean;
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user