[WIFI-12651] Added dev release toggle to firmware upgrade modal

Signed-off-by: Charles <charles.bourque96@gmail.com>

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "ucentral-client",
-  "version": "2.10.0(45)",
+  "version": "2.10.0(48)",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "ucentral-client",
-      "version": "2.10.0(45)",
+      "version": "2.10.0(48)",
       "license": "ISC",
       "dependencies": {
         "@chakra-ui/icons": "^2.0.18",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ucentral-client",
-  "version": "2.10.0(45)",
+  "version": "2.10.0(48)",
   "description": "",
   "private": true,
   "main": "index.tsx",

src/components/Modals/FirmwareUpgradeModal/index.tsx

@@ -11,6 +11,7 @@ import {
   FormLabel,
   Switch,
   Heading,
+  Text,
 } from '@chakra-ui/react';
 import { Formik, FormikProps } from 'formik';
 import { useTranslation } from 'react-i18next';
@@ -32,6 +33,7 @@ export type FirmwareUpgradeModalProps = {
 
 export const FirmwareUpgradeModal = ({ modalProps: { isOpen, onClose }, serialNumber }: FirmwareUpgradeModalProps) => {
   const { t } = useTranslation();
+  const [showDevFirmware, { toggle: toggleDev }] = useBoolean();
   const [formKey, setFormKey] = React.useState(uuid());
   const ref = useRef<
     | FormikProps<{
@@ -72,7 +74,13 @@ export const FirmwareUpgradeModal = ({ modalProps: { isOpen, onClose }, serialNu
       <ModalContent maxWidth={{ sm: '90%', md: '900px', lg: '1000px', xl: '80%' }}>
         <ModalHeader
           title={`${t('commands.firmware_upgrade')} #${serialNumber}`}
-          right={<CloseButton ml={2} onClick={closeModal} />}
+          right={
+            <>
+              <Text>{t('controller.firmware.show_dev_releases')}</Text>
+              <Switch mx={2} isChecked={showDevFirmware} onChange={toggleDev} size="lg" />
+              <CloseButton onClick={closeModal} />
+            </>
+          }
         />
         <ModalBody>
           {isUpgrading || isFetchingDevice || isFetchingFirmware ? (
@@ -104,7 +112,11 @@ export const FirmwareUpgradeModal = ({ modalProps: { isOpen, onClose }, serialNu
                 </Formik>
               )}
               {firmware?.firmwares && (
-                <FirmwareList firmware={firmware.firmwares} upgrade={submit} isLoading={isUpgrading} />
+                <FirmwareList
+                  firmware={firmware.firmwares.filter((firmw) => showDevFirmware || !firmw.revision.includes('devel'))}
+                  upgrade={submit}
+                  isLoading={isUpgrading}
+                />
               )}
             </>
           )}

src/pages/Devices/Dashboard/OverallHealth.tsx

@@ -30,11 +30,15 @@ const OverallHealthSimple = ({ data }: Props) => {
       },
     );
 
-    const avg = Math.floor(totalDevices.totalHealth / totalDevices.totalDevices);
+    const avg = totalDevices.totalDevices === 0 ? -1 : Math.floor(totalDevices.totalHealth / totalDevices.totalDevices);
     let color: [string, string] = ['green.300', 'green.300'];
     let icon = Heart;
+    const text = avg === -1 ? '-' : `${avg}%`;
 
-    if (avg >= 80 && avg < 100) {
+    if (avg === -1) {
+      icon = Heart;
+      color = ['gray.300', 'gray.300'];
+    } else if (avg >= 80 && avg < 100) {
       icon = Warning;
       color = ['yellow.300', 'yellow.300'];
     } else if (avg < 80) {
@@ -42,7 +46,7 @@ const OverallHealthSimple = ({ data }: Props) => {
       color = ['red.300', 'red.300'];
     }
 
-    return { title: `${avg}%`, color, icon };
+    return { title: text, color, icon };
   }, [data]);
 
   return (

src/pages/Devices/ListCard/LocaleCell.tsx

@@ -0,0 +1,51 @@
+import * as React from 'react';
+import { CopyIcon } from '@chakra-ui/icons';
+import { Box, IconButton, Text, Tooltip, useClipboard } from '@chakra-ui/react';
+import ReactCountryFlag from 'react-country-flag';
+import { useTranslation } from 'react-i18next';
+import { DeviceWithStatus } from 'hooks/Network/Devices';
+
+const ICON_STYLE = { width: '24px', height: '24px', borderRadius: '20px' };
+
+type Props = {
+  device: DeviceWithStatus;
+};
+
+const DeviceLocaleCell = ({ device }: Props) => {
+  const { t } = useTranslation();
+  const copy = useClipboard(device.ipAddress);
+
+  return (
+    <Tooltip label={`${device.locale !== '' ? `${device.locale} - ` : ''}${device.ipAddress}`} placement="top">
+      <Box w="100%" display="flex">
+        {device.locale !== '' && device.ipAddress !== '' && (
+          <ReactCountryFlag style={ICON_STYLE} countryCode={device.locale} svg />
+        )}
+        <Tooltip
+          label={copy.hasCopied ? `${t('common.copied')}!` : t('common.copy')}
+          hasArrow
+          closeOnClick={false}
+          shouldWrapChildren
+        >
+          <IconButton
+            aria-label={t('common.copy')}
+            icon={<CopyIcon h={4} w={4} />}
+            onClick={(e) => {
+              copy.onCopy();
+              e.stopPropagation();
+            }}
+            size="xs"
+            colorScheme="teal"
+            hidden={device.ipAddress.length === 0}
+            mx={0.5}
+          />
+        </Tooltip>
+        <Text my="auto" textOverflow="ellipsis" overflow="hidden" whiteSpace="nowrap">{`  ${
+          device.ipAddress.length > 0 ? device.ipAddress : '-'
+        }`}</Text>
+      </Box>
+    </Tooltip>
+  );
+};
+
+export default DeviceLocaleCell;

src/pages/Devices/ListCard/index.tsx

@@ -9,7 +9,6 @@ import {
   ThermometerHot,
   WarningCircle,
 } from '@phosphor-icons/react';
-import ReactCountryFlag from 'react-country-flag';
 import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom';
 import Actions from './Actions';
@@ -20,6 +19,7 @@ import AP from './icons/AP.png';
 import IOT from './icons/IOT.png';
 import MESH from './icons/MESH.png';
 import SWITCH from './icons/SWITCH.png';
+import DeviceLocaleCell from './LocaleCell';
 import ProvisioningStatusCell from './ProvisioningStatusCell';
 import DeviceUptimeCell from './Uptime';
 import { DataGrid } from 'components/DataTables/DataGrid';
@@ -50,7 +50,6 @@ const fourDigitNumber = (v?: number) => {
   if (fourthChar === '.') return `${str.slice(0, 3)}`;
   return `${str.slice(0, 4)}`;
 };
-const ICON_STYLE = { width: '24px', height: '24px', borderRadius: '20px' };
 
 const ICONS = {
   AP: <Image borderRadius="full" boxSize="25px" src={AP} left="auto" right="auto" />,
@@ -255,19 +254,7 @@ const DeviceListCard = () => {
     [],
   );
   const uptimeCell = React.useCallback((device: DeviceWithStatus) => <DeviceUptimeCell device={device} />, []);
-  const localeCell = React.useCallback(
-    (device: DeviceWithStatus) => (
-      <Tooltip label={`${device.locale !== '' ? `${device.locale} - ` : ''}${device.ipAddress}`} placement="top">
-        <Box w="100%" textOverflow="ellipsis" overflow="hidden" whiteSpace="nowrap">
-          {device.locale !== '' && device.ipAddress !== '' && (
-            <ReactCountryFlag style={ICON_STYLE} countryCode={device.locale} svg />
-          )}
-          {`  ${device.ipAddress.length > 0 ? device.ipAddress : '-'}`}
-        </Box>
-      </Tooltip>
-    ),
-    [],
-  );
+  const localeCell = React.useCallback((device: DeviceWithStatus) => <DeviceLocaleCell device={device} />, []);
   const gpsCell = React.useCallback((device: DeviceWithStatus) => <DeviceTableGpsCell device={device} />, []);
   const numberCell = React.useCallback(
     (v?: number) => (
@@ -484,9 +471,9 @@ const DeviceListCard = () => {
         cell: (v) => localeCell(v.cell.row.original),
         enableSorting: false,
         meta: {
-          customMaxWidth: '140px',
-          customWidth: '130px',
-          customMinWidth: '130px',
+          customMaxWidth: '160px',
+          customWidth: '160px',
+          customMinWidth: '160px',
         },
       },
       {