fix: change the layout for the offline devices

Seagate · Dec 17, 2024 · 9fdb2d0 · 9fdb2d0
1 parent a49451a
commit 9fdb2d0
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 10 deletions.
diff --git 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
@@ -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>
+</style>