Add SchedulerEnqueueEventsTable

ui/src/components/SchedulerEnqueueEventsTable.tsx

@@ -0,0 +1,75 @@
+import React, { useEffect } from "react";
+import { connect, ConnectedProps } from "react-redux";
+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";
+import TableContainer from "@material-ui/core/TableContainer";
+import TableHead from "@material-ui/core/TableHead";
+import TableRow from "@material-ui/core/TableRow";
+import { AppState } from "../store";
+import { getEnqueueEventsEntry } from "../reducers/schedulerEntriesReducer";
+import { listSchedulerEnqueueEventsAsync } from "../actions/schedulerEntriesActions";
+import { timeAgo } from "../utils";
+
+const useStyles = makeStyles((theme) => ({
+  table: {
+    height: "80vh",
+  },
+}));
+
+function mapStateToProps(state: AppState, ownProps: Props) {
+  return {
+    events: getEnqueueEventsEntry(state.schedulerEntries, ownProps.entryId),
+  };
+}
+
+const connector = connect(mapStateToProps, { listSchedulerEnqueueEventsAsync });
+
+type ReduxProps = ConnectedProps<typeof connector>;
+
+interface Props {
+  entryId: string; // Scheduler Entry ID
+}
+
+function SchedulerEnqueueEventsTable(props: Props & ReduxProps) {
+  const classes = useStyles();
+  const { listSchedulerEnqueueEventsAsync, entryId, events } = props;
+
+  useEffect(() => {
+    listSchedulerEnqueueEventsAsync(entryId);
+  }, [entryId, listSchedulerEnqueueEventsAsync]);
+
+  // TODO: loading state UI
+
+  // TODO: "Load More" button OR infinite scroll
+
+  return (
+    <TableContainer className={classes.table}>
+      <Table
+        stickyHeader
+        aria-label="scheduler enqueue events table"
+        size="small"
+      >
+        <TableHead>
+          <TableRow>
+            <TableCell>Enqueued</TableCell>
+            <TableCell>Task ID</TableCell>
+          </TableRow>
+        </TableHead>
+        <TableBody>
+          {events.data.map((e) => (
+            <TableRow key={e.task_id}>
+              <TableCell component="th" scope="row">
+                {timeAgo(e.enqueued_at)}
+              </TableCell>
+              <TableCell>{e.task_id}</TableCell>
+            </TableRow>
+          ))}
+        </TableBody>
+      </Table>
+    </TableContainer>
+  );
+}
+
+export default connector(SchedulerEnqueueEventsTable);

ui/src/components/SchedulerEntriesTable.tsx

@@ -1,8 +1,6 @@
 import React, { useState } from "react";
 import clsx from "clsx";
 import { makeStyles } from "@material-ui/core/styles";
-import Collapse from "@material-ui/core/Collapse";
-import Box from "@material-ui/core/Box";
 import IconButton from "@material-ui/core/IconButton";
 import Table from "@material-ui/core/Table";
 import TableBody from "@material-ui/core/TableBody";
@@ -10,10 +8,10 @@ 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 Modal from "@material-ui/core/Modal";
 import Typography from "@material-ui/core/Typography";
 import Tooltip from "@material-ui/core/Tooltip";
-import KeyboardArrowDownIcon from "@material-ui/icons/KeyboardArrowDown";
-import KeyboardArrowUpIcon from "@material-ui/icons/KeyboardArrowUp";
+import HistoryIcon from "@material-ui/icons/History";
 import Alert from "@material-ui/lab/Alert";
 import AlertTitle from "@material-ui/lab/AlertTitle";
 import SyntaxHighlighter from "react-syntax-highlighter";
@@ -22,6 +20,7 @@ import { SortDirection, SortableTableColumn } from "../types/table";
 import TableSortLabel from "@material-ui/core/TableSortLabel";
 import { SchedulerEntry } from "../api";
 import { timeAgo, durationBefore } from "../utils";
+import SchedulerEnqueueEventsTable from "./SchedulerEnqueueEventsTable";
 
 const useStyles = makeStyles((theme) => ({
   table: {
@@ -36,6 +35,21 @@ const useStyles = makeStyles((theme) => ({
     left: 0,
     background: theme.palette.common.white,
   },
+  modal: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  modalContent: {
+    background: theme.palette.common.white,
+    padding: theme.spacing(2),
+    width: "540px",
+    outline: "none",
+    borderRadius: theme.shape.borderRadius,
+  },
+  eventsTable: {
+    maxHeight: "80vh",
+  },
 }));
 
 enum SortBy {
@@ -120,6 +134,7 @@ export default function SchedulerEntriesTable(props: Props) {
   const classes = useStyles();
   const [sortBy, setSortBy] = useState<SortBy>(SortBy.EntryId);
   const [sortDir, setSortDir] = useState<SortDirection>(SortDirection.Asc);
+  const [activeEntryId, setActiveEntryId] = useState<string>("");
 
   const createSortClickHandler = (sortKey: SortBy) => (e: React.MouseEvent) => {
     if (sortKey === sortBy) {
@@ -187,144 +202,118 @@ export default function SchedulerEntriesTable(props: Props) {
   }
 
   return (
-    <TableContainer>
-      <Table className={classes.table} aria-label="simple table">
-        <TableHead>
-          <TableRow>
-            {colConfigs.map((cfg, i) => (
-              <TableCell
-                key={cfg.key}
-                align={cfg.align}
-                className={clsx(i === 0 && classes.fixedCell)}
-              >
-                <TableSortLabel
-                  active={cfg.sortBy === sortBy}
-                  direction={sortDir}
-                  onClick={createSortClickHandler(cfg.sortBy)}
+    <>
+      <TableContainer>
+        <Table className={classes.table} aria-label="scheduler entries table">
+          <TableHead>
+            <TableRow>
+              {colConfigs.map((cfg, i) => (
+                <TableCell
+                  key={cfg.key}
+                  align={cfg.align}
+                  className={clsx(i === 0 && classes.fixedCell)}
                 >
-                  {cfg.label}
-                </TableSortLabel>
-              </TableCell>
+                  <TableSortLabel
+                    active={cfg.sortBy === sortBy}
+                    direction={sortDir}
+                    onClick={createSortClickHandler(cfg.sortBy)}
+                  >
+                    {cfg.label}
+                  </TableSortLabel>
+                </TableCell>
+              ))}
+            </TableRow>
+          </TableHead>
+          <TableBody>
+            {sortEntries(props.entries, cmpFunc).map((entry, idx) => (
+              <Row
+                key={entry.id}
+                entry={entry}
+                isLastRow={idx === props.entries.length - 1}
+                onShowHistoryClick={() => setActiveEntryId(entry.id)}
+              />
             ))}
-          </TableRow>
-        </TableHead>
-        <TableBody>
-          {sortEntries(props.entries, cmpFunc).map((entry, idx) => (
-            <Row
-              key={entry.id}
-              entry={entry}
-              isLastRow={idx === props.entries.length - 1}
-            />
-          ))}
-        </TableBody>
-      </Table>
-    </TableContainer>
+          </TableBody>
+        </Table>
+        <Modal
+          open={activeEntryId !== ""}
+          onClose={() => setActiveEntryId("")}
+          className={classes.modal}
+        >
+          <div className={classes.modalContent}>
+            <Typography variant="h6" gutterBottom>
+              Recent History
+            </Typography>
+            <SchedulerEnqueueEventsTable entryId={activeEntryId} />
+          </div>
+        </Modal>
+      </TableContainer>
+    </>
   );
 }
 
 interface RowProps {
   entry: SchedulerEntry;
   isLastRow: boolean;
+  onShowHistoryClick: () => void;
 }
 
 const useRowStyles = makeStyles((theme) => ({
-  root: {
+  rowRoot: {
     "& > *": {
       borderBottom: "unset",
     },
   },
-  historyBox: {
-    maxWidth: 540,
-  },
   noBorder: {
     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) {
   const { entry, isLastRow } = props;
   const classes = useRowStyles();
-  const [open, setOpen] = useState<boolean>(false);
   return (
-    <React.Fragment>
-      <TableRow className={classes.root}>
-        <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>
-        <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>
+    <TableRow className={classes.rowRoot}>
+      <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>
+      <TableCell>
+        <Tooltip title="See History">
+          <IconButton
+            aria-label="expand row"
+            size="small"
+            onClick={props.onShowHistoryClick}
+          >
+            <HistoryIcon />
+          </IconButton>
+        </Tooltip>
+      </TableCell>
+    </TableRow>
   );
 }