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

Implement redux in device health check

This commit is contained in:
Hristo Nedelkov 2023-08-17 12:01:11 +03:00
parent fb21d8d499
commit ec90dfb13a
3 changed files with 58 additions and 66 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
src/App.tsx
View File

@ -7,6 +7,8 @@ import LandingPage from './pages/LandingPage/LandingPage'
import DeviceHealthCheck from './pages/DeviceHealthCheck/DeviceHealthCheck'
import ConnectDevicePage from './pages/ConnectDevicePage/ConnectDevicePage'
import DeviceSyncStatus from './pages/DeviceSyncStatus/DeviceSyncStatus'
import { Provider as ReduxProvider } from 'react-redux'
import store from './redux/store'
const router = createBrowserRouter([
{
@ -20,20 +22,21 @@ const router = createBrowserRouter([
{
path: '/connect-device',
element: <ConnectDevicePage />,
},
{
path: '/device-sync-status',
element: <DeviceSyncStatus />,
}
},
])
function App() {
return (
<TamaguiProvider config={config}>
<StatusProvider>
<RouterProvider router={router} />
</StatusProvider>
<ReduxProvider store={store}>
<StatusProvider>
<RouterProvider router={router} />
</StatusProvider>
</ReduxProvider>
</TamaguiProvider>
)
}

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

@ -9,8 +9,13 @@ import { Button, InformationBox } from '@status-im/components'
import Icon from '../../components/General/Icon'
import DeviceMemory from '../../components/Charts/DeviceMemoryHealth'
import DeviceNetworkHealth from '../../components/Charts/DeviceNetworkHealth'
import { useSelector } from 'react-redux'
import { RootState } from '../../redux/store'
const DeviceHealthCheck = () => {
// Extract state from Redux store
const deviceHealthState = useSelector((state: RootState) => state.deviceHealth)
console.log(deviceHealthState)
return (
<PageWrapperShadow rightImageSrc="/background-images/eye-background.png">
<YStack
@ -29,12 +34,21 @@ const DeviceHealthCheck = () => {
isAdvancedSettings={true}
/>
<XStack space={'$4'}>
<DeviceStorageHealth storage={44} maxStorage={30} />
<DeviceCPULoad load={[12, 123, 4, 90]} />
<DeviceStorageHealth
storage={deviceHealthState.storage}
maxStorage={deviceHealthState.maxMemory}
/>
<DeviceCPULoad load={deviceHealthState.cpuLoad} />
</XStack>
<XStack space={'$4'}>
<DeviceMemory currentMemory={[25, 31, 5, 14, 20, 81]} maxMemory={38} />
<DeviceNetworkHealth uploadRate={[1, 4, 23, 55]} downloadRate={[20, 3, 40, 56]} />
<DeviceMemory
currentMemory={deviceHealthState.memory}
maxMemory={deviceHealthState.maxMemory}
/>
<DeviceNetworkHealth
uploadRate={deviceHealthState.uploadRate}
downloadRate={deviceHealthState.downloadRate}
/>
</XStack>
<HealthInfoSection
usedStorage={120}

89
src/redux/deviceHealthCheck/slice.tsx
View File

@ -1,76 +1,51 @@
import { createSlice, PayloadAction } from '@reduxjs/toolkit';
import { createSlice, PayloadAction } from '@reduxjs/toolkit'
interface DeviceHealthState {
storage: number;
maxStorage: number;
cpuLoad: number[];
memory: number[];
maxMemory: number;
uploadRate: number[];
downloadRate: number[];
usedStorage: number;
maxRamMemory: number;
usedRamMemory: number;
cpuClockRate: number;
networkLatency: number;
storage: number
maxStorage: number
cpuLoad: number[]
memory: number[]
maxMemory: number
uploadRate: number[]
downloadRate: number[]
}
const initialState: DeviceHealthState = {
storage: 0,
maxStorage: 0,
cpuLoad: [],
memory: [],
maxMemory: 0,
uploadRate: [],
downloadRate: [],
usedStorage: 0,
maxRamMemory: 0,
usedRamMemory: 0,
cpuClockRate: 0,
networkLatency: 0,
};
storage: 44,
maxStorage: 100,
cpuLoad: [12, 123, 4, 90],
memory: [25, 31, 5, 14, 20, 81],
maxMemory: 120,
uploadRate: [1, 4, 25, 65],
downloadRate: [20, 3, 50, 30],
}
const deviceHealthSlice = createSlice({
name: 'deviceHealth',
initialState,
reducers: {
setStorage: (state, action: PayloadAction<{ storage: number; maxStorage: number }>) => {
state.storage = action.payload.storage;
state.maxStorage = action.payload.maxStorage;
state.storage = action.payload.storage
state.maxStorage = action.payload.maxStorage
},
setCpuLoad: (state, action: PayloadAction<number[]>) => {
state.cpuLoad = action.payload;
state.cpuLoad = action.payload
},
setMemory: (state, action: PayloadAction<{ memory: number[]; maxMemory: number }>) => {
state.memory = action.payload.memory;
state.maxMemory = action.payload.maxMemory;
state.memory = action.payload.memory
state.maxMemory = action.payload.maxMemory
},
setNetworkHealth: (state, action: PayloadAction<{ uploadRate: number[]; downloadRate: number[] }>) => {
state.uploadRate = action.payload.uploadRate;
state.downloadRate = action.payload.downloadRate;
setNetworkHealth: (
state,
action: PayloadAction<{ uploadRate: number[]; downloadRate: number[] }>,
) => {
state.uploadRate = action.payload.uploadRate
state.downloadRate = action.payload.downloadRate
},
setHealthInfo: (state, action: PayloadAction<{
usedStorage: number;
maxRamMemory: number;
usedRamMemory: number;
cpuClockRate: number;
networkLatency: number;
}>) => {
state.usedStorage = action.payload.usedStorage;
state.maxRamMemory = action.payload.maxRamMemory;
state.usedRamMemory = action.payload.usedRamMemory;
state.cpuClockRate = action.payload.cpuClockRate;
state.networkLatency = action.payload.networkLatency;
},
}
});
},
})
export const {
setStorage,
setCpuLoad,
setMemory,
setNetworkHealth,
setHealthInfo
} = deviceHealthSlice.actions;
export const { setStorage, setCpuLoad, setMemory, setNetworkHealth} =
deviceHealthSlice.actions
export default deviceHealthSlice.reducer;
export default deviceHealthSlice.reducer