Fix overview error

Console errors were related to the power and network card components from
https://gerrit.openbmc-project.xyz/c/openbmc/webui-vue/+/46511

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

4 files changed, 35 insertions, 41 deletions

diff --git a/src/locales/en-US.json b/src/locales/en-US.json
index 35e71466..7e35d450 100644
--- a/src/locales/en-US.json
+++ b/src/locales/en-US.json
@@ -570,7 +570,7 @@
     "dumps": "Dumps",
     "eventLogs": "Event logs",
     "firmwareInformation": "Firmware information",
-    "hostname": "Hostname",
+    "hostName": "Hostname",
     "idlePower": "Idle power",
     "inventory": "Inventory and LEDs",
     "ipv4": "IPv4",
diff --git a/src/store/modules/Settings/NetworkStore.js b/src/store/modules/Settings/NetworkStore.js
index 4040658a..65a83b44 100644
--- a/src/store/modules/Settings/NetworkStore.js
+++ b/src/store/modules/Settings/NetworkStore.js
@@ -8,11 +8,13 @@ const NetworkStore = {
     defaultGateway: '',
     ethernetData: [],
     interfaceOptions: [],
+    globalNetworkSettings: [],
   },
   getters: {
     defaultGateway: (state) => state.defaultGateway,
     ethernetData: (state) => state.ethernetData,
     interfaceOptions: (state) => state.interfaceOptions,
+    globalNetworkSettings: (state) => state.globalNetworkSettings,
   },
   mutations: {
     setDefaultGateway: (state, defaultGateway) =>
@@ -21,6 +23,24 @@ const NetworkStore = {
       (state.ethernetData = ethernetData),
     setInterfaceOptions: (state, interfaceOptions) =>
       (state.interfaceOptions = interfaceOptions),
+    setGlobalNetworkSettings: (state, data) => {
+      state.globalNetworkSettings = data.map(({ data }) => {
+        const {
+          HostName,
+          LinkStatus,
+          IPv4StaticAddresses,
+          IPv4Addresses,
+        } = data;
+        return {
+          hostname: HostName,
+          linkStatus: LinkStatus,
+          staticAddress: IPv4StaticAddresses[0]?.Address,
+          dhcpAddress: IPv4Addresses.filter(
+            (ipv4) => ipv4.AddressOrigin === 'DHCP'
+          ),
+        };
+      });
+    },
   },
   actions: {
     async getEthernetData({ commit }) {
@@ -52,6 +72,7 @@ const NetworkStore = {
             return ipv4.Gateway;
           });
 
+          commit('setGlobalNetworkSettings', ethernetInterfaces);
           commit('setDefaultGateway', defaultGateway[0]);
           commit('setEthernetData', ethernetData);
           commit('setInterfaceOptions', interfaceOptions);
diff --git a/src/views/Overview/OverviewNetwork.vue b/src/views/Overview/OverviewNetwork.vue
index 1c1001e1..9c66773c 100644
--- a/src/views/Overview/OverviewNetwork.vue
+++ b/src/views/Overview/OverviewNetwork.vue
@@ -1,20 +1,21 @@
 <template>
   <overview-card
+    v-if="network"
     :title="$t('pageOverview.networkInformation')"
     :to="`/settings/network`"
   >
     <b-row class="mt-3">
       <b-col sm="6">
         <dl>
-          <dt>{{ $t('pageOverview.hostname') }}</dt>
-          <dd>{{ dataFormatter(hostname) }}</dd>
+          <dt>{{ $t('pageOverview.hostName') }}</dt>
+          <dd>{{ dataFormatter(network.hostname) }}</dd>
         </dl>
       </b-col>
       <b-col sm="6">
         <dl>
           <dt>{{ $t('pageOverview.linkStatus') }}</dt>
           <dd>
-            {{ dataFormatter(linkStatus) }}
+            {{ dataFormatter(network.linkStatus) }}
           </dd>
         </dl>
       </b-col>
@@ -24,7 +25,7 @@
         <dl>
           <dt>{{ $t('pageOverview.ipv4') }}</dt>
           <dd>
-            {{ dataFormatter(ipStaticAddress) }}
+            {{ dataFormatter(network.staticAddress) }}
           </dd>
         </dl>
       </b-col>
@@ -32,7 +33,11 @@
         <dl>
           <dt>{{ $t('pageOverview.dhcp') }}</dt>
           <dd>
-            {{ dataFormatter(ipDhcpAddress) }}
+            {{
+              dataFormatter(
+                network.dhcpAddress.length !== 0 ? network.dhcpAddress : null
+              )
+            }}
           </dd>
         </dl>
       </b-col>
@@ -43,7 +48,6 @@
 <script>
 import OverviewCard from './OverviewCard';
 import DataFormatterMixin from '@/components/Mixins/DataFormatterMixin';
-import { mapState } from 'vuex';
 
 export default {
   name: 'Network',
@@ -51,38 +55,15 @@ export default {
     OverviewCard,
   },
   mixins: [DataFormatterMixin],
-  data() {
-    return {
-      ipDhcpAddress: '',
-    };
-  },
   computed: {
-    ...mapState({
-      ethernetData: (state) => state.network.ethernetData[0],
-      hostname() {
-        return this.ethernetData?.HostName;
-      },
-      linkStatus() {
-        return this.ethernetData?.LinkStatus;
-      },
-      ipStaticAddress() {
-        return this.ethernetData?.IPv4StaticAddresses[0].Address;
-      },
-    }),
+    network() {
+      return this.$store.getters['network/globalNetworkSettings'][0];
+    },
   },
   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>
diff --git a/src/views/Overview/OverviewPower.vue b/src/views/Overview/OverviewPower.vue
index a3bd1941..0d84c76c 100644
--- a/src/views/Overview/OverviewPower.vue
+++ b/src/views/Overview/OverviewPower.vue
@@ -18,14 +18,6 @@
           <dd v-else>{{ powerCapValue }} W</dd>
         </dl>
       </b-col>
-      <b-col>
-        <dl>
-          <dt>{{ $t('pageOverview.idlePower') }}</dt>
-          <dd>{{ dataFormatter(idlePower) }}</dd>
-          <dt>{{ $t('pageOverview.powerMode') }}</dt>
-          <dd>{{ dataFormatter(powerMode) }}</dd>
-        </dl>
-      </b-col>
     </b-row>
   </overview-card>
 </template>