commit 12dc20c3701fe58b7d827ed44d65ac67cee8a4a6
author Dixsie Wolmers <dixsie@ibm.com> Fri Dec 03 14:29:26 2021 -0600
committer Dixsie Wolmers <dixsiew@gmail.com> Fri Dec 03 20:45:37 2021 +0000
tree 8d7c12d8b33959b30688f80d7f94ae06dc66b134
parent b34349d4139230fb4ca99bf89a6b0e1f707e58e2

Network settings: Edit hostname and MAC address

Adds modals to edit hostname and mac address per interface.

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

src/views/Settings/Network/Network.vue

diff --git a/src/views/Settings/Network/Network.vue b/src/views/Settings/Network/Network.vue
index 729a7a3..2abbcd7 100644
--- a/src/views/Settings/Network/Network.vue
+++ b/src/views/Settings/Network/Network.vue
@@ -4,7 +4,7 @@
     <!-- Global settings for all interfaces -->
     <network-global-settings />
     <!-- Interface tabs -->
-    <page-section v-if="ethernetData">
+    <page-section v-show="ethernetData">
       <b-row>
         <b-col>
           <b-card no-body>
@@ -34,6 +34,8 @@
     <!-- Modals -->
     <modal-ipv4 :default-gateway="defaultGateway" @ok="saveIpv4Address" />
     <modal-dns @ok="saveDnsAddress" />
+    <modal-hostname :hostname="currentHostname" @ok="saveSettings" />
+    <modal-mac-address :mac-address="currentMacAddress" @ok="saveSettings" />
   </b-container>
 </template>
 
@@ -41,6 +43,8 @@
 import BVToastMixin from '@/components/Mixins/BVToastMixin';
 import DataFormatterMixin from '@/components/Mixins/DataFormatterMixin';
 import LoadingBarMixin, { loading } from '@/components/Mixins/LoadingBarMixin';
+import ModalMacAddress from './ModalMacAddress.vue';
+import ModalHostname from './ModalHostname.vue';
 import ModalIpv4 from './ModalIpv4.vue';
 import ModalDns from './ModalDns.vue';
 import NetworkGlobalSettings from './NetworkGlobalSettings.vue';
@@ -54,6 +58,8 @@
 export default {
   name: 'Network',
   components: {
+    ModalHostname,
+    ModalMacAddress,
     ModalIpv4,
     ModalDns,
     NetworkGlobalSettings,
@@ -70,6 +76,8 @@
   },
   data() {
     return {
+      currentHostname: '',
+      currentMacAddress: '',
       defaultGateway: '',
       loading,
       tabIndex: 0,
@@ -80,7 +88,7 @@
   },
   watch: {
     ethernetData() {
-      this.getGateway();
+      this.getModalInfo();
     },
   },
   created() {
@@ -108,10 +116,18 @@
     ]).finally(() => this.endLoader());
   },
   methods: {
-    getGateway() {
+    getModalInfo() {
       this.defaultGateway = this.$store.getters[
         'network/globalNetworkSettings'
       ][this.tabIndex].defaultGateway;
+
+      this.currentHostname = this.$store.getters[
+        'network/globalNetworkSettings'
+      ][this.tabIndex].hostname;
+
+      this.currentMacAddress = this.$store.getters[
+        'network/globalNetworkSettings'
+      ][this.tabIndex].macAddress;
     },
     getTabIndex(selectedIndex) {
       this.tabIndex = selectedIndex;
@@ -120,9 +136,7 @@
         'network/setSelectedTabId',
         this.ethernetData[selectedIndex].Id
       );
-      this.defaultGateway = this.$store.getters[
-        'network/globalNetworkSettings'
-      ][this.tabIndex].defaultGateway;
+      this.getModalInfo();
     },
     saveIpv4Address(modalFormData) {
       this.startLoader();
@@ -140,6 +154,14 @@
         .catch(({ message }) => this.errorToast(message))
         .finally(() => this.endLoader());
     },
+    saveSettings(modalFormData) {
+      this.startLoader();
+      this.$store
+        .dispatch('network/saveSettings', modalFormData)
+        .then((message) => this.successToast(message))
+        .catch(({ message }) => this.errorToast(message))
+        .finally(() => this.endLoader());
+    },
   },
 };
 </script>