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>