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/Overview/Overview.vue b/src/views/Overview/Overview.vue
index 2bf4205..1d64dff 100644
--- a/src/views/Overview/Overview.vue
+++ b/src/views/Overview/Overview.vue
@@ -6,21 +6,35 @@
:section-title="$t('pageOverview.systemInformation')"
class="mb-1"
>
- <b-card-group deck>
- <overview-server />
- <overview-firmware />
- </b-card-group>
- <b-card-group deck>
- <overview-network />
- <overview-power />
- </b-card-group>
+ <b-row class="row-cols-1 row-cols-md-2">
+ <b-col class="mb-3">
+ <overview-server class="h-100" />
+ </b-col>
+ <b-col class="mb-3">
+ <overview-firmware class="h-100" />
+ </b-col>
+ </b-row>
+ <b-row class="row-cols-1 row-cols-md-2">
+ <b-col class="mb-3">
+ <overview-network class="h-100" />
+ </b-col>
+ <b-col class="mb-3">
+ <overview-power class="h-100" />
+ </b-col>
+ </b-row>
</page-section>
<page-section :section-title="$t('pageOverview.statusInformation')">
- <b-card-group deck>
- <overview-events />
- <overview-inventory />
- <overview-dumps v-if="showDumps" />
- </b-card-group>
+ <b-row class="row-cols-1 row-cols-md-2">
+ <b-col class="mb-3">
+ <overview-events class="h-100" />
+ </b-col>
+ <b-col class="mb-3">
+ <overview-inventory class="h-100" />
+ </b-col>
+ <b-col v-if="showDumps" class="mb-3">
+ <overview-dumps class="h-100" />
+ </b-col>
+ </b-row>
</page-section>
</b-container>
</template>
@@ -58,33 +72,59 @@
return {
$t: useI18n().t,
showDumps: process.env.VUE_APP_ENV_NAME === 'ibm',
+ // Promise resolvers
+ dumpsResolver: null,
+ eventsResolver: null,
+ selResolver: null,
+ firmwareResolver: null,
+ inventoryResolver: null,
+ networkResolver: null,
+ powerResolver: null,
+ quicklinksResolver: null,
+ serverResolver: null,
};
},
created() {
this.startLoader();
+
const dumpsPromise = new Promise((resolve) => {
- this.$root.$on('overview-dumps-complete', () => resolve());
+ this.dumpsResolver = resolve;
+ this.$eventBus.on('overview-dumps-complete', () => resolve());
});
+
const eventsPromise = new Promise((resolve) => {
- this.$root.$on('overview-events-complete', () => resolve());
+ this.eventsResolver = resolve;
+ this.$eventBus.on('overview-events-complete', () => resolve());
});
+
const firmwarePromise = new Promise((resolve) => {
- this.$root.$on('overview-firmware-complete', () => resolve());
+ this.firmwareResolver = resolve;
+ this.$eventBus.on('overview-firmware-complete', () => resolve());
});
+
const inventoryPromise = new Promise((resolve) => {
- this.$root.$on('overview-inventory-complete', () => resolve());
+ this.inventoryResolver = resolve;
+ this.$eventBus.on('overview-inventory-complete', () => resolve());
});
+
const networkPromise = new Promise((resolve) => {
- this.$root.$on('overview-network-complete', () => resolve());
+ this.networkResolver = resolve;
+ this.$eventBus.on('overview-network-complete', () => resolve());
});
+
const powerPromise = new Promise((resolve) => {
- this.$root.$on('overview-power-complete', () => resolve());
+ this.powerResolver = resolve;
+ this.$eventBus.on('overview-power-complete', () => resolve());
});
+
const quicklinksPromise = new Promise((resolve) => {
- this.$root.$on('overview-quicklinks-complete', () => resolve());
+ this.quicklinksResolver = resolve;
+ this.$eventBus.on('overview-quicklinks-complete', () => resolve());
});
+
const serverPromise = new Promise((resolve) => {
- this.$root.$on('overview-server-complete', () => resolve());
+ this.serverResolver = resolve;
+ this.$eventBus.on('overview-server-complete', () => resolve());
});
const promises = [
@@ -97,7 +137,59 @@
serverPromise,
];
if (this.showDumps) promises.push(dumpsPromise);
- Promise.all(promises).finally(() => this.endLoader());
+ Promise.all(promises).finally(() => {
+ this.endLoader();
+ });
+ },
+ beforeUnmount() {
+ // Clean up event listeners
+ this.$eventBus.off('overview-dumps-complete', this.handleDumpsComplete);
+ this.$eventBus.off('overview-events-complete', this.handleEventsComplete);
+ this.$eventBus.off('overview-sel-complete', this.handleSelComplete);
+ this.$eventBus.off(
+ 'overview-firmware-complete',
+ this.handleFirmwareComplete,
+ );
+ this.$eventBus.off(
+ 'overview-inventory-complete',
+ this.handleInventoryComplete,
+ );
+ this.$eventBus.off('overview-network-complete', this.handleNetworkComplete);
+ this.$eventBus.off('overview-power-complete', this.handlePowerComplete);
+ this.$eventBus.off(
+ 'overview-quicklinks-complete',
+ this.handleQuicklinksComplete,
+ );
+ this.$eventBus.off('overview-server-complete', this.handleServerComplete);
+ },
+ methods: {
+ handleDumpsComplete() {
+ if (this.dumpsResolver) this.dumpsResolver();
+ },
+ handleEventsComplete() {
+ if (this.eventsResolver) this.eventsResolver();
+ },
+ handleSelComplete() {
+ if (this.selResolver) this.selResolver();
+ },
+ handleFirmwareComplete() {
+ if (this.firmwareResolver) this.firmwareResolver();
+ },
+ handleInventoryComplete() {
+ if (this.inventoryResolver) this.inventoryResolver();
+ },
+ handleNetworkComplete() {
+ if (this.networkResolver) this.networkResolver();
+ },
+ handlePowerComplete() {
+ if (this.powerResolver) this.powerResolver();
+ },
+ handleQuicklinksComplete() {
+ if (this.quicklinksResolver) this.quicklinksResolver();
+ },
+ handleServerComplete() {
+ if (this.serverResolver) this.serverResolver();
+ },
},
};
</script>
diff --git a/src/views/Overview/OverviewCard.vue b/src/views/Overview/OverviewCard.vue
index 7cfe558..d6955b6 100644
--- a/src/views/Overview/OverviewCard.vue
+++ b/src/views/Overview/OverviewCard.vue
@@ -14,7 +14,7 @@
<span v-if="downloadButton">{{ $t('global.action.download') }}</span>
<span v-if="exportButton">{{ $t('global.action.exportAll') }}</span>
</b-button>
- <span v-if="exportButton || downloadButton" class="pl-2 pr-2">|</span>
+ <span v-if="exportButton || downloadButton" class="ps-2 pe-2">|</span>
<b-link :to="to">{{ $t('pageOverview.viewMore') }}</b-link>
</div>
</div>
diff --git a/src/views/Overview/OverviewDumps.vue b/src/views/Overview/OverviewDumps.vue
index ba7d7e2..abdaf47 100644
--- a/src/views/Overview/OverviewDumps.vue
+++ b/src/views/Overview/OverviewDumps.vue
@@ -41,7 +41,7 @@
},
created() {
this.$store.dispatch('dumps/getAllDumps').finally(() => {
- this.$root.$emit('overview-dumps-complete');
+ this.$eventBus.$emit('overview-dumps-complete');
});
},
methods: {
diff --git a/src/views/Overview/OverviewEvents.vue b/src/views/Overview/OverviewEvents.vue
index 147f30c..65ac0ea 100644
--- a/src/views/Overview/OverviewEvents.vue
+++ b/src/views/Overview/OverviewEvents.vue
@@ -72,7 +72,7 @@
},
created() {
this.$store.dispatch('eventLog/getEventLogData').finally(() => {
- this.$root.$emit('overview-events-complete');
+ this.$eventBus.$emit('overview-events-complete');
});
},
methods: {
diff --git a/src/views/Overview/OverviewFirmware.vue b/src/views/Overview/OverviewFirmware.vue
index 0be920f..0b58a6c 100644
--- a/src/views/Overview/OverviewFirmware.vue
+++ b/src/views/Overview/OverviewFirmware.vue
@@ -61,7 +61,7 @@
},
created() {
this.$store.dispatch('firmware/getFirmwareInformation').finally(() => {
- this.$root.$emit('overview-firmware-complete');
+ this.$eventBus.$emit('overview-firmware-complete');
});
},
};
diff --git a/src/views/Overview/OverviewInventory.vue b/src/views/Overview/OverviewInventory.vue
index 4d923e1..0c92b8e 100644
--- a/src/views/Overview/OverviewInventory.vue
+++ b/src/views/Overview/OverviewInventory.vue
@@ -51,7 +51,7 @@
},
created() {
this.$store.dispatch('system/getSystem').finally(() => {
- this.$root.$emit('overview-inventory-complete');
+ this.$eventBus.$emit('overview-inventory-complete');
});
},
methods: {
diff --git a/src/views/Overview/OverviewNetwork.vue b/src/views/Overview/OverviewNetwork.vue
index c2a7693..63f5533 100644
--- a/src/views/Overview/OverviewNetwork.vue
+++ b/src/views/Overview/OverviewNetwork.vue
@@ -70,7 +70,7 @@
},
created() {
this.$store.dispatch('network/getEthernetData').finally(() => {
- this.$root.$emit('overview-network-complete');
+ this.$eventBus.$emit('overview-network-complete');
});
},
};
diff --git a/src/views/Overview/OverviewPower.vue b/src/views/Overview/OverviewPower.vue
index 74a737e..1d3d4a0 100644
--- a/src/views/Overview/OverviewPower.vue
+++ b/src/views/Overview/OverviewPower.vue
@@ -47,7 +47,7 @@
},
created() {
this.$store.dispatch('powerControl/getPowerControl').finally(() => {
- this.$root.$emit('overview-power-complete');
+ this.$eventBus.$emit('overview-power-complete');
});
},
};
diff --git a/src/views/Overview/OverviewQuickLinks.vue b/src/views/Overview/OverviewQuickLinks.vue
index abcf9fa..f50e7b2 100644
--- a/src/views/Overview/OverviewQuickLinks.vue
+++ b/src/views/Overview/OverviewQuickLinks.vue
@@ -49,7 +49,7 @@
},
created() {
Promise.all([this.$store.dispatch('global/getBmcTime')]).finally(() => {
- this.$root.$emit('overview-quicklinks-complete');
+ this.$eventBus.$emit('overview-quicklinks-complete');
});
},
};
diff --git a/src/views/Overview/OverviewServer.vue b/src/views/Overview/OverviewServer.vue
index fe0e41d..b9eda24 100644
--- a/src/views/Overview/OverviewServer.vue
+++ b/src/views/Overview/OverviewServer.vue
@@ -55,7 +55,7 @@
},
created() {
this.$store.dispatch('system/getSystem').finally(() => {
- this.$root.$emit('overview-server-complete');
+ this.$eventBus.$emit('overview-server-complete');
});
},
};