Add SchedulerEnqueueEventsTable

ui/package.json

@@ -11,6 +11,7 @@
     "@testing-library/react": "^9.3.2",
     "@testing-library/user-event": "^7.1.2",
     "@types/jest": "^24.0.0",
+    "@types/lodash.uniqby": "4.7.6",
     "@types/node": "^12.0.0",
     "@types/react": "^16.9.0",
     "@types/react-dom": "^16.9.0",
@@ -21,6 +22,7 @@
     "@types/styled-components": "5.1.4",
     "axios": "0.20.0",
     "clsx": "1.1.1",
+    "lodash.uniqby": "4.7.0",
     "query-string": "6.13.7",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",

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 HistoryIcon from "@material-ui/icons/History";
-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";
@@ -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,8 +202,9 @@ export default function SchedulerEntriesTable(props: Props) {
   }
 
   return (
+    <>
       <TableContainer>
-      <Table className={classes.table} aria-label="simple table">
+        <Table className={classes.table} aria-label="scheduler entries table">
           <TableHead>
             <TableRow>
               {colConfigs.map((cfg, i) => (
@@ -214,47 +230,50 @@ export default function SchedulerEntriesTable(props: Props) {
                 key={entry.id}
                 entry={entry}
                 isLastRow={idx === props.entries.length - 1}
+                onShowHistoryClick={() => setActiveEntryId(entry.id)}
               />
             ))}
           </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.rowRoot}>
-      <TableRow className={classes.root}>
       <TableCell
         component="th"
         scope="row"
@@ -285,46 +304,16 @@ function Row(props: RowProps) {
         {entry.prev_enqueue_at ? timeAgo(entry.prev_enqueue_at) : "N/A"}
       </TableCell>
       <TableCell>
-          <Tooltip title={open ? "Hide History" : "Show History"}>
+        <Tooltip title="See History">
           <IconButton
             aria-label="expand row"
             size="small"
-              onClick={() => setOpen(!open)}
+            onClick={props.onShowHistoryClick}
           >
-              {open ? <KeyboardArrowUpIcon /> : <KeyboardArrowDownIcon />}
+            <HistoryIcon />
           </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>
   );
 }

ui/src/reducers/schedulerEntriesReducer.ts

@@ -1,3 +1,4 @@
+import uniqBy from "lodash.uniqby";
 import {
   LIST_SCHEDULER_ENQUEUE_EVENTS_BEGIN,
   LIST_SCHEDULER_ENQUEUE_EVENTS_ERROR,
@@ -18,7 +19,7 @@ interface SchedulerEntriesState {
   };
 }
 
-function getEnqueueEventsEntry(
+export function getEnqueueEventsEntry(
   state: SchedulerEntriesState,
   entryId: string
 ): { data: SchedulerEnqueueEvent[]; loading: boolean } {
@@ -70,14 +71,24 @@ function schedulerEntriesReducer(
       };
     }
     case LIST_SCHEDULER_ENQUEUE_EVENTS_SUCCESS: {
+      const sortByEnqueuedAt = (
+        e1: SchedulerEnqueueEvent,
+        e2: SchedulerEnqueueEvent
+      ): number => {
+        return Date.parse(e2.enqueued_at) - Date.parse(e1.enqueued_at);
+      };
       const entry = getEnqueueEventsEntry(state, action.entryId);
+      const newData = uniqBy(
+        [...entry.data, ...action.payload.events],
+        "task_id"
+      ).sort(sortByEnqueuedAt);
       return {
         ...state,
         enqueueEventsByEntryId: {
           ...state.enqueueEventsByEntryId,
           [action.entryId]: {
             loading: false,
-            data: [...entry.data, ...action.payload.events],
+            data: newData,
           },
         },
       };

ui/yarn.lock

@@ -1795,6 +1795,18 @@
   resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.6.tgz#f4c7ec43e81b319a9815115031709f26987891f0"
   integrity sha512-3c+yGKvVP5Y9TYBEibGNR+kLtijnj7mYrXRg+WpFb2X9xm04g/DXYkfg4hmzJQosc9snFNUPkbYIhu+KAm6jJw==
 
+"@types/lodash.uniqby@4.7.6":
+  version "4.7.6"
+  resolved "https://registry.yarnpkg.com/@types/lodash.uniqby/-/lodash.uniqby-4.7.6.tgz#672827a701403f07904fe37f0721ae92abfa80e8"
+  integrity sha512-9wBhrm1y6asW50Joj6tsySCNUgzK2tCqL7vtKIej0E9RyeBFdcte7fxUosmFuMoOU0eHqOMK76kCCrK99jxHgg==
+  dependencies:
+    "@types/lodash" "*"
+
+"@types/lodash@*":
+  version "4.14.166"
+  resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.166.tgz#07e7f2699a149219dbc3c35574f126ec8737688f"
+  integrity sha512-A3YT/c1oTlyvvW/GQqG86EyqWNrT/tisOIh2mW3YCgcx71TNjiTZA3zYZWA5BCmtsOTXjhliy4c4yEkErw6njA==
+
 "@types/minimatch@*":
   version "3.0.3"
   resolved "https://registry.yarnpkg.com/@types/minimatch/-/minimatch-3.0.3.tgz#3dca0e3f33b200fc7d1139c0cd96c1268cadfd9d"
@@ -7206,6 +7218,11 @@ lodash.uniq@^4.5.0:
   resolved "https://registry.yarnpkg.com/lodash.uniq/-/lodash.uniq-4.5.0.tgz#d0225373aeb652adc1bc82e4945339a842754773"
   integrity sha1-0CJTc662Uq3BvILklFM5qEJ1R3M=
 
+lodash.uniqby@4.7.0:
+  version "4.7.0"
+  resolved "https://registry.yarnpkg.com/lodash.uniqby/-/lodash.uniqby-4.7.0.tgz#d99c07a669e9e6d24e1362dfe266c67616af1302"
+  integrity sha1-2ZwHpmnp5tJOE2Lf4mbGdhavEwI=
+
 "lodash@>=3.5 <5", lodash@^4.17.11, lodash@^4.17.13, lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.5:
   version "4.17.15"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.15.tgz#b447f6670a0455bbfeedd11392eff330ea097548"