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,16 +268,8 @@ 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>) =>
@@ -315,25 +278,25 @@ function Row(props: RowProps) {
           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>
+        <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}
@@ -358,77 +321,6 @@ function Row(props: RowProps) {
         )}
       </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>
   );
 }
 

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,15 +313,9 @@ 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}
-      >
+    <TableRow key={task.id} selected={props.isSelected}>
       <TableCell padding="checkbox">
         <Checkbox
           onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
@@ -336,21 +324,18 @@ function Row(props: RowProps) {
           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>
+        <SyntaxHighlighter
+          language="json"
+          customStyle={{ margin: 0, maxWidth: 400 }}
+        >
+          {JSON.stringify(task.payload)}
+        </SyntaxHighlighter>
+      </TableCell>
       <TableCell>{timeAgo(task.last_failed_at)}</TableCell>
       <TableCell>{task.error_message}</TableCell>
       <TableCell
@@ -390,21 +375,6 @@ function Row(props: RowProps) {
         )}
       </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>
   );
 }
 

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,15 +315,9 @@ 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}
-      >
+    <TableRow key={task.id} selected={props.isSelected}>
       <TableCell padding="checkbox">
         <Checkbox
           onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
@@ -334,21 +326,20 @@ function Row(props: RowProps) {
           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>
+        <SyntaxHighlighter
+          language="json"
+          customStyle={{ margin: 0, maxWidth: 400 }}
+        >
+          {JSON.stringify(task.payload)}
+        </SyntaxHighlighter>
+      </TableCell>
+      <TableCell align="right">{task.retried}</TableCell>
+      <TableCell align="right">{task.max_retry}</TableCell>
       <TableCell
         align="center"
         className={clsx(
@@ -386,21 +377,6 @@ function Row(props: RowProps) {
         )}
       </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>
   );
 }
 

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,15 +347,9 @@ 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}
-      >
+    <TableRow key={task.id} selected={props.isSelected}>
       <TableCell padding="checkbox">
         <Checkbox
           onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
@@ -370,25 +358,22 @@ function Row(props: RowProps) {
           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>
+        <SyntaxHighlighter
+          language="json"
+          customStyle={{ margin: 0, maxWidth: 400 }}
+        >
+          {JSON.stringify(task.payload)}
+        </SyntaxHighlighter>
+      </TableCell>
       <TableCell>{durationBefore(task.next_process_at)}</TableCell>
       <TableCell>{task.error_message}</TableCell>
-        <TableCell>{task.retried}</TableCell>
-        <TableCell>{task.max_retry}</TableCell>
+      <TableCell align="right">{task.retried}</TableCell>
+      <TableCell align="right">{task.max_retry}</TableCell>
       <TableCell
         align="center"
         className={clsx(
@@ -435,21 +420,6 @@ function Row(props: RowProps) {
         )}
       </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>
   );
 }
 

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,15 +344,9 @@ 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}
-      >
+    <TableRow key={task.id} selected={props.isSelected}>
       <TableCell padding="checkbox">
         <Checkbox
           onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
@@ -367,21 +355,18 @@ function Row(props: RowProps) {
           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>
+        <SyntaxHighlighter
+          language="json"
+          customStyle={{ margin: 0, maxWidth: 400 }}
+        >
+          {JSON.stringify(task.payload)}
+        </SyntaxHighlighter>
+      </TableCell>
       <TableCell>{durationBefore(task.next_process_at)}</TableCell>
       <TableCell
         align="center"
@@ -429,21 +414,6 @@ function Row(props: RowProps) {
         )}
       </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>
   );
 }
 export default connector(ScheduledTasksTable);