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/NetworkInterfaceSettings.vue

diff --git a/src/views/Settings/Network/NetworkInterfaceSettings.vue b/src/views/Settings/Network/NetworkInterfaceSettings.vue
index bdcba4d..023d29b 100644
--- a/src/views/Settings/Network/NetworkInterfaceSettings.vue
+++ b/src/views/Settings/Network/NetworkInterfaceSettings.vue
@@ -24,7 +24,9 @@
       <b-row>
         <b-col md="3">
           <dl>
-            <dt>{{ $t('pageNetwork.fqdn') }}</dt>
+            <dt>
+              {{ $t('pageNetwork.fqdn') }}
+            </dt>
             <dd>
               {{ dataFormatter(fqdn) }}
             </dd>
@@ -32,7 +34,18 @@
         </b-col>
         <b-col md="3">
           <dl class="text-nowrap">
-            <dt>{{ $t('pageNetwork.macAddress') }}</dt>
+            <dt>
+              {{ $t('pageNetwork.macAddress') }}
+              <b-button
+                variant="link"
+                class="p-1"
+                @click="initMacAddressModal()"
+              >
+                <icon-edit
+                  :title="$t('pageNetwork.modal.editMacAddressTitle')"
+                />
+              </b-button>
+            </dt>
             <dd>
               {{ dataFormatter(macAddress) }}
             </dd>
@@ -45,6 +58,7 @@
 
 <script>
 import BVToastMixin from '@/components/Mixins/BVToastMixin';
+import IconEdit from '@carbon/icons-vue/es/edit/16';
 import PageSection from '@/components/Global/PageSection';
 import DataFormatterMixin from '@/components/Mixins/DataFormatterMixin';
 import { mapState } from 'vuex';
@@ -52,6 +66,7 @@
 export default {
   name: 'Ipv4Table',
   components: {
+    IconEdit,
     PageSection,
   },
   mixins: [BVToastMixin, DataFormatterMixin],
@@ -94,6 +109,9 @@
       this.fqdn = this.ethernetData[this.selectedInterface].FQDN;
       this.macAddress = this.ethernetData[this.selectedInterface].MACAddress;
     },
+    initMacAddressModal() {
+      this.$bvModal.show('modal-mac-address');
+    },
   },
 };
 </script>