From e24b17d2f599a34895acb9eccff3144af55484c5 Mon Sep 17 00:00:00 2001
From: Yoshie Muranaka <yoshiemuranaka@gmail.com>
Date: Mon, 8 Jun 2020 11:03:11 -0700
Subject: Add DIMM slot table to hardware status page

Add items at /redfish/v1/Systems/system/Memory endpoint to
DIMM slot table. The table is sortable and has a row expansion
to view details. The code is currently missing most properties
needed to match the design. This table will need to be revisited
when all properties are available.

Signed-off-by: Yoshie Muranaka <yoshiemuranaka@gmail.com>
Change-Id: I07cacf3403fe84431cb9fe0e4315069fc7baf27d
---
 src/views/Health/HardwareStatus/HardwareStatus.vue |  17 +++-
 .../HardwareStatus/HardwareStatusTableDimmSlot.vue | 108 +++++++++++++++++++++
 2 files changed, 121 insertions(+), 4 deletions(-)
 create mode 100644 src/views/Health/HardwareStatus/HardwareStatusTableDimmSlot.vue

(limited to 'src/views')

diff --git a/src/views/Health/HardwareStatus/HardwareStatus.vue b/src/views/Health/HardwareStatus/HardwareStatus.vue
index 2860e599..4d29a3d9 100644
--- a/src/views/Health/HardwareStatus/HardwareStatus.vue
+++ b/src/views/Health/HardwareStatus/HardwareStatus.vue
@@ -5,6 +5,9 @@
     <!-- System table -->
     <table-system />
 
+    <!-- DIMM slot table -->
+    <table-dimm-slot />
+
     <!-- Power supplies table -->
     <table-power-supplies />
   </b-container>
@@ -14,16 +17,20 @@
 import PageTitle from '@/components/Global/PageTitle';
 import TableSystem from './HardwareStatusTableStystem';
 import TablePowerSupplies from './HardwareStatusTablePowerSupplies';
+import TableDimmSlot from './HardwareStatusTableDimmSlot';
 import LoadingBarMixin from '@/components/Mixins/LoadingBarMixin';
 
 export default {
-  components: { PageTitle, TablePowerSupplies, TableSystem },
+  components: { PageTitle, TableDimmSlot, TablePowerSupplies, TableSystem },
   mixins: [LoadingBarMixin],
   created() {
     this.startLoader();
     const systemTablePromise = new Promise(resolve => {
       this.$root.$on('hardwareStatus::system::complete', () => resolve());
     });
+    const dimmSlotTablePromise = new Promise(resolve => {
+      this.$root.$on('hardwareStatus::dimmSlot::complete', () => resolve());
+    });
     const powerSuppliesTablePromise = new Promise(resolve => {
       this.$root.$on('hardwareStatus::powerSupplies::complete', () =>
         resolve()
@@ -31,9 +38,11 @@ export default {
     });
     // Combine all child component Promises to indicate
     // when page data load complete
-    Promise.all([systemTablePromise, powerSuppliesTablePromise]).finally(() =>
-      this.endLoader()
-    );
+    Promise.all([
+      systemTablePromise,
+      dimmSlotTablePromise,
+      powerSuppliesTablePromise
+    ]).finally(() => this.endLoader());
   },
   beforeRouteLeave(to, from, next) {
     // Hide loader if user navigates away from page
diff --git a/src/views/Health/HardwareStatus/HardwareStatusTableDimmSlot.vue b/src/views/Health/HardwareStatus/HardwareStatusTableDimmSlot.vue
new file mode 100644
index 00000000..e8207ef2
--- /dev/null
+++ b/src/views/Health/HardwareStatus/HardwareStatusTableDimmSlot.vue
@@ -0,0 +1,108 @@
+<template>
+  <page-section :section-title="$t('pageHardwareStatus.dimmSlot')">
+    <b-table
+      sort-icon-left
+      no-sort-reset
+      sort-by="health"
+      :items="dimms"
+      :fields="fields"
+      :sort-desc="true"
+      :sort-compare="sortCompare"
+    >
+      <!-- Expand chevron icon -->
+      <template v-slot:cell(expandRow)="row">
+        <b-button variant="link" @click="row.toggleDetails">
+          <icon-chevron />
+        </b-button>
+      </template>
+
+      <!-- Health -->
+      <template v-slot:cell(health)="{ value }">
+        <status-icon :status="statusIcon(value)" />
+        {{ value }}
+      </template>
+
+      <template v-slot:row-details="{ item }">
+        <b-container fluid>
+          <b-row>
+            <b-col sm="6" xl="4">
+              <dl>
+                <!-- Status state -->
+                <dt>{{ $t('pageHardwareStatus.table.statusState') }}:</dt>
+                <dd>{{ tableFormatter(item.statusState) }}</dd>
+              </dl>
+            </b-col>
+          </b-row>
+        </b-container>
+      </template>
+    </b-table>
+  </page-section>
+</template>
+
+<script>
+import PageSection from '@/components/Global/PageSection';
+import IconChevron from '@carbon/icons-vue/es/chevron--down/20';
+
+import StatusIcon from '@/components/Global/StatusIcon';
+import TableDataFormatter from '@/components/Mixins/TableDataFormatter';
+import TableSortMixin from '@/components/Mixins/TableSortMixin';
+
+export default {
+  components: { IconChevron, PageSection, StatusIcon },
+  mixins: [TableDataFormatter, TableSortMixin],
+  data() {
+    return {
+      fields: [
+        {
+          key: 'expandRow',
+          label: '',
+          tdClass: 'table-row-expand',
+          sortable: false
+        },
+        {
+          key: 'id',
+          label: this.$t('pageHardwareStatus.table.id'),
+          formatter: this.tableFormatter,
+          sortable: true
+        },
+        {
+          key: 'health',
+          label: this.$t('pageHardwareStatus.table.health'),
+          formatter: this.tableFormatter,
+          sortable: true
+        },
+        {
+          key: 'partNumber',
+          label: this.$t('pageHardwareStatus.table.partNumber'),
+          formatter: this.tableFormatter,
+          sortable: true
+        },
+        {
+          key: 'serialNumber',
+          label: this.$t('pageHardwareStatus.table.serialNumber'),
+          formatter: this.tableFormatter,
+          sortable: true
+        }
+      ]
+    };
+  },
+  computed: {
+    dimms() {
+      return this.$store.getters['memory/dimms'];
+    }
+  },
+  created() {
+    this.$store.dispatch('memory/getDimms').finally(() => {
+      // Emit intial data fetch complete to parent component
+      this.$root.$emit('hardwareStatus::dimmSlot::complete');
+    });
+  },
+  methods: {
+    sortCompare(a, b, key) {
+      if (key === 'health') {
+        return this.sortStatus(a, b, key);
+      }
+    }
+  }
+};
+</script>
-- 
cgit v1.2.3