From aa2cc37cd944dc16ea8cf54d2f719daed71c8674 Mon Sep 17 00:00:00 2001 From: Ken Hibino Date: Sat, 30 Jan 2021 07:01:39 -0800 Subject: [PATCH] Update task table styles --- ui/src/components/ActiveTasksTable.tsx | 226 ++++++---------------- ui/src/components/ArchivedTasksTable.tsx | 160 +++++++-------- ui/src/components/PendingTasksTable.tsx | 162 +++++++--------- ui/src/components/RetryTasksTable.tsx | 184 ++++++++---------- ui/src/components/ScheduledTasksTable.tsx | 174 +++++++---------- 5 files changed, 342 insertions(+), 564 deletions(-) diff --git a/ui/src/components/ActiveTasksTable.tsx b/ui/src/components/ActiveTasksTable.tsx index 12b8358..3b7d69a 100644 --- a/ui/src/components/ActiveTasksTable.tsx +++ b/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) { }} /> - {columns.map((col) => ( @@ -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(); - const classes = useRowStyles(); return ( - - + + ) => + props.onSelectChange(event.target.checked) + } + checked={props.isSelected} + /> + + + {uuidPrefix(task.id)} + + {task.type} + + + {JSON.stringify(task.payload)} + + + {task.canceling ? "Canceling" : "Running"} + + {task.start_time === "-" ? "just now" : timeAgo(task.start_time)} + + + {task.deadline === "-" ? "-" : durationBefore(task.deadline)} + + - - ) => - props.onSelectChange(event.target.checked) - } - checked={props.isSelected} - /> - - - - setOpen(!open)} - > - {open ? : } - - - - - {uuidPrefix(task.id)} - - {task.type} - {task.canceling ? "Canceling" : "Running"} - - {task.start_time === "-" ? "just now" : timeAgo(task.start_time)} - - - {props.showActions ? ( - - - - - - - - ) : ( - - - - )} - - - - - - - - - Payload - - - {JSON.stringify(task.payload, null, 2)} - - - - - Task Info - - - - - Retry - - {task.retried}/{task.max_retry} - - - - Last Error - - {task.error_message.length > 0 - ? task.error_message - : "N/A"} - - - - - Deadline - - - {task.deadline === "-" - ? "-" - : durationBefore(task.deadline)} - - - -
- - - - - - + {props.showActions ? ( + + + + + + + + ) : ( + + + + )} + + ); } diff --git a/ui/src/components/ArchivedTasksTable.tsx b/ui/src/components/ArchivedTasksTable.tsx index 6fac8d2..7115620 100644 --- a/ui/src/components/ArchivedTasksTable.tsx +++ b/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) { @@ -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 ( - - - - ) => - props.onSelectChange(event.target.checked) - } - checked={props.isSelected} - /> - - - - setOpen(!open)} - > - {open ? : } - - - - - {uuidPrefix(task.id)} - - {task.type} - {timeAgo(task.last_failed_at)} - {task.error_message} - + + ) => + props.onSelectChange(event.target.checked) + } + checked={props.isSelected} + /> + + + {uuidPrefix(task.id)} + + {task.type} + + - {props.showActions ? ( - - - - - - - - - - - - - ) : ( - - - - )} - - - - - - - - Payload - - - {JSON.stringify(task.payload, null, 2)} - - - - - - + {JSON.stringify(task.payload)} + + + {timeAgo(task.last_failed_at)} + {task.error_message} + + {props.showActions ? ( + + + + + + + + + + + + + ) : ( + + + + )} + + ); } diff --git a/ui/src/components/PendingTasksTable.tsx b/ui/src/components/PendingTasksTable.tsx index 29bfeab..5b59e2c 100644 --- a/ui/src/components/PendingTasksTable.tsx +++ b/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) { {col.label} @@ -279,6 +281,7 @@ function PendingTasksTable(props: Props & ReduxProps) { onChangePage={handleChangePage} onChangeRowsPerPage={handleChangeRowsPerPage} ActionsComponent={TablePaginationActions} + className={classes.pagination} /> @@ -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 ( - - - - ) => - props.onSelectChange(event.target.checked) - } - checked={props.isSelected} - /> - - - - setOpen(!open)} - > - {open ? : } - - - - - {uuidPrefix(task.id)} - - {task.type} - + + ) => + props.onSelectChange(event.target.checked) + } + checked={props.isSelected} + /> + + + {uuidPrefix(task.id)} + + {task.type} + + - {props.showActions ? ( - - - - - - - - - - - - - ) : ( - - - - )} - - - - - - - - Payload - - - {JSON.stringify(task.payload, null, 2)} - - - - - - + {JSON.stringify(task.payload)} + + + {task.retried} + {task.max_retry} + + {props.showActions ? ( + + + + + + + + + + + + + ) : ( + + + + )} + + ); } diff --git a/ui/src/components/RetryTasksTable.tsx b/ui/src/components/RetryTasksTable.tsx index 6defdf3..975c391 100644 --- a/ui/src/components/RetryTasksTable.tsx +++ b/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} /> @@ -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 ( - - - - ) => - props.onSelectChange(event.target.checked) - } - checked={props.isSelected} - /> - - - - setOpen(!open)} - > - {open ? : } - - - - - {uuidPrefix(task.id)} - - {task.type} - {durationBefore(task.next_process_at)} - {task.error_message} - {task.retried} - {task.max_retry} - + + ) => + props.onSelectChange(event.target.checked) + } + checked={props.isSelected} + /> + + + {uuidPrefix(task.id)} + + {task.type} + + - {props.showActions ? ( - - - - - - - - - - - - - - - - - - ) : ( - - - - )} - - - - - - - - Payload - - - {JSON.stringify(task.payload, null, 2)} - - - - - - + {JSON.stringify(task.payload)} + + + {durationBefore(task.next_process_at)} + {task.error_message} + {task.retried} + {task.max_retry} + + {props.showActions ? ( + + + + + + + + + + + + + + + + + + ) : ( + + + + )} + + ); } diff --git a/ui/src/components/ScheduledTasksTable.tsx b/ui/src/components/ScheduledTasksTable.tsx index a22243e..b9e0f07 100644 --- a/ui/src/components/ScheduledTasksTable.tsx +++ b/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} /> @@ -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 ( - - - - ) => - props.onSelectChange(event.target.checked) - } - checked={props.isSelected} - /> - - - - setOpen(!open)} - > - {open ? : } - - - - - {uuidPrefix(task.id)} - - {task.type} - {durationBefore(task.next_process_at)} - + + ) => + props.onSelectChange(event.target.checked) + } + checked={props.isSelected} + /> + + + {uuidPrefix(task.id)} + + {task.type} + + - {props.showActions ? ( - - - - - - - - - - - - - - - - - - ) : ( - - - - )} - - - - - - - - Payload - - - {JSON.stringify(task.payload, null, 2)} - - - - - - + {JSON.stringify(task.payload)} + + + {durationBefore(task.next_process_at)} + + {props.showActions ? ( + + + + + + + + + + + + + + + + + + ) : ( + + + + )} + + ); } export default connector(ScheduledTasksTable);