diff --git a/src/components/Charts/DeviceCPULoad.tsx b/src/components/Charts/DeviceCPULoad.tsx index a211b72d..d3ee8910 100644 --- a/src/components/Charts/DeviceCPULoad.tsx +++ b/src/components/Charts/DeviceCPULoad.tsx @@ -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)} diff --git a/src/components/Charts/DeviceMemoryHealth.tsx b/src/components/Charts/DeviceMemoryHealth.tsx index 36c7c645..4e151ae0 100644 --- a/src/components/Charts/DeviceMemoryHealth.tsx +++ b/src/components/Charts/DeviceMemoryHealth.tsx @@ -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)} diff --git a/src/components/Charts/DeviceNetworkHealth.stories.tsx b/src/components/Charts/DeviceNetworkHealth.stories.tsx index 7bbaabdc..6f6eedec 100644 --- a/src/components/Charts/DeviceNetworkHealth.stories.tsx +++ b/src/components/Charts/DeviceNetworkHealth.stories.tsx @@ -16,18 +16,18 @@ type Story = StoryObj 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: [], }, } diff --git a/src/components/Charts/DeviceNetworkHealth.tsx b/src/components/Charts/DeviceNetworkHealth.tsx index dcd8c24e..5aacaac3 100644 --- a/src/components/Charts/DeviceNetworkHealth.tsx +++ b/src/components/Charts/DeviceNetworkHealth.tsx @@ -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 ( { 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) => { : } + icon={ + processedLatency.message === 'Good' ? ( + + ) : ( + + ) + } weight={'semibold'} > {processedLatency.message} @@ -93,7 +103,7 @@ const DeviceNetworkHealth = ({ latency }: DeviceNetworkHealthProps) => { )} - + ) } diff --git a/src/components/Charts/DeviceStorageHealth.tsx b/src/components/Charts/DeviceStorageHealth.tsx index 7042e415..efb5ada5 100644 --- a/src/components/Charts/DeviceStorageHealth.tsx +++ b/src/components/Charts/DeviceStorageHealth.tsx @@ -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 ( setIsHovered(true)} onMouseLeave={() => setIsHovered(false)} @@ -64,7 +64,7 @@ const DeviceStorageHealth = ({ storage, maxStorage }: DeviceStorageHealthProps) height: '4.75rem', }} > - + diff --git a/src/components/Charts/StandardLineChart.tsx b/src/components/Charts/StandardLineChart.tsx index 5d28a77e..79ce6e3c 100644 --- a/src/components/Charts/StandardLineChart.tsx +++ b/src/components/Charts/StandardLineChart.tsx @@ -31,7 +31,6 @@ const StandartLineChart = ({ data, isInteractive }: StandartLineChartProps) => { stacked: true, reverse: false, }} - axisTop={null} axisRight={null} axisBottom={null} diff --git a/src/pages/DeviceHealthCheck/DeviceHealthCheck.tsx b/src/pages/DeviceHealthCheck/DeviceHealthCheck.tsx index 06a1004c..1d580e6d 100644 --- a/src/pages/DeviceHealthCheck/DeviceHealthCheck.tsx +++ b/src/pages/DeviceHealthCheck/DeviceHealthCheck.tsx @@ -45,10 +45,7 @@ const DeviceHealthCheck = () => { currentMemory={deviceHealthState.memory} maxMemory={deviceHealthState.maxMemory} /> - + { icon={} onPress={generateIdHandler} > - Regenerate ID + Regenerate ID diff --git a/src/redux/deviceHealthCheck/slice.ts b/src/redux/deviceHealthCheck/slice.ts index 5368cded..5b6f6506 100644 --- a/src/redux/deviceHealthCheck/slice.ts +++ b/src/redux/deviceHealthCheck/slice.ts @@ -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 - }, }, })