[WIFI-13256] Now displaying warnings if a device is blacklisted

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

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "ucentral-client",
-  "version": "3.0.0(5)",
+  "version": "3.0.0(6)",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "ucentral-client",
-      "version": "3.0.0(5)",
+      "version": "3.0.0(6)",
       "license": "ISC",
       "dependencies": {
         "@chakra-ui/anatomy": "^2.1.1",

package.json

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

src/hooks/Network/Devices.ts

@@ -42,6 +42,7 @@ export type DeviceWithStatus = {
   associations_2G: number;
   associations_5G: number;
   associations_6G: number;
+  blackListed?: boolean;
   compatible: string;
   connected: boolean;
   connectReason?: string;

src/models/Device.ts

@@ -3,6 +3,7 @@ import { Note } from './Note';
 
 export interface GatewayDevice {
   UUID: number;
+  blackListed?: boolean;
   certificateExpiryDate: number;
   compatible: string;
   configuration: unknown;

src/pages/Device/Summary.tsx

@@ -129,9 +129,7 @@ const DeviceSummary = ({ serialNumber }: Props) => {
               <Heading size="sm">{t('controller.stats.load')}:</Heading>
             </GridItem>
             <GridItem colSpan={1}>
-              {getStats.data?.unit?.load
-                ? getStats.data?.unit.load.map((l) => `${(l * 100).toFixed(2)}%`).join(' | ')
-                : ''}
+              {getStats.data?.unit?.load?.map((l) => `${l.toFixed(2)}`).join(' | ') ?? ''}
             </GridItem>
             <GridItem colSpan={1} alignContent="center" alignItems="center">
               <Heading size="sm">{t('controller.devices.localtime')}:</Heading>

src/pages/Device/Wrapper.tsx

@@ -108,6 +108,17 @@ const DevicePageWrapper = ({ serialNumber }: Props) => {
   const connectedTag = React.useMemo(() => {
     if (!getStatus.data) return null;
 
+    if (getDevice.data?.blackListed) {
+      return (
+        <ResponsiveTag
+          label="Blacklisted"
+          tooltip="This device is blacklisted, it will not be able to connect to the network. Please visit the Blacklist page if you wish to remove it from the blacklist."
+          colorScheme="red"
+          icon={LockSimple}
+        />
+      );
+    }
+
     return (
       <ResponsiveTag
         label={getStatus?.data?.connected ? t('common.connected') : t('common.disconnected')}
@@ -115,7 +126,7 @@ const DevicePageWrapper = ({ serialNumber }: Props) => {
         icon={getStatus.data.connected ? WifiHigh : WifiSlash}
       />
     );
-  }, [getStatus.data]);
+  }, [getStatus.data, getDevice.data]);
 
   const healthTag = React.useMemo(() => {
     if (!getStatus.data || !getStatus.data.connected || !getHealth.data || getHealth.data?.values?.length === 0)

src/pages/Devices/ListCard/index.tsx

@@ -8,6 +8,7 @@ import {
   ThermometerCold,
   ThermometerHot,
   WarningCircle,
+  XCircle,
 } from '@phosphor-icons/react';
 import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom';
@@ -63,6 +64,7 @@ const BADGE_COLORS: Record<string, string> = {
   NO_CERTIFICATE: 'red',
   MISMATCH_SERIAL: 'yellow',
   VERIFIED: 'green',
+  BLACKLISTED: 'white',
   SIMULATED: 'purple',
 };
 
@@ -159,12 +161,32 @@ const DeviceListCard = () => {
         h="35px"
         w="35px"
         borderRadius="50em"
-        bgColor={BADGE_COLORS[device.simulated ? 'SIMULATED' : device.verifiedCertificate] ?? 'red'}
+        bgColor={
+          BADGE_COLORS[
+            device.simulated ? 'SIMULATED' : device.blackListed ? 'BLACKLISTED' : device.verifiedCertificate
+          ] ?? 'red'
+        }
         alignItems="center"
         display="inline-flex"
         justifyContent="center"
         position="relative"
       >
+        {device.blackListed ? (
+          <Tooltip label="This device is blacklisted. If this was done by mistake, please visit the Blacklist page to correct.">
+            <XCircle
+              size={44}
+              color="#ff2600"
+              weight="duotone"
+              style={{
+                position: 'absolute',
+                // Center vertically and horizontally
+                top: '50%',
+                left: '50%',
+                transform: 'translate(-50%, -50%)',
+              }}
+            />
+          </Tooltip>
+        ) : null}
         <Tooltip
           label={`${device.simulated ? 'SIMULATED' : device.verifiedCertificate} - ${
             device.connected ? t('common.connected') : t('common.disconnected')
@@ -182,6 +204,7 @@ const DeviceListCard = () => {
           bottom={0}
           borderColor="gray.200"
           borderWidth={1}
+          hidden={device.blackListed}
         />
         {device.restrictedDevice && (
           <Box