woggioni/bee-dashboard
1
0
Fork 0
Code Actions Packages Releases Activity

feat: troubleshooting component (#204)

Browse Source 
* feat: troubleshooting component and general layout improvements

* style: background color, links and button

* chore: disable ripples and rounded corners on buttons

* fix: spacing on the troubleshooting card
This commit is contained in:
Vojtech Simetka
2021-09-13 12:25:01 +02:00
committed by GitHub
parent cda1d4bbb1
commit c4c1573263
7 changed files with 230 additions and 158 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/SideBar.tsx
+11 -1
View File
@@ -44,6 +44,8 @@ const navBarItems = [
},
]
const drawerWidth = 300
const useStyles = makeStyles((theme: Theme) =>
createStyles({
root: {
@@ -52,6 +54,14 @@ const useStyles = makeStyles((theme: Theme) =>
paddingTop: theme.spacing(8),
paddingBottom: theme.spacing(8),
},
drawer: {
width: drawerWidth,
flexShrink: 0,
},
drawerPaper: {
width: drawerWidth,
backgroundColor: '#212121',
},
logo: {
marginLeft: theme.spacing(8),
marginRight: theme.spacing(8),
@@ -86,7 +96,7 @@ export default function SideBar(): ReactElement {
const classes = useStyles()
return (
<Drawer variant="permanent">
<Drawer className={classes.drawer} variant="permanent" anchor="left" classes={{ paper: classes.drawerPaper }}>
<Grid container direction="column" justifyContent="space-between" className={classes.root}>
<Grid className={classes.logo}>
<Link to={ROUTES.INFO}>
src/components/TopologyStats.tsx
+17 -19
View File
@@ -40,25 +40,23 @@ const Indicator = ({ thresholds }: Props): ReactElement => {
}
const Metrics = ({ topology, thresholds }: Props): ReactElement => (
<Grid style={{ marginBottom: '20px', flexGrow: 1 }}>
<Grid container spacing={3}>
<Grid key={1} item xs={12} sm={12} md={6} lg={4} xl={4}>
<StatCard
label="Connected Peers"
statistic={topology?.connected.toString()}
tooltip={thresholds.connectedPeers.explanation}
/>
</Grid>
<Grid key={2} item xs={12} sm={12} md={6} lg={4} xl={4}>
<StatCard
label="Population"
statistic={topology?.population.toString()}
tooltip={thresholds.population.explanation}
/>
</Grid>
<Grid key={3} item xs={12} sm={12} md={6} lg={4} xl={4}>
<StatCard label="Depth" statistic={topology?.depth.toString()} tooltip={thresholds.depth.explanation} />
</Grid>
<Grid container spacing={3} style={{ marginBottom: '20px' }}>
<Grid key={1} item xs={12} sm={12} md={6} lg={4} xl={4}>
<StatCard
label="Connected Peers"
statistic={topology?.connected.toString()}
tooltip={thresholds.connectedPeers.explanation}
/>
</Grid>
<Grid key={2} item xs={12} sm={12} md={6} lg={4} xl={4}>
<StatCard
label="Population"
statistic={topology?.population.toString()}
tooltip={thresholds.population.explanation}
/>
</Grid>
<Grid key={3} item xs={12} sm={12} md={6} lg={4} xl={4}>
<StatCard label="Depth" statistic={topology?.depth.toString()} tooltip={thresholds.depth.explanation} />
</Grid>
</Grid>
)
src/components/TroubleshootConnectionCard.tsx
+52 -35
View File
@@ -1,48 +1,65 @@
import type { ReactElement } from 'react'
import { Link } from 'react-router-dom'
import { makeStyles } from '@material-ui/core/styles'
import { Card, CardContent, Typography } from '@material-ui/core/'
import { createStyles, makeStyles, Theme } from '@material-ui/core/styles'
import { Button, Grid, Typography, Link as MuiLink } from '@material-ui/core/'
import { ROUTES } from '../routes'
import { Activity } from 'react-feather'
const useStyles = makeStyles({
root: {
flexGrow: 1,
marginTop: '20px',
},
title: {
textAlign: 'center',
fontSize: 26,
},
})
const useStyles = makeStyles((theme: Theme) =>
createStyles({
root: {
height: '100%',
},
content: {
maxWidth: 500,
marginBottom: theme.spacing(4),
'&:last-child': {
marginBottom: 0,
},
},
icon: {
height: '1rem',
},
}),
)
export default function TroubleshootConnectionCard(): ReactElement {
const classes = useStyles()
return (
<Card className={classes.root}>
<CardContent>
<Typography className={classes.title} gutterBottom>
Looks like your node is not connected
<Grid container direction="column" justifyContent="center" alignItems="center" className={classes.root}>
<Grid item className={classes.content}>
<Typography variant="h1" align="center">
Uh oh, it looks like your node is not connected.
</Typography>
<div style={{ marginBottom: '20px', textAlign: 'center' }}>
<strong>
<Link to={ROUTES.STATUS}>Click to run status checks</Link> on your nodes connection or check out the{' '}
<a href={process.env.REACT_APP_BEE_DOCS_HOST} target="_blank" rel="noreferrer">
Swarm Bee Docs
</a>
</strong>
</div>
<div style={{ marginBottom: '20px', textAlign: 'center' }}>
<p style={{ marginTop: '50px' }}>
Still not working? Drop us a message on the Ethereum Swarm{' '}
<a href={process.env.REACT_APP_BEE_DISCORD_HOST} target="_blank" rel="noreferrer">
Discord
</a>
</p>
</div>
</CardContent>
</Card>
</Grid>
<Grid item className={classes.content}>
<Typography align="center">
Please check your node status to fix the problem. You can also check out the{' '}
<MuiLink href={process.env.REACT_APP_BEE_DOCS_HOST} target="_blank" rel="noreferrer">
Swarm Bee Docs
</MuiLink>{' '}
or ask for support on the{' '}
<MuiLink href={process.env.REACT_APP_BEE_DISCORD_HOST} target="_blank" rel="noreferrer">
Ethereum Swarm Discord
</MuiLink>
.
</Typography>
</Grid>
<Grid item className={classes.content}>
<Typography align="center">
<Button
component={Link}
variant="contained"
size="large"
startIcon={<Activity className={classes.icon} />}
to={ROUTES.STATUS}
>
Check node status
</Button>
</Typography>
</Grid>
</Grid>
)
}