diff --git a/src/components/StatCard.tsx b/src/components/StatCard.tsx index 8a72db5..760510c 100644 --- a/src/components/StatCard.tsx +++ b/src/components/StatCard.tsx @@ -17,31 +17,35 @@ const useStyles = makeStyles({ }); interface IProps { - label: string, - statistic: string, - loading?: boolean, + label: string + statistic?: string + loading?: boolean } -export default function StatCard(props: IProps) { +export default function StatCard({loading, label, statistic}: IProps) { const classes = useStyles(); + return ( - {props.loading ? -
+ {loading && ( + <> -
- : -
+ + ) + } + {!loading && ( + <> - {props.label} + {label} - {props.statistic} + {statistic} -
+ + ) } diff --git a/src/components/TopologyStats.tsx b/src/components/TopologyStats.tsx new file mode 100644 index 0000000..c3ccec2 --- /dev/null +++ b/src/components/TopologyStats.tsx @@ -0,0 +1,39 @@ +import type { Topology } from '@ethersphere/bee-js'; +import { Grid } from '@material-ui/core/'; +import StatCard from './StatCard'; + +interface Props { + isLoading: boolean + topology: Topology | null + error: Error | null // FIXME: should display error +} + +const TopologyStats = ({isLoading, topology, error}: Props) => ( + + + + + + + + + + + + + +) + +export default TopologyStats diff --git a/src/hooks/apiHooks.tsx b/src/hooks/apiHooks.tsx index 245d0aa..49f39e4 100644 --- a/src/hooks/apiHooks.tsx +++ b/src/hooks/apiHooks.tsx @@ -1,7 +1,7 @@ import { useState, useEffect } from "react"; import type { NodeAddresses, ChequebookAddressResponse, ChequebookBalanceResponse, BalanceResponse, - LastChequesResponse, AllSettlements, LastCashoutActionResponse, Health, Peer } from '@ethersphere/bee-js' + LastChequesResponse, AllSettlements, LastCashoutActionResponse, Health, Peer, Topology } from '@ethersphere/bee-js' import { beeDebugApi, beeApi } from '../services/bee'; @@ -72,15 +72,15 @@ export const useApiNodeAddresses = () => { } export const useApiNodeTopology = () => { - const [nodeTopology, setNodeTopology] = useState({ baseAddr: '', bins: [""], connected: 0, depth: 0, nnLowWatermark: 0, population: 0, timestamp: ''}) - const [isLoadingNodeTopology, setLoading] = useState(false) + const [topology, setNodeTopology] = useState(null) + const [isLoading, setLoading] = useState(false) const [error, setError] = useState(null) useEffect(() => { setLoading(true) beeDebugApi.connectivity.topology() .then(res => { - setNodeTopology(res.data) + setNodeTopology(res) }) .catch(error => { setError(error) @@ -90,7 +90,7 @@ export const useApiNodeTopology = () => { }) }, []) - return { nodeTopology, isLoadingNodeTopology, error } ; + return { topology, isLoading, error } ; } export const useApiChequebookAddress = () => { diff --git a/src/pages/peers/index.tsx b/src/pages/peers/index.tsx index afb1a59..c1c2749 100644 --- a/src/pages/peers/index.tsx +++ b/src/pages/peers/index.tsx @@ -1,15 +1,12 @@ -import React from 'react' - -import { Grid, Container, CircularProgress } from '@material-ui/core/'; - -import StatCard from '../../components/StatCard'; +import { Container, CircularProgress } from '@material-ui/core/'; import PeerTable from './PeerTable'; import TroubleshootConnectionCard from '../../components/TroubleshootConnectionCard'; import { useApiNodeTopology, useApiNodePeers, useDebugApiHealth } from '../../hooks/apiHooks'; +import TopologyStats from '../../components/TopologyStats'; export default function Peers() { - const { nodeTopology, isLoadingNodeTopology } = useApiNodeTopology() + const topology = useApiNodeTopology() const debugHealth = useDebugApiHealth() const peers = useApiNodePeers() @@ -27,31 +24,7 @@ export default function Peers() { return ( <> - - - - - - - - - - - - - + ) diff --git a/src/pages/status/NodeSetupWorkflow.tsx b/src/pages/status/NodeSetupWorkflow.tsx index 7f612c6..2d8fa8d 100644 --- a/src/pages/status/NodeSetupWorkflow.tsx +++ b/src/pages/status/NodeSetupWorkflow.tsx @@ -98,7 +98,7 @@ export default function NodeSetupWorkflow(props: any) { setActiveStep(5) } - if (nodeTopology.connected && nodeTopology.connected > 0) { + if (nodeTopology?.connected && nodeTopology?.connected > 0) { handleComplete(5) setActiveStep(6) } diff --git a/src/pages/status/StatusCard.tsx b/src/pages/status/StatusCard.tsx index fa3e2dd..0e34625 100644 --- a/src/pages/status/StatusCard.tsx +++ b/src/pages/status/StatusCard.tsx @@ -5,7 +5,7 @@ import { Theme, createStyles, makeStyles } from '@material-ui/core/styles'; import { Card, CardContent, Typography, Chip, Button } from '@material-ui/core/'; import { CheckCircle, Error, ArrowRight, ArrowDropUp } from '@material-ui/icons/'; import { Skeleton } from '@material-ui/lab'; -import { Health } from '@ethersphere/bee-js'; +import type { Health, NodeAddresses, Topology } from '@ethersphere/bee-js'; const useStyles = makeStyles((theme: Theme) => createStyles({ @@ -28,32 +28,13 @@ const useStyles = makeStyles((theme: Theme) => }), ); -interface NodeAddresses { - overlay: string, - underlay: string[], - ethereum: string, - public_key: string, - pss_public_key: string -} - -interface NodeTopology { - baseAddr: string, - bins: string[], - connected: number, - depth: number, - nnLowWatermark: number, - population: number, - timestamp: string, -} - - interface IProps{ nodeHealth: Health, loadingNodeHealth: boolean, beeRelease: any, loadingBeeRelease: boolean, nodeAddresses: NodeAddresses, - nodeTopology: NodeTopology, + nodeTopology: Topology, loadingNodeTopology: boolean, setStatusChecksVisible: any, } diff --git a/src/pages/status/index.tsx b/src/pages/status/index.tsx index e2928af..12e6c44 100644 --- a/src/pages/status/index.tsx +++ b/src/pages/status/index.tsx @@ -20,7 +20,7 @@ export default function Status() { const { nodeHealth, isLoadingNodeHealth } = useDebugApiHealth() const { nodeAddresses, isLoadingNodeAddresses } = useApiNodeAddresses() const { chequebookAddress, isLoadingChequebookAddress } = useApiChequebookAddress() - const { nodeTopology, isLoadingNodeTopology } = useApiNodeTopology() + const { topology: nodeTopology, isLoading: isLoadingNodeTopology } = useApiNodeTopology() const { chequebookBalance, isLoadingChequebookBalance } = useApiChequebookBalance() @@ -74,7 +74,7 @@ export default function Status() { beeRelease.name === `v${nodeHealth?.version?.split('-')[0]}` && nodeAddresses?.ethereum && chequebookAddress?.chequebookaddress && chequebookBalance && chequebookBalance?.totalBalance > 0 && - nodeTopology.connected && nodeTopology.connected > 0 && + nodeTopology?.connected && nodeTopology?.connected > 0 && !statusChecksVisible ?