feat: add tooltips and health indicator to peers (#169)

* feat: add value thresholds and explanations to topology stats

* feat: extract title and row, refactor threshold, add tooltip, add overall health

* refactor: clean up code

* refactor: reword Node to Bee node

src/components/StatCard.tsx

@@ -1,28 +1,23 @@
-import type { ReactElement } from 'react'
-
-import { makeStyles } from '@material-ui/core/styles'
 import { Card, CardContent, Typography } from '@material-ui/core/'
+import { makeStyles } from '@material-ui/core/styles'
 import { Skeleton } from '@material-ui/lab'
+import type { ReactElement } from 'react'
+import { Title } from './Title'
 
 const useStyles = makeStyles({
   root: {
     minWidth: 275,
   },
-  title: {
-    fontSize: 16,
-  },
-  pos: {
-    marginBottom: 12,
-  },
 })
 
 interface Props {
   label: string
   statistic?: string
   loading?: boolean
+  tooltip?: string
 }
 
-export default function StatCard({ loading, label, statistic }: Props): ReactElement {
+export default function StatCard({ loading, label, statistic, tooltip }: Props): ReactElement {
   const classes = useStyles()
 
   return (
@@ -36,9 +31,7 @@ export default function StatCard({ loading, label, statistic }: Props): ReactEle
         )}
         {!loading && (
           <>
-            <Typography className={classes.title} color="textSecondary" gutterBottom>
-              {label}
-            </Typography>
+            <Title label={label} tooltip={tooltip} />
             <Typography variant="h5" component="h2">
               {statistic}
             </Typography>

src/components/Title.tsx

@@ -0,0 +1,41 @@
+import { Grid, Tooltip, Typography } from '@material-ui/core/'
+import { makeStyles } from '@material-ui/core/styles'
+import { Info } from '@material-ui/icons'
+import type { ReactElement } from 'react'
+
+interface TitleProps {
+  label: string
+  tooltip?: string
+}
+
+const useStyles = makeStyles({
+  title: {
+    fontSize: 16,
+  },
+})
+
+export function Title({ label, tooltip }: TitleProps): ReactElement {
+  const classes = useStyles()
+
+  if (!tooltip) {
+    return (
+      <Typography className={classes.title} color="textSecondary" gutterBottom>
+        {label}
+      </Typography>
+    )
+  }
+
+  // span is needed as Tooltip expects a non-functional element!
+  return (
+    <Tooltip title={tooltip}>
+      <span>
+        <Grid container direction="row" justify="space-between">
+          <Typography className={classes.title} color="textSecondary" gutterBottom>
+            {label}
+          </Typography>
+          <Info />
+        </Grid>
+      </span>
+    </Tooltip>
+  )
+}

src/components/TopologyStats.tsx

@@ -1,25 +1,72 @@
 import type { Topology } from '@ethersphere/bee-js'
 import { Grid } from '@material-ui/core/'
 import type { ReactElement } from 'react'
+import { pickThreshold, ThresholdValues } from '../utils/threshold'
 import StatCard from './StatCard'
 
-interface Props {
+interface RootProps {
   isLoading: boolean
   topology: Topology | null
   error: Error | null // FIXME: should display error
 }
 
-const TopologyStats = ({ isLoading, topology }: Props): ReactElement => (
+interface Props extends RootProps {
+  thresholds: ThresholdValues
+}
+
+const TopologyStats = (props: RootProps): ReactElement => {
+  const thresholds: ThresholdValues = {
+    connectedPeers: pickThreshold('connectedPeers', props.topology?.connected || 0),
+    population: pickThreshold('population', props.topology?.population || 0),
+    depth: pickThreshold('depth', props.topology?.depth || 0),
+  }
+
+  return (
+    <>
+      <Indicator {...props} thresholds={thresholds} />
+      <Metrics {...props} thresholds={thresholds} />
+    </>
+  )
+}
+
+const Indicator = ({ isLoading, thresholds }: Props): ReactElement => {
+  const maximumTotalScore = Object.values(thresholds).reduce((sum, item) => sum + item.maximumScore, 0)
+  const actualTotalScore = Object.values(thresholds).reduce((sum, item) => sum + item.score, 0)
+  const percentageText = Math.round((actualTotalScore / maximumTotalScore) * 100) + '%'
+
+  return (
+    <div style={{ marginBottom: '20px' }}>
+      <StatCard label="Overall Health Indicator" statistic={percentageText} loading={isLoading} />
+    </div>
+  )
+}
+
+const Metrics = ({ isLoading, topology, thresholds }: Props): ReactElement => (
   <Grid style={{ marginBottom: '20px', flexGrow: 1 }}>
     <Grid container spacing={3}>
       <Grid key={1} item xs={12} sm={12} md={6} lg={4} xl={4}>
-        <StatCard label="Connected Peers" statistic={topology?.connected.toString()} loading={isLoading} />
+        <StatCard
+          label="Connected Peers"
+          statistic={topology?.connected.toString()}
+          loading={isLoading}
+          tooltip={thresholds.connectedPeers.explanation}
+        />
       </Grid>
       <Grid key={2} item xs={12} sm={12} md={6} lg={4} xl={4}>
-        <StatCard label="Population" statistic={topology?.population.toString()} loading={isLoading} />
+        <StatCard
+          label="Population"
+          statistic={topology?.population.toString()}
+          loading={isLoading}
+          tooltip={thresholds.population.explanation}
+        />
       </Grid>
       <Grid key={3} item xs={12} sm={12} md={6} lg={4} xl={4}>
-        <StatCard label="Depth" statistic={topology?.depth.toString()} loading={isLoading} />
+        <StatCard
+          label="Depth"
+          statistic={topology?.depth.toString()}
+          loading={isLoading}
+          tooltip={thresholds.depth.explanation}
+        />
       </Grid>
     </Grid>
   </Grid>