Update task table styles

ui/src/components/ActiveTasksTable.tsx

@@ -1,6 +1,6 @@
 import React, { useState, useCallback } from "react";
 import { connect, ConnectedProps } from "react-redux";
-import { makeStyles, useTheme, Theme } from "@material-ui/core/styles";
+import { makeStyles } from "@material-ui/core/styles";
 import Table from "@material-ui/core/Table";
 import TableBody from "@material-ui/core/TableBody";
 import TableCell from "@material-ui/core/TableCell";
@@ -13,15 +13,10 @@ import TableFooter from "@material-ui/core/TableFooter";
 import TablePagination from "@material-ui/core/TablePagination";
 import Tooltip from "@material-ui/core/Tooltip";
 import Paper from "@material-ui/core/Paper";
-import Grid from "@material-ui/core/Grid";
 import Checkbox from "@material-ui/core/Checkbox";
-import Collapse from "@material-ui/core/Collapse";
 import IconButton from "@material-ui/core/IconButton";
 import CancelIcon from "@material-ui/icons/Cancel";
 import MoreHorizIcon from "@material-ui/icons/MoreHoriz";
-import KeyboardArrowUpIcon from "@material-ui/icons/KeyboardArrowUp";
-import KeyboardArrowDownIcon from "@material-ui/icons/KeyboardArrowDown";
-import Typography from "@material-ui/core/Typography";
 import SyntaxHighlighter from "./SyntaxHighlighter";
 import {
   listActiveTasksAsync,
@@ -47,13 +42,13 @@ const useStyles = makeStyles((theme) => ({
   stickyHeaderCell: {
     background: theme.palette.background.paper,
   },
-  iconCell: {
-    width: "70px",
-  },
   alert: {
     borderTopLeftRadius: 0,
     borderTopRightRadius: 0,
   },
+  pagination: {
+    border: "none",
+  },
 }));
 
 function mapStateToProps(state: AppState) {
@@ -77,8 +72,10 @@ const mapDispatchToProps = {
 const columns: TableColumn[] = [
   { key: "id", label: "ID", align: "left" },
   { key: "type", label: "Type", align: "left" },
+  { key: "payload", label: "Payload", align: "left" },
   { key: "status", label: "Status", align: "left" },
   { key: "start-time", label: "Started", align: "left" },
+  { key: "deadline", label: "Deadline", align: "left" },
   { key: "actions", label: "Actions", align: "center" },
 ];
 
@@ -200,12 +197,6 @@ function ActiveTasksTable(props: Props & ReduxProps) {
                   }}
                 />
               </TableCell>
-              <TableCell
-                classes={{
-                  root: classes.iconCell,
-                  stickyHeader: classes.stickyHeaderCell,
-                }}
-              />
               {columns.map((col) => (
                 <TableCell
                   key={col.key}
@@ -244,7 +235,7 @@ function ActiveTasksTable(props: Props & ReduxProps) {
             <TableRow>
               <TablePagination
                 rowsPerPageOptions={rowsPerPageOptions}
-                colSpan={columns.length + 2}
+                colSpan={columns.length + 1}
                 count={props.tasks.length}
                 rowsPerPage={pageSize}
                 page={page}
@@ -255,6 +246,7 @@ function ActiveTasksTable(props: Props & ReduxProps) {
                 onChangePage={handleChangePage}
                 onChangeRowsPerPage={handleChangeRowsPerPage}
                 ActionsComponent={TablePaginationActions}
+                className={classes.pagination}
               />
             </TableRow>
           </TableFooter>
@@ -264,27 +256,6 @@ function ActiveTasksTable(props: Props & ReduxProps) {
   );
 }
 
-const useRowStyles = makeStyles((theme) => ({
-  root: {
-    "& > *": {
-      borderBottom: "unset",
-    },
-  },
-  taskDetails: {
-    paddingTop: theme.spacing(1),
-    paddingBottom: theme.spacing(1),
-  },
-  detailHeading: {
-    paddingLeft: theme.spacing(1),
-  },
-  payloadContainer: {
-    paddingRight: theme.spacing(2),
-  },
-  noBottomBorder: {
-    borderBottom: "none",
-  },
-}));
-
 interface RowProps {
   task: ActiveTaskExtended;
   isSelected: boolean;
@@ -297,138 +268,59 @@ interface RowProps {
 
 function Row(props: RowProps) {
   const { task } = props;
-  const [open, setOpen] = React.useState(false);
-  const theme = useTheme<Theme>();
-  const classes = useRowStyles();
   return (
-    <React.Fragment>
-      <TableRow
-        key={task.id}
-        className={classes.root}
-        selected={props.isSelected}
+    <TableRow key={task.id} selected={props.isSelected}>
+      <TableCell padding="checkbox">
+        <Checkbox
+          onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
+            props.onSelectChange(event.target.checked)
+          }
+          checked={props.isSelected}
+        />
+      </TableCell>
+      <TableCell component="th" scope="row">
+        {uuidPrefix(task.id)}
+      </TableCell>
+      <TableCell>{task.type}</TableCell>
+      <TableCell>
+        <SyntaxHighlighter
+          language="json"
+          customStyle={{ margin: 0, maxWidth: 400 }}
+        >
+          {JSON.stringify(task.payload)}
+        </SyntaxHighlighter>
+      </TableCell>
+      <TableCell>{task.canceling ? "Canceling" : "Running"}</TableCell>
+      <TableCell>
+        {task.start_time === "-" ? "just now" : timeAgo(task.start_time)}
+      </TableCell>
+      <TableCell>
+        {task.deadline === "-" ? "-" : durationBefore(task.deadline)}
+      </TableCell>
+      <TableCell
+        align="center"
+        onMouseEnter={props.onActionCellEnter}
+        onMouseLeave={props.onActionCellLeave}
       >
-        <TableCell padding="checkbox">
-          <Checkbox
-            onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
-              props.onSelectChange(event.target.checked)
-            }
-            checked={props.isSelected}
-          />
-        </TableCell>
-        <TableCell>
-          <Tooltip title={open ? "Hide Details" : "Show Details"}>
-            <IconButton
-              aria-label="expand row"
-              size="small"
-              onClick={() => setOpen(!open)}
-            >
-              {open ? <KeyboardArrowUpIcon /> : <KeyboardArrowDownIcon />}
-            </IconButton>
-          </Tooltip>
-        </TableCell>
-        <TableCell component="th" scope="row">
-          {uuidPrefix(task.id)}
-        </TableCell>
-        <TableCell>{task.type}</TableCell>
-        <TableCell>{task.canceling ? "Canceling" : "Running"}</TableCell>
-        <TableCell>
-          {task.start_time === "-" ? "just now" : timeAgo(task.start_time)}
-        </TableCell>
-        <TableCell
-          align="center"
-          onMouseEnter={props.onActionCellEnter}
-          onMouseLeave={props.onActionCellLeave}
-        >
-          {props.showActions ? (
-            <React.Fragment>
-              <Tooltip title="Cancel">
-                <IconButton
-                  onClick={props.onCancelClick}
-                  disabled={task.requestPending || task.canceling}
-                  size="small"
-                >
-                  <CancelIcon fontSize="small" />
-                </IconButton>
-              </Tooltip>
-            </React.Fragment>
-          ) : (
-            <IconButton size="small" onClick={props.onActionCellEnter}>
-              <MoreHorizIcon fontSize="small" />
-            </IconButton>
-          )}
-        </TableCell>
-      </TableRow>
-      <TableRow selected={props.isSelected}>
-        <TableCell
-          style={{ paddingBottom: 0, paddingTop: 0 }}
-          colSpan={columns.length + 2}
-        >
-          <Collapse in={open} timeout="auto" unmountOnExit>
-            <Grid container className={classes.taskDetails}>
-              <Grid item xs={8} className={classes.payloadContainer}>
-                <Typography
-                  variant="subtitle2"
-                  color="textSecondary"
-                  gutterBottom
-                  component="div"
-                  className={classes.detailHeading}
-                >
-                  Payload
-                </Typography>
-                <SyntaxHighlighter
-                  language="json"
-                  customStyle={{ borderRadius: theme.shape.borderRadius }}
-                >
-                  {JSON.stringify(task.payload, null, 2)}
-                </SyntaxHighlighter>
-              </Grid>
-              <Grid item xs={4}>
-                <Typography
-                  variant="subtitle2"
-                  color="textSecondary"
-                  gutterBottom
-                  component="div"
-                  className={classes.detailHeading}
-                >
-                  Task Info
-                </Typography>
-                <Table size="small" aria-label="active workers">
-                  <TableBody>
-                    <TableRow>
-                      <TableCell>Retry</TableCell>
-                      <TableCell align="right">
-                        {task.retried}/{task.max_retry}
-                      </TableCell>
-                    </TableRow>
-                    <TableRow>
-                      <TableCell>Last Error</TableCell>
-                      <TableCell align="right">
-                        {task.error_message.length > 0
-                          ? task.error_message
-                          : "N/A"}
-                      </TableCell>
-                    </TableRow>
-                    <TableRow>
-                      <TableCell className={classes.noBottomBorder}>
-                        Deadline
-                      </TableCell>
-                      <TableCell
-                        className={classes.noBottomBorder}
-                        align="right"
-                      >
-                        {task.deadline === "-"
-                          ? "-"
-                          : durationBefore(task.deadline)}
-                      </TableCell>
-                    </TableRow>
-                  </TableBody>
-                </Table>
-              </Grid>
-            </Grid>
-          </Collapse>
-        </TableCell>
-      </TableRow>
-    </React.Fragment>
+        {props.showActions ? (
+          <React.Fragment>
+            <Tooltip title="Cancel">
+              <IconButton
+                onClick={props.onCancelClick}
+                disabled={task.requestPending || task.canceling}
+                size="small"
+              >
+                <CancelIcon fontSize="small" />
+              </IconButton>
+            </Tooltip>
+          </React.Fragment>
+        ) : (
+          <IconButton size="small" onClick={props.onActionCellEnter}>
+            <MoreHorizIcon fontSize="small" />
+          </IconButton>
+        )}
+      </TableCell>
+    </TableRow>
   );
 }
 

ui/src/components/ArchivedTasksTable.tsx

@@ -11,15 +11,10 @@ import TableHead from "@material-ui/core/TableHead";
 import TableRow from "@material-ui/core/TableRow";
 import Tooltip from "@material-ui/core/Tooltip";
 import Paper from "@material-ui/core/Paper";
-import Box from "@material-ui/core/Box";
-import Collapse from "@material-ui/core/Collapse";
 import IconButton from "@material-ui/core/IconButton";
 import PlayArrowIcon from "@material-ui/icons/PlayArrow";
 import DeleteIcon from "@material-ui/icons/Delete";
 import MoreHorizIcon from "@material-ui/icons/MoreHoriz";
-import KeyboardArrowUpIcon from "@material-ui/icons/KeyboardArrowUp";
-import KeyboardArrowDownIcon from "@material-ui/icons/KeyboardArrowDown";
-import Typography from "@material-ui/core/Typography";
 import TableFooter from "@material-ui/core/TableFooter";
 import TablePagination from "@material-ui/core/TablePagination";
 import Alert from "@material-ui/lab/Alert";
@@ -56,6 +51,9 @@ const useStyles = makeStyles((theme) => ({
     borderTopLeftRadius: 0,
     borderTopRightRadius: 0,
   },
+  pagination: {
+    border: "none",
+  },
 }));
 
 function mapStateToProps(state: AppState) {
@@ -164,9 +162,9 @@ function ArchivedTasksTable(props: Props & ReduxProps) {
   }
 
   const columns: TableColumn[] = [
-    { key: "icon", label: "", align: "left" },
     { key: "id", label: "ID", align: "left" },
     { key: "type", label: "Type", align: "left" },
+    { key: "payload", label: "Payload", align: "left" },
     { key: "last_failed", label: "Last Failed", align: "left" },
     { key: "last_error", label: "Last Error", align: "left" },
     { key: "actions", label: "Actions", align: "center" },
@@ -270,7 +268,7 @@ function ArchivedTasksTable(props: Props & ReduxProps) {
             <TableRow>
               <TablePagination
                 rowsPerPageOptions={rowsPerPageOptions}
-                colSpan={columns.length + 1 /* checkbox col */}
+                colSpan={columns.length + 1}
                 count={props.totalTaskCount}
                 rowsPerPage={pageSize}
                 page={page}
@@ -281,6 +279,7 @@ function ArchivedTasksTable(props: Props & ReduxProps) {
                 onChangePage={handleChangePage}
                 onChangeRowsPerPage={handleChangeRowsPerPage}
                 ActionsComponent={TablePaginationActions}
+                className={classes.pagination}
               />
             </TableRow>
           </TableFooter>
@@ -291,11 +290,6 @@ function ArchivedTasksTable(props: Props & ReduxProps) {
 }
 
 const useRowStyles = makeStyles({
-  root: {
-    "& > *": {
-      borderBottom: "unset",
-    },
-  },
   actionCell: {
     width: "96px",
   },
@@ -319,92 +313,68 @@ interface RowProps {
 
 function Row(props: RowProps) {
   const { task } = props;
-  const [open, setOpen] = useState(false);
   const classes = useRowStyles();
   return (
-    <React.Fragment>
-      <TableRow
-        key={task.id}
-        className={classes.root}
-        selected={props.isSelected}
-      >
-        <TableCell padding="checkbox">
-          <Checkbox
-            onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
-              props.onSelectChange(event.target.checked)
-            }
-            checked={props.isSelected}
-          />
-        </TableCell>
-        <TableCell>
-          <Tooltip title={open ? "Hide Details" : "Show Details"}>
-            <IconButton
-              aria-label="expand row"
-              size="small"
-              onClick={() => setOpen(!open)}
-            >
-              {open ? <KeyboardArrowUpIcon /> : <KeyboardArrowDownIcon />}
-            </IconButton>
-          </Tooltip>
-        </TableCell>
-        <TableCell component="th" scope="row">
-          {uuidPrefix(task.id)}
-        </TableCell>
-        <TableCell>{task.type}</TableCell>
-        <TableCell>{timeAgo(task.last_failed_at)}</TableCell>
-        <TableCell>{task.error_message}</TableCell>
-        <TableCell
-          align="center"
-          className={clsx(
-            classes.actionCell,
-            props.showActions && classes.activeActionCell
-          )}
-          onMouseEnter={props.onActionCellEnter}
-          onMouseLeave={props.onActionCellLeave}
+    <TableRow key={task.id} selected={props.isSelected}>
+      <TableCell padding="checkbox">
+        <Checkbox
+          onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
+            props.onSelectChange(event.target.checked)
+          }
+          checked={props.isSelected}
+        />
+      </TableCell>
+      <TableCell component="th" scope="row">
+        {uuidPrefix(task.id)}
+      </TableCell>
+      <TableCell>{task.type}</TableCell>
+      <TableCell>
+        <SyntaxHighlighter
+          language="json"
+          customStyle={{ margin: 0, maxWidth: 400 }}
         >
-          {props.showActions ? (
-            <React.Fragment>
-              <Tooltip title="Delete">
-                <IconButton
-                  onClick={props.onDeleteClick}
-                  disabled={task.requestPending || props.allActionPending}
-                  size="small"
-                >
-                  <DeleteIcon fontSize="small" />
-                </IconButton>
-              </Tooltip>
-              <Tooltip title="Run">
-                <IconButton
-                  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>
-      <TableRow selected={props.isSelected}>
-        <TableCell style={{ paddingBottom: 0, paddingTop: 0 }} colSpan={7}>
-          <Collapse in={open} timeout="auto" unmountOnExit>
-            <Box margin={1}>
-              <Typography variant="h6" gutterBottom component="div">
-                Payload
-              </Typography>
-              <SyntaxHighlighter language="json">
-                {JSON.stringify(task.payload, null, 2)}
-              </SyntaxHighlighter>
-            </Box>
-          </Collapse>
-        </TableCell>
-      </TableRow>
-    </React.Fragment>
+          {JSON.stringify(task.payload)}
+        </SyntaxHighlighter>
+      </TableCell>
+      <TableCell>{timeAgo(task.last_failed_at)}</TableCell>
+      <TableCell>{task.error_message}</TableCell>
+      <TableCell
+        align="center"
+        className={clsx(
+          classes.actionCell,
+          props.showActions && classes.activeActionCell
+        )}
+        onMouseEnter={props.onActionCellEnter}
+        onMouseLeave={props.onActionCellLeave}
+      >
+        {props.showActions ? (
+          <React.Fragment>
+            <Tooltip title="Delete">
+              <IconButton
+                onClick={props.onDeleteClick}
+                disabled={task.requestPending || props.allActionPending}
+                size="small"
+              >
+                <DeleteIcon fontSize="small" />
+              </IconButton>
+            </Tooltip>
+            <Tooltip title="Run">
+              <IconButton
+                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>
   );
 }
 

ui/src/components/PendingTasksTable.tsx

@@ -12,13 +12,8 @@ import TableHead from "@material-ui/core/TableHead";
 import TableRow from "@material-ui/core/TableRow";
 import Tooltip from "@material-ui/core/Tooltip";
 import Paper from "@material-ui/core/Paper";
-import Box from "@material-ui/core/Box";
 import Checkbox from "@material-ui/core/Checkbox";
-import Collapse from "@material-ui/core/Collapse";
 import IconButton from "@material-ui/core/IconButton";
-import KeyboardArrowUpIcon from "@material-ui/icons/KeyboardArrowUp";
-import KeyboardArrowDownIcon from "@material-ui/icons/KeyboardArrowDown";
-import Typography from "@material-ui/core/Typography";
 import TableFooter from "@material-ui/core/TableFooter";
 import TablePagination from "@material-ui/core/TablePagination";
 import DeleteIcon from "@material-ui/icons/Delete";
@@ -56,6 +51,9 @@ const useStyles = makeStyles((theme) => ({
     borderTopLeftRadius: 0,
     borderTopRightRadius: 0,
   },
+  pagination: {
+    border: "none",
+  },
 }));
 
 function mapStateToProps(state: AppState) {
@@ -164,9 +162,11 @@ function PendingTasksTable(props: Props & ReduxProps) {
   }
 
   const columns: TableColumn[] = [
-    { key: "icon", label: "", align: "left" },
     { key: "id", label: "ID", align: "left" },
     { key: "type", label: "Type", align: "left" },
+    { key: "paylod", label: "Payload", align: "left" },
+    { key: "retried", label: "Retried", align: "right" },
+    { key: "max_retry", label: "Max Retry", align: "right" },
     { key: "actions", label: "Actions", align: "center" },
   ];
 
@@ -229,7 +229,9 @@ function PendingTasksTable(props: Props & ReduxProps) {
                 <TableCell
                   key={col.key}
                   align={col.align}
-                  classes={{ stickyHeader: classes.stickyHeaderCell }}
+                  classes={{
+                    stickyHeader: classes.stickyHeaderCell,
+                  }}
                 >
                   {col.label}
                 </TableCell>
@@ -279,6 +281,7 @@ function PendingTasksTable(props: Props & ReduxProps) {
                 onChangePage={handleChangePage}
                 onChangeRowsPerPage={handleChangeRowsPerPage}
                 ActionsComponent={TablePaginationActions}
+                className={classes.pagination}
               />
             </TableRow>
           </TableFooter>
@@ -289,11 +292,6 @@ function PendingTasksTable(props: Props & ReduxProps) {
 }
 
 const useRowStyles = makeStyles({
-  root: {
-    "& > *": {
-      borderBottom: "unset",
-    },
-  },
   actionCell: {
     width: "96px",
   },
@@ -317,90 +315,68 @@ interface RowProps {
 
 function Row(props: RowProps) {
   const { task } = props;
-  const [open, setOpen] = React.useState(false);
   const classes = useRowStyles();
   return (
-    <React.Fragment>
-      <TableRow
-        key={task.id}
-        className={classes.root}
-        selected={props.isSelected}
-      >
-        <TableCell padding="checkbox">
-          <Checkbox
-            onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
-              props.onSelectChange(event.target.checked)
-            }
-            checked={props.isSelected}
-          />
-        </TableCell>
-        <TableCell>
-          <Tooltip title={open ? "Hide Details" : "Show Details"}>
-            <IconButton
-              aria-label="expand row"
-              size="small"
-              onClick={() => setOpen(!open)}
-            >
-              {open ? <KeyboardArrowUpIcon /> : <KeyboardArrowDownIcon />}
-            </IconButton>
-          </Tooltip>
-        </TableCell>
-        <TableCell component="th" scope="row">
-          {uuidPrefix(task.id)}
-        </TableCell>
-        <TableCell>{task.type}</TableCell>
-        <TableCell
-          align="center"
-          className={clsx(
-            classes.actionCell,
-            props.showActions && classes.activeActionCell
-          )}
-          onMouseEnter={props.onActionCellEnter}
-          onMouseLeave={props.onActionCellLeave}
+    <TableRow key={task.id} selected={props.isSelected}>
+      <TableCell padding="checkbox">
+        <Checkbox
+          onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
+            props.onSelectChange(event.target.checked)
+          }
+          checked={props.isSelected}
+        />
+      </TableCell>
+      <TableCell component="th" scope="row">
+        {uuidPrefix(task.id)}
+      </TableCell>
+      <TableCell>{task.type}</TableCell>
+      <TableCell>
+        <SyntaxHighlighter
+          language="json"
+          customStyle={{ margin: 0, maxWidth: 400 }}
         >
-          {props.showActions ? (
-            <React.Fragment>
-              <Tooltip title="Delete">
-                <IconButton
-                  onClick={props.onDeleteClick}
-                  disabled={task.requestPending || props.allActionPending}
-                  size="small"
-                >
-                  <DeleteIcon fontSize="small" />
-                </IconButton>
-              </Tooltip>
-              <Tooltip title="Archive">
-                <IconButton
-                  onClick={props.onArchiveClick}
-                  disabled={task.requestPending || props.allActionPending}
-                  size="small"
-                >
-                  <ArchiveIcon fontSize="small" />
-                </IconButton>
-              </Tooltip>
-            </React.Fragment>
-          ) : (
-            <IconButton size="small" onClick={props.onActionCellEnter}>
-              <MoreHorizIcon fontSize="small" />
-            </IconButton>
-          )}
-        </TableCell>
-      </TableRow>
-      <TableRow>
-        <TableCell style={{ paddingBottom: 0, paddingTop: 0 }} colSpan={8}>
-          <Collapse in={open} timeout="auto" unmountOnExit>
-            <Box margin={1}>
-              <Typography variant="h6" gutterBottom component="div">
-                Payload
-              </Typography>
-              <SyntaxHighlighter language="json">
-                {JSON.stringify(task.payload, null, 2)}
-              </SyntaxHighlighter>
-            </Box>
-          </Collapse>
-        </TableCell>
-      </TableRow>
-    </React.Fragment>
+          {JSON.stringify(task.payload)}
+        </SyntaxHighlighter>
+      </TableCell>
+      <TableCell align="right">{task.retried}</TableCell>
+      <TableCell align="right">{task.max_retry}</TableCell>
+      <TableCell
+        align="center"
+        className={clsx(
+          classes.actionCell,
+          props.showActions && classes.activeActionCell
+        )}
+        onMouseEnter={props.onActionCellEnter}
+        onMouseLeave={props.onActionCellLeave}
+      >
+        {props.showActions ? (
+          <React.Fragment>
+            <Tooltip title="Delete">
+              <IconButton
+                onClick={props.onDeleteClick}
+                disabled={task.requestPending || props.allActionPending}
+                size="small"
+              >
+                <DeleteIcon fontSize="small" />
+              </IconButton>
+            </Tooltip>
+            <Tooltip title="Archive">
+              <IconButton
+                onClick={props.onArchiveClick}
+                disabled={task.requestPending || props.allActionPending}
+                size="small"
+              >
+                <ArchiveIcon fontSize="small" />
+              </IconButton>
+            </Tooltip>
+          </React.Fragment>
+        ) : (
+          <IconButton size="small" onClick={props.onActionCellEnter}>
+            <MoreHorizIcon fontSize="small" />
+          </IconButton>
+        )}
+      </TableCell>
+    </TableRow>
   );
 }
 

ui/src/components/RetryTasksTable.tsx

@@ -10,18 +10,13 @@ import TableRow from "@material-ui/core/TableRow";
 import TableFooter from "@material-ui/core/TableFooter";
 import TablePagination from "@material-ui/core/TablePagination";
 import Paper from "@material-ui/core/Paper";
-import Box from "@material-ui/core/Box";
 import Tooltip from "@material-ui/core/Tooltip";
 import Checkbox from "@material-ui/core/Checkbox";
-import Collapse from "@material-ui/core/Collapse";
 import IconButton from "@material-ui/core/IconButton";
 import PlayArrowIcon from "@material-ui/icons/PlayArrow";
 import DeleteIcon from "@material-ui/icons/Delete";
 import ArchiveIcon from "@material-ui/icons/Archive";
 import MoreHorizIcon from "@material-ui/icons/MoreHoriz";
-import KeyboardArrowUpIcon from "@material-ui/icons/KeyboardArrowUp";
-import KeyboardArrowDownIcon from "@material-ui/icons/KeyboardArrowDown";
-import Typography from "@material-ui/core/Typography";
 import Alert from "@material-ui/lab/Alert";
 import AlertTitle from "@material-ui/lab/AlertTitle";
 import SyntaxHighlighter from "./SyntaxHighlighter";
@@ -60,6 +55,9 @@ const useStyles = makeStyles((theme) => ({
     borderTopLeftRadius: 0,
     borderTopRightRadius: 0,
   },
+  pagination: {
+    border: "none",
+  },
 }));
 
 function mapStateToProps(state: AppState) {
@@ -181,13 +179,13 @@ function RetryTasksTable(props: Props & ReduxProps) {
   }
 
   const columns: TableColumn[] = [
-    { key: "icon", label: "", align: "left" },
     { key: "id", label: "ID", align: "left" },
     { key: "type", label: "Type", align: "left" },
+    { key: "payload", label: "Payload", align: "left" },
     { key: "retry_in", label: "Retry In", align: "left" },
     { key: "last_error", label: "Last Error", align: "left" },
-    { key: "retried", label: "Retried", align: "left" },
-    { key: "max_retry", label: "Max Retry", align: "left" },
+    { key: "retried", label: "Retried", align: "right" },
+    { key: "max_retry", label: "Max Retry", align: "right" },
     { key: "actions", label: "Actions", align: "center" },
   ];
 
@@ -314,6 +312,7 @@ function RetryTasksTable(props: Props & ReduxProps) {
                 onChangePage={handleChangePage}
                 onChangeRowsPerPage={handleChangeRowsPerPage}
                 ActionsComponent={TablePaginationActions}
+                className={classes.pagination}
               />
             </TableRow>
           </TableFooter>
@@ -324,11 +323,6 @@ function RetryTasksTable(props: Props & ReduxProps) {
 }
 
 const useRowStyles = makeStyles({
-  root: {
-    "& > *": {
-      borderBottom: "unset",
-    },
-  },
   actionCell: {
     width: "140px",
   },
@@ -353,103 +347,79 @@ interface RowProps {
 
 function Row(props: RowProps) {
   const { task } = props;
-  const [open, setOpen] = React.useState(false);
   const classes = useRowStyles();
   return (
-    <React.Fragment>
-      <TableRow
-        key={task.id}
-        className={classes.root}
-        selected={props.isSelected}
-      >
-        <TableCell padding="checkbox">
-          <Checkbox
-            onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
-              props.onSelectChange(event.target.checked)
-            }
-            checked={props.isSelected}
-          />
-        </TableCell>
-        <TableCell>
-          <Tooltip title={open ? "Hide Details" : "Show Details"}>
-            <IconButton
-              aria-label="expand row"
-              size="small"
-              onClick={() => setOpen(!open)}
-            >
-              {open ? <KeyboardArrowUpIcon /> : <KeyboardArrowDownIcon />}
-            </IconButton>
-          </Tooltip>
-        </TableCell>
-        <TableCell component="th" scope="row">
-          {uuidPrefix(task.id)}
-        </TableCell>
-        <TableCell>{task.type}</TableCell>
-        <TableCell>{durationBefore(task.next_process_at)}</TableCell>
-        <TableCell>{task.error_message}</TableCell>
-        <TableCell>{task.retried}</TableCell>
-        <TableCell>{task.max_retry}</TableCell>
-        <TableCell
-          align="center"
-          className={clsx(
-            classes.actionCell,
-            props.showActions && classes.activeActionCell
-          )}
-          onMouseEnter={props.onActionCellEnter}
-          onMouseLeave={props.onActionCellLeave}
+    <TableRow key={task.id} selected={props.isSelected}>
+      <TableCell padding="checkbox">
+        <Checkbox
+          onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
+            props.onSelectChange(event.target.checked)
+          }
+          checked={props.isSelected}
+        />
+      </TableCell>
+      <TableCell component="th" scope="row">
+        {uuidPrefix(task.id)}
+      </TableCell>
+      <TableCell>{task.type}</TableCell>
+      <TableCell>
+        <SyntaxHighlighter
+          language="json"
+          customStyle={{ margin: 0, maxWidth: 400 }}
         >
-          {props.showActions ? (
-            <React.Fragment>
-              <Tooltip title="Delete">
-                <IconButton
-                  onClick={props.onDeleteClick}
-                  disabled={task.requestPending || props.allActionPending}
-                  size="small"
-                >
-                  <DeleteIcon fontSize="small" />
-                </IconButton>
-              </Tooltip>
-              <Tooltip title="Archive">
-                <IconButton
-                  onClick={props.onArchiveClick}
-                  disabled={task.requestPending || props.allActionPending}
-                  size="small"
-                >
-                  <ArchiveIcon fontSize="small" />
-                </IconButton>
-              </Tooltip>
-              <Tooltip title="Run">
-                <IconButton
-                  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>
-      <TableRow selected={props.isSelected}>
-        <TableCell style={{ paddingBottom: 0, paddingTop: 0 }} colSpan={10}>
-          <Collapse in={open} timeout="auto" unmountOnExit>
-            <Box margin={1}>
-              <Typography variant="h6" gutterBottom component="div">
-                Payload
-              </Typography>
-              <SyntaxHighlighter language="json">
-                {JSON.stringify(task.payload, null, 2)}
-              </SyntaxHighlighter>
-            </Box>
-          </Collapse>
-        </TableCell>
-      </TableRow>
-    </React.Fragment>
+          {JSON.stringify(task.payload)}
+        </SyntaxHighlighter>
+      </TableCell>
+      <TableCell>{durationBefore(task.next_process_at)}</TableCell>
+      <TableCell>{task.error_message}</TableCell>
+      <TableCell align="right">{task.retried}</TableCell>
+      <TableCell align="right">{task.max_retry}</TableCell>
+      <TableCell
+        align="center"
+        className={clsx(
+          classes.actionCell,
+          props.showActions && classes.activeActionCell
+        )}
+        onMouseEnter={props.onActionCellEnter}
+        onMouseLeave={props.onActionCellLeave}
+      >
+        {props.showActions ? (
+          <React.Fragment>
+            <Tooltip title="Delete">
+              <IconButton
+                onClick={props.onDeleteClick}
+                disabled={task.requestPending || props.allActionPending}
+                size="small"
+              >
+                <DeleteIcon fontSize="small" />
+              </IconButton>
+            </Tooltip>
+            <Tooltip title="Archive">
+              <IconButton
+                onClick={props.onArchiveClick}
+                disabled={task.requestPending || props.allActionPending}
+                size="small"
+              >
+                <ArchiveIcon fontSize="small" />
+              </IconButton>
+            </Tooltip>
+            <Tooltip title="Run">
+              <IconButton
+                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>
   );
 }
 

ui/src/components/ScheduledTasksTable.tsx

@@ -11,18 +11,13 @@ import TableRow from "@material-ui/core/TableRow";
 import TableFooter from "@material-ui/core/TableFooter";
 import TablePagination from "@material-ui/core/TablePagination";
 import Paper from "@material-ui/core/Paper";
-import Box from "@material-ui/core/Box";
 import Tooltip from "@material-ui/core/Tooltip";
 import Checkbox from "@material-ui/core/Checkbox";
-import Collapse from "@material-ui/core/Collapse";
 import IconButton from "@material-ui/core/IconButton";
 import PlayArrowIcon from "@material-ui/icons/PlayArrow";
 import DeleteIcon from "@material-ui/icons/Delete";
 import ArchiveIcon from "@material-ui/icons/Archive";
-import KeyboardArrowUpIcon from "@material-ui/icons/KeyboardArrowUp";
-import KeyboardArrowDownIcon from "@material-ui/icons/KeyboardArrowDown";
 import MoreHorizIcon from "@material-ui/icons/MoreHoriz";
-import Typography from "@material-ui/core/Typography";
 import Alert from "@material-ui/lab/Alert";
 import AlertTitle from "@material-ui/lab/AlertTitle";
 import SyntaxHighlighter from "./SyntaxHighlighter";
@@ -60,6 +55,9 @@ const useStyles = makeStyles((theme) => ({
     borderTopLeftRadius: 0,
     borderTopRightRadius: 0,
   },
+  pagination: {
+    border: "none",
+  },
 }));
 
 function mapStateToProps(state: AppState) {
@@ -181,9 +179,9 @@ function ScheduledTasksTable(props: Props & ReduxProps) {
   }
 
   const columns: TableColumn[] = [
-    { key: "icon", label: "", align: "left" },
     { key: "id", label: "ID", align: "left" },
     { key: "type", label: "Type", align: "left" },
+    { key: "payload", label: "Payload", align: "left" },
     { key: "process_in", label: "Process In", align: "left" },
     { key: "actions", label: "Actions", align: "center" },
   ];
@@ -311,6 +309,7 @@ function ScheduledTasksTable(props: Props & ReduxProps) {
                 onChangePage={handleChangePage}
                 onChangeRowsPerPage={handleChangeRowsPerPage}
                 ActionsComponent={TablePaginationActions}
+                className={classes.pagination}
               />
             </TableRow>
           </TableFooter>
@@ -321,11 +320,6 @@ function ScheduledTasksTable(props: Props & ReduxProps) {
 }
 
 const useRowStyles = makeStyles({
-  root: {
-    "& > *": {
-      borderBottom: "unset",
-    },
-  },
   actionCell: {
     width: "140px",
   },
@@ -350,100 +344,76 @@ interface RowProps {
 
 function Row(props: RowProps) {
   const { task } = props;
-  const [open, setOpen] = React.useState(false);
   const classes = useRowStyles();
   return (
-    <React.Fragment>
-      <TableRow
-        key={task.id}
-        className={classes.root}
-        selected={props.isSelected}
-      >
-        <TableCell padding="checkbox">
-          <Checkbox
-            onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
-              props.onSelectChange(event.target.checked)
-            }
-            checked={props.isSelected}
-          />
-        </TableCell>
-        <TableCell>
-          <Tooltip title={open ? "Hide Details" : "Show Details"}>
-            <IconButton
-              aria-label="expand row"
-              size="small"
-              onClick={() => setOpen(!open)}
-            >
-              {open ? <KeyboardArrowUpIcon /> : <KeyboardArrowDownIcon />}
-            </IconButton>
-          </Tooltip>
-        </TableCell>
-        <TableCell component="th" scope="row">
-          {uuidPrefix(task.id)}
-        </TableCell>
-        <TableCell>{task.type}</TableCell>
-        <TableCell>{durationBefore(task.next_process_at)}</TableCell>
-        <TableCell
-          align="center"
-          className={clsx(
-            classes.actionCell,
-            props.showActions && classes.activeActionCell
-          )}
-          onMouseEnter={props.onActionCellEnter}
-          onMouseLeave={props.onActionCellLeave}
+    <TableRow key={task.id} selected={props.isSelected}>
+      <TableCell padding="checkbox">
+        <Checkbox
+          onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
+            props.onSelectChange(event.target.checked)
+          }
+          checked={props.isSelected}
+        />
+      </TableCell>
+      <TableCell component="th" scope="row">
+        {uuidPrefix(task.id)}
+      </TableCell>
+      <TableCell>{task.type}</TableCell>
+      <TableCell>
+        <SyntaxHighlighter
+          language="json"
+          customStyle={{ margin: 0, maxWidth: 400 }}
         >
-          {props.showActions ? (
-            <React.Fragment>
-              <Tooltip title="Delete">
-                <IconButton
-                  onClick={props.onDeleteClick}
-                  disabled={task.requestPending || props.allActionPending}
-                  size="small"
-                >
-                  <DeleteIcon fontSize="small" />
-                </IconButton>
-              </Tooltip>
-              <Tooltip title="Archive">
-                <IconButton
-                  onClick={props.onArchiveClick}
-                  disabled={task.requestPending || props.allActionPending}
-                  size="small"
-                >
-                  <ArchiveIcon fontSize="small" />
-                </IconButton>
-              </Tooltip>
-              <Tooltip title="Run">
-                <IconButton
-                  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>
-      <TableRow selected={props.isSelected}>
-        <TableCell style={{ paddingBottom: 0, paddingTop: 0 }} colSpan={6}>
-          <Collapse in={open} timeout="auto" unmountOnExit>
-            <Box margin={1}>
-              <Typography variant="h6" gutterBottom component="div">
-                Payload
-              </Typography>
-              <SyntaxHighlighter language="json">
-                {JSON.stringify(task.payload, null, 2)}
-              </SyntaxHighlighter>
-            </Box>
-          </Collapse>
-        </TableCell>
-      </TableRow>
-    </React.Fragment>
+          {JSON.stringify(task.payload)}
+        </SyntaxHighlighter>
+      </TableCell>
+      <TableCell>{durationBefore(task.next_process_at)}</TableCell>
+      <TableCell
+        align="center"
+        className={clsx(
+          classes.actionCell,
+          props.showActions && classes.activeActionCell
+        )}
+        onMouseEnter={props.onActionCellEnter}
+        onMouseLeave={props.onActionCellLeave}
+      >
+        {props.showActions ? (
+          <React.Fragment>
+            <Tooltip title="Delete">
+              <IconButton
+                onClick={props.onDeleteClick}
+                disabled={task.requestPending || props.allActionPending}
+                size="small"
+              >
+                <DeleteIcon fontSize="small" />
+              </IconButton>
+            </Tooltip>
+            <Tooltip title="Archive">
+              <IconButton
+                onClick={props.onArchiveClick}
+                disabled={task.requestPending || props.allActionPending}
+                size="small"
+              >
+                <ArchiveIcon fontSize="small" />
+              </IconButton>
+            </Tooltip>
+            <Tooltip title="Run">
+              <IconButton
+                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>
   );
 }
 export default connector(ScheduledTasksTable);