go-pkg/asynqmon
2
0
Fork 0
mirror of https://github.com/hibiken/asynqmon.git synced 2025-01-19 03:05:53 +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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
ui/public/index.html
View File

@ -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>

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

@ -161,6 +161,7 @@ function ActiveTasksTable(props: Props & ReduxProps) {
const numSelected = selectedIds.length;
return (
<div>
{!window.READ_ONLY && (
<TableActions
showIconButtons={numSelected > 0}
iconButtonActions={[
@ -179,6 +180,7 @@ function ActiveTasksTable(props: Props & ReduxProps) {
},
]}
/>
)}
<TableContainer component={Paper}>
<Table
stickyHeader={true}
@ -188,6 +190,7 @@ function ActiveTasksTable(props: Props & ReduxProps) {
>
<TableHead>
<TableRow>
{!window.READ_ONLY && (
<TableCell
padding="checkbox"
classes={{ stickyHeader: classes.stickyHeaderCell }}
@ -203,7 +206,13 @@ function ActiveTasksTable(props: Props & ReduxProps) {
/>
</IconButton>
</TableCell>
{columns.map((col) => (
)}
{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}
@ -311,6 +320,7 @@ function Row(props: RowProps) {
selected={props.isSelected}
onClick={() => history.push(taskDetailsPath(task.queue, task.id))}
>
{!window.READ_ONLY && (
<TableCell padding="checkbox" onClick={(e) => e.stopPropagation()}>
<IconButton>
<Checkbox
@ -321,6 +331,7 @@ function Row(props: RowProps) {
/>
</IconButton>
</TableCell>
)}
<TableCell component="th" scope="row" className={classes.idCell}>
<div className={classes.IdGroup}>
{uuidPrefix(task.id)}
@ -364,6 +375,7 @@ function Row(props: RowProps) {
<TableCell>
{task.deadline === "-" ? "-" : durationBefore(task.deadline)}
</TableCell>
{!window.READ_ONLY && (
<TableCell
align="center"
onMouseEnter={props.onActionCellEnter}
@ -390,6 +402,7 @@ function Row(props: RowProps) {
</IconButton>
)}
</TableCell>
)}
</TableRow>
);
}

15
ui/src/components/ArchivedTasksTable.tsx
View File

@ -180,6 +180,7 @@ function ArchivedTasksTable(props: Props & ReduxProps) {
const numSelected = selectedIds.length;
return (
<div>
{!window.READ_ONLY && (
<TableActions
showIconButtons={numSelected > 0}
iconButtonActions={[
@ -209,6 +210,7 @@ function ArchivedTasksTable(props: Props & ReduxProps) {
},
]}
/>
)}
<TableContainer component={Paper}>
<Table
stickyHeader={true}
@ -218,6 +220,7 @@ function ArchivedTasksTable(props: Props & ReduxProps) {
>
<TableHead>
<TableRow>
{!window.READ_ONLY && (
<TableCell
padding="checkbox"
classes={{ stickyHeader: classes.stickyHeaderCell }}
@ -233,7 +236,13 @@ function ArchivedTasksTable(props: Props & ReduxProps) {
/>
</IconButton>
</TableCell>
{columns.map((col) => (
)}
{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}
@ -353,6 +362,7 @@ function Row(props: RowProps) {
selected={props.isSelected}
onClick={() => history.push(taskDetailsPath(task.queue, task.id))}
>
{!window.READ_ONLY && (
<TableCell padding="checkbox" onClick={(e) => e.stopPropagation()}>
<IconButton>
<Checkbox
@ -363,6 +373,7 @@ function Row(props: RowProps) {
/>
</IconButton>
</TableCell>
)}
<TableCell component="th" scope="row" className={classes.idCell}>
<div className={classes.IdGroup}>
{uuidPrefix(task.id)}
@ -391,6 +402,7 @@ function Row(props: RowProps) {
</TableCell>
<TableCell>{timeAgo(task.last_failed_at)}</TableCell>
<TableCell>{task.error_message}</TableCell>
{!window.READ_ONLY && (
<TableCell
align="center"
className={classes.actionCell}
@ -427,6 +439,7 @@ function Row(props: RowProps) {
</IconButton>
)}
</TableCell>
)}
</TableRow>
);
}

15
ui/src/components/CompletedTasksTable.tsx
View File

@ -167,6 +167,7 @@ function CompletedTasksTable(props: Props & ReduxProps) {
const numSelected = selectedIds.length;
return (
<div>
{!window.READ_ONLY && (
<TableActions
showIconButtons={numSelected > 0}
iconButtonActions={[
@ -185,6 +186,7 @@ function CompletedTasksTable(props: Props & ReduxProps) {
},
]}
/>
)}
<TableContainer component={Paper}>
<Table
stickyHeader={true}
@ -194,6 +196,7 @@ function CompletedTasksTable(props: Props & ReduxProps) {
>
<TableHead>
<TableRow>
{!window.READ_ONLY && (
<TableCell
padding="checkbox"
classes={{ stickyHeader: classes.stickyHeaderCell }}
@ -209,7 +212,13 @@ function CompletedTasksTable(props: Props & ReduxProps) {
/>
</IconButton>
</TableCell>
{columns.map((col) => (
)}
{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}
@ -328,6 +337,7 @@ function Row(props: RowProps) {
selected={props.isSelected}
onClick={() => history.push(taskDetailsPath(task.queue, task.id))}
>
{!window.READ_ONLY && (
<TableCell padding="checkbox" onClick={(e) => e.stopPropagation()}>
<IconButton>
<Checkbox
@ -338,6 +348,7 @@ function Row(props: RowProps) {
/>
</IconButton>
</TableCell>
)}
<TableCell component="th" scope="row" className={classes.idCell}>
<div className={classes.IdGroup}>
{uuidPrefix(task.id)}
@ -378,6 +389,7 @@ function Row(props: RowProps) {
? `${stringifyDuration(durationFromSeconds(task.ttl_seconds))} left`
: `expired`}
</TableCell>
{!window.READ_ONLY && (
<TableCell
align="center"
className={classes.actionCell}
@ -404,6 +416,7 @@ function Row(props: RowProps) {
</IconButton>
)}
</TableCell>
)}
</TableRow>
);
}

15
ui/src/components/PendingTasksTable.tsx
View File

@ -176,6 +176,7 @@ function PendingTasksTable(props: Props & ReduxProps) {
const numSelected = selectedIds.length;
return (
<div>
{!window.READ_ONLY && (
<TableActions
showIconButtons={numSelected > 0}
iconButtonActions={[
@ -205,6 +206,7 @@ function PendingTasksTable(props: Props & ReduxProps) {
},
]}
/>
)}
<TableContainer component={Paper}>
<Table
stickyHeader={true}
@ -214,6 +216,7 @@ function PendingTasksTable(props: Props & ReduxProps) {
>
<TableHead>
<TableRow>
{!window.READ_ONLY && (
<TableCell
padding="checkbox"
classes={{ stickyHeader: classes.stickyHeaderCell }}
@ -229,7 +232,13 @@ function PendingTasksTable(props: Props & ReduxProps) {
/>
</IconButton>
</TableCell>
{columns.map((col) => (
)}
{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}
@ -355,6 +364,7 @@ function Row(props: RowProps) {
selected={props.isSelected}
onClick={() => history.push(taskDetailsPath(task.queue, task.id))}
>
{!window.READ_ONLY && (
<TableCell padding="checkbox" onClick={(e) => e.stopPropagation()}>
<IconButton>
<Checkbox
@ -365,6 +375,7 @@ function Row(props: RowProps) {
/>
</IconButton>
</TableCell>
)}
<TableCell component="th" scope="row" className={classes.idCell}>
<div className={classes.IdGroup}>
{uuidPrefix(task.id)}
@ -393,6 +404,7 @@ function Row(props: RowProps) {
</TableCell>
<TableCell align="right">{task.retried}</TableCell>
<TableCell align="right">{task.max_retry}</TableCell>
{!window.READ_ONLY && (
<TableCell
align="center"
className={classes.actionCell}
@ -429,6 +441,7 @@ function Row(props: RowProps) {
</IconButton>
)}
</TableCell>
)}
</TableRow>
);
}

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

@ -183,7 +183,12 @@ export default function QueuesOverviewTable(props: Props) {
<Table className={classes.table} aria-label="queues overview table">
<TableHead>
<TableRow>
{colConfigs.map((cfg, i) => (
{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}
@ -298,6 +303,7 @@ 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>
{!window.READ_ONLY && (
<TableCell
align="center"
onMouseEnter={() => setShowIcons(true)}
@ -342,6 +348,7 @@ function Row(props: RowProps) {
)}
</div>
</TableCell>
)}
</TableRow>
);
}

15
ui/src/components/RetryTasksTable.tsx
View File

@ -196,6 +196,7 @@ function RetryTasksTable(props: Props & ReduxProps) {
const numSelected = selectedIds.length;
return (
<div>
{!window.READ_ONLY && (
<TableActions
showIconButtons={numSelected > 0}
iconButtonActions={[
@ -236,6 +237,7 @@ function RetryTasksTable(props: Props & ReduxProps) {
},
]}
/>
)}
<TableContainer component={Paper}>
<Table
stickyHeader={true}
@ -245,6 +247,7 @@ function RetryTasksTable(props: Props & ReduxProps) {
>
<TableHead>
<TableRow>
{!window.READ_ONLY && (
<TableCell
padding="checkbox"
classes={{ stickyHeader: classes.stickyHeaderCell }}
@ -260,7 +263,13 @@ function RetryTasksTable(props: Props & ReduxProps) {
/>
</IconButton>
</TableCell>
{columns.map((col) => (
)}
{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}
@ -388,6 +397,7 @@ function Row(props: RowProps) {
selected={props.isSelected}
onClick={() => history.push(taskDetailsPath(task.queue, task.id))}
>
{!window.READ_ONLY && (
<TableCell padding="checkbox" onClick={(e) => e.stopPropagation()}>
<IconButton>
<Checkbox
@ -398,6 +408,7 @@ function Row(props: RowProps) {
/>
</IconButton>
</TableCell>
)}
<TableCell component="th" scope="row" className={classes.idCell}>
<div className={classes.IdGroup}>
{uuidPrefix(task.id)}
@ -428,6 +439,7 @@ function Row(props: RowProps) {
<TableCell>{task.error_message}</TableCell>
<TableCell align="right">{task.retried}</TableCell>
<TableCell align="right">{task.max_retry}</TableCell>
{!window.READ_ONLY && (
<TableCell
align="center"
className={classes.actionCell}
@ -474,6 +486,7 @@ function Row(props: RowProps) {
</IconButton>
)}
</TableCell>
)}
</TableRow>
);
}

15
ui/src/components/ScheduledTasksTable.tsx
View File

@ -193,6 +193,7 @@ function ScheduledTasksTable(props: Props & ReduxProps) {
const numSelected = selectedIds.length;
return (
<div>
{!window.READ_ONLY && (
<TableActions
showIconButtons={numSelected > 0}
iconButtonActions={[
@ -233,6 +234,7 @@ function ScheduledTasksTable(props: Props & ReduxProps) {
},
]}
/>
)}
<TableContainer component={Paper}>
<Table
stickyHeader={true}
@ -242,6 +244,7 @@ function ScheduledTasksTable(props: Props & ReduxProps) {
>
<TableHead>
<TableRow>
{!window.READ_ONLY && (
<TableCell
padding="checkbox"
classes={{ stickyHeader: classes.stickyHeaderCell }}
@ -257,7 +260,13 @@ function ScheduledTasksTable(props: Props & ReduxProps) {
/>
</IconButton>
</TableCell>
{columns.map((col) => (
)}
{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}
@ -384,6 +393,7 @@ function Row(props: RowProps) {
selected={props.isSelected}
onClick={() => history.push(taskDetailsPath(task.queue, task.id))}
>
{!window.READ_ONLY && (
<TableCell padding="checkbox" onClick={(e) => e.stopPropagation()}>
<IconButton>
<Checkbox
@ -394,6 +404,7 @@ function Row(props: RowProps) {
/>
</IconButton>
</TableCell>
)}
<TableCell component="th" scope="row" className={classes.idCell}>
<div className={classes.IdGroup}>
{uuidPrefix(task.id)}
@ -421,6 +432,7 @@ function Row(props: RowProps) {
</SyntaxHighlighter>
</TableCell>
<TableCell>{durationBefore(task.next_process_at)}</TableCell>
{!window.READ_ONLY && (
<TableCell
align="center"
className={classes.actionCell}
@ -467,6 +479,7 @@ function Row(props: RowProps) {
</IconButton>
)}
</TableCell>
)}
</TableRow>
);
}

3
ui/src/global.d.ts vendored
View File

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