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 3805ae6e06
commit 49eece97f7
9 changed files with 723 additions and 634 deletions
Download Patch File Download Diff File Expand all files Collapse all files

129
ui/src/components/QueuesOverviewTable.tsx
View File

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