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

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

@ -1,12 +1,16 @@
import React, { useState } from "react";
import clsx from "clsx";
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 TableBody from "@material-ui/core/TableBody";
import TableCell from "@material-ui/core/TableCell";
import TableContainer from "@material-ui/core/TableContainer";
import TableHead from "@material-ui/core/TableHead";
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 AlertTitle from "@material-ui/lab/AlertTitle";
import SyntaxHighlighter from "react-syntax-highlighter";
@ -194,51 +198,64 @@ export default function SchedulerEntriesTable(props: Props) {
</TableRow>
</TableHead>
<TableBody>
{sortEntries(props.entries, cmpFunc).map((entry, idx) => {
const isLastRow = idx === props.entries.length - 1;
return (
<TableRow key={entry.id}>
<TableCell
component="th"
scope="row"
className={clsx(isLastRow && classes.noBorder)}
>
{entry.id}
</TableCell>
<TableCell className={clsx(isLastRow && classes.noBorder)}>
{entry.spec}
</TableCell>
<TableCell className={clsx(isLastRow && classes.noBorder)}>
{entry.task_type}
</TableCell>
<TableCell className={clsx(isLastRow && classes.noBorder)}>
<SyntaxHighlighter
language="json"
style={syntaxHighlightStyle}
>
{JSON.stringify(entry.task_payload)}
</SyntaxHighlighter>
</TableCell>
<TableCell className={clsx(isLastRow && classes.noBorder)}>
<SyntaxHighlighter language="go" style={syntaxHighlightStyle}>
{entry.options.length > 0
? entry.options.join(", ")
: "No options"}
</SyntaxHighlighter>
</TableCell>
<TableCell className={clsx(isLastRow && classes.noBorder)}>
{durationBefore(entry.next_enqueue_at)}
</TableCell>
<TableCell className={clsx(isLastRow && classes.noBorder)}>
{entry.prev_enqueue_at
? timeAgo(entry.prev_enqueue_at)
: "N/A"}
</TableCell>
</TableRow>
);
})}
{sortEntries(props.entries, cmpFunc).map((entry, idx) => (
<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 (
<TableRow>
<TableCell
component="th"
scope="row"
className={clsx(isLastRow && classes.noBorder)}
>
{entry.id}
</TableCell>
<TableCell className={clsx(isLastRow && classes.noBorder)}>
{entry.spec}
</TableCell>
<TableCell className={clsx(isLastRow && classes.noBorder)}>
{entry.task_type}
</TableCell>
<TableCell className={clsx(isLastRow && classes.noBorder)}>
<SyntaxHighlighter language="json" style={syntaxHighlightStyle}>
{JSON.stringify(entry.task_payload)}
</SyntaxHighlighter>
</TableCell>
<TableCell className={clsx(isLastRow && classes.noBorder)}>
<SyntaxHighlighter language="go" style={syntaxHighlightStyle}>
{entry.options.length > 0 ? entry.options.join(", ") : "No options"}
</SyntaxHighlighter>
</TableCell>
<TableCell className={clsx(isLastRow && classes.noBorder)}>
{durationBefore(entry.next_enqueue_at)}
</TableCell>
<TableCell className={clsx(isLastRow && classes.noBorder)}>
{entry.prev_enqueue_at ? timeAgo(entry.prev_enqueue_at) : "N/A"}
</TableCell>
</TableRow>
);
}