status-im
/
nimbus-gui
mirror of https://github.com/status-im/nimbus-gui.git
2
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Update Network card to work with latency

This commit is contained in:
Hristo Nedelkov 2023-09-28 22:41:05 +03:00
parent d07496afb2
commit a6659fdf4a
1 changed files with 21 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
src/components/Charts/DeviceNetworkHealth.tsx
View File

@ -15,38 +15,35 @@ type ChartData = {
color: string color: string
data: DataPoint[] data: DataPoint[]
} }
type DeviceNetworkHealthProps = { type DeviceNetworkHealthProps = {
uploadRate: number[] latency: number[];
downloadRate: number[] };
}
const DeviceNetworkHealth = ({ uploadRate, downloadRate }: DeviceNetworkHealthProps) => { const DeviceNetworkHealth = ({ latency }: DeviceNetworkHealthProps) => {
const [isHovered, setIsHovered] = useState(false); const [isHovered, setIsHovered] = useState(false);
const THRESHOLD = 60; const THRESHOLD = 60;
const GOOD_COLOR = '#8DC6BC'; const GOOD_COLOR = '#8DC6BC';
const POOR_COLOR_UPLOAD = '#e95460'; const POOR_COLOR_LATENCY = '#D92344';
const POOR_COLOR_DOWNLOAD = '#D92344';
const processDataRate = (rate: number[], id: string, poorColor: string) => { const processLatency = (latency: number[], id: string) => {
const dataObj = rate.map((yValue, index: number) => ({ x: index + 1, y: yValue })); const dataObj = latency.map((yValue, index: number) => ({ x: index + 1, y: yValue }));
const currentLoad = dataObj.length > 0 ? dataObj[dataObj.length - 1].y : 0; const currentLatency = dataObj.length > 0 ? dataObj[dataObj.length - 1].y : 0;
const message = currentLoad > THRESHOLD ? 'Good' : 'Poor'; const message = currentLatency < THRESHOLD ? 'Good' : 'Poor';
const color = message === 'Good' ? GOOD_COLOR : poorColor; const color = message === 'Good' ? GOOD_COLOR : POOR_COLOR_LATENCY;
return { return {
id, id,
color, color,
data: dataObj, data: dataObj,
currentLoad, currentLatency,
message, message,
}; };
}; };
const upload = processDataRate(uploadRate, 'uploadRate', POOR_COLOR_UPLOAD); const processedLatency = processLatency(latency, 'latency');
const download = processDataRate(downloadRate, 'downloadRate', POOR_COLOR_DOWNLOAD);
const chartData: ChartData[] = [upload, download]; const chartData: ChartData[] = [processedLatency];
return ( return (
<ShadowBox <ShadowBox
@ -55,8 +52,8 @@ const DeviceNetworkHealth = ({ uploadRate, downloadRate }: DeviceNetworkHealthPr
width: '50%', width: '50%',
minHeight: '135px', minHeight: '135px',
borderRadius: '16px', borderRadius: '16px',
border: upload.message === 'Poor' ? '1px solid #D92344' : 'none', border: processedLatency.message === 'Poor' ? '1px solid #D92344' : 'none',
backgroundColor: isHovered ? '#f8f6ff' : (upload.message === 'Poor' ? '#fefafa' : '#fff'), backgroundColor: isHovered ? '#f8f6ff' : (processedLatency.message === 'Poor' ? '#fefafa' : '#fff'),
}} }}
onMouseEnter={() => setIsHovered(true)} onMouseEnter={() => setIsHovered(true)}
onMouseLeave={() => setIsHovered(false)} onMouseLeave={() => setIsHovered(false)}
@ -77,26 +74,26 @@ const DeviceNetworkHealth = ({ uploadRate, downloadRate }: DeviceNetworkHealthPr
Network Network
</Text> </Text>
<Text size={27} weight={'semibold'}> <Text size={27} weight={'semibold'}>
{upload.currentLoad} GB {processedLatency.currentLatency} ms
</Text> </Text>
</YStack> </YStack>
</XStack> </XStack>
<Separator borderColor={'#e3e3e3'} /> <Separator borderColor={'#e3e3e3'} />
<XStack space={'$4'} style={{ padding: '0.65rem 1rem' }}> <XStack space={'$4'} style={{ padding: '0.65rem 1rem' }}>
<IconText <IconText
icon={upload.message === 'Good' ? <CheckCircleIcon size={16} /> : <IncorrectIcon size={16} />} icon={processedLatency.message === 'Good' ? <CheckCircleIcon size={16} /> : <IncorrectIcon size={16} />}
weight={'semibold'} weight={'semibold'}
> >
{upload.message} {processedLatency.message}
</IconText> </IconText>
{upload.message === 'Poor' && ( {processedLatency.message === 'Poor' && (
<Text size={13} color={'#E95460'} weight={'semibold'}> <Text size={13} color={'#E95460'} weight={'semibold'}>
{((upload.currentLoad / 60) * 100).toFixed(0)}% Utilization {`High Latency: ${processedLatency.currentLatency}ms`}
</Text> </Text>
)} )}
</XStack> </XStack>
</YStack> </YStack>
</ShadowBox> </ShadowBox >
) )
} }