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

     1  import React from "react";
     2  import { connect, ConnectedProps } from "react-redux";
     3  import Container from "@material-ui/core/Container";
     4  import { makeStyles } from "@material-ui/core/styles";
     5  import Grid from "@material-ui/core/Grid";
     6  import Paper from "@material-ui/core/Paper";
     7  import Typography from "@material-ui/core/Typography";
     8  import Alert from "@material-ui/lab/Alert";
     9  import AlertTitle from "@material-ui/lab/AlertTitle";
    10  import ServersTable from "../components/ServersTable";
    11  import { listServersAsync } from "../actions/serversActions";
    12  import { AppState } from "../store";
    13  import { usePolling } from "../hooks";
    14  
    15  const useStyles = makeStyles((theme) => ({
    16    container: {
    17      paddingTop: theme.spacing(4),
    18      paddingBottom: theme.spacing(4),
    19    },
    20    paper: {
    21      padding: theme.spacing(2),
    22      display: "flex",
    23      overflow: "auto",
    24      flexDirection: "column",
    25    },
    26    heading: {
    27      paddingLeft: theme.spacing(2),
    28      marginBottom: theme.spacing(1),
    29    },
    30  }));
    31  
    32  function mapStateToProps(state: AppState) {
    33    return {
    34      loading: state.servers.loading,
    35      error: state.servers.error,
    36      servers: state.servers.data,
    37      pollInterval: state.settings.pollInterval,
    38    };
    39  }
    40  
    41  const connector = connect(mapStateToProps, { listServersAsync });
    42  
    43  type Props = ConnectedProps<typeof connector>;
    44  
    45  function ServersView(props: Props) {
    46    const { pollInterval, listServersAsync } = props;
    47    const classes = useStyles();
    48  
    49    usePolling(listServersAsync, pollInterval);
    50  
    51    return (
    52      <Container maxWidth="lg" className={classes.container}>
    53        <Grid container spacing={3}>
    54          {props.error === "" ? (
    55            <Grid item xs={12}>
    56              <Paper className={classes.paper} variant="outlined">
    57                <Typography variant="h6" className={classes.heading}>
    58                  Servers
    59                </Typography>
    60                <ServersTable servers={props.servers} />
    61              </Paper>
    62            </Grid>
    63          ) : (
    64            <Grid item xs={12}>
    65              <Alert severity="error">
    66                <AlertTitle>Error</AlertTitle>
    67                Could not retrieve servers live data —{" "}
    68                <strong>See the logs for details</strong>
    69              </Alert>
    70            </Grid>
    71          )}
    72        </Grid>
    73      </Container>
    74    );
    75  }
    76  
    77  export default connector(ServersView);