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

format files

This commit is contained in:
Hristo Nedelkov 2023-09-29 13:34:59 +03:00
parent c44e39539e
commit eab4eb221e
9 changed files with 48 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/components/Charts/DeviceCPULoad.tsx
View File

@ -20,14 +20,13 @@ type DeviceCPULoadProps = {
load: number[]
}
const DeviceCPULoad = ({ load }: DeviceCPULoadProps) => {
const [isHovered, setIsHovered] = useState(false);
const [isHovered, setIsHovered] = useState(false)
const dataObj = load.map((yValue, index: number) => ({
x: index + 1,
y: yValue,
}))
const currentLoad =
dataObj.length > 0 ? dataObj[dataObj.length - 1].y : 0
const currentLoad = dataObj.length > 0 ? dataObj[dataObj.length - 1].y : 0
const message = currentLoad < 80 ? 'Good' : 'Poor'
@ -47,7 +46,7 @@ const DeviceCPULoad = ({ load }: DeviceCPULoadProps) => {
minHeight: '135px',
borderRadius: '16px',
border: message === 'Poor' ? '1px solid #D92344' : '1px solid #E0E0E0',
backgroundColor: isHovered ? '#f8f6ff' : (message === 'Poor' ? '#fefafa' : '#fff'),
backgroundColor: isHovered ? '#f8f6ff' : message === 'Poor' ? '#fefafa' : '#fff',
}}
onMouseEnter={() => setIsHovered(true)}
onMouseLeave={() => setIsHovered(false)}

8
src/components/Charts/DeviceMemoryHealth.tsx
View File

@ -23,15 +23,13 @@ type DeviceMemoryHealthProps = {
maxMemory: number
}
const DeviceMemoryHealth = ({ currentMemory, maxMemory }: DeviceMemoryHealthProps) => {
const [isHovered, setIsHovered] = useState(false);
const [isHovered, setIsHovered] = useState(false)
const dataObj = currentMemory.map((yValue, index: number) => ({
x: index + 1,
y: yValue,
}))
const currentLoad =
dataObj.length > 0 ? dataObj[dataObj.length - 1].y : 0
const currentLoad = dataObj.length > 0 ? dataObj[dataObj.length - 1].y : 0
const message = currentLoad < maxMemory ? 'Good' : 'Poor'
@ -52,7 +50,7 @@ const DeviceMemoryHealth = ({ currentMemory, maxMemory }: DeviceMemoryHealthProp
minHeight: '135px',
borderRadius: '16px',
border: message === 'Poor' ? '1px solid #D92344' : '1px solid #E0E0E0',
backgroundColor: isHovered ? '#f8f6ff' : (message === 'Poor' ? '#fefafa' : '#fff'),
backgroundColor: isHovered ? '#f8f6ff' : message === 'Poor' ? '#fefafa' : '#fff',
}}
onMouseEnter={() => setIsHovered(true)}
onMouseLeave={() => setIsHovered(false)}

6
src/components/Charts/DeviceNetworkHealth.stories.tsx
View File

@ -16,18 +16,18 @@ type Story = StoryObj<typeof meta>
export const GoodStats: Story = {
args: {
latency:[55, 31, 5, 14, 20, 81, 50, 34, 12, 50, 4, 90, 56, 35, 59]
latency: [55, 31, 5, 14, 20, 81, 50, 34, 12, 50, 4, 90, 56, 35, 59],
},
}
export const BadStats: Story = {
args: {
latency:[55, 31, 5, 14, 20, 81, 50, 34, 12, 50, 4, 90, 56, 35, ]
latency: [55, 31, 5, 14, 20, 81, 50, 34, 12, 50, 4, 90, 56, 35],
},
}
export const NoStats: Story = {
args: {
latency:[]
latency: [],
},
}

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

@ -16,21 +16,21 @@ type ChartData = {
data: DataPoint[]
}
type DeviceNetworkHealthProps = {
latency: number[];
};
latency: number[]
}
const DeviceNetworkHealth = ({ latency }: DeviceNetworkHealthProps) => {
const [isHovered, setIsHovered] = useState(false);
const [isHovered, setIsHovered] = useState(false)
const THRESHOLD = 60;
const GOOD_COLOR = '#8DC6BC';
const POOR_COLOR_LATENCY = '#D92344';
const THRESHOLD = 60
const GOOD_COLOR = '#8DC6BC'
const POOR_COLOR_LATENCY = '#D92344'
const processLatency = (latency: number[], id: string) => {
const dataObj = latency.map((yValue, index: number) => ({ x: index + 1, y: yValue }));
const currentLatency = dataObj.length > 0 ? dataObj[dataObj.length - 1].y : 0;
const message = currentLatency < THRESHOLD ? 'Good' : 'Poor';
const color = message === 'Good' ? GOOD_COLOR : POOR_COLOR_LATENCY;
const dataObj = latency.map((yValue, index: number) => ({ x: index + 1, y: yValue }))
const currentLatency = dataObj.length > 0 ? dataObj[dataObj.length - 1].y : 0
const message = currentLatency < THRESHOLD ? 'Good' : 'Poor'
const color = message === 'Good' ? GOOD_COLOR : POOR_COLOR_LATENCY
return {
id,
@ -38,12 +38,12 @@ const DeviceNetworkHealth = ({ latency }: DeviceNetworkHealthProps) => {
data: dataObj,
currentLatency,
message,
};
};
}
}
const processedLatency = processLatency(latency, 'latency');
const processedLatency = processLatency(latency, 'latency')
const chartData: ChartData[] = [processedLatency];
const chartData: ChartData[] = [processedLatency]
return (
<ShadowBox
@ -53,7 +53,11 @@ const DeviceNetworkHealth = ({ latency }: DeviceNetworkHealthProps) => {
minHeight: '135px',
borderRadius: '16px',
border: processedLatency.message === 'Poor' ? '1px solid #D92344' : '1px solid #E0E0E0',
backgroundColor: isHovered ? '#f8f6ff' : (processedLatency.message === 'Poor' ? '#fefafa' : '#fff'),
backgroundColor: isHovered
? '#f8f6ff'
: processedLatency.message === 'Poor'
? '#fefafa'
: '#fff',
}}
onMouseEnter={() => setIsHovered(true)}
onMouseLeave={() => setIsHovered(false)}
@ -81,7 +85,13 @@ const DeviceNetworkHealth = ({ latency }: DeviceNetworkHealthProps) => {
<Separator borderColor={'#e3e3e3'} />
<XStack space={'$4'} style={{ padding: '0.65rem 1rem' }}>
<IconText
icon={processedLatency.message === 'Good' ? <CheckCircleIcon size={16} /> : <IncorrectIcon size={16} />}
icon={
processedLatency.message === 'Good' ? (
<CheckCircleIcon size={16} />
) : (
<IncorrectIcon size={16} />
)
}
weight={'semibold'}
>
{processedLatency.message}
@ -93,7 +103,7 @@ const DeviceNetworkHealth = ({ latency }: DeviceNetworkHealthProps) => {
)}
</XStack>
</YStack>
</ShadowBox >
</ShadowBox>
)
}

18
src/components/Charts/DeviceStorageHealth.tsx
View File

@ -9,15 +9,15 @@ interface DeviceStorageHealthProps {
storage: number
maxStorage: number
}
const GOOD_COLOR = '#8DC6BC';
const POOR_COLOR = '#E95460';
const GOOD_COLOR = '#8DC6BC'
const POOR_COLOR = '#E95460'
const DeviceStorageHealth = ({ storage, maxStorage }: DeviceStorageHealthProps) => {
const [isHovered, setIsHovered] = useState(false);
const [isHovered, setIsHovered] = useState(false)
const message = storage < maxStorage ? 'Good' : 'Poor';
const free = maxStorage - storage;
const utilization = (storage / (maxStorage || 1)) * 100;
const message = storage < maxStorage ? 'Good' : 'Poor'
const free = maxStorage - storage
const utilization = (storage / (maxStorage || 1)) * 100
const data = (free: number) => {
return [
@ -33,7 +33,7 @@ const DeviceStorageHealth = ({ storage, maxStorage }: DeviceStorageHealthProps)
value: free,
color: '#E7EAEE',
},
];
]
}
return (
<Shadow
@ -43,7 +43,7 @@ const DeviceStorageHealth = ({ storage, maxStorage }: DeviceStorageHealthProps)
minHeight: '135px',
borderRadius: '16px',
border: message === 'Poor' ? '1px solid #D92344' : '1px solid #E0E0E0',
backgroundColor: isHovered ? '#f8f6ff' : (message === 'Poor' ? '#fefafa' : '#fff'),
backgroundColor: isHovered ? '#f8f6ff' : message === 'Poor' ? '#fefafa' : '#fff',
}}
onMouseEnter={() => setIsHovered(true)}
onMouseLeave={() => setIsHovered(false)}
@ -64,7 +64,7 @@ const DeviceStorageHealth = ({ storage, maxStorage }: DeviceStorageHealthProps)
height: '4.75rem',
}}
>
<StandardGauge data={data(free)} isInteractive={false}/>
<StandardGauge data={data(free)} isInteractive={false} />
</Stack>
<YStack space={'$3'}>
<Text size={15} weight={'semibold'}>

1
src/components/Charts/StandardLineChart.tsx
View File

@ -31,7 +31,6 @@ const StandartLineChart = ({ data, isInteractive }: StandartLineChartProps) => {
stacked: true,
reverse: false,
}}
axisTop={null}
axisRight={null}
axisBottom={null}

5
src/pages/DeviceHealthCheck/DeviceHealthCheck.tsx
View File

@ -45,10 +45,7 @@ const DeviceHealthCheck = () => {
currentMemory={deviceHealthState.memory}
maxMemory={deviceHealthState.maxMemory}
/>
<DeviceNetworkHealth
latency={deviceHealthState.latency}
/>
<DeviceNetworkHealth latency={deviceHealthState.latency} />
</XStack>
<HealthInfoSection
usedStorage={120}

2
src/pages/PairDevice/GenerateId.tsx
View File

@ -33,7 +33,7 @@ const GenerateId = ({ isAwaitingPairing }: GenerateIdProps) => {
icon={<CompleteIdIcon size={20} />}
onPress={generateIdHandler}
>
Regenerate ID
Regenerate ID
</Button>
</XStack>
<YStack space={'$2'}>

8
src/redux/deviceHealthCheck/slice.ts
View File

@ -7,7 +7,6 @@ interface DeviceHealthState {
memory: number[]
maxMemory: number
latency: number[]
}
const initialState: DeviceHealthState = {
@ -17,7 +16,6 @@ const initialState: DeviceHealthState = {
memory: [15, 31, 5, 14, 20, 81, 50, 34, 12, 123, 4, 90, 56, 35, 90],
maxMemory: 120,
latency: [55, 31, 5, 14, 20, 81, 50, 34, 12, 50, 4, 90, 56, 35, 59],
}
const deviceHealthSlice = createSlice({
@ -41,12 +39,8 @@ const deviceHealthSlice = createSlice({
state.memory = action.payload.memory
state.maxMemory = action.payload.maxMemory
},
setNetworkHealth: (
state: DeviceHealthState,
action: PayloadAction<{ latency: number[] }>,
) => {
setNetworkHealth: (state: DeviceHealthState, action: PayloadAction<{ latency: number[] }>) => {
state.latency = action.payload.latency
},
},
})