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

Extract Row component in SchedulerEntriesTable

Browse Source
This commit is contained in:
Ken Hibino 2020-12-25 15:16:47 -08:00
parent ce2a8c3329
commit 40f06fb267
1 changed files with 60 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,12 +1,16 @@
import React, { useState } from "react"; 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 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";
import TableCell from "@material-ui/core/TableCell"; 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 KeyboardArrowDownIcon from "@material-ui/icons/KeyboardArrowDown";
import KeyboardArrowUpIcon from "@material-ui/icons/KeyboardArrowUp";
import Alert from "@material-ui/lab/Alert"; import Alert from "@material-ui/lab/Alert";
import AlertTitle from "@material-ui/lab/AlertTitle"; import AlertTitle from "@material-ui/lab/AlertTitle";
import SyntaxHighlighter from "react-syntax-highlighter"; import SyntaxHighlighter from "react-syntax-highlighter";
@ -194,10 +198,35 @@ export default function SchedulerEntriesTable(props: Props) {
</TableRow> </TableRow>
</TableHead> </TableHead>
<TableBody> <TableBody>
{sortEntries(props.entries, cmpFunc).map((entry, idx) => { {sortEntries(props.entries, cmpFunc).map((entry, idx) => (
const isLastRow = idx === props.entries.length - 1; <Row
key={entry.id}
entry={entry}
isLastRow={idx === props.entries.length - 1}
/>
))}
</TableBody>
</Table>
</TableContainer>
);
}
interface RowProps {
entry: SchedulerEntry;
isLastRow: boolean;
}
const useRowStyles = makeStyles((theme) => ({
noBorder: {
border: "none",
},
}));
function Row(props: RowProps) {
const { entry, isLastRow } = props;
const classes = useRowStyles();
return ( return (
<TableRow key={entry.id}> <TableRow>
<TableCell <TableCell
component="th" component="th"
scope="row" scope="row"
@ -212,33 +241,21 @@ export default function SchedulerEntriesTable(props: Props) {
{entry.task_type} {entry.task_type}
</TableCell> </TableCell>
<TableCell className={clsx(isLastRow && classes.noBorder)}> <TableCell className={clsx(isLastRow && classes.noBorder)}>
<SyntaxHighlighter <SyntaxHighlighter language="json" style={syntaxHighlightStyle}>
language="json"
style={syntaxHighlightStyle}
>
{JSON.stringify(entry.task_payload)} {JSON.stringify(entry.task_payload)}
</SyntaxHighlighter> </SyntaxHighlighter>
</TableCell> </TableCell>
<TableCell className={clsx(isLastRow && classes.noBorder)}> <TableCell className={clsx(isLastRow && classes.noBorder)}>
<SyntaxHighlighter language="go" style={syntaxHighlightStyle}> <SyntaxHighlighter language="go" style={syntaxHighlightStyle}>
{entry.options.length > 0 {entry.options.length > 0 ? entry.options.join(", ") : "No options"}
? entry.options.join(", ")
: "No options"}
</SyntaxHighlighter> </SyntaxHighlighter>
</TableCell> </TableCell>
<TableCell className={clsx(isLastRow && classes.noBorder)}> <TableCell className={clsx(isLastRow && classes.noBorder)}>
{durationBefore(entry.next_enqueue_at)} {durationBefore(entry.next_enqueue_at)}
</TableCell> </TableCell>
<TableCell className={clsx(isLastRow && classes.noBorder)}> <TableCell className={clsx(isLastRow && classes.noBorder)}>
{entry.prev_enqueue_at {entry.prev_enqueue_at ? timeAgo(entry.prev_enqueue_at) : "N/A"}
? timeAgo(entry.prev_enqueue_at)
: "N/A"}
</TableCell> </TableCell>
</TableRow> </TableRow>
); );
})}
</TableBody>
</Table>
</TableContainer>
);
} }