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 <[email protected]>

Author: FarahRasheed1

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>

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>