From db2940a8ea63aeaf2f31dcb45a1c17a622a726c5 Mon Sep 17 00:00:00 2001
From: Farah Rasheed <Farah.Rasheed1@dell.com>
Date: Thu, 25 Jul 2024 14:04:18 -0500
Subject: [PATCH] Add status state info to inventory tables

Add status state information to the inventory tables
for fans and power supplies.

Also updates sortCompare to be able to sort by the
state.

Change-Id: Ic830dd0867daee0bf6052a5d1cff5592b98fc009
Signed-off-by: Farah Rasheed <Farah.Rasheed1@dell.com>
---
 .../Inventory/InventoryTableFans.vue          | 41 +++++++++++++++++++
 .../Inventory/InventoryTablePowerSupplies.vue | 39 ++++++++++++++++++
 2 files changed, 80 insertions(+)

diff --git a/src/views/HardwareStatus/Inventory/InventoryTableFans.vue b/src/views/HardwareStatus/Inventory/InventoryTableFans.vue
index 62f0b76bae..af4b461e64 100644
--- a/src/views/HardwareStatus/Inventory/InventoryTableFans.vue
+++ b/src/views/HardwareStatus/Inventory/InventoryTableFans.vue
@@ -51,6 +51,12 @@
         {{ value }}
       </template>
 
+      <!-- StatusState -->
+      <template #cell(statusState)="{ value }">
+        <status-icon :status="statusStateIcon(value)" />
+        {{ value }}
+      </template>
+
       <template #row-details="{ item }">
         <b-container fluid>
           <b-row>
@@ -145,6 +151,12 @@ export default {
           sortable: true,
           tdClass: 'text-nowrap',
         },
+        {
+          key: 'statusState',
+          label: this.$t('pageInventory.table.state'),
+          formatter: this.dataFormatter,
+          tdClass: 'text-nowrap',
+        },
         {
           key: 'partNumber',
           label: this.$t('pageInventory.table.partNumber'),
@@ -183,11 +195,40 @@ export default {
     sortCompare(a, b, key) {
       if (key === 'health') {
         return this.sortStatus(a, b, key);
+      } else if (key === 'statusState') {
+        return this.sortStatusState(a, b, key);
       }
     },
     onFiltered(filteredItems) {
       this.searchTotalFilteredRows = filteredItems.length;
     },
+    /**
+     * Returns the appropriate icon based on the given status.
+     *
+     * @param {string} status - The status to determine the icon for.
+     * @return {string} The icon corresponding to the given status.
+     */
+    statusStateIcon(status) {
+      switch (status) {
+        case 'Enabled':
+          return 'success';
+        case 'Absent':
+          return 'warning';
+        default:
+          return '';
+      }
+    },
+    /**
+     * Sorts the status state of two objects based on the provided key.
+     *
+     * @param {Object} a - The first object to compare.
+     * @param {Object} b - The second object to compare.
+     * @param {string} key - The key to use for comparison.
+     */
+    sortStatusState(a, b, key) {
+      const statusState = ['Enabled', 'Absent'];
+      return statusState.indexOf(a[key]) - statusState.indexOf(b[key]);
+    },
   },
 };
 </script>
diff --git a/src/views/HardwareStatus/Inventory/InventoryTablePowerSupplies.vue b/src/views/HardwareStatus/Inventory/InventoryTablePowerSupplies.vue
index df03fdf2b3..0ce8c82389 100644
--- a/src/views/HardwareStatus/Inventory/InventoryTablePowerSupplies.vue
+++ b/src/views/HardwareStatus/Inventory/InventoryTablePowerSupplies.vue
@@ -51,6 +51,12 @@
         {{ value }}
       </template>
 
+      <!-- StatusState -->
+      <template #cell(statusState)="{ value }">
+        <status-icon :status="statusStateIcon(value)" />
+        {{ value }}
+      </template>
+
       <template #row-details="{ item }">
         <b-container fluid>
           <b-row>
@@ -166,6 +172,12 @@ export default {
           sortable: true,
           tdClass: 'text-nowrap',
         },
+        {
+          key: 'statusState',
+          label: this.$t('pageInventory.table.state'),
+          formatter: this.dataFormatter,
+          tdClass: 'text-nowrap',
+        },
         {
           key: 'locationNumber',
           label: this.$t('pageInventory.table.locationNumber'),
@@ -204,11 +216,38 @@ export default {
     sortCompare(a, b, key) {
       if (key === 'health') {
         return this.sortStatus(a, b, key);
+      } else if (key === 'statusState') {
+        return this.sortStatusState(a, b, key);
       }
     },
     onFiltered(filteredItems) {
       this.searchTotalFilteredRows = filteredItems.length;
     },
+    /**
+     * Returns the icon to use for status state based on the given status.
+     * @param {string} status The status to determine the icon for.
+     * @return {string} The icon for the given status.
+     */
+    statusStateIcon(status) {
+      switch (status) {
+        case 'Enabled':
+          return 'success';
+        case 'Absent':
+          return 'warning';
+        default:
+          return '';
+      }
+    },
+    /**
+     * Sorts the status state of two objects based on the provided key.
+     * @param {Object} a The first object to compare.
+     * @param {Object} b The second object to compare.
+     * @param {string} key The key to use for comparison.
+     */
+    sortStatusState(a, b, key) {
+      const statusState = ['Enabled', 'Absent'];
+      return statusState.indexOf(a[key]) - statusState.indexOf(b[key]);
+    },
   },
 };
 </script>