Vojtech Simetka
57f5a73f3a
* feat: info page redesign * style: headers and nesting for expandable lists * style: body typography * chore: bee version check * feat: key list item component * style: hover state for the key displaying component * style: left border on expanded items * fix: word break and splitting for hexstrings divisible by 6 * chore: moved the styles to classes * style: tooltips now have arrow * feat: indicate value has been copied * feat: removed the connectivity table in favor of info page * feat: added health tooltips for connectivity * refactor: simplified the topology into single component * fix: spacing between the bee version and the update button/chip * fix: spacing on devices not supporting rowGap
45 lines
1.6 KiB
TypeScript
45 lines
1.6 KiB
TypeScript
import type { Topology } from '@ethersphere/bee-js'
|
|
import type { ReactElement } from 'react'
|
|
import { pickThreshold, ThresholdValues } from '../utils/threshold'
|
|
import ExpandableList from './ExpandableList'
|
|
import ExpandableListItem from './ExpandableListItem'
|
|
|
|
interface Props {
|
|
topology: Topology | null
|
|
}
|
|
|
|
const TopologyStats = (props: Props): 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),
|
|
}
|
|
|
|
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 (
|
|
<ExpandableList label="Connectivity" defaultOpen>
|
|
<ExpandableListItem label="Overall Health Indicator" value={percentageText} />
|
|
<ExpandableListItem
|
|
label="Connected Peers"
|
|
value={props.topology?.connected.toString()}
|
|
tooltip={thresholds.connectedPeers.explanation}
|
|
/>
|
|
<ExpandableListItem
|
|
label="Pupulation"
|
|
value={props.topology?.population.toString()}
|
|
tooltip={thresholds.population.explanation}
|
|
/>
|
|
<ExpandableListItem
|
|
label="Depth"
|
|
value={props.topology?.depth.toString()}
|
|
tooltip={thresholds.depth.explanation}
|
|
/>
|
|
</ExpandableList>
|
|
)
|
|
}
|
|
|
|
export default TopologyStats
|