1 files changed, 11 insertions, 2 deletions
diff --git a/src/views/Settings/Network/NetworkGlobalSettings.vue b/src/views/Settings/Network/NetworkGlobalSettings.vue
index fc82c86d..30287673 100644
--- a/src/views/Settings/Network/NetworkGlobalSettings.vue
+++ b/src/views/Settings/Network/NetworkGlobalSettings.vue
@@ -6,7 +6,12 @@
     <b-row>
       <b-col md="3">
         <dl>
-          <dt>{{ $t('pageNetwork.hostname') }}</dt>
+          <dt>
+            {{ $t('pageNetwork.hostname') }}
+            <b-button variant="link" class="p-1" @click="initSettingsModal()">
+              <icon-edit :title="$t('pageNetwork.modal.editHostnameTitle')" />
+            </b-button>
+          </dt>
           <dd>{{ dataFormatter(firstInterface.hostname) }}</dd>
         </dl>
       </b-col>
@@ -73,13 +78,14 @@
 
 <script>
 import BVToastMixin from '@/components/Mixins/BVToastMixin';
+import IconEdit from '@carbon/icons-vue/es/edit/16';
 import DataFormatterMixin from '@/components/Mixins/DataFormatterMixin';
 import PageSection from '@/components/Global/PageSection';
 import { mapState } from 'vuex';
 
 export default {
   name: 'GlobalNetworkSettings',
-  components: { PageSection },
+  components: { IconEdit, PageSection },
   mixins: [BVToastMixin, DataFormatterMixin],
 
   data() {
@@ -147,6 +153,9 @@ export default {
         .then((message) => this.successToast(message))
         .catch(({ message }) => this.errorToast(message));
     },
+    initSettingsModal() {
+      this.$bvModal.show('modal-hostname');
+    },
   },
 };
 </script>