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

ui/public/index.html

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

ui/src/components/ActiveTasksTable.tsx

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

ui/src/components/ArchivedTasksTable.tsx

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

ui/src/components/CompletedTasksTable.tsx

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

ui/src/components/PendingTasksTable.tsx

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

ui/src/components/QueuesOverviewTable.tsx

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

ui/src/components/RetryTasksTable.tsx

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

ui/src/components/ScheduledTasksTable.tsx

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

ui/src/global.d.ts

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