BMC/OpenBmc/webui-vue.git/src/views/Logs, branch master

Fix reversed expand chevron in the event log table

2026-09-17T03:10:51+00:00

The expand button in Event Logs draws its chevron upside down in both states: collapsed shows an up chevron, expanded shows a down one. _tables.scss rotates the icon 180 degrees for any button inside a .table-row-expand cell that does not carry .collapsed: .table-row-expand .btn:not(.collapsed) svg { transform: rotate(180deg); } EventLogs opts into that rule through tdClass: 'table-row-expand' but never applies .collapsed to the button, so the selector matches in both states and the rotation is permanent. The template swaps two icons by hand, chevron--down when collapsed and chevron--up when expanded, and the constant rotation inverts each of them. The swap predates the rule and was correct when written. Before f4861f9 the stylesheet rotated only .btn.collapsed, which these buttons never match, so nothing was rotated and the explicit icons showed through. Inverting the selector to :not(.collapsed) captured every button that had opted out of the class. Adopt the pattern the other nine pages using .table-row-expand already follow, Certificates and every Inventory table among them: bind .collapsed to the row state and render chevron--down alone, letting the stylesheet supply the flip. chevron--down rotated 180 degrees is chevron--up exactly, the two path definitions mapping onto each other point for point under (x,y) -> (32-x, 32-y), so the rendered result is what the template always intended. IconChevronUp is then unused and is removed. Tested: eslint and vite build are clean on the modified file. A scan of every .vue file using .table-row-expand confirms this was the last one not binding .collapsed; the other nine already did. Confirmed in a browser: the expand chevron points down while the row is collapsed and up while it is expanded. Change-Id: I2b0e28ca31d6a363c3f18cf308f17dbf09e74c0f Signed-off-by: Bill Chan

Fix translation bugs and remove unused keys

2026-08-20T09:25:37+00:00

- Fix three structural bugs found by locale audit: - ka-GE: rename pageFirmware.sectionTitleHostCards to sectionTitleBiosCards to match the key used by FirmwareCardsBios.vue. - ru-RU: move global.offline.okToRetryCancelToLogin out of global.toast.offline to global.offline, restoring the correct nesting path that matches en-US and ka-GE. - PostCodeLogs: fix deleteAllLogs confirm dialog to reference pagePostCodeLogs.modal.deleteAllMessage/Title instead of pageEventLogs.modal.*, decoupling the two pages so future wording changes to Event Logs cannot silently affect Post Code Logs. - TableDns: fix delete action title passed as a raw key string literal to TableRowAction; wrap with i18n.global.t() so the translated string is rendered instead of the key path. - Remove 30 unused translation keys from all three locale files (en-US, ru-RU, ka-GE). They were not being used. Change-Id: I7edd9b326e1a4ad096508d5ed1661e1234c7f571 Signed-off-by: Nikhil Ashoka

Fix header checkbox select-all in View All mode

2026-08-13T04:49:26+00:00

When "View All" is selected under Items per Page, perPage is 0. The selection logic fell back to `this.perPage || 10`, treating the falsy 0 as a page size of 10. Clicking the header checkbox therefore selected only the first 10 displayed logs instead of all of them, and the selected count did not reflect the true total. Treat perPage === 0 as "View All" so the computed page bounds span every item. The calculation is centralized in a getPageBounds() helper shared by the select-all handler and the header checkbox state logic, keeping the two paths consistent. Also fix a UI state bug where, after a resolve/unresolve action, the row checkboxes appeared unselected but the selection header remained visible and still referenced the stale selection. clearSelectedRows() is now called in a finally() block so it runs whether the dispatch succeeds or fails, keeping the selection state consistent. fix issue for: https://github.com/openbmc/webui-vue/issues/142 Change-Id: I46b33c1d73c633d6c7df446ceecaf4222be9ea90 Signed-off-by: Aravinth Sri Krishna Raja Raghavan

Dumps: fix action to delete all dumps

2026-03-18T16:18:13+00:00

`dumps` does not exist as computed property, only `allDumps` is available which was meant to be used. Tested: Remove single, multiple and all available dumps and ensured that the actions ran successfully. Change-Id: Id809b1a286d0eb345848481a69f2b796301c0fc9 Signed-off-by: Tan Siewert

Implemented styling changes

2026-03-05T06:56:06+00:00

- Implemented styling changes to restore UI appearance, behavior, margins, and sizing consistent with Vue 2. - Fixed broken styling across the search bar, filters, buttons, pagination, app navigation, cards, badges, and toast messages. Change-Id: If4aa37635136d94ebd3ad0a7533260bd788c2436 Signed-off-by: Vedangi Mittal

Implement Bootstrap 5 confirm modal dialog

2026-02-24T13:23:01+00:00

Replace window.confirm() shim with proper Bootstrap 5 modal using b-modal component from bootstrap-vue-next. This provides a consistent, themeable dialog experience matching the Vue 2 $bvModal.msgBoxConfirm() appearance across the application. Key changes: - ConfirmModal.vue: Full BS5 modal with request queue, ESC key support, optional processing state, and proper cleanup in beforeUnmount - All original Bootstrap 4 parameters preserved for consistent behavior The modal supports: - Multiple simultaneous confirm requests via queue - Custom titles and button text with i18n integration - Multi-line message support: `messageLines` - Variant styling (primary default, danger, secondary) - Auto-focus control for safer UX on destructive actions - Full theme customization via CSS variables - Modal positioned at top (not centered) matching Vue 2 behavior - No header close button for controlled dismiss behavior - Optional checkbox confirmation via confirmationText parameter Keyboard and focus enhancements: - Auto-focus configurable button when modal opens (cancel by default) - ESC key cancels dialog - $confirm() accepts optional second parameter for extra options - Added aria properties and removed unused refs Files using dialogs to test: - Logs: Dumps, EventLogs, PostCodeLogs - Operations: ServerPowerOperations - Security: Sessions, Certificates, Ldap, UserManagement - Settings: Network (IPv4/IPv6), SnmpAlerts Testing: - Manually tested most confirmation dialogs across the application - Verified keyboard-only interaction from Dumps page delete dialog Change-Id: I03fed8d79f40f47b43bc4b2c788396cf183b3e99 Signed-off-by: Jason Westover

Migrate build system from Vue-CLI to Vite

2026-01-20T00:21:36+00:00

"Vue CLI is in Maintenance Mode!" https://cli.vuejs.org/ Vite is created by Vue's creator and is the recommended build tool for Vue 3. It supports most of the configured conventions in Vue CLI. Dev Server startup is 60X faster and HMR is noticeably faster ~50ms. Better Tree-shaking support and modern ESM support. This migration preserves all existing functionality while eliminating Vue 2 legacy dependencies. Build Output Comparison (gzipped): Master (Webpack) Vite Delta CSS: 39 KB 45 KB +6 KB (+15%) JS: 505 KB 483 KB -22 KB (-4.4%) Total dist: 556 KB 544 KB -12 KB (-2.2%) Build time: ~29s ~7s ~4x faster Build System Changes: - Replace vue.config.js with vite.config.js - Remove babel.config.js (Vite uses esbuild) - Remove postcss.config.js (Vite handles PostCSS internally) - Add index.html to project root with ESM module entry point - Add custom Vite plugin for directory import resolution - Rename .eslintrc.js to .eslintrc.cjs (ESM compatibility) Dependency Updates: - Remove @vue/cli-* packages and webpack-related dependencies - Add vite, @vitejs/plugin-vue, @vitejs/plugin-basic-ssl - Add vite-svg-loader, vite-plugin-compression - Upgrade Bootstrap to 5.3.8 - Upgrade Sass to 1.97.2 (supports quietDeps option) - Upgrade xterm to @xterm/xterm v6 (new package name) - Upgrade xterm-addon-* to @xterm/addon-* packages - Upgrade vue-i18n to v11 - Upgrade eslint to 8.57.1 - Upgrade axios-cache-interceptor to latest Environment Variable Migration: - Change VUE_APP_* prefix to VITE_* (Vite convention) - Replace process.env with import.meta.env in source files - Update .env.ibm, .env.intel example files - Update documentation with new variable names ESM Module Compatibility: - Replace require('@/eventBus') with ESM imports (~23 files) - Ensure event bus listeners are registered/unregistered with stable handler references to prevent leaks - Replace require.context with import.meta.glob in i18n.js - Convert SVG inline loader to vite-svg-loader component imports SCSS/Sass Updates: - Remove tilde (~) prefix from node_modules imports - Add silenceDeprecations and quietDeps for Bootstrap warnings - Fix color() function syntax for Sass 2.0 compatibility xterm.js v6 Migration: - Update imports to @xterm/xterm, @xterm/addon-attach, @xterm/addon-fit - Replace deprecated setOption() with constructor options - Add CSS fix for helper textarea visibility Dev Server: - Configure HTTPS with @vitejs/plugin-basic-ssl - Preserve proxy configuration for BMC backend - Add WebSocket proxy auth token forwarding for /console, /kvm, /vm - Configure HMR on separate WebSocket path (/ws_hmr) X-Auth-Token Persistence (opt-in): - Add VITE_STORE_SESSION env flag for non-cookie auth backends - Persist X-Auth-Token to session cookie when enabled - Enables direct browser navigation to Redfish endpoints Follow-on: CI/testing updates (unit test runner + run-ci alignment) Some Jest config changes skipped here since this follow-on commit switches to Vitest. follow-up change is here: https://gerrit.openbmc.org/c/openbmc/webui-vue/+/86511 Tested: Sanity tested most navigational screens in the default UI, including many different types of API calls. Tested most build options. Tested the new i18n:report and it is working correctly. Change-Id: Ie84d1ed6121ffe7d2ddb379084d833b8d5a6fccf Signed-off-by: Jason Westover

Fix Unit tests and useI18n() misuse

2026-01-13T21:32:20+00:00

Vue 3's vue-i18n requires useI18n() to be called within setup() or reactive contexts. Calling it in Options API data() creates disconnected i18n instances that cannot resolve linked messages. Component fixes: - Enable globalInjection in i18n.js for automatic $t injection - Remove explicit useI18n() imports from 84 components that incorrectly called useI18n().t in their data() functions Unit test fixes: - Mock @/i18n module in jest.setup.js because Webpack's require.context() does not work in Jest, leaving the real module with no locale messages loaded - Re-export real createI18nInstance so i18n unit tests work - Update snapshots to reflect real translated text instead of raw translation keys - Fix b-form-radio/checkbox stubs to wrap content in div for proper data-test-id attribute inheritance - Remove duplicate i18n plugin installations from individual test files that caused 'already registered' warnings - Suppress expected missing-key warning in vendor overlay test Tested: - Sanity testing on webui, ensured translations work. - All Unit tests pass (19/19) with no Errors or Warnings. Change-Id: I9789acd823261eccc7affde0957dd22e8fec06b1 Signed-off-by: Jason Westover

Fix Vue 3 v-model and form event handling

2025-12-18T13:11:45+00:00

Add proper Vue 3 v-model support to components that are used with v-model bindings from parent components: - FormFile: Add modelValue prop with computed getter/setter, emit both update:modelValue and input events for backward compatibility, maintain internal state when parent uses @input instead of v-model - Modal components: Add modelValue prop and isModalVisible computed property for proper two-way binding with bootstrap-vue-next Fix form validation event handling by changing @input to @change for select, radio, and checkbox elements. In Vue 3 with bootstrap-vue-next, these elements do not fire @input correctly on first selection. Components updated: - FormFile.vue - ModalConfigureConnection.vue - ModalAddDestination.vue - ModalUser.vue - ModalSettings.vue - ModalAddRoleGroup.vue - FirmwareModalUpdateFirmware.vue - FactoryResetModal.vue - ModalGenerateCsr.vue - ModalUploadCertificate.vue - DumpsModalConfirmation.vue Change-Id: Ib7376fdff8e9ab5e764f5fae80ac05a761b70312 Signed-off-by: Jason Westover

Migrate to Bootstrap 5 and remove Vue compat plugin

2025-11-22T03:03:11+00:00

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