Add processors table missing properties

- Add following missing properties: Name, Spare part number,  Model,
Processor type, Processor architechure, Version, Health rollup,
Asset tag, Min speed MHz, Max speed MHz, Total cores, Total threads,
Instruction set, Identify Led

- Design of the table has been updated

- Waiting for the following to be merged to test the Identify Led:
https://gerrit.openbmc-project.xyz/c/openbmc/bmcweb/+/37045

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

6 files changed, 154 insertions, 25 deletions

diff --git a/src/assets/styles/bmc/custom/_index.scss b/src/assets/styles/bmc/custom/_index.scss
index 9d6218ff..74594e35 100644
--- a/src/assets/styles/bmc/custom/_index.scss
+++ b/src/assets/styles/bmc/custom/_index.scss
@@ -12,6 +12,7 @@
 @import "./kvm";
 @import "./modal";
 @import "./pagination";
+@import "./section-divider";
 @import "./sol";
 @import "./tables";
 @import "./toasts";
\ No newline at end of file
diff --git a/src/assets/styles/bmc/custom/_section-divider.scss b/src/assets/styles/bmc/custom/_section-divider.scss
new file mode 100644
index 00000000..620c9e56
--- /dev/null
+++ b/src/assets/styles/bmc/custom/_section-divider.scss
@@ -0,0 +1,3 @@
+.section-divider {
+    border-bottom: 1px solid gray('400');
+  }
\ No newline at end of file
diff --git a/src/assets/styles/bmc/custom/_tables.scss b/src/assets/styles/bmc/custom/_tables.scss
index 6efe2ba0..e8b5a832 100644
--- a/src/assets/styles/bmc/custom/_tables.scss
+++ b/src/assets/styles/bmc/custom/_tables.scss
@@ -59,6 +59,7 @@
     background-color: theme-color("light");
     td {
       padding-left: calc(50px + (#{$table-cell-padding} * 2));
+      padding-right: calc(50px + (#{$table-cell-padding} * 2));
     }
     dl {
       margin: 0;
diff --git a/src/locales/en-US.json b/src/locales/en-US.json
index 31b44462..33048f6d 100644
--- a/src/locales/en-US.json
+++ b/src/locales/en-US.json
@@ -384,29 +384,40 @@
       "graphicalConsole": "Graphical console",
       "hardwareType": "Hardware type",
       "health": "Health",
+      "healthRollup": "Health rollup",
       "id": "ID",
       "identifyLed": "Identify LED",
       "indicatorLed": "Indicator LED",
       "locationNumber": "Location number",
       "instructionSet": "Instruction set",
+      "locationNumber": "Location number",
       "manufacturer": "Manufacturer",
       "maxConcurrentSessions": "Max concurrent sessions",
+      "maxSpeedMHz": "Max speed MHz",
+      "minSpeedMHz": "Min speed MHz",
       "model": "Model",
       "name": "Name",
       "partNumber": "Part number",
       "powerInputWatts": "Power input watts",
       "powerState": "Power state",
-      "processorArchitecture": "Architecture",
-      "processorType": "Type",
+      "processorArchitecture": "Processor architecture",
+      "processorType": "Processor type",
       "serialConsole": "Serial console",
       "serialNumber": "Serial number",
       "serviceEnabled": "Service enabled",
       "serviceEntryPointUuid": "Service entry point UUID",
+      "sparePartNumber": "Spare part number",
       "statusHealthRollup": "Status (Health rollup)",
       "statusState": "Status (State)",
       "systemType": "System type",
       "totalCores": "Total cores",
-      "uuid": "UUID"
+      "totalThreads": "Total threads",
+      "uuid": "UUID",
+      "version": "Version"
+    },
+    "toast": {
+      "errorDisableIdentifyLed": "Error disabling Identify LED.",
+      "errorEnableIdentifyLed": "Error enabling Identify LED."
     }
   },
   "pageKvm": {
diff --git a/src/store/modules/Health/ProcessorStore.js b/src/store/modules/Health/ProcessorStore.js
index 4a67c6b0..15314663 100644
--- a/src/store/modules/Health/ProcessorStore.js
+++ b/src/store/modules/Health/ProcessorStore.js
@@ -1,4 +1,5 @@
 import api from '@/store/api';
+import i18n from '@/i18n';
 
 const ProcessorStore = {
   namespaced: true,
@@ -16,18 +17,28 @@ const ProcessorStore = {
           Status = {},
           PartNumber,
           SerialNumber,
+          SparePartNumber,
           InstructionSet,
           Manufacturer,
           Model,
           Name,
           ProcessorArchitecture,
           ProcessorType,
+          Version,
+          AssetTag,
+          MinSpeedMHz,
+          MaxSpeedMHz,
           TotalCores,
+          TotalThreads,
+          LocationNumber,
+          LocationIndicatorActive,
         } = processor;
         return {
           id: Id,
           health: Status.Health,
+          healthRollup: Status.HealthRollup,
           partNumber: PartNumber,
+          sparePartNumber: SparePartNumber,
           serialNumber: SerialNumber,
           statusState: Status.State,
           instructionSet: InstructionSet,
@@ -36,7 +47,15 @@ const ProcessorStore = {
           name: Name,
           processorArchitecture: ProcessorArchitecture,
           processorType: ProcessorType,
+          version: Version,
+          assetTag: AssetTag,
+          minSpeedMHz: MinSpeedMHz,
+          maxSpeedMHz: MaxSpeedMHz,
           totalCores: TotalCores,
+          totalThreads: TotalThreads,
+          locationNumber: LocationNumber,
+          identifyLed: LocationIndicatorActive,
+          uri: processor['@odata.id'],
         };
       });
     },
@@ -55,6 +74,30 @@ const ProcessorStore = {
         })
         .catch((error) => console.log(error));
     },
+    // Waiting for the following to be merged to test the Identify Led:
+    // https://gerrit.openbmc-project.xyz/c/openbmc/bmcweb/+/37045
+    async updateIdentifyLedValue({ dispatch }, led) {
+      const uri = led.uri;
+      const updatedIdentifyLedValue = {
+        LocationIndicatorActive: led.identifyLed,
+      };
+      return await api
+        .patch(uri, updatedIdentifyLedValue)
+        .then(() => dispatch('getProcessorsInfo'))
+        .catch((error) => {
+          dispatch('getProcessorsInfo');
+          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/HardwareStatusTableProcessors.vue b/src/views/Health/HardwareStatus/HardwareStatusTableProcessors.vue
index 27f3bd83..e3b5735d 100644
--- a/src/views/Health/HardwareStatus/HardwareStatusTableProcessors.vue
+++ b/src/views/Health/HardwareStatus/HardwareStatusTableProcessors.vue
@@ -47,41 +47,97 @@
         <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>
                 <!-- 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>
+                <!-- Spare Part Number -->
+                <dt>{{ $t('pageHardwareStatus.table.sparePartNumber') }}:</dt>
+                <dd>{{ tableFormatter(item.sparePartNumber) }}</dd>
                 <!-- Model -->
                 <dt>{{ $t('pageHardwareStatus.table.model') }}:</dt>
                 <dd>{{ tableFormatter(item.model) }}</dd>
-                <!-- Instruction set -->
-                <dt>{{ $t('pageHardwareStatus.table.instructionSet') }}:</dt>
-                <dd>{{ tableFormatter(item.instructionSet) }}</dd>
-                <!-- Manufacturer -->
-                <dt>{{ $t('pageHardwareStatus.table.manufacturer') }}:</dt>
-                <dd>{{ tableFormatter(item.manufacturer) }}</dd>
+                <!-- Asset Tag -->
+                <dt>{{ $t('pageHardwareStatus.table.assetTag') }}:</dt>
+                <dd>{{ tableFormatter(item.assetTag) }}</dd>
               </dl>
             </b-col>
-            <b-col sm="6" xl="4">
+            <b-col class="mt-2" sm="6" xl="6">
               <dl>
-                <!-- Architecture -->
+                <!-- Status state -->
+                <dt>{{ $t('pageHardwareStatus.table.statusState') }}:</dt>
+                <dd>{{ tableFormatter(item.statusState) }}</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-1" sm="6" xl="6">
+              <dl>
+                <!-- Manufacturer -->
+                <dt>{{ $t('pageHardwareStatus.table.manufacturer') }}:</dt>
+                <dd>{{ tableFormatter(item.manufacturer) }}</dd>
+                <!-- Processor Type -->
+                <dt>{{ $t('pageHardwareStatus.table.processorType') }}:</dt>
+                <dd>{{ tableFormatter(item.processorType) }}</dd>
+                <!-- Processor Architecture -->
                 <dt>
                   {{ $t('pageHardwareStatus.table.processorArchitecture') }}:
                 </dt>
                 <dd>{{ tableFormatter(item.processorArchitecture) }}</dd>
-                <!-- Type -->
-                <dt>{{ $t('pageHardwareStatus.table.processorType') }}:</dt>
-                <dd>{{ tableFormatter(item.processorType) }}</dd>
-                <!-- Total cores -->
+                <!-- Instruction Set -->
+                <dt>{{ $t('pageHardwareStatus.table.instructionSet') }}:</dt>
+                <dd>{{ tableFormatter(item.instructionSet) }}</dd>
+                <!-- Version -->
+                <dt>{{ $t('pageHardwareStatus.table.version') }}:</dt>
+                <dd>{{ tableFormatter(item.version) }}</dd>
+              </dl>
+            </b-col>
+            <b-col class="mt-1" sm="6" xl="6">
+              <dl>
+                <!-- Min Speed MHz -->
+                <dt>{{ $t('pageHardwareStatus.table.minSpeedMHz') }}:</dt>
+                <dd>{{ tableFormatter(item.minSpeedMHz) }}</dd>
+                <!-- Max Speed MHz -->
+                <dt>{{ $t('pageHardwareStatus.table.maxSpeedMHz') }}:</dt>
+                <dd>{{ tableFormatter(item.maxSpeedMHz) }}</dd>
+                <!-- Total Cores -->
                 <dt>{{ $t('pageHardwareStatus.table.totalCores') }}:</dt>
                 <dd>{{ tableFormatter(item.totalCores) }}</dd>
-                <!-- Status state -->
-                <dt>{{ $t('pageHardwareStatus.table.statusState') }}:</dt>
-                <dd>{{ tableFormatter(item.statusState) }}</dd>
+                <!-- Total Threads -->
+                <dt>{{ $t('pageHardwareStatus.table.totalThreads') }}:</dt>
+                <dd>{{ tableFormatter(item.totalThreads) }}</dd>
               </dl>
             </b-col>
           </b-row>
@@ -96,7 +152,7 @@ import PageSection from '@/components/Global/PageSection';
 import IconChevron from '@carbon/icons-vue/es/chevron--down/20';
 import StatusIcon from '@/components/Global/StatusIcon';
 import TableCellCount from '@/components/Global/TableCellCount';
-
+import BVToastMixin from '@/components/Mixins/BVToastMixin';
 import TableSortMixin from '@/components/Mixins/TableSortMixin';
 import TableDataFormatterMixin from '@/components/Mixins/TableDataFormatterMixin';
 import Search from '@/components/Global/Search';
@@ -110,6 +166,7 @@ import TableRowExpandMixin, {
 export default {
   components: { IconChevron, PageSection, StatusIcon, Search, TableCellCount },
   mixins: [
+    BVToastMixin,
     TableRowExpandMixin,
     TableDataFormatterMixin,
     TableSortMixin,
@@ -138,16 +195,16 @@ export default {
           tdClass: 'text-nowrap',
         },
         {
-          key: 'partNumber',
-          label: this.$t('pageHardwareStatus.table.partNumber'),
+          key: 'locationNumber',
+          label: this.$t('pageHardwareStatus.table.locationNumber'),
           formatter: this.tableFormatter,
           sortable: true,
         },
         {
-          key: 'serialNumber',
-          label: this.$t('pageHardwareStatus.table.serialNumber'),
+          key: 'identifyLed',
+          label: this.$t('pageHardwareStatus.table.identifyLed'),
           formatter: this.tableFormatter,
-          sortable: true,
+          sortable: false,
         },
       ],
       searchFilter: searchFilter,
@@ -175,6 +232,19 @@ export default {
     onFiltered(filteredItems) {
       this.searchTotalFilteredRows = filteredItems.length;
     },
+    toggleIdentifyLedValue(row) {
+      this.$store
+        .dispatch('processors/updateIdentifyLedValue', {
+          uri: row.uri,
+          identifyLed: row.identifyLed,
+        })
+        .catch(({ message }) => this.errorToast(message));
+    },
+    // TO DO: remove hasIdentifyLed when the following is merged:
+    // https://gerrit.openbmc-project.xyz/c/openbmc/bmcweb/+/37045
+    hasIdentifyLed(identifyLed) {
+      return typeof identifyLed === 'boolean';
+    },
   },
 };
 </script>