diff options
Diffstat (limited to 'src/views/_sila/Settings')
-rw-r--r-- | src/views/_sila/Settings/DateTime/DateTime.vue | 417 | ||||
-rw-r--r-- | src/views/_sila/Settings/DateTime/index.js | 2 | ||||
-rw-r--r-- | src/views/_sila/Settings/Network/ModalDns.vue | 92 | ||||
-rw-r--r-- | src/views/_sila/Settings/Network/ModalHostname.vue | 110 | ||||
-rw-r--r-- | src/views/_sila/Settings/Network/ModalIpv4.vue | 165 | ||||
-rw-r--r-- | src/views/_sila/Settings/Network/ModalMacAddress.vue | 109 | ||||
-rw-r--r-- | src/views/_sila/Settings/Network/Network.vue | 167 | ||||
-rw-r--r-- | src/views/_sila/Settings/Network/NetworkGlobalSettings.vue | 161 | ||||
-rw-r--r-- | src/views/_sila/Settings/Network/NetworkInterfaceSettings.vue | 117 | ||||
-rw-r--r-- | src/views/_sila/Settings/Network/TableDns.vue | 145 | ||||
-rw-r--r-- | src/views/_sila/Settings/Network/TableIpv4.vue | 169 | ||||
-rw-r--r-- | src/views/_sila/Settings/Network/index.js | 2 | ||||
-rw-r--r-- | src/views/_sila/Settings/PowerRestorePolicy/PowerRestorePolicy.vue | 8 |
13 files changed, 4 insertions, 1660 deletions
diff --git a/src/views/_sila/Settings/DateTime/DateTime.vue b/src/views/_sila/Settings/DateTime/DateTime.vue deleted file mode 100644 index f5e063d1..00000000 --- a/src/views/_sila/Settings/DateTime/DateTime.vue +++ /dev/null @@ -1,417 +0,0 @@ -<template> - <b-container fluid="xl"> - <page-title /> - <b-row> - <b-col md="8" xl="6"> - <alert variant="info" class="mb-4"> - <span> - {{ $t('pageDateTime.alert.message') }} - <b-link to="/profile-settings"> - {{ $t('pageDateTime.alert.link') }}</b-link - > - </span> - </alert> - </b-col> - </b-row> - <page-section> - <b-row> - <b-col lg="3"> - <dl> - <dt>{{ $t('pageDateTime.form.date') }}</dt> - <dd v-if="bmcTime">{{ bmcTime | formatDate }}</dd> - <dd v-else>--</dd> - </dl> - </b-col> - <b-col lg="3"> - <dl> - <dt>{{ $t('pageDateTime.form.time.label') }}</dt> - <dd v-if="bmcTime">{{ bmcTime | formatTime }}</dd> - <dd v-else>--</dd> - </dl> - </b-col> - </b-row> - </page-section> - <page-section :section-title="$t('pageDateTime.configureSettings')"> - <b-form novalidate @submit.prevent="submitForm"> - <b-form-group - label="Configure date and time" - :disabled="loading" - label-sr-only - > - <b-form-radio - v-model="form.configurationSelected" - value="manual" - data-test-id="dateTime-radio-configureManual" - > - {{ $t('pageDateTime.form.manual') }} - </b-form-radio> - <b-row class="mt-3 ml-3"> - <b-col sm="6" lg="4" xl="3"> - <b-form-group - :label="$t('pageDateTime.form.date')" - label-for="input-manual-date" - > - <b-form-text id="date-format-help">YYYY-MM-DD</b-form-text> - <b-input-group> - <b-form-input - id="input-manual-date" - v-model="form.manual.date" - :state="getValidationState($v.form.manual.date)" - :disabled="ntpOptionSelected" - data-test-id="dateTime-input-manualDate" - class="form-control-with-button" - @blur="$v.form.manual.date.$touch()" - /> - <b-form-invalid-feedback role="alert"> - <div v-if="!$v.form.manual.date.pattern"> - {{ $t('global.form.invalidFormat') }} - </div> - <div v-if="!$v.form.manual.date.required"> - {{ $t('global.form.fieldRequired') }} - </div> - </b-form-invalid-feedback> - <b-form-datepicker - v-model="form.manual.date" - class="btn-datepicker btn-icon-only" - button-only - right - :hide-header="true" - :locale="locale" - :label-help=" - $t('global.calendar.useCursorKeysToNavigateCalendarDates') - " - :title="$t('global.calendar.selectDate')" - :disabled="ntpOptionSelected" - button-variant="link" - aria-controls="input-manual-date" - > - <template #button-content> - <icon-calendar /> - <span class="sr-only"> - {{ $t('global.calendar.selectDate') }} - </span> - </template> - </b-form-datepicker> - </b-input-group> - </b-form-group> - </b-col> - <b-col sm="6" lg="4" xl="3"> - <b-form-group - :label="$t('pageDateTime.form.time.timezone', { timezone })" - label-for="input-manual-time" - > - <b-form-text id="time-format-help">HH:MM</b-form-text> - <b-input-group> - <b-form-input - id="input-manual-time" - v-model="form.manual.time" - :state="getValidationState($v.form.manual.time)" - :disabled="ntpOptionSelected" - data-test-id="dateTime-input-manualTime" - @blur="$v.form.manual.time.$touch()" - /> - <b-form-invalid-feedback role="alert"> - <div v-if="!$v.form.manual.time.pattern"> - {{ $t('global.form.invalidFormat') }} - </div> - <div v-if="!$v.form.manual.time.required"> - {{ $t('global.form.fieldRequired') }} - </div> - </b-form-invalid-feedback> - </b-input-group> - </b-form-group> - </b-col> - </b-row> - <b-form-radio - v-model="form.configurationSelected" - value="ntp" - data-test-id="dateTime-radio-configureNTP" - > - NTP - </b-form-radio> - <b-row class="mt-3 ml-3"> - <b-col sm="6" lg="4" xl="3"> - <b-form-group - :label="$t('pageDateTime.form.ntpServers.server1')" - label-for="input-ntp-1" - > - <b-input-group> - <b-form-input - id="input-ntp-1" - v-model="form.ntp.firstAddress" - :state="getValidationState($v.form.ntp.firstAddress)" - :disabled="manualOptionSelected" - data-test-id="dateTime-input-ntpServer1" - @blur="$v.form.ntp.firstAddress.$touch()" - /> - <b-form-invalid-feedback role="alert"> - <div v-if="!$v.form.ntp.firstAddress.required"> - {{ $t('global.form.fieldRequired') }} - </div> - </b-form-invalid-feedback> - </b-input-group> - </b-form-group> - </b-col> - <b-col sm="6" lg="4" xl="3"> - <b-form-group - :label="$t('pageDateTime.form.ntpServers.server2')" - label-for="input-ntp-2" - > - <b-input-group> - <b-form-input - id="input-ntp-2" - v-model="form.ntp.secondAddress" - :disabled="manualOptionSelected" - data-test-id="dateTime-input-ntpServer2" - /> - </b-input-group> - </b-form-group> - </b-col> - <b-col sm="6" lg="4" xl="3"> - <b-form-group - :label="$t('pageDateTime.form.ntpServers.server3')" - label-for="input-ntp-3" - > - <b-input-group> - <b-form-input - id="input-ntp-3" - v-model="form.ntp.thirdAddress" - :disabled="manualOptionSelected" - data-test-id="dateTime-input-ntpServer3" - /> - </b-input-group> - </b-form-group> - </b-col> - </b-row> - <b-button - variant="primary" - type="submit" - data-test-id="dateTime-button-saveSettings" - > - {{ $t('global.action.saveSettings') }} - </b-button> - </b-form-group> - </b-form> - </page-section> - </b-container> -</template> - -<script> -import Alert from '@/components/Global/Alert'; -import IconCalendar from '@carbon/icons-vue/es/calendar/20'; -import PageTitle from '@/components/Global/PageTitle'; -import PageSection from '@/components/Global/PageSection'; - -import BVToastMixin from '@/components/Mixins/BVToastMixin'; -import LoadingBarMixin, { loading } from '@/components/Mixins/LoadingBarMixin'; -import LocalTimezoneLabelMixin from '@/components/Mixins/LocalTimezoneLabelMixin'; -import VuelidateMixin from '@/components/Mixins/VuelidateMixin.js'; - -import { mapState } from 'vuex'; -import { requiredIf, helpers } from 'vuelidate/lib/validators'; - -const isoDateRegex = /([12]\d{3}-(0[1-9]|1[0-2])-(0[1-9]|[12]\d|3[01]))/; -const isoTimeRegex = /^(0[0-9]|1[0-9]|2[0-3]):[0-5][0-9]$/; - -export default { - name: 'DateTime', - components: { Alert, IconCalendar, PageTitle, PageSection }, - mixins: [ - BVToastMixin, - LoadingBarMixin, - LocalTimezoneLabelMixin, - VuelidateMixin, - ], - beforeRouteLeave(to, from, next) { - this.hideLoader(); - next(); - }, - data() { - return { - locale: this.$store.getters['global/languagePreference'], - form: { - configurationSelected: 'manual', - manual: { - date: '', - time: '', - }, - ntp: { firstAddress: '', secondAddress: '', thirdAddress: '' }, - }, - loading, - }; - }, - validations() { - return { - form: { - manual: { - date: { - required: requiredIf(function () { - return this.form.configurationSelected === 'manual'; - }), - pattern: helpers.regex('pattern', isoDateRegex), - }, - time: { - required: requiredIf(function () { - return this.form.configurationSelected === 'manual'; - }), - pattern: helpers.regex('pattern', isoTimeRegex), - }, - }, - ntp: { - firstAddress: { - required: requiredIf(function () { - return this.form.configurationSelected === 'ntp'; - }), - }, - }, - }, - }; - }, - computed: { - ...mapState('dateTime', ['ntpServers', 'isNtpProtocolEnabled']), - bmcTime() { - return this.$store.getters['global/bmcTime']; - }, - ntpOptionSelected() { - return this.form.configurationSelected === 'ntp'; - }, - manualOptionSelected() { - return this.form.configurationSelected === 'manual'; - }, - isUtcDisplay() { - return this.$store.getters['global/isUtcDisplay']; - }, - timezone() { - if (this.isUtcDisplay) { - return 'UTC'; - } - return this.localOffset(); - }, - }, - watch: { - ntpServers() { - this.setNtpValues(); - }, - manualDate() { - this.emitChange(); - }, - bmcTime() { - this.form.manual.date = this.$options.filters.formatDate( - this.$store.getters['global/bmcTime'] - ); - this.form.manual.time = this.$options.filters - .formatTime(this.$store.getters['global/bmcTime']) - .slice(0, 5); - }, - }, - created() { - this.startLoader(); - this.setNtpValues(); - Promise.all([ - this.$store.dispatch('global/getBmcTime'), - this.$store.dispatch('dateTime/getNtpData'), - ]).finally(() => this.endLoader()); - }, - methods: { - emitChange() { - if (this.$v.$invalid) return; - this.$v.$reset(); //reset to re-validate on blur - this.$emit('change', { - manualDate: this.manualDate ? new Date(this.manualDate) : null, - }); - }, - setNtpValues() { - this.form.configurationSelected = this.isNtpProtocolEnabled - ? 'ntp' - : 'manual'; - [ - this.form.ntp.firstAddress = '', - this.form.ntp.secondAddress = '', - this.form.ntp.thirdAddress = '', - ] = [this.ntpServers[0], this.ntpServers[1], this.ntpServers[2]]; - }, - submitForm() { - this.$v.$touch(); - if (this.$v.$invalid) return; - this.startLoader(); - - let dateTimeForm = {}; - let isNTPEnabled = this.form.configurationSelected === 'ntp'; - - if (!isNTPEnabled) { - const isUtcDisplay = this.$store.getters['global/isUtcDisplay']; - let date; - - dateTimeForm.ntpProtocolEnabled = false; - - if (isUtcDisplay) { - // Create UTC Date - date = this.getUtcDate(this.form.manual.date, this.form.manual.time); - } else { - // Create local Date - date = new Date(`${this.form.manual.date} ${this.form.manual.time}`); - } - - dateTimeForm.updatedDateTime = date.toISOString(); - } else { - dateTimeForm.ntpProtocolEnabled = true; - - const ntpArray = [ - this.form.ntp.firstAddress, - this.form.ntp.secondAddress, - this.form.ntp.thirdAddress, - ]; - - // Filter the ntpArray to remove empty strings, - // per Redfish spec there should be no empty strings or null on the ntp array. - const ntpArrayFiltered = ntpArray.filter((x) => x); - - dateTimeForm.ntpServersArray = [...ntpArrayFiltered]; - - [this.ntpServers[0], this.ntpServers[1], this.ntpServers[2]] = [ - ...dateTimeForm.ntpServersArray, - ]; - - this.setNtpValues(); - } - - this.$store - .dispatch('dateTime/updateDateTime', dateTimeForm) - .then((success) => { - this.successToast(success); - if (!isNTPEnabled) return; - // Shift address up if second address is empty - // to avoid refreshing after delay when updating NTP - if (!this.form.ntp.secondAddress && this.form.ntp.thirdAddres) { - this.form.ntp.secondAddress = this.form.ntp.thirdAddres; - this.form.ntp.thirdAddress = ''; - } - }) - .then(() => { - this.$store.dispatch('global/getBmcTime'); - }) - .catch(({ message }) => this.errorToast(message)) - .finally(() => { - this.$v.form.$reset(); - this.endLoader(); - }); - }, - getUtcDate(date, time) { - // Split user input string values to create - // a UTC Date object - const datesArray = date.split('-'); - const timeArray = time.split(':'); - let utcDate = Date.UTC( - datesArray[0], // User input year - //UTC expects zero-index month value 0-11 (January-December) - //for reference https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/UTC#Parameters - parseInt(datesArray[1]) - 1, // User input month - datesArray[2], // User input day - timeArray[0], // User input hour - timeArray[1] // User input minute - ); - return new Date(utcDate); - }, - }, -}; -</script> diff --git a/src/views/_sila/Settings/DateTime/index.js b/src/views/_sila/Settings/DateTime/index.js deleted file mode 100644 index 2df21eae..00000000 --- a/src/views/_sila/Settings/DateTime/index.js +++ /dev/null @@ -1,2 +0,0 @@ -import DateTime from './DateTime.vue'; -export default DateTime; diff --git a/src/views/_sila/Settings/Network/ModalDns.vue b/src/views/_sila/Settings/Network/ModalDns.vue deleted file mode 100644 index 7f127173..00000000 --- a/src/views/_sila/Settings/Network/ModalDns.vue +++ /dev/null @@ -1,92 +0,0 @@ -<template> - <b-modal - id="modal-dns" - ref="modal" - :title="$t('pageNetwork.table.addDnsAddress')" - @hidden="resetForm" - > - <b-form id="form-dns" @submit.prevent="handleSubmit"> - <b-row> - <b-col sm="6"> - <b-form-group - :label="$t('pageNetwork.modal.staticDns')" - label-for="staticDns" - > - <b-form-input - id="staticDns" - v-model="form.staticDns" - type="text" - :state="getValidationState($v.form.staticDns)" - @input="$v.form.staticDns.$touch()" - /> - <b-form-invalid-feedback role="alert"> - <template v-if="!$v.form.staticDns.required"> - {{ $t('global.form.fieldRequired') }} - </template> - <template v-if="!$v.form.staticDns.ipAddress"> - {{ $t('global.form.invalidFormat') }} - </template> - </b-form-invalid-feedback> - </b-form-group> - </b-col> - </b-row> - </b-form> - <template #modal-footer="{ cancel }"> - <b-button variant="secondary" @click="cancel()"> - {{ $t('global.action.cancel') }} - </b-button> - <b-button form="form-dns" type="submit" variant="primary" @click="onOk"> - {{ $t('global.action.add') }} - </b-button> - </template> - </b-modal> -</template> - -<script> -import VuelidateMixin from '@/components/Mixins/VuelidateMixin.js'; -import { ipAddress, required } from 'vuelidate/lib/validators'; - -export default { - mixins: [VuelidateMixin], - data() { - return { - form: { - staticDns: null, - }, - }; - }, - validations() { - return { - form: { - staticDns: { - required, - ipAddress, - }, - }, - }; - }, - methods: { - handleSubmit() { - this.$v.$touch(); - if (this.$v.$invalid) return; - this.$emit('ok', [this.form.staticDns]); - this.closeModal(); - }, - closeModal() { - this.$nextTick(() => { - this.$refs.modal.hide(); - }); - }, - resetForm() { - this.form.staticDns = null; - this.$v.$reset(); - this.$emit('hidden'); - }, - onOk(bvModalEvt) { - // prevent modal close - bvModalEvt.preventDefault(); - this.handleSubmit(); - }, - }, -}; -</script> diff --git a/src/views/_sila/Settings/Network/ModalHostname.vue b/src/views/_sila/Settings/Network/ModalHostname.vue deleted file mode 100644 index f3221ec7..00000000 --- a/src/views/_sila/Settings/Network/ModalHostname.vue +++ /dev/null @@ -1,110 +0,0 @@ -<template> - <b-modal - id="modal-hostname" - ref="modal" - :title="$t('pageNetwork.modal.editHostnameTitle')" - @hidden="resetForm" - > - <b-form id="hostname-settings" @submit.prevent="handleSubmit"> - <b-row> - <b-col sm="6"> - <b-form-group - :label="$t('pageNetwork.hostname')" - label-for="hostname" - > - <b-form-input - id="hostname" - v-model="form.hostname" - type="text" - :state="getValidationState($v.form.hostname)" - @input="$v.form.hostname.$touch()" - /> - <b-form-invalid-feedback role="alert"> - <template v-if="!$v.form.hostname.required"> - {{ $t('global.form.fieldRequired') }} - </template> - <template v-if="!$v.form.hostname.validateHostname"> - {{ $t('global.form.lengthMustBeBetween', { min: 1, max: 64 }) }} - </template> - </b-form-invalid-feedback> - </b-form-group> - </b-col> - </b-row> - </b-form> - <template #modal-footer="{ cancel }"> - <b-button variant="secondary" @click="cancel()"> - {{ $t('global.action.cancel') }} - </b-button> - <b-button - form="hostname-settings" - type="submit" - variant="primary" - @click="onOk" - > - {{ $t('global.action.add') }} - </b-button> - </template> - </b-modal> -</template> - -<script> -import VuelidateMixin from '@/components/Mixins/VuelidateMixin.js'; -import { required, helpers } from 'vuelidate/lib/validators'; - -const validateHostname = helpers.regex('validateHostname', /^\S{0,64}$/); - -export default { - mixins: [VuelidateMixin], - props: { - hostname: { - type: String, - default: '', - }, - }, - data() { - return { - form: { - hostname: '', - }, - }; - }, - watch: { - hostname() { - this.form.hostname = this.hostname; - }, - }, - validations() { - return { - form: { - hostname: { - required, - validateHostname, - }, - }, - }; - }, - methods: { - handleSubmit() { - this.$v.$touch(); - if (this.$v.$invalid) return; - this.$emit('ok', { HostName: this.form.hostname }); - this.closeModal(); - }, - closeModal() { - this.$nextTick(() => { - this.$refs.modal.hide(); - }); - }, - resetForm() { - this.form.hostname = this.hostname; - this.$v.$reset(); - this.$emit('hidden'); - }, - onOk(bvModalEvt) { - // prevent modal close - bvModalEvt.preventDefault(); - this.handleSubmit(); - }, - }, -}; -</script> diff --git a/src/views/_sila/Settings/Network/ModalIpv4.vue b/src/views/_sila/Settings/Network/ModalIpv4.vue deleted file mode 100644 index dcf4a579..00000000 --- a/src/views/_sila/Settings/Network/ModalIpv4.vue +++ /dev/null @@ -1,165 +0,0 @@ -<template> - <b-modal - id="modal-add-ipv4" - ref="modal" - :title="$t('pageNetwork.table.addIpv4Address')" - @hidden="resetForm" - > - <b-form id="form-ipv4" @submit.prevent="handleSubmit"> - <b-row> - <b-col sm="6"> - <b-form-group - :label="$t('pageNetwork.modal.ipAddress')" - label-for="ipAddress" - > - <b-form-input - id="ipAddress" - v-model="form.ipAddress" - type="text" - :state="getValidationState($v.form.ipAddress)" - @input="$v.form.ipAddress.$touch()" - /> - <b-form-invalid-feedback role="alert"> - <template v-if="!$v.form.ipAddress.required"> - {{ $t('global.form.fieldRequired') }} - </template> - <template v-if="!$v.form.ipAddress.ipAddress"> - {{ $t('global.form.invalidFormat') }} - </template> - </b-form-invalid-feedback> - </b-form-group> - </b-col> - <b-col sm="6"> - <b-form-group - :label="$t('pageNetwork.modal.gateway')" - label-for="gateway" - > - <b-form-input - id="gateway" - v-model="form.gateway" - type="text" - :state="getValidationState($v.form.gateway)" - @input="$v.form.gateway.$touch()" - /> - <b-form-invalid-feedback role="alert"> - <template v-if="!$v.form.gateway.required"> - {{ $t('global.form.fieldRequired') }} - </template> - <template v-if="!$v.form.gateway.ipAddress"> - {{ $t('global.form.invalidFormat') }} - </template> - </b-form-invalid-feedback> - </b-form-group> - </b-col> - </b-row> - <b-row> - <b-col sm="6"> - <b-form-group - :label="$t('pageNetwork.modal.subnetMask')" - label-for="subnetMask" - > - <b-form-input - id="subnetMask" - v-model="form.subnetMask" - type="text" - :state="getValidationState($v.form.subnetMask)" - @input="$v.form.subnetMask.$touch()" - /> - <b-form-invalid-feedback role="alert"> - <template v-if="!$v.form.subnetMask.required"> - {{ $t('global.form.fieldRequired') }} - </template> - <template v-if="!$v.form.subnetMask.ipAddress"> - {{ $t('global.form.invalidFormat') }} - </template> - </b-form-invalid-feedback> - </b-form-group> - </b-col> - </b-row> - </b-form> - <template #modal-footer="{ cancel }"> - <b-button variant="secondary" @click="cancel()"> - {{ $t('global.action.cancel') }} - </b-button> - <b-button form="form-ipv4" type="submit" variant="primary" @click="onOk"> - {{ $t('global.action.add') }} - </b-button> - </template> - </b-modal> -</template> - -<script> -import VuelidateMixin from '@/components/Mixins/VuelidateMixin.js'; -import { ipAddress, required } from 'vuelidate/lib/validators'; - -export default { - mixins: [VuelidateMixin], - props: { - defaultGateway: { - type: String, - default: '', - }, - }, - data() { - return { - form: { - ipAddress: '', - gateway: '', - subnetMask: '', - }, - }; - }, - watch: { - defaultGateway() { - this.form.gateway = this.defaultGateway; - }, - }, - validations() { - return { - form: { - ipAddress: { - required, - ipAddress, - }, - gateway: { - required, - ipAddress, - }, - subnetMask: { - required, - ipAddress, - }, - }, - }; - }, - methods: { - handleSubmit() { - this.$v.$touch(); - if (this.$v.$invalid) return; - this.$emit('ok', { - Address: this.form.ipAddress, - Gateway: this.form.gateway, - SubnetMask: this.form.subnetMask, - }); - this.closeModal(); - }, - closeModal() { - this.$nextTick(() => { - this.$refs.modal.hide(); - }); - }, - resetForm() { - this.form.ipAddress = null; - this.form.gateway = this.defaultGateway; - this.form.subnetMask = null; - this.$v.$reset(); - this.$emit('hidden'); - }, - onOk(bvModalEvt) { - // prevent modal close - bvModalEvt.preventDefault(); - this.handleSubmit(); - }, - }, -}; -</script> diff --git a/src/views/_sila/Settings/Network/ModalMacAddress.vue b/src/views/_sila/Settings/Network/ModalMacAddress.vue deleted file mode 100644 index d563f4ce..00000000 --- a/src/views/_sila/Settings/Network/ModalMacAddress.vue +++ /dev/null @@ -1,109 +0,0 @@ -<template> - <b-modal - id="modal-mac-address" - ref="modal" - :title="$t('pageNetwork.modal.editMacAddressTitle')" - @hidden="resetForm" - > - <b-form id="mac-settings" @submit.prevent="handleSubmit"> - <b-row> - <b-col sm="6"> - <b-form-group - :label="$t('pageNetwork.macAddress')" - label-for="macAddress" - > - <b-form-input - id="mac-address" - v-model.trim="form.macAddress" - data-test-id="network-input-macAddress" - type="text" - :state="getValidationState($v.form.macAddress)" - @change="$v.form.macAddress.$touch()" - /> - <b-form-invalid-feedback role="alert"> - <div v-if="!$v.form.macAddress.required"> - {{ $t('global.form.fieldRequired') }} - </div> - <div v-if="!$v.form.macAddress.macAddress"> - {{ $t('global.form.invalidFormat') }} - </div> - </b-form-invalid-feedback> - </b-form-group> - </b-col> - </b-row> - </b-form> - <template #modal-footer="{ cancel }"> - <b-button variant="secondary" @click="cancel()"> - {{ $t('global.action.cancel') }} - </b-button> - <b-button - form="mac-settings" - type="submit" - variant="primary" - @click="onOk" - > - {{ $t('global.action.add') }} - </b-button> - </template> - </b-modal> -</template> - -<script> -import VuelidateMixin from '@/components/Mixins/VuelidateMixin.js'; -import { macAddress, required } from 'vuelidate/lib/validators'; - -export default { - mixins: [VuelidateMixin], - props: { - macAddress: { - type: String, - default: '', - }, - }, - data() { - return { - form: { - macAddress: '', - }, - }; - }, - watch: { - macAddress() { - this.form.macAddress = this.macAddress; - }, - }, - validations() { - return { - form: { - macAddress: { - required, - macAddress: macAddress(), - }, - }, - }; - }, - methods: { - handleSubmit() { - this.$v.$touch(); - if (this.$v.$invalid) return; - this.$emit('ok', { MACAddress: this.form.macAddress }); - this.closeModal(); - }, - closeModal() { - this.$nextTick(() => { - this.$refs.modal.hide(); - }); - }, - resetForm() { - this.form.macAddress = this.macAddress; - this.$v.$reset(); - this.$emit('hidden'); - }, - onOk(bvModalEvt) { - // prevent modal close - bvModalEvt.preventDefault(); - this.handleSubmit(); - }, - }, -}; -</script> diff --git a/src/views/_sila/Settings/Network/Network.vue b/src/views/_sila/Settings/Network/Network.vue deleted file mode 100644 index 2abbcd7a..00000000 --- a/src/views/_sila/Settings/Network/Network.vue +++ /dev/null @@ -1,167 +0,0 @@ -<template> - <b-container fluid="xl"> - <page-title :description="$t('pageNetwork.pageDescription')" /> - <!-- Global settings for all interfaces --> - <network-global-settings /> - <!-- Interface tabs --> - <page-section v-show="ethernetData"> - <b-row> - <b-col> - <b-card no-body> - <b-tabs - active-nav-item-class="font-weight-bold" - card - content-class="mt-3" - > - <b-tab - v-for="(data, index) in ethernetData" - :key="data.Id" - :title="data.Id" - @click="getTabIndex(index)" - > - <!-- Interface settings --> - <network-interface-settings :tab-index="tabIndex" /> - <!-- IPV4 table --> - <table-ipv-4 :tab-index="tabIndex" /> - <!-- Static DNS table --> - <table-dns :tab-index="tabIndex" /> - </b-tab> - </b-tabs> - </b-card> - </b-col> - </b-row> - </page-section> - <!-- Modals --> - <modal-ipv4 :default-gateway="defaultGateway" @ok="saveIpv4Address" /> - <modal-dns @ok="saveDnsAddress" /> - <modal-hostname :hostname="currentHostname" @ok="saveSettings" /> - <modal-mac-address :mac-address="currentMacAddress" @ok="saveSettings" /> - </b-container> -</template> - -<script> -import BVToastMixin from '@/components/Mixins/BVToastMixin'; -import DataFormatterMixin from '@/components/Mixins/DataFormatterMixin'; -import LoadingBarMixin, { loading } from '@/components/Mixins/LoadingBarMixin'; -import ModalMacAddress from './ModalMacAddress.vue'; -import ModalHostname from './ModalHostname.vue'; -import ModalIpv4 from './ModalIpv4.vue'; -import ModalDns from './ModalDns.vue'; -import NetworkGlobalSettings from './NetworkGlobalSettings.vue'; -import NetworkInterfaceSettings from './NetworkInterfaceSettings.vue'; -import PageSection from '@/components/Global/PageSection'; -import PageTitle from '@/components/Global/PageTitle'; -import TableIpv4 from './TableIpv4.vue'; -import TableDns from './TableDns.vue'; -import { mapState } from 'vuex'; - -export default { - name: 'Network', - components: { - ModalHostname, - ModalMacAddress, - ModalIpv4, - ModalDns, - NetworkGlobalSettings, - NetworkInterfaceSettings, - PageSection, - PageTitle, - TableDns, - TableIpv4, - }, - mixins: [BVToastMixin, DataFormatterMixin, LoadingBarMixin], - beforeRouteLeave(to, from, next) { - this.hideLoader(); - next(); - }, - data() { - return { - currentHostname: '', - currentMacAddress: '', - defaultGateway: '', - loading, - tabIndex: 0, - }; - }, - computed: { - ...mapState('network', ['ethernetData']), - }, - watch: { - ethernetData() { - this.getModalInfo(); - }, - }, - created() { - this.startLoader(); - const globalSettings = new Promise((resolve) => { - this.$root.$on('network-global-settings-complete', () => resolve()); - }); - const interfaceSettings = new Promise((resolve) => { - this.$root.$on('network-interface-settings-complete', () => resolve()); - }); - const networkTableDns = new Promise((resolve) => { - this.$root.$on('network-table-dns-complete', () => resolve()); - }); - const networkTableIpv4 = new Promise((resolve) => { - this.$root.$on('network-table-ipv4-complete', () => resolve()); - }); - // Combine all child component Promises to indicate - // when page data load complete - Promise.all([ - this.$store.dispatch('network/getEthernetData'), - globalSettings, - interfaceSettings, - networkTableDns, - networkTableIpv4, - ]).finally(() => this.endLoader()); - }, - methods: { - getModalInfo() { - this.defaultGateway = this.$store.getters[ - 'network/globalNetworkSettings' - ][this.tabIndex].defaultGateway; - - this.currentHostname = this.$store.getters[ - 'network/globalNetworkSettings' - ][this.tabIndex].hostname; - - this.currentMacAddress = this.$store.getters[ - 'network/globalNetworkSettings' - ][this.tabIndex].macAddress; - }, - getTabIndex(selectedIndex) { - this.tabIndex = selectedIndex; - this.$store.dispatch('network/setSelectedTabIndex', this.tabIndex); - this.$store.dispatch( - 'network/setSelectedTabId', - this.ethernetData[selectedIndex].Id - ); - this.getModalInfo(); - }, - saveIpv4Address(modalFormData) { - this.startLoader(); - this.$store - .dispatch('network/saveIpv4Address', modalFormData) - .then((message) => this.successToast(message)) - .catch(({ message }) => this.errorToast(message)) - .finally(() => this.endLoader()); - }, - saveDnsAddress(modalFormData) { - this.startLoader(); - this.$store - .dispatch('network/saveDnsAddress', modalFormData) - .then((message) => this.successToast(message)) - .catch(({ message }) => this.errorToast(message)) - .finally(() => this.endLoader()); - }, - saveSettings(modalFormData) { - this.startLoader(); - this.$store - .dispatch('network/saveSettings', modalFormData) - .then((message) => this.successToast(message)) - .catch(({ message }) => this.errorToast(message)) - .finally(() => this.endLoader()); - }, - }, -}; -</script> diff --git a/src/views/_sila/Settings/Network/NetworkGlobalSettings.vue b/src/views/_sila/Settings/Network/NetworkGlobalSettings.vue deleted file mode 100644 index 30287673..00000000 --- a/src/views/_sila/Settings/Network/NetworkGlobalSettings.vue +++ /dev/null @@ -1,161 +0,0 @@ -<template> - <page-section - v-if="firstInterface" - :section-title="$t('pageNetwork.networkSettings')" - > - <b-row> - <b-col md="3"> - <dl> - <dt> - {{ $t('pageNetwork.hostname') }} - <b-button variant="link" class="p-1" @click="initSettingsModal()"> - <icon-edit :title="$t('pageNetwork.modal.editHostnameTitle')" /> - </b-button> - </dt> - <dd>{{ dataFormatter(firstInterface.hostname) }}</dd> - </dl> - </b-col> - <b-col md="3"> - <dl> - <dt>{{ $t('pageNetwork.useDomainName') }}</dt> - <dd> - <b-form-checkbox - id="useDomainNameSwitch" - v-model="useDomainNameState" - data-test-id="networkSettings-switch-useDomainName" - switch - @change="changeDomainNameState" - > - <span v-if="useDomainNameState"> - {{ $t('global.status.enabled') }} - </span> - <span v-else>{{ $t('global.status.disabled') }}</span> - </b-form-checkbox> - </dd> - </dl> - </b-col> - <b-col md="3"> - <dl> - <dt>{{ $t('pageNetwork.useDns') }}</dt> - <dd> - <b-form-checkbox - id="useDnsSwitch" - v-model="useDnsState" - data-test-id="networkSettings-switch-useDns" - switch - @change="changeDnsState" - > - <span v-if="useDnsState"> - {{ $t('global.status.enabled') }} - </span> - <span v-else>{{ $t('global.status.disabled') }}</span> - </b-form-checkbox> - </dd> - </dl> - </b-col> - <b-col md="3"> - <dl> - <dt>{{ $t('pageNetwork.useNtp') }}</dt> - <dd> - <b-form-checkbox - id="useNtpSwitch" - v-model="useNtpState" - data-test-id="networkSettings-switch-useNtp" - switch - @change="changeNtpState" - > - <span v-if="useNtpState"> - {{ $t('global.status.enabled') }} - </span> - <span v-else>{{ $t('global.status.disabled') }}</span> - </b-form-checkbox> - </dd> - </dl> - </b-col> - </b-row> - </page-section> -</template> - -<script> -import BVToastMixin from '@/components/Mixins/BVToastMixin'; -import IconEdit from '@carbon/icons-vue/es/edit/16'; -import DataFormatterMixin from '@/components/Mixins/DataFormatterMixin'; -import PageSection from '@/components/Global/PageSection'; -import { mapState } from 'vuex'; - -export default { - name: 'GlobalNetworkSettings', - components: { IconEdit, PageSection }, - mixins: [BVToastMixin, DataFormatterMixin], - - data() { - return { - hostname: '', - }; - }, - computed: { - ...mapState('network', ['ethernetData']), - firstInterface() { - return this.$store.getters['network/globalNetworkSettings'][0]; - }, - useDomainNameState: { - get() { - return this.$store.getters['network/globalNetworkSettings'][0] - .useDomainNameEnabled; - }, - set(newValue) { - return newValue; - }, - }, - useDnsState: { - get() { - return this.$store.getters['network/globalNetworkSettings'][0] - .useDnsEnabled; - }, - set(newValue) { - return newValue; - }, - }, - useNtpState: { - get() { - return this.$store.getters['network/globalNetworkSettings'][0] - .useNtpEnabled; - }, - set(newValue) { - return newValue; - }, - }, - }, - created() { - this.$store.dispatch('network/getEthernetData').finally(() => { - // Emit initial data fetch complete to parent component - this.$root.$emit('network-global-settings-complete'); - }); - }, - methods: { - changeDomainNameState(state) { - this.$store - .dispatch('network/saveDomainNameState', state) - .then((success) => { - this.successToast(success); - }) - .catch(({ message }) => this.errorToast(message)); - }, - changeDnsState(state) { - this.$store - .dispatch('network/saveDnsState', state) - .then((message) => this.successToast(message)) - .catch(({ message }) => this.errorToast(message)); - }, - changeNtpState(state) { - this.$store - .dispatch('network/saveNtpState', state) - .then((message) => this.successToast(message)) - .catch(({ message }) => this.errorToast(message)); - }, - initSettingsModal() { - this.$bvModal.show('modal-hostname'); - }, - }, -}; -</script> diff --git a/src/views/_sila/Settings/Network/NetworkInterfaceSettings.vue b/src/views/_sila/Settings/Network/NetworkInterfaceSettings.vue deleted file mode 100644 index 023d29bc..00000000 --- a/src/views/_sila/Settings/Network/NetworkInterfaceSettings.vue +++ /dev/null @@ -1,117 +0,0 @@ -<template> - <div> - <page-section> - <b-row> - <b-col md="3"> - <dl> - <dt>{{ $t('pageNetwork.linkStatus') }}</dt> - <dd> - {{ dataFormatter(linkStatus) }} - </dd> - </dl> - </b-col> - <b-col md="3"> - <dl> - <dt>{{ $t('pageNetwork.speed') }}</dt> - <dd> - {{ dataFormatter(linkSpeed) }} - </dd> - </dl> - </b-col> - </b-row> - </page-section> - <page-section :section-title="$t('pageNetwork.interfaceSection')"> - <b-row> - <b-col md="3"> - <dl> - <dt> - {{ $t('pageNetwork.fqdn') }} - </dt> - <dd> - {{ dataFormatter(fqdn) }} - </dd> - </dl> - </b-col> - <b-col md="3"> - <dl class="text-nowrap"> - <dt> - {{ $t('pageNetwork.macAddress') }} - <b-button - variant="link" - class="p-1" - @click="initMacAddressModal()" - > - <icon-edit - :title="$t('pageNetwork.modal.editMacAddressTitle')" - /> - </b-button> - </dt> - <dd> - {{ dataFormatter(macAddress) }} - </dd> - </dl> - </b-col> - </b-row> - </page-section> - </div> -</template> - -<script> -import BVToastMixin from '@/components/Mixins/BVToastMixin'; -import IconEdit from '@carbon/icons-vue/es/edit/16'; -import PageSection from '@/components/Global/PageSection'; -import DataFormatterMixin from '@/components/Mixins/DataFormatterMixin'; -import { mapState } from 'vuex'; - -export default { - name: 'Ipv4Table', - components: { - IconEdit, - PageSection, - }, - mixins: [BVToastMixin, DataFormatterMixin], - props: { - tabIndex: { - type: Number, - default: 0, - }, - }, - data() { - return { - selectedInterface: '', - linkStatus: '', - linkSpeed: '', - fqdn: '', - macAddress: '', - }; - }, - computed: { - ...mapState('network', ['ethernetData']), - }, - watch: { - // Watch for change in tab index - tabIndex() { - this.getSettings(); - }, - }, - created() { - this.getSettings(); - this.$store.dispatch('network/getEthernetData').finally(() => { - // Emit initial data fetch complete to parent component - this.$root.$emit('network-interface-settings-complete'); - }); - }, - methods: { - getSettings() { - this.selectedInterface = this.tabIndex; - this.linkStatus = this.ethernetData[this.selectedInterface].LinkStatus; - this.linkSpeed = this.ethernetData[this.selectedInterface].SpeedMbps; - this.fqdn = this.ethernetData[this.selectedInterface].FQDN; - this.macAddress = this.ethernetData[this.selectedInterface].MACAddress; - }, - initMacAddressModal() { - this.$bvModal.show('modal-mac-address'); - }, - }, -}; -</script> diff --git a/src/views/_sila/Settings/Network/TableDns.vue b/src/views/_sila/Settings/Network/TableDns.vue deleted file mode 100644 index 569109f1..00000000 --- a/src/views/_sila/Settings/Network/TableDns.vue +++ /dev/null @@ -1,145 +0,0 @@ -<template> - <page-section :section-title="$t('pageNetwork.staticDns')"> - <b-row> - <b-col lg="6"> - <div class="text-right"> - <b-button variant="primary" @click="initDnsModal()"> - <icon-add /> - {{ $t('pageNetwork.table.addDnsAddress') }} - </b-button> - </div> - <b-table - responsive="md" - hover - :fields="dnsTableFields" - :items="form.dnsStaticTableItems" - :empty-text="$t('global.table.emptyMessage')" - class="mb-0" - show-empty - > - <template #cell(actions)="{ item, index }"> - <table-row-action - v-for="(action, actionIndex) in item.actions" - :key="actionIndex" - :value="action.value" - :title="action.title" - :enabled="action.enabled" - @click-table-action="onDnsTableAction(action, $event, index)" - > - <template #icon> - <icon-edit v-if="action.value === 'edit'" /> - <icon-trashcan v-if="action.value === 'delete'" /> - </template> - </table-row-action> - </template> - </b-table> - </b-col> - </b-row> - </page-section> -</template> - -<script> -import BVToastMixin from '@/components/Mixins/BVToastMixin'; -import IconAdd from '@carbon/icons-vue/es/add--alt/20'; -import IconEdit from '@carbon/icons-vue/es/edit/20'; -import IconTrashcan from '@carbon/icons-vue/es/trash-can/20'; -import PageSection from '@/components/Global/PageSection'; -import TableRowAction from '@/components/Global/TableRowAction'; -import { mapState } from 'vuex'; - -export default { - name: 'DNSTable', - components: { - IconAdd, - IconEdit, - IconTrashcan, - PageSection, - TableRowAction, - }, - mixins: [BVToastMixin], - props: { - tabIndex: { - type: Number, - default: 0, - }, - }, - data() { - return { - form: { - dnsStaticTableItems: [], - }, - actions: [ - { - value: 'edit', - title: this.$t('global.action.edit'), - }, - { - value: 'delete', - title: this.$t('global.action.delete'), - }, - ], - dnsTableFields: [ - { - key: 'address', - label: this.$t('pageNetwork.table.ipAddress'), - }, - { key: 'actions', label: '', tdClass: 'text-right' }, - ], - }; - }, - computed: { - ...mapState('network', ['ethernetData']), - }, - watch: { - // Watch for change in tab index - tabIndex() { - this.getStaticDnsItems(); - }, - ethernetData() { - this.getStaticDnsItems(); - }, - }, - created() { - this.getStaticDnsItems(); - this.$store.dispatch('network/getEthernetData').finally(() => { - // Emit initial data fetch complete to parent component - this.$root.$emit('network-table-dns-complete'); - }); - }, - methods: { - getStaticDnsItems() { - const index = this.tabIndex; - const dns = this.ethernetData[index].StaticNameServers || []; - this.form.dnsStaticTableItems = dns.map((server) => { - return { - address: server, - actions: [ - { - value: 'delete', - title: this.$t('pageNetwork.table.deleteDns'), - }, - ], - }; - }); - }, - onDnsTableAction(action, $event, index) { - if ($event === 'delete') { - this.deleteDnsTableRow(index); - } - }, - deleteDnsTableRow(index) { - this.form.dnsStaticTableItems.splice(index, 1); - const newDnsArray = this.form.dnsStaticTableItems.map((dns) => { - return dns.address; - }); - this.$store - .dispatch('network/editDnsAddress', newDnsArray) - .then((message) => this.successToast(message)) - .catch(({ message }) => this.errorToast(message)); - }, - initDnsModal() { - this.$bvModal.show('modal-dns'); - }, - }, -}; -</script> diff --git a/src/views/_sila/Settings/Network/TableIpv4.vue b/src/views/_sila/Settings/Network/TableIpv4.vue deleted file mode 100644 index 75870031..00000000 --- a/src/views/_sila/Settings/Network/TableIpv4.vue +++ /dev/null @@ -1,169 +0,0 @@ -<template> - <page-section :section-title="$t('pageNetwork.ipv4')"> - <b-row> - <b-col> - <h3 class="h5"> - {{ $t('pageNetwork.ipv4Addresses') }} - </h3> - </b-col> - <b-col class="text-right"> - <b-button variant="primary" @click="initAddIpv4Address()"> - <icon-add /> - {{ $t('pageNetwork.table.addIpv4Address') }} - </b-button> - </b-col> - </b-row> - <b-table - responsive="md" - hover - :fields="ipv4TableFields" - :items="form.ipv4TableItems" - :empty-text="$t('global.table.emptyMessage')" - class="mb-0" - show-empty - > - <template #cell(actions)="{ item, index }"> - <table-row-action - v-for="(action, actionIndex) in item.actions" - :key="actionIndex" - :value="action.value" - :title="action.title" - :enabled="action.enabled" - @click-table-action="onIpv4TableAction(action, $event, index)" - > - <template #icon> - <icon-edit v-if="action.value === 'edit'" /> - <icon-trashcan v-if="action.value === 'delete'" /> - </template> - </table-row-action> - </template> - </b-table> - </page-section> -</template> - -<script> -import BVToastMixin from '@/components/Mixins/BVToastMixin'; -import IconAdd from '@carbon/icons-vue/es/add--alt/20'; -import IconEdit from '@carbon/icons-vue/es/edit/20'; -import IconTrashcan from '@carbon/icons-vue/es/trash-can/20'; -import LoadingBarMixin from '@/components/Mixins/LoadingBarMixin'; -import PageSection from '@/components/Global/PageSection'; -import TableRowAction from '@/components/Global/TableRowAction'; -import { mapState } from 'vuex'; - -export default { - name: 'Ipv4Table', - components: { - IconAdd, - IconEdit, - IconTrashcan, - PageSection, - TableRowAction, - }, - mixins: [BVToastMixin, LoadingBarMixin], - props: { - tabIndex: { - type: Number, - default: 0, - }, - }, - data() { - return { - form: { - ipv4TableItems: [], - }, - actions: [ - { - value: 'edit', - title: this.$t('global.action.edit'), - }, - { - value: 'delete', - title: this.$t('global.action.delete'), - }, - ], - ipv4TableFields: [ - { - key: 'Address', - label: this.$t('pageNetwork.table.ipAddress'), - }, - { - key: 'Gateway', - label: this.$t('pageNetwork.table.gateway'), - }, - { - key: 'SubnetMask', - label: this.$t('pageNetwork.table.subnet'), - }, - { - key: 'AddressOrigin', - label: this.$t('pageNetwork.table.addressOrigin'), - }, - { key: 'actions', label: '', tdClass: 'text-right' }, - ], - }; - }, - computed: { - ...mapState('network', ['ethernetData']), - }, - watch: { - // Watch for change in tab index - tabIndex() { - this.getIpv4TableItems(); - }, - ethernetData() { - this.getIpv4TableItems(); - }, - }, - created() { - this.getIpv4TableItems(); - this.$store.dispatch('network/getEthernetData').finally(() => { - // Emit initial data fetch complete to parent component - this.$root.$emit('network-table-ipv4-complete'); - }); - }, - methods: { - getIpv4TableItems() { - const index = this.tabIndex; - const addresses = this.ethernetData[index].IPv4Addresses || []; - this.form.ipv4TableItems = addresses.map((ipv4) => { - return { - Address: ipv4.Address, - SubnetMask: ipv4.SubnetMask, - Gateway: ipv4.Gateway, - AddressOrigin: ipv4.AddressOrigin, - actions: [ - { - value: 'delete', - title: this.$t('pageNetwork.table.deleteIpv4'), - }, - ], - }; - }); - }, - onIpv4TableAction(action, $event, index) { - if ($event === 'delete') { - this.deleteIpv4TableRow(index); - } - }, - deleteIpv4TableRow(index) { - this.form.ipv4TableItems.splice(index, 1); - const newIpv4Array = this.form.ipv4TableItems.map((ipv4) => { - const { Address, SubnetMask, Gateway } = ipv4; - return { - Address, - SubnetMask, - Gateway, - }; - }); - this.$store - .dispatch('network/editIpv4Address', newIpv4Array) - .then((message) => this.successToast(message)) - .catch(({ message }) => this.errorToast(message)); - }, - initAddIpv4Address() { - this.$bvModal.show('modal-add-ipv4'); - }, - }, -}; -</script> diff --git a/src/views/_sila/Settings/Network/index.js b/src/views/_sila/Settings/Network/index.js deleted file mode 100644 index 97bf0397..00000000 --- a/src/views/_sila/Settings/Network/index.js +++ /dev/null @@ -1,2 +0,0 @@ -import Network from './Network.vue'; -export default Network; diff --git a/src/views/_sila/Settings/PowerRestorePolicy/PowerRestorePolicy.vue b/src/views/_sila/Settings/PowerRestorePolicy/PowerRestorePolicy.vue index 06e30f3e..c357d47a 100644 --- a/src/views/_sila/Settings/PowerRestorePolicy/PowerRestorePolicy.vue +++ b/src/views/_sila/Settings/PowerRestorePolicy/PowerRestorePolicy.vue @@ -21,10 +21,10 @@ </template> <script> -import PageTitle from '@/components/Global/PageTitle'; -import LoadingBarMixin from '@/components/Mixins/LoadingBarMixin'; -import VuelidateMixin from '@/components/Mixins/VuelidateMixin.js'; -import BVToastMixin from '@/components/Mixins/BVToastMixin'; +import PageTitle from '@/components/_sila/Global/PageTitle'; +import LoadingBarMixin from '@/components/_sila/Mixins/LoadingBarMixin'; +import VuelidateMixin from '@/components/_sila/Mixins/VuelidateMixin.js'; +import BVToastMixin from '@/components/_sila/Mixins/BVToastMixin'; export default { name: 'PowerRestorePolicy', |