mirror of
https://github.com/hibiken/asynqmon.git
synced 2025-01-18 18:55:54 +08:00
(ui): Hide action buttons in read-only mode
This commit is contained in:
Ken Hibino
parent
3805ae6e06
commit
49eece97f7
@ -52,6 +52,7 @@
|
||||
<script>
|
||||
window.ROOT_PATH = "%PUBLIC_URL%";
|
||||
window.PROMETHEUS_SERVER_ADDRESS = "/[[.PrometheusAddr]]";
|
||||
window.READ_ONLY = /[[.ReadOnly]];
|
||||
</script>
|
||||
<title>Asynq - Monitoring</title>
|
||||
</head>
|
||||
|
||||
@ -161,24 +161,26 @@ function ActiveTasksTable(props: Props & ReduxProps) {
|
||||
const numSelected = selectedIds.length;
|
||||
return (
|
||||
<div>
|
||||
<TableActions
|
||||
showIconButtons={numSelected > 0}
|
||||
iconButtonActions={[
|
||||
{
|
||||
tooltip: "Cancel",
|
||||
icon: <CancelIcon />,
|
||||
onClick: handleBatchCancelClick,
|
||||
disabled: props.batchActionPending,
|
||||
},
|
||||
]}
|
||||
menuItemActions={[
|
||||
{
|
||||
label: "Cancel All",
|
||||
onClick: handleCancelAllClick,
|
||||
disabled: props.allActionPending,
|
||||
},
|
||||
]}
|
||||
/>
|
||||
{!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}
|
||||
@ -188,30 +190,37 @@ function ActiveTasksTable(props: Props & ReduxProps) {
|
||||
>
|
||||
<TableHead>
|
||||
<TableRow>
|
||||
<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.map((col) => (
|
||||
{!window.READ_ONLY && (
|
||||
<TableCell
|
||||
key={col.key}
|
||||
align={col.align}
|
||||
padding="checkbox"
|
||||
classes={{ stickyHeader: classes.stickyHeaderCell }}
|
||||
>
|
||||
{col.label}
|
||||
<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>
|
||||
@ -311,16 +320,18 @@ function Row(props: RowProps) {
|
||||
selected={props.isSelected}
|
||||
onClick={() => history.push(taskDetailsPath(task.queue, task.id))}
|
||||
>
|
||||
<TableCell padding="checkbox" onClick={(e) => e.stopPropagation()}>
|
||||
<IconButton>
|
||||
<Checkbox
|
||||
onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
|
||||
props.onSelectChange(event.target.checked)
|
||||
}
|
||||
checked={props.isSelected}
|
||||
/>
|
||||
</IconButton>
|
||||
</TableCell>
|
||||
{!window.READ_ONLY && (
|
||||
<TableCell padding="checkbox" onClick={(e) => e.stopPropagation()}>
|
||||
<IconButton>
|
||||
<Checkbox
|
||||
onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
|
||||
props.onSelectChange(event.target.checked)
|
||||
}
|
||||
checked={props.isSelected}
|
||||
/>
|
||||
</IconButton>
|
||||
</TableCell>
|
||||
)}
|
||||
<TableCell component="th" scope="row" className={classes.idCell}>
|
||||
<div className={classes.IdGroup}>
|
||||
{uuidPrefix(task.id)}
|
||||
@ -364,32 +375,34 @@ function Row(props: RowProps) {
|
||||
<TableCell>
|
||||
{task.deadline === "-" ? "-" : durationBefore(task.deadline)}
|
||||
</TableCell>
|
||||
<TableCell
|
||||
align="center"
|
||||
onMouseEnter={props.onActionCellEnter}
|
||||
onMouseLeave={props.onActionCellLeave}
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
{props.showActions ? (
|
||||
<React.Fragment>
|
||||
<Tooltip title="Cancel">
|
||||
<IconButton
|
||||
onClick={props.onCancelClick}
|
||||
disabled={
|
||||
task.requestPending || task.canceling || task.is_orphaned
|
||||
}
|
||||
size="small"
|
||||
>
|
||||
<CancelIcon fontSize="small" />
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
</React.Fragment>
|
||||
) : (
|
||||
<IconButton size="small" onClick={props.onActionCellEnter}>
|
||||
<MoreHorizIcon fontSize="small" />
|
||||
</IconButton>
|
||||
)}
|
||||
</TableCell>
|
||||
{!window.READ_ONLY && (
|
||||
<TableCell
|
||||
align="center"
|
||||
onMouseEnter={props.onActionCellEnter}
|
||||
onMouseLeave={props.onActionCellLeave}
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
{props.showActions ? (
|
||||
<React.Fragment>
|
||||
<Tooltip title="Cancel">
|
||||
<IconButton
|
||||
onClick={props.onCancelClick}
|
||||
disabled={
|
||||
task.requestPending || task.canceling || task.is_orphaned
|
||||
}
|
||||
size="small"
|
||||
>
|
||||
<CancelIcon fontSize="small" />
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
</React.Fragment>
|
||||
) : (
|
||||
<IconButton size="small" onClick={props.onActionCellEnter}>
|
||||
<MoreHorizIcon fontSize="small" />
|
||||
</IconButton>
|
||||
)}
|
||||
</TableCell>
|
||||
)}
|
||||
</TableRow>
|
||||
);
|
||||
}
|
||||
|
||||
@ -180,35 +180,37 @@ function ArchivedTasksTable(props: Props & ReduxProps) {
|
||||
const numSelected = selectedIds.length;
|
||||
return (
|
||||
<div>
|
||||
<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,
|
||||
},
|
||||
]}
|
||||
/>
|
||||
{!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}
|
||||
@ -218,30 +220,37 @@ function ArchivedTasksTable(props: Props & ReduxProps) {
|
||||
>
|
||||
<TableHead>
|
||||
<TableRow>
|
||||
<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.map((col) => (
|
||||
{!window.READ_ONLY && (
|
||||
<TableCell
|
||||
key={col.key}
|
||||
align={col.align}
|
||||
padding="checkbox"
|
||||
classes={{ stickyHeader: classes.stickyHeaderCell }}
|
||||
>
|
||||
{col.label}
|
||||
<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>
|
||||
@ -353,16 +362,18 @@ function Row(props: RowProps) {
|
||||
selected={props.isSelected}
|
||||
onClick={() => history.push(taskDetailsPath(task.queue, task.id))}
|
||||
>
|
||||
<TableCell padding="checkbox" onClick={(e) => e.stopPropagation()}>
|
||||
<IconButton>
|
||||
<Checkbox
|
||||
onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
|
||||
props.onSelectChange(event.target.checked)
|
||||
}
|
||||
checked={props.isSelected}
|
||||
/>
|
||||
</IconButton>
|
||||
</TableCell>
|
||||
{!window.READ_ONLY && (
|
||||
<TableCell padding="checkbox" onClick={(e) => e.stopPropagation()}>
|
||||
<IconButton>
|
||||
<Checkbox
|
||||
onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
|
||||
props.onSelectChange(event.target.checked)
|
||||
}
|
||||
checked={props.isSelected}
|
||||
/>
|
||||
</IconButton>
|
||||
</TableCell>
|
||||
)}
|
||||
<TableCell component="th" scope="row" className={classes.idCell}>
|
||||
<div className={classes.IdGroup}>
|
||||
{uuidPrefix(task.id)}
|
||||
@ -391,42 +402,44 @@ function Row(props: RowProps) {
|
||||
</TableCell>
|
||||
<TableCell>{timeAgo(task.last_failed_at)}</TableCell>
|
||||
<TableCell>{task.error_message}</TableCell>
|
||||
<TableCell
|
||||
align="center"
|
||||
className={classes.actionCell}
|
||||
onMouseEnter={props.onActionCellEnter}
|
||||
onMouseLeave={props.onActionCellLeave}
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
{props.showActions ? (
|
||||
<React.Fragment>
|
||||
<Tooltip title="Delete">
|
||||
<IconButton
|
||||
className={classes.actionButton}
|
||||
onClick={props.onDeleteClick}
|
||||
disabled={task.requestPending || props.allActionPending}
|
||||
size="small"
|
||||
>
|
||||
<DeleteIcon fontSize="small" />
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
<Tooltip title="Run">
|
||||
<IconButton
|
||||
className={classes.actionButton}
|
||||
onClick={props.onRunClick}
|
||||
disabled={task.requestPending || props.allActionPending}
|
||||
size="small"
|
||||
>
|
||||
<PlayArrowIcon fontSize="small" />
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
</React.Fragment>
|
||||
) : (
|
||||
<IconButton size="small" onClick={props.onActionCellEnter}>
|
||||
<MoreHorizIcon fontSize="small" />
|
||||
</IconButton>
|
||||
)}
|
||||
</TableCell>
|
||||
{!window.READ_ONLY && (
|
||||
<TableCell
|
||||
align="center"
|
||||
className={classes.actionCell}
|
||||
onMouseEnter={props.onActionCellEnter}
|
||||
onMouseLeave={props.onActionCellLeave}
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
{props.showActions ? (
|
||||
<React.Fragment>
|
||||
<Tooltip title="Delete">
|
||||
<IconButton
|
||||
className={classes.actionButton}
|
||||
onClick={props.onDeleteClick}
|
||||
disabled={task.requestPending || props.allActionPending}
|
||||
size="small"
|
||||
>
|
||||
<DeleteIcon fontSize="small" />
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
<Tooltip title="Run">
|
||||
<IconButton
|
||||
className={classes.actionButton}
|
||||
onClick={props.onRunClick}
|
||||
disabled={task.requestPending || props.allActionPending}
|
||||
size="small"
|
||||
>
|
||||
<PlayArrowIcon fontSize="small" />
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
</React.Fragment>
|
||||
) : (
|
||||
<IconButton size="small" onClick={props.onActionCellEnter}>
|
||||
<MoreHorizIcon fontSize="small" />
|
||||
</IconButton>
|
||||
)}
|
||||
</TableCell>
|
||||
)}
|
||||
</TableRow>
|
||||
);
|
||||
}
|
||||
|
||||
@ -167,24 +167,26 @@ function CompletedTasksTable(props: Props & ReduxProps) {
|
||||
const numSelected = selectedIds.length;
|
||||
return (
|
||||
<div>
|
||||
<TableActions
|
||||
showIconButtons={numSelected > 0}
|
||||
iconButtonActions={[
|
||||
{
|
||||
tooltip: "Delete",
|
||||
icon: <DeleteIcon />,
|
||||
onClick: handleBatchDeleteClick,
|
||||
disabled: props.batchActionPending,
|
||||
},
|
||||
]}
|
||||
menuItemActions={[
|
||||
{
|
||||
label: "Delete All",
|
||||
onClick: handleDeleteAllClick,
|
||||
disabled: props.allActionPending,
|
||||
},
|
||||
]}
|
||||
/>
|
||||
{!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}
|
||||
@ -194,30 +196,37 @@ function CompletedTasksTable(props: Props & ReduxProps) {
|
||||
>
|
||||
<TableHead>
|
||||
<TableRow>
|
||||
<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.map((col) => (
|
||||
{!window.READ_ONLY && (
|
||||
<TableCell
|
||||
key={col.key}
|
||||
align={col.align}
|
||||
padding="checkbox"
|
||||
classes={{ stickyHeader: classes.stickyHeaderCell }}
|
||||
>
|
||||
{col.label}
|
||||
<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>
|
||||
@ -328,16 +337,18 @@ function Row(props: RowProps) {
|
||||
selected={props.isSelected}
|
||||
onClick={() => history.push(taskDetailsPath(task.queue, task.id))}
|
||||
>
|
||||
<TableCell padding="checkbox" onClick={(e) => e.stopPropagation()}>
|
||||
<IconButton>
|
||||
<Checkbox
|
||||
onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
|
||||
props.onSelectChange(event.target.checked)
|
||||
}
|
||||
checked={props.isSelected}
|
||||
/>
|
||||
</IconButton>
|
||||
</TableCell>
|
||||
{!window.READ_ONLY && (
|
||||
<TableCell padding="checkbox" onClick={(e) => e.stopPropagation()}>
|
||||
<IconButton>
|
||||
<Checkbox
|
||||
onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
|
||||
props.onSelectChange(event.target.checked)
|
||||
}
|
||||
checked={props.isSelected}
|
||||
/>
|
||||
</IconButton>
|
||||
</TableCell>
|
||||
)}
|
||||
<TableCell component="th" scope="row" className={classes.idCell}>
|
||||
<div className={classes.IdGroup}>
|
||||
{uuidPrefix(task.id)}
|
||||
@ -378,32 +389,34 @@ function Row(props: RowProps) {
|
||||
? `${stringifyDuration(durationFromSeconds(task.ttl_seconds))} left`
|
||||
: `expired`}
|
||||
</TableCell>
|
||||
<TableCell
|
||||
align="center"
|
||||
className={classes.actionCell}
|
||||
onMouseEnter={props.onActionCellEnter}
|
||||
onMouseLeave={props.onActionCellLeave}
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
{props.showActions ? (
|
||||
<React.Fragment>
|
||||
<Tooltip title="Delete">
|
||||
<IconButton
|
||||
className={classes.actionButton}
|
||||
onClick={props.onDeleteClick}
|
||||
disabled={task.requestPending || props.allActionPending}
|
||||
size="small"
|
||||
>
|
||||
<DeleteIcon fontSize="small" />
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
</React.Fragment>
|
||||
) : (
|
||||
<IconButton size="small" onClick={props.onActionCellEnter}>
|
||||
<MoreHorizIcon fontSize="small" />
|
||||
</IconButton>
|
||||
)}
|
||||
</TableCell>
|
||||
{!window.READ_ONLY && (
|
||||
<TableCell
|
||||
align="center"
|
||||
className={classes.actionCell}
|
||||
onMouseEnter={props.onActionCellEnter}
|
||||
onMouseLeave={props.onActionCellLeave}
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
{props.showActions ? (
|
||||
<React.Fragment>
|
||||
<Tooltip title="Delete">
|
||||
<IconButton
|
||||
className={classes.actionButton}
|
||||
onClick={props.onDeleteClick}
|
||||
disabled={task.requestPending || props.allActionPending}
|
||||
size="small"
|
||||
>
|
||||
<DeleteIcon fontSize="small" />
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
</React.Fragment>
|
||||
) : (
|
||||
<IconButton size="small" onClick={props.onActionCellEnter}>
|
||||
<MoreHorizIcon fontSize="small" />
|
||||
</IconButton>
|
||||
)}
|
||||
</TableCell>
|
||||
)}
|
||||
</TableRow>
|
||||
);
|
||||
}
|
||||
|
||||
@ -176,35 +176,37 @@ function PendingTasksTable(props: Props & ReduxProps) {
|
||||
const numSelected = selectedIds.length;
|
||||
return (
|
||||
<div>
|
||||
<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,
|
||||
},
|
||||
]}
|
||||
/>
|
||||
{!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}
|
||||
@ -214,32 +216,39 @@ function PendingTasksTable(props: Props & ReduxProps) {
|
||||
>
|
||||
<TableHead>
|
||||
<TableRow>
|
||||
<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.map((col) => (
|
||||
{!window.READ_ONLY && (
|
||||
<TableCell
|
||||
key={col.key}
|
||||
align={col.align}
|
||||
classes={{
|
||||
stickyHeader: classes.stickyHeaderCell,
|
||||
}}
|
||||
padding="checkbox"
|
||||
classes={{ stickyHeader: classes.stickyHeaderCell }}
|
||||
>
|
||||
{col.label}
|
||||
<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>
|
||||
@ -355,16 +364,18 @@ function Row(props: RowProps) {
|
||||
selected={props.isSelected}
|
||||
onClick={() => history.push(taskDetailsPath(task.queue, task.id))}
|
||||
>
|
||||
<TableCell padding="checkbox" onClick={(e) => e.stopPropagation()}>
|
||||
<IconButton>
|
||||
<Checkbox
|
||||
onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
|
||||
props.onSelectChange(event.target.checked)
|
||||
}
|
||||
checked={props.isSelected}
|
||||
/>
|
||||
</IconButton>
|
||||
</TableCell>
|
||||
{!window.READ_ONLY && (
|
||||
<TableCell padding="checkbox" onClick={(e) => e.stopPropagation()}>
|
||||
<IconButton>
|
||||
<Checkbox
|
||||
onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
|
||||
props.onSelectChange(event.target.checked)
|
||||
}
|
||||
checked={props.isSelected}
|
||||
/>
|
||||
</IconButton>
|
||||
</TableCell>
|
||||
)}
|
||||
<TableCell component="th" scope="row" className={classes.idCell}>
|
||||
<div className={classes.IdGroup}>
|
||||
{uuidPrefix(task.id)}
|
||||
@ -393,42 +404,44 @@ function Row(props: RowProps) {
|
||||
</TableCell>
|
||||
<TableCell align="right">{task.retried}</TableCell>
|
||||
<TableCell align="right">{task.max_retry}</TableCell>
|
||||
<TableCell
|
||||
align="center"
|
||||
className={classes.actionCell}
|
||||
onMouseEnter={props.onActionCellEnter}
|
||||
onMouseLeave={props.onActionCellLeave}
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
{props.showActions ? (
|
||||
<React.Fragment>
|
||||
<Tooltip title="Delete">
|
||||
<IconButton
|
||||
onClick={props.onDeleteClick}
|
||||
disabled={task.requestPending || props.allActionPending}
|
||||
size="small"
|
||||
className={classes.actionButton}
|
||||
>
|
||||
<DeleteIcon fontSize="small" />
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
<Tooltip title="Archive">
|
||||
<IconButton
|
||||
onClick={props.onArchiveClick}
|
||||
disabled={task.requestPending || props.allActionPending}
|
||||
size="small"
|
||||
className={classes.actionButton}
|
||||
>
|
||||
<ArchiveIcon fontSize="small" />
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
</React.Fragment>
|
||||
) : (
|
||||
<IconButton size="small" onClick={props.onActionCellEnter}>
|
||||
<MoreHorizIcon fontSize="small" />
|
||||
</IconButton>
|
||||
)}
|
||||
</TableCell>
|
||||
{!window.READ_ONLY && (
|
||||
<TableCell
|
||||
align="center"
|
||||
className={classes.actionCell}
|
||||
onMouseEnter={props.onActionCellEnter}
|
||||
onMouseLeave={props.onActionCellLeave}
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
{props.showActions ? (
|
||||
<React.Fragment>
|
||||
<Tooltip title="Delete">
|
||||
<IconButton
|
||||
onClick={props.onDeleteClick}
|
||||
disabled={task.requestPending || props.allActionPending}
|
||||
size="small"
|
||||
className={classes.actionButton}
|
||||
>
|
||||
<DeleteIcon fontSize="small" />
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
<Tooltip title="Archive">
|
||||
<IconButton
|
||||
onClick={props.onArchiveClick}
|
||||
disabled={task.requestPending || props.allActionPending}
|
||||
size="small"
|
||||
className={classes.actionButton}
|
||||
>
|
||||
<ArchiveIcon fontSize="small" />
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
</React.Fragment>
|
||||
) : (
|
||||
<IconButton size="small" onClick={props.onActionCellEnter}>
|
||||
<MoreHorizIcon fontSize="small" />
|
||||
</IconButton>
|
||||
)}
|
||||
</TableCell>
|
||||
)}
|
||||
</TableRow>
|
||||
);
|
||||
}
|
||||
|
||||
@ -183,25 +183,30 @@ export default function QueuesOverviewTable(props: Props) {
|
||||
<Table className={classes.table} aria-label="queues overview table">
|
||||
<TableHead>
|
||||
<TableRow>
|
||||
{colConfigs.map((cfg, i) => (
|
||||
<TableCell
|
||||
key={cfg.key}
|
||||
align={cfg.align}
|
||||
className={clsx(i === 0 && classes.fixedCell)}
|
||||
>
|
||||
{cfg.sortBy !== SortBy.None ? (
|
||||
<TableSortLabel
|
||||
active={sortBy === cfg.sortBy}
|
||||
direction={sortDir}
|
||||
onClick={createSortClickHandler(cfg.sortBy)}
|
||||
>
|
||||
{cfg.label}
|
||||
</TableSortLabel>
|
||||
) : (
|
||||
<div>{cfg.label}</div>
|
||||
)}
|
||||
</TableCell>
|
||||
))}
|
||||
{colConfigs
|
||||
.filter((cfg) => {
|
||||
// Filter out actions column in readonly mode.
|
||||
return !window.READ_ONLY || cfg.key !== "actions";
|
||||
})
|
||||
.map((cfg, i) => (
|
||||
<TableCell
|
||||
key={cfg.key}
|
||||
align={cfg.align}
|
||||
className={clsx(i === 0 && classes.fixedCell)}
|
||||
>
|
||||
{cfg.sortBy !== SortBy.None ? (
|
||||
<TableSortLabel
|
||||
active={sortBy === cfg.sortBy}
|
||||
direction={sortDir}
|
||||
onClick={createSortClickHandler(cfg.sortBy)}
|
||||
>
|
||||
{cfg.label}
|
||||
</TableSortLabel>
|
||||
) : (
|
||||
<div>{cfg.label}</div>
|
||||
)}
|
||||
</TableCell>
|
||||
))}
|
||||
</TableRow>
|
||||
</TableHead>
|
||||
<TableBody>
|
||||
@ -298,50 +303,52 @@ function Row(props: RowProps) {
|
||||
<TableCell align="right">{q.processed}</TableCell>
|
||||
<TableCell align="right">{q.failed}</TableCell>
|
||||
<TableCell align="right">{percentage(q.failed, q.processed)}</TableCell>
|
||||
<TableCell
|
||||
align="center"
|
||||
onMouseEnter={() => setShowIcons(true)}
|
||||
onMouseLeave={() => setShowIcons(false)}
|
||||
>
|
||||
<div className={classes.actionIconsContainer}>
|
||||
{showIcons ? (
|
||||
<React.Fragment>
|
||||
{q.paused ? (
|
||||
<Tooltip title="Resume">
|
||||
<IconButton
|
||||
color="secondary"
|
||||
onClick={props.onResumeClick}
|
||||
disabled={q.requestPending}
|
||||
size="small"
|
||||
>
|
||||
<PlayCircleFilledIcon fontSize="small" />
|
||||
{!window.READ_ONLY && (
|
||||
<TableCell
|
||||
align="center"
|
||||
onMouseEnter={() => setShowIcons(true)}
|
||||
onMouseLeave={() => setShowIcons(false)}
|
||||
>
|
||||
<div className={classes.actionIconsContainer}>
|
||||
{showIcons ? (
|
||||
<React.Fragment>
|
||||
{q.paused ? (
|
||||
<Tooltip title="Resume">
|
||||
<IconButton
|
||||
color="secondary"
|
||||
onClick={props.onResumeClick}
|
||||
disabled={q.requestPending}
|
||||
size="small"
|
||||
>
|
||||
<PlayCircleFilledIcon fontSize="small" />
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
) : (
|
||||
<Tooltip title="Pause">
|
||||
<IconButton
|
||||
color="primary"
|
||||
onClick={props.onPauseClick}
|
||||
disabled={q.requestPending}
|
||||
size="small"
|
||||
>
|
||||
<PauseCircleFilledIcon fontSize="small" />
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
)}
|
||||
<Tooltip title="Delete">
|
||||
<IconButton onClick={props.onDeleteClick} size="small">
|
||||
<DeleteIcon fontSize="small" />
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
) : (
|
||||
<Tooltip title="Pause">
|
||||
<IconButton
|
||||
color="primary"
|
||||
onClick={props.onPauseClick}
|
||||
disabled={q.requestPending}
|
||||
size="small"
|
||||
>
|
||||
<PauseCircleFilledIcon fontSize="small" />
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
)}
|
||||
<Tooltip title="Delete">
|
||||
<IconButton onClick={props.onDeleteClick} size="small">
|
||||
<DeleteIcon fontSize="small" />
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
</React.Fragment>
|
||||
) : (
|
||||
<IconButton size="small">
|
||||
<MoreHorizIcon fontSize="small" />
|
||||
</IconButton>
|
||||
)}
|
||||
</div>
|
||||
</TableCell>
|
||||
</React.Fragment>
|
||||
) : (
|
||||
<IconButton size="small">
|
||||
<MoreHorizIcon fontSize="small" />
|
||||
</IconButton>
|
||||
)}
|
||||
</div>
|
||||
</TableCell>
|
||||
)}
|
||||
</TableRow>
|
||||
);
|
||||
}
|
||||
|
||||
@ -196,46 +196,48 @@ function RetryTasksTable(props: Props & ReduxProps) {
|
||||
const numSelected = selectedIds.length;
|
||||
return (
|
||||
<div>
|
||||
<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,
|
||||
},
|
||||
]}
|
||||
/>
|
||||
{!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}
|
||||
@ -245,30 +247,37 @@ function RetryTasksTable(props: Props & ReduxProps) {
|
||||
>
|
||||
<TableHead>
|
||||
<TableRow>
|
||||
<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.map((col) => (
|
||||
{!window.READ_ONLY && (
|
||||
<TableCell
|
||||
key={col.label}
|
||||
align={col.align}
|
||||
padding="checkbox"
|
||||
classes={{ stickyHeader: classes.stickyHeaderCell }}
|
||||
>
|
||||
{col.label}
|
||||
<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>
|
||||
@ -388,16 +397,18 @@ function Row(props: RowProps) {
|
||||
selected={props.isSelected}
|
||||
onClick={() => history.push(taskDetailsPath(task.queue, task.id))}
|
||||
>
|
||||
<TableCell padding="checkbox" onClick={(e) => e.stopPropagation()}>
|
||||
<IconButton>
|
||||
<Checkbox
|
||||
onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
|
||||
props.onSelectChange(event.target.checked)
|
||||
}
|
||||
checked={props.isSelected}
|
||||
/>
|
||||
</IconButton>
|
||||
</TableCell>
|
||||
{!window.READ_ONLY && (
|
||||
<TableCell padding="checkbox" onClick={(e) => e.stopPropagation()}>
|
||||
<IconButton>
|
||||
<Checkbox
|
||||
onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
|
||||
props.onSelectChange(event.target.checked)
|
||||
}
|
||||
checked={props.isSelected}
|
||||
/>
|
||||
</IconButton>
|
||||
</TableCell>
|
||||
)}
|
||||
<TableCell component="th" scope="row" className={classes.idCell}>
|
||||
<div className={classes.IdGroup}>
|
||||
{uuidPrefix(task.id)}
|
||||
@ -428,52 +439,54 @@ function Row(props: RowProps) {
|
||||
<TableCell>{task.error_message}</TableCell>
|
||||
<TableCell align="right">{task.retried}</TableCell>
|
||||
<TableCell align="right">{task.max_retry}</TableCell>
|
||||
<TableCell
|
||||
align="center"
|
||||
className={classes.actionCell}
|
||||
onMouseEnter={props.onActionCellEnter}
|
||||
onMouseLeave={props.onActionCellLeave}
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
{props.showActions ? (
|
||||
<React.Fragment>
|
||||
<Tooltip title="Delete">
|
||||
<IconButton
|
||||
onClick={props.onDeleteClick}
|
||||
disabled={task.requestPending || props.allActionPending}
|
||||
size="small"
|
||||
className={classes.actionButton}
|
||||
>
|
||||
<DeleteIcon fontSize="small" />
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
<Tooltip title="Archive">
|
||||
<IconButton
|
||||
onClick={props.onArchiveClick}
|
||||
disabled={task.requestPending || props.allActionPending}
|
||||
size="small"
|
||||
className={classes.actionButton}
|
||||
>
|
||||
<ArchiveIcon fontSize="small" />
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
<Tooltip title="Run">
|
||||
<IconButton
|
||||
onClick={props.onRunClick}
|
||||
disabled={task.requestPending || props.allActionPending}
|
||||
size="small"
|
||||
className={classes.actionButton}
|
||||
>
|
||||
<PlayArrowIcon fontSize="small" />
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
</React.Fragment>
|
||||
) : (
|
||||
<IconButton size="small" onClick={props.onActionCellEnter}>
|
||||
<MoreHorizIcon fontSize="small" />
|
||||
</IconButton>
|
||||
)}
|
||||
</TableCell>
|
||||
{!window.READ_ONLY && (
|
||||
<TableCell
|
||||
align="center"
|
||||
className={classes.actionCell}
|
||||
onMouseEnter={props.onActionCellEnter}
|
||||
onMouseLeave={props.onActionCellLeave}
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
{props.showActions ? (
|
||||
<React.Fragment>
|
||||
<Tooltip title="Delete">
|
||||
<IconButton
|
||||
onClick={props.onDeleteClick}
|
||||
disabled={task.requestPending || props.allActionPending}
|
||||
size="small"
|
||||
className={classes.actionButton}
|
||||
>
|
||||
<DeleteIcon fontSize="small" />
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
<Tooltip title="Archive">
|
||||
<IconButton
|
||||
onClick={props.onArchiveClick}
|
||||
disabled={task.requestPending || props.allActionPending}
|
||||
size="small"
|
||||
className={classes.actionButton}
|
||||
>
|
||||
<ArchiveIcon fontSize="small" />
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
<Tooltip title="Run">
|
||||
<IconButton
|
||||
onClick={props.onRunClick}
|
||||
disabled={task.requestPending || props.allActionPending}
|
||||
size="small"
|
||||
className={classes.actionButton}
|
||||
>
|
||||
<PlayArrowIcon fontSize="small" />
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
</React.Fragment>
|
||||
) : (
|
||||
<IconButton size="small" onClick={props.onActionCellEnter}>
|
||||
<MoreHorizIcon fontSize="small" />
|
||||
</IconButton>
|
||||
)}
|
||||
</TableCell>
|
||||
)}
|
||||
</TableRow>
|
||||
);
|
||||
}
|
||||
|
||||
@ -193,46 +193,48 @@ function ScheduledTasksTable(props: Props & ReduxProps) {
|
||||
const numSelected = selectedIds.length;
|
||||
return (
|
||||
<div>
|
||||
<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,
|
||||
},
|
||||
]}
|
||||
/>
|
||||
{!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}
|
||||
@ -242,30 +244,37 @@ function ScheduledTasksTable(props: Props & ReduxProps) {
|
||||
>
|
||||
<TableHead>
|
||||
<TableRow>
|
||||
<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.map((col) => (
|
||||
{!window.READ_ONLY && (
|
||||
<TableCell
|
||||
key={col.label}
|
||||
align={col.align}
|
||||
padding="checkbox"
|
||||
classes={{ stickyHeader: classes.stickyHeaderCell }}
|
||||
>
|
||||
{col.label}
|
||||
<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>
|
||||
@ -384,16 +393,18 @@ function Row(props: RowProps) {
|
||||
selected={props.isSelected}
|
||||
onClick={() => history.push(taskDetailsPath(task.queue, task.id))}
|
||||
>
|
||||
<TableCell padding="checkbox" onClick={(e) => e.stopPropagation()}>
|
||||
<IconButton>
|
||||
<Checkbox
|
||||
onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
|
||||
props.onSelectChange(event.target.checked)
|
||||
}
|
||||
checked={props.isSelected}
|
||||
/>
|
||||
</IconButton>
|
||||
</TableCell>
|
||||
{!window.READ_ONLY && (
|
||||
<TableCell padding="checkbox" onClick={(e) => e.stopPropagation()}>
|
||||
<IconButton>
|
||||
<Checkbox
|
||||
onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
|
||||
props.onSelectChange(event.target.checked)
|
||||
}
|
||||
checked={props.isSelected}
|
||||
/>
|
||||
</IconButton>
|
||||
</TableCell>
|
||||
)}
|
||||
<TableCell component="th" scope="row" className={classes.idCell}>
|
||||
<div className={classes.IdGroup}>
|
||||
{uuidPrefix(task.id)}
|
||||
@ -421,52 +432,54 @@ function Row(props: RowProps) {
|
||||
</SyntaxHighlighter>
|
||||
</TableCell>
|
||||
<TableCell>{durationBefore(task.next_process_at)}</TableCell>
|
||||
<TableCell
|
||||
align="center"
|
||||
className={classes.actionCell}
|
||||
onMouseEnter={props.onActionCellEnter}
|
||||
onMouseLeave={props.onActionCellLeave}
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
{props.showActions ? (
|
||||
<React.Fragment>
|
||||
<Tooltip title="Delete">
|
||||
<IconButton
|
||||
onClick={props.onDeleteClick}
|
||||
disabled={task.requestPending || props.allActionPending}
|
||||
size="small"
|
||||
className={classes.actionButton}
|
||||
>
|
||||
<DeleteIcon fontSize="small" />
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
<Tooltip title="Archive">
|
||||
<IconButton
|
||||
onClick={props.onArchiveClick}
|
||||
disabled={task.requestPending || props.allActionPending}
|
||||
size="small"
|
||||
className={classes.actionButton}
|
||||
>
|
||||
<ArchiveIcon fontSize="small" />
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
<Tooltip title="Run">
|
||||
<IconButton
|
||||
onClick={props.onRunClick}
|
||||
disabled={task.requestPending || props.allActionPending}
|
||||
size="small"
|
||||
className={classes.actionButton}
|
||||
>
|
||||
<PlayArrowIcon fontSize="small" />
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
</React.Fragment>
|
||||
) : (
|
||||
<IconButton size="small" onClick={props.onActionCellEnter}>
|
||||
<MoreHorizIcon fontSize="small" />
|
||||
</IconButton>
|
||||
)}
|
||||
</TableCell>
|
||||
{!window.READ_ONLY && (
|
||||
<TableCell
|
||||
align="center"
|
||||
className={classes.actionCell}
|
||||
onMouseEnter={props.onActionCellEnter}
|
||||
onMouseLeave={props.onActionCellLeave}
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
{props.showActions ? (
|
||||
<React.Fragment>
|
||||
<Tooltip title="Delete">
|
||||
<IconButton
|
||||
onClick={props.onDeleteClick}
|
||||
disabled={task.requestPending || props.allActionPending}
|
||||
size="small"
|
||||
className={classes.actionButton}
|
||||
>
|
||||
<DeleteIcon fontSize="small" />
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
<Tooltip title="Archive">
|
||||
<IconButton
|
||||
onClick={props.onArchiveClick}
|
||||
disabled={task.requestPending || props.allActionPending}
|
||||
size="small"
|
||||
className={classes.actionButton}
|
||||
>
|
||||
<ArchiveIcon fontSize="small" />
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
<Tooltip title="Run">
|
||||
<IconButton
|
||||
onClick={props.onRunClick}
|
||||
disabled={task.requestPending || props.allActionPending}
|
||||
size="small"
|
||||
className={classes.actionButton}
|
||||
>
|
||||
<PlayArrowIcon fontSize="small" />
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
</React.Fragment>
|
||||
) : (
|
||||
<IconButton size="small" onClick={props.onActionCellEnter}>
|
||||
<MoreHorizIcon fontSize="small" />
|
||||
</IconButton>
|
||||
)}
|
||||
</TableCell>
|
||||
)}
|
||||
</TableRow>
|
||||
);
|
||||
}
|
||||
|
||||
3
ui/src/global.d.ts
vendored
3
ui/src/global.d.ts
vendored
@ -6,4 +6,7 @@ interface Window {
|
||||
// Prometheus server address to query time series data.
|
||||
// This field is set to empty string by default. Use this field only if it's set.
|
||||
PROMETHEUS_SERVER_ADDRESS: string;
|
||||
|
||||
// If true, app hides buttons/links to make non-GET requests to the API server.
|
||||
READ_ONLY: boolean;
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user