diff options
| -rw-r--r-- | src/components/Mixins/LoadingBarMixin.js | 7 | ||||
| -rw-r--r-- | src/views/AccessControl/Ldap/Ldap.vue | 392 | ||||
| -rw-r--r-- | src/views/Configuration/DateTimeSettings/DateTimeSettings.vue | 20 | ||||
| -rw-r--r-- | src/views/Configuration/NetworkSettings/NetworkSettings.vue | 484 | ||||
| -rw-r--r-- | src/views/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> |