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

     1  import { makeStyles } from "@material-ui/core/styles";
     2  import Alert from "@material-ui/lab/Alert";
     3  import AlertTitle from "@material-ui/lab/AlertTitle";
     4  import React, { useCallback, useState } from "react";
     5  import { connect, ConnectedProps } from "react-redux";
     6  import { listGroupsAsync } from "../actions/groupsActions";
     7  import { GroupInfo } from "../api";
     8  import { usePolling } from "../hooks";
     9  import { AppState } from "../store";
    10  import AggregatingTasksTable from "./AggregatingTasksTable";
    11  import GroupSelect from "./GroupSelect";
    12  
    13  const useStyles = makeStyles((theme) => ({
    14    groupSelector: {
    15      paddingTop: theme.spacing(1),
    16      paddingBottom: theme.spacing(1),
    17      paddingLeft: theme.spacing(2),
    18      paddingRight: theme.spacing(2),
    19    },
    20    alert: {
    21      borderTopLeftRadius: 0,
    22      borderTopRightRadius: 0,
    23    },
    24  }));
    25  
    26  function mapStateToProps(state: AppState) {
    27    return {
    28      groups: state.groups.data,
    29      groupsError: state.groups.error,
    30      pollInterval: state.settings.pollInterval,
    31    };
    32  }
    33  
    34  const mapDispatchToProps = {
    35    listGroupsAsync,
    36  };
    37  
    38  const connector = connect(mapStateToProps, mapDispatchToProps);
    39  
    40  interface Props {
    41    queue: string;
    42  }
    43  
    44  function AggregatingTasksTableContainer(
    45    props: Props & ConnectedProps<typeof connector>
    46  ) {
    47    const [selectedGroup, setSelectedGroup] = useState<GroupInfo | null>(null);
    48    const { pollInterval, listGroupsAsync, queue } = props;
    49    const classes = useStyles();
    50  
    51    const fetchGroups = useCallback(() => {
    52      listGroupsAsync(queue);
    53    }, [listGroupsAsync, queue]);
    54  
    55    usePolling(fetchGroups, pollInterval);
    56  
    57    if (props.groupsError.length > 0) {
    58      return (
    59        <Alert severity="error" className={classes.alert}>
    60          <AlertTitle>Error</AlertTitle>
    61          {props.groupsError}
    62        </Alert>
    63      );
    64    }
    65    if (props.groups.length === 0) {
    66      return (
    67        <Alert severity="info" className={classes.alert}>
    68          <AlertTitle>Info</AlertTitle>
    69          No aggregating tasks at this time.
    70        </Alert>
    71      );
    72    }
    73  
    74    return (
    75      <div>
    76        <div className={classes.groupSelector}>
    77          <GroupSelect
    78            selected={selectedGroup}
    79            onSelect={setSelectedGroup}
    80            groups={props.groups}
    81            error={props.groupsError}
    82          />
    83        </div>
    84        {selectedGroup !== null ? (
    85          <AggregatingTasksTable
    86            queue={props.queue}
    87            totalTaskCount={selectedGroup.size}
    88            selectedGroup={selectedGroup.group}
    89          />
    90        ) : (
    91          <Alert severity="info" className={classes.alert}>
    92            <AlertTitle>Info</AlertTitle>
    93            <div>Please select group</div>
    94          </Alert>
    95        )}
    96      </div>
    97    );
    98  }
    99  
   100  export default connector(AggregatingTasksTableContainer);