go-pkg/asynqmon
2
0
Fork 0
mirror of https://github.com/hibiken/asynqmon.git synced 2025-01-19 03:05:53 +08:00
Code Issues Projects Releases Wiki Activity

WIP: Show scheduler entry history in SchedulerEntriesTable

Browse Source
This commit is contained in:
Ken Hibino 2020-12-25 19:19:40 -08:00
parent 40f06fb267
commit 245b0cb18c
1 changed files with 100 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

131
ui/src/components/SchedulerEntriesTable.tsx
View File

@ -2,6 +2,7 @@ import React, { useState } from "react";
import clsx from "clsx"; import clsx from "clsx";
import { makeStyles } from "@material-ui/core/styles"; import { makeStyles } from "@material-ui/core/styles";
import Collapse from "@material-ui/core/Collapse"; import Collapse from "@material-ui/core/Collapse";
import Box from "@material-ui/core/Box";
import IconButton from "@material-ui/core/IconButton"; import IconButton from "@material-ui/core/IconButton";
import Table from "@material-ui/core/Table"; import Table from "@material-ui/core/Table";
import TableBody from "@material-ui/core/TableBody"; import TableBody from "@material-ui/core/TableBody";
@ -9,6 +10,8 @@ import TableCell from "@material-ui/core/TableCell";
import TableContainer from "@material-ui/core/TableContainer"; import TableContainer from "@material-ui/core/TableContainer";
import TableHead from "@material-ui/core/TableHead"; import TableHead from "@material-ui/core/TableHead";
import TableRow from "@material-ui/core/TableRow"; import TableRow from "@material-ui/core/TableRow";
import Typography from "@material-ui/core/Typography";
import Tooltip from "@material-ui/core/Tooltip";
import KeyboardArrowDownIcon from "@material-ui/icons/KeyboardArrowDown"; import KeyboardArrowDownIcon from "@material-ui/icons/KeyboardArrowDown";
import KeyboardArrowUpIcon from "@material-ui/icons/KeyboardArrowUp"; import KeyboardArrowUpIcon from "@material-ui/icons/KeyboardArrowUp";
import Alert from "@material-ui/lab/Alert"; import Alert from "@material-ui/lab/Alert";
@ -43,6 +46,8 @@ enum SortBy {
Options, Options,
NextEnqueue, NextEnqueue,
PrevEnqueue, PrevEnqueue,
None,
} }
const colConfigs: SortableTableColumn<SortBy>[] = [ const colConfigs: SortableTableColumn<SortBy>[] = [
@ -88,6 +93,12 @@ const colConfigs: SortableTableColumn<SortBy>[] = [
sortBy: SortBy.PrevEnqueue, sortBy: SortBy.PrevEnqueue,
align: "left", align: "left",
}, },
{
label: "",
key: "show_history",
sortBy: SortBy.None,
align: "left",
},
]; ];
// sortEntries takes a array of entries and return a sorted array. // sortEntries takes a array of entries and return a sorted array.
@ -217,45 +228,103 @@ interface RowProps {
} }
const useRowStyles = makeStyles((theme) => ({ const useRowStyles = makeStyles((theme) => ({
root: {
"& > *": {
borderBottom: "unset",
},
},
historyBox: {
maxWidth: 540,
},
noBorder: { noBorder: {
border: "none", border: "none",
}, },
})); }));
// TODO: replace with real data
const history = [
{ enqueuedAt: "3m ago", taskId: "abc123" },
{ enqueuedAt: "10m ago", taskId: "xyz456" },
{ enqueuedAt: "30m ago", taskId: "dyz45f" },
];
function Row(props: RowProps) { function Row(props: RowProps) {
const { entry, isLastRow } = props; const { entry, isLastRow } = props;
const classes = useRowStyles(); const classes = useRowStyles();
const [open, setOpen] = useState<boolean>(false);
return ( return (
<TableRow> <React.Fragment>
<TableCell <TableRow className={classes.root}>
component="th" <TableCell
scope="row" component="th"
className={clsx(isLastRow && classes.noBorder)} scope="row"
> className={clsx(isLastRow && classes.noBorder)}
{entry.id} >
</TableCell> {entry.id}
<TableCell className={clsx(isLastRow && classes.noBorder)}> </TableCell>
{entry.spec} <TableCell className={clsx(isLastRow && classes.noBorder)}>
</TableCell> {entry.spec}
<TableCell className={clsx(isLastRow && classes.noBorder)}> </TableCell>
{entry.task_type} <TableCell className={clsx(isLastRow && classes.noBorder)}>
</TableCell> {entry.task_type}
<TableCell className={clsx(isLastRow && classes.noBorder)}> </TableCell>
<SyntaxHighlighter language="json" style={syntaxHighlightStyle}> <TableCell className={clsx(isLastRow && classes.noBorder)}>
{JSON.stringify(entry.task_payload)} <SyntaxHighlighter language="json" style={syntaxHighlightStyle}>
</SyntaxHighlighter> {JSON.stringify(entry.task_payload)}
</TableCell> </SyntaxHighlighter>
<TableCell className={clsx(isLastRow && classes.noBorder)}> </TableCell>
<SyntaxHighlighter language="go" style={syntaxHighlightStyle}> <TableCell className={clsx(isLastRow && classes.noBorder)}>
{entry.options.length > 0 ? entry.options.join(", ") : "No options"} <SyntaxHighlighter language="go" style={syntaxHighlightStyle}>
</SyntaxHighlighter> {entry.options.length > 0 ? entry.options.join(", ") : "No options"}
</TableCell> </SyntaxHighlighter>
<TableCell className={clsx(isLastRow && classes.noBorder)}> </TableCell>
{durationBefore(entry.next_enqueue_at)} <TableCell className={clsx(isLastRow && classes.noBorder)}>
</TableCell> {durationBefore(entry.next_enqueue_at)}
<TableCell className={clsx(isLastRow && classes.noBorder)}> </TableCell>
{entry.prev_enqueue_at ? timeAgo(entry.prev_enqueue_at) : "N/A"} <TableCell className={clsx(isLastRow && classes.noBorder)}>
</TableCell> {entry.prev_enqueue_at ? timeAgo(entry.prev_enqueue_at) : "N/A"}
</TableRow> </TableCell>
<TableCell>
<Tooltip title={open ? "Hide History" : "Show History"}>
<IconButton
aria-label="expand row"
size="small"
onClick={() => setOpen(!open)}
>
{open ? <KeyboardArrowUpIcon /> : <KeyboardArrowDownIcon />}
</IconButton>
</Tooltip>
</TableCell>
</TableRow>
<TableRow>
<TableCell style={{ paddingBottom: 0, paddingTop: 0 }} colSpan={8}>
<Collapse in={open} timeout="auto" unmountOnExit>
<Box margin={1} className={classes.historyBox}>
<Typography variant="h6" gutterBottom component="div">
History
</Typography>
<Table size="small" aria-label="purchases">
<TableHead>
<TableRow>
<TableCell>Enqueued</TableCell>
<TableCell>Task ID</TableCell>
</TableRow>
</TableHead>
<TableBody>
{history.map((historyRow) => (
<TableRow key={historyRow.taskId}>
<TableCell component="th" scope="row">
{historyRow.enqueuedAt}
</TableCell>
<TableCell>{historyRow.taskId}</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</Box>
</Collapse>
</TableCell>
</TableRow>
</React.Fragment>
); );
} }