Merge pull request #203 from stephb9959/main

[WIFI-13170] Advanced system page

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",

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",

src/layout/Devices.tsx

@@ -1,16 +1,6 @@
 import * as React from 'react';
-import {
+import { Flex, Heading, Icon, Text, Tooltip, VStack } from '@chakra-ui/react';
-  Box,
+import { ArrowSquareDown, ArrowSquareUp } from '@phosphor-icons/react';
-  CircularProgress,
-  CircularProgressLabel,
-  Flex,
-  Heading,
-  Icon,
-  Text,
-  Tooltip,
-  VStack,
-} from '@chakra-ui/react';
-import { ArrowSquareDown, ArrowSquareUp, Clock } 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<Date | undefined>();
-  const [lastUpdate, setLastUpdate] = React.useState<Date | undefined>();
-
-  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 (
     <Card p={4}>
-      <Tooltip hasArrow label={t('controller.stats.seconds_ago', { s: time })}>
-        <CircularProgress
-          isIndeterminate
-          color={circleColor()}
-          position="absolute"
-          right="6px"
-          top="6px"
-          w="unset"
-          size={6}
-          thickness="14px"
-        >
-          <CircularProgressLabel fontSize="1.9em">{time}s</CircularProgressLabel>
-        </CircularProgress>
-      </Tooltip>
-      <Tooltip hasArrow label={t('controller.stats.seconds_ago', { s: time })}>
-        <Box position="absolute" right="8px" top="8px" w="unset" hidden>
-          <Clock size={16} />
-        </Box>
-      </Tooltip>
       <VStack mb={-1}>
         <Flex flexDir="column" textAlign="center">
-          <Heading size="md">{getStats.data.connectedDevices}</Heading>
           <Heading size="xs" display="flex" justifyContent="center">
             <Text>
               {t('common.connected')} {t('devices.title')}{' '}
             </Text>{' '}
           </Heading>
+          <Heading size="md">{getStats.data.connectedDevices}</Heading>
+          <Heading size="xs">{t('controller.devices.average_uptime')}</Heading>
           <Tooltip hasArrow label={compactSecondsToDetailed(getStats.data.averageConnectionTime, t)}>
             <Heading size="md" textAlign="center" mt={1}>
               {minimalSecondsToDetailed(getStats.data.averageConnectionTime, t)}
             </Heading>
           </Tooltip>
-          <Heading size="xs">{t('controller.devices.average_uptime')}</Heading>
+
           <Flex fontSize="sm" fontWeight="bold" alignItems="center" justifyContent="center" mt={1}>
             <Tooltip hasArrow label="Rx">
               <Flex alignItems="center" mr={1}>