feat: troubleshooting component (#204)
* 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:
@@ -59,36 +59,34 @@ function PeerTable(props: Props): ReactElement {
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
<TableContainer component={Paper}>
|
||||
<Table className={classes.table}>
|
||||
<TableHead>
|
||||
<TableRow>
|
||||
<TableCell>Index</TableCell>
|
||||
<TableCell>Peer Id</TableCell>
|
||||
<TableCell align="right">Actions</TableCell>
|
||||
<TableContainer component={Paper}>
|
||||
<Table className={classes.table}>
|
||||
<TableHead>
|
||||
<TableRow>
|
||||
<TableCell>Index</TableCell>
|
||||
<TableCell>Peer Id</TableCell>
|
||||
<TableCell align="right">Actions</TableCell>
|
||||
</TableRow>
|
||||
</TableHead>
|
||||
<TableBody>
|
||||
{props.peers?.map((peer: Peer, idx: number) => (
|
||||
<TableRow key={peer.address}>
|
||||
<TableCell component="th" scope="row">
|
||||
{idx + 1}
|
||||
</TableCell>
|
||||
<TableCell>{peer.address}</TableCell>
|
||||
<TableCell align="right">
|
||||
<Tooltip title="Ping node">
|
||||
<Button color="primary" onClick={() => pingPeer(peer.address)}>
|
||||
{getPingState(peerLatency, peer)}
|
||||
</Button>
|
||||
</Tooltip>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
</TableHead>
|
||||
<TableBody>
|
||||
{props.peers?.map((peer: Peer, idx: number) => (
|
||||
<TableRow key={peer.address}>
|
||||
<TableCell component="th" scope="row">
|
||||
{idx + 1}
|
||||
</TableCell>
|
||||
<TableCell>{peer.address}</TableCell>
|
||||
<TableCell align="right">
|
||||
<Tooltip title="Ping node">
|
||||
<Button color="primary" onClick={() => pingPeer(peer.address)}>
|
||||
{getPingState(peerLatency, peer)}
|
||||
</Button>
|
||||
</Tooltip>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</TableContainer>
|
||||
</div>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</TableContainer>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import React, { ReactElement, useState, useContext } from 'react'
|
||||
import { Paper, Container, TextField, Typography, Button } from '@material-ui/core'
|
||||
import { ReactElement, useState, useContext } from 'react'
|
||||
import { Paper, TextField, Typography, Button } from '@material-ui/core'
|
||||
import { Context as SettingsContext } from '../../providers/Settings'
|
||||
|
||||
export default function Settings(): ReactElement {
|
||||
@@ -16,55 +16,53 @@ export default function Settings(): ReactElement {
|
||||
const touched = host !== apiUrl || debugHost !== apiDebugUrl
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Container>
|
||||
<Typography variant="h4" gutterBottom>
|
||||
Settings
|
||||
</Typography>
|
||||
<Paper>
|
||||
<TextField
|
||||
label="API Endpoint"
|
||||
style={{ margin: 0 }}
|
||||
placeholder="ex: 127.0.0.0.1:1633"
|
||||
helperText="Enter node host override / port"
|
||||
fullWidth
|
||||
defaultValue={apiUrl}
|
||||
margin="normal"
|
||||
InputLabelProps={{
|
||||
shrink: true,
|
||||
}}
|
||||
onChange={e => {
|
||||
setHost(e.target.value)
|
||||
}}
|
||||
variant="filled"
|
||||
/>
|
||||
</Paper>
|
||||
<Paper style={{ marginTop: '20px' }}>
|
||||
<TextField
|
||||
label="Debug API Endpoint"
|
||||
style={{ margin: 0 }}
|
||||
placeholder="ex: 127.0.0.0.1:1635"
|
||||
helperText="Enter node debug host override / port"
|
||||
fullWidth
|
||||
defaultValue={apiDebugUrl}
|
||||
onChange={e => {
|
||||
setDebugHost(e.target.value)
|
||||
}}
|
||||
margin="normal"
|
||||
InputLabelProps={{
|
||||
shrink: true,
|
||||
}}
|
||||
variant="filled"
|
||||
/>
|
||||
</Paper>
|
||||
{touched ? (
|
||||
<div style={{ marginTop: '20px' }}>
|
||||
<Button variant="outlined" color="primary" onClick={submit}>
|
||||
Save
|
||||
</Button>
|
||||
</div>
|
||||
) : null}
|
||||
</Container>
|
||||
</div>
|
||||
<>
|
||||
<Typography variant="h4" gutterBottom>
|
||||
Settings
|
||||
</Typography>
|
||||
<Paper>
|
||||
<TextField
|
||||
label="API Endpoint"
|
||||
style={{ margin: 0 }}
|
||||
placeholder="ex: 127.0.0.0.1:1633"
|
||||
helperText="Enter node host override / port"
|
||||
fullWidth
|
||||
defaultValue={apiUrl}
|
||||
margin="normal"
|
||||
InputLabelProps={{
|
||||
shrink: true,
|
||||
}}
|
||||
onChange={e => {
|
||||
setHost(e.target.value)
|
||||
}}
|
||||
variant="filled"
|
||||
/>
|
||||
</Paper>
|
||||
<Paper style={{ marginTop: '20px' }}>
|
||||
<TextField
|
||||
label="Debug API Endpoint"
|
||||
style={{ margin: 0 }}
|
||||
placeholder="ex: 127.0.0.0.1:1635"
|
||||
helperText="Enter node debug host override / port"
|
||||
fullWidth
|
||||
defaultValue={apiDebugUrl}
|
||||
onChange={e => {
|
||||
setDebugHost(e.target.value)
|
||||
}}
|
||||
margin="normal"
|
||||
InputLabelProps={{
|
||||
shrink: true,
|
||||
}}
|
||||
variant="filled"
|
||||
/>
|
||||
</Paper>
|
||||
{touched ? (
|
||||
<div style={{ marginTop: '20px' }}>
|
||||
<Button variant="outlined" color="primary" onClick={submit}>
|
||||
Save
|
||||
</Button>
|
||||
</div>
|
||||
) : null}
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user