Add SchedulerEnqueueEventsTable

2025-01-19 03:05:53 +08:00 · 2020-12-26 13:43:51 -08:00 · 2020-12-26 13:43:51 -08:00 · 03c2827c25
commit 03c2827c25
parent 45d77be796
5 changed files with 215 additions and 121 deletions
--- a/ui/package.json
+++ b/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",
--- a/ui/src/components/SchedulerEnqueueEventsTable.tsx
+++ b/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);
--- a/ui/src/components/SchedulerEntriesTable.tsx
+++ b/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>
  );
 }
--- a/ui/src/reducers/schedulerEntriesReducer.ts
+++ b/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,
          },
        },
      };
--- a/ui/yarn.lock
+++ b/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"