Update overview layout

Layout updates uses bootstrap vue cards to display
general information. View more links and download
or export ability has been added to the overview page.

Network settings displays the hostname and the first IP
address for the first ethernet interface. Link status
was also added.

TODO: Add idle power and power mode properties in seperate
commit for each story.

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

1 files changed, 73 insertions, 48 deletions

diff --git a/src/views/Overview/OverviewNetwork.vue b/src/views/Overview/OverviewNetwork.vue
index bfb378a9..fbb81c65 100644
--- a/src/views/Overview/OverviewNetwork.vue
+++ b/src/views/Overview/OverviewNetwork.vue
@@ -1,63 +1,88 @@
 <template>
-  <div>
-    <div v-if="ethernetData.length === 0">
-      {{ $t('global.status.notAvailable') }}
-    </div>
-    <div
-      v-for="ethernetInterface in ethernetData"
-      v-else
-      :key="ethernetInterface.id"
-    >
-      <h3 class="h5 font-weight-bold">
-        {{ ethernetInterface.Id }}
-      </h3>
-      <b-row>
-        <b-col lg="6" xl="4">
-          <dl>
-            <dt>{{ $t('pageOverview.network.hostname') }}</dt>
-            <dd>{{ ethernetInterface.HostName }}</dd>
-          </dl>
-        </b-col>
-        <b-col lg="6" xl="4">
-          <dl>
-            <dt>{{ $t('pageOverview.network.macAddress') }}</dt>
-            <dd>{{ ethernetInterface.MACAddress }}</dd>
-          </dl>
-        </b-col>
-        <b-col lg="6" xl="4">
-          <dl>
-            <dt>{{ $t('pageOverview.network.ipAddress') }}</dt>
-            <dd
-              v-for="(ip, $index) in ethernetInterface.IPv4Addresses"
-              :key="$index"
-            >
-              {{ ip.Address }}
-            </dd>
-          </dl>
-        </b-col>
-      </b-row>
-    </div>
-  </div>
+  <overview-card
+    :title="$t('pageOverview.networkInformation')"
+    :to="`/settings/network`"
+  >
+    <b-row class="mt-3">
+      <b-col sm="6">
+        <dl>
+          <dt>{{ $t('pageOverview.hostname') }}</dt>
+          <dd>{{ tableFormatter(hostname) }}</dd>
+        </dl>
+      </b-col>
+      <b-col sm="6">
+        <dl>
+          <dt>{{ $t('pageOverview.linkStatus') }}</dt>
+          <dd>
+            {{ tableFormatter(linkStatus) }}
+          </dd>
+        </dl>
+      </b-col>
+    </b-row>
+    <b-row>
+      <b-col>
+        <dl>
+          <dt>{{ $t('pageOverview.ipv4') }}</dt>
+          <dd>
+            {{ tableFormatter(ipStaticAddress) }}
+          </dd>
+        </dl>
+      </b-col>
+      <b-col>
+        <dl>
+          <dt>{{ $t('pageOverview.dhcp') }}</dt>
+          <dd>
+            {{ tableFormatter(ipDhcpAddress) }}
+          </dd>
+        </dl>
+      </b-col>
+    </b-row>
+  </overview-card>
 </template>
 
 <script>
+import OverviewCard from './OverviewCard';
+import TableDataFormatterMixin from '@/components/Mixins/TableDataFormatterMixin';
+import { mapState } from 'vuex';
+
 export default {
   name: 'Network',
+  components: {
+    OverviewCard,
+  },
+  mixins: [TableDataFormatterMixin],
+  data() {
+    return {
+      ipDhcpAddress: '',
+    };
+  },
   computed: {
-    ethernetData() {
-      return this.$store.getters['network/ethernetData'];
-    },
+    ...mapState({
+      ethernetData: (state) => state.network.ethernetData[0],
+      hostname() {
+        return this.ethernetData?.HostName;
+      },
+      linkStatus() {
+        return this.ethernetData?.LinkStatus;
+      },
+      ipStaticAddress() {
+        return this.ethernetData?.IPv4StaticAddresses[0].Address;
+      },
+    }),
   },
   created() {
     this.$store.dispatch('network/getEthernetData').finally(() => {
       this.$root.$emit('overview-network-complete');
     });
+    this.getDhcpInfo();
+  },
+  methods: {
+    getDhcpInfo() {
+      const dhcp = this.ethernetData.IPv4Addresses.filter(
+        (ipv4) => ipv4.AddressOrigin === 'DHCP'
+      );
+      this.ipDhcpAddress = dhcp[0].Address;
+    },
   },
 };
 </script>
-
-<style lang="scss" scoped>
-dd {
-  margin-bottom: 0;
-}
-</style>