go-pkg/asynqmon
2
0
Fork 0
mirror of https://github.com/hibiken/asynqmon.git synced 2025-10-26 00:06:13 +08:00
Code Issues Projects Releases Wiki Activity

(ui): Hide action buttons in read-only mode

Browse Source
This commit is contained in:
Ken Hibino
2022-02-26 16:43:58 -08:00
parent 18373f9ac4
commit 3d17a0971b
9 changed files with 723 additions and 634 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -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>
);
}