import React from 'react'; import { makeStyles } from '@material-ui/styles'; import { Grid } from '@material-ui/core'; import { useUser } from 'context'; import MuiAlert from '@material-ui/lab/Alert'; import { useParams } from "react-router-dom"; import { IssuesNewGraph, IssuesClosedGraph, IssuesActiveGraph, IssuesAgeGraph, IssuesResponseTimeGraph, IssuesResolutionDurationGraph, } from 'components'; const useStyles = makeStyles(theme => ({ root: { padding: theme.spacing(4) }, alertBar: { paddingBottom: theme.spacing(2) } })); const Issues = () => { const classes = useStyles(); const { repoid } = useParams(); const { user } = useUser(); return ( <div className={classes.root}> {user.repos[0] && user.repos[0].processed === false && <div className={classes.alertBar}> <MuiAlert elevation={1} severity="warning">Processing historical data, graphs will be available soon.</MuiAlert> </div> } <Grid container spacing={4} > <Grid item xl={6} lg={6} md={12} xs={12} > <IssuesNewGraph repoid={repoid}/> </Grid> <Grid item xl={6} lg={6} md={12} xs={12} > <IssuesClosedGraph repoid={repoid}/> </Grid> </Grid> <Grid container spacing={4} > <Grid item xl={6} lg={6} md={12} xs={12} > <IssuesActiveGraph repoid={repoid}/> </Grid> <Grid item xl={6} lg={6} md={12} xs={12} > <IssuesAgeGraph repoid={repoid}/> </Grid> </Grid> <Grid container spacing={4} > <Grid item xl={6} lg={6} md={12} xs={12} > <IssuesResponseTimeGraph repoid={repoid}/> </Grid> <Grid item xl={6} lg={6} md={12} xs={12} > <IssuesResolutionDurationGraph repoid={repoid}/> </Grid> </Grid> </div> ); }; export default Issues;