From 471f2e077a8e664ba96900c2464d46331808e0c2 Mon Sep 17 00:00:00 2001
From: Mateusz Gapski <mateuszx.gapski@intel.com>
Date: Mon, 27 Jul 2020 14:43:26 +0200
Subject: Disable elements on page during loading

Pages: Network settings, Date and time, LDAP, Manage power usage
More details: https://github.com/openbmc/webui-vue/issues/15

Signed-off-by: Mateusz Gapski <mateuszx.gapski@intel.com>
Change-Id: I02c5aaff180a4ce445b7135403a169a8db3704da
---
 src/components/Mixins/LoadingBarMixin.js           |   7 +
 src/views/AccessControl/Ldap/Ldap.vue              | 392 ++++++++---------
 .../DateTimeSettings/DateTimeSettings.vue          |  20 +-
 .../NetworkSettings/NetworkSettings.vue            | 484 +++++++++++----------
 .../Control/ManagePowerUsage/ManagePowerUsage.vue  | 114 ++---
 5 files changed, 519 insertions(+), 498 deletions(-)

diff --git a/src/components/Mixins/LoadingBarMixin.js b/src/components/Mixins/LoadingBarMixin.js
index 111b40dc..fffb1cab 100644
--- a/src/components/Mixins/LoadingBarMixin.js
+++ b/src/components/Mixins/LoadingBarMixin.js
@@ -1,10 +1,17 @@
 const LoadingBarMixin = {
+  data() {
+    return {
+      loading: true
+    };
+  },
   methods: {
     startLoader() {
       this.$root.$emit('loader::start');
+      this.loading = true;
     },
     endLoader() {
       this.$root.$emit('loader::end');
+      this.loading = false;
     },
     hideLoader() {
       this.$root.$emit('loader::hide');
diff --git a/src/views/AccessControl/Ldap/Ldap.vue b/src/views/AccessControl/Ldap/Ldap.vue
index 50ba8f16..8bebed9c 100644
--- a/src/views/AccessControl/Ldap/Ldap.vue
+++ b/src/views/AccessControl/Ldap/Ldap.vue
@@ -3,216 +3,218 @@
     <page-title :description="$t('pageLdap.pageDescription')" />
     <page-section :section-title="$t('pageLdap.settings')">
       <b-form novalidate @submit.prevent="handleSubmit">
-        <b-row>
-          <b-col>
-            <b-form-group
-              class="mb-3"
-              :label="$t('pageLdap.form.ldapAuthentication')"
-              label-for="enable-ldap-auth"
-            >
-              <b-form-checkbox
-                id="enable-ldap-auth"
-                v-model="form.ldapAuthenticationEnabled"
-                data-test-id="ldap-checkbox-ldapAuthenticationEnabled"
-                @change="onChangeldapAuthenticationEnabled"
+        <b-form-group :disabled="loading">
+          <b-row>
+            <b-col>
+              <b-form-group
+                class="mb-3"
+                :label="$t('pageLdap.form.ldapAuthentication')"
+                label-for="enable-ldap-auth"
               >
-                {{ $t('global.action.enable') }}
-              </b-form-checkbox>
-            </b-form-group>
-          </b-col>
-        </b-row>
-        <div class="form-background p-3">
-          <b-form-group
-            class="m-0"
-            :label="$t('pageLdap.ariaLabel.ldapSettings')"
-            label-class="sr-only"
-            :disabled="!form.ldapAuthenticationEnabled"
-          >
-            <b-row>
-              <b-col md="3" lg="4" xl="3">
-                <b-form-group
-                  class="mb-4"
-                  :label="$t('pageLdap.form.secureLdapUsingSsl')"
+                <b-form-checkbox
+                  id="enable-ldap-auth"
+                  v-model="form.ldapAuthenticationEnabled"
+                  data-test-id="ldap-checkbox-ldapAuthenticationEnabled"
+                  @change="onChangeldapAuthenticationEnabled"
                 >
-                  <b-form-text id="enable-secure-help-block">
-                    {{ $t('pageLdap.form.secureLdapHelper') }}
-                  </b-form-text>
-                  <b-form-checkbox
-                    id="enable-secure-ldap"
-                    v-model="form.secureLdapEnabled"
-                    aria-describedby="enable-secure-help-block"
-                    data-test-id="ldap-checkbox-secureLdapEnabled"
-                    :disabled="
-                      !caCertificateExpiration || !ldapCertificateExpiration
-                    "
-                    @change="$v.form.secureLdapEnabled.$touch()"
+                  {{ $t('global.action.enable') }}
+                </b-form-checkbox>
+              </b-form-group>
+            </b-col>
+          </b-row>
+          <div class="form-background p-3">
+            <b-form-group
+              class="m-0"
+              :label="$t('pageLdap.ariaLabel.ldapSettings')"
+              label-class="sr-only"
+              :disabled="!form.ldapAuthenticationEnabled"
+            >
+              <b-row>
+                <b-col md="3" lg="4" xl="3">
+                  <b-form-group
+                    class="mb-4"
+                    :label="$t('pageLdap.form.secureLdapUsingSsl')"
                   >
-                    {{ $t('global.action.enable') }}
-                  </b-form-checkbox>
-                </b-form-group>
-                <dl>
-                  <dt>{{ $t('pageLdap.form.caCertificateValidUntil') }}</dt>
-                  <dd v-if="caCertificateExpiration">
-                    {{ caCertificateExpiration | formatDate }}
-                  </dd>
-                  <dd v-else>--</dd>
-                  <dt>{{ $t('pageLdap.form.ldapCertificateValidUntil') }}</dt>
-                  <dd v-if="ldapCertificateExpiration">
-                    {{ ldapCertificateExpiration | formatDate }}
-                  </dd>
-                  <dd v-else>--</dd>
-                </dl>
-                <b-link
-                  class="d-inline-block mb-4 m-md-0"
-                  to="/access-control/ssl-certificates"
-                >
-                  {{ $t('pageLdap.form.manageSslCertificates') }}
-                </b-link>
-              </b-col>
-              <b-col md="9" lg="8" xl="9">
-                <b-row>
-                  <b-col>
-                    <b-form-group :label="$t('pageLdap.form.serviceType')">
-                      <b-form-radio
-                        v-model="form.activeDirectoryEnabled"
-                        data-test-id="ldap-radio-activeDirectoryEnabled"
-                        :value="false"
-                        @change="onChangeServiceType"
-                      >
-                        OpenLDAP
-                      </b-form-radio>
-                      <b-form-radio
-                        v-model="form.activeDirectoryEnabled"
-                        data-test-id="ldap-radio-activeDirectoryEnabled"
-                        :value="true"
-                        @change="onChangeServiceType"
+                    <b-form-text id="enable-secure-help-block">
+                      {{ $t('pageLdap.form.secureLdapHelper') }}
+                    </b-form-text>
+                    <b-form-checkbox
+                      id="enable-secure-ldap"
+                      v-model="form.secureLdapEnabled"
+                      aria-describedby="enable-secure-help-block"
+                      data-test-id="ldap-checkbox-secureLdapEnabled"
+                      :disabled="
+                        !caCertificateExpiration || !ldapCertificateExpiration
+                      "
+                      @change="$v.form.secureLdapEnabled.$touch()"
+                    >
+                      {{ $t('global.action.enable') }}
+                    </b-form-checkbox>
+                  </b-form-group>
+                  <dl>
+                    <dt>{{ $t('pageLdap.form.caCertificateValidUntil') }}</dt>
+                    <dd v-if="caCertificateExpiration">
+                      {{ caCertificateExpiration | formatDate }}
+                    </dd>
+                    <dd v-else>--</dd>
+                    <dt>{{ $t('pageLdap.form.ldapCertificateValidUntil') }}</dt>
+                    <dd v-if="ldapCertificateExpiration">
+                      {{ ldapCertificateExpiration | formatDate }}
+                    </dd>
+                    <dd v-else>--</dd>
+                  </dl>
+                  <b-link
+                    class="d-inline-block mb-4 m-md-0"
+                    to="/access-control/ssl-certificates"
+                  >
+                    {{ $t('pageLdap.form.manageSslCertificates') }}
+                  </b-link>
+                </b-col>
+                <b-col md="9" lg="8" xl="9">
+                  <b-row>
+                    <b-col>
+                      <b-form-group :label="$t('pageLdap.form.serviceType')">
+                        <b-form-radio
+                          v-model="form.activeDirectoryEnabled"
+                          data-test-id="ldap-radio-activeDirectoryEnabled"
+                          :value="false"
+                          @change="onChangeServiceType"
+                        >
+                          OpenLDAP
+                        </b-form-radio>
+                        <b-form-radio
+                          v-model="form.activeDirectoryEnabled"
+                          data-test-id="ldap-radio-activeDirectoryEnabled"
+                          :value="true"
+                          @change="onChangeServiceType"
+                        >
+                          Active Directory
+                        </b-form-radio>
+                      </b-form-group>
+                    </b-col>
+                  </b-row>
+                  <b-row>
+                    <b-col sm="6" xl="4">
+                      <b-form-group label-for="server-uri">
+                        <template v-slot:label>
+                          {{ $t('pageLdap.form.serverUri') }}
+                          <info-tooltip
+                            :title="$t('pageLdap.form.serverUriTooltip')"
+                          />
+                        </template>
+                        <b-input-group :prepend="ldapProtocol">
+                          <b-form-input
+                            id="server-uri"
+                            v-model="form.serverUri"
+                            data-test-id="ldap-input-serverUri"
+                            :state="getValidationState($v.form.serverUri)"
+                            @change="$v.form.serverUri.$touch()"
+                          />
+                          <b-form-invalid-feedback role="alert">
+                            {{ $t('global.form.fieldRequired') }}
+                          </b-form-invalid-feedback>
+                        </b-input-group>
+                      </b-form-group>
+                    </b-col>
+                    <b-col sm="6" xl="4">
+                      <b-form-group
+                        :label="$t('pageLdap.form.bindDn')"
+                        label-for="bind-dn"
                       >
-                        Active Directory
-                      </b-form-radio>
-                    </b-form-group>
-                  </b-col>
-                </b-row>
-                <b-row>
-                  <b-col sm="6" xl="4">
-                    <b-form-group label-for="server-uri">
-                      <template v-slot:label>
-                        {{ $t('pageLdap.form.serverUri') }}
-                        <info-tooltip
-                          :title="$t('pageLdap.form.serverUriTooltip')"
-                        />
-                      </template>
-                      <b-input-group :prepend="ldapProtocol">
                         <b-form-input
-                          id="server-uri"
-                          v-model="form.serverUri"
-                          data-test-id="ldap-input-serverUri"
-                          :state="getValidationState($v.form.serverUri)"
-                          @change="$v.form.serverUri.$touch()"
+                          id="bind-dn"
+                          v-model="form.bindDn"
+                          data-test-id="ldap-input-bindDn"
+                          :state="getValidationState($v.form.bindDn)"
+                          @change="$v.form.bindDn.$touch()"
                         />
                         <b-form-invalid-feedback role="alert">
                           {{ $t('global.form.fieldRequired') }}
                         </b-form-invalid-feedback>
-                      </b-input-group>
-                    </b-form-group>
-                  </b-col>
-                  <b-col sm="6" xl="4">
-                    <b-form-group
-                      :label="$t('pageLdap.form.bindDn')"
-                      label-for="bind-dn"
-                    >
-                      <b-form-input
-                        id="bind-dn"
-                        v-model="form.bindDn"
-                        data-test-id="ldap-input-bindDn"
-                        :state="getValidationState($v.form.bindDn)"
-                        @change="$v.form.bindDn.$touch()"
-                      />
-                      <b-form-invalid-feedback role="alert">
-                        {{ $t('global.form.fieldRequired') }}
-                      </b-form-invalid-feedback>
-                    </b-form-group>
-                  </b-col>
-                  <b-col sm="6" xl="4">
-                    <b-form-group
-                      :label="$t('pageLdap.form.bindPassword')"
-                      label-for="bind-password"
-                    >
-                      <input-password-toggle
-                        data-test-id="ldap-input-togglePassword"
+                      </b-form-group>
+                    </b-col>
+                    <b-col sm="6" xl="4">
+                      <b-form-group
+                        :label="$t('pageLdap.form.bindPassword')"
+                        label-for="bind-password"
+                      >
+                        <input-password-toggle
+                          data-test-id="ldap-input-togglePassword"
+                        >
+                          <b-form-input
+                            id="bind-password"
+                            v-model="form.bindPassword"
+                            type="password"
+                            :state="getValidationState($v.form.bindPassword)"
+                            @change="$v.form.bindPassword.$touch()"
+                          />
+                          <b-form-invalid-feedback role="alert">
+                            {{ $t('global.form.fieldRequired') }}
+                          </b-form-invalid-feedback>
+                        </input-password-toggle>
+                      </b-form-group>
+                    </b-col>
+                    <b-col sm="6" xl="4">
+                      <b-form-group
+                        :label="$t('pageLdap.form.baseDn')"
+                        label-for="base-dn"
                       >
                         <b-form-input
-                          id="bind-password"
-                          v-model="form.bindPassword"
-                          type="password"
-                          :state="getValidationState($v.form.bindPassword)"
-                          @change="$v.form.bindPassword.$touch()"
+                          id="base-dn"
+                          v-model="form.baseDn"
+                          data-test-id="ldap-input-baseDn"
+                          :state="getValidationState($v.form.baseDn)"
+                          @change="$v.form.baseDn.$touch()"
                         />
                         <b-form-invalid-feedback role="alert">
                           {{ $t('global.form.fieldRequired') }}
                         </b-form-invalid-feedback>
-                      </input-password-toggle>
-                    </b-form-group>
-                  </b-col>
-                  <b-col sm="6" xl="4">
-                    <b-form-group
-                      :label="$t('pageLdap.form.baseDn')"
-                      label-for="base-dn"
-                    >
-                      <b-form-input
-                        id="base-dn"
-                        v-model="form.baseDn"
-                        data-test-id="ldap-input-baseDn"
-                        :state="getValidationState($v.form.baseDn)"
-                        @change="$v.form.baseDn.$touch()"
-                      />
-                      <b-form-invalid-feedback role="alert">
-                        {{ $t('global.form.fieldRequired') }}
-                      </b-form-invalid-feedback>
-                    </b-form-group>
-                  </b-col>
-                  <b-col sm="6" xl="4">
-                    <b-form-group
-                      :label="$t('pageLdap.form.userIdAttribute')"
-                      label-for="user-id-attribute"
-                    >
-                      <b-form-input
-                        id="user-id-attribute"
-                        v-model="form.userIdAttribute"
-                        data-test-id="ldap-input-userIdAttribute"
-                        @change="$v.form.userIdAttribute.$touch()"
-                      />
-                    </b-form-group>
-                  </b-col>
-                  <b-col sm="6" xl="4">
-                    <b-form-group
-                      :label="$t('pageLdap.form.groupIdAttribute')"
-                      label-for="group-id-attribute"
-                    >
-                      <b-form-input
-                        id="group-id-attribute"
-                        v-model="form.groupIdAttribute"
-                        data-test-id="ldap-input-groupIdAttribute"
-                        @change="$v.form.groupIdAttribute.$touch()"
-                      />
-                    </b-form-group>
-                  </b-col>
-                </b-row>
-              </b-col>
-            </b-row>
-          </b-form-group>
-        </div>
-        <b-row class="mt-4 mb-5">
-          <b-col>
-            <b-btn
-              variant="primary"
-              type="submit"
-              data-test-id="ldap-button-saveSettings"
-              :disabled="!$v.form.$anyDirty"
-            >
-              {{ $t('global.action.saveSettings') }}
-            </b-btn>
-          </b-col>
-        </b-row>
+                      </b-form-group>
+                    </b-col>
+                    <b-col sm="6" xl="4">
+                      <b-form-group
+                        :label="$t('pageLdap.form.userIdAttribute')"
+                        label-for="user-id-attribute"
+                      >
+                        <b-form-input
+                          id="user-id-attribute"
+                          v-model="form.userIdAttribute"
+                          data-test-id="ldap-input-userIdAttribute"
+                          @change="$v.form.userIdAttribute.$touch()"
+                        />
+                      </b-form-group>
+                    </b-col>
+                    <b-col sm="6" xl="4">
+                      <b-form-group
+                        :label="$t('pageLdap.form.groupIdAttribute')"
+                        label-for="group-id-attribute"
+                      >
+                        <b-form-input
+                          id="group-id-attribute"
+                          v-model="form.groupIdAttribute"
+                          data-test-id="ldap-input-groupIdAttribute"
+                          @change="$v.form.groupIdAttribute.$touch()"
+                        />
+                      </b-form-group>
+                    </b-col>
+                  </b-row>
+                </b-col>
+              </b-row>
+            </b-form-group>
+          </div>
+          <b-row class="mt-4 mb-5">
+            <b-col>
+              <b-btn
+                variant="primary"
+                type="submit"
+                data-test-id="ldap-button-saveSettings"
+                :disabled="!$v.form.$anyDirty"
+              >
+                {{ $t('global.action.saveSettings') }}
+              </b-btn>
+            </b-col>
+          </b-row>
+        </b-form-group>
       </b-form>
     </page-section>
 
diff --git a/src/views/Configuration/DateTimeSettings/DateTimeSettings.vue b/src/views/Configuration/DateTimeSettings/DateTimeSettings.vue
index 74879f32..008fefff 100644
--- a/src/views/Configuration/DateTimeSettings/DateTimeSettings.vue
+++ b/src/views/Configuration/DateTimeSettings/DateTimeSettings.vue
@@ -33,7 +33,11 @@
     </page-section>
     <page-section :section-title="$t('pageDateTimeSettings.configureSettings')">
       <b-form novalidate @submit.prevent="submitForm">
-        <b-form-group label="Configure date and time" label-sr-only>
+        <b-form-group
+          label="Configure date and time"
+          :disabled="loading"
+          label-sr-only
+        >
           <b-form-radio
             v-model="form.configurationSelected"
             value="manual"
@@ -181,14 +185,14 @@
               </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-button
-          variant="primary"
-          type="submit"
-          data-test-id="dateTimeSettings-button-saveSettings"
-        >
-          {{ $t('global.action.saveSettings') }}
-        </b-button>
       </b-form>
     </page-section>
   </b-container>
diff --git a/src/views/Configuration/NetworkSettings/NetworkSettings.vue b/src/views/Configuration/NetworkSettings/NetworkSettings.vue
index fd245a31..e8c6ae81 100644
--- a/src/views/Configuration/NetworkSettings/NetworkSettings.vue
+++ b/src/views/Configuration/NetworkSettings/NetworkSettings.vue
@@ -11,6 +11,7 @@
             <b-form-select
               id="interface-select"
               v-model="selectedInterfaceIndex"
+              :disabled="loading"
               data-test-id="networkSettings-select-interface"
               :options="interfaceSelectOptions"
               @change="selectInterface"
@@ -21,269 +22,274 @@
       </b-row>
     </page-section>
     <b-form novalidate @submit.prevent="submitForm">
-      <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"
-                :readonly="dhcpEnabled"
-                :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.validateAddress">
-                  {{ $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.validateMacAddress">
-                  {{ $t('global.form.invalidFormat') }}
-                </div>
-              </b-form-invalid-feedback>
-            </b-form-group>
-          </b-col>
-        </b-row>
-      </page-section>
-      <page-section :section-title="$t('pageNetworkSettings.staticIpv4')">
-        <b-row>
-          <b-col lg="9" class="mb-3">
-            <b-table
-              responsive="md"
-              :fields="ipv4StaticTableFields"
-              :items="form.ipv4StaticTableItems"
-              class="mb-0"
-            >
-              <template v-slot:cell(Address)="{ item, index }">
+      <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
-                  v-model.trim="item.Address"
-                  :data-test-id="`networkSettings-input-staticIpv4-${index}`"
-                  :aria-label="
-                    $t('pageNetworkSettings.ariaLabel.staticIpv4AddressRow') +
-                      ' ' +
-                      (index + 1)
-                  "
+                  id="default-gateway"
+                  v-model.trim="form.gateway"
+                  data-test-id="networkSettings-input-gateway"
+                  type="text"
                   :readonly="dhcpEnabled"
-                  :state="
-                    getValidationState(
-                      $v.form.ipv4StaticTableItems.$each.$iter[index].Address
-                    )
-                  "
-                  @change="
-                    $v.form.ipv4StaticTableItems.$each.$iter[
-                      index
-                    ].Address.$touch()
-                  "
+                  :state="getValidationState($v.form.gateway)"
+                  @change="$v.form.gateway.$touch()"
                 />
                 <b-form-invalid-feedback role="alert">
-                  <div
-                    v-if="
-                      !$v.form.ipv4StaticTableItems.$each.$iter[index].Address
-                        .required
-                    "
-                  >
+                  <div v-if="!$v.form.gateway.required">
                     {{ $t('global.form.fieldRequired') }}
                   </div>
-                  <div
-                    v-if="
-                      !$v.form.ipv4StaticTableItems.$each.$iter[index].Address
-                        .validateAddress
-                    "
-                  >
+                  <div v-if="!$v.form.gateway.validateAddress">
                     {{ $t('global.form.invalidFormat') }}
                   </div>
                 </b-form-invalid-feedback>
-              </template>
-              <template v-slot:cell(SubnetMask)="{ item, index }">
+              </b-form-group>
+            </b-col>
+            <b-col lg="3">
+              <b-form-group
+                :label="$t('pageNetworkSettings.form.hostname')"
+                label-for="hostname-field"
+              >
                 <b-form-input
-                  v-model.trim="item.SubnetMask"
-                  :data-test-id="`networkSettings-input-subnetMask-${index}`"
-                  :aria-label="
-                    $t('pageNetworkSettings.ariaLabel.staticIpv4SubnetRow') +
-                      ' ' +
-                      (index + 1)
-                  "
-                  :readonly="dhcpEnabled"
-                  :state="
-                    getValidationState(
-                      $v.form.ipv4StaticTableItems.$each.$iter[index].SubnetMask
-                    )
-                  "
-                  @change="
-                    $v.form.ipv4StaticTableItems.$each.$iter[
-                      index
-                    ].SubnetMask.$touch()
-                  "
+                  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.ipv4StaticTableItems.$each.$iter[index]
-                        .SubnetMask.required
-                    "
-                  >
+                  <div v-if="!$v.form.hostname.required">
                     {{ $t('global.form.fieldRequired') }}
                   </div>
-                  <div
-                    v-if="
-                      !$v.form.ipv4StaticTableItems.$each.$iter[index]
-                        .SubnetMask.validateAddress
-                    "
-                  >
-                    {{ $t('global.form.invalidFormat') }}
+                  <div v-if="!$v.form.hostname.validateHostname">
+                    {{
+                      $t('global.form.lengthMustBeBetween', { min: 1, max: 64 })
+                    }}
                   </div>
                 </b-form-invalid-feedback>
-              </template>
-              <template v-slot:cell(actions)="{ item, index }">
-                <table-row-action
-                  v-for="(action, actionIndex) in item.actions"
-                  :key="actionIndex"
-                  :value="action.value"
-                  :title="action.title"
-                  @click:tableAction="onDeleteIpv4StaticTableRow($event, index)"
-                >
-                  <template v-slot: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
-              :fields="dnsTableFields"
-              :items="form.dnsStaticTableItems"
-              class="mb-0"
-            >
-              <template v-slot:cell(address)="{ item, index }">
+              </b-form-group>
+            </b-col>
+            <b-col lg="3">
+              <b-form-group
+                :label="$t('pageNetworkSettings.form.macAddress')"
+                label-for="mac-address"
+              >
                 <b-form-input
-                  v-model.trim="item.address"
-                  :data-test-id="`networkSettings-input-dnsAddress-${index}`"
-                  :aria-label="
-                    $t('pageNetworkSettings.ariaLabel.staticDnsRow') +
-                      ' ' +
-                      (index + 1)
-                  "
-                  :readonly="dhcpEnabled"
-                  :state="
-                    getValidationState(
-                      $v.form.dnsStaticTableItems.$each.$iter[index].address
-                    )
-                  "
-                  @change="
-                    $v.form.dnsStaticTableItems.$each.$iter[
-                      index
-                    ].address.$touch()
-                  "
+                  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.dnsStaticTableItems.$each.$iter[index].address
-                        .required
-                    "
-                  >
+                  <div v-if="!$v.form.macAddress.required">
                     {{ $t('global.form.fieldRequired') }}
                   </div>
-                  <div
-                    v-if="
-                      !$v.form.dnsStaticTableItems.$each.$iter[index].address
-                        .validateAddress
-                    "
-                  >
+                  <div v-if="!$v.form.macAddress.validateMacAddress">
                     {{ $t('global.form.invalidFormat') }}
                   </div>
                 </b-form-invalid-feedback>
-              </template>
-              <template v-slot:cell(actions)="{ item, index }">
-                <table-row-action
-                  v-for="(action, actionIndex) in item.actions"
-                  :key="actionIndex"
-                  :value="action.value"
-                  :title="action.title"
-                  @click:tableAction="onDeleteDnsTableRow($event, index)"
-                >
-                  <template v-slot: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"
-        :disabled="!$v.form.$anyDirty || $v.form.$invalid"
-      >
-        {{ $t('global.action.saveSettings') }}
-      </b-button>
+              </b-form-group>
+            </b-col>
+          </b-row>
+        </page-section>
+        <page-section :section-title="$t('pageNetworkSettings.staticIpv4')">
+          <b-row>
+            <b-col lg="9" class="mb-3">
+              <b-table
+                responsive="md"
+                :fields="ipv4StaticTableFields"
+                :items="form.ipv4StaticTableItems"
+                class="mb-0"
+              >
+                <template v-slot:cell(Address)="{ item, index }">
+                  <b-form-input
+                    v-model.trim="item.Address"
+                    :data-test-id="`networkSettings-input-staticIpv4-${index}`"
+                    :aria-label="
+                      $t('pageNetworkSettings.ariaLabel.staticIpv4AddressRow') +
+                        ' ' +
+                        (index + 1)
+                    "
+                    :readonly="dhcpEnabled"
+                    :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
+                          .validateAddress
+                      "
+                    >
+                      {{ $t('global.form.invalidFormat') }}
+                    </div>
+                  </b-form-invalid-feedback>
+                </template>
+                <template v-slot:cell(SubnetMask)="{ item, index }">
+                  <b-form-input
+                    v-model.trim="item.SubnetMask"
+                    :data-test-id="`networkSettings-input-subnetMask-${index}`"
+                    :aria-label="
+                      $t('pageNetworkSettings.ariaLabel.staticIpv4SubnetRow') +
+                        ' ' +
+                        (index + 1)
+                    "
+                    :readonly="dhcpEnabled"
+                    :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.validateAddress
+                      "
+                    >
+                      {{ $t('global.form.invalidFormat') }}
+                    </div>
+                  </b-form-invalid-feedback>
+                </template>
+                <template v-slot:cell(actions)="{ item, index }">
+                  <table-row-action
+                    v-for="(action, actionIndex) in item.actions"
+                    :key="actionIndex"
+                    :value="action.value"
+                    :title="action.title"
+                    @click:tableAction="
+                      onDeleteIpv4StaticTableRow($event, index)
+                    "
+                  >
+                    <template v-slot: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
+                :fields="dnsTableFields"
+                :items="form.dnsStaticTableItems"
+                class="mb-0"
+              >
+                <template v-slot:cell(address)="{ item, index }">
+                  <b-form-input
+                    v-model.trim="item.address"
+                    :data-test-id="`networkSettings-input-dnsAddress-${index}`"
+                    :aria-label="
+                      $t('pageNetworkSettings.ariaLabel.staticDnsRow') +
+                        ' ' +
+                        (index + 1)
+                    "
+                    :readonly="dhcpEnabled"
+                    :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
+                          .validateAddress
+                      "
+                    >
+                      {{ $t('global.form.invalidFormat') }}
+                    </div>
+                  </b-form-invalid-feedback>
+                </template>
+                <template v-slot:cell(actions)="{ item, index }">
+                  <table-row-action
+                    v-for="(action, actionIndex) in item.actions"
+                    :key="actionIndex"
+                    :value="action.value"
+                    :title="action.title"
+                    @click:tableAction="onDeleteDnsTableRow($event, index)"
+                  >
+                    <template v-slot: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"
+          :disabled="!$v.form.$anyDirty || $v.form.$invalid"
+        >
+          {{ $t('global.action.saveSettings') }}
+        </b-button>
+      </b-form-group>
     </b-form>
   </b-container>
 </template>
diff --git a/src/views/Control/ManagePowerUsage/ManagePowerUsage.vue b/src/views/Control/ManagePowerUsage/ManagePowerUsage.vue
index bbe32404..5a7eed08 100644
--- a/src/views/Control/ManagePowerUsage/ManagePowerUsage.vue
+++ b/src/views/Control/ManagePowerUsage/ManagePowerUsage.vue
@@ -18,67 +18,69 @@
     </b-row>
 
     <b-form @submit.prevent="submitForm">
-      <b-row>
-        <b-col sm="8" md="6" xl="12">
-          <b-form-group
-            :label="$t('pageManagePowerUsage.powerCapSettingLabel')"
-          >
-            <b-form-checkbox
-              v-model="isPowerCapFieldEnabled"
-              data-test-id="managePowerUsage-checkbox-togglePowerCapField"
-              name="power-cap-setting"
+      <b-form-group :disabled="loading">
+        <b-row>
+          <b-col sm="8" md="6" xl="12">
+            <b-form-group
+              :label="$t('pageManagePowerUsage.powerCapSettingLabel')"
             >
-              {{ $t('pageManagePowerUsage.powerCapSettingData') }}
-            </b-form-checkbox>
-          </b-form-group>
-        </b-col>
-      </b-row>
+              <b-form-checkbox
+                v-model="isPowerCapFieldEnabled"
+                data-test-id="managePowerUsage-checkbox-togglePowerCapField"
+                name="power-cap-setting"
+              >
+                {{ $t('pageManagePowerUsage.powerCapSettingData') }}
+              </b-form-checkbox>
+            </b-form-group>
+          </b-col>
+        </b-row>
 
-      <b-row>
-        <b-col sm="8" md="6" xl="3">
-          <b-form-group
-            id="input-group-1"
-            :label="$t('pageManagePowerUsage.powerCapLabel')"
-            label-for="input-1"
-          >
-            <b-form-text id="power-help-text">
-              {{
-                $t('pageManagePowerUsage.powerCapLabelTextInfo', {
-                  min: 1,
-                  max: 10000
-                })
-              }}
-            </b-form-text>
+        <b-row>
+          <b-col sm="8" md="6" xl="3">
+            <b-form-group
+              id="input-group-1"
+              :label="$t('pageManagePowerUsage.powerCapLabel')"
+              label-for="input-1"
+            >
+              <b-form-text id="power-help-text">
+                {{
+                  $t('pageManagePowerUsage.powerCapLabelTextInfo', {
+                    min: 1,
+                    max: 10000
+                  })
+                }}
+              </b-form-text>
 
-            <b-form-input
-              id="input-1"
-              v-model.number="powerCapValue"
-              :disabled="!isPowerCapFieldEnabled"
-              data-test-id="managePowerUsage-input-powerCapValue"
-              type="number"
-              aria-describedby="power-help-text"
-              :state="getValidationState($v.powerCapValue)"
-            ></b-form-input>
+              <b-form-input
+                id="input-1"
+                v-model.number="powerCapValue"
+                :disabled="!isPowerCapFieldEnabled"
+                data-test-id="managePowerUsage-input-powerCapValue"
+                type="number"
+                aria-describedby="power-help-text"
+                :state="getValidationState($v.powerCapValue)"
+              ></b-form-input>
 
-            <b-form-invalid-feedback id="input-live-feedback" role="alert">
-              <template v-if="!$v.powerCapValue.required">
-                {{ $t('global.form.fieldRequired') }}
-              </template>
-              <template v-else-if="!$v.powerCapValue.between">
-                {{ $t('global.form.invalidValue') }}
-              </template>
-            </b-form-invalid-feedback>
-          </b-form-group>
-        </b-col>
-      </b-row>
+              <b-form-invalid-feedback id="input-live-feedback" role="alert">
+                <template v-if="!$v.powerCapValue.required">
+                  {{ $t('global.form.fieldRequired') }}
+                </template>
+                <template v-else-if="!$v.powerCapValue.between">
+                  {{ $t('global.form.invalidValue') }}
+                </template>
+              </b-form-invalid-feedback>
+            </b-form-group>
+          </b-col>
+        </b-row>
 
-      <b-button
-        variant="primary"
-        type="submit"
-        data-test-id="managePowerUsage-button-savePowerCapValue"
-      >
-        {{ $t('global.action.save') }}
-      </b-button>
+        <b-button
+          variant="primary"
+          type="submit"
+          data-test-id="managePowerUsage-button-savePowerCapValue"
+        >
+          {{ $t('global.action.save') }}
+        </b-button>
+      </b-form-group>
     </b-form>
   </b-container>
 </template>
-- 
cgit v1.2.3