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
diff --git a/src/components/Mixins/LoadingBarMixin.js b/src/components/Mixins/LoadingBarMixin.js
index 111b40d..fffb1ca 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 50ba8f1..8bebed9 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>
- <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"
- >
- <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-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="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.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"
>
- {{ $t('global.action.saveSettings') }}
- </b-btn>
- </b-col>
- </b-row>
+ <b-row>
+ <b-col md="3" lg="4" xl="3">
+ <b-form-group
+ class="mb-4"
+ :label="$t('pageLdap.form.secureLdapUsingSsl')"
+ >
+ <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"
+ >
+ <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-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="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-form>
</page-section>
diff --git a/src/views/Configuration/DateTimeSettings/DateTimeSettings.vue b/src/views/Configuration/DateTimeSettings/DateTimeSettings.vue
index 74879f3..008feff 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 fd245a3..e8c6ae8 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
- "
- >
+ <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>
- </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
+ </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)
"
>
- {{ $t('global.form.fieldRequired') }}
- </div>
- <div
- v-if="
- !$v.form.dnsStaticTableItems.$each.$iter[index].address
- .validateAddress
+ <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)"
>
- {{ $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>
+ <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 bbe3240..5a7eed0 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>