From 3f4094d08b873e17464a51c817ea7d41177f848d Mon Sep 17 00:00:00 2001
From: "Andrey V.Kosteltsev" <AKosteltsev@IBS.RU>
Date: Mon, 4 Jul 2022 23:11:28 +0300
Subject: IBS: _ibs UI Theme

---
 src/views/_ibs/Settings/Network/ModalDns.vue       |  92 +++++++++++
 src/views/_ibs/Settings/Network/ModalHostname.vue  | 110 ++++++++++++++
 src/views/_ibs/Settings/Network/ModalIpv4.vue      | 165 ++++++++++++++++++++
 .../_ibs/Settings/Network/ModalMacAddress.vue      | 109 +++++++++++++
 src/views/_ibs/Settings/Network/Network.vue        | 167 ++++++++++++++++++++
 .../Settings/Network/NetworkGlobalSettings.vue     | 161 ++++++++++++++++++++
 .../Settings/Network/NetworkInterfaceSettings.vue  | 117 ++++++++++++++
 src/views/_ibs/Settings/Network/TableDns.vue       | 145 ++++++++++++++++++
 src/views/_ibs/Settings/Network/TableIpv4.vue      | 169 +++++++++++++++++++++
 src/views/_ibs/Settings/Network/index.js           |   2 +
 10 files changed, 1237 insertions(+)
 create mode 100644 src/views/_ibs/Settings/Network/ModalDns.vue
 create mode 100644 src/views/_ibs/Settings/Network/ModalHostname.vue
 create mode 100644 src/views/_ibs/Settings/Network/ModalIpv4.vue
 create mode 100644 src/views/_ibs/Settings/Network/ModalMacAddress.vue
 create mode 100644 src/views/_ibs/Settings/Network/Network.vue
 create mode 100644 src/views/_ibs/Settings/Network/NetworkGlobalSettings.vue
 create mode 100644 src/views/_ibs/Settings/Network/NetworkInterfaceSettings.vue
 create mode 100644 src/views/_ibs/Settings/Network/TableDns.vue
 create mode 100644 src/views/_ibs/Settings/Network/TableIpv4.vue
 create mode 100644 src/views/_ibs/Settings/Network/index.js

(limited to 'src/views/_ibs/Settings/Network')

diff --git a/src/views/_ibs/Settings/Network/ModalDns.vue b/src/views/_ibs/Settings/Network/ModalDns.vue
new file mode 100644
index 00000000..7f127173
--- /dev/null
+++ b/src/views/_ibs/Settings/Network/ModalDns.vue
@@ -0,0 +1,92 @@
+<template>
+  <b-modal
+    id="modal-dns"
+    ref="modal"
+    :title="$t('pageNetwork.table.addDnsAddress')"
+    @hidden="resetForm"
+  >
+    <b-form id="form-dns" @submit.prevent="handleSubmit">
+      <b-row>
+        <b-col sm="6">
+          <b-form-group
+            :label="$t('pageNetwork.modal.staticDns')"
+            label-for="staticDns"
+          >
+            <b-form-input
+              id="staticDns"
+              v-model="form.staticDns"
+              type="text"
+              :state="getValidationState($v.form.staticDns)"
+              @input="$v.form.staticDns.$touch()"
+            />
+            <b-form-invalid-feedback role="alert">
+              <template v-if="!$v.form.staticDns.required">
+                {{ $t('global.form.fieldRequired') }}
+              </template>
+              <template v-if="!$v.form.staticDns.ipAddress">
+                {{ $t('global.form.invalidFormat') }}
+              </template>
+            </b-form-invalid-feedback>
+          </b-form-group>
+        </b-col>
+      </b-row>
+    </b-form>
+    <template #modal-footer="{ cancel }">
+      <b-button variant="secondary" @click="cancel()">
+        {{ $t('global.action.cancel') }}
+      </b-button>
+      <b-button form="form-dns" type="submit" variant="primary" @click="onOk">
+        {{ $t('global.action.add') }}
+      </b-button>
+    </template>
+  </b-modal>
+</template>
+
+<script>
+import VuelidateMixin from '@/components/Mixins/VuelidateMixin.js';
+import { ipAddress, required } from 'vuelidate/lib/validators';
+
+export default {
+  mixins: [VuelidateMixin],
+  data() {
+    return {
+      form: {
+        staticDns: null,
+      },
+    };
+  },
+  validations() {
+    return {
+      form: {
+        staticDns: {
+          required,
+          ipAddress,
+        },
+      },
+    };
+  },
+  methods: {
+    handleSubmit() {
+      this.$v.$touch();
+      if (this.$v.$invalid) return;
+      this.$emit('ok', [this.form.staticDns]);
+      this.closeModal();
+    },
+    closeModal() {
+      this.$nextTick(() => {
+        this.$refs.modal.hide();
+      });
+    },
+    resetForm() {
+      this.form.staticDns = null;
+      this.$v.$reset();
+      this.$emit('hidden');
+    },
+    onOk(bvModalEvt) {
+      // prevent modal close
+      bvModalEvt.preventDefault();
+      this.handleSubmit();
+    },
+  },
+};
+</script>
diff --git a/src/views/_ibs/Settings/Network/ModalHostname.vue b/src/views/_ibs/Settings/Network/ModalHostname.vue
new file mode 100644
index 00000000..f3221ec7
--- /dev/null
+++ b/src/views/_ibs/Settings/Network/ModalHostname.vue
@@ -0,0 +1,110 @@
+<template>
+  <b-modal
+    id="modal-hostname"
+    ref="modal"
+    :title="$t('pageNetwork.modal.editHostnameTitle')"
+    @hidden="resetForm"
+  >
+    <b-form id="hostname-settings" @submit.prevent="handleSubmit">
+      <b-row>
+        <b-col sm="6">
+          <b-form-group
+            :label="$t('pageNetwork.hostname')"
+            label-for="hostname"
+          >
+            <b-form-input
+              id="hostname"
+              v-model="form.hostname"
+              type="text"
+              :state="getValidationState($v.form.hostname)"
+              @input="$v.form.hostname.$touch()"
+            />
+            <b-form-invalid-feedback role="alert">
+              <template v-if="!$v.form.hostname.required">
+                {{ $t('global.form.fieldRequired') }}
+              </template>
+              <template v-if="!$v.form.hostname.validateHostname">
+                {{ $t('global.form.lengthMustBeBetween', { min: 1, max: 64 }) }}
+              </template>
+            </b-form-invalid-feedback>
+          </b-form-group>
+        </b-col>
+      </b-row>
+    </b-form>
+    <template #modal-footer="{ cancel }">
+      <b-button variant="secondary" @click="cancel()">
+        {{ $t('global.action.cancel') }}
+      </b-button>
+      <b-button
+        form="hostname-settings"
+        type="submit"
+        variant="primary"
+        @click="onOk"
+      >
+        {{ $t('global.action.add') }}
+      </b-button>
+    </template>
+  </b-modal>
+</template>
+
+<script>
+import VuelidateMixin from '@/components/Mixins/VuelidateMixin.js';
+import { required, helpers } from 'vuelidate/lib/validators';
+
+const validateHostname = helpers.regex('validateHostname', /^\S{0,64}$/);
+
+export default {
+  mixins: [VuelidateMixin],
+  props: {
+    hostname: {
+      type: String,
+      default: '',
+    },
+  },
+  data() {
+    return {
+      form: {
+        hostname: '',
+      },
+    };
+  },
+  watch: {
+    hostname() {
+      this.form.hostname = this.hostname;
+    },
+  },
+  validations() {
+    return {
+      form: {
+        hostname: {
+          required,
+          validateHostname,
+        },
+      },
+    };
+  },
+  methods: {
+    handleSubmit() {
+      this.$v.$touch();
+      if (this.$v.$invalid) return;
+      this.$emit('ok', { HostName: this.form.hostname });
+      this.closeModal();
+    },
+    closeModal() {
+      this.$nextTick(() => {
+        this.$refs.modal.hide();
+      });
+    },
+    resetForm() {
+      this.form.hostname = this.hostname;
+      this.$v.$reset();
+      this.$emit('hidden');
+    },
+    onOk(bvModalEvt) {
+      // prevent modal close
+      bvModalEvt.preventDefault();
+      this.handleSubmit();
+    },
+  },
+};
+</script>
diff --git a/src/views/_ibs/Settings/Network/ModalIpv4.vue b/src/views/_ibs/Settings/Network/ModalIpv4.vue
new file mode 100644
index 00000000..dcf4a579
--- /dev/null
+++ b/src/views/_ibs/Settings/Network/ModalIpv4.vue
@@ -0,0 +1,165 @@
+<template>
+  <b-modal
+    id="modal-add-ipv4"
+    ref="modal"
+    :title="$t('pageNetwork.table.addIpv4Address')"
+    @hidden="resetForm"
+  >
+    <b-form id="form-ipv4" @submit.prevent="handleSubmit">
+      <b-row>
+        <b-col sm="6">
+          <b-form-group
+            :label="$t('pageNetwork.modal.ipAddress')"
+            label-for="ipAddress"
+          >
+            <b-form-input
+              id="ipAddress"
+              v-model="form.ipAddress"
+              type="text"
+              :state="getValidationState($v.form.ipAddress)"
+              @input="$v.form.ipAddress.$touch()"
+            />
+            <b-form-invalid-feedback role="alert">
+              <template v-if="!$v.form.ipAddress.required">
+                {{ $t('global.form.fieldRequired') }}
+              </template>
+              <template v-if="!$v.form.ipAddress.ipAddress">
+                {{ $t('global.form.invalidFormat') }}
+              </template>
+            </b-form-invalid-feedback>
+          </b-form-group>
+        </b-col>
+        <b-col sm="6">
+          <b-form-group
+            :label="$t('pageNetwork.modal.gateway')"
+            label-for="gateway"
+          >
+            <b-form-input
+              id="gateway"
+              v-model="form.gateway"
+              type="text"
+              :state="getValidationState($v.form.gateway)"
+              @input="$v.form.gateway.$touch()"
+            />
+            <b-form-invalid-feedback role="alert">
+              <template v-if="!$v.form.gateway.required">
+                {{ $t('global.form.fieldRequired') }}
+              </template>
+              <template v-if="!$v.form.gateway.ipAddress">
+                {{ $t('global.form.invalidFormat') }}
+              </template>
+            </b-form-invalid-feedback>
+          </b-form-group>
+        </b-col>
+      </b-row>
+      <b-row>
+        <b-col sm="6">
+          <b-form-group
+            :label="$t('pageNetwork.modal.subnetMask')"
+            label-for="subnetMask"
+          >
+            <b-form-input
+              id="subnetMask"
+              v-model="form.subnetMask"
+              type="text"
+              :state="getValidationState($v.form.subnetMask)"
+              @input="$v.form.subnetMask.$touch()"
+            />
+            <b-form-invalid-feedback role="alert">
+              <template v-if="!$v.form.subnetMask.required">
+                {{ $t('global.form.fieldRequired') }}
+              </template>
+              <template v-if="!$v.form.subnetMask.ipAddress">
+                {{ $t('global.form.invalidFormat') }}
+              </template>
+            </b-form-invalid-feedback>
+          </b-form-group>
+        </b-col>
+      </b-row>
+    </b-form>
+    <template #modal-footer="{ cancel }">
+      <b-button variant="secondary" @click="cancel()">
+        {{ $t('global.action.cancel') }}
+      </b-button>
+      <b-button form="form-ipv4" type="submit" variant="primary" @click="onOk">
+        {{ $t('global.action.add') }}
+      </b-button>
+    </template>
+  </b-modal>
+</template>
+
+<script>
+import VuelidateMixin from '@/components/Mixins/VuelidateMixin.js';
+import { ipAddress, required } from 'vuelidate/lib/validators';
+
+export default {
+  mixins: [VuelidateMixin],
+  props: {
+    defaultGateway: {
+      type: String,
+      default: '',
+    },
+  },
+  data() {
+    return {
+      form: {
+        ipAddress: '',
+        gateway: '',
+        subnetMask: '',
+      },
+    };
+  },
+  watch: {
+    defaultGateway() {
+      this.form.gateway = this.defaultGateway;
+    },
+  },
+  validations() {
+    return {
+      form: {
+        ipAddress: {
+          required,
+          ipAddress,
+        },
+        gateway: {
+          required,
+          ipAddress,
+        },
+        subnetMask: {
+          required,
+          ipAddress,
+        },
+      },
+    };
+  },
+  methods: {
+    handleSubmit() {
+      this.$v.$touch();
+      if (this.$v.$invalid) return;
+      this.$emit('ok', {
+        Address: this.form.ipAddress,
+        Gateway: this.form.gateway,
+        SubnetMask: this.form.subnetMask,
+      });
+      this.closeModal();
+    },
+    closeModal() {
+      this.$nextTick(() => {
+        this.$refs.modal.hide();
+      });
+    },
+    resetForm() {
+      this.form.ipAddress = null;
+      this.form.gateway = this.defaultGateway;
+      this.form.subnetMask = null;
+      this.$v.$reset();
+      this.$emit('hidden');
+    },
+    onOk(bvModalEvt) {
+      // prevent modal close
+      bvModalEvt.preventDefault();
+      this.handleSubmit();
+    },
+  },
+};
+</script>
diff --git a/src/views/_ibs/Settings/Network/ModalMacAddress.vue b/src/views/_ibs/Settings/Network/ModalMacAddress.vue
new file mode 100644
index 00000000..d563f4ce
--- /dev/null
+++ b/src/views/_ibs/Settings/Network/ModalMacAddress.vue
@@ -0,0 +1,109 @@
+<template>
+  <b-modal
+    id="modal-mac-address"
+    ref="modal"
+    :title="$t('pageNetwork.modal.editMacAddressTitle')"
+    @hidden="resetForm"
+  >
+    <b-form id="mac-settings" @submit.prevent="handleSubmit">
+      <b-row>
+        <b-col sm="6">
+          <b-form-group
+            :label="$t('pageNetwork.macAddress')"
+            label-for="macAddress"
+          >
+            <b-form-input
+              id="mac-address"
+              v-model.trim="form.macAddress"
+              data-test-id="network-input-macAddress"
+              type="text"
+              :state="getValidationState($v.form.macAddress)"
+              @change="$v.form.macAddress.$touch()"
+            />
+            <b-form-invalid-feedback role="alert">
+              <div v-if="!$v.form.macAddress.required">
+                {{ $t('global.form.fieldRequired') }}
+              </div>
+              <div v-if="!$v.form.macAddress.macAddress">
+                {{ $t('global.form.invalidFormat') }}
+              </div>
+            </b-form-invalid-feedback>
+          </b-form-group>
+        </b-col>
+      </b-row>
+    </b-form>
+    <template #modal-footer="{ cancel }">
+      <b-button variant="secondary" @click="cancel()">
+        {{ $t('global.action.cancel') }}
+      </b-button>
+      <b-button
+        form="mac-settings"
+        type="submit"
+        variant="primary"
+        @click="onOk"
+      >
+        {{ $t('global.action.add') }}
+      </b-button>
+    </template>
+  </b-modal>
+</template>
+
+<script>
+import VuelidateMixin from '@/components/Mixins/VuelidateMixin.js';
+import { macAddress, required } from 'vuelidate/lib/validators';
+
+export default {
+  mixins: [VuelidateMixin],
+  props: {
+    macAddress: {
+      type: String,
+      default: '',
+    },
+  },
+  data() {
+    return {
+      form: {
+        macAddress: '',
+      },
+    };
+  },
+  watch: {
+    macAddress() {
+      this.form.macAddress = this.macAddress;
+    },
+  },
+  validations() {
+    return {
+      form: {
+        macAddress: {
+          required,
+          macAddress: macAddress(),
+        },
+      },
+    };
+  },
+  methods: {
+    handleSubmit() {
+      this.$v.$touch();
+      if (this.$v.$invalid) return;
+      this.$emit('ok', { MACAddress: this.form.macAddress });
+      this.closeModal();
+    },
+    closeModal() {
+      this.$nextTick(() => {
+        this.$refs.modal.hide();
+      });
+    },
+    resetForm() {
+      this.form.macAddress = this.macAddress;
+      this.$v.$reset();
+      this.$emit('hidden');
+    },
+    onOk(bvModalEvt) {
+      // prevent modal close
+      bvModalEvt.preventDefault();
+      this.handleSubmit();
+    },
+  },
+};
+</script>
diff --git a/src/views/_ibs/Settings/Network/Network.vue b/src/views/_ibs/Settings/Network/Network.vue
new file mode 100644
index 00000000..2abbcd7a
--- /dev/null
+++ b/src/views/_ibs/Settings/Network/Network.vue
@@ -0,0 +1,167 @@
+<template>
+  <b-container fluid="xl">
+    <page-title :description="$t('pageNetwork.pageDescription')" />
+    <!-- Global settings for all interfaces -->
+    <network-global-settings />
+    <!-- Interface tabs -->
+    <page-section v-show="ethernetData">
+      <b-row>
+        <b-col>
+          <b-card no-body>
+            <b-tabs
+              active-nav-item-class="font-weight-bold"
+              card
+              content-class="mt-3"
+            >
+              <b-tab
+                v-for="(data, index) in ethernetData"
+                :key="data.Id"
+                :title="data.Id"
+                @click="getTabIndex(index)"
+              >
+                <!-- Interface settings -->
+                <network-interface-settings :tab-index="tabIndex" />
+                <!-- IPV4 table -->
+                <table-ipv-4 :tab-index="tabIndex" />
+                <!-- Static DNS table -->
+                <table-dns :tab-index="tabIndex" />
+              </b-tab>
+            </b-tabs>
+          </b-card>
+        </b-col>
+      </b-row>
+    </page-section>
+    <!-- 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>
+
+<script>
+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';
+import NetworkInterfaceSettings from './NetworkInterfaceSettings.vue';
+import PageSection from '@/components/Global/PageSection';
+import PageTitle from '@/components/Global/PageTitle';
+import TableIpv4 from './TableIpv4.vue';
+import TableDns from './TableDns.vue';
+import { mapState } from 'vuex';
+
+export default {
+  name: 'Network',
+  components: {
+    ModalHostname,
+    ModalMacAddress,
+    ModalIpv4,
+    ModalDns,
+    NetworkGlobalSettings,
+    NetworkInterfaceSettings,
+    PageSection,
+    PageTitle,
+    TableDns,
+    TableIpv4,
+  },
+  mixins: [BVToastMixin, DataFormatterMixin, LoadingBarMixin],
+  beforeRouteLeave(to, from, next) {
+    this.hideLoader();
+    next();
+  },
+  data() {
+    return {
+      currentHostname: '',
+      currentMacAddress: '',
+      defaultGateway: '',
+      loading,
+      tabIndex: 0,
+    };
+  },
+  computed: {
+    ...mapState('network', ['ethernetData']),
+  },
+  watch: {
+    ethernetData() {
+      this.getModalInfo();
+    },
+  },
+  created() {
+    this.startLoader();
+    const globalSettings = new Promise((resolve) => {
+      this.$root.$on('network-global-settings-complete', () => resolve());
+    });
+    const interfaceSettings = new Promise((resolve) => {
+      this.$root.$on('network-interface-settings-complete', () => resolve());
+    });
+    const networkTableDns = new Promise((resolve) => {
+      this.$root.$on('network-table-dns-complete', () => resolve());
+    });
+    const networkTableIpv4 = new Promise((resolve) => {
+      this.$root.$on('network-table-ipv4-complete', () => resolve());
+    });
+    // Combine all child component Promises to indicate
+    // when page data load complete
+    Promise.all([
+      this.$store.dispatch('network/getEthernetData'),
+      globalSettings,
+      interfaceSettings,
+      networkTableDns,
+      networkTableIpv4,
+    ]).finally(() => this.endLoader());
+  },
+  methods: {
+    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;
+      this.$store.dispatch('network/setSelectedTabIndex', this.tabIndex);
+      this.$store.dispatch(
+        'network/setSelectedTabId',
+        this.ethernetData[selectedIndex].Id
+      );
+      this.getModalInfo();
+    },
+    saveIpv4Address(modalFormData) {
+      this.startLoader();
+      this.$store
+        .dispatch('network/saveIpv4Address', modalFormData)
+        .then((message) => this.successToast(message))
+        .catch(({ message }) => this.errorToast(message))
+        .finally(() => this.endLoader());
+    },
+    saveDnsAddress(modalFormData) {
+      this.startLoader();
+      this.$store
+        .dispatch('network/saveDnsAddress', modalFormData)
+        .then((message) => this.successToast(message))
+        .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>
diff --git a/src/views/_ibs/Settings/Network/NetworkGlobalSettings.vue b/src/views/_ibs/Settings/Network/NetworkGlobalSettings.vue
new file mode 100644
index 00000000..30287673
--- /dev/null
+++ b/src/views/_ibs/Settings/Network/NetworkGlobalSettings.vue
@@ -0,0 +1,161 @@
+<template>
+  <page-section
+    v-if="firstInterface"
+    :section-title="$t('pageNetwork.networkSettings')"
+  >
+    <b-row>
+      <b-col md="3">
+        <dl>
+          <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>
+      <b-col md="3">
+        <dl>
+          <dt>{{ $t('pageNetwork.useDomainName') }}</dt>
+          <dd>
+            <b-form-checkbox
+              id="useDomainNameSwitch"
+              v-model="useDomainNameState"
+              data-test-id="networkSettings-switch-useDomainName"
+              switch
+              @change="changeDomainNameState"
+            >
+              <span v-if="useDomainNameState">
+                {{ $t('global.status.enabled') }}
+              </span>
+              <span v-else>{{ $t('global.status.disabled') }}</span>
+            </b-form-checkbox>
+          </dd>
+        </dl>
+      </b-col>
+      <b-col md="3">
+        <dl>
+          <dt>{{ $t('pageNetwork.useDns') }}</dt>
+          <dd>
+            <b-form-checkbox
+              id="useDnsSwitch"
+              v-model="useDnsState"
+              data-test-id="networkSettings-switch-useDns"
+              switch
+              @change="changeDnsState"
+            >
+              <span v-if="useDnsState">
+                {{ $t('global.status.enabled') }}
+              </span>
+              <span v-else>{{ $t('global.status.disabled') }}</span>
+            </b-form-checkbox>
+          </dd>
+        </dl>
+      </b-col>
+      <b-col md="3">
+        <dl>
+          <dt>{{ $t('pageNetwork.useNtp') }}</dt>
+          <dd>
+            <b-form-checkbox
+              id="useNtpSwitch"
+              v-model="useNtpState"
+              data-test-id="networkSettings-switch-useNtp"
+              switch
+              @change="changeNtpState"
+            >
+              <span v-if="useNtpState">
+                {{ $t('global.status.enabled') }}
+              </span>
+              <span v-else>{{ $t('global.status.disabled') }}</span>
+            </b-form-checkbox>
+          </dd>
+        </dl>
+      </b-col>
+    </b-row>
+  </page-section>
+</template>
+
+<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: { IconEdit, PageSection },
+  mixins: [BVToastMixin, DataFormatterMixin],
+
+  data() {
+    return {
+      hostname: '',
+    };
+  },
+  computed: {
+    ...mapState('network', ['ethernetData']),
+    firstInterface() {
+      return this.$store.getters['network/globalNetworkSettings'][0];
+    },
+    useDomainNameState: {
+      get() {
+        return this.$store.getters['network/globalNetworkSettings'][0]
+          .useDomainNameEnabled;
+      },
+      set(newValue) {
+        return newValue;
+      },
+    },
+    useDnsState: {
+      get() {
+        return this.$store.getters['network/globalNetworkSettings'][0]
+          .useDnsEnabled;
+      },
+      set(newValue) {
+        return newValue;
+      },
+    },
+    useNtpState: {
+      get() {
+        return this.$store.getters['network/globalNetworkSettings'][0]
+          .useNtpEnabled;
+      },
+      set(newValue) {
+        return newValue;
+      },
+    },
+  },
+  created() {
+    this.$store.dispatch('network/getEthernetData').finally(() => {
+      // Emit initial data fetch complete to parent component
+      this.$root.$emit('network-global-settings-complete');
+    });
+  },
+  methods: {
+    changeDomainNameState(state) {
+      this.$store
+        .dispatch('network/saveDomainNameState', state)
+        .then((success) => {
+          this.successToast(success);
+        })
+        .catch(({ message }) => this.errorToast(message));
+    },
+    changeDnsState(state) {
+      this.$store
+        .dispatch('network/saveDnsState', state)
+        .then((message) => this.successToast(message))
+        .catch(({ message }) => this.errorToast(message));
+    },
+    changeNtpState(state) {
+      this.$store
+        .dispatch('network/saveNtpState', state)
+        .then((message) => this.successToast(message))
+        .catch(({ message }) => this.errorToast(message));
+    },
+    initSettingsModal() {
+      this.$bvModal.show('modal-hostname');
+    },
+  },
+};
+</script>
diff --git a/src/views/_ibs/Settings/Network/NetworkInterfaceSettings.vue b/src/views/_ibs/Settings/Network/NetworkInterfaceSettings.vue
new file mode 100644
index 00000000..023d29bc
--- /dev/null
+++ b/src/views/_ibs/Settings/Network/NetworkInterfaceSettings.vue
@@ -0,0 +1,117 @@
+<template>
+  <div>
+    <page-section>
+      <b-row>
+        <b-col md="3">
+          <dl>
+            <dt>{{ $t('pageNetwork.linkStatus') }}</dt>
+            <dd>
+              {{ dataFormatter(linkStatus) }}
+            </dd>
+          </dl>
+        </b-col>
+        <b-col md="3">
+          <dl>
+            <dt>{{ $t('pageNetwork.speed') }}</dt>
+            <dd>
+              {{ dataFormatter(linkSpeed) }}
+            </dd>
+          </dl>
+        </b-col>
+      </b-row>
+    </page-section>
+    <page-section :section-title="$t('pageNetwork.interfaceSection')">
+      <b-row>
+        <b-col md="3">
+          <dl>
+            <dt>
+              {{ $t('pageNetwork.fqdn') }}
+            </dt>
+            <dd>
+              {{ dataFormatter(fqdn) }}
+            </dd>
+          </dl>
+        </b-col>
+        <b-col md="3">
+          <dl class="text-nowrap">
+            <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>
+          </dl>
+        </b-col>
+      </b-row>
+    </page-section>
+  </div>
+</template>
+
+<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';
+
+export default {
+  name: 'Ipv4Table',
+  components: {
+    IconEdit,
+    PageSection,
+  },
+  mixins: [BVToastMixin, DataFormatterMixin],
+  props: {
+    tabIndex: {
+      type: Number,
+      default: 0,
+    },
+  },
+  data() {
+    return {
+      selectedInterface: '',
+      linkStatus: '',
+      linkSpeed: '',
+      fqdn: '',
+      macAddress: '',
+    };
+  },
+  computed: {
+    ...mapState('network', ['ethernetData']),
+  },
+  watch: {
+    // Watch for change in tab index
+    tabIndex() {
+      this.getSettings();
+    },
+  },
+  created() {
+    this.getSettings();
+    this.$store.dispatch('network/getEthernetData').finally(() => {
+      // Emit initial data fetch complete to parent component
+      this.$root.$emit('network-interface-settings-complete');
+    });
+  },
+  methods: {
+    getSettings() {
+      this.selectedInterface = this.tabIndex;
+      this.linkStatus = this.ethernetData[this.selectedInterface].LinkStatus;
+      this.linkSpeed = this.ethernetData[this.selectedInterface].SpeedMbps;
+      this.fqdn = this.ethernetData[this.selectedInterface].FQDN;
+      this.macAddress = this.ethernetData[this.selectedInterface].MACAddress;
+    },
+    initMacAddressModal() {
+      this.$bvModal.show('modal-mac-address');
+    },
+  },
+};
+</script>
diff --git a/src/views/_ibs/Settings/Network/TableDns.vue b/src/views/_ibs/Settings/Network/TableDns.vue
new file mode 100644
index 00000000..569109f1
--- /dev/null
+++ b/src/views/_ibs/Settings/Network/TableDns.vue
@@ -0,0 +1,145 @@
+<template>
+  <page-section :section-title="$t('pageNetwork.staticDns')">
+    <b-row>
+      <b-col lg="6">
+        <div class="text-right">
+          <b-button variant="primary" @click="initDnsModal()">
+            <icon-add />
+            {{ $t('pageNetwork.table.addDnsAddress') }}
+          </b-button>
+        </div>
+        <b-table
+          responsive="md"
+          hover
+          :fields="dnsTableFields"
+          :items="form.dnsStaticTableItems"
+          :empty-text="$t('global.table.emptyMessage')"
+          class="mb-0"
+          show-empty
+        >
+          <template #cell(actions)="{ item, index }">
+            <table-row-action
+              v-for="(action, actionIndex) in item.actions"
+              :key="actionIndex"
+              :value="action.value"
+              :title="action.title"
+              :enabled="action.enabled"
+              @click-table-action="onDnsTableAction(action, $event, index)"
+            >
+              <template #icon>
+                <icon-edit v-if="action.value === 'edit'" />
+                <icon-trashcan v-if="action.value === 'delete'" />
+              </template>
+            </table-row-action>
+          </template>
+        </b-table>
+      </b-col>
+    </b-row>
+  </page-section>
+</template>
+
+<script>
+import BVToastMixin from '@/components/Mixins/BVToastMixin';
+import IconAdd from '@carbon/icons-vue/es/add--alt/20';
+import IconEdit from '@carbon/icons-vue/es/edit/20';
+import IconTrashcan from '@carbon/icons-vue/es/trash-can/20';
+import PageSection from '@/components/Global/PageSection';
+import TableRowAction from '@/components/Global/TableRowAction';
+import { mapState } from 'vuex';
+
+export default {
+  name: 'DNSTable',
+  components: {
+    IconAdd,
+    IconEdit,
+    IconTrashcan,
+    PageSection,
+    TableRowAction,
+  },
+  mixins: [BVToastMixin],
+  props: {
+    tabIndex: {
+      type: Number,
+      default: 0,
+    },
+  },
+  data() {
+    return {
+      form: {
+        dnsStaticTableItems: [],
+      },
+      actions: [
+        {
+          value: 'edit',
+          title: this.$t('global.action.edit'),
+        },
+        {
+          value: 'delete',
+          title: this.$t('global.action.delete'),
+        },
+      ],
+      dnsTableFields: [
+        {
+          key: 'address',
+          label: this.$t('pageNetwork.table.ipAddress'),
+        },
+        { key: 'actions', label: '', tdClass: 'text-right' },
+      ],
+    };
+  },
+  computed: {
+    ...mapState('network', ['ethernetData']),
+  },
+  watch: {
+    // Watch for change in tab index
+    tabIndex() {
+      this.getStaticDnsItems();
+    },
+    ethernetData() {
+      this.getStaticDnsItems();
+    },
+  },
+  created() {
+    this.getStaticDnsItems();
+    this.$store.dispatch('network/getEthernetData').finally(() => {
+      // Emit initial data fetch complete to parent component
+      this.$root.$emit('network-table-dns-complete');
+    });
+  },
+  methods: {
+    getStaticDnsItems() {
+      const index = this.tabIndex;
+      const dns = this.ethernetData[index].StaticNameServers || [];
+      this.form.dnsStaticTableItems = dns.map((server) => {
+        return {
+          address: server,
+          actions: [
+            {
+              value: 'delete',
+              title: this.$t('pageNetwork.table.deleteDns'),
+            },
+          ],
+        };
+      });
+    },
+    onDnsTableAction(action, $event, index) {
+      if ($event === 'delete') {
+        this.deleteDnsTableRow(index);
+      }
+    },
+    deleteDnsTableRow(index) {
+      this.form.dnsStaticTableItems.splice(index, 1);
+      const newDnsArray = this.form.dnsStaticTableItems.map((dns) => {
+        return dns.address;
+      });
+      this.$store
+        .dispatch('network/editDnsAddress', newDnsArray)
+        .then((message) => this.successToast(message))
+        .catch(({ message }) => this.errorToast(message));
+    },
+    initDnsModal() {
+      this.$bvModal.show('modal-dns');
+    },
+  },
+};
+</script>
diff --git a/src/views/_ibs/Settings/Network/TableIpv4.vue b/src/views/_ibs/Settings/Network/TableIpv4.vue
new file mode 100644
index 00000000..75870031
--- /dev/null
+++ b/src/views/_ibs/Settings/Network/TableIpv4.vue
@@ -0,0 +1,169 @@
+<template>
+  <page-section :section-title="$t('pageNetwork.ipv4')">
+    <b-row>
+      <b-col>
+        <h3 class="h5">
+          {{ $t('pageNetwork.ipv4Addresses') }}
+        </h3>
+      </b-col>
+      <b-col class="text-right">
+        <b-button variant="primary" @click="initAddIpv4Address()">
+          <icon-add />
+          {{ $t('pageNetwork.table.addIpv4Address') }}
+        </b-button>
+      </b-col>
+    </b-row>
+    <b-table
+      responsive="md"
+      hover
+      :fields="ipv4TableFields"
+      :items="form.ipv4TableItems"
+      :empty-text="$t('global.table.emptyMessage')"
+      class="mb-0"
+      show-empty
+    >
+      <template #cell(actions)="{ item, index }">
+        <table-row-action
+          v-for="(action, actionIndex) in item.actions"
+          :key="actionIndex"
+          :value="action.value"
+          :title="action.title"
+          :enabled="action.enabled"
+          @click-table-action="onIpv4TableAction(action, $event, index)"
+        >
+          <template #icon>
+            <icon-edit v-if="action.value === 'edit'" />
+            <icon-trashcan v-if="action.value === 'delete'" />
+          </template>
+        </table-row-action>
+      </template>
+    </b-table>
+  </page-section>
+</template>
+
+<script>
+import BVToastMixin from '@/components/Mixins/BVToastMixin';
+import IconAdd from '@carbon/icons-vue/es/add--alt/20';
+import IconEdit from '@carbon/icons-vue/es/edit/20';
+import IconTrashcan from '@carbon/icons-vue/es/trash-can/20';
+import LoadingBarMixin from '@/components/Mixins/LoadingBarMixin';
+import PageSection from '@/components/Global/PageSection';
+import TableRowAction from '@/components/Global/TableRowAction';
+import { mapState } from 'vuex';
+
+export default {
+  name: 'Ipv4Table',
+  components: {
+    IconAdd,
+    IconEdit,
+    IconTrashcan,
+    PageSection,
+    TableRowAction,
+  },
+  mixins: [BVToastMixin, LoadingBarMixin],
+  props: {
+    tabIndex: {
+      type: Number,
+      default: 0,
+    },
+  },
+  data() {
+    return {
+      form: {
+        ipv4TableItems: [],
+      },
+      actions: [
+        {
+          value: 'edit',
+          title: this.$t('global.action.edit'),
+        },
+        {
+          value: 'delete',
+          title: this.$t('global.action.delete'),
+        },
+      ],
+      ipv4TableFields: [
+        {
+          key: 'Address',
+          label: this.$t('pageNetwork.table.ipAddress'),
+        },
+        {
+          key: 'Gateway',
+          label: this.$t('pageNetwork.table.gateway'),
+        },
+        {
+          key: 'SubnetMask',
+          label: this.$t('pageNetwork.table.subnet'),
+        },
+        {
+          key: 'AddressOrigin',
+          label: this.$t('pageNetwork.table.addressOrigin'),
+        },
+        { key: 'actions', label: '', tdClass: 'text-right' },
+      ],
+    };
+  },
+  computed: {
+    ...mapState('network', ['ethernetData']),
+  },
+  watch: {
+    // Watch for change in tab index
+    tabIndex() {
+      this.getIpv4TableItems();
+    },
+    ethernetData() {
+      this.getIpv4TableItems();
+    },
+  },
+  created() {
+    this.getIpv4TableItems();
+    this.$store.dispatch('network/getEthernetData').finally(() => {
+      // Emit initial data fetch complete to parent component
+      this.$root.$emit('network-table-ipv4-complete');
+    });
+  },
+  methods: {
+    getIpv4TableItems() {
+      const index = this.tabIndex;
+      const addresses = this.ethernetData[index].IPv4Addresses || [];
+      this.form.ipv4TableItems = addresses.map((ipv4) => {
+        return {
+          Address: ipv4.Address,
+          SubnetMask: ipv4.SubnetMask,
+          Gateway: ipv4.Gateway,
+          AddressOrigin: ipv4.AddressOrigin,
+          actions: [
+            {
+              value: 'delete',
+              title: this.$t('pageNetwork.table.deleteIpv4'),
+            },
+          ],
+        };
+      });
+    },
+    onIpv4TableAction(action, $event, index) {
+      if ($event === 'delete') {
+        this.deleteIpv4TableRow(index);
+      }
+    },
+    deleteIpv4TableRow(index) {
+      this.form.ipv4TableItems.splice(index, 1);
+      const newIpv4Array = this.form.ipv4TableItems.map((ipv4) => {
+        const { Address, SubnetMask, Gateway } = ipv4;
+        return {
+          Address,
+          SubnetMask,
+          Gateway,
+        };
+      });
+      this.$store
+        .dispatch('network/editIpv4Address', newIpv4Array)
+        .then((message) => this.successToast(message))
+        .catch(({ message }) => this.errorToast(message));
+    },
+    initAddIpv4Address() {
+      this.$bvModal.show('modal-add-ipv4');
+    },
+  },
+};
+</script>
diff --git a/src/views/_ibs/Settings/Network/index.js b/src/views/_ibs/Settings/Network/index.js
new file mode 100644
index 00000000..97bf0397
--- /dev/null
+++ b/src/views/_ibs/Settings/Network/index.js
@@ -0,0 +1,2 @@
+import Network from './Network.vue';
+export default Network;
-- 
cgit v1.2.3