asynqmon/ui/src/components/SchedulerEntriesTable.tsx

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";
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 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 Alert from "@material-ui/lab/Alert";
import AlertTitle from "@material-ui/lab/AlertTitle";
import SyntaxHighlighter from "react-syntax-highlighter";
import syntaxHighlightStyle from "react-syntax-highlighter/dist/esm/styles/hljs/github";
import { SortDirection, SortableTableColumn } from "../types/table";
import TableSortLabel from "@material-ui/core/TableSortLabel";
import { SchedulerEntry } from "../api";
import { timeAgo, durationBefore } from "../utils";

const useStyles = makeStyles((theme) => ({
  table: {
    minWidth: 650,
  },
  noBorder: {
    border: "none",
  },
  fixedCell: {
    position: "sticky",
    zIndex: 1,
    left: 0,
    background: theme.palette.common.white,
  },
}));

enum SortBy {
  EntryId,
  Spec,
  Type,
  Payload,
  Options,
  NextEnqueue,
  PrevEnqueue,

  None,
}

const colConfigs: SortableTableColumn<SortBy>[] = [
  {
    label: "Entry ID",
    key: "entry_id",
    sortBy: SortBy.EntryId,
    align: "left",
  },
  {
    label: "Spec",
    key: "spec",
    sortBy: SortBy.Spec,
    align: "left",
  },
  {
    label: "Type",
    key: "type",
    sortBy: SortBy.Type,
    align: "left",
  },
  {
    label: "Payload",
    key: "task_payload",
    sortBy: SortBy.Payload,
    align: "left",
  },
  {
    label: "Options",
    key: "options",
    sortBy: SortBy.Options,
    align: "left",
  },
  {
    label: "Next Enqueue",
    key: "next_enqueue",
    sortBy: SortBy.NextEnqueue,
    align: "left",
  },
  {
    label: "Prev Enqueue",
    key: "prev_enqueue",
    sortBy: SortBy.PrevEnqueue,
    align: "left",
  },
  {
    label: "",
    key: "show_history",
    sortBy: SortBy.None,
    align: "left",
  },
];

// sortEntries takes a array of entries and return a sorted array.
// It returns a new array and leave the original array untouched.
function sortEntries(
  entries: SchedulerEntry[],
  cmpFn: (first: SchedulerEntry, second: SchedulerEntry) => number
): SchedulerEntry[] {
  let copy = [...entries];
  copy.sort(cmpFn);
  return copy;
}

interface Props {
  entries: SchedulerEntry[];
}

export default function SchedulerEntriesTable(props: Props) {
  const classes = useStyles();
  const [sortBy, setSortBy] = useState<SortBy>(SortBy.EntryId);
  const [sortDir, setSortDir] = useState<SortDirection>(SortDirection.Asc);

  const createSortClickHandler = (sortKey: SortBy) => (e: React.MouseEvent) => {
    if (sortKey === sortBy) {
      // Toggle sort direction.
      const nextSortDir =
        sortDir === SortDirection.Asc ? SortDirection.Desc : SortDirection.Asc;
      setSortDir(nextSortDir);
    } else {
      // Change the sort key.
      setSortBy(sortKey);
    }
  };

  const cmpFunc = (e1: SchedulerEntry, e2: SchedulerEntry): number => {
    let isE1Smaller: boolean;
    switch (sortBy) {
      case SortBy.EntryId:
        if (e1.id === e2.id) return 0;
        isE1Smaller = e1.id < e2.id;
        break;
      case SortBy.Spec:
        if (e1.spec === e2.spec) return 0;
        isE1Smaller = e1.spec < e2.spec;
        break;
      case SortBy.Type:
        if (e1.task_type === e2.task_type) return 0;
        isE1Smaller = e1.task_type < e2.task_type;
        break;
      case SortBy.Payload:
        if (e1.task_payload === e2.task_payload) return 0;
        isE1Smaller = e1.task_payload < e2.task_payload;
        break;
      case SortBy.Options:
        if (e1.options === e2.options) return 0;
        isE1Smaller = e1.options < e2.options;
        break;
      case SortBy.NextEnqueue:
        if (e1.next_enqueue_at === e2.next_enqueue_at) return 0;
        isE1Smaller = e1.next_enqueue_at < e2.next_enqueue_at;
        break;
      case SortBy.PrevEnqueue:
        const e1PrevEnqueueAt = e1.prev_enqueue_at || "";
        const e2PrevEnqueueAt = e2.prev_enqueue_at || "";
        if (e1PrevEnqueueAt === e2PrevEnqueueAt) return 0;
        isE1Smaller = e1PrevEnqueueAt < e2PrevEnqueueAt;
        break;
      default:
        // eslint-disable-next-line no-throw-literal
        throw `Unexpected order by value: ${sortBy}`;
    }
    if (sortDir === SortDirection.Asc) {
      return isE1Smaller ? -1 : 1;
    } else {
      return isE1Smaller ? 1 : -1;
    }
  };

  if (props.entries.length === 0) {
    return (
      <Alert severity="info">
        <AlertTitle>Info</AlertTitle>
        No entries found at this time.
      </Alert>
    );
  }

  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)}
                >
                  {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}
            />
          ))}
        </TableBody>
      </Table>
    </TableContainer>
  );
}

interface RowProps {
  entry: SchedulerEntry;
  isLastRow: boolean;
}

const useRowStyles = makeStyles((theme) => ({
  root: {
    "& > *": {
      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>
  );
}