From cf977b7612aead00526d2f11cce83c9c778407d3 Mon Sep 17 00:00:00 2001
From: Charles <charles.bourque96@gmail.com>
Date: Thu, 4 Jan 2024 14:11:02 -0500
Subject: [PATCH] [WIFI-13256] Now displaying warnings if a device is
 blacklisted

Signed-off-by: Charles <charles.bourque96@gmail.com>
---
 package-lock.json                    |  4 ++--
 package.json                         |  2 +-
 src/hooks/Network/Devices.ts         |  1 +
 src/models/Device.ts                 |  1 +
 src/pages/Device/Summary.tsx         |  4 +---
 src/pages/Device/Wrapper.tsx         | 13 ++++++++++++-
 src/pages/Devices/ListCard/index.tsx | 25 ++++++++++++++++++++++++-
 7 files changed, 42 insertions(+), 8 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 96cacab..5a5665d 100644
--- a/package-lock.json
+++ b/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",
diff --git a/package.json b/package.json
index 5d838c9..1af535c 100644
--- a/package.json
+++ b/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",
diff --git a/src/hooks/Network/Devices.ts b/src/hooks/Network/Devices.ts
index 7efbd21..4c5d65b 100644
--- a/src/hooks/Network/Devices.ts
+++ b/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;
diff --git a/src/models/Device.ts b/src/models/Device.ts
index 8a25558..c594de7 100644
--- a/src/models/Device.ts
+++ b/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;
diff --git a/src/pages/Device/Summary.tsx b/src/pages/Device/Summary.tsx
index 8800c11..acc7ec5 100644
--- a/src/pages/Device/Summary.tsx
+++ b/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>
diff --git a/src/pages/Device/Wrapper.tsx b/src/pages/Device/Wrapper.tsx
index 06b3ace..4ca3de0 100644
--- a/src/pages/Device/Wrapper.tsx
+++ b/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)
diff --git a/src/pages/Devices/ListCard/index.tsx b/src/pages/Devices/ListCard/index.tsx
index 41f4da2..8691fd6 100644
--- a/src/pages/Devices/ListCard/index.tsx
+++ b/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