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

5 files changed, 195 insertions, 91 deletions

diff --git a/src/locales/en.json b/src/locales/en.json
index 9d89ce60..dd3d588b 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -5,6 +5,10 @@
     },
     "on": "on",
     "off": "off",
+    "state": {
+      "notAvailable": "Not available",
+      "notEnabled": "Not enabled"
+    },
     "actions": {
       "confirm": "Confirm",
       "cancel": "Cancel",
@@ -54,27 +58,31 @@
   },
   "overview": {
     "events": {
-      "noHighEventsMsg": "There are no high priority events to display at this time."
+      "noHighEventsMsg": "There are no high priority events to display at this time.",
+      "date": "Date",
+      "description": "Description",
+      "id": "ID",
+      "refCode": "Reference code",
+      "viewAllButton": "View all event logs"
     },
     "firmwareVersion": "Firmware version",
-    "hostname": "Hostname",
-    "ipAddress": "IP address",
-    "macAddress": "MAC address",
     "manufacturer": "Manufacturer",
     "model": "Model",
+    "network": {
+      "hostname": "Hostname",
+      "ipAddress": "IP address",
+      "macAddress": "MAC address"
+    },
     "powerCap": "Power cap",
     "powerConsumption": "Power consumption",
     "sectionTitle": {
       "bmcInformation": "BMC information",
       "highPriorityEvents": "High priority events",
+      "networkInformation": "Network information",
       "powerConsumption": "@:overview.powerConsumption",
       "serverInformation": "Server information"
     },
     "serialNumber": "Serial number",
-    "state": {
-      "notAvailable": "Not available",
-      "notEnabled": "Not enabled"
-    },
     "quicklinks": {
       "bmcTime": "BMC time",
       "editNetworkSettings": "Edit network settings",
diff --git a/src/store/modules/Configuration/NetworkSettingsStore.js b/src/store/modules/Configuration/NetworkSettingsStore.js
index ee58a77b..3b1f2320 100644
--- a/src/store/modules/Configuration/NetworkSettingsStore.js
+++ b/src/store/modules/Configuration/NetworkSettingsStore.js
@@ -3,40 +3,36 @@ import api from '../../api';
 const NetworkSettingsStore = {
   namespaced: true,
   state: {
-    networkData: null,
-    ipAddress: '--',
-    macAddress: '--'
+    ethernetData: []
   },
   getters: {
-    networkData: state => state.networkData,
-    ipAddress: state => state.ipAddress,
-    macAddress: state => state.macAddress
+    ethernetData: state => state.ethernetData
   },
   mutations: {
-    setNetworkData: (state, networkData) => (state.networkData = networkData),
-    setIpAddress: (state, ipAddress) => (state.ipAddress = ipAddress),
-    setMacAddress: (state, macAddress) => (state.macAddress = macAddress)
+    setEthernetData: (state, ethernetData) =>
+      (state.ethernetData = ethernetData)
   },
   actions: {
-    getNetworkData({ commit }) {
+    getEthernetData({ commit }) {
       api
-        .get('/xyz/openbmc_project/network/enumerate')
-        .then(response => {
-          const networkData = response.data.data;
-          const ipAddresses = [];
-          const interfaceId = /eth[0-9]/;
-          for (let key in networkData) {
-            if (key.includes('ipv4')) {
-              ipAddresses.push(networkData[key].Address);
-            }
-            if (
-              key.match(interfaceId) &&
-              networkData[key].MACAddress !== undefined
-            ) {
-              commit('setMacAddress', networkData[key].MACAddress);
-            }
-          }
-          commit('setIpAddress', ipAddresses);
+        .get('/redfish/v1/Managers/bmc/EthernetInterfaces')
+        .then(response =>
+          response.data.Members.map(
+            ethernetInterface => ethernetInterface['@odata.id']
+          )
+        )
+        .then(ethernetInterfaceIds =>
+          api.all(
+            ethernetInterfaceIds.map(ethernetInterface =>
+              api.get(ethernetInterface)
+            )
+          )
+        )
+        .then(ethernetInterfaces => {
+          const ethernetData = ethernetInterfaces.map(
+            ethernetInterface => ethernetInterface.data
+          );
+          commit('setEthernetData', ethernetData);
         })
         .catch(error => {
           console.log('Network Data:', error);
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>