Add Hardware status page and system table

Adds ability to see system information in table format with a row
expansion details view. Modified tables styles to add table borders.

Created global mixin for table data formatting:
- Show '--' for undefined or empty string values
- Map Redfish health status options to status-icon values

Signed-off-by: Yoshie Muranaka <yoshiemuranaka@gmail.com>
Change-Id: I5b45c37997647f5a265c1e84eb53f0b51699ee20

3 files changed, 156 insertions, 0 deletions

diff --git a/src/views/Health/HardwareStatus/HardwareStatus.vue b/src/views/Health/HardwareStatus/HardwareStatus.vue
new file mode 100644
index 00000000..9f34b534
--- /dev/null
+++ b/src/views/Health/HardwareStatus/HardwareStatus.vue
@@ -0,0 +1,34 @@
+<template>
+  <b-container fluid="xl">
+    <page-title />
+
+    <!-- System table -->
+    <table-system />
+  </b-container>
+</template>
+
+<script>
+import PageTitle from '@/components/Global/PageTitle';
+import TableSystem from './HardwareStatusTableStystem';
+import LoadingBarMixin from '@/components/Mixins/LoadingBarMixin';
+
+export default {
+  components: { PageTitle, TableSystem },
+  mixins: [LoadingBarMixin],
+  created() {
+    this.startLoader();
+    const systemTablePromise = new Promise(resolve => {
+      this.$root.$on('hardwareStatus::system::complete', () => resolve());
+    });
+    // Combine all child component Promises to indicate
+    // when page data load complete
+    Promise.all([systemTablePromise]).finally(() => this.endLoader());
+  },
+  beforeRouteLeave(to, from, next) {
+    // Hide loader if user navigates away from page
+    // before requests complete
+    this.hideLoader();
+    next();
+  }
+};
+</script>
diff --git a/src/views/Health/HardwareStatus/HardwareStatusTableStystem.vue b/src/views/Health/HardwareStatus/HardwareStatusTableStystem.vue
new file mode 100644
index 00000000..3894eceb
--- /dev/null
+++ b/src/views/Health/HardwareStatus/HardwareStatusTableStystem.vue
@@ -0,0 +1,120 @@
+<template>
+  <page-section :section-title="$t('pageHardwareStatus.system')">
+    <b-table :items="systems" :fields="fields">
+      <!-- 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>
+                <!-- Asset tag -->
+                <dt>{{ $t('pageHardwareStatus.table.assetTag') }}:</dt>
+                <dd>{{ tableFormatter(item.assetTag) }}</dd>
+                <br />
+                <!-- Description -->
+                <dt>{{ $t('pageHardwareStatus.table.description') }}:</dt>
+                <dd>{{ tableFormatter(item.description) }}</dd>
+                <br />
+                <!-- Indicator LED -->
+                <dt>{{ $t('pageHardwareStatus.table.indicatorLed') }}:</dt>
+                <dd>{{ tableFormatter(item.indicatorLed) }}</dd>
+                <br />
+                <!-- Model -->
+                <dt>{{ $t('pageHardwareStatus.table.model') }}:</dt>
+                <dd>{{ tableFormatter(item.model) }}</dd>
+              </dl>
+            </b-col>
+            <b-col sm="6" xl="4">
+              <dl>
+                <!-- Power state -->
+                <dt>{{ $t('pageHardwareStatus.table.powerState') }}:</dt>
+                <dd>{{ tableFormatter(item.powerState) }}</dd>
+                <br />
+                <!-- Health rollup -->
+                <dt>
+                  {{ $t('pageHardwareStatus.table.statusHealthRollup') }}:
+                </dt>
+                <dd>{{ tableFormatter(item.healthRollup) }}</dd>
+                <br />
+                <!-- Status state -->
+                <dt>{{ $t('pageHardwareStatus.table.statusState') }}:</dt>
+                <dd>{{ tableFormatter(item.statusState) }}</dd>
+                <br />
+                <!-- System type -->
+                <dt>{{ $t('pageHardwareStatus.table.systemType') }}:</dt>
+                <dd>{{ tableFormatter(item.systemType) }}</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';
+
+export default {
+  components: { IconChevron, PageSection, StatusIcon },
+  mixins: [TableDataFormatter],
+  data() {
+    return {
+      fields: [
+        {
+          key: 'expandRow',
+          label: '',
+          tdClass: 'table-row-expand'
+        },
+        {
+          key: 'id',
+          label: this.$t('pageHardwareStatus.table.id'),
+          formatter: this.tableFormatter
+        },
+        {
+          key: 'health',
+          label: this.$t('pageHardwareStatus.table.health'),
+          formatter: this.tableFormatter
+        },
+        {
+          key: 'partNumber',
+          label: this.$t('pageHardwareStatus.table.partNumber'),
+          formatter: this.tableFormatter
+        },
+        {
+          key: 'serialNumber',
+          label: this.$t('pageHardwareStatus.table.serialNumber'),
+          formatter: this.tableFormatter
+        }
+      ]
+    };
+  },
+  computed: {
+    systems() {
+      return this.$store.getters['system/systems'];
+    }
+  },
+  created() {
+    this.$store.dispatch('system/getSystem').finally(() => {
+      // Emit intial data fetch complete to parent component
+      this.$root.$emit('hardwareStatus::system::complete');
+    });
+  }
+};
+</script>
diff --git a/src/views/Health/HardwareStatus/index.js b/src/views/Health/HardwareStatus/index.js
new file mode 100644
index 00000000..25d4551c
--- /dev/null
+++ b/src/views/Health/HardwareStatus/index.js
@@ -0,0 +1,2 @@
+import HardwareStatus from './HardwareStatus.vue';
+export default HardwareStatus;