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
2021-04-09 15:09:17 +02:00
committed by GitHub
parent 5608b91966
commit 9e4e58f160
14 changed files with 656 additions and 764 deletions
@@ -1,100 +1,95 @@
import type { ReactElement } from 'react'
import { Typography, Accordion, AccordionSummary, AccordionDetails } from '@material-ui/core/'
import MuiAlert from '@material-ui/lab/Alert'
import { CheckCircle, Error, ExpandMoreSharp } from '@material-ui/icons/'
import { ExpandMoreSharp } from '@material-ui/icons/'
import ConnectToHost from '../../../components/ConnectToHost'
import CodeBlockTabs from '../../../components/CodeBlockTabs'
import type { Health } from '@ethersphere/bee-js'
import { debugApiHost } from '../../../constants'
interface Props {
nodeHealth: Health | null
debugApiHost: string
}
type Props = StatusHookCommon
export default function NodeConnectionCheck({ isLoading, isOk }: Props): ReactElement | null {
if (isLoading) return null
const changeDebugApiUrl = (
<div style={{ display: 'flex', marginTop: '25px', marginBottom: '25px' }}>
<span style={{ marginRight: '15px' }}>
Debug API (<Typography variant="button">{debugApiHost}</Typography>)
</span>
<ConnectToHost hostName={'debug_api_host'} defaultHost={debugApiHost} />
</div>
)
if (isOk) {
return changeDebugApiUrl
}
export default function NodeConnectionCheck(props: Props): ReactElement {
return (
<div>
<p>Connect to Bee Node Debug API</p>
{changeDebugApiUrl}
<div>
<div style={{ display: 'flex', marginBottom: '25px' }}>
{props.nodeHealth?.status === 'ok' ? (
<CheckCircle style={{ color: '#32c48d', marginRight: '7px', height: '18px' }} />
) : (
<Error style={{ color: '#c9201f', marginRight: '7px', height: '18px' }} />
)}
<span style={{ marginRight: '15px' }}>
Debug API (<Typography variant="button">{props.debugApiHost}</Typography>)
</span>
<ConnectToHost hostName={'debug_api_host'} defaultHost={props.debugApiHost} />
</div>
<div>
{props.nodeHealth?.status !== 'ok' ? (
<Typography component="div" variant="body2" gutterBottom style={{ margin: '15px' }}>
We cannot connect to your nodes debug API at{' '}
<Typography variant="button">{props.debugApiHost}</Typography>. Please check the following to troubleshoot
your issue.
<Accordion style={{ marginTop: '20px' }}>
<AccordionSummary expandIcon={<ExpandMoreSharp />} aria-controls="panel1a-content" id="panel1a-header">
<Typography>Troubleshoot</Typography>
</AccordionSummary>
<AccordionDetails>
<Typography component="div">
<ol>
<li>
Check the status of your node by running the below command to see if your node is running.
</li>
<CodeBlockTabs
showLineNumbers
linux={`sudo systemctl status bee`}
mac={`brew services status swarm-bee`}
/>
<li>
If your node is running, check your firewall settings to make sure that port 1635 (or your
custom specified port) is bound to localhost. If your node is not running try executing the
below command to start your bee node
</li>
<MuiAlert
style={{ marginTop: '10px', marginBottom: '10px' }}
elevation={6}
variant="filled"
severity="error"
>
Your debug node API should never be completely open to the internet. If you want to connect
remotely, make sure your firewall settings are set to only allow specific trusted IP addresses
and block all other ports. A simple google search for &quot;what is my ip&quot; will show you
your computers public IP address to allow.
</MuiAlert>
<CodeBlockTabs
showLineNumbers
linux={`sudo systemctl start bee`}
mac={`brew services start swarm-bee`}
/>
<li>Run the commands to validate your node is running and see the log output.</li>
<CodeBlockTabs
showLineNumbers
linux={`sudo systemctl status bee \njournalctl --lines=100 --follow --unit bee`}
mac={`brew services status swarm-bee \ntail -f /usr/local/var/log/swarm-bee/bee.log`}
/>
<li>
Lastly, check your nodes configuration settings to validate the debug API is enabled and the
Cross Origin Resource Sharing (CORS) setting is configured to allow your host. Config parameter{' '}
<strong>debug-api-enable</strong> must be set to <strong>true</strong> and{' '}
<strong>cors-allowed-origins</strong> must be set to your host domain or IP. If edits are made
to the configuration run the restart command below for changes to take effect.
</li>
<CodeBlockTabs
showLineNumbers
linux={`sudo vi /etc/bee/bee.yaml\nsudo systemctl restart bee`}
mac={`sudo vi /etc/bee/bee.yaml \nbrew services restart swarm-bee`}
/>
</ol>
</Typography>
</AccordionDetails>
</Accordion>
</Typography>
) : null}
</div>
<Typography component="div" variant="body2" gutterBottom style={{ margin: '15px' }}>
We cannot connect to your nodes debug API at <Typography variant="button">{debugApiHost}</Typography>. Please
check the following to troubleshoot your issue.
<Accordion style={{ marginTop: '20px' }}>
<AccordionSummary expandIcon={<ExpandMoreSharp />} aria-controls="panel1a-content" id="panel1a-header">
<Typography>Troubleshoot</Typography>
</AccordionSummary>
<AccordionDetails>
<Typography component="div">
<ol>
<li>Check the status of your node by running the below command to see if your node is running.</li>
<CodeBlockTabs
showLineNumbers
linux={`sudo systemctl status bee`}
mac={`brew services status swarm-bee`}
/>
<li>
If your node is running, check your firewall settings to make sure that port 1635 (or your custom
specified port) is bound to localhost. If your node is not running try executing the below command
to start your bee node
</li>
<MuiAlert
style={{ marginTop: '10px', marginBottom: '10px' }}
elevation={6}
variant="filled"
severity="error"
>
Your debug node API should never be completely open to the internet. If you want to connect
remotely, make sure your firewall settings are set to only allow specific trusted IP addresses and
block all other ports. A simple google search for &quot;what is my ip&quot; will show you your
computers public IP address to allow.
</MuiAlert>
<CodeBlockTabs
showLineNumbers
linux={`sudo systemctl start bee`}
mac={`brew services start swarm-bee`}
/>
<li>Run the commands to validate your node is running and see the log output.</li>
<CodeBlockTabs
showLineNumbers
linux={`sudo systemctl status bee \njournalctl --lines=100 --follow --unit bee`}
mac={`brew services status swarm-bee \ntail -f /usr/local/var/log/swarm-bee/bee.log`}
/>
<li>
Lastly, check your nodes configuration settings to validate the debug API is enabled and the Cross
Origin Resource Sharing (CORS) setting is configured to allow your host. Config parameter{' '}
<strong>debug-api-enable</strong> must be set to <strong>true</strong> and{' '}
<strong>cors-allowed-origins</strong> must be set to your host domain or IP. If edits are made to
the configuration run the restart command below for changes to take effect.
</li>
<CodeBlockTabs
showLineNumbers
linux={`sudo vi /etc/bee/bee.yaml\nsudo systemctl restart bee`}
mac={`sudo vi /etc/bee/bee.yaml \nbrew services restart swarm-bee`}
/>
</ol>
</Typography>
</AccordionDetails>
</Accordion>
</Typography>
</div>
</div>
)