feat: reviewed and simplified the node status check (#63)
* refactor: status page nested ternary logic * refactor: move the fetch latest bee release to a hook * refactor: solved node status rerendering, improved performance and clarity * refactor: step components now use unified hooks interface * style: removed component margins, layout should be handled by pages
This commit is contained in:
Vojtech Simetka
GitHub
+56
-124
@@ -1,143 +1,75 @@
|
||||
import { useState, useEffect, ReactElement } from 'react'
|
||||
import axios from 'axios'
|
||||
import { ReactElement } from 'react'
|
||||
import { Container, CircularProgress } from '@material-ui/core'
|
||||
import { makeStyles, Theme, createStyles } from '@material-ui/core/styles'
|
||||
|
||||
import NodeSetupWorkflow from './NodeSetupWorkflow'
|
||||
import StatusCard from './StatusCard'
|
||||
import EthereumAddressCard from '../../components/EthereumAddressCard'
|
||||
import {
|
||||
useApiHealth,
|
||||
useDebugApiHealth,
|
||||
useApiNodeAddresses,
|
||||
useApiChequebookAddress,
|
||||
useApiNodeTopology,
|
||||
useApiChequebookBalance,
|
||||
} from '../../hooks/apiHooks'
|
||||
useStatusEthereumConnection,
|
||||
useStatusNodeVersion,
|
||||
useStatusDebugConnection,
|
||||
useStatusConnection,
|
||||
useStatusTopology,
|
||||
useStatusChequebook,
|
||||
} from '../../hooks/status'
|
||||
|
||||
const useStyles = makeStyles((theme: Theme) =>
|
||||
createStyles({
|
||||
root: {
|
||||
width: '100%',
|
||||
display: 'grid',
|
||||
rowGap: theme.spacing(3),
|
||||
},
|
||||
}),
|
||||
)
|
||||
|
||||
export default function Status(): ReactElement {
|
||||
const [beeRelease, setBeeRelease] = useState<LatestBeeRelease | null>(null)
|
||||
const [isLoadingBeeRelease, setIsLoadingBeeRelease] = useState<boolean>(false)
|
||||
const classes = useStyles()
|
||||
|
||||
const [apiHost, setApiHost] = useState('')
|
||||
const [debugApiHost, setDebugApiHost] = useState('')
|
||||
const nodeVersion = useStatusNodeVersion()
|
||||
const ethereumConnection = useStatusEthereumConnection()
|
||||
const debugApiConnection = useStatusDebugConnection()
|
||||
const apiConnection = useStatusConnection()
|
||||
const topology = useStatusTopology()
|
||||
const chequebook = useStatusChequebook()
|
||||
|
||||
const [statusChecksVisible, setStatusChecksVisible] = useState<boolean>(false)
|
||||
const checks = [nodeVersion, ethereumConnection, debugApiConnection, apiConnection, topology, chequebook]
|
||||
|
||||
const { health, isLoadingHealth } = useApiHealth()
|
||||
const { nodeHealth, isLoadingNodeHealth } = useDebugApiHealth()
|
||||
const { nodeAddresses, isLoadingNodeAddresses } = useApiNodeAddresses()
|
||||
const { chequebookAddress, isLoadingChequebookAddress } = useApiChequebookAddress()
|
||||
const { topology: nodeTopology, isLoading: isLoadingNodeTopology } = useApiNodeTopology()
|
||||
const { chequebookBalance, isLoadingChequebookBalance } = useApiChequebookBalance()
|
||||
|
||||
const fetchLatestBeeRelease = () => {
|
||||
setIsLoadingBeeRelease(true)
|
||||
axios
|
||||
.get(`${process.env.REACT_APP_BEE_GITHUB_REPO_URL}/releases/latest`)
|
||||
.then(res => {
|
||||
setBeeRelease(res.data)
|
||||
})
|
||||
.catch(() => {
|
||||
// FIXME: should do something about the error
|
||||
})
|
||||
.finally(() => {
|
||||
setIsLoadingBeeRelease(false)
|
||||
})
|
||||
// If any check data are still loading
|
||||
if (!checks.every(c => !c.isLoading)) {
|
||||
return (
|
||||
<Container style={{ textAlign: 'center', padding: '50px' }}>
|
||||
<CircularProgress />
|
||||
</Container>
|
||||
)
|
||||
}
|
||||
|
||||
const fetchApiHost = () => {
|
||||
let apiHost
|
||||
|
||||
if (sessionStorage.getItem('api_host')) {
|
||||
apiHost = String(sessionStorage.getItem('api_host') || '')
|
||||
} else {
|
||||
apiHost = String(process.env.REACT_APP_BEE_HOST)
|
||||
}
|
||||
setApiHost(apiHost)
|
||||
}
|
||||
|
||||
const fetchDebugApiHost = () => {
|
||||
let debugApiHost
|
||||
|
||||
if (sessionStorage.getItem('debug_api_host')) {
|
||||
debugApiHost = String(sessionStorage.getItem('debug_api_host') || '')
|
||||
} else {
|
||||
debugApiHost = String(process.env.REACT_APP_BEE_DEBUG_HOST)
|
||||
}
|
||||
setDebugApiHost(debugApiHost)
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
fetchApiHost()
|
||||
fetchDebugApiHost()
|
||||
fetchLatestBeeRelease()
|
||||
}, [])
|
||||
|
||||
// FIXME: this should be broken up
|
||||
/* eslint-disable no-nested-ternary */
|
||||
return (
|
||||
<div>
|
||||
{nodeHealth?.status === 'ok' &&
|
||||
health &&
|
||||
beeRelease &&
|
||||
beeRelease.name === `v${nodeHealth?.version?.split('-')[0]}` &&
|
||||
nodeAddresses?.ethereum &&
|
||||
chequebookAddress?.chequebookaddress &&
|
||||
chequebookBalance &&
|
||||
chequebookBalance?.totalBalance > 0 &&
|
||||
nodeTopology?.connected &&
|
||||
nodeTopology?.connected > 0 &&
|
||||
!statusChecksVisible ? (
|
||||
<div>
|
||||
<StatusCard
|
||||
nodeHealth={nodeHealth}
|
||||
loadingNodeHealth={isLoadingNodeHealth}
|
||||
beeRelease={beeRelease}
|
||||
loadingBeeRelease={isLoadingBeeRelease}
|
||||
nodeAddresses={nodeAddresses}
|
||||
loadingNodeTopology={isLoadingNodeTopology}
|
||||
nodeTopology={nodeTopology}
|
||||
setStatusChecksVisible={setStatusChecksVisible}
|
||||
/>
|
||||
<EthereumAddressCard
|
||||
nodeAddresses={nodeAddresses}
|
||||
isLoadingNodeAddresses={isLoadingNodeAddresses}
|
||||
chequebookAddress={chequebookAddress}
|
||||
isLoadingChequebookAddress={isLoadingChequebookAddress}
|
||||
/>
|
||||
</div>
|
||||
) : isLoadingNodeHealth ||
|
||||
isLoadingHealth ||
|
||||
isLoadingChequebookAddress ||
|
||||
isLoadingNodeTopology ||
|
||||
isLoadingBeeRelease ||
|
||||
isLoadingNodeAddresses ||
|
||||
isLoadingBeeRelease ||
|
||||
isLoadingChequebookBalance ? (
|
||||
<Container style={{ textAlign: 'center', padding: '50px' }}>
|
||||
<CircularProgress />
|
||||
</Container>
|
||||
) : (
|
||||
<NodeSetupWorkflow
|
||||
beeRelease={beeRelease}
|
||||
isLoadingBeeRelease={isLoadingBeeRelease}
|
||||
nodeHealth={nodeHealth}
|
||||
isLoadingNodeHealth={isLoadingNodeHealth}
|
||||
nodeAddresses={nodeAddresses}
|
||||
isLoadingNodeAddresses={isLoadingNodeAddresses}
|
||||
nodeTopology={nodeTopology}
|
||||
isLoadingNodeTopology={isLoadingNodeTopology}
|
||||
nodeApiHealth={health}
|
||||
isLoadingHealth={isLoadingHealth}
|
||||
chequebookAddress={chequebookAddress}
|
||||
isLoadingChequebookAddress={isLoadingChequebookAddress}
|
||||
chequebookBalance={chequebookBalance}
|
||||
isLoadingChequebookBalance={isLoadingChequebookBalance}
|
||||
apiHost={apiHost}
|
||||
debugApiHost={debugApiHost}
|
||||
setStatusChecksVisible={setStatusChecksVisible}
|
||||
<div className={classes.root}>
|
||||
<StatusCard
|
||||
userBeeVersion={nodeVersion.userVersion}
|
||||
latestBeeVersion={nodeVersion.latestVersion}
|
||||
isOk={checks.every(c => c.isOk)}
|
||||
nodeTopology={topology.topology}
|
||||
nodeAddresses={ethereumConnection.nodeAddresses}
|
||||
/>
|
||||
{ethereumConnection.nodeAddresses && chequebook.chequebookAddress && (
|
||||
<EthereumAddressCard
|
||||
nodeAddresses={ethereumConnection.nodeAddresses}
|
||||
isLoadingNodeAddresses={ethereumConnection.isLoading}
|
||||
chequebookAddress={chequebook.chequebookAddress}
|
||||
isLoadingChequebookAddress={chequebook.isLoading}
|
||||
/>
|
||||
)}
|
||||
<NodeSetupWorkflow
|
||||
nodeVersion={nodeVersion}
|
||||
ethereumConnection={ethereumConnection}
|
||||
debugApiConnection={debugApiConnection}
|
||||
apiConnection={apiConnection}
|
||||
topology={topology}
|
||||
chequebook={chequebook}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user