diff --git a/package-lock.json b/package-lock.json index 3119607..7593b26 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "ucentral-client", - "version": "3.0.0(1)", + "version": "3.0.0(2)", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "ucentral-client", - "version": "3.0.0(1)", + "version": "3.0.0(2)", "license": "ISC", "dependencies": { "@chakra-ui/anatomy": "^2.1.1", diff --git a/package.json b/package.json index e629192..e301110 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "ucentral-client", - "version": "3.0.0(1)", + "version": "3.0.0(2)", "description": "", "private": true, "main": "index.tsx", diff --git a/src/layout/Devices.tsx b/src/layout/Devices.tsx index f26aec6..608ab1a 100644 --- a/src/layout/Devices.tsx +++ b/src/layout/Devices.tsx @@ -1,16 +1,6 @@ import * as React from 'react'; -import { - Box, - CircularProgress, - CircularProgressLabel, - Flex, - Heading, - Icon, - Text, - Tooltip, - VStack, -} from '@chakra-ui/react'; -import { ArrowSquareDown, ArrowSquareUp, Clock } from '@phosphor-icons/react'; +import { Flex, Heading, Icon, Text, Tooltip, VStack } from '@chakra-ui/react'; +import { ArrowSquareDown, ArrowSquareUp } from '@phosphor-icons/react'; import { useTranslation } from 'react-i18next'; import { Card } from 'components/Containers/Card'; import { compactSecondsToDetailed, minimalSecondsToDetailed } from 'helpers/dateFormatting'; @@ -20,74 +10,26 @@ import { useGetDevicesStats } from 'hooks/Network/Devices'; const SidebarDevices = () => { const { t } = useTranslation(); const getStats = useGetDevicesStats({}); - const [lastTime, setLastTime] = React.useState(); - const [lastUpdate, setLastUpdate] = React.useState(); - - const time = React.useMemo(() => { - if (lastTime === undefined || lastUpdate === undefined) return null; - - const seconds = lastTime.getTime() - lastUpdate.getTime(); - - return Math.max(0, Math.floor(seconds / 1000)); - }, [lastTime, lastUpdate]); - - const circleColor = () => { - if (time === null) return 'gray.300'; - if (time < 10) return 'green.300'; - if (time < 30) return 'yellow.300'; - return 'red.300'; - }; - - React.useEffect(() => { - setLastUpdate(new Date()); - }, [getStats.data]); - - React.useEffect(() => { - const interval = setInterval(() => { - setLastTime(new Date()); - }, 1000); - return () => { - clearInterval(interval); - }; - }, []); if (!getStats.data) return null; return ( - - - {time}s - - - - - - {getStats.data.connectedDevices} {t('common.connected')} {t('devices.title')}{' '} {' '} + {getStats.data.connectedDevices} + {t('controller.devices.average_uptime')} {minimalSecondsToDetailed(getStats.data.averageConnectionTime, t)} - {t('controller.devices.average_uptime')} +