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 mi

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>

show more ...

style: add Sass configuration for Vue 3

Configure sass in the vue.config.js file and remove the
import of the scss file from each page. The styles are
handled by the css loaderOptions in the config

style: add Sass configuration for Vue 3

Configure sass in the vue.config.js file and remove the
import of the scss file from each page. The styles are
handled by the css loaderOptions in the config file.
Every component and page has the appropriate style applied.
The appearance adjusts to the openBmc webui in Vue 2.

Change-Id: I3773c063646185b80b7bd61d05aa80a993cbd121
Signed-off-by: Surya Venkatesan <suryav@ami.com>

show more ...

[RFC] add Dumps page to navigation

The functionality of initiating and displaying dumps is not enabled by
default in bmcweb but it's used by at least Facebook, Fii and IBM. While
IBM has their own o

[RFC] add Dumps page to navigation

The functionality of initiating and displaying dumps is not enabled by
default in bmcweb but it's used by at least Facebook, Fii and IBM. While
IBM has their own overview page and router code which makes it
accessible the others do not.

I do not know what the policy should be about exposing features like
that, please comment. Guess ideally webui should discover available
features on startup and add to the menu dynamically, any takers?

Change-Id: I9c85ecaba009547c69166c5cbaba62a005d75f48
Signed-off-by: Paul Fertser <fercerpav@gmail.com>

show more ...

i18n, vue-router and vuex upgrade

1. Configuration of i18n legacy as false.
2. Translation function t is called using the useI18n.
3. Used the i18n.global.t() function from i18n instead of this.$t()

i18n, vue-router and vuex upgrade

1. Configuration of i18n legacy as false.
2. Translation function t is called using the useI18n.
3. Used the i18n.global.t() function from i18n instead of this.$t()
4. Event bus error that occurred during logout.
5. Implemented vue-router 4.4.0 and vuex upgrade to 4.1.0

Change-Id: I9464d82c76dcc1445ce271983ea3ab9d7b03d265
Signed-off-by: Surya Venkatesan <suryav@ami.com>

show more ...

Upgrade vue3 and all dependencies

Start the process of porting everything to Vue 3. I have most things
working. npm run-scripts build works, npm install works. prettier
passes. Styles load, logi

Upgrade vue3 and all dependencies

Start the process of porting everything to Vue 3. I have most things
working. npm run-scripts build works, npm install works. prettier
passes. Styles load, login works, webui loads.

This was primarily done using the linked documents below. It makes the
following design decisions:
1. Vue is put in compat 2 mode, which allows most of the components to
work as-is.
2. Bootstrap v4 is used along with bootstrap-vue to keep our components
working.
3. Minor changes are made to load the latest versions of vue-router,
vuex, and vue-i18n.

I suspect this patchset is good enough to start with, and we can clean
up the broken things one patchset at a time. The things that need to
happen are:

1. Get remaining features working again. This primiarily is vue-i18n
for mixins, and non vue components. This likely needs to be done by
not pulling in i18n into the non vue components, then using the .Vue
files to do the internationalization in the component context, NOT in
the mixin context. Alternatively, we could drop MixIns alltogether.
2. Get custom styles working again. Previously, we used some path
hackery in vue.config.js to optionally pre-load styles. This stops
working now that we're required to @import our modules. Likely we
need some rearangement of the paths such that custom styles are a
complete replacement (possibly importing the original) rather than
additive with overrides. That's a guess, but I don't really see
anyone else doing customization the way we've defined it here.
3. Bootstrap 5 no longer requires ANY custom vue modules, as it has
dropped the jquery dependency. We won't be able to pull in bootstrap
5 all at once, so pull in bootstrap 5 under an alias, like
"bootstrap5" that we can optionally import 5 or 4.
4. One at a time, start porting components over to Vue3 syntax and
bootstrap 5. This will be the bulk of the manual work and review.

The only thing I think left is getting unit tests passing, which I
commented out the pre-commit hook to make this PR.

Tested: Code builds. Needs better testing.

[1] https://router.vuejs.org/guide/migration/
[2] https://vue-i18n.intlify.dev/guide/migration/vue3
[3] https://vuelidate-next.netlify.app/migration_guide.html#package-name-and-imports

Change-Id: I5bb3187b9efbf2e4ff63e57994bc528756e2a981
Signed-off-by: Ed Tanous <ed@tanous.net>

show more ...

Add SNMP alerts page and test hooks

This page will be included in Configuration section of the primary
navigation. The user will be able to delete and add alert destination.

Change-Id: I396d19a54ea

Add SNMP alerts page and test hooks

This page will be included in Configuration section of the primary
navigation. The user will be able to delete and add alert destination.

Change-Id: I396d19a54ea11724f2c5aec67e20ba9abff947d3
Signed-off-by: Konstantin Aladyshev <aladyshev22@gmail.com>

show more ...

Added route restrictions based on user privilege

This commit allows us to add 'exclusiveToRoles' field to
route config files, with the list of roles that can access
this resource, if needed. In this

Added route restrictions based on user privilege

This commit allows us to add 'exclusiveToRoles' field to
route config files, with the list of roles that can access
this resource, if needed. In this case, only Administrator
can access Virtual-Media page and SOL console, and it is blocked for other
users.

Signed-off-by: Sivaprabu Ganesan <sivaprabug@ami.com>
Change-Id: Ibcee18bd92d97c34414ecaf2caf6af28070c5538

show more ...

Add Key clear page under Operations section

This page will allow privileged user to clear encrypted keys.
- Only admin and CE login user will be able to see the page
- The UI will be different for b

Add Key clear page under Operations section

This page will allow privileged user to clear encrypted keys.
- Only admin and CE login user will be able to see the page
- The UI will be different for both, admin and CE login user(service)
- This page is IBM only

Signed-off-by: Sandeepa Singh <sandeepa.singh@ibm.com>
Change-Id: Ic6fe3454de815629a6b2250daa99ab21f2b316c3

show more ...

IA update: Add resource management section

This is the sixth commit for information architecture changes and has
the following changes:

- Resource management section has been added
- Carbon icon us

IA update: Add resource management section

This is the sixth commit for information architecture changes and has
the following changes:

- Resource management section has been added
- Carbon icon used for resource management section is data--base--alt
- Manage power usage page from operations has been moved to
resource management
- Manage power usage page has been updated to power page

Signed-off-by: Sandeepa Singh <sandeepa.singh@ibm.com>
Change-Id: If3feb994dbad19dd6cfb1507d976d09643c8e4d6

show more ...

IA update: Update access and control section

This is the fifth commit of the information architecture changes and
has the following changes:

- The icon for access and control has been updated
- Acc

IA update: Update access and control section

This is the fifth commit of the information architecture changes and
has the following changes:

- The icon for access and control has been updated
- Access and control section has been updated to security and
access section
- Security settings page has been updated to policies page and moved to
security and access section
- Client sessions page has been updated to sessions page
- Local user management page has been updated to user management page
- SSL certificates page has been updated to certificates page

Signed-off-by: Sandeepa Singh <sandeepa.singh@ibm.com>
Change-Id: Ie93cee9002742ecf7d33615636f4f159f4395fc4

show more ...

IA update: Update configuration to settings

This is the fourth update to information architecture changes and has
the following changes:

- The configuration section is updated to settings
- The dat

IA update: Update configuration to settings

This is the fourth update to information architecture changes and has
the following changes:

- The configuration section is updated to settings
- The date and time settings page is updated to date and time
- The network settings page is updated to network
- The power restore policy page in operations section is moved to
settings section

Signed-off-by: Sandeepa Singh <sandeepa.singh@ibm.com>
Change-Id: I6f5ab25f5227530be430bd39a4d9629b3bf09d8b

show more ...

IA update: Update control section to operations

This is the third update to the information architecture changes and
has the following changes:

- The control section has been updated to operations

IA update: Update control section to operations

This is the third update to the information architecture changes and
has the following changes:

- The control section has been updated to operations
- The server led page has been removed
- The firmware page is moved to operations section

Signed-off-by: Sandeepa Singh <sandeepa.singh@ibm.com>
Change-Id: I2e23da447890d7bee51892e1f782d5f2db6dded4

show more ...

IA update: Update health section

This is the second update to information architecture changes and
has the following changes:

- Health section is updated to hardware status section
- Hardware statu

IA update: Update health section

This is the second update to information architecture changes and
has the following changes:

- Health section is updated to hardware status section
- Hardware status page is updated to inventory and LEDs page
- Route for sensors page has been updated

Signed-off-by: Sandeepa Singh <sandeepa.singh@ibm.com>
Change-Id: Ia1ba3a15a243a00f59a2ec646132436eb355a999

show more ...

IA update: Add logs and update overview icon

This is the first patchset of the information architecture changes.
These changes are the result of several months of design research with
users to impro

IA update: Add logs and update overview icon

This is the first patchset of the information architecture changes.
These changes are the result of several months of design research with
users to improve the existing information architecture (IA). More
information can we found in the Github story.

This patchset will add a Logs section and move event logs and dumps from
the Health section to the new Logs section. It will also update the icon
used for the Overview page.

Github story: https://github.com/openbmc/webui-vue/issues/56

Testing:
1. IBM build:
- Logs contained Event logs and dumps
- Both pages rendered when clicking link
2. Intel build
- Logs contained Event logs only
- Logs page rendered when clicking link
3. Tested default build
- Logs contained Event logs only
- Logs page rendered when clicking link

Signed-off-by: Derick Montague <derick.montague@ibm.com>
Change-Id: I4621837202cf5ad3469d6ea460d9a5bdc79c8816

show more ...

Add POST code logs page

This page will be included in the Health section of the primary
navigation. The user will be able to export and download POST code
logs.

Signed-off-by: Sandeepa Singh <sande

Add POST code logs page

This page will be included in the Health section of the primary
navigation. The user will be able to export and download POST code
logs.

Signed-off-by: Sandeepa Singh <sandeepa.singh@ibm.com>
Change-Id: I26cf1e01bfdfcf298f24f2c7dd9633ab7d31f1b5

show more ...

Add factory reset page

This new page will be included in the Control section of the primary
navigation. The user will be able to choose between two different
reset actions.

The user can make the

Add factory reset page

This new page will be included in the Control section of the primary
navigation. The user will be able to choose between two different
reset actions.

The user can make the following calls:
- /redfish/v1/Systems/system/Bios/Actions/Bios.ResetBios
- /redfish/v1/Managers/bmc/Actions/Manager.ResetToDefaults

Signed-off-by: Derick Montague <derick.montague@ibm.com>
Change-Id: I32a10dbce27a03fb84e24d7eae7c44eef9cffea5

show more ...

Add power restore policy page

- This page will show how the system boots once power
is restored after a power disturbance.

- API used to fetch the JSON:
/redfish/v1/JsonSchemas/ComputerSystem/C

Add power restore policy page

- This page will show how the system boots once power
is restored after a power disturbance.

- API used to fetch the JSON:
/redfish/v1/JsonSchemas/ComputerSystem/ComputerSystem.json
- API used to fetch the current policy and to save updated policy:
/redfish/v1/Systems/system/

Signed-off-by: Sukanya Pandey <sukapan1@in.ibm.com>
Change-Id: I203bd3c5d26071b882cce6b9950cdb3fb1deb212

show more ...

Resolve issue of page not found when opening new tab

Signed-off-by: Sukanya Pandey <sukapan1@in.ibm.com>
Signed-off-by: Derick Montague <derick.montague@ibm.com>
Change-Id: Id46f9f663c456a7d09b55d6d

Resolve issue of page not found when opening new tab

Signed-off-by: Sukanya Pandey <sukapan1@in.ibm.com>
Signed-off-by: Derick Montague <derick.montague@ibm.com>
Change-Id: Id46f9f663c456a7d09b55d6d322b00785df4cbe7

show more ...

Add client sessions page

- This page will show the list of sessions that are
currently connected to the BMC.

APIs used:
- To get all the sessions API used is
`/redfish/v1/SessionService/Sessions`

Add client sessions page

- This page will show the list of sessions that are
currently connected to the BMC.

APIs used:
- To get all the sessions API used is
`/redfish/v1/SessionService/Sessions`
- To delete the sessions API used is
`/redfish/v1/SessionService/Sessions/<session id>`

Signed-off-by: Sukanya Pandey <sukapan1@in.ibm.com>
Change-Id: Ia81f62cbbea749809b9b7f7e62356cfe2db7fc18

show more ...

Add security settings page

Adds ability to enable/disable:
- SSH protocol
- IPMI protocol

Signed-off-by: Dixsie Wolmers <dixsie@ibm.com>
Change-Id: I2430a46343dd8756ef75fcc3cb068df8d51dd415

Add SNMP settings route to app navigation

Adding a router "to" value so the SNMP settings navigation item
can be redirected to the 404 page instead of refreshing the app.

Signed-off-by: Yoshie Mura

Add SNMP settings route to app navigation

Adding a router "to" value so the SNMP settings navigation item
can be redirected to the 404 page instead of refreshing the app.

Signed-off-by: Yoshie Muranaka <yoshiemuranaka@gmail.com>
Change-Id: I6e87e2bf6d3682fa0f380a852a555b389132f86f

show more ...

Align button icons

- Fixes button icon and text alignment
- App header buttons to be addressed separately
- Button documentation will be addressed in separate commit
- Aligns form input buttons: dat

Align button icons

- Fixes button icon and text alignment
- App header buttons to be addressed separately
- Button documentation will be addressed in separate commit
- Aligns form input buttons: datepicker, clear search, and password toggle
- Moves title from icon to button for icon only buttons
- Aligns validation icon with form input buttons

Signed-off-by: Dixsie Wolmers <dixsie@ibm.com>
Change-Id: Ie28d7d7dd7303ab6bf1897d1fa569e1580cc2f9d

show more ...

Add new transition class name

- Modified transition class name needed for vue3.
- Add comment for vue version based classes.

Signed-off-by: Suren Neware <sneware9@in.ibm.com>
Change-Id: I3578ca7c45

Add new transition class name

- Modified transition class name needed for vue3.
- Add comment for vue version based classes.

Signed-off-by: Suren Neware <sneware9@in.ibm.com>
Change-Id: I3578ca7c45e71326e38888412a4f36c266b005a0

show more ...

Resolve custom-event-name-casing lint warnings

Signed-off-by: Sukanya Pandey <sukapan1@in.ibm.com>
Change-Id: I9eea4eac3b8cacc216fc9ad1011e51622622e75f

Update linting packages to use latest

- 99% of changes were small syntax changes that were changed by the
lint command. There were a couple of small manual changes to meet the
property order pattern

Update linting packages to use latest

- 99% of changes were small syntax changes that were changed by the
lint command. There were a couple of small manual changes to meet the
property order patterns established as part of the vue:recommended
guidelines.

There are rules that were set from errors to warnings and new stories
are being opened to address those issues.

Testing:
- Successfully ran npm run serve
- Successfully ran npm run lint
- Verified functionality works as expected, e.g. success and failure use cases
- Resolved any JavaScript errors thrown to the console

Signed-off-by: Derick Montague <derick.montague@ibm.com>
Change-Id: Ie082f31c73ccbe8a60afa8f88a9ef6dbf33d9fd2

show more ...