feat: initial Proof of Concept UI (#1)
* initial dashboard layout * add node status card * add accounting section, pull peer data * add file functionality with bee-js, first iteration of accounts page * Add balances and chequebook table * add blockie / identicon for addresses * add basic settlements table * implement theme overrides * cleanup logging * Add troubleshooting block * add initial dark theme support, add copy to clipboard, QR code support * show active element on sidebar * remove duplicate status page and make status page index * Update package.json Co-authored-by: Vojtech Simetka <vojtech@simetka.cz> * Update public/index.html Co-authored-by: Vojtech Simetka <vojtech@simetka.cz> * Update src/pages/accounting/AccountCard.tsx Co-authored-by: Vojtech Simetka <vojtech@simetka.cz> * change bee api client to use beeJS library * add initial setup workflow * breakout ethereum address component, define initial setup workflow * add types to responses, add additional node troubleshooting info to workflow * make setup steps nonlinear and interactive * make host endpoint dynamic on setup * split out api calls into custom hooks, add component loading indicators * add depost / withdrawl functionality, show transactions in BZZ * add multiOS code support troubleshooting, check for balance in chequebook on setup * add ability to change apis in settings page * show file loading status * Style active sidebar item * reload on theme change * modify troubleshooting verbage, add cashout functionality and details, * facilitate file upload with beeJS * update readme to show UI samples * remove nnPeersWatermark from peers page * split node steps into separate components, make status page visible at anytime * minor UI/UX enhancements * format accounting page * remove WIP wallet connection code * Update src/components/CashoutModal.tsx Co-authored-by: Vojtech Simetka <vojtech@simetka.cz> * use bigint for deposits/withdrawls * revise status card * clean up unused imports and variables * add api status to sidebar * obfuscate pages with troubleshooting component when apis not connected * add localhost OS detection for troubleshooting code * cleanup extra logos * monospace BZZ in tables * hide troubleshooting page while loading API status * Remove ability to remove peers * add null types to API responses Co-authored-by: Vojtech Simetka <vojtech@simetka.cz>
This commit is contained in:
matmertz25
GitHub
@@ -0,0 +1,97 @@
|
||||
import React, { useState } from 'react';
|
||||
import { makeStyles } from '@material-ui/core/styles';
|
||||
import { Table, TableBody, TableCell, TableContainer, TableRow, TableHead, Button, Paper, Tooltip, Container, CircularProgress } from '@material-ui/core';
|
||||
import { Cancel, Autorenew } from '@material-ui/icons';
|
||||
|
||||
import { beeDebugApi } from '../../services/bee';
|
||||
|
||||
const useStyles = makeStyles({
|
||||
table: {
|
||||
minWidth: 650,
|
||||
},
|
||||
});
|
||||
|
||||
|
||||
function PeerTable(props: any) {
|
||||
const classes = useStyles();
|
||||
|
||||
const [peerLatency, setPeerLatency] = useState([{ peerId: '', rtt: '', loading: false }]);
|
||||
const [removingPeer, setRemovingPeer] = useState(false);
|
||||
|
||||
const PingPeer = async (peerId: string) => {
|
||||
|
||||
setPeerLatency([...peerLatency, { peerId: peerId, rtt: '', loading: true }])
|
||||
beeDebugApi.connectivity.ping(peerId)
|
||||
.then(res => {
|
||||
setPeerLatency([...peerLatency, { peerId: peerId, rtt: res.data.rtt, loading: false }])
|
||||
})
|
||||
.catch(error => {
|
||||
setPeerLatency([...peerLatency, { peerId: peerId, rtt: 'error', loading: false }])
|
||||
})
|
||||
}
|
||||
|
||||
const removePeer = (peerId: string) => {
|
||||
setRemovingPeer(true)
|
||||
beeDebugApi.connectivity.removePeer(peerId)
|
||||
.then(res => {
|
||||
window.location.reload()
|
||||
setRemovingPeer(false)
|
||||
})
|
||||
.catch(error => {
|
||||
console.log(error)
|
||||
})
|
||||
.finally(() => {
|
||||
setRemovingPeer(false)
|
||||
})
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
{props.loading ?
|
||||
<Container style={{textAlign:'center', padding:'50px'}}>
|
||||
<CircularProgress />
|
||||
</Container>
|
||||
:
|
||||
<TableContainer component={Paper}>
|
||||
<Table className={classes.table} aria-label="simple table">
|
||||
<TableHead>
|
||||
<TableRow>
|
||||
<TableCell>Index</TableCell>
|
||||
<TableCell>Peer Id</TableCell>
|
||||
<TableCell align="right">Actions</TableCell>
|
||||
</TableRow>
|
||||
</TableHead>
|
||||
<TableBody>
|
||||
{props.nodePeers.peers.map((peer: any, 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)} >
|
||||
{peerLatency.find(item => item.peerId === peer.address) ?
|
||||
peerLatency.filter(item => item.peerId === peer.address)[0].loading ? <CircularProgress size={20} /> :
|
||||
peerLatency.filter(item => item.peerId === peer.address)[0].rtt :
|
||||
<Autorenew />}
|
||||
</Button>
|
||||
</Tooltip>
|
||||
|
||||
{/* <Tooltip title="Remove peer">
|
||||
<Button color="primary" onClick={() => removePeer(peer.address)} >
|
||||
<Cancel />
|
||||
</Button>
|
||||
</Tooltip> */}
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</TableContainer>
|
||||
}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default PeerTable
|
||||
@@ -0,0 +1,59 @@
|
||||
import React from 'react'
|
||||
|
||||
import { Grid, Container, CircularProgress } from '@material-ui/core/';
|
||||
|
||||
import StatCard from '../../components/StatCard';
|
||||
import PeerTable from './PeerTable';
|
||||
import TroubleshootConnectionCard from '../../components/TroubleshootConnectionCard';
|
||||
|
||||
import { useApiNodeTopology, useApiNodePeers } from '../../hooks/apiHooks';
|
||||
|
||||
export default function Peers(props: any) {
|
||||
const { nodeTopology, isLoadingNodeTopology } = useApiNodeTopology()
|
||||
const { nodePeers, isLoadingNodePeers } = useApiNodePeers()
|
||||
|
||||
return (
|
||||
<div>
|
||||
{props.nodeHealth?.status === 'ok' && props.health ?
|
||||
<div>
|
||||
<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={nodeTopology.connected.toString()}
|
||||
loading={isLoadingNodeTopology}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid key={2} item xs={12} sm={12} md={6} lg={4} xl={4}>
|
||||
<StatCard
|
||||
label='Population'
|
||||
statistic={nodeTopology.population.toString()}
|
||||
loading={isLoadingNodeTopology}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid key={3} item xs={12} sm={12} md={6} lg={4} xl={4}>
|
||||
<StatCard
|
||||
label='Depth'
|
||||
statistic={nodeTopology.depth.toString()}
|
||||
loading={isLoadingNodeTopology}
|
||||
/>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Grid>
|
||||
<PeerTable
|
||||
nodePeers={nodePeers}
|
||||
loading={isLoadingNodePeers}
|
||||
/>
|
||||
</div>
|
||||
:
|
||||
props.isLoadingHealth || props.isLoadingNodeHealth ?
|
||||
<Container style={{textAlign:'center', padding:'50px'}}>
|
||||
<CircularProgress />
|
||||
</Container>
|
||||
:
|
||||
<TroubleshootConnectionCard />
|
||||
}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user