Update overview events table and overview network layout

- Convert events list group to bootstrap table
- Add ethernet interfaces to overview using redfish

Signed-off-by: Dixsie Wolmers <dixsie@ibm.com>
Change-Id: I633f03ba4a65358861664a869b35adf5358c45e6

3 files changed, 156 insertions, 56 deletions

diff --git a/src/views/Overview/Overview.vue b/src/views/Overview/Overview.vue
index 9fbc0dd5..17d66849 100644
--- a/src/views/Overview/Overview.vue
+++ b/src/views/Overview/Overview.vue
@@ -5,11 +5,32 @@
       <overview-quick-links />
     </div>
     <b-row>
-      <b-col lg="8" sm="12">
+      <b-col>
         <page-section
           :section-title="$t('overview.sectionTitle.serverInformation')"
         >
           <b-row>
+            <b-col>
+              <dl>
+                <dt>Firmware version</dt>
+                <dd>{{ bmcActiveVersion }}</dd>
+              </dl>
+            </b-col>
+          </b-row>
+        </page-section>
+        <b-row>
+          <b-col>
+            <page-section
+              :section-title="$t('overview.sectionTitle.networkInformation')"
+            >
+              <overview-network />
+            </page-section>
+          </b-col>
+        </b-row>
+      </b-col>
+      <b-col>
+        <page-section section-title="Server information">
+          <b-row>
             <b-col sm="6">
               <dl>
                 <dt>{{ $t('overview.model') }}</dt>
@@ -37,36 +58,6 @@
           </b-row>
         </page-section>
         <page-section
-          :section-title="$t('overview.sectionTitle.bmcInformation')"
-        >
-          <b-row>
-            <b-col sm="6">
-              <dl>
-                <dt>{{ $t('overview.hostname') }}</dt>
-                <dd>{{ hostName }}</dd>
-              </dl>
-            </b-col>
-            <b-col sm="6">
-              <dl>
-                <dt>{{ $t('overview.macAddress') }}</dt>
-                <dd>{{ macAddress }}</dd>
-              </dl>
-            </b-col>
-            <b-col sm="6">
-              <dl>
-                <dt>{{ $t('overview.ipAddress') }}</dt>
-                <dd v-for="ip in ipAddress" :key="ip.id">{{ ip }}</dd>
-              </dl>
-            </b-col>
-            <b-col sm="6">
-              <dl>
-                <dt>{{ $t('overview.firmwareVersion') }}</dt>
-                <dd>{{ bmcActiveVersion }}</dd>
-              </dl>
-            </b-col>
-          </b-row>
-        </page-section>
-        <page-section
           :section-title="$t('overview.sectionTitle.powerConsumption')"
         >
           <b-row>
@@ -74,7 +65,7 @@
               <dl>
                 <dt>{{ $t('overview.powerConsumption') }}</dt>
                 <dd v-if="!powerConsumption">
-                  {{ $t('overview.state.notAvailable') }}
+                  {{ $t('global.state.notAvailable') }}
                 </dd>
                 <dd v-else>{{ powerConsumption }} W</dd>
               </dl>
@@ -83,7 +74,7 @@
               <dl>
                 <dt>{{ $t('overview.powerCap') }}</dt>
                 <dd v-if="powerCapData">{{ powerCapData }} W</dd>
-                <dd v-else>{{ $t('overview.state.notEnabled') }}</dd>
+                <dd v-else>{{ $t('global.state.notEnabled') }}</dd>
               </dl>
             </b-col>
           </b-row>
@@ -101,14 +92,17 @@
 <script>
 import OverviewQuickLinks from './OverviewQuickLinks';
 import OverviewEvents from './OverviewEvents';
+import OverviewNetwork from './OverviewNetwork';
 import PageTitle from '../../components/Global/PageTitle';
 import PageSection from '../../components/Global/PageSection';
 import { mapState } from 'vuex';
+
 export default {
   name: 'Overview',
   components: {
     OverviewQuickLinks,
     OverviewEvents,
+    OverviewNetwork,
     PageTitle,
     PageSection
   },
@@ -120,9 +114,7 @@ export default {
     hostActiveVersion: state => state.firmware.hostActiveVersion,
     bmcActiveVersion: state => state.firmware.bmcActiveVersion,
     powerConsumption: state => state.powerConsumption.powerConsumption,
-    powerCapData: state => state.powerCap.powerCapData,
-    ipAddress: state => state.networkSettings.ipAddress,
-    macAddress: state => state.networkSettings.macAddress
+    powerCapValue: state => state.powerCap.powerCapValue
   }),
   created() {
     this.getOverviewInfo();
@@ -134,7 +126,6 @@ export default {
       this.$store.dispatch('firmware/getFirmwareInfo');
       this.$store.dispatch('powerConsumption/getPowerData');
       this.$store.dispatch('powerCap/getPowerCapData');
-      this.$store.dispatch('networkSettings/getNetworkData');
     }
   }
 };
@@ -143,6 +134,12 @@ export default {
 <style lang="scss" scoped>
 .quicklinks-section {
   margin-bottom: $spacer * 2;
-  margin-left: -1rem;
+  margin-left: $spacer * -1;
+}
+
+dd {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 </style>
diff --git a/src/views/Overview/OverviewEvents.vue b/src/views/Overview/OverviewEvents.vue
index a08fb549..b85142b8 100644
--- a/src/views/Overview/OverviewEvents.vue
+++ b/src/views/Overview/OverviewEvents.vue
@@ -1,30 +1,55 @@
 <template>
   <div>
-    <b-list-group v-for="logData in eventLogData" :key="logData.id">
-      <b-list-group-item href="#" class="flex-column align-items-start">
-        {{ '#' + logData.logId }}
-        <b-badge variant="danger">{{ logData.priority }}</b-badge>
-        <div class="d-flex w-100 justify-content-between">
-          <small>{{
-            logData.Timestamp | date('MMM DD YYYY HH:MM:SS A ZZ')
-          }}</small>
-          <chevron-right16 />
-        </div>
-        <p class="mb-1">{{ logData.eventID }}: {{ logData.description }}</p>
-      </b-list-group-item>
-    </b-list-group>
-    <b-list-group v-if="eventLogData.length === 0">
+    <div v-if="eventLogData.length == 0">
       {{ $t('overview.events.noHighEventsMsg') }}
-    </b-list-group>
+    </div>
+    <div v-else>
+      <!-- TODO: link to event log -->
+      <b-button variant="link" href="#">
+        {{ $t('overview.events.viewAllButton') }}
+      </b-button>
+      <b-table
+        head-variant="dark"
+        per-page="5"
+        sort-by="logId"
+        sort-desc
+        stacked="sm"
+        :items="eventLogData"
+        :fields="fields"
+      >
+        <template v-slot:cell(timestamp)="data">
+          {{ data.value | date('hh:MM:SS A') }} <br />
+          {{ data.value | date('dddd, MMM DD, YYYY') }}
+        </template>
+      </b-table>
+    </div>
   </div>
 </template>
 
 <script>
-import ChevronRight16 from '@carbon/icons-vue/es/chevron--right/16';
 export default {
   name: 'Events',
-  components: {
-    ChevronRight16
+  data() {
+    return {
+      fields: [
+        {
+          key: 'logId',
+          label: this.$t('overview.events.id')
+        },
+        {
+          key: 'eventID',
+          label: this.$t('overview.events.refCode')
+        },
+        {
+          key: 'timestamp',
+          label: this.$t('overview.events.date')
+        },
+        {
+          key: 'description',
+          label: this.$t('overview.events.description')
+        }
+      ]
+    };
   },
   computed: {
     eventLogData() {
@@ -41,3 +66,9 @@ export default {
   }
 };
 </script>
+
+<style lang="scss" scoped>
+.btn {
+  @include float-right;
+}
+</style>
diff --git a/src/views/Overview/OverviewNetwork.vue b/src/views/Overview/OverviewNetwork.vue
new file mode 100644
index 00000000..69a727de
--- /dev/null
+++ b/src/views/Overview/OverviewNetwork.vue
@@ -0,0 +1,72 @@
+<template>
+  <div>
+    <div v-if="ethernetData.length === 0">
+      {{ $t('global.state.notAvailable') }}
+    </div>
+    <div
+      v-for="ethernetInterface in ethernetData"
+      v-else
+      :key="ethernetInterface.id"
+    >
+      <p class="h6 interface-name font-weight-bold">
+        {{ ethernetInterface.Id }}
+      </p>
+      <b-row>
+        <b-col md="12" lg="4">
+          <dl>
+            <dt>{{ $t('overview.network.hostname') }}</dt>
+            <dd>{{ ethernetInterface.HostName }}</dd>
+          </dl>
+        </b-col>
+        <b-col md="12" lg="4">
+          <dl>
+            <dt>{{ $t('overview.network.macAddress') }}</dt>
+            <dd>{{ ethernetInterface.MACAddress }}</dd>
+          </dl>
+        </b-col>
+        <b-col md="12" lg="4">
+          <dl>
+            <dt>{{ $t('overview.network.ipAddress') }}</dt>
+            <dd
+              v-for="(ip, $index) in ethernetInterface.IPv4Addresses"
+              :key="$index"
+            >
+              {{ ip.Address }}
+            </dd>
+          </dl>
+        </b-col>
+      </b-row>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Network',
+  computed: {
+    ethernetData() {
+      return this.$store.getters['networkSettings/ethernetData'];
+    }
+  },
+  created() {
+    this.getEthernetData();
+  },
+  methods: {
+    getEthernetData() {
+      this.$store.dispatch('networkSettings/getEthernetData');
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.interface-name {
+  text-transform: capitalize;
+}
+dd {
+  margin-bottom: 0;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+</style>