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>

2 files changed, 80 insertions, 0 deletions

diff --git a/src/views/HardwareStatus/Inventory/InventoryTableFans.vue b/src/views/HardwareStatus/Inventory/InventoryTableFans.vue
index 62f0b76b..af4b461e 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>
@@ -146,6 +152,12 @@ export default {
           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'),
           formatter: this.dataFormatter,
@@ -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 df03fdf2..0ce8c823 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>
@@ -167,6 +173,12 @@ export default {
           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'),
           formatter: this.dataFormatter,
@@ -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>