diff options
author | Mateusz Gapski <mateuszx.gapski@intel.com> | 2020-07-27 15:43:26 +0300 |
---|---|---|
committer | Yoshie Muranaka <yoshiemuranaka@gmail.com> | 2020-07-29 23:47:27 +0300 |
commit | 471f2e077a8e664ba96900c2464d46331808e0c2 (patch) | |
tree | 62eca46a3ab6062528bbc5a54edcf82ec2b7d936 /src/views/Configuration | |
parent | 6b0e3a71cb691d24e5153cd4d4ec10e174ae4398 (diff) | |
download | webui-vue-471f2e077a8e664ba96900c2464d46331808e0c2.tar.xz |
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
Diffstat (limited to 'src/views/Configuration')
-rw-r--r-- | src/views/Configuration/DateTimeSettings/DateTimeSettings.vue | 20 | ||||
-rw-r--r-- | src/views/Configuration/NetworkSettings/NetworkSettings.vue | 484 |
2 files changed, 257 insertions, 247 deletions
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> |