feat: change the device status color

Seagate · Oct 7, 2024 · 81d18ea · 81d18ea
1 parent 6936c45
commit 81d18ea
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 8 deletions.
diff --git a/webui/src/components/Appliance/Appliances.vue b/webui/src/components/Appliance/Appliances.vue
@@ -171,9 +171,10 @@
                     <v-list lines="one">
                       <v-list-item>
                         <v-list-item-title>Status</v-list-item-title>
-                        <v-list-item-subtitle>{{
-                          selectedBladeStatus
-                        }}</v-list-item-subtitle>
+                        <v-list-item-subtitle
+                          :style="{ fontWeight: 'bold', color: statusColor }"
+                          >{{ selectedBladeStatus }}</v-list-item-subtitle
+                        >
                         <template v-slot:prepend>
                           <v-avatar>
                             <v-icon :color="statusColor">{{
@@ -1531,7 +1532,7 @@ export default {
     const selectedBladeStatus = computed(() => bladeStore.selectedBladeStatus);
 
     const statusColor = computed(() => {
-      return selectedBladeStatus.value === "online" ? "#6ebe4a" : "warning";
+      return selectedBladeStatus.value === "online" ? "#6ebe4a" : "#ff9f40";
     });
 
     const statusIcon = computed(() => {

diff --git a/webui/src/components/CXL-Hosts/CXL-Hosts.vue b/webui/src/components/CXL-Hosts/CXL-Hosts.vue
@@ -104,9 +104,13 @@
                 <v-list lines="one">
                   <v-list-item>
                     <v-list-item-title>Status</v-list-item-title>
-                    <v-list-item-subtitle>{{
-                      selectedHostStatus
-                    }}</v-list-item-subtitle>
+                    <v-list-item-subtitle
+                      :style="{
+                        fontWeight: 'bold',
+                        color: statusColor + ' !important',
+                      }"
+                      >{{ selectedHostStatus }}</v-list-item-subtitle
+                    >
                     <template v-slot:prepend>
                       <v-avatar>
                         <v-icon :color="statusColor">{{ statusIcon }}</v-icon>
@@ -915,7 +919,7 @@ export default {
     const selectedHostStatus = computed(() => hostStore.selectedHostStatus);
 
     const statusColor = computed(() => {
-      return selectedHostStatus.value === "online" ? "#6ebe4a" : "warning";
+      return selectedHostStatus.value === "online" ? "#6ebe4a" : "#ff9f40";
     });
 
     const statusIcon = computed(() => {