github.com/wfusion/gofusion@v1.1.14/common/infra/asynq/asynqmon/ui/src/components/SchedulerEnqueueEventsTable.tsx (about)

     1  import React, { useEffect } from "react";
     2  import { connect, ConnectedProps } from "react-redux";
     3  import { makeStyles } from "@material-ui/core/styles";
     4  import Table from "@material-ui/core/Table";
     5  import TableBody from "@material-ui/core/TableBody";
     6  import TableCell from "@material-ui/core/TableCell";
     7  import TableContainer from "@material-ui/core/TableContainer";
     8  import TableHead from "@material-ui/core/TableHead";
     9  import TableRow from "@material-ui/core/TableRow";
    10  import { AppState } from "../store";
    11  import { getEnqueueEventsEntry } from "../reducers/schedulerEntriesReducer";
    12  import { listSchedulerEnqueueEventsAsync } from "../actions/schedulerEntriesActions";
    13  import { timeAgo } from "../utils";
    14  
    15  const useStyles = makeStyles((theme) => ({
    16    table: {
    17      height: "80vh",
    18    },
    19    stickyHeaderCell: {
    20      background: theme.palette.background.paper,
    21    },
    22  }));
    23  
    24  function mapStateToProps(state: AppState, ownProps: Props) {
    25    return {
    26      events: getEnqueueEventsEntry(state.schedulerEntries, ownProps.entryId),
    27    };
    28  }
    29  
    30  const connector = connect(mapStateToProps, { listSchedulerEnqueueEventsAsync });
    31  
    32  type ReduxProps = ConnectedProps<typeof connector>;
    33  
    34  interface Props {
    35    entryId: string; // Scheduler Entry ID
    36  }
    37  
    38  function SchedulerEnqueueEventsTable(props: Props & ReduxProps) {
    39    const classes = useStyles();
    40    const { listSchedulerEnqueueEventsAsync, entryId, events } = props;
    41  
    42    useEffect(() => {
    43      listSchedulerEnqueueEventsAsync(entryId);
    44    }, [entryId, listSchedulerEnqueueEventsAsync]);
    45  
    46    // TODO: loading state UI
    47  
    48    // TODO: "Load More" button OR infinite scroll
    49  
    50    return (
    51      <TableContainer className={classes.table}>
    52        <Table
    53          stickyHeader
    54          aria-label="scheduler enqueue events table"
    55          size="small"
    56        >
    57          <TableHead>
    58            <TableRow>
    59              <TableCell classes={{ stickyHeader: classes.stickyHeaderCell }}>
    60                Enqueued
    61              </TableCell>
    62              <TableCell classes={{ stickyHeader: classes.stickyHeaderCell }}>
    63                Task ID
    64              </TableCell>
    65            </TableRow>
    66          </TableHead>
    67          <TableBody>
    68            {events.data.map((e) => (
    69              <TableRow key={e.task_id}>
    70                <TableCell component="th" scope="row">
    71                  {timeAgo(e.enqueued_at)}
    72                </TableCell>
    73                <TableCell>{e.task_id}</TableCell>
    74              </TableRow>
    75            ))}
    76          </TableBody>
    77        </Table>
    78      </TableContainer>
    79    );
    80  }
    81  
    82  export default connector(SchedulerEnqueueEventsTable);