From f67f769f2304bca64d2b9758e22c21203960eef9 Mon Sep 17 00:00:00 2001
From: Sandeepa Singh <sandeepa.singh@ibm.com>
Date: Mon, 19 Jul 2021 18:04:18 +0530
Subject: IA update: Update configuration to settings

This is the fourth update to information architecture changes and has
the following changes:

- The configuration section is updated to settings
- The date and time settings page is updated to date and time
- The network settings page is updated to network
- The power restore policy page in operations section is moved to
settings section

Signed-off-by: Sandeepa Singh <sandeepa.singh@ibm.com>
Change-Id: I6f5ab25f5227530be430bd39a4d9629b3bf09d8b
---
 .../DateTimeSettings/DateTimeSettings.vue          | 407 -------------
 src/views/Configuration/DateTimeSettings/index.js  |   2 -
 .../NetworkSettings/NetworkSettings.vue            | 671 ---------------------
 src/views/Configuration/NetworkSettings/index.js   |   2 -
 .../SecuritySettings/SecuritySettings.vue          | 125 ----
 src/views/Configuration/SecuritySettings/index.js  |   2 -
 .../PowerRestorePolicy/PowerRestorePolicy.vue      |  80 ---
 src/views/Operations/PowerRestorePolicy/index.js   |   2 -
 src/views/Overview/OverviewNetwork.vue             |   4 +-
 src/views/Overview/OverviewQuickLinks.vue          |   2 +-
 src/views/Settings/DateTime/DateTime.vue           | 405 +++++++++++++
 src/views/Settings/DateTime/index.js               |   2 +
 src/views/Settings/Network/Network.vue             | 664 ++++++++++++++++++++
 src/views/Settings/Network/index.js                |   2 +
 .../PowerRestorePolicy/PowerRestorePolicy.vue      |  80 +++
 src/views/Settings/PowerRestorePolicy/index.js     |   2 +
 .../Settings/SecuritySettings/SecuritySettings.vue | 125 ++++
 src/views/Settings/SecuritySettings/index.js       |   2 +
 18 files changed, 1285 insertions(+), 1294 deletions(-)
 delete mode 100644 src/views/Configuration/DateTimeSettings/DateTimeSettings.vue
 delete mode 100644 src/views/Configuration/DateTimeSettings/index.js
 delete mode 100644 src/views/Configuration/NetworkSettings/NetworkSettings.vue
 delete mode 100644 src/views/Configuration/NetworkSettings/index.js
 delete mode 100644 src/views/Configuration/SecuritySettings/SecuritySettings.vue
 delete mode 100644 src/views/Configuration/SecuritySettings/index.js
 delete mode 100644 src/views/Operations/PowerRestorePolicy/PowerRestorePolicy.vue
 delete mode 100644 src/views/Operations/PowerRestorePolicy/index.js
 create mode 100644 src/views/Settings/DateTime/DateTime.vue
 create mode 100644 src/views/Settings/DateTime/index.js
 create mode 100644 src/views/Settings/Network/Network.vue
 create mode 100644 src/views/Settings/Network/index.js
 create mode 100644 src/views/Settings/PowerRestorePolicy/PowerRestorePolicy.vue
 create mode 100644 src/views/Settings/PowerRestorePolicy/index.js
 create mode 100644 src/views/Settings/SecuritySettings/SecuritySettings.vue
 create mode 100644 src/views/Settings/SecuritySettings/index.js

(limited to 'src/views')

diff --git a/src/views/Configuration/DateTimeSettings/DateTimeSettings.vue b/src/views/Configuration/DateTimeSettings/DateTimeSettings.vue
deleted file mode 100644
index 613953fe..00000000
--- a/src/views/Configuration/DateTimeSettings/DateTimeSettings.vue
+++ /dev/null
@@ -1,407 +0,0 @@
-<template>
-  <b-container fluid="xl">
-    <page-title />
-    <b-row>
-      <b-col md="8" xl="6">
-        <alert variant="info" class="mb-4">
-          <span>
-            {{ $t('pageDateTimeSettings.alert.message') }}
-            <b-link to="/profile-settings">
-              {{ $t('pageDateTimeSettings.alert.link') }}</b-link
-            >
-          </span>
-        </alert>
-      </b-col>
-    </b-row>
-    <page-section>
-      <b-row>
-        <b-col lg="3">
-          <dl>
-            <dt>{{ $t('pageDateTimeSettings.form.date') }}</dt>
-            <dd v-if="bmcTime">{{ bmcTime | formatDate }}</dd>
-            <dd v-else>--</dd>
-          </dl>
-        </b-col>
-        <b-col lg="3">
-          <dl>
-            <dt>{{ $t('pageDateTimeSettings.form.time.label') }}</dt>
-            <dd v-if="bmcTime">{{ bmcTime | formatTime }}</dd>
-            <dd v-else>--</dd>
-          </dl>
-        </b-col>
-      </b-row>
-    </page-section>
-    <page-section :section-title="$t('pageDateTimeSettings.configureSettings')">
-      <b-form novalidate @submit.prevent="submitForm">
-        <b-form-group
-          label="Configure date and time"
-          :disabled="loading"
-          label-sr-only
-        >
-          <b-form-radio
-            v-model="form.configurationSelected"
-            value="manual"
-            data-test-id="dateTimeSettings-radio-configureManual"
-          >
-            {{ $t('pageDateTimeSettings.form.manual') }}
-          </b-form-radio>
-          <b-row class="mt-3 ml-3">
-            <b-col sm="6" lg="4" xl="3">
-              <b-form-group
-                :label="$t('pageDateTimeSettings.form.date')"
-                label-for="input-manual-date"
-              >
-                <b-form-text id="date-format-help">YYYY-MM-DD</b-form-text>
-                <b-input-group>
-                  <b-form-input
-                    id="input-manual-date"
-                    v-model="form.manual.date"
-                    :state="getValidationState($v.form.manual.date)"
-                    :disabled="ntpOptionSelected"
-                    data-test-id="dateTimeSettings-input-manualDate"
-                    class="form-control-with-button"
-                    @blur="$v.form.manual.date.$touch()"
-                  />
-                  <b-form-invalid-feedback role="alert">
-                    <div v-if="!$v.form.manual.date.pattern">
-                      {{ $t('global.form.invalidFormat') }}
-                    </div>
-                    <div v-if="!$v.form.manual.date.required">
-                      {{ $t('global.form.fieldRequired') }}
-                    </div>
-                  </b-form-invalid-feedback>
-                  <b-form-datepicker
-                    v-model="form.manual.date"
-                    class="btn-datepicker btn-icon-only"
-                    button-only
-                    right
-                    :hide-header="true"
-                    :locale="locale"
-                    :label-help="
-                      $t('global.calendar.useCursorKeysToNavigateCalendarDates')
-                    "
-                    :title="$t('global.calendar.selectDate')"
-                    :disabled="ntpOptionSelected"
-                    button-variant="link"
-                    aria-controls="input-manual-date"
-                  >
-                    <template #button-content>
-                      <icon-calendar />
-                      <span class="sr-only">
-                        {{ $t('global.calendar.selectDate') }}
-                      </span>
-                    </template>
-                  </b-form-datepicker>
-                </b-input-group>
-              </b-form-group>
-            </b-col>
-            <b-col sm="6" lg="4" xl="3">
-              <b-form-group
-                :label="
-                  $t('pageDateTimeSettings.form.time.timezone', { timezone })
-                "
-                label-for="input-manual-time"
-              >
-                <b-form-text id="time-format-help">HH:MM</b-form-text>
-                <b-input-group>
-                  <b-form-input
-                    id="input-manual-time"
-                    v-model="form.manual.time"
-                    :state="getValidationState($v.form.manual.time)"
-                    :disabled="ntpOptionSelected"
-                    data-test-id="dateTimeSettings-input-manualTime"
-                    @blur="$v.form.manual.time.$touch()"
-                  />
-                  <b-form-invalid-feedback role="alert">
-                    <div v-if="!$v.form.manual.time.pattern">
-                      {{ $t('global.form.invalidFormat') }}
-                    </div>
-                    <div v-if="!$v.form.manual.time.required">
-                      {{ $t('global.form.fieldRequired') }}
-                    </div>
-                  </b-form-invalid-feedback>
-                </b-input-group>
-              </b-form-group>
-            </b-col>
-          </b-row>
-          <b-form-radio
-            v-model="form.configurationSelected"
-            value="ntp"
-            data-test-id="dateTimeSettings-radio-configureNTP"
-          >
-            NTP
-          </b-form-radio>
-          <b-row class="mt-3 ml-3">
-            <b-col sm="6" lg="4" xl="3">
-              <b-form-group
-                :label="$t('pageDateTimeSettings.form.ntpServers.server1')"
-                label-for="input-ntp-1"
-              >
-                <b-input-group>
-                  <b-form-input
-                    id="input-ntp-1"
-                    v-model="form.ntp.firstAddress"
-                    :state="getValidationState($v.form.ntp.firstAddress)"
-                    :disabled="manualOptionSelected"
-                    data-test-id="dateTimeSettings-input-ntpServer1"
-                    @blur="$v.form.ntp.firstAddress.$touch()"
-                  />
-                  <b-form-invalid-feedback role="alert">
-                    <div v-if="!$v.form.ntp.firstAddress.required">
-                      {{ $t('global.form.fieldRequired') }}
-                    </div>
-                  </b-form-invalid-feedback>
-                </b-input-group>
-              </b-form-group>
-            </b-col>
-            <b-col sm="6" lg="4" xl="3">
-              <b-form-group
-                :label="$t('pageDateTimeSettings.form.ntpServers.server2')"
-                label-for="input-ntp-2"
-              >
-                <b-input-group>
-                  <b-form-input
-                    id="input-ntp-2"
-                    v-model="form.ntp.secondAddress"
-                    :disabled="manualOptionSelected"
-                    data-test-id="dateTimeSettings-input-ntpServer2"
-                  />
-                </b-input-group>
-              </b-form-group>
-            </b-col>
-            <b-col sm="6" lg="4" xl="3">
-              <b-form-group
-                :label="$t('pageDateTimeSettings.form.ntpServers.server3')"
-                label-for="input-ntp-3"
-              >
-                <b-input-group>
-                  <b-form-input
-                    id="input-ntp-3"
-                    v-model="form.ntp.thirdAddress"
-                    :disabled="manualOptionSelected"
-                    data-test-id="dateTimeSettings-input-ntpServer3"
-                  />
-                </b-input-group>
-              </b-form-group>
-            </b-col>
-          </b-row>
-          <b-button
-            variant="primary"
-            type="submit"
-            data-test-id="dateTimeSettings-button-saveSettings"
-          >
-            {{ $t('global.action.saveSettings') }}
-          </b-button>
-        </b-form-group>
-      </b-form>
-    </page-section>
-  </b-container>
-</template>
-
-<script>
-import Alert from '@/components/Global/Alert';
-import IconCalendar from '@carbon/icons-vue/es/calendar/20';
-import PageTitle from '@/components/Global/PageTitle';
-import PageSection from '@/components/Global/PageSection';
-
-import BVToastMixin from '@/components/Mixins/BVToastMixin';
-import LoadingBarMixin, { loading } from '@/components/Mixins/LoadingBarMixin';
-import LocalTimezoneLabelMixin from '@/components/Mixins/LocalTimezoneLabelMixin';
-import VuelidateMixin from '@/components/Mixins/VuelidateMixin.js';
-
-import { mapState } from 'vuex';
-import { requiredIf, helpers } from 'vuelidate/lib/validators';
-
-const isoDateRegex = /([12]\d{3}-(0[1-9]|1[0-2])-(0[1-9]|[12]\d|3[01]))/;
-const isoTimeRegex = /^(0[0-9]|1[0-9]|2[0-3]):[0-5][0-9]$/;
-
-export default {
-  name: 'DateTimeSettings',
-  components: { Alert, IconCalendar, PageTitle, PageSection },
-  mixins: [
-    BVToastMixin,
-    LoadingBarMixin,
-    LocalTimezoneLabelMixin,
-    VuelidateMixin,
-  ],
-  beforeRouteLeave(to, from, next) {
-    this.hideLoader();
-    next();
-  },
-  data() {
-    return {
-      locale: this.$store.getters['global/languagePreference'],
-      form: {
-        configurationSelected: 'manual',
-        manual: {
-          date: '',
-          time: '',
-        },
-        ntp: { firstAddress: '', secondAddress: '', thirdAddress: '' },
-      },
-      loading,
-    };
-  },
-  validations() {
-    return {
-      form: {
-        manual: {
-          date: {
-            required: requiredIf(function () {
-              return this.form.configurationSelected === 'manual';
-            }),
-            pattern: helpers.regex('pattern', isoDateRegex),
-          },
-          time: {
-            required: requiredIf(function () {
-              return this.form.configurationSelected === 'manual';
-            }),
-            pattern: helpers.regex('pattern', isoTimeRegex),
-          },
-        },
-        ntp: {
-          firstAddress: {
-            required: requiredIf(function () {
-              return this.form.configurationSelected === 'ntp';
-            }),
-          },
-        },
-      },
-    };
-  },
-  computed: {
-    ...mapState('dateTime', ['ntpServers', 'isNtpProtocolEnabled']),
-    bmcTime() {
-      return this.$store.getters['global/bmcTime'];
-    },
-    ntpOptionSelected() {
-      return this.form.configurationSelected === 'ntp';
-    },
-    manualOptionSelected() {
-      return this.form.configurationSelected === 'manual';
-    },
-    isUtcDisplay() {
-      return this.$store.getters['global/isUtcDisplay'];
-    },
-    timezone() {
-      if (this.isUtcDisplay) {
-        return 'UTC';
-      }
-      return this.localOffset();
-    },
-  },
-  watch: {
-    ntpServers() {
-      this.setNtpValues();
-    },
-    manualDate() {
-      this.emitChange();
-    },
-    bmcTime() {
-      this.form.manual.date = this.$options.filters.formatDate(
-        this.$store.getters['global/bmcTime']
-      );
-      this.form.manual.time = this.$options.filters
-        .formatTime(this.$store.getters['global/bmcTime'])
-        .slice(0, 5);
-    },
-  },
-  created() {
-    this.startLoader();
-    this.setNtpValues();
-    Promise.all([
-      this.$store.dispatch('global/getBmcTime'),
-      this.$store.dispatch('dateTime/getNtpData'),
-    ]).finally(() => this.endLoader());
-  },
-  methods: {
-    emitChange() {
-      if (this.$v.$invalid) return;
-      this.$v.$reset(); //reset to re-validate on blur
-      this.$emit('change', {
-        manualDate: this.manualDate ? new Date(this.manualDate) : null,
-      });
-    },
-    setNtpValues() {
-      this.form.configurationSelected = this.isNtpProtocolEnabled
-        ? 'ntp'
-        : 'manual';
-      [
-        this.form.ntp.firstAddress = '',
-        this.form.ntp.secondAddress = '',
-        this.form.ntp.thirdAddress = '',
-      ] = [this.ntpServers[0], this.ntpServers[1], this.ntpServers[2]];
-    },
-    submitForm() {
-      this.$v.$touch();
-      if (this.$v.$invalid) return;
-      this.startLoader();
-
-      let dateTimeForm = {};
-      let isNTPEnabled = this.form.configurationSelected === 'ntp';
-
-      if (!isNTPEnabled) {
-        const isUtcDisplay = this.$store.getters['global/isUtcDisplay'];
-        let date;
-
-        dateTimeForm.ntpProtocolEnabled = false;
-
-        if (isUtcDisplay) {
-          // Create UTC Date
-          date = this.getUtcDate(this.form.manual.date, this.form.manual.time);
-        } else {
-          // Create local Date
-          date = new Date(`${this.form.manual.date} ${this.form.manual.time}`);
-        }
-
-        dateTimeForm.updatedDateTime = date.toISOString();
-      } else {
-        dateTimeForm.ntpProtocolEnabled = true;
-
-        dateTimeForm.ntpServersArray = [
-          this.form.ntp.firstAddress,
-          this.form.ntp.secondAddress,
-          this.form.ntp.thirdAddress,
-        ];
-      }
-
-      this.$store
-        .dispatch('dateTime/updateDateTimeSettings', dateTimeForm)
-        .then((success) => {
-          this.successToast(success);
-          if (!isNTPEnabled) return;
-          // Shift address up if second address is empty
-          // to avoid refreshing after delay when updating NTP
-          if (!this.form.ntp.secondAddress && this.form.ntp.thirdAddres) {
-            this.form.ntp.secondAddress = this.form.ntp.thirdAddres;
-            this.form.ntp.thirdAddress = '';
-          }
-        })
-        .then(() => {
-          this.$store.dispatch('global/getBmcTime');
-        })
-        .catch(({ message }) => this.errorToast(message))
-        .finally(() => {
-          this.$v.form.$reset();
-          this.endLoader();
-        });
-    },
-    getUtcDate(date, time) {
-      // Split user input string values to create
-      // a UTC Date object
-      const datesArray = date.split('-');
-      const timeArray = time.split(':');
-      let utcDate = Date.UTC(
-        datesArray[0], // User input year
-        //UTC expects zero-index month value 0-11 (January-December)
-        //for reference https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/UTC#Parameters
-        parseInt(datesArray[1]) - 1, // User input month
-        datesArray[2], // User input day
-        timeArray[0], // User input hour
-        timeArray[1] // User input minute
-      );
-      return new Date(utcDate);
-    },
-  },
-};
-</script>
diff --git a/src/views/Configuration/DateTimeSettings/index.js b/src/views/Configuration/DateTimeSettings/index.js
deleted file mode 100644
index c8b5c08f..00000000
--- a/src/views/Configuration/DateTimeSettings/index.js
+++ /dev/null
@@ -1,2 +0,0 @@
-import DateTimeSettings from './DateTimeSettings.vue';
-export default DateTimeSettings;
diff --git a/src/views/Configuration/NetworkSettings/NetworkSettings.vue b/src/views/Configuration/NetworkSettings/NetworkSettings.vue
deleted file mode 100644
index d6da7177..00000000
--- a/src/views/Configuration/NetworkSettings/NetworkSettings.vue
+++ /dev/null
@@ -1,671 +0,0 @@
-<template>
-  <b-container fluid="xl">
-    <page-title :description="$t('pageNetworkSettings.pageDescription')" />
-    <page-section :section-title="$t('pageNetworkSettings.interface')">
-      <b-row>
-        <b-col lg="3">
-          <b-form-group
-            label-for="interface-select"
-            :label="$t('pageNetworkSettings.form.networkInterface')"
-          >
-            <b-form-select
-              id="interface-select"
-              v-model="selectedInterfaceIndex"
-              :disabled="loading"
-              data-test-id="networkSettings-select-interface"
-              :options="interfaceSelectOptions"
-              @change="selectInterface"
-            >
-            </b-form-select>
-          </b-form-group>
-        </b-col>
-      </b-row>
-    </page-section>
-    <b-form novalidate @submit.prevent="submitForm">
-      <b-form-group :disabled="loading">
-        <page-section :section-title="$t('pageNetworkSettings.system')">
-          <b-row>
-            <b-col lg="3">
-              <b-form-group
-                :label="$t('pageNetworkSettings.form.defaultGateway')"
-                label-for="default-gateway"
-              >
-                <b-form-input
-                  id="default-gateway"
-                  v-model.trim="form.gateway"
-                  data-test-id="networkSettings-input-gateway"
-                  type="text"
-                  :state="getValidationState($v.form.gateway)"
-                  @change="$v.form.gateway.$touch()"
-                />
-                <b-form-invalid-feedback role="alert">
-                  <div v-if="!$v.form.gateway.required">
-                    {{ $t('global.form.fieldRequired') }}
-                  </div>
-                  <div v-if="!$v.form.gateway.ipAddress">
-                    {{ $t('global.form.invalidFormat') }}
-                  </div>
-                </b-form-invalid-feedback>
-              </b-form-group>
-            </b-col>
-            <b-col lg="3">
-              <b-form-group
-                :label="$t('pageNetworkSettings.form.hostname')"
-                label-for="hostname-field"
-              >
-                <b-form-input
-                  id="hostname-field"
-                  v-model.trim="form.hostname"
-                  data-test-id="networkSettings-input-hostname"
-                  type="text"
-                  :state="getValidationState($v.form.hostname)"
-                  @change="$v.form.hostname.$touch()"
-                />
-                <b-form-invalid-feedback role="alert">
-                  <div v-if="!$v.form.hostname.required">
-                    {{ $t('global.form.fieldRequired') }}
-                  </div>
-                  <div v-if="!$v.form.hostname.validateHostname">
-                    {{
-                      $t('global.form.lengthMustBeBetween', { min: 1, max: 64 })
-                    }}
-                  </div>
-                </b-form-invalid-feedback>
-              </b-form-group>
-            </b-col>
-            <b-col lg="3">
-              <b-form-group
-                :label="$t('pageNetworkSettings.form.macAddress')"
-                label-for="mac-address"
-              >
-                <b-form-input
-                  id="mac-address"
-                  v-model.trim="form.macAddress"
-                  data-test-id="networkSettings-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>
-        </page-section>
-        <page-section :section-title="$t('pageNetworkSettings.ipv4')">
-          <b-form-group :label="$t('pageNetworkSettings.ipv4Configuration')">
-            <b-form-text id="enable-secure-help-block">
-              {{ $t('pageNetworkSettings.ipv4Helper') }}
-            </b-form-text>
-            <b-form-radio
-              v-model="form.dhcpEnabled"
-              name="dhcp-radio"
-              :value="true"
-              @change="onChangeIpv4Config"
-            >
-              {{ $t('pageNetworkSettings.dhcp') }}
-            </b-form-radio>
-            <b-form-radio
-              v-model="form.dhcpEnabled"
-              name="static-radio"
-              :value="false"
-              @change="onChangeIpv4Config"
-            >
-              {{ $t('pageNetworkSettings.static') }}
-            </b-form-radio>
-          </b-form-group>
-          <b-row>
-            <b-col lg="9" class="mb-3">
-              <h3 class="h4">
-                {{ $t('pageNetworkSettings.dhcp') }}
-              </h3>
-              <b-table
-                responsive="md"
-                hover
-                :fields="ipv4DhcpTableFields"
-                :items="form.ipv4DhcpTableItems"
-                :empty-text="$t('global.table.emptyMessage')"
-                class="mb-0"
-                show-empty
-              >
-                <template #cell(Address)="{ item, index }">
-                  <b-form-input
-                    v-model.trim="item.Address"
-                    :data-test-id="`networkSettings-input-dhcpIpv4-${index}`"
-                    :aria-label="
-                      $t('pageNetworkSettings.table.dhcpIpv4AddressRow') +
-                      ' ' +
-                      (index + 1)
-                    "
-                    readonly
-                  />
-                </template>
-                <template #cell(SubnetMask)="{ item, index }">
-                  <b-form-input
-                    v-model.trim="item.SubnetMask"
-                    :data-test-id="`networkSettings-input-subnetMask-${index}`"
-                    :aria-label="
-                      $t('pageNetworkSettings.table.dhcpIpv4SubnetRow') +
-                      ' ' +
-                      (index + 1)
-                    "
-                    readonly
-                  />
-                </template>
-                <template #cell(actions)="{ item, index }">
-                  <table-row-action
-                    v-for="(action, actionIndex) in item.actions"
-                    :key="actionIndex"
-                    :value="action.value"
-                    :title="action.title"
-                    :enabled="false"
-                    @click-table-action="
-                      onDeleteIpv4StaticTableRow($event, index)
-                    "
-                  >
-                    <template #icon>
-                      <icon-trashcan v-if="action.value === 'delete'" />
-                    </template>
-                  </table-row-action>
-                </template>
-              </b-table>
-            </b-col>
-            <b-col lg="9" class="mb-3">
-              <h3 class="h4">
-                {{ $t('pageNetworkSettings.static') }}
-              </h3>
-              <b-table
-                responsive="md"
-                hover
-                :fields="ipv4StaticTableFields"
-                :items="form.ipv4StaticTableItems"
-                :empty-text="$t('global.table.emptyMessage')"
-                class="mb-0"
-                show-empty
-              >
-                <template #cell(Address)="{ item, index }">
-                  <b-form-input
-                    v-model.trim="item.Address"
-                    :data-test-id="`networkSettings-input-staticIpv4-${index}`"
-                    :aria-label="
-                      $t('pageNetworkSettings.table.staticIpv4AddressRow') +
-                      ' ' +
-                      (index + 1)
-                    "
-                    :state="
-                      getValidationState(
-                        $v.form.ipv4StaticTableItems.$each.$iter[index].Address
-                      )
-                    "
-                    @change="
-                      $v.form.ipv4StaticTableItems.$each.$iter[
-                        index
-                      ].Address.$touch()
-                    "
-                  />
-                  <b-form-invalid-feedback role="alert">
-                    <div
-                      v-if="
-                        !$v.form.ipv4StaticTableItems.$each.$iter[index].Address
-                          .required
-                      "
-                    >
-                      {{ $t('global.form.fieldRequired') }}
-                    </div>
-                    <div
-                      v-if="
-                        !$v.form.ipv4StaticTableItems.$each.$iter[index].Address
-                          .ipAddress
-                      "
-                    >
-                      {{ $t('global.form.invalidFormat') }}
-                    </div>
-                  </b-form-invalid-feedback>
-                </template>
-                <template #cell(SubnetMask)="{ item, index }">
-                  <b-form-input
-                    v-model.trim="item.SubnetMask"
-                    :data-test-id="`networkSettings-input-subnetMask-${index}`"
-                    :aria-label="
-                      $t('pageNetworkSettings.table.staticIpv4SubnetRow') +
-                      ' ' +
-                      (index + 1)
-                    "
-                    :state="
-                      getValidationState(
-                        $v.form.ipv4StaticTableItems.$each.$iter[index]
-                          .SubnetMask
-                      )
-                    "
-                    @change="
-                      $v.form.ipv4StaticTableItems.$each.$iter[
-                        index
-                      ].SubnetMask.$touch()
-                    "
-                  />
-                  <b-form-invalid-feedback role="alert">
-                    <div
-                      v-if="
-                        !$v.form.ipv4StaticTableItems.$each.$iter[index]
-                          .SubnetMask.required
-                      "
-                    >
-                      {{ $t('global.form.fieldRequired') }}
-                    </div>
-                    <div
-                      v-if="
-                        !$v.form.ipv4StaticTableItems.$each.$iter[index]
-                          .SubnetMask.ipAddress
-                      "
-                    >
-                      {{ $t('global.form.invalidFormat') }}
-                    </div>
-                  </b-form-invalid-feedback>
-                </template>
-                <template #cell(actions)="{ item, index }">
-                  <table-row-action
-                    v-for="(action, actionIndex) in item.actions"
-                    :key="actionIndex"
-                    :value="action.value"
-                    :title="action.title"
-                    @click-table-action="
-                      onDeleteIpv4StaticTableRow($event, index)
-                    "
-                  >
-                    <template #icon>
-                      <icon-trashcan v-if="action.value === 'delete'" />
-                    </template>
-                  </table-row-action>
-                </template>
-              </b-table>
-              <b-button variant="link" @click="addIpv4StaticTableRow">
-                <icon-add />
-                {{ $t('pageNetworkSettings.table.addStaticIpv4Address') }}
-              </b-button>
-            </b-col>
-          </b-row>
-        </page-section>
-        <page-section :section-title="$t('pageNetworkSettings.staticDns')">
-          <b-row>
-            <b-col lg="4" class="mb-3">
-              <b-table
-                responsive
-                hover
-                :fields="dnsTableFields"
-                :items="form.dnsStaticTableItems"
-                :empty-text="$t('global.table.emptyMessage')"
-                class="mb-0"
-                show-empty
-              >
-                <template #cell(address)="{ item, index }">
-                  <b-form-input
-                    v-model.trim="item.address"
-                    :data-test-id="`networkSettings-input-dnsAddress-${index}`"
-                    :aria-label="
-                      $t('pageNetworkSettings.table.staticDnsRow') +
-                      ' ' +
-                      (index + 1)
-                    "
-                    :state="
-                      getValidationState(
-                        $v.form.dnsStaticTableItems.$each.$iter[index].address
-                      )
-                    "
-                    @change="
-                      $v.form.dnsStaticTableItems.$each.$iter[
-                        index
-                      ].address.$touch()
-                    "
-                  />
-                  <b-form-invalid-feedback role="alert">
-                    <div
-                      v-if="
-                        !$v.form.dnsStaticTableItems.$each.$iter[index].address
-                          .required
-                      "
-                    >
-                      {{ $t('global.form.fieldRequired') }}
-                    </div>
-                    <div
-                      v-if="
-                        !$v.form.dnsStaticTableItems.$each.$iter[index].address
-                          .ipAddress
-                      "
-                    >
-                      {{ $t('global.form.invalidFormat') }}
-                    </div>
-                  </b-form-invalid-feedback>
-                </template>
-                <template #cell(actions)="{ item, index }">
-                  <table-row-action
-                    v-for="(action, actionIndex) in item.actions"
-                    :key="actionIndex"
-                    :value="action.value"
-                    :title="action.title"
-                    @click-table-action="onDeleteDnsTableRow($event, index)"
-                  >
-                    <template #icon>
-                      <icon-trashcan v-if="action.value === 'delete'" />
-                    </template>
-                  </table-row-action>
-                </template>
-              </b-table>
-              <b-button variant="link" @click="addDnsTableRow">
-                <icon-add /> {{ $t('pageNetworkSettings.table.addDns') }}
-              </b-button>
-            </b-col>
-          </b-row>
-        </page-section>
-        <b-button
-          variant="primary"
-          type="submit"
-          data-test-id="networkSettings-button-saveNetworkSettings"
-        >
-          {{ $t('global.action.saveSettings') }}
-        </b-button>
-      </b-form-group>
-    </b-form>
-  </b-container>
-</template>
-
-<script>
-import IconTrashcan from '@carbon/icons-vue/es/trash-can/20';
-import IconAdd from '@carbon/icons-vue/es/add--alt/20';
-import BVToastMixin from '@/components/Mixins/BVToastMixin';
-import LoadingBarMixin, { loading } from '@/components/Mixins/LoadingBarMixin';
-import PageSection from '@/components/Global/PageSection';
-import PageTitle from '@/components/Global/PageTitle';
-import TableRowAction from '@/components/Global/TableRowAction';
-import VuelidateMixin from '@/components/Mixins/VuelidateMixin';
-import { mapState } from 'vuex';
-import {
-  required,
-  helpers,
-  ipAddress,
-  macAddress,
-} from 'vuelidate/lib/validators';
-
-// Hostname pattern
-const validateHostname = helpers.regex('validateHostname', /^\S{0,64}$/);
-
-export default {
-  name: 'NetworkSettings',
-  components: {
-    PageTitle,
-    PageSection,
-    TableRowAction,
-    IconTrashcan,
-    IconAdd,
-  },
-  mixins: [BVToastMixin, VuelidateMixin, LoadingBarMixin],
-  beforeRouteLeave(to, from, next) {
-    this.hideLoader();
-    next();
-  },
-  data() {
-    return {
-      ipv4DhcpTableFields: [
-        {
-          key: 'Address',
-          label: this.$t('pageNetworkSettings.table.ipAddress'),
-        },
-        {
-          key: 'SubnetMask',
-          label: this.$t('pageNetworkSettings.table.subnet'),
-        },
-        { key: 'actions', label: '', tdClass: 'text-right' },
-      ],
-      ipv4StaticTableFields: [
-        {
-          key: 'Address',
-          label: this.$t('pageNetworkSettings.table.ipAddress'),
-        },
-        {
-          key: 'SubnetMask',
-          label: this.$t('pageNetworkSettings.table.subnet'),
-        },
-        { key: 'actions', label: '', tdClass: 'text-right' },
-      ],
-      dnsTableFields: [
-        {
-          key: 'address',
-          label: this.$t('pageNetworkSettings.table.ipAddress'),
-        },
-        { key: 'actions', label: '', tdClass: 'text-right' },
-      ],
-      selectedInterfaceIndex: 0,
-      selectedInterface: {},
-      form: {
-        dhcpEnabled: null,
-        gateway: '',
-        hostname: '',
-        macAddress: '',
-        ipv4StaticTableItems: [],
-        ipv4DhcpTableItems: [],
-        dnsStaticTableItems: [],
-      },
-      loading,
-    };
-  },
-  validations() {
-    return {
-      form: {
-        gateway: { required, ipAddress },
-        hostname: { required, validateHostname },
-        ipv4StaticTableItems: {
-          $each: {
-            Address: {
-              required,
-              ipAddress,
-            },
-            SubnetMask: {
-              required,
-              ipAddress,
-            },
-          },
-        },
-        macAddress: { required, macAddress: macAddress() },
-        dnsStaticTableItems: {
-          $each: {
-            address: {
-              required,
-              ipAddress,
-            },
-          },
-        },
-      },
-    };
-  },
-  computed: {
-    ...mapState('networkSettings', [
-      'ethernetData',
-      'interfaceOptions',
-      'defaultGateway',
-    ]),
-    interfaceSelectOptions() {
-      return this.interfaceOptions.map((option, index) => {
-        return {
-          text: option,
-          value: index,
-        };
-      });
-    },
-  },
-  watch: {
-    ethernetData: function () {
-      this.selectInterface();
-    },
-  },
-  created() {
-    this.startLoader();
-    this.$store
-      .dispatch('networkSettings/getEthernetData')
-      .finally(() => this.endLoader());
-  },
-  methods: {
-    selectInterface() {
-      this.selectedInterface = this.ethernetData[this.selectedInterfaceIndex];
-      this.getIpv4DhcpTableItems();
-      this.getIpv4StaticTableItems();
-      this.getDnsStaticTableItems();
-      this.getInterfaceSettings();
-    },
-    getInterfaceSettings() {
-      this.form.gateway = this.defaultGateway;
-      this.form.hostname = this.selectedInterface.HostName;
-      this.form.macAddress = this.selectedInterface.MACAddress;
-      this.form.dhcpEnabled = this.selectedInterface.DHCPv4.DHCPEnabled;
-    },
-    onChangeIpv4Config(value) {
-      this.form.dhcpEnabled = value;
-    },
-    getDnsStaticTableItems() {
-      const dns = this.selectedInterface.StaticNameServers || [];
-      this.form.dnsStaticTableItems = dns.map((server) => {
-        return {
-          address: server,
-          actions: [
-            {
-              value: 'delete',
-              enabled: this.form.dhcpEnabled,
-              title: this.$t('pageNetworkSettings.table.deleteDns'),
-            },
-          ],
-        };
-      });
-    },
-    addDnsTableRow() {
-      this.$v.form.dnsStaticTableItems.$touch();
-      this.form.dnsStaticTableItems.push({
-        address: '',
-        actions: [
-          {
-            value: 'delete',
-            enabled: this.form.dhcpEnabled,
-            title: this.$t('pageNetworkSettings.table.deleteDns'),
-          },
-        ],
-      });
-    },
-    deleteDnsTableRow(index) {
-      this.$v.form.dnsStaticTableItems.$touch();
-      this.form.dnsStaticTableItems.splice(index, 1);
-    },
-    onDeleteDnsTableRow(action, row) {
-      this.deleteDnsTableRow(row);
-    },
-    getIpv4DhcpTableItems() {
-      const addresses = this.selectedInterface.IPv4Addresses || [];
-      this.form.ipv4DhcpTableItems = addresses
-        .filter((ipv4) => ipv4.AddressOrigin === 'DHCP')
-        .map((ipv4) => {
-          return {
-            Address: ipv4.Address,
-            SubnetMask: ipv4.SubnetMask,
-            actions: [
-              {
-                value: 'delete',
-                enabled: false,
-                title: this.$t('pageNetworkSettings.table.deleteDhcpIpv4'),
-              },
-            ],
-          };
-        });
-    },
-    getIpv4StaticTableItems() {
-      const addresses = this.selectedInterface.IPv4StaticAddresses || [];
-      this.form.ipv4StaticTableItems = addresses.map((ipv4) => {
-        return {
-          Address: ipv4.Address,
-          SubnetMask: ipv4.SubnetMask,
-          actions: [
-            {
-              value: 'delete',
-              enabled: this.form.dhcpEnabled,
-              title: this.$t('pageNetworkSettings.table.deleteStaticIpv4'),
-            },
-          ],
-        };
-      });
-    },
-    addIpv4StaticTableRow() {
-      this.$v.form.ipv4StaticTableItems.$touch();
-      this.form.ipv4StaticTableItems.push({
-        Address: '',
-        SubnetMask: '',
-        actions: [
-          {
-            value: 'delete',
-            enabled: this.form.dhcpEnabled,
-            title: this.$t('pageNetworkSettings.table.deleteStaticIpv4'),
-          },
-        ],
-      });
-    },
-    deleteIpv4StaticTableRow(index) {
-      this.$v.form.ipv4StaticTableItems.$touch();
-      this.form.ipv4StaticTableItems.splice(index, 1);
-    },
-    onDeleteIpv4StaticTableRow(action, row) {
-      this.deleteIpv4StaticTableRow(row);
-    },
-    submitForm() {
-      this.$v.$touch();
-      if (this.$v.$invalid) return;
-      this.startLoader();
-      let networkInterfaceSelected = this.selectedInterface;
-      let selectedInterfaceIndex = this.selectedInterfaceIndex;
-      let interfaceId = networkInterfaceSelected.Id;
-      let isDhcpEnabled = this.form.dhcpEnabled;
-      let macAddress = this.form.macAddress;
-      let hostname = this.form.hostname;
-      let networkSettingsForm = {
-        interfaceId,
-        hostname,
-        macAddress,
-        selectedInterfaceIndex,
-      };
-      // Enabling DHCP without any available IP addresses will bring network down
-      if (this.form.ipv4DhcpTableItems.length) {
-        networkSettingsForm.isDhcpEnabled = isDhcpEnabled;
-      } else {
-        networkSettingsForm.isDhcpEnabled = false;
-        this.errorToast(
-          this.$t('pageNetworkSettings.toast.errorSaveDhcpSettings')
-        );
-      }
-      networkSettingsForm.staticIpv4 = this.form.ipv4StaticTableItems.map(
-        (updateIpv4) => {
-          delete updateIpv4.actions;
-          updateIpv4.Gateway = this.form.gateway;
-          return updateIpv4;
-        }
-      );
-      networkSettingsForm.staticNameServers = this.form.dnsStaticTableItems.map(
-        (updateDns) => {
-          return updateDns.address;
-        }
-      );
-      this.$store
-        .dispatch(
-          'networkSettings/updateInterfaceSettings',
-          networkSettingsForm
-        )
-        .then((success) => {
-          this.successToast(success);
-        })
-        .catch(({ message }) => this.errorToast(message))
-        .finally(() => {
-          this.$v.form.$reset();
-          this.endLoader();
-        });
-    },
-  },
-};
-</script>
diff --git a/src/views/Configuration/NetworkSettings/index.js b/src/views/Configuration/NetworkSettings/index.js
deleted file mode 100644
index 1215e1c1..00000000
--- a/src/views/Configuration/NetworkSettings/index.js
+++ /dev/null
@@ -1,2 +0,0 @@
-import NetworkSettings from './NetworkSettings.vue';
-export default NetworkSettings;
diff --git a/src/views/Configuration/SecuritySettings/SecuritySettings.vue b/src/views/Configuration/SecuritySettings/SecuritySettings.vue
deleted file mode 100644
index ec8d2589..00000000
--- a/src/views/Configuration/SecuritySettings/SecuritySettings.vue
+++ /dev/null
@@ -1,125 +0,0 @@
-<template>
-  <b-container fluid="xl">
-    <page-title />
-    <b-row>
-      <b-col md="8">
-        <page-section
-          :section-title="$t('pageSecuritySettings.networkServices')"
-        >
-          <b-row class="setting-section">
-            <b-col class="d-flex align-items-center justify-content-between">
-              <dl class="mr-3 w-75">
-                <dt>{{ $t('pageSecuritySettings.ssh') }}</dt>
-                <dd>
-                  {{ $t('pageSecuritySettings.sshDescription') }}
-                </dd>
-              </dl>
-              <b-form-checkbox
-                id="sshSwitch"
-                v-model="sshProtocolState"
-                data-test-id="security-toggle-bmcShell"
-                switch
-                @change="changeSshProtocolState"
-              >
-                <span class="sr-only">
-                  {{ $t('pageSecuritySettings.ssh') }}
-                </span>
-                <span v-if="sshProtocolState">
-                  {{ $t('global.status.enabled') }}
-                </span>
-                <span v-else>{{ $t('global.status.disabled') }}</span>
-              </b-form-checkbox>
-            </b-col>
-          </b-row>
-          <b-row class="setting-section">
-            <b-col class="d-flex align-items-center justify-content-between">
-              <dl class="mt-3 mr-3 w-75">
-                <dt>{{ $t('pageSecuritySettings.ipmi') }}</dt>
-                <dd>
-                  {{ $t('pageSecuritySettings.ipmiDescription') }}
-                </dd>
-              </dl>
-              <b-form-checkbox
-                id="ipmiSwitch"
-                v-model="ipmiProtocolState"
-                data-test-id="security-toggle-networkIpmi"
-                switch
-                @change="changeIpmiProtocolState"
-              >
-                <span class="sr-only">
-                  {{ $t('pageSecuritySettings.ipmi') }}
-                </span>
-                <span v-if="ipmiProtocolState">
-                  {{ $t('global.status.enabled') }}
-                </span>
-                <span v-else>{{ $t('global.status.disabled') }}</span>
-              </b-form-checkbox>
-            </b-col>
-          </b-row>
-        </page-section>
-      </b-col>
-    </b-row>
-  </b-container>
-</template>
-
-<script>
-import PageSection from '@/components/Global/PageSection';
-import PageTitle from '@/components/Global/PageTitle';
-
-import LoadingBarMixin from '@/components/Mixins/LoadingBarMixin';
-import BVToastMixin from '@/components/Mixins/BVToastMixin';
-
-export default {
-  name: 'SecuritySettings',
-  components: { PageTitle, PageSection },
-  mixins: [LoadingBarMixin, BVToastMixin],
-  beforeRouteLeave(to, from, next) {
-    this.hideLoader();
-    next();
-  },
-  computed: {
-    sshProtocolState: {
-      get() {
-        return this.$store.getters['securitySettings/sshProtocolEnabled'];
-      },
-      set(newValue) {
-        return newValue;
-      },
-    },
-    ipmiProtocolState: {
-      get() {
-        return this.$store.getters['securitySettings/ipmiProtocolEnabled'];
-      },
-      set(newValue) {
-        return newValue;
-      },
-    },
-  },
-  created() {
-    this.startLoader();
-    this.$store
-      .dispatch('securitySettings/getNetworkProtocolStatus')
-      .finally(() => this.endLoader());
-  },
-  methods: {
-    changeIpmiProtocolState(state) {
-      this.$store
-        .dispatch('securitySettings/saveIpmiProtocolState', state)
-        .then((message) => this.successToast(message))
-        .catch(({ message }) => this.errorToast(message));
-    },
-    changeSshProtocolState(state) {
-      this.$store
-        .dispatch('securitySettings/saveSshProtocolState', state)
-        .then((message) => this.successToast(message))
-        .catch(({ message }) => this.errorToast(message));
-    },
-  },
-};
-</script>
-
-<style lang="scss" scoped>
-.setting-section {
-  border-bottom: 1px solid gray('300');
-}
-</style>
diff --git a/src/views/Configuration/SecuritySettings/index.js b/src/views/Configuration/SecuritySettings/index.js
deleted file mode 100644
index 5ec2b615..00000000
--- a/src/views/Configuration/SecuritySettings/index.js
+++ /dev/null
@@ -1,2 +0,0 @@
-import SecuritySettings from './SecuritySettings.vue';
-export default SecuritySettings;
diff --git a/src/views/Operations/PowerRestorePolicy/PowerRestorePolicy.vue b/src/views/Operations/PowerRestorePolicy/PowerRestorePolicy.vue
deleted file mode 100644
index 8589aed3..00000000
--- a/src/views/Operations/PowerRestorePolicy/PowerRestorePolicy.vue
+++ /dev/null
@@ -1,80 +0,0 @@
-<template>
-  <b-container fluid="xl">
-    <page-title :description="$t('pagePowerRestorePolicy.description')" />
-
-    <b-row>
-      <b-col sm="8" md="6" xl="12">
-        <b-form-group :label="$t('pagePowerRestorePolicy.powerPoliciesLabel')">
-          <b-form-radio
-            v-for="policy in powerRestorePolicies"
-            :key="policy.state"
-            v-model="currentPowerRestorePolicy"
-            :value="policy.state"
-            name="power-restore-policy"
-          >
-            {{ policy.desc }}
-          </b-form-radio>
-        </b-form-group>
-      </b-col>
-    </b-row>
-
-    <b-button variant="primary" type="submit" @click="submitForm">
-      {{ $t('global.action.saveSettings') }}
-    </b-button>
-  </b-container>
-</template>
-
-<script>
-import PageTitle from '@/components/Global/PageTitle';
-import LoadingBarMixin from '@/components/Mixins/LoadingBarMixin';
-import VuelidateMixin from '@/components/Mixins/VuelidateMixin.js';
-import BVToastMixin from '@/components/Mixins/BVToastMixin';
-
-export default {
-  name: 'PowerRestorePolicy',
-  components: { PageTitle },
-  mixins: [VuelidateMixin, BVToastMixin, LoadingBarMixin],
-  beforeRouteLeave(to, from, next) {
-    this.hideLoader();
-    next();
-  },
-  data() {
-    return {
-      policyValue: null,
-    };
-  },
-  computed: {
-    powerRestorePolicies() {
-      return this.$store.getters['powerPolicy/powerRestorePolicies'];
-    },
-    currentPowerRestorePolicy: {
-      get() {
-        return this.$store.getters['powerPolicy/powerRestoreCurrentPolicy'];
-      },
-      set(policy) {
-        this.policyValue = policy;
-      },
-    },
-  },
-  created() {
-    this.startLoader();
-    Promise.all([
-      this.$store.dispatch('powerPolicy/getPowerRestorePolicies'),
-      this.$store.dispatch('powerPolicy/getPowerRestoreCurrentPolicy'),
-    ]).finally(() => this.endLoader());
-  },
-  methods: {
-    submitForm() {
-      this.startLoader();
-      this.$store
-        .dispatch(
-          'powerPolicy/setPowerRestorePolicy',
-          this.policyValue || this.currentPowerRestorePolicy
-        )
-        .then((message) => this.successToast(message))
-        .catch(({ message }) => this.errorToast(message))
-        .finally(() => this.endLoader());
-    },
-  },
-};
-</script>
diff --git a/src/views/Operations/PowerRestorePolicy/index.js b/src/views/Operations/PowerRestorePolicy/index.js
deleted file mode 100644
index fab0d477..00000000
--- a/src/views/Operations/PowerRestorePolicy/index.js
+++ /dev/null
@@ -1,2 +0,0 @@
-import PowerRestorePolicy from './PowerRestorePolicy.vue';
-export default PowerRestorePolicy;
diff --git a/src/views/Overview/OverviewNetwork.vue b/src/views/Overview/OverviewNetwork.vue
index 8caf1e8b..bfb378a9 100644
--- a/src/views/Overview/OverviewNetwork.vue
+++ b/src/views/Overview/OverviewNetwork.vue
@@ -45,11 +45,11 @@ export default {
   name: 'Network',
   computed: {
     ethernetData() {
-      return this.$store.getters['networkSettings/ethernetData'];
+      return this.$store.getters['network/ethernetData'];
     },
   },
   created() {
-    this.$store.dispatch('networkSettings/getEthernetData').finally(() => {
+    this.$store.dispatch('network/getEthernetData').finally(() => {
       this.$root.$emit('overview-network-complete');
     });
   },
diff --git a/src/views/Overview/OverviewQuickLinks.vue b/src/views/Overview/OverviewQuickLinks.vue
index 9392c56c..1dc2c984 100644
--- a/src/views/Overview/OverviewQuickLinks.vue
+++ b/src/views/Overview/OverviewQuickLinks.vue
@@ -30,7 +30,7 @@
     </div>
     <div>
       <b-button
-        to="/configuration/network-settings"
+        to="/settings/network"
         variant="secondary"
         data-test-id="overviewQuickLinks-button-networkSettings"
         class="d-flex justify-content-between align-items-center"
diff --git a/src/views/Settings/DateTime/DateTime.vue b/src/views/Settings/DateTime/DateTime.vue
new file mode 100644
index 00000000..e62e3444
--- /dev/null
+++ b/src/views/Settings/DateTime/DateTime.vue
@@ -0,0 +1,405 @@
+<template>
+  <b-container fluid="xl">
+    <page-title />
+    <b-row>
+      <b-col md="8" xl="6">
+        <alert variant="info" class="mb-4">
+          <span>
+            {{ $t('pageDateTime.alert.message') }}
+            <b-link to="/profile-settings">
+              {{ $t('pageDateTime.alert.link') }}</b-link
+            >
+          </span>
+        </alert>
+      </b-col>
+    </b-row>
+    <page-section>
+      <b-row>
+        <b-col lg="3">
+          <dl>
+            <dt>{{ $t('pageDateTime.form.date') }}</dt>
+            <dd v-if="bmcTime">{{ bmcTime | formatDate }}</dd>
+            <dd v-else>--</dd>
+          </dl>
+        </b-col>
+        <b-col lg="3">
+          <dl>
+            <dt>{{ $t('pageDateTime.form.time.label') }}</dt>
+            <dd v-if="bmcTime">{{ bmcTime | formatTime }}</dd>
+            <dd v-else>--</dd>
+          </dl>
+        </b-col>
+      </b-row>
+    </page-section>
+    <page-section :section-title="$t('pageDateTime.configureSettings')">
+      <b-form novalidate @submit.prevent="submitForm">
+        <b-form-group
+          label="Configure date and time"
+          :disabled="loading"
+          label-sr-only
+        >
+          <b-form-radio
+            v-model="form.configurationSelected"
+            value="manual"
+            data-test-id="dateTime-radio-configureManual"
+          >
+            {{ $t('pageDateTime.form.manual') }}
+          </b-form-radio>
+          <b-row class="mt-3 ml-3">
+            <b-col sm="6" lg="4" xl="3">
+              <b-form-group
+                :label="$t('pageDateTime.form.date')"
+                label-for="input-manual-date"
+              >
+                <b-form-text id="date-format-help">YYYY-MM-DD</b-form-text>
+                <b-input-group>
+                  <b-form-input
+                    id="input-manual-date"
+                    v-model="form.manual.date"
+                    :state="getValidationState($v.form.manual.date)"
+                    :disabled="ntpOptionSelected"
+                    data-test-id="dateTime-input-manualDate"
+                    class="form-control-with-button"
+                    @blur="$v.form.manual.date.$touch()"
+                  />
+                  <b-form-invalid-feedback role="alert">
+                    <div v-if="!$v.form.manual.date.pattern">
+                      {{ $t('global.form.invalidFormat') }}
+                    </div>
+                    <div v-if="!$v.form.manual.date.required">
+                      {{ $t('global.form.fieldRequired') }}
+                    </div>
+                  </b-form-invalid-feedback>
+                  <b-form-datepicker
+                    v-model="form.manual.date"
+                    class="btn-datepicker btn-icon-only"
+                    button-only
+                    right
+                    :hide-header="true"
+                    :locale="locale"
+                    :label-help="
+                      $t('global.calendar.useCursorKeysToNavigateCalendarDates')
+                    "
+                    :title="$t('global.calendar.selectDate')"
+                    :disabled="ntpOptionSelected"
+                    button-variant="link"
+                    aria-controls="input-manual-date"
+                  >
+                    <template #button-content>
+                      <icon-calendar />
+                      <span class="sr-only">
+                        {{ $t('global.calendar.selectDate') }}
+                      </span>
+                    </template>
+                  </b-form-datepicker>
+                </b-input-group>
+              </b-form-group>
+            </b-col>
+            <b-col sm="6" lg="4" xl="3">
+              <b-form-group
+                :label="$t('pageDateTime.form.time.timezone', { timezone })"
+                label-for="input-manual-time"
+              >
+                <b-form-text id="time-format-help">HH:MM</b-form-text>
+                <b-input-group>
+                  <b-form-input
+                    id="input-manual-time"
+                    v-model="form.manual.time"
+                    :state="getValidationState($v.form.manual.time)"
+                    :disabled="ntpOptionSelected"
+                    data-test-id="dateTime-input-manualTime"
+                    @blur="$v.form.manual.time.$touch()"
+                  />
+                  <b-form-invalid-feedback role="alert">
+                    <div v-if="!$v.form.manual.time.pattern">
+                      {{ $t('global.form.invalidFormat') }}
+                    </div>
+                    <div v-if="!$v.form.manual.time.required">
+                      {{ $t('global.form.fieldRequired') }}
+                    </div>
+                  </b-form-invalid-feedback>
+                </b-input-group>
+              </b-form-group>
+            </b-col>
+          </b-row>
+          <b-form-radio
+            v-model="form.configurationSelected"
+            value="ntp"
+            data-test-id="dateTime-radio-configureNTP"
+          >
+            NTP
+          </b-form-radio>
+          <b-row class="mt-3 ml-3">
+            <b-col sm="6" lg="4" xl="3">
+              <b-form-group
+                :label="$t('pageDateTime.form.ntpServers.server1')"
+                label-for="input-ntp-1"
+              >
+                <b-input-group>
+                  <b-form-input
+                    id="input-ntp-1"
+                    v-model="form.ntp.firstAddress"
+                    :state="getValidationState($v.form.ntp.firstAddress)"
+                    :disabled="manualOptionSelected"
+                    data-test-id="dateTime-input-ntpServer1"
+                    @blur="$v.form.ntp.firstAddress.$touch()"
+                  />
+                  <b-form-invalid-feedback role="alert">
+                    <div v-if="!$v.form.ntp.firstAddress.required">
+                      {{ $t('global.form.fieldRequired') }}
+                    </div>
+                  </b-form-invalid-feedback>
+                </b-input-group>
+              </b-form-group>
+            </b-col>
+            <b-col sm="6" lg="4" xl="3">
+              <b-form-group
+                :label="$t('pageDateTime.form.ntpServers.server2')"
+                label-for="input-ntp-2"
+              >
+                <b-input-group>
+                  <b-form-input
+                    id="input-ntp-2"
+                    v-model="form.ntp.secondAddress"
+                    :disabled="manualOptionSelected"
+                    data-test-id="dateTime-input-ntpServer2"
+                  />
+                </b-input-group>
+              </b-form-group>
+            </b-col>
+            <b-col sm="6" lg="4" xl="3">
+              <b-form-group
+                :label="$t('pageDateTime.form.ntpServers.server3')"
+                label-for="input-ntp-3"
+              >
+                <b-input-group>
+                  <b-form-input
+                    id="input-ntp-3"
+                    v-model="form.ntp.thirdAddress"
+                    :disabled="manualOptionSelected"
+                    data-test-id="dateTime-input-ntpServer3"
+                  />
+                </b-input-group>
+              </b-form-group>
+            </b-col>
+          </b-row>
+          <b-button
+            variant="primary"
+            type="submit"
+            data-test-id="dateTime-button-saveSettings"
+          >
+            {{ $t('global.action.saveSettings') }}
+          </b-button>
+        </b-form-group>
+      </b-form>
+    </page-section>
+  </b-container>
+</template>
+
+<script>
+import Alert from '@/components/Global/Alert';
+import IconCalendar from '@carbon/icons-vue/es/calendar/20';
+import PageTitle from '@/components/Global/PageTitle';
+import PageSection from '@/components/Global/PageSection';
+
+import BVToastMixin from '@/components/Mixins/BVToastMixin';
+import LoadingBarMixin, { loading } from '@/components/Mixins/LoadingBarMixin';
+import LocalTimezoneLabelMixin from '@/components/Mixins/LocalTimezoneLabelMixin';
+import VuelidateMixin from '@/components/Mixins/VuelidateMixin.js';
+
+import { mapState } from 'vuex';
+import { requiredIf, helpers } from 'vuelidate/lib/validators';
+
+const isoDateRegex = /([12]\d{3}-(0[1-9]|1[0-2])-(0[1-9]|[12]\d|3[01]))/;
+const isoTimeRegex = /^(0[0-9]|1[0-9]|2[0-3]):[0-5][0-9]$/;
+
+export default {
+  name: 'DateTime',
+  components: { Alert, IconCalendar, PageTitle, PageSection },
+  mixins: [
+    BVToastMixin,
+    LoadingBarMixin,
+    LocalTimezoneLabelMixin,
+    VuelidateMixin,
+  ],
+  beforeRouteLeave(to, from, next) {
+    this.hideLoader();
+    next();
+  },
+  data() {
+    return {
+      locale: this.$store.getters['global/languagePreference'],
+      form: {
+        configurationSelected: 'manual',
+        manual: {
+          date: '',
+          time: '',
+        },
+        ntp: { firstAddress: '', secondAddress: '', thirdAddress: '' },
+      },
+      loading,
+    };
+  },
+  validations() {
+    return {
+      form: {
+        manual: {
+          date: {
+            required: requiredIf(function () {
+              return this.form.configurationSelected === 'manual';
+            }),
+            pattern: helpers.regex('pattern', isoDateRegex),
+          },
+          time: {
+            required: requiredIf(function () {
+              return this.form.configurationSelected === 'manual';
+            }),
+            pattern: helpers.regex('pattern', isoTimeRegex),
+          },
+        },
+        ntp: {
+          firstAddress: {
+            required: requiredIf(function () {
+              return this.form.configurationSelected === 'ntp';
+            }),
+          },
+        },
+      },
+    };
+  },
+  computed: {
+    ...mapState('dateTime', ['ntpServers', 'isNtpProtocolEnabled']),
+    bmcTime() {
+      return this.$store.getters['global/bmcTime'];
+    },
+    ntpOptionSelected() {
+      return this.form.configurationSelected === 'ntp';
+    },
+    manualOptionSelected() {
+      return this.form.configurationSelected === 'manual';
+    },
+    isUtcDisplay() {
+      return this.$store.getters['global/isUtcDisplay'];
+    },
+    timezone() {
+      if (this.isUtcDisplay) {
+        return 'UTC';
+      }
+      return this.localOffset();
+    },
+  },
+  watch: {
+    ntpServers() {
+      this.setNtpValues();
+    },
+    manualDate() {
+      this.emitChange();
+    },
+    bmcTime() {
+      this.form.manual.date = this.$options.filters.formatDate(
+        this.$store.getters['global/bmcTime']
+      );
+      this.form.manual.time = this.$options.filters
+        .formatTime(this.$store.getters['global/bmcTime'])
+        .slice(0, 5);
+    },
+  },
+  created() {
+    this.startLoader();
+    this.setNtpValues();
+    Promise.all([
+      this.$store.dispatch('global/getBmcTime'),
+      this.$store.dispatch('dateTime/getNtpData'),
+    ]).finally(() => this.endLoader());
+  },
+  methods: {
+    emitChange() {
+      if (this.$v.$invalid) return;
+      this.$v.$reset(); //reset to re-validate on blur
+      this.$emit('change', {
+        manualDate: this.manualDate ? new Date(this.manualDate) : null,
+      });
+    },
+    setNtpValues() {
+      this.form.configurationSelected = this.isNtpProtocolEnabled
+        ? 'ntp'
+        : 'manual';
+      [
+        this.form.ntp.firstAddress = '',
+        this.form.ntp.secondAddress = '',
+        this.form.ntp.thirdAddress = '',
+      ] = [this.ntpServers[0], this.ntpServers[1], this.ntpServers[2]];
+    },
+    submitForm() {
+      this.$v.$touch();
+      if (this.$v.$invalid) return;
+      this.startLoader();
+
+      let dateTimeForm = {};
+      let isNTPEnabled = this.form.configurationSelected === 'ntp';
+
+      if (!isNTPEnabled) {
+        const isUtcDisplay = this.$store.getters['global/isUtcDisplay'];
+        let date;
+
+        dateTimeForm.ntpProtocolEnabled = false;
+
+        if (isUtcDisplay) {
+          // Create UTC Date
+          date = this.getUtcDate(this.form.manual.date, this.form.manual.time);
+        } else {
+          // Create local Date
+          date = new Date(`${this.form.manual.date} ${this.form.manual.time}`);
+        }
+
+        dateTimeForm.updatedDateTime = date.toISOString();
+      } else {
+        dateTimeForm.ntpProtocolEnabled = true;
+
+        dateTimeForm.ntpServersArray = [
+          this.form.ntp.firstAddress,
+          this.form.ntp.secondAddress,
+          this.form.ntp.thirdAddress,
+        ];
+      }
+
+      this.$store
+        .dispatch('dateTime/updateDateTime', dateTimeForm)
+        .then((success) => {
+          this.successToast(success);
+          if (!isNTPEnabled) return;
+          // Shift address up if second address is empty
+          // to avoid refreshing after delay when updating NTP
+          if (!this.form.ntp.secondAddress && this.form.ntp.thirdAddres) {
+            this.form.ntp.secondAddress = this.form.ntp.thirdAddres;
+            this.form.ntp.thirdAddress = '';
+          }
+        })
+        .then(() => {
+          this.$store.dispatch('global/getBmcTime');
+        })
+        .catch(({ message }) => this.errorToast(message))
+        .finally(() => {
+          this.$v.form.$reset();
+          this.endLoader();
+        });
+    },
+    getUtcDate(date, time) {
+      // Split user input string values to create
+      // a UTC Date object
+      const datesArray = date.split('-');
+      const timeArray = time.split(':');
+      let utcDate = Date.UTC(
+        datesArray[0], // User input year
+        //UTC expects zero-index month value 0-11 (January-December)
+        //for reference https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/UTC#Parameters
+        parseInt(datesArray[1]) - 1, // User input month
+        datesArray[2], // User input day
+        timeArray[0], // User input hour
+        timeArray[1] // User input minute
+      );
+      return new Date(utcDate);
+    },
+  },
+};
+</script>
diff --git a/src/views/Settings/DateTime/index.js b/src/views/Settings/DateTime/index.js
new file mode 100644
index 00000000..2df21eae
--- /dev/null
+++ b/src/views/Settings/DateTime/index.js
@@ -0,0 +1,2 @@
+import DateTime from './DateTime.vue';
+export default DateTime;
diff --git a/src/views/Settings/Network/Network.vue b/src/views/Settings/Network/Network.vue
new file mode 100644
index 00000000..ab5003f8
--- /dev/null
+++ b/src/views/Settings/Network/Network.vue
@@ -0,0 +1,664 @@
+<template>
+  <b-container fluid="xl">
+    <page-title :description="$t('pageNetwork.pageDescription')" />
+    <page-section :section-title="$t('pageNetwork.interface')">
+      <b-row>
+        <b-col lg="3">
+          <b-form-group
+            label-for="interface-select"
+            :label="$t('pageNetwork.form.networkInterface')"
+          >
+            <b-form-select
+              id="interface-select"
+              v-model="selectedInterfaceIndex"
+              :disabled="loading"
+              data-test-id="network-select-interface"
+              :options="interfaceSelectOptions"
+              @change="selectInterface"
+            >
+            </b-form-select>
+          </b-form-group>
+        </b-col>
+      </b-row>
+    </page-section>
+    <b-form novalidate @submit.prevent="submitForm">
+      <b-form-group :disabled="loading">
+        <page-section :section-title="$t('pageNetwork.system')">
+          <b-row>
+            <b-col lg="3">
+              <b-form-group
+                :label="$t('pageNetwork.form.defaultGateway')"
+                label-for="default-gateway"
+              >
+                <b-form-input
+                  id="default-gateway"
+                  v-model.trim="form.gateway"
+                  data-test-id="network-input-gateway"
+                  type="text"
+                  :state="getValidationState($v.form.gateway)"
+                  @change="$v.form.gateway.$touch()"
+                />
+                <b-form-invalid-feedback role="alert">
+                  <div v-if="!$v.form.gateway.required">
+                    {{ $t('global.form.fieldRequired') }}
+                  </div>
+                  <div v-if="!$v.form.gateway.ipAddress">
+                    {{ $t('global.form.invalidFormat') }}
+                  </div>
+                </b-form-invalid-feedback>
+              </b-form-group>
+            </b-col>
+            <b-col lg="3">
+              <b-form-group
+                :label="$t('pageNetwork.form.hostname')"
+                label-for="hostname-field"
+              >
+                <b-form-input
+                  id="hostname-field"
+                  v-model.trim="form.hostname"
+                  data-test-id="network-input-hostname"
+                  type="text"
+                  :state="getValidationState($v.form.hostname)"
+                  @change="$v.form.hostname.$touch()"
+                />
+                <b-form-invalid-feedback role="alert">
+                  <div v-if="!$v.form.hostname.required">
+                    {{ $t('global.form.fieldRequired') }}
+                  </div>
+                  <div v-if="!$v.form.hostname.validateHostname">
+                    {{
+                      $t('global.form.lengthMustBeBetween', { min: 1, max: 64 })
+                    }}
+                  </div>
+                </b-form-invalid-feedback>
+              </b-form-group>
+            </b-col>
+            <b-col lg="3">
+              <b-form-group
+                :label="$t('pageNetwork.form.macAddress')"
+                label-for="mac-address"
+              >
+                <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>
+        </page-section>
+        <page-section :section-title="$t('pageNetwork.ipv4')">
+          <b-form-group :label="$t('pageNetwork.ipv4Configuration')">
+            <b-form-text id="enable-secure-help-block">
+              {{ $t('pageNetwork.ipv4Helper') }}
+            </b-form-text>
+            <b-form-radio
+              v-model="form.dhcpEnabled"
+              name="dhcp-radio"
+              :value="true"
+              @change="onChangeIpv4Config"
+            >
+              {{ $t('pageNetwork.dhcp') }}
+            </b-form-radio>
+            <b-form-radio
+              v-model="form.dhcpEnabled"
+              name="static-radio"
+              :value="false"
+              @change="onChangeIpv4Config"
+            >
+              {{ $t('pageNetwork.static') }}
+            </b-form-radio>
+          </b-form-group>
+          <b-row>
+            <b-col lg="9" class="mb-3">
+              <h3 class="h4">
+                {{ $t('pageNetwork.dhcp') }}
+              </h3>
+              <b-table
+                responsive="md"
+                hover
+                :fields="ipv4DhcpTableFields"
+                :items="form.ipv4DhcpTableItems"
+                :empty-text="$t('global.table.emptyMessage')"
+                class="mb-0"
+                show-empty
+              >
+                <template #cell(Address)="{ item, index }">
+                  <b-form-input
+                    v-model.trim="item.Address"
+                    :data-test-id="`network-input-dhcpIpv4-${index}`"
+                    :aria-label="
+                      $t('pageNetwork.table.dhcpIpv4AddressRow') +
+                      ' ' +
+                      (index + 1)
+                    "
+                    readonly
+                  />
+                </template>
+                <template #cell(SubnetMask)="{ item, index }">
+                  <b-form-input
+                    v-model.trim="item.SubnetMask"
+                    :data-test-id="`network-input-subnetMask-${index}`"
+                    :aria-label="
+                      $t('pageNetwork.table.dhcpIpv4SubnetRow') +
+                      ' ' +
+                      (index + 1)
+                    "
+                    readonly
+                  />
+                </template>
+                <template #cell(actions)="{ item, index }">
+                  <table-row-action
+                    v-for="(action, actionIndex) in item.actions"
+                    :key="actionIndex"
+                    :value="action.value"
+                    :title="action.title"
+                    :enabled="false"
+                    @click-table-action="
+                      onDeleteIpv4StaticTableRow($event, index)
+                    "
+                  >
+                    <template #icon>
+                      <icon-trashcan v-if="action.value === 'delete'" />
+                    </template>
+                  </table-row-action>
+                </template>
+              </b-table>
+            </b-col>
+            <b-col lg="9" class="mb-3">
+              <h3 class="h4">
+                {{ $t('pageNetwork.static') }}
+              </h3>
+              <b-table
+                responsive="md"
+                hover
+                :fields="ipv4StaticTableFields"
+                :items="form.ipv4StaticTableItems"
+                :empty-text="$t('global.table.emptyMessage')"
+                class="mb-0"
+                show-empty
+              >
+                <template #cell(Address)="{ item, index }">
+                  <b-form-input
+                    v-model.trim="item.Address"
+                    :data-test-id="`network-input-staticIpv4-${index}`"
+                    :aria-label="
+                      $t('pageNetwork.table.staticIpv4AddressRow') +
+                      ' ' +
+                      (index + 1)
+                    "
+                    :state="
+                      getValidationState(
+                        $v.form.ipv4StaticTableItems.$each.$iter[index].Address
+                      )
+                    "
+                    @change="
+                      $v.form.ipv4StaticTableItems.$each.$iter[
+                        index
+                      ].Address.$touch()
+                    "
+                  />
+                  <b-form-invalid-feedback role="alert">
+                    <div
+                      v-if="
+                        !$v.form.ipv4StaticTableItems.$each.$iter[index].Address
+                          .required
+                      "
+                    >
+                      {{ $t('global.form.fieldRequired') }}
+                    </div>
+                    <div
+                      v-if="
+                        !$v.form.ipv4StaticTableItems.$each.$iter[index].Address
+                          .ipAddress
+                      "
+                    >
+                      {{ $t('global.form.invalidFormat') }}
+                    </div>
+                  </b-form-invalid-feedback>
+                </template>
+                <template #cell(SubnetMask)="{ item, index }">
+                  <b-form-input
+                    v-model.trim="item.SubnetMask"
+                    :data-test-id="`network-input-subnetMask-${index}`"
+                    :aria-label="
+                      $t('pageNetwork.table.staticIpv4SubnetRow') +
+                      ' ' +
+                      (index + 1)
+                    "
+                    :state="
+                      getValidationState(
+                        $v.form.ipv4StaticTableItems.$each.$iter[index]
+                          .SubnetMask
+                      )
+                    "
+                    @change="
+                      $v.form.ipv4StaticTableItems.$each.$iter[
+                        index
+                      ].SubnetMask.$touch()
+                    "
+                  />
+                  <b-form-invalid-feedback role="alert">
+                    <div
+                      v-if="
+                        !$v.form.ipv4StaticTableItems.$each.$iter[index]
+                          .SubnetMask.required
+                      "
+                    >
+                      {{ $t('global.form.fieldRequired') }}
+                    </div>
+                    <div
+                      v-if="
+                        !$v.form.ipv4StaticTableItems.$each.$iter[index]
+                          .SubnetMask.ipAddress
+                      "
+                    >
+                      {{ $t('global.form.invalidFormat') }}
+                    </div>
+                  </b-form-invalid-feedback>
+                </template>
+                <template #cell(actions)="{ item, index }">
+                  <table-row-action
+                    v-for="(action, actionIndex) in item.actions"
+                    :key="actionIndex"
+                    :value="action.value"
+                    :title="action.title"
+                    @click-table-action="
+                      onDeleteIpv4StaticTableRow($event, index)
+                    "
+                  >
+                    <template #icon>
+                      <icon-trashcan v-if="action.value === 'delete'" />
+                    </template>
+                  </table-row-action>
+                </template>
+              </b-table>
+              <b-button variant="link" @click="addIpv4StaticTableRow">
+                <icon-add />
+                {{ $t('pageNetwork.table.addStaticIpv4Address') }}
+              </b-button>
+            </b-col>
+          </b-row>
+        </page-section>
+        <page-section :section-title="$t('pageNetwork.staticDns')">
+          <b-row>
+            <b-col lg="4" class="mb-3">
+              <b-table
+                responsive
+                hover
+                :fields="dnsTableFields"
+                :items="form.dnsStaticTableItems"
+                :empty-text="$t('global.table.emptyMessage')"
+                class="mb-0"
+                show-empty
+              >
+                <template #cell(address)="{ item, index }">
+                  <b-form-input
+                    v-model.trim="item.address"
+                    :data-test-id="`network-input-dnsAddress-${index}`"
+                    :aria-label="
+                      $t('pageNetwork.table.staticDnsRow') + ' ' + (index + 1)
+                    "
+                    :state="
+                      getValidationState(
+                        $v.form.dnsStaticTableItems.$each.$iter[index].address
+                      )
+                    "
+                    @change="
+                      $v.form.dnsStaticTableItems.$each.$iter[
+                        index
+                      ].address.$touch()
+                    "
+                  />
+                  <b-form-invalid-feedback role="alert">
+                    <div
+                      v-if="
+                        !$v.form.dnsStaticTableItems.$each.$iter[index].address
+                          .required
+                      "
+                    >
+                      {{ $t('global.form.fieldRequired') }}
+                    </div>
+                    <div
+                      v-if="
+                        !$v.form.dnsStaticTableItems.$each.$iter[index].address
+                          .ipAddress
+                      "
+                    >
+                      {{ $t('global.form.invalidFormat') }}
+                    </div>
+                  </b-form-invalid-feedback>
+                </template>
+                <template #cell(actions)="{ item, index }">
+                  <table-row-action
+                    v-for="(action, actionIndex) in item.actions"
+                    :key="actionIndex"
+                    :value="action.value"
+                    :title="action.title"
+                    @click-table-action="onDeleteDnsTableRow($event, index)"
+                  >
+                    <template #icon>
+                      <icon-trashcan v-if="action.value === 'delete'" />
+                    </template>
+                  </table-row-action>
+                </template>
+              </b-table>
+              <b-button variant="link" @click="addDnsTableRow">
+                <icon-add /> {{ $t('pageNetwork.table.addDns') }}
+              </b-button>
+            </b-col>
+          </b-row>
+        </page-section>
+        <b-button
+          variant="primary"
+          type="submit"
+          data-test-id="network-button-saveNetworkSettings"
+        >
+          {{ $t('global.action.saveSettings') }}
+        </b-button>
+      </b-form-group>
+    </b-form>
+  </b-container>
+</template>
+
+<script>
+import IconTrashcan from '@carbon/icons-vue/es/trash-can/20';
+import IconAdd from '@carbon/icons-vue/es/add--alt/20';
+import BVToastMixin from '@/components/Mixins/BVToastMixin';
+import LoadingBarMixin, { loading } from '@/components/Mixins/LoadingBarMixin';
+import PageSection from '@/components/Global/PageSection';
+import PageTitle from '@/components/Global/PageTitle';
+import TableRowAction from '@/components/Global/TableRowAction';
+import VuelidateMixin from '@/components/Mixins/VuelidateMixin';
+import { mapState } from 'vuex';
+import {
+  required,
+  helpers,
+  ipAddress,
+  macAddress,
+} from 'vuelidate/lib/validators';
+
+// Hostname pattern
+const validateHostname = helpers.regex('validateHostname', /^\S{0,64}$/);
+
+export default {
+  name: 'Network',
+  components: {
+    PageTitle,
+    PageSection,
+    TableRowAction,
+    IconTrashcan,
+    IconAdd,
+  },
+  mixins: [BVToastMixin, VuelidateMixin, LoadingBarMixin],
+  beforeRouteLeave(to, from, next) {
+    this.hideLoader();
+    next();
+  },
+  data() {
+    return {
+      ipv4DhcpTableFields: [
+        {
+          key: 'Address',
+          label: this.$t('pageNetwork.table.ipAddress'),
+        },
+        {
+          key: 'SubnetMask',
+          label: this.$t('pageNetwork.table.subnet'),
+        },
+        { key: 'actions', label: '', tdClass: 'text-right' },
+      ],
+      ipv4StaticTableFields: [
+        {
+          key: 'Address',
+          label: this.$t('pageNetwork.table.ipAddress'),
+        },
+        {
+          key: 'SubnetMask',
+          label: this.$t('pageNetwork.table.subnet'),
+        },
+        { key: 'actions', label: '', tdClass: 'text-right' },
+      ],
+      dnsTableFields: [
+        {
+          key: 'address',
+          label: this.$t('pageNetwork.table.ipAddress'),
+        },
+        { key: 'actions', label: '', tdClass: 'text-right' },
+      ],
+      selectedInterfaceIndex: 0,
+      selectedInterface: {},
+      form: {
+        dhcpEnabled: null,
+        gateway: '',
+        hostname: '',
+        macAddress: '',
+        ipv4StaticTableItems: [],
+        ipv4DhcpTableItems: [],
+        dnsStaticTableItems: [],
+      },
+      loading,
+    };
+  },
+  validations() {
+    return {
+      form: {
+        gateway: { required, ipAddress },
+        hostname: { required, validateHostname },
+        ipv4StaticTableItems: {
+          $each: {
+            Address: {
+              required,
+              ipAddress,
+            },
+            SubnetMask: {
+              required,
+              ipAddress,
+            },
+          },
+        },
+        macAddress: { required, macAddress: macAddress() },
+        dnsStaticTableItems: {
+          $each: {
+            address: {
+              required,
+              ipAddress,
+            },
+          },
+        },
+      },
+    };
+  },
+  computed: {
+    ...mapState('network', [
+      'ethernetData',
+      'interfaceOptions',
+      'defaultGateway',
+    ]),
+    interfaceSelectOptions() {
+      return this.interfaceOptions.map((option, index) => {
+        return {
+          text: option,
+          value: index,
+        };
+      });
+    },
+  },
+  watch: {
+    ethernetData: function () {
+      this.selectInterface();
+    },
+  },
+  created() {
+    this.startLoader();
+    this.$store
+      .dispatch('network/getEthernetData')
+      .finally(() => this.endLoader());
+  },
+  methods: {
+    selectInterface() {
+      this.selectedInterface = this.ethernetData[this.selectedInterfaceIndex];
+      this.getIpv4DhcpTableItems();
+      this.getIpv4StaticTableItems();
+      this.getDnsStaticTableItems();
+      this.getInterfaceSettings();
+    },
+    getInterfaceSettings() {
+      this.form.gateway = this.defaultGateway;
+      this.form.hostname = this.selectedInterface.HostName;
+      this.form.macAddress = this.selectedInterface.MACAddress;
+      this.form.dhcpEnabled = this.selectedInterface.DHCPv4.DHCPEnabled;
+    },
+    onChangeIpv4Config(value) {
+      this.form.dhcpEnabled = value;
+    },
+    getDnsStaticTableItems() {
+      const dns = this.selectedInterface.StaticNameServers || [];
+      this.form.dnsStaticTableItems = dns.map((server) => {
+        return {
+          address: server,
+          actions: [
+            {
+              value: 'delete',
+              enabled: this.form.dhcpEnabled,
+              title: this.$t('pageNetwork.table.deleteDns'),
+            },
+          ],
+        };
+      });
+    },
+    addDnsTableRow() {
+      this.$v.form.dnsStaticTableItems.$touch();
+      this.form.dnsStaticTableItems.push({
+        address: '',
+        actions: [
+          {
+            value: 'delete',
+            enabled: this.form.dhcpEnabled,
+            title: this.$t('pageNetwork.table.deleteDns'),
+          },
+        ],
+      });
+    },
+    deleteDnsTableRow(index) {
+      this.$v.form.dnsStaticTableItems.$touch();
+      this.form.dnsStaticTableItems.splice(index, 1);
+    },
+    onDeleteDnsTableRow(action, row) {
+      this.deleteDnsTableRow(row);
+    },
+    getIpv4DhcpTableItems() {
+      const addresses = this.selectedInterface.IPv4Addresses || [];
+      this.form.ipv4DhcpTableItems = addresses
+        .filter((ipv4) => ipv4.AddressOrigin === 'DHCP')
+        .map((ipv4) => {
+          return {
+            Address: ipv4.Address,
+            SubnetMask: ipv4.SubnetMask,
+            actions: [
+              {
+                value: 'delete',
+                enabled: false,
+                title: this.$t('pageNetwork.table.deleteDhcpIpv4'),
+              },
+            ],
+          };
+        });
+    },
+    getIpv4StaticTableItems() {
+      const addresses = this.selectedInterface.IPv4StaticAddresses || [];
+      this.form.ipv4StaticTableItems = addresses.map((ipv4) => {
+        return {
+          Address: ipv4.Address,
+          SubnetMask: ipv4.SubnetMask,
+          actions: [
+            {
+              value: 'delete',
+              enabled: this.form.dhcpEnabled,
+              title: this.$t('pageNetwork.table.deleteStaticIpv4'),
+            },
+          ],
+        };
+      });
+    },
+    addIpv4StaticTableRow() {
+      this.$v.form.ipv4StaticTableItems.$touch();
+      this.form.ipv4StaticTableItems.push({
+        Address: '',
+        SubnetMask: '',
+        actions: [
+          {
+            value: 'delete',
+            enabled: this.form.dhcpEnabled,
+            title: this.$t('pageNetwork.table.deleteStaticIpv4'),
+          },
+        ],
+      });
+    },
+    deleteIpv4StaticTableRow(index) {
+      this.$v.form.ipv4StaticTableItems.$touch();
+      this.form.ipv4StaticTableItems.splice(index, 1);
+    },
+    onDeleteIpv4StaticTableRow(action, row) {
+      this.deleteIpv4StaticTableRow(row);
+    },
+    submitForm() {
+      this.$v.$touch();
+      if (this.$v.$invalid) return;
+      this.startLoader();
+      let networkInterfaceSelected = this.selectedInterface;
+      let selectedInterfaceIndex = this.selectedInterfaceIndex;
+      let interfaceId = networkInterfaceSelected.Id;
+      let isDhcpEnabled = this.form.dhcpEnabled;
+      let macAddress = this.form.macAddress;
+      let hostname = this.form.hostname;
+      let networkSettingsForm = {
+        interfaceId,
+        hostname,
+        macAddress,
+        selectedInterfaceIndex,
+      };
+      // Enabling DHCP without any available IP addresses will bring network down
+      if (this.form.ipv4DhcpTableItems.length) {
+        networkSettingsForm.isDhcpEnabled = isDhcpEnabled;
+      } else {
+        networkSettingsForm.isDhcpEnabled = false;
+        this.errorToast(this.$t('pageNetwork.toast.errorSaveDhcpSettings'));
+      }
+      networkSettingsForm.staticIpv4 = this.form.ipv4StaticTableItems.map(
+        (updateIpv4) => {
+          delete updateIpv4.actions;
+          updateIpv4.Gateway = this.form.gateway;
+          return updateIpv4;
+        }
+      );
+      networkSettingsForm.staticNameServers = this.form.dnsStaticTableItems.map(
+        (updateDns) => {
+          return updateDns.address;
+        }
+      );
+      this.$store
+        .dispatch('network/updateInterfaceSettings', networkSettingsForm)
+        .then((success) => {
+          this.successToast(success);
+        })
+        .catch(({ message }) => this.errorToast(message))
+        .finally(() => {
+          this.$v.form.$reset();
+          this.endLoader();
+        });
+    },
+  },
+};
+</script>
diff --git a/src/views/Settings/Network/index.js b/src/views/Settings/Network/index.js
new file mode 100644
index 00000000..97bf0397
--- /dev/null
+++ b/src/views/Settings/Network/index.js
@@ -0,0 +1,2 @@
+import Network from './Network.vue';
+export default Network;
diff --git a/src/views/Settings/PowerRestorePolicy/PowerRestorePolicy.vue b/src/views/Settings/PowerRestorePolicy/PowerRestorePolicy.vue
new file mode 100644
index 00000000..8589aed3
--- /dev/null
+++ b/src/views/Settings/PowerRestorePolicy/PowerRestorePolicy.vue
@@ -0,0 +1,80 @@
+<template>
+  <b-container fluid="xl">
+    <page-title :description="$t('pagePowerRestorePolicy.description')" />
+
+    <b-row>
+      <b-col sm="8" md="6" xl="12">
+        <b-form-group :label="$t('pagePowerRestorePolicy.powerPoliciesLabel')">
+          <b-form-radio
+            v-for="policy in powerRestorePolicies"
+            :key="policy.state"
+            v-model="currentPowerRestorePolicy"
+            :value="policy.state"
+            name="power-restore-policy"
+          >
+            {{ policy.desc }}
+          </b-form-radio>
+        </b-form-group>
+      </b-col>
+    </b-row>
+
+    <b-button variant="primary" type="submit" @click="submitForm">
+      {{ $t('global.action.saveSettings') }}
+    </b-button>
+  </b-container>
+</template>
+
+<script>
+import PageTitle from '@/components/Global/PageTitle';
+import LoadingBarMixin from '@/components/Mixins/LoadingBarMixin';
+import VuelidateMixin from '@/components/Mixins/VuelidateMixin.js';
+import BVToastMixin from '@/components/Mixins/BVToastMixin';
+
+export default {
+  name: 'PowerRestorePolicy',
+  components: { PageTitle },
+  mixins: [VuelidateMixin, BVToastMixin, LoadingBarMixin],
+  beforeRouteLeave(to, from, next) {
+    this.hideLoader();
+    next();
+  },
+  data() {
+    return {
+      policyValue: null,
+    };
+  },
+  computed: {
+    powerRestorePolicies() {
+      return this.$store.getters['powerPolicy/powerRestorePolicies'];
+    },
+    currentPowerRestorePolicy: {
+      get() {
+        return this.$store.getters['powerPolicy/powerRestoreCurrentPolicy'];
+      },
+      set(policy) {
+        this.policyValue = policy;
+      },
+    },
+  },
+  created() {
+    this.startLoader();
+    Promise.all([
+      this.$store.dispatch('powerPolicy/getPowerRestorePolicies'),
+      this.$store.dispatch('powerPolicy/getPowerRestoreCurrentPolicy'),
+    ]).finally(() => this.endLoader());
+  },
+  methods: {
+    submitForm() {
+      this.startLoader();
+      this.$store
+        .dispatch(
+          'powerPolicy/setPowerRestorePolicy',
+          this.policyValue || this.currentPowerRestorePolicy
+        )
+        .then((message) => this.successToast(message))
+        .catch(({ message }) => this.errorToast(message))
+        .finally(() => this.endLoader());
+    },
+  },
+};
+</script>
diff --git a/src/views/Settings/PowerRestorePolicy/index.js b/src/views/Settings/PowerRestorePolicy/index.js
new file mode 100644
index 00000000..fab0d477
--- /dev/null
+++ b/src/views/Settings/PowerRestorePolicy/index.js
@@ -0,0 +1,2 @@
+import PowerRestorePolicy from './PowerRestorePolicy.vue';
+export default PowerRestorePolicy;
diff --git a/src/views/Settings/SecuritySettings/SecuritySettings.vue b/src/views/Settings/SecuritySettings/SecuritySettings.vue
new file mode 100644
index 00000000..ec8d2589
--- /dev/null
+++ b/src/views/Settings/SecuritySettings/SecuritySettings.vue
@@ -0,0 +1,125 @@
+<template>
+  <b-container fluid="xl">
+    <page-title />
+    <b-row>
+      <b-col md="8">
+        <page-section
+          :section-title="$t('pageSecuritySettings.networkServices')"
+        >
+          <b-row class="setting-section">
+            <b-col class="d-flex align-items-center justify-content-between">
+              <dl class="mr-3 w-75">
+                <dt>{{ $t('pageSecuritySettings.ssh') }}</dt>
+                <dd>
+                  {{ $t('pageSecuritySettings.sshDescription') }}
+                </dd>
+              </dl>
+              <b-form-checkbox
+                id="sshSwitch"
+                v-model="sshProtocolState"
+                data-test-id="security-toggle-bmcShell"
+                switch
+                @change="changeSshProtocolState"
+              >
+                <span class="sr-only">
+                  {{ $t('pageSecuritySettings.ssh') }}
+                </span>
+                <span v-if="sshProtocolState">
+                  {{ $t('global.status.enabled') }}
+                </span>
+                <span v-else>{{ $t('global.status.disabled') }}</span>
+              </b-form-checkbox>
+            </b-col>
+          </b-row>
+          <b-row class="setting-section">
+            <b-col class="d-flex align-items-center justify-content-between">
+              <dl class="mt-3 mr-3 w-75">
+                <dt>{{ $t('pageSecuritySettings.ipmi') }}</dt>
+                <dd>
+                  {{ $t('pageSecuritySettings.ipmiDescription') }}
+                </dd>
+              </dl>
+              <b-form-checkbox
+                id="ipmiSwitch"
+                v-model="ipmiProtocolState"
+                data-test-id="security-toggle-networkIpmi"
+                switch
+                @change="changeIpmiProtocolState"
+              >
+                <span class="sr-only">
+                  {{ $t('pageSecuritySettings.ipmi') }}
+                </span>
+                <span v-if="ipmiProtocolState">
+                  {{ $t('global.status.enabled') }}
+                </span>
+                <span v-else>{{ $t('global.status.disabled') }}</span>
+              </b-form-checkbox>
+            </b-col>
+          </b-row>
+        </page-section>
+      </b-col>
+    </b-row>
+  </b-container>
+</template>
+
+<script>
+import PageSection from '@/components/Global/PageSection';
+import PageTitle from '@/components/Global/PageTitle';
+
+import LoadingBarMixin from '@/components/Mixins/LoadingBarMixin';
+import BVToastMixin from '@/components/Mixins/BVToastMixin';
+
+export default {
+  name: 'SecuritySettings',
+  components: { PageTitle, PageSection },
+  mixins: [LoadingBarMixin, BVToastMixin],
+  beforeRouteLeave(to, from, next) {
+    this.hideLoader();
+    next();
+  },
+  computed: {
+    sshProtocolState: {
+      get() {
+        return this.$store.getters['securitySettings/sshProtocolEnabled'];
+      },
+      set(newValue) {
+        return newValue;
+      },
+    },
+    ipmiProtocolState: {
+      get() {
+        return this.$store.getters['securitySettings/ipmiProtocolEnabled'];
+      },
+      set(newValue) {
+        return newValue;
+      },
+    },
+  },
+  created() {
+    this.startLoader();
+    this.$store
+      .dispatch('securitySettings/getNetworkProtocolStatus')
+      .finally(() => this.endLoader());
+  },
+  methods: {
+    changeIpmiProtocolState(state) {
+      this.$store
+        .dispatch('securitySettings/saveIpmiProtocolState', state)
+        .then((message) => this.successToast(message))
+        .catch(({ message }) => this.errorToast(message));
+    },
+    changeSshProtocolState(state) {
+      this.$store
+        .dispatch('securitySettings/saveSshProtocolState', state)
+        .then((message) => this.successToast(message))
+        .catch(({ message }) => this.errorToast(message));
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.setting-section {
+  border-bottom: 1px solid gray('300');
+}
+</style>
diff --git a/src/views/Settings/SecuritySettings/index.js b/src/views/Settings/SecuritySettings/index.js
new file mode 100644
index 00000000..5ec2b615
--- /dev/null
+++ b/src/views/Settings/SecuritySettings/index.js
@@ -0,0 +1,2 @@
+import SecuritySettings from './SecuritySettings.vue';
+export default SecuritySettings;
-- 
cgit v1.2.3