github.com/wfusion/gofusion@v1.1.14/common/infra/asynq/asynqmon/ui/src/views/TasksView.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 Container from "@material-ui/core/Container";
     5  import Grid from "@material-ui/core/Grid";
     6  import TasksTableContainer from "../components/TasksTableContainer";
     7  import QueueInfoBanner from "../components/QueueInfoBanner";
     8  import QueueBreadCrumb from "../components/QueueBreadcrumb";
     9  import { useParams } from "react-router-dom";
    10  import { listQueuesAsync } from "../actions/queuesActions";
    11  import { AppState } from "../store";
    12  import { QueueDetailsRouteParams } from "../paths";
    13  import { useQuery } from "../hooks";
    14  
    15  function mapStateToProps(state: AppState) {
    16    return {
    17      queues: state.queues.data.map((q) => q.name),
    18    };
    19  }
    20  
    21  const connector = connect(mapStateToProps, { listQueuesAsync });
    22  
    23  const useStyles = makeStyles((theme) => ({
    24    container: {
    25      paddingTop: theme.spacing(2),
    26    },
    27    breadcrumbs: {
    28      marginBottom: theme.spacing(2),
    29    },
    30    banner: {
    31      marginBottom: theme.spacing(2),
    32    },
    33    tasksTable: {
    34      marginBottom: theme.spacing(4),
    35    },
    36  }));
    37  
    38  const validStatus = [
    39    "active",
    40    "pending",
    41    "aggregating",
    42    "scheduled",
    43    "retry",
    44    "archived",
    45    "completed",
    46  ];
    47  const defaultStatus = "active";
    48  
    49  function TasksView(props: ConnectedProps<typeof connector>) {
    50    const classes = useStyles();
    51    const { qname } = useParams<QueueDetailsRouteParams>();
    52    const query = useQuery();
    53    let selected = query.get("status");
    54    if (!selected || !validStatus.includes(selected)) {
    55      selected = defaultStatus;
    56    }
    57    const { listQueuesAsync } = props;
    58  
    59    useEffect(() => {
    60      listQueuesAsync();
    61    }, [listQueuesAsync]);
    62  
    63    return (
    64      <Container maxWidth="lg">
    65        <Grid container spacing={0} className={classes.container}>
    66          <Grid item xs={12} className={classes.breadcrumbs}>
    67            <QueueBreadCrumb queues={props.queues} queueName={qname} />
    68          </Grid>
    69          <Grid item xs={12} className={classes.banner}>
    70            <QueueInfoBanner qname={qname} />
    71          </Grid>
    72          <Grid item xs={12} className={classes.tasksTable}>
    73            <TasksTableContainer queue={qname} selected={selected} />
    74          </Grid>
    75        </Grid>
    76      </Container>
    77    );
    78  }
    79  
    80  export default connector(TasksView);