-
Notifications
You must be signed in to change notification settings - Fork 55
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
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
- Loading branch information
Showing
4 changed files
with
204 additions
and
18 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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> | ||
) | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,105 @@ | ||
const OPTIMAL_CONNECTED_PEERS = 200 | ||
const OPTIMAL_POPULATION = 100_000 | ||
const OPTIMAL_DEPTH = 12 | ||
|
||
interface Threshold { | ||
minimumValue: number | ||
explanation: string | ||
score: number | ||
} | ||
|
||
type Thresholds = { | ||
connectedPeers: Threshold[] | ||
population: Threshold[] | ||
depth: Threshold[] | ||
} | ||
|
||
type ThresholdValue = { | ||
score: number | ||
maximumScore: number | ||
explanation: string | ||
} | ||
|
||
export type ThresholdValues = { | ||
connectedPeers: ThresholdValue | ||
population: ThresholdValue | ||
depth: ThresholdValue | ||
} | ||
|
||
const GENERIC_ERROR = 'There may be issues with your Bee node or connection.' | ||
|
||
const THRESHOLDS: Thresholds = { | ||
connectedPeers: [ | ||
{ | ||
minimumValue: OPTIMAL_CONNECTED_PEERS, | ||
explanation: `Perfect! ${OPTIMAL_CONNECTED_PEERS} or more connected peers indicate a healthy topology.`, | ||
score: 2, | ||
}, | ||
{ | ||
minimumValue: 1, | ||
explanation: `Your Bee node is connected to peers, but this number should ideally be above ${OPTIMAL_CONNECTED_PEERS}. If you have only started your Bee node, this number may increase quickly.`, | ||
score: 1, | ||
}, | ||
{ | ||
minimumValue: 0, | ||
explanation: 'Your Bee node has not connected to any peers. ' + GENERIC_ERROR, | ||
score: 0, | ||
}, | ||
], | ||
population: [ | ||
{ | ||
minimumValue: OPTIMAL_POPULATION, | ||
explanation: | ||
'Perfect! Your Bee node seems to have a realistic value for the network size, which means everything is working well on your end.', | ||
score: 2, | ||
}, | ||
{ | ||
minimumValue: 1, | ||
explanation: `Population is usually above ${OPTIMAL_POPULATION.toLocaleString()}. If the number does not increase within a few hours, there may be issues with your Bee node.`, | ||
score: 1, | ||
}, | ||
{ | ||
minimumValue: 0, | ||
explanation: 'Your Bee node has no information on the network population. ' + GENERIC_ERROR, | ||
score: 0, | ||
}, | ||
], | ||
depth: [ | ||
{ | ||
minimumValue: OPTIMAL_DEPTH, | ||
explanation: 'Perfect! Your Bee node has the highest available depth.', | ||
score: 2, | ||
}, | ||
{ | ||
minimumValue: 1, | ||
explanation: `Your Bee node is supposed to reach a depth of ${OPTIMAL_DEPTH} eventually. Stagnation or decrease in this number may indicate problems with your Bee node.`, | ||
score: 1, | ||
}, | ||
{ | ||
minimumValue: 0, | ||
explanation: 'Your Bee node has not started building its topology yet. ' + GENERIC_ERROR, | ||
score: 0, | ||
}, | ||
], | ||
} | ||
|
||
export function pickThreshold(key: keyof Thresholds, value: number): ThresholdValue { | ||
const thresholds = THRESHOLDS[key] | ||
const maximumScore = thresholds[0].score | ||
for (const item of thresholds) { | ||
if (value >= item.minimumValue) { | ||
return { | ||
score: item.score, | ||
maximumScore, | ||
explanation: item.explanation, | ||
} | ||
} | ||
} | ||
const last = thresholds[thresholds.length - 1] | ||
|
||
return { | ||
score: last.score, | ||
maximumScore, | ||
explanation: last.explanation, | ||
} | ||
} |