Migrate to Bootstrap 5 and remove Vue compat plugin
Complete migration from Bootstrap 4 (bootstrap-vue) to Bootstrap 5
(bootstrap-vue-next) and remove the @vue/compat plugin to finalize
the Vue 3 migration.
Bundle size impact:
- Before (Bootstrap 4 + bootstrap-vue): 535 KiB gzipped
- After (Bootstrap 5 + bootstrap-vue-next): 511 KiB gzipped
- Reduction: 24 KiB (4.5% smaller)
Package updates:
- Update bootstrap 4.6.2 -> 5.3.8
- Update bootstrap-vue 2.23.1 -> bootstrap-vue-next 0.40.8
- Remove @vue/compat plugin
- Update vue 3.4.29 -> 3.5.24 and related packages
- Add mitt 3.0.1 for global event bus
- Add vue-demi 0.14.10 for library compatibility
Bootstrap 5 CSS updates:
- Replace directional classes: ml/mr/pl/pr -> ms/me/ps/pe
- Replace text-left/right -> text-start/end
- Replace sr-only -> visually-hidden / visually-hidden-focusable
- Update media breakpoint xs -> sm (Bootstrap 5 removed xs)
- Update color functions: gray("700") -> $gray-700
- Add form-switch border-radius for curved toggles
- Update alert, table, toast, form, and button styles
Bootstrap-Vue-Next API changes:
- Use createBootstrap() for plugin registration
- Update modal footer slots: #modal-footer -> #footer
- Fix form select events: @change -> @update:model-value
- Add v-model bindings to modals instead of manual show()/hide()
- Update toast system with custom plugin wrapping useToast()
- Register components and directives explicitly
Vue 3 specific updates:
- Replace $root.$emit with mitt event bus (eventBus.js)
- Update render function from h(App) to createApp(App)
- Add emits option to components
- Use h() instead of $createElement in mixins
- Add Vue 3 compile-time feature flags with documentation
- Update event listeners: $on/$off to eventBus methods
- Add beforeUnmount cleanup for event listeners
New components and significant additions:
- src/plugins/toast.js - Custom toast plugin wrapping useToast() for
Options API compatibility
- src/components/Global/ConfirmModal.vue - Global confirmation dialog
shim to replace Bootstrap 4's removed bvModal.msgBoxConfirm
- src/eventBus.js - mitt-based event bus with Vue 2-compatible API
- Navigation state preservation on page refresh implemented
Critical fixes:
- Add global API interceptor to strip Vue reactivity from payloads
- Preserve binary data (File, Blob, FormData) in API requests
- Fix Generate CSR modal v-model binding for proper open/close
- Remove debug logging and fix jest configuration
- Fix responsive text visibility in AppHeader
- Update BVTableSelectableMixin for proper row selection
- Fix BVToastMixin VNode rendering for Vue 3
Vue 3 modal fixes (lazy-loaded components):
- Add v-model support to network modals (ModalIpv4, ModalIpv6, ModalDns,
ModalHostname, ModalMacAddress, ModalDefaultGateway) by adding
modelValue prop, watcher on modelValue that triggers show(), and
update:modelValue emit in resetForm
- Remove lazy loading from TableIpv4, TableIpv6, TableDns to ensure
modal component refs are available when v-model triggers
- Fix modal title accessibility by adding title prop to modals
(ModalAddDestination, ModalUser, ModalAddRoleGroup, etc.)
i18n fixes (computed properties):
- Fix computed properties using i18n translations in ModalAddRoleGroup,
ModalUser, and ModalUploadCertificate
- Move useI18n() call from data() to setup() and return i18n object
- Use i18n.t() instead of $t in computed properties and templates
- Prevents "this.$t is not a function" and "_ctx.$t is not a function"
errors in Vue 3
Toast notification fixes:
- Fix toast progress bar visibility by setting progressProps to
undefined (documented way to opt-out) instead of false
- Change modelValue prop to interval for auto-dismiss timing
- Remove temporary CSS display:none hack from _toasts.scss
Network settings fixes:
- Fix checkbox @change event sending Vue reactive proxy object instead
of boolean by casting with !! operator in changeDomainNameState and
related methods in NetworkGlobalSettings.vue
- Ensures API receives plain boolean values in PATCH requests
Navigation fixes:
- Fix nav-link styling for navigation items without children by
replacing b-nav-item with router-link in AppNavigation.vue
- Prevents blue font color from .nav-link CSS class
Configuration updates:
- Remove vue-compat webpack configuration
- Add Vue 3 feature flags (__VUE_OPTIONS_API__, etc.)
- Add .cursor to .gitignore
Accessibility improvements:
- Add autocomplete attributes to password and credential inputs
- Add modal title props for screen reader support
Build completes successfully and UI behavior matches pre-migration.
Extracted features (to be submitted in follow-up PRs):
The following features were removed from this migration PR to keep it
focused on the Bootstrap 5 upgrade. They will be submitted separately:
1. UnresponsiveModal - Server connectivity watchdog with auto-retry
2. Auth token persistence - sessionStorage support for X-Auth-Token
3. Hardware store error handling - try/catch, dynamic discovery
4. Login page connecting indicator - Backend polling with spinner
5. Test updates - Jest setup and snapshot updates for
Bootstrap-Vue-Next
6. Documentation updates - Vue 3 and Vue I18n v9+ API documentation
7. Enhanced ConfirmModal - Feature-rich confirmation dialog with
custom actions
Change-Id: Ib76a58f324b3c926cf536e6e4626e4271639de38
Signed-off-by: Jason Westover <jwestover@nvidia.com>
diff --git a/src/views/Settings/DateTime/DateTime.vue b/src/views/Settings/DateTime/DateTime.vue
index 0ddea67..7be9d18 100644
--- a/src/views/Settings/DateTime/DateTime.vue
+++ b/src/views/Settings/DateTime/DateTime.vue
@@ -18,14 +18,18 @@
<b-col lg="3">
<dl>
<dt>{{ $t('pageDateTime.form.date') }}</dt>
- <dd v-if="bmcTime">{{ $filters.formatDate(bmcTime) }}</dd>
+ <dd v-if="bmcTime">
+ {{ $filters.formatDate(bmcTime) }}
+ </dd>
<dd v-else>--</dd>
</dl>
</b-col>
<b-col lg="3">
<dl>
<dt>{{ $t('pageDateTime.form.time.label') }}</dt>
- <dd v-if="bmcTime">{{ $filters.formatTime(bmcTime) }}</dd>
+ <dd v-if="bmcTime">
+ {{ $filters.formatTime(bmcTime) }}
+ </dd>
<dd v-else>--</dd>
</dl>
</b-col>
@@ -36,7 +40,7 @@
<b-form-group
label="Configure date and time"
:disabled="loading"
- label-sr-only
+ label-class="visually-hidden"
>
<b-form-radio
v-model="form.configurationSelected"
@@ -45,7 +49,7 @@
>
{{ $t('pageDateTime.form.manual') }}
</b-form-radio>
- <b-row class="mt-3 ml-3">
+ <b-row class="mt-3 ms-3">
<b-col sm="6" lg="4" xl="3">
<b-form-group
:label="$t('pageDateTime.form.date')"
@@ -70,34 +74,16 @@
{{ $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="
+ $t('pageDateTime.form.time.timezone', {
+ timezone,
+ })
+ "
label-for="input-manual-time"
>
<b-form-text id="time-format-help">HH:MM</b-form-text>
@@ -129,7 +115,7 @@
>
NTP
</b-form-radio>
- <b-row class="mt-3 ml-3">
+ <b-row class="mt-3 ms-3">
<b-col sm="6" lg="4" xl="3">
<b-form-group
:label="$t('pageDateTime.form.ntpServers.server1')"
@@ -198,7 +184,6 @@
<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';
@@ -218,7 +203,7 @@
export default {
name: 'DateTime',
- components: { Alert, IconCalendar, PageTitle, PageSection },
+ components: { Alert, PageTitle, PageSection },
mixins: [
BVToastMixin,
LoadingBarMixin,
diff --git a/src/views/Settings/Network/ModalDefaultGateway.vue b/src/views/Settings/Network/ModalDefaultGateway.vue
index d1fa60f..1ac6f14 100644
--- a/src/views/Settings/Network/ModalDefaultGateway.vue
+++ b/src/views/Settings/Network/ModalDefaultGateway.vue
@@ -32,7 +32,7 @@
</b-col>
</b-row>
</b-form>
- <template #modal-footer="{ cancel }">
+ <template #footer="{ cancel }">
<b-button variant="secondary" @click="cancel()">
{{ $t('global.action.cancel') }}
</b-button>
@@ -63,12 +63,16 @@
export default {
mixins: [VuelidateMixin],
props: {
+ modelValue: {
+ type: Boolean,
+ default: false,
+ },
defaultGateway: {
type: String,
default: '',
},
},
- emits: ['ok', 'hidden'],
+ emits: ['ok', 'hidden', 'update:modelValue'],
setup() {
return {
v$: useVuelidate(),
@@ -86,6 +90,16 @@
defaultGateway() {
this.form.defaultGateway = this.defaultGateway;
},
+ modelValue: {
+ handler(newValue) {
+ if (newValue) {
+ this.$nextTick(() => {
+ this.$refs.modal?.show();
+ });
+ }
+ },
+ immediate: true,
+ },
},
validations() {
return {
@@ -112,6 +126,7 @@
resetForm() {
this.form.defaultGateway = this.defaultGateway;
this.v$.$reset();
+ this.$emit('update:modelValue', false);
this.$emit('hidden');
},
onOk(bvModalEvt) {
diff --git a/src/views/Settings/Network/ModalDns.vue b/src/views/Settings/Network/ModalDns.vue
index 39308ce..d9e9830 100644
--- a/src/views/Settings/Network/ModalDns.vue
+++ b/src/views/Settings/Network/ModalDns.vue
@@ -31,7 +31,7 @@
</b-col>
</b-row>
</b-form>
- <template #modal-footer="{ cancel }">
+ <template #footer="{ cancel }">
<b-button variant="secondary" @click="cancel()">
{{ $t('global.action.cancel') }}
</b-button>
@@ -51,7 +51,13 @@
export default {
mixins: [VuelidateMixin],
- emits: ['ok', 'hidden'],
+ props: {
+ modelValue: {
+ type: Boolean,
+ default: false,
+ },
+ },
+ emits: ['ok', 'hidden', 'update:modelValue'],
setup() {
return {
v$: useVuelidate(),
@@ -75,6 +81,18 @@
},
};
},
+ watch: {
+ modelValue: {
+ handler(newValue) {
+ if (newValue) {
+ this.$nextTick(() => {
+ this.$refs.modal?.show();
+ });
+ }
+ },
+ immediate: true,
+ },
+ },
methods: {
handleSubmit() {
this.v$.$touch();
@@ -90,6 +108,7 @@
resetForm() {
this.form.staticDns = null;
this.v$.$reset();
+ this.$emit('update:modelValue', false);
this.$emit('hidden');
},
onOk(bvModalEvt) {
diff --git a/src/views/Settings/Network/ModalHostname.vue b/src/views/Settings/Network/ModalHostname.vue
index eb20f17..19ef61c 100644
--- a/src/views/Settings/Network/ModalHostname.vue
+++ b/src/views/Settings/Network/ModalHostname.vue
@@ -31,7 +31,7 @@
</b-col>
</b-row>
</b-form>
- <template #modal-footer="{ cancel }">
+ <template #footer="{ cancel }">
<b-button variant="secondary" @click="cancel()">
{{ $t('global.action.cancel') }}
</b-button>
@@ -59,12 +59,16 @@
export default {
mixins: [VuelidateMixin],
props: {
+ modelValue: {
+ type: Boolean,
+ default: false,
+ },
hostname: {
type: String,
default: '',
},
},
- emits: ['ok', 'hidden'],
+ emits: ['ok', 'hidden', 'update:modelValue'],
setup() {
return {
v$: useVuelidate(),
@@ -82,6 +86,16 @@
hostname() {
this.form.hostname = this.hostname;
},
+ modelValue: {
+ handler(newValue) {
+ if (newValue) {
+ this.$nextTick(() => {
+ this.$refs.modal?.show();
+ });
+ }
+ },
+ immediate: true,
+ },
},
validations() {
return {
@@ -108,6 +122,7 @@
resetForm() {
this.form.hostname = this.hostname;
this.v$.$reset();
+ this.$emit('update:modelValue', false);
this.$emit('hidden');
},
onOk(bvModalEvt) {
diff --git a/src/views/Settings/Network/ModalIpv4.vue b/src/views/Settings/Network/ModalIpv4.vue
index e72179a..45bd411 100644
--- a/src/views/Settings/Network/ModalIpv4.vue
+++ b/src/views/Settings/Network/ModalIpv4.vue
@@ -77,7 +77,7 @@
</b-col>
</b-row>
</b-form>
- <template #modal-footer="{ cancel }">
+ <template #footer="{ cancel }">
<b-button variant="secondary" @click="cancel()">
{{ $t('global.action.cancel') }}
</b-button>
@@ -98,12 +98,16 @@
export default {
mixins: [VuelidateMixin],
props: {
+ modelValue: {
+ type: Boolean,
+ default: false,
+ },
defaultGateway: {
type: String,
default: '',
},
},
- emits: ['ok', 'hidden'],
+ emits: ['ok', 'hidden', 'update:modelValue'],
setup() {
return {
v$: useVuelidate(),
@@ -123,6 +127,16 @@
defaultGateway() {
this.form.gateway = this.defaultGateway;
},
+ modelValue: {
+ handler(newValue) {
+ if (newValue) {
+ this.$nextTick(() => {
+ this.$refs.modal?.show();
+ });
+ }
+ },
+ immediate: true,
+ },
},
validations() {
return {
@@ -143,6 +157,12 @@
};
},
methods: {
+ show() {
+ this.$refs.modal?.show();
+ },
+ hide() {
+ this.$refs.modal?.hide();
+ },
handleSubmit() {
this.v$.$touch();
if (this.v$.$invalid) return;
@@ -163,6 +183,7 @@
this.form.gateway = this.defaultGateway;
this.form.subnetMask = null;
this.v$.$reset();
+ this.$emit('update:modelValue', false);
this.$emit('hidden');
},
onOk(bvModalEvt) {
diff --git a/src/views/Settings/Network/ModalIpv6.vue b/src/views/Settings/Network/ModalIpv6.vue
index 6f844ce..358f34f 100644
--- a/src/views/Settings/Network/ModalIpv6.vue
+++ b/src/views/Settings/Network/ModalIpv6.vue
@@ -55,7 +55,7 @@
</b-col>
</b-row>
</b-form>
- <template #modal-footer="{ cancel }">
+ <template #footer="{ cancel }">
<b-button variant="secondary" @click="cancel()">
{{ $t('global.action.cancel') }}
</b-button>
@@ -85,7 +85,13 @@
export default {
mixins: [VuelidateMixin],
- emits: ['ok', 'hidden'],
+ props: {
+ modelValue: {
+ type: Boolean,
+ default: false,
+ },
+ },
+ emits: ['ok', 'hidden', 'update:modelValue'],
setup() {
return {
v$: useVuelidate(),
@@ -114,6 +120,18 @@
},
};
},
+ watch: {
+ modelValue: {
+ handler(newValue) {
+ if (newValue) {
+ this.$nextTick(() => {
+ this.$refs.modal?.show();
+ });
+ }
+ },
+ immediate: true,
+ },
+ },
methods: {
handleSubmit() {
this.v$.$touch();
@@ -133,6 +151,7 @@
this.form.ipAddress = null;
this.form.prefixLength = null;
this.v$.$reset();
+ this.$emit('update:modelValue', false);
this.$emit('hidden');
},
onOk(bvModalEvt) {
diff --git a/src/views/Settings/Network/ModalMacAddress.vue b/src/views/Settings/Network/ModalMacAddress.vue
index 83c1406..2d70ce6 100644
--- a/src/views/Settings/Network/ModalMacAddress.vue
+++ b/src/views/Settings/Network/ModalMacAddress.vue
@@ -32,7 +32,7 @@
</b-col>
</b-row>
</b-form>
- <template #modal-footer="{ cancel }">
+ <template #footer="{ cancel }">
<b-button variant="secondary" @click="cancel()">
{{ $t('global.action.cancel') }}
</b-button>
@@ -58,12 +58,16 @@
export default {
mixins: [VuelidateMixin],
props: {
+ modelValue: {
+ type: Boolean,
+ default: false,
+ },
macAddress: {
type: String,
default: '',
},
},
- emits: ['ok', 'hidden'],
+ emits: ['ok', 'hidden', 'update:modelValue'],
setup() {
return {
v$: useVuelidate(),
@@ -81,6 +85,16 @@
macAddress() {
this.form.macAddress = this.macAddress;
},
+ modelValue: {
+ handler(newValue) {
+ if (newValue) {
+ this.$nextTick(() => {
+ this.$refs.modal?.show();
+ });
+ }
+ },
+ immediate: true,
+ },
},
validations() {
return {
@@ -107,6 +121,7 @@
resetForm() {
this.form.macAddress = this.macAddress;
this.v$.$reset();
+ this.$emit('update:modelValue', false);
this.$emit('hidden');
},
onOk(bvModalEvt) {
diff --git a/src/views/Settings/Network/Network.vue b/src/views/Settings/Network/Network.vue
index 7a2e014..73118c8 100644
--- a/src/views/Settings/Network/Network.vue
+++ b/src/views/Settings/Network/Network.vue
@@ -4,20 +4,22 @@
<!-- Global settings for all interfaces -->
<network-global-settings />
<!-- Interface tabs -->
- <page-section v-show="ethernetData">
+ <page-section v-if="ethernetData && ethernetData.length">
<b-row>
<b-col>
<b-card no-body>
<b-tabs
- active-nav-item-class="font-weight-bold"
+ :key="tabsRenderKey"
+ v-model:index="tabIndex"
+ active-nav-item-class="fw-bold"
card
content-class="mt-3"
+ :lazy="false"
>
<b-tab
- v-for="(data, index) in ethernetData"
+ v-for="data in ethernetData"
:key="data.Id"
:title="data.Id"
- @click="getTabIndex(index)"
>
<!-- Interface settings -->
<network-interface-settings :tab-index="tabIndex" />
@@ -37,9 +39,18 @@
<modal-ipv4 :default-gateway="defaultGateway" @ok="saveIpv4Address" />
<modal-ipv6 @ok="saveIpv6Address" />
<modal-dns @ok="saveDnsAddress" />
- <modal-hostname :hostname="currentHostname" @ok="saveSettings" />
- <modal-mac-address :mac-address="currentMacAddress" @ok="saveSettings" />
+ <modal-hostname
+ v-model="showHostnameModal"
+ :hostname="currentHostname"
+ @ok="saveSettings"
+ />
+ <modal-mac-address
+ v-model="showMacAddressModal"
+ :mac-address="currentMacAddress"
+ @ok="saveSettings"
+ />
<modal-default-gateway
+ v-model="showDefaultGatewayModal"
:default-gateway="ipv6DefaultGateway"
@ok="saveSettings"
/>
@@ -97,6 +108,11 @@
ipv6DefaultGateway: '',
loading,
tabIndex: 0,
+ tabsReady: false,
+ tabsRenderKey: 0,
+ showHostnameModal: false,
+ showDefaultGatewayModal: false,
+ showMacAddressModal: false,
};
},
computed: {
@@ -106,23 +122,32 @@
ethernetData() {
this.getModalInfo();
},
+ tabIndex(newIndex) {
+ this.$store.dispatch('network/setSelectedTabIndex', newIndex);
+ this.$store.dispatch(
+ 'network/setSelectedTabId',
+ this.ethernetData?.[newIndex]?.Id,
+ );
+ this.getModalInfo();
+ },
},
created() {
this.startLoader();
+ const eventBus = require('@/eventBus').default;
const globalSettings = new Promise((resolve) => {
- this.$root.$on('network-global-settings-complete', () => resolve());
+ eventBus.$once('network-global-settings-complete', resolve);
});
const interfaceSettings = new Promise((resolve) => {
- this.$root.$on('network-interface-settings-complete', () => resolve());
+ eventBus.$once('network-interface-settings-complete', resolve);
});
const networkTableDns = new Promise((resolve) => {
- this.$root.$on('network-table-dns-complete', () => resolve());
+ eventBus.$once('network-table-dns-complete', resolve);
});
const networkTableIpv4 = new Promise((resolve) => {
- this.$root.$on('network-table-ipv4-complete', () => resolve());
+ eventBus.$once('network-table-ipv4-complete', resolve);
});
const networkTableIpv6 = new Promise((resolve) => {
- this.$root.$on('network-table-ipv6-complete', () => resolve());
+ eventBus.$once('network-table-ipv6-complete', resolve);
});
// Combine all child component Promises to indicate
// when page data load complete
@@ -133,28 +158,36 @@
networkTableDns,
networkTableIpv4,
networkTableIpv6,
- ]).finally(() => this.endLoader());
+ ])
+ .then(() => {
+ // ensure first tab is selected and expanded (index 0). Force a change
+ // cycle to trigger BTabs to render the pane content immediately.
+ const count = this.ethernetData?.length || 0;
+ if (count > 0) {
+ // set initial selection directly to index 0
+ this.tabIndex = 0;
+ this.$store.dispatch('network/setSelectedTabIndex', 0);
+ const firstId = this.ethernetData?.[0]?.Id;
+ if (firstId)
+ this.$store.dispatch('network/setSelectedTabId', firstId);
+ this.tabsRenderKey += 1;
+ }
+ })
+ .finally(() => this.endLoader());
},
methods: {
getModalInfo() {
- this.defaultGateway =
- this.$store.getters['network/globalNetworkSettings'][
- this.tabIndex
- ].defaultGateway;
+ const settingsArray =
+ this.$store.getters['network/globalNetworkSettings'];
+ const settings = Array.isArray(settingsArray)
+ ? settingsArray[this.tabIndex]
+ : undefined;
- this.currentHostname =
- this.$store.getters['network/globalNetworkSettings'][
- this.tabIndex
- ].hostname;
-
- this.currentMacAddress =
- this.$store.getters['network/globalNetworkSettings'][
- this.tabIndex
- ].macAddress;
- this.ipv6DefaultGateway =
- this.$store.getters['network/globalNetworkSettings'][
- this.tabIndex
- ].ipv6DefaultGateway;
+ if (!settings) return;
+ this.defaultGateway = settings.defaultGateway;
+ this.currentHostname = settings.hostname;
+ this.currentMacAddress = settings.macAddress;
+ this.ipv6DefaultGateway = settings.ipv6DefaultGateway;
},
getTabIndex(selectedIndex) {
this.tabIndex = selectedIndex;
diff --git a/src/views/Settings/Network/NetworkGlobalSettings.vue b/src/views/Settings/Network/NetworkGlobalSettings.vue
index 23ce6ca..4f11421 100644
--- a/src/views/Settings/Network/NetworkGlobalSettings.vue
+++ b/src/views/Settings/Network/NetworkGlobalSettings.vue
@@ -134,16 +134,22 @@
import PageSection from '@/components/Global/PageSection';
import { mapState } from 'vuex';
import { useI18n } from 'vue-i18n';
+import { useModal } from 'bootstrap-vue-next';
export default {
name: 'GlobalNetworkSettings',
components: { IconEdit, PageSection },
mixins: [BVToastMixin, DataFormatterMixin],
+ setup() {
+ const bvModal = useModal();
+ return { bvModal };
+ },
data() {
return {
$t: useI18n().t,
hostname: '',
+ showHostnameModal: false,
};
},
computed: {
@@ -209,14 +215,14 @@
created() {
this.$store.dispatch('network/getEthernetData').finally(() => {
// Emit initial data fetch complete to parent component
- this.$root.$emit('network-global-settings-complete');
+ require('@/eventBus').default.$emit('network-global-settings-complete');
});
},
methods: {
changeDomainNameState(state) {
this.$store
.dispatch('network/saveDomainNameState', {
- domainState: state,
+ domainState: !!state,
ipVersion: 'IPv4',
})
.then((success) => {
@@ -227,7 +233,7 @@
changeDnsState(state) {
this.$store
.dispatch('network/saveDnsState', {
- dnsState: state,
+ dnsState: !!state,
ipVersion: 'IPv4',
})
.then((message) => {
@@ -238,7 +244,7 @@
changeNtpState(state) {
this.$store
.dispatch('network/saveNtpState', {
- ntpState: state,
+ ntpState: !!state,
ipVersion: 'IPv4',
})
.then((message) => {
@@ -249,7 +255,7 @@
changeDomainNameStateIpv6(state) {
this.$store
.dispatch('network/saveDomainNameState', {
- domainState: state,
+ domainState: !!state,
ipVersion: 'IPv6',
})
.then((success) => {
@@ -260,7 +266,7 @@
changeDnsStateIpv6(state) {
this.$store
.dispatch('network/saveDnsState', {
- dnsState: state,
+ dnsState: !!state,
ipVersion: 'IPv6',
})
.then((message) => {
@@ -271,7 +277,7 @@
changeNtpStateIpv6(state) {
this.$store
.dispatch('network/saveNtpState', {
- ntpState: state,
+ ntpState: !!state,
ipVersion: 'IPv6',
})
.then((message) => {
@@ -280,7 +286,7 @@
.catch(({ message }) => this.errorToast(message));
},
initSettingsModal() {
- this.$bvModal.show('modal-hostname');
+ this.showHostnameModal = true;
},
},
};
diff --git a/src/views/Settings/Network/NetworkInterfaceSettings.vue b/src/views/Settings/Network/NetworkInterfaceSettings.vue
index ea83757..18f4868 100644
--- a/src/views/Settings/Network/NetworkInterfaceSettings.vue
+++ b/src/views/Settings/Network/NetworkInterfaceSettings.vue
@@ -63,6 +63,7 @@
import DataFormatterMixin from '@/components/Mixins/DataFormatterMixin';
import { mapState } from 'vuex';
import { useI18n } from 'vue-i18n';
+import { useModal } from 'bootstrap-vue-next';
export default {
name: 'Ipv4Table',
@@ -77,6 +78,10 @@
default: 0,
},
},
+ setup() {
+ const bvModal = useModal();
+ return { bvModal };
+ },
data() {
return {
$t: useI18n().t,
@@ -85,6 +90,7 @@
linkSpeed: '',
fqdn: '',
macAddress: '',
+ showMacAddressModal: false,
};
},
computed: {
@@ -100,7 +106,9 @@
this.getSettings();
this.$store.dispatch('network/getEthernetData').finally(() => {
// Emit initial data fetch complete to parent component
- this.$root.$emit('network-interface-settings-complete');
+ require('@/eventBus').default.$emit(
+ 'network-interface-settings-complete',
+ );
});
},
methods: {
@@ -112,7 +120,7 @@
this.macAddress = this.ethernetData[this.selectedInterface].MACAddress;
},
initMacAddressModal() {
- this.$bvModal.show('modal-mac-address');
+ this.showMacAddressModal = true;
},
},
};
diff --git a/src/views/Settings/Network/TableDns.vue b/src/views/Settings/Network/TableDns.vue
index b0e5d80..e78234b 100644
--- a/src/views/Settings/Network/TableDns.vue
+++ b/src/views/Settings/Network/TableDns.vue
@@ -2,7 +2,7 @@
<page-section :section-title="$t('pageNetwork.staticDns')">
<b-row>
<b-col lg="6">
- <div class="text-right">
+ <div class="text-end">
<b-button variant="primary" @click="initDnsModal()">
<icon-add />
{{ $t('pageNetwork.table.addDnsAddress') }}
@@ -11,6 +11,7 @@
<b-table
responsive="md"
hover
+ thead-class="table-light"
:fields="dnsTableFields"
:items="form.dnsStaticTableItems"
:empty-text="$t('global.table.emptyMessage')"
@@ -36,6 +37,7 @@
</b-col>
</b-row>
</page-section>
+ <modal-dns v-model="showDnsModal" />
</template>
<script>
@@ -45,9 +47,11 @@
import IconTrashcan from '@carbon/icons-vue/es/trash-can/20';
import PageSection from '@/components/Global/PageSection';
import TableRowAction from '@/components/Global/TableRowAction';
+import ModalDns from './ModalDns.vue';
import { mapState } from 'vuex';
import { useI18n } from 'vue-i18n';
import i18n from '@/i18n';
+import { useModal } from 'bootstrap-vue-next';
export default {
name: 'DNSTable',
@@ -57,6 +61,7 @@
IconTrashcan,
PageSection,
TableRowAction,
+ ModalDns,
},
mixins: [BVToastMixin],
props: {
@@ -65,12 +70,17 @@
default: 0,
},
},
+ setup() {
+ const bvModal = useModal();
+ return { bvModal };
+ },
data() {
return {
$t: useI18n().t,
form: {
dnsStaticTableItems: [],
},
+ showDnsModal: false,
actions: [
{
value: 'edit',
@@ -86,7 +96,7 @@
key: 'address',
label: i18n.global.t('pageNetwork.table.ipAddress'),
},
- { key: 'actions', label: '', tdClass: 'text-right' },
+ { key: 'actions', label: '', tdClass: 'text-end' },
],
};
},
@@ -106,7 +116,7 @@
this.getStaticDnsItems();
this.$store.dispatch('network/getEthernetData').finally(() => {
// Emit initial data fetch complete to parent component
- this.$root.$emit('network-table-dns-complete');
+ require('@/eventBus').default.$emit('network-table-dns-complete');
});
},
methods: {
@@ -141,7 +151,7 @@
.catch(({ message }) => this.errorToast(message));
},
initDnsModal() {
- this.$bvModal.show('modal-dns');
+ this.showDnsModal = true;
},
},
};
diff --git a/src/views/Settings/Network/TableIpv4.vue b/src/views/Settings/Network/TableIpv4.vue
index b95e7d3..994990c 100644
--- a/src/views/Settings/Network/TableIpv4.vue
+++ b/src/views/Settings/Network/TableIpv4.vue
@@ -27,7 +27,7 @@
{{ $t('pageNetwork.ipv4Addresses') }}
</h3>
</b-col>
- <b-col class="text-right">
+ <b-col class="text-end">
<b-button variant="primary" @click="initAddIpv4Address()">
<icon-add />
{{ $t('pageNetwork.table.addIpv4Address') }}
@@ -37,6 +37,7 @@
<b-table
responsive="md"
hover
+ thead-class="table-light"
:fields="ipv4TableFields"
:items="form.ipv4TableItems"
:empty-text="$t('global.table.emptyMessage')"
@@ -59,6 +60,7 @@
</table-row-action>
</template>
</b-table>
+ <modal-ipv4 v-model="showAddIpv4" />
</page-section>
</template>
@@ -70,9 +72,11 @@
import LoadingBarMixin from '@/components/Mixins/LoadingBarMixin';
import PageSection from '@/components/Global/PageSection';
import TableRowAction from '@/components/Global/TableRowAction';
+import ModalIpv4 from './ModalIpv4.vue';
import { mapState } from 'vuex';
import { useI18n } from 'vue-i18n';
import i18n from '@/i18n';
+import { useModal } from 'bootstrap-vue-next';
export default {
name: 'Ipv4Table',
@@ -82,6 +86,7 @@
IconTrashcan,
PageSection,
TableRowAction,
+ ModalIpv4,
},
mixins: [BVToastMixin, LoadingBarMixin],
props: {
@@ -90,9 +95,14 @@
default: 0,
},
},
+ setup() {
+ const bvModal = useModal();
+ return { bvModal };
+ },
data() {
return {
$t: useI18n().t,
+ showAddIpv4: false,
form: {
ipv4TableItems: [],
},
@@ -123,7 +133,7 @@
key: 'AddressOrigin',
label: i18n.global.t('pageNetwork.table.addressOrigin'),
},
- { key: 'actions', label: '', tdClass: 'text-right' },
+ { key: 'actions', label: '', tdClass: 'text-end' },
],
};
},
@@ -165,7 +175,7 @@
this.getIpv4TableItems();
this.$store.dispatch('network/getEthernetData').finally(() => {
// Emit initial data fetch complete to parent component
- this.$root.$emit('network-table-ipv4-complete');
+ require('@/eventBus').default.$emit('network-table-ipv4-complete');
});
},
methods: {
@@ -208,39 +218,39 @@
.catch(({ message }) => this.errorToast(message));
},
initAddIpv4Address() {
- this.$bvModal.show('modal-add-ipv4');
+ this.showAddIpv4 = true;
},
changeDhcpEnabledState(state) {
- this.$bvModal
- .msgBoxConfirm(
- state
- ? i18n.global.t('pageNetwork.modal.confirmEnableDhcp')
- : i18n.global.t('pageNetwork.modal.confirmDisableDhcp'),
- {
- title: i18n.global.t('pageNetwork.modal.dhcpConfirmTitle', {
- dhcpState: state
- ? i18n.global.t('global.action.enable')
- : i18n.global.t('global.action.disable'),
- }),
- okTitle: state
- ? i18n.global.t('global.action.enable')
- : i18n.global.t('global.action.disable'),
- okVariant: 'danger',
- cancelTitle: i18n.global.t('global.action.cancel'),
- autoFocusButton: 'cancel',
- },
- )
- .then((dhcpEnableConfirmed) => {
- if (dhcpEnableConfirmed) {
- this.$store
- .dispatch('network/saveDhcpEnabledState', state)
- .then((message) => this.successToast(message))
- .catch(({ message }) => this.errorToast(message));
- } else {
- let onDhcpCancel = document.getElementById('dhcpSwitch');
- onDhcpCancel.checked = !state;
- }
- });
+ const dhcpState = state
+ ? i18n.global.t('global.action.enable')
+ : i18n.global.t('global.action.disable');
+ this.confirmDialog(
+ state
+ ? i18n.global.t('pageNetwork.modal.confirmEnableDhcp')
+ : i18n.global.t('pageNetwork.modal.confirmDisableDhcp'),
+ {
+ title: i18n.global.t('pageNetwork.modal.dhcpConfirmTitle', {
+ dhcpState,
+ }),
+ okTitle: dhcpState,
+ okVariant: 'danger',
+ cancelTitle: i18n.global.t('global.action.cancel'),
+ autoFocusButton: 'cancel',
+ },
+ ).then((dhcpEnableConfirmed) => {
+ if (dhcpEnableConfirmed) {
+ this.$store
+ .dispatch('network/saveDhcpEnabledState', state)
+ .then((message) => this.successToast(message))
+ .catch(({ message }) => this.errorToast(message));
+ } else {
+ let onDhcpCancel = document.getElementById('dhcpSwitch');
+ onDhcpCancel.checked = !state;
+ }
+ });
+ },
+ confirmDialog(message, options = {}) {
+ return this.$confirm({ message, ...options });
},
},
};
diff --git a/src/views/Settings/Network/TableIpv6.vue b/src/views/Settings/Network/TableIpv6.vue
index bdebc27..bf2e6e1 100644
--- a/src/views/Settings/Network/TableIpv6.vue
+++ b/src/views/Settings/Network/TableIpv6.vue
@@ -47,7 +47,7 @@
{{ $t('pageNetwork.ipv6Addresses') }}
</h3>
</b-col>
- <b-col class="text-right">
+ <b-col class="text-end">
<b-button variant="primary" @click="initAddIpv6Address()">
<icon-add />
{{ $t('pageNetwork.table.addIpv6Address') }}
@@ -57,6 +57,7 @@
<b-table
responsive="md"
hover
+ thead-class="table-light"
:fields="ipv6TableFields"
:items="form.ipv6TableItems"
:empty-text="$t('global.table.emptyMessage')"
@@ -79,6 +80,7 @@
</table-row-action>
</template>
</b-table>
+ <modal-ipv6 v-model="showAddIpv6" />
</page-section>
</template>
@@ -91,9 +93,11 @@
import PageSection from '@/components/Global/PageSection';
import TableRowAction from '@/components/Global/TableRowAction';
import DataFormatterMixin from '@/components/Mixins/DataFormatterMixin';
+import ModalIpv6 from './ModalIpv6.vue';
import { mapState } from 'vuex';
import i18n from '@/i18n';
import { useI18n } from 'vue-i18n';
+import { useModal } from 'bootstrap-vue-next';
export default {
name: 'Ipv6Table',
@@ -103,6 +107,7 @@
IconTrashcan,
PageSection,
TableRowAction,
+ ModalIpv6,
},
mixins: [BVToastMixin, LoadingBarMixin, DataFormatterMixin],
props: {
@@ -111,9 +116,15 @@
default: 0,
},
},
+ setup() {
+ const bvModal = useModal();
+ return { bvModal };
+ },
data() {
return {
$t: useI18n().t,
+ showAddIpv6: false,
+ showDefaultGatewayModal: false,
form: {
ipv6TableItems: [],
},
@@ -140,7 +151,7 @@
key: 'AddressOrigin',
label: i18n.global.t('pageNetwork.table.addressOrigin'),
},
- { key: 'actions', label: '', tdClass: 'text-right' },
+ { key: 'actions', label: '', tdClass: 'text-end' },
],
defaultGateway: '',
defaultGatewayEditable:
@@ -190,7 +201,7 @@
this.getDefaultGateway();
this.$store.dispatch('network/getEthernetData').finally(() => {
// Emit initial data fetch complete to parent component
- this.$root.$emit('network-table-ipv6-complete');
+ require('@/eventBus').default.$emit('network-table-ipv6-complete');
});
},
methods: {
@@ -251,41 +262,42 @@
.catch(({ message }) => this.errorToast(message));
},
initAddIpv6Address() {
- this.$bvModal.show('modal-add-ipv6');
+ this.showAddIpv6 = true;
},
changeDhcp6EnabledState(state) {
- this.$bvModal
- .msgBoxConfirm(
- state
- ? i18n.global.t('pageNetwork.modal.confirmEnableDhcp')
- : i18n.global.t('pageNetwork.modal.confirmDisableDhcp'),
- {
- title: i18n.global.t('pageNetwork.modal.dhcpConfirmTitle', {
- dhcpState: state
- ? i18n.global.t('global.action.enable')
- : i18n.global.t('global.action.disable'),
- }),
- okTitle: state
- ? i18n.global.t('global.action.enable')
- : i18n.global.t('global.action.disable'),
- okVariant: 'danger',
- cancelTitle: i18n.global.t('global.action.cancel'),
- },
- )
- .then((dhcpEnableConfirmed) => {
- if (dhcpEnableConfirmed) {
- this.$store
- .dispatch('network/saveDhcp6EnabledState', state)
- .then((message) => this.successToast(message))
- .catch(({ message }) => this.errorToast(message));
- } else {
- let onDhcpCancel = document.getElementById('dhcp6Switch');
- onDhcpCancel.checked = !state;
- }
- });
+ const dhcpState = state
+ ? i18n.global.t('global.action.enable')
+ : i18n.global.t('global.action.disable');
+ this.confirmDialog(
+ state
+ ? i18n.global.t('pageNetwork.modal.confirmEnableDhcp')
+ : i18n.global.t('pageNetwork.modal.confirmDisableDhcp'),
+ {
+ title: i18n.global.t('pageNetwork.modal.dhcpConfirmTitle', {
+ dhcpState,
+ }),
+ okTitle: dhcpState,
+ okVariant: 'danger',
+ cancelTitle: i18n.global.t('global.action.cancel'),
+ autoFocusButton: 'cancel',
+ },
+ ).then((dhcpEnableConfirmed) => {
+ if (dhcpEnableConfirmed) {
+ this.$store
+ .dispatch('network/saveDhcp6EnabledState', state)
+ .then((message) => this.successToast(message))
+ .catch(({ message }) => this.errorToast(message));
+ } else {
+ let onDhcpCancel = document.getElementById('dhcp6Switch');
+ onDhcpCancel.checked = !state;
+ }
+ });
+ },
+ confirmDialog(message, options = {}) {
+ return this.$confirm({ message, ...options });
},
initDefaultGatewayModal() {
- this.$bvModal.show('modal-default-gateway');
+ this.showDefaultGatewayModal = true;
},
},
};
diff --git a/src/views/Settings/SnmpAlerts/ModalAddDestination.vue b/src/views/Settings/SnmpAlerts/ModalAddDestination.vue
index 5eef381..38b1ced 100644
--- a/src/views/Settings/SnmpAlerts/ModalAddDestination.vue
+++ b/src/views/Settings/SnmpAlerts/ModalAddDestination.vue
@@ -1,8 +1,11 @@
<template>
- <b-modal id="add-destination" ref="modal" @ok="onOk" @hidden="resetForm">
- <template #modal-title>
- {{ $t('pageSnmpAlerts.modal.addSnmpDestinationTitle') }}
- </template>
+ <b-modal
+ id="add-destination"
+ ref="modal"
+ :title="$t('pageSnmpAlerts.modal.addSnmpDestinationTitle')"
+ @ok="onOk"
+ @hidden="resetForm"
+ >
<b-form id="form-destination">
<b-container>
<b-row>
@@ -64,7 +67,7 @@
</b-row>
</b-container>
</b-form>
- <template #modal-footer="{ cancel }">
+ <template #footer="{ cancel }">
<b-button variant="secondary" @click="cancel()">
{{ $t('global.action.cancel') }}
</b-button>
diff --git a/src/views/Settings/SnmpAlerts/SnmpAlerts.vue b/src/views/Settings/SnmpAlerts/SnmpAlerts.vue
index d18ea75..7dba367 100644
--- a/src/views/Settings/SnmpAlerts/SnmpAlerts.vue
+++ b/src/views/Settings/SnmpAlerts/SnmpAlerts.vue
@@ -2,7 +2,7 @@
<b-container fluid="xl">
<page-title :description="$t('pageSnmpAlerts.pageDescription')" />
<b-row>
- <b-col xl="9" class="text-right">
+ <b-col xl="9" class="text-end">
<b-button variant="primary" @click="initModalAddDestination">
<icon-add />
{{ $t('pageSnmpAlerts.addDestination') }}
@@ -13,7 +13,9 @@
<b-col xl="9">
<table-toolbar
ref="toolbar"
- :selected-items-count="selectedRows.length"
+ :selected-items-count="
+ Array.isArray(selectedRows) ? selectedRows.length : 0
+ "
:actions="tableToolbarActions"
@clear-selected="clearSelectedRows($refs.table)"
@batch-action="onBatchAction"
@@ -25,6 +27,7 @@
show-empty
no-select-on-click
hover
+ thead-class="table-light"
:fields="fields"
:items="tableItems"
:empty-text="$t('global.table.emptyMessage')"
@@ -36,9 +39,11 @@
v-model="tableHeaderCheckboxModel"
data-test-id="snmpAlerts-checkbox-selectAll"
:indeterminate="tableHeaderCheckboxIndeterminate"
- @change="onChangeHeaderCheckbox($refs.table)"
+ @change="onChangeHeaderCheckbox($refs.table, $event)"
>
- <span class="sr-only">{{ $t('global.table.selectAll') }}</span>
+ <span class="visually-hidden-focusable">
+ {{ $t('global.table.selectAll') }}
+ </span>
</b-form-checkbox>
</template>
<template #cell(checkbox)="row">
@@ -47,7 +52,9 @@
:data-test-id="`snmpAlerts-checkbox-selectRow-${row.index}`"
@change="toggleSelectRow($refs.table, row.index)"
>
- <span class="sr-only">{{ $t('global.table.selectItem') }}</span>
+ <span class="visually-hidden-focusable">
+ {{ $t('global.table.selectItem') }}
+ </span>
</b-form-checkbox>
</template>
@@ -71,7 +78,7 @@
</b-col>
</b-row>
<!-- Modals -->
- <modal-add-destination @ok="onModalOk" />
+ <modal-add-destination v-model="showAddDestination" @ok="onModalOk" />
</b-container>
</template>
@@ -84,6 +91,7 @@
import TableRowAction from '@/components/Global/TableRowAction';
import LoadingBarMixin from '@/components/Mixins/LoadingBarMixin';
import BVToastMixin from '@/components/Mixins/BVToastMixin';
+import { useModal } from 'bootstrap-vue-next';
import BVTableSelectableMixin, {
selectedRows,
@@ -108,9 +116,14 @@
this.hideLoader();
next();
},
+ setup() {
+ const bvModal = useModal();
+ return { bvModal };
+ },
data() {
return {
$t: useI18n().t,
+ showAddDestination: false,
fields: [
{
key: 'checkbox',
@@ -126,7 +139,7 @@
{
key: 'actions',
label: '',
- tdClass: 'text-right text-nowrap',
+ tdClass: 'text-end text-nowrap',
},
],
tableToolbarActions: [
@@ -201,28 +214,26 @@
.finally(() => this.endLoader());
},
initModalAddDestination() {
- this.$bvModal.show('add-destination');
+ this.showAddDestination = true;
},
initModalDeleteDestination(destination) {
- this.$bvModal
- .msgBoxConfirm(
- i18n.global.t('pageSnmpAlerts.modal.deleteConfirmMessage', {
- destination: destination.id,
- }),
- {
- title: i18n.global.t(
- 'pageSnmpAlerts.modal.deleteSnmpDestinationTitle',
- ),
- okTitle: i18n.global.t('pageSnmpAlerts.deleteDestination'),
- cancelTitle: i18n.global.t('global.action.cancel'),
- autoFocusButton: 'ok',
- },
- )
- .then((deleteConfirmed) => {
- if (deleteConfirmed) {
- this.deleteDestination(destination);
- }
- });
+ this.confirmDialog(
+ i18n.global.t('pageSnmpAlerts.modal.deleteConfirmMessage', {
+ destination: destination.id,
+ }),
+ {
+ title: i18n.global.t(
+ 'pageSnmpAlerts.modal.deleteSnmpDestinationTitle',
+ ),
+ okTitle: i18n.global.t('pageSnmpAlerts.deleteDestination'),
+ cancelTitle: i18n.global.t('global.action.cancel'),
+ autoFocusButton: 'ok',
+ },
+ ).then((deleteConfirmed) => {
+ if (deleteConfirmed) {
+ this.deleteDestination(destination);
+ }
+ });
},
deleteDestination({ id }) {
this.startLoader();
@@ -234,44 +245,43 @@
},
onBatchAction(action) {
if (action === 'delete') {
- this.$bvModal
- .msgBoxConfirm(
- i18n.global.t(
- 'pageSnmpAlerts.modal.batchDeleteConfirmMessage',
- this.selectedRows.length,
+ const count = this.selectedRows.length;
+ this.confirmDialog(
+ i18n.global.t(
+ 'pageSnmpAlerts.modal.batchDeleteConfirmMessage',
+ count,
+ ),
+ {
+ title: i18n.global.t(
+ 'pageSnmpAlerts.modal.deleteSnmpDestinationTitle',
+ count,
),
- {
- title: i18n.global.t(
- 'pageSnmpAlerts.modal.deleteSnmpDestinationTitle',
- this.selectedRows.length,
- ),
- okTitle: i18n.global.t(
- 'pageSnmpAlerts.deleteDestination',
- this.selectedRows.length,
- ),
- cancelTitle: i18n.global.t('global.action.cancel'),
- autoFocusButton: 'ok',
- },
- )
- .then((deleteConfirmed) => {
- if (deleteConfirmed) {
- this.startLoader();
- this.$store
- .dispatch(
- 'snmpAlerts/deleteMultipleDestinations',
- this.selectedRows,
- )
- .then((messages) => {
- messages.forEach(({ type, message }) => {
- if (type === 'success') this.successToast(message);
- if (type === 'error') this.errorToast(message);
- });
- })
- .finally(() => this.endLoader());
- }
- });
+ okTitle: i18n.global.t('pageSnmpAlerts.deleteDestination', count),
+ cancelTitle: i18n.global.t('global.action.cancel'),
+ autoFocusButton: 'ok',
+ },
+ ).then((deleteConfirmed) => {
+ if (deleteConfirmed) {
+ this.startLoader();
+ this.$store
+ .dispatch(
+ 'snmpAlerts/deleteMultipleDestinations',
+ this.selectedRows,
+ )
+ .then((messages) => {
+ messages.forEach(({ type, message }) => {
+ if (type === 'success') this.successToast(message);
+ if (type === 'error') this.errorToast(message);
+ });
+ })
+ .finally(() => this.endLoader());
+ }
+ });
}
},
+ confirmDialog(message, options = {}) {
+ return this.$confirm({ message, ...options });
+ },
onTableRowAction(action, row) {
if (action === 'delete') {
this.initModalDeleteDestination(row);