feat: separate info and status page (#183)

* feat: separate info and status page * chore: remove the detection of step to expand
2021-08-25 17:41:17 +02:00
parent 766fe96d1c
commit 02a7bff733
9 changed files with 306 additions and 353 deletions
@@ -0,0 +1,112 @@
+import { ReactElement, useState } from 'react'
+import { Link } from 'react-router-dom'
+
+import { createStyles, makeStyles } from '@material-ui/core/styles'
+import { Card, CardContent, Typography, Chip, Button } from '@material-ui/core/'
+import { ArrowRight, ArrowDropUp } from '@material-ui/icons/'
+import { NodeAddresses, Topology } from '@ethersphere/bee-js'
+
+const useStyles = makeStyles(() =>
+  createStyles({
+    root: {
+      display: 'flex',
+      flex: '1 1 auto',
+      flexDirection: 'column',
+    },
+    status: {
+      color: '#2145a0',
+      backgroundColor: '#e1effe',
+    },
+  }),
+)
+
+interface Props {
+  nodeAddresses: NodeAddresses | null
+  nodeTopology: Topology | null
+  userBeeVersion?: string
+  isLatestBeeVersion: boolean
+  isOk: boolean
+  latestUrl: string
+}
+
+function StatusCard({
+  userBeeVersion,
+  nodeAddresses,
+  nodeTopology,
+  isLatestBeeVersion,
+  latestUrl,
+}: Props): ReactElement | null {
+  const classes = useStyles()
+
+  const [underlayAddressesVisible, setUnderlayAddresessVisible] = useState<boolean>(false)
+
+  return (
+    <Card>
+      <CardContent className={classes.root}>
+        <>
+          <div style={{ marginBottom: '20px' }}>
+            <span style={{ marginRight: '20px' }}>Discovered Nodes: {nodeTopology?.population}</span>
+            <span style={{ marginRight: '20px' }}>
+              <span>Connected Peers: </span>
+              <Link to="/peers/">{nodeTopology?.connected}</Link>
+            </span>
+          </div>
+          <div>
+            <Typography component="div" variant="subtitle2" gutterBottom>
+              <span>AGENT: </span>
+              <a href="https://github.com/ethersphere/bee" rel="noreferrer" target="_blank">
+                Bee
+              </a>{' '}
+              <span>{userBeeVersion || '-'}</span>
+              {isLatestBeeVersion ? (
+                <Chip
+                  style={{ marginLeft: '7px', color: '#2145a0' }}
+                  size="small"
+                  label="latest"
+                  className={classes.status}
+                />
+              ) : (
+                <Button size="small" variant="outlined" href={latestUrl}>
+                  update
+                </Button>
+              )}
+            </Typography>
+            <Typography component="div" variant="subtitle2" gutterBottom>
+              <span>PUBLIC KEY: </span>
+              <span>{nodeAddresses?.publicKey ? nodeAddresses.publicKey : '-'}</span>
+            </Typography>
+            <Typography component="div" variant="subtitle2" gutterBottom>
+              <span>PSS PUBLIC KEY: </span>
+              <span>{nodeAddresses?.pssPublicKey ? nodeAddresses.pssPublicKey : '-'}</span>
+            </Typography>
+            <Typography component="div" variant="subtitle2" gutterBottom>
+              <span>OVERLAY ADDRESS (PEER ID): </span>
+              <span>{nodeAddresses?.overlay ? nodeAddresses.overlay : '-'}</span>
+            </Typography>
+            <Typography component="div" variant="subtitle2" gutterBottom>
+              <Typography component="div" onClick={() => setUnderlayAddresessVisible(!underlayAddressesVisible)}>
+                <Button color="primary" style={{ padding: 0, marginTop: '6px' }}>
+                  {underlayAddressesVisible ? (
+                    <ArrowDropUp style={{ fontSize: '12px' }} />
+                  ) : (
+                    <ArrowRight style={{ fontSize: '12px' }} />
+                  )}
+                  <span>Underlay Addresses</span>
+                </Button>
+              </Typography>
+              {underlayAddressesVisible && (
+                <div>
+                  {nodeAddresses?.underlay.map(item => (
+                    <li key={item}>{item}</li>
+                  ))}
+                </div>
+              )}
+            </Typography>
+          </div>
+        </>
+      </CardContent>
+    </Card>
+  )
+}
+
+export default StatusCard
@@ -0,0 +1,49 @@
+import { ReactElement, useContext } from 'react'
+import { makeStyles, Theme, createStyles } from '@material-ui/core/styles'
+
+import StatusCard from './StatusCard'
+import EthereumAddressCard from '../../components/EthereumAddressCard'
+import TroubleshootConnectionCard from '../../components/TroubleshootConnectionCard'
+import { Context as BeeContext } from '../../providers/Bee'
+
+const useStyles = makeStyles((theme: Theme) =>
+  createStyles({
+    root: {
+      width: '100%',
+      display: 'grid',
+      rowGap: theme.spacing(3),
+    },
+  }),
+)
+
+export default function Status(): ReactElement {
+  const classes = useStyles()
+
+  const {
+    status,
+    latestUserVersion,
+    isLatestBeeVersion,
+    latestBeeVersionUrl,
+    topology,
+    nodeAddresses,
+    chequebookAddress,
+  } = useContext(BeeContext)
+
+  if (!status.all) return <TroubleshootConnectionCard />
+
+  return (
+    <div className={classes.root}>
+      <StatusCard
+        userBeeVersion={latestUserVersion}
+        isLatestBeeVersion={isLatestBeeVersion}
+        isOk={status.all}
+        nodeTopology={topology}
+        latestUrl={latestBeeVersionUrl}
+        nodeAddresses={nodeAddresses}
+      />
+      {nodeAddresses && chequebookAddress && (
+        <EthereumAddressCard nodeAddresses={nodeAddresses} chequebookAddress={chequebookAddress} />
+      )}
+    </div>
+  )
+}