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

feat: status page redesign (#214)

Browse Source 
* feat: initial rewrite without status indicators

* feat: status icon as a component and add to the node setup

* feat: added input list item component

* feat: improved the topology status info

* fix: disabled state of the buttons

* chore: removed unused components

* chore: remove debug console log

* fix: deposit modal helper text
This commit is contained in:
Vojtech Simetka
2021-10-06 18:38:54 +02:00
committed by GitHub
parent ecbc116475
commit b666cd2657
20 changed files with 453 additions and 636 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/status/SetupSteps/PeerConnection.tsx
+24 -38
View File
@@ -1,43 +1,29 @@
import type { ReactElement } from 'react'
import { Typography } from '@material-ui/core/'
import { ReactElement, useContext } from 'react'
import ExpandableList from '../../../components/ExpandableList'
import ExpandableListItemNote from '../../../components/ExpandableListItemNote'
import TopologyStats from '../../../components/TopologyStats'
import StatusIcon from '../../../components/StatusIcon'
import { Context } from '../../../providers/Bee'
type Props = StatusTopologyHook
export default function PeerConnection({ isOk, topology }: Props): ReactElement | null {
const peers = (
<div style={{ display: 'flex', marginTop: '15px' }}>
<div style={{ marginRight: '30px' }}>
<Typography component="div" variant="subtitle1" gutterBottom color="textSecondary">
<span>Connected Peers</span>
</Typography>
<Typography component="h2" variant="h5">
{topology?.connected ? topology.connected : '-'}
</Typography>
</div>
<div>
<Typography component="div" variant="subtitle1" gutterBottom color="textSecondary">
<span>Discovered Nodes</span>
</Typography>
<Typography component="h2" variant="h5">
{topology?.population ? topology.population : '-'}
</Typography>
</div>
</div>
)
if (isOk) {
return (
<>
<span>You are connected to peers!</span>
{peers}
</>
)
}
export default function PeerConnection(): ReactElement | null {
const { status, isLoading, topology } = useContext(Context)
const isOk = status.topology
return (
<>
<span>Your node is not connected to any peers</span>
{peers}
</>
<ExpandableList
label={
<>
<StatusIcon isOk={isOk} isLoading={isLoading} /> Connection to Peers
</>
}
>
<ExpandableListItemNote>
{isOk
? 'You are connected to other Bee nodes'
: 'Your node is not connected to any peers. Please wait a bit if you just started the node, otherwise review your configuration file.'}
</ExpandableListItemNote>
<TopologyStats topology={topology} />
</ExpandableList>
)
}