From 2f213395ff72e9f17b5b64ecbc3a882de4d3f9e7 Mon Sep 17 00:00:00 2001
From: Mengling Ding <71745861+Meng-20@users.noreply.github.com>
Date: Wed, 18 Dec 2024 11:49:22 -0700
Subject: [PATCH] fix(webui): change the layout for the offline devices (#76)

---
 webui/src/components/Appliance/Appliances.vue | 22 +++++++++++++---
 webui/src/components/CXL-Hosts/CXL-Hosts.vue  | 26 ++++++++++++++-----
 2 files changed, 38 insertions(+), 10 deletions(-)

diff --git a/webui/src/components/Appliance/Appliances.vue b/webui/src/components/Appliance/Appliances.vue
index 07fe502..a000e98 100644
--- a/webui/src/components/Appliance/Appliances.vue
+++ b/webui/src/components/Appliance/Appliances.vue
@@ -2017,13 +2017,27 @@ export default {
     const selectedBladeStatus = computed(() => bladeStore.selectedBladeStatus);
 
     const statusColor = computed(() => {
-      return selectedBladeStatus.value === "online" ? "#6ebe4a" : "#ff9f40";
+      if (selectedBladeStatus.value === "online") {
+        return "#6ebe4a";
+      } else if (selectedBladeStatus.value === "unavailable") {
+        return "#ff9f40";
+      } else if (selectedBladeStatus.value === "offline") {
+        return "#b00020";
+      } else {
+        return "#B0B0B0"; // Default unknown status
+      }
     });
 
     const statusIcon = computed(() => {
-      return selectedBladeStatus.value === "online"
-        ? "mdi-check-circle"
-        : "mdi-close-circle";
+      if (selectedBladeStatus.value === "online") {
+        return "mdi-check-circle";
+      } else if (selectedBladeStatus.value === "unavailable") {
+        return "mdi-alert-circle";
+      } else if (selectedBladeStatus.value === "offline") {
+        return "mdi-close-circle";
+      } else {
+        return "mdi-help-circle"; // Default unknown status
+      }
     });
 
     // Methods to update state
diff --git a/webui/src/components/CXL-Hosts/CXL-Hosts.vue b/webui/src/components/CXL-Hosts/CXL-Hosts.vue
index 0a36ca6..de78580 100644
--- a/webui/src/components/CXL-Hosts/CXL-Hosts.vue
+++ b/webui/src/components/CXL-Hosts/CXL-Hosts.vue
@@ -1132,7 +1132,7 @@ export default {
             hostPortStore.hostPortStore(newHostId),
             hostMemoryStore.hostMemoryStore(newHostId),
             hostMemoryDeviceStore.hostMemoryDeviceStore(newHostId),
-            hostStore.fetchHostById(newHostId)
+            hostStore.fetchHostById(newHostId),
           ]);
 
           // Update the URL with the new host ID
@@ -1152,13 +1152,27 @@ export default {
     const selectedHostStatus = computed(() => hostStore.selectedHostStatus);
 
     const statusColor = computed(() => {
-      return selectedHostStatus.value === "online" ? "#6ebe4a" : "#ff9f40";
+      if (selectedHostStatus.value === "online") {
+        return "#6ebe4a";
+      } else if (selectedHostStatus.value === "unavailable") {
+        return "#ff9f40";
+      } else if (selectedHostStatus.value === "offline") {
+        return "#b00020";
+      } else {
+        return "#B0B0B0"; // Default unknown status
+      }
     });
 
     const statusIcon = computed(() => {
-      return selectedHostStatus.value === "online"
-        ? "mdi-check-circle"
-        : "mdi-close-circle";
+      if (selectedHostStatus.value === "online") {
+        return "mdi-check-circle";
+      } else if (selectedHostStatus.value === "unavailable") {
+        return "mdi-alert-circle";
+      } else if (selectedHostStatus.value === "offline") {
+        return "mdi-close-circle";
+      } else {
+        return "mdi-help-circle"; // Default unknown status
+      }
     });
 
     // Methods to update state
@@ -1200,4 +1214,4 @@ export default {
 .highlighted-tab {
   font-weight: bold;
 }
-</style>
\ No newline at end of file
+</style>