Add chassis table missing properties

- Added the following properties: Name, Location number, Identify led,
Manufacturer, Chassis type, Asset tag, Max power watts, Min power watts

- Design has been updated for chassis table

Signed-off-by: Sandeepa Singh <sandeepa.singh@ibm.com>
Change-Id: Id2ef82573a4d17059dc9f4929155aa05cabef2aa

3 files changed, 122 insertions, 23 deletions

diff --git a/src/locales/en-US.json b/src/locales/en-US.json
index 8ec50e96..3196dcf8 100644
--- a/src/locales/en-US.json
+++ b/src/locales/en-US.json
@@ -397,6 +397,8 @@
       "maxConcurrentSessions": "Max concurrent sessions",
       "maxSpeedMHz": "Max speed MHz",
       "minSpeedMHz": "Min speed MHz",
+      "maxPowerWatts": "Max power watts",
+      "minPowerWatts": "Min power watts",
       "model": "Model",
       "name": "Name",
       "partNumber": "Part number",
diff --git a/src/store/modules/Health/ChassisStore.js b/src/store/modules/Health/ChassisStore.js
index 251279e6..2faddfbf 100644
--- a/src/store/modules/Health/ChassisStore.js
+++ b/src/store/modules/Health/ChassisStore.js
@@ -1,4 +1,5 @@
 import api from '@/store/api';
+import i18n from '@/i18n';
 
 const ChassisStore = {
   namespaced: true,
@@ -19,6 +20,11 @@ const ChassisStore = {
           ChassisType,
           Manufacturer,
           PowerState,
+          LocationIndicatorActive,
+          AssetTag,
+          MaxPowerWatts,
+          MinPowerWatts,
+          Name,
         } = chassis;
 
         return {
@@ -31,6 +37,12 @@ const ChassisStore = {
           powerState: PowerState,
           statusState: Status.State,
           healthRollup: Status.HealthRollup,
+          assetTag: AssetTag,
+          maxPowerWatts: MaxPowerWatts,
+          minPowerWatts: MinPowerWatts,
+          name: Name,
+          identifyLed: LocationIndicatorActive,
+          uri: chassis['@odata.id'],
         };
       });
     },
@@ -49,6 +61,28 @@ const ChassisStore = {
         })
         .catch((error) => console.log(error));
     },
+    async updateIdentifyLedValue({ dispatch }, led) {
+      const uri = led.uri;
+      const updatedIdentifyLedValue = {
+        LocationIndicatorActive: led.identifyLed,
+      };
+      return await api
+        .patch(uri, updatedIdentifyLedValue)
+        .then(() => dispatch('getChassisInfo'))
+        .catch((error) => {
+          dispatch('getChassisInfo');
+          console.log('error', error);
+          if (led.identifyLed) {
+            throw new Error(
+              i18n.t('pageHardwareStatus.toast.errorEnableIdentifyLed')
+            );
+          } else {
+            throw new Error(
+              i18n.t('pageHardwareStatus.toast.errorDisableIdentifyLed')
+            );
+          }
+        });
+    },
   },
 };
 
diff --git a/src/views/Health/HardwareStatus/HardwareStatusTableChassis.vue b/src/views/Health/HardwareStatus/HardwareStatusTableChassis.vue
index c7e409a4..6b783c0f 100644
--- a/src/views/Health/HardwareStatus/HardwareStatusTableChassis.vue
+++ b/src/views/Health/HardwareStatus/HardwareStatusTableChassis.vue
@@ -27,33 +27,82 @@
         <status-icon :status="statusIcon(value)" />
         {{ value }}
       </template>
-
+      <!-- Toggle identify LED -->
+      <template #cell(identifyLed)="row">
+        <b-form-checkbox
+          v-if="hasIdentifyLed(row.item.identifyLed)"
+          v-model="row.item.identifyLed"
+          name="switch"
+          switch
+          @change="toggleIdentifyLedValue(row.item)"
+        >
+          <span v-if="row.item.identifyLed">
+            {{ $t('global.status.on') }}
+          </span>
+          <span v-else> {{ $t('global.status.off') }} </span>
+        </b-form-checkbox>
+        <div v-else>--</div>
+      </template>
       <template #row-details="{ item }">
         <b-container fluid>
           <b-row>
-            <b-col sm="6" xl="4">
+            <b-col class="mt-2" sm="6" xl="6">
               <dl>
-                <!-- Chassis type -->
-                <dt>{{ $t('pageHardwareStatus.table.chassisType') }}:</dt>
-                <dd>{{ tableFormatter(item.chassisType) }}</dd>
-                <!-- Manufacturer -->
-                <dt>{{ $t('pageHardwareStatus.table.manufacturer') }}:</dt>
-                <dd>{{ tableFormatter(item.manufacturer) }}</dd>
-                <!-- Power state -->
-                <dt>{{ $t('pageHardwareStatus.table.powerState') }}:</dt>
-                <dd>{{ tableFormatter(item.powerState) }}</dd>
+                <!-- Name -->
+                <dt>{{ $t('pageHardwareStatus.table.name') }}:</dt>
+                <dd>{{ tableFormatter(item.name) }}</dd>
+                <!-- Part number -->
+                <dt>{{ $t('pageHardwareStatus.table.partNumber') }}:</dt>
+                <dd>{{ tableFormatter(item.partNumber) }}</dd>
+                <!-- Serial Number -->
+                <dt>{{ $t('pageHardwareStatus.table.serialNumber') }}:</dt>
+                <dd>{{ tableFormatter(item.serialNumber) }}</dd>
+                <!-- Model -->
+                <dt>{{ $t('pageHardwareStatus.table.model') }}:</dt>
+                <dd class="mb-2">
+                  {{ tableFormatter(item.model) }}
+                </dd>
+                <!-- Asset tag -->
+                <dt>{{ $t('pageHardwareStatus.table.assetTag') }}:</dt>
+                <dd class="mb-2">
+                  {{ tableFormatter(item.assetTag) }}
+                </dd>
               </dl>
             </b-col>
-            <b-col sm="6" xl="4">
+            <b-col class="mt-2" sm="6" xl="6">
               <dl>
-                <!-- Health rollup -->
-                <dt>
-                  {{ $t('pageHardwareStatus.table.statusHealthRollup') }}:
-                </dt>
-                <dd>{{ tableFormatter(item.healthRollup) }}</dd>
                 <!-- Status state -->
                 <dt>{{ $t('pageHardwareStatus.table.statusState') }}:</dt>
                 <dd>{{ tableFormatter(item.statusState) }}</dd>
+                <!-- Power state -->
+                <dt>{{ $t('pageHardwareStatus.table.power') }}:</dt>
+                <dd>{{ tableFormatter(item.power) }}</dd>
+                <!-- Health rollup -->
+                <dt>{{ $t('pageHardwareStatus.table.healthRollup') }}:</dt>
+                <dd>{{ tableFormatter(item.healthRollup) }}</dd>
+              </dl>
+            </b-col>
+          </b-row>
+          <div class="section-divider mb-3 mt-3"></div>
+          <b-row>
+            <b-col class="mt-2" sm="6" xl="6">
+              <dl>
+                <!-- Manufacturer -->
+                <dt>{{ $t('pageHardwareStatus.table.manufacturer') }}:</dt>
+                <dd>{{ tableFormatter(item.manufacturer) }}</dd>
+                <!-- Chassis Type -->
+                <dt>{{ $t('pageHardwareStatus.table.chassisType') }}:</dt>
+                <dd>{{ tableFormatter(item.chassisType) }}</dd>
+              </dl>
+            </b-col>
+            <b-col class="mt-2" sm="6" xl="6">
+              <dl>
+                <!-- Min power -->
+                <dt>{{ $t('pageHardwareStatus.table.minPowerWatts') }}:</dt>
+                <dd>{{ tableFormatter(item.minPowerWatts) }}</dd>
+                <!-- Max power -->
+                <dt>{{ $t('pageHardwareStatus.table.maxPowerWatts') }}:</dt>
+                <dd>{{ tableFormatter(item.maxPowerWatts) }}</dd>
               </dl>
             </b-col>
           </b-row>
@@ -66,7 +115,7 @@
 <script>
 import PageSection from '@/components/Global/PageSection';
 import IconChevron from '@carbon/icons-vue/es/chevron--down/20';
-
+import BVToastMixin from '@/components/Mixins/BVToastMixin';
 import StatusIcon from '@/components/Global/StatusIcon';
 
 import TableRowExpandMixin, {
@@ -76,7 +125,7 @@ import TableDataFormatterMixin from '@/components/Mixins/TableDataFormatterMixin
 
 export default {
   components: { IconChevron, PageSection, StatusIcon },
-  mixins: [TableRowExpandMixin, TableDataFormatterMixin],
+  mixins: [BVToastMixin, TableRowExpandMixin, TableDataFormatterMixin],
   data() {
     return {
       fields: [
@@ -97,13 +146,13 @@ export default {
           tdClass: 'text-nowrap',
         },
         {
-          key: 'partNumber',
-          label: this.$t('pageHardwareStatus.table.partNumber'),
+          key: 'locationNumber',
+          label: this.$t('pageHardwareStatus.table.locationNumber'),
           formatter: this.tableFormatter,
         },
         {
-          key: 'serialNumber',
-          label: this.$t('pageHardwareStatus.table.serialNumber'),
+          key: 'identifyLed',
+          label: this.$t('pageHardwareStatus.table.identifyLed'),
           formatter: this.tableFormatter,
         },
       ],
@@ -121,5 +170,19 @@ export default {
       this.$root.$emit('hardware-status-chassis-complete');
     });
   },
+  methods: {
+    toggleIdentifyLedValue(row) {
+      this.$store
+        .dispatch('chassis/updateIdentifyLedValue', {
+          uri: row.uri,
+          identifyLed: row.identifyLed,
+        })
+        .catch(({ message }) => this.errorToast(message));
+    },
+    // TO DO: Remove this method when the LocationIndicatorActive is added from backend.
+    hasIdentifyLed(identifyLed) {
+      return typeof identifyLed === 'boolean';
+    },
+  },
 };
 </script>