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

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

Fix spelling mistakes using codespell

2026-02-24T09:08:33+00:00

Change-Id: Iefb20fbf212f11d104aa1cff4f050e9ce6c60200 Signed-off-by: George Liu

Implemented Sensors page with VueQuery and Composition API

2026-02-13T09:54:27+00:00

Introduce reusable Redfish API infrastructure and modernize the Sensors page to use Vue 3 Composition API with TanStack Query, eliminating the need for Vuex store patterns for server state management. This change provides a foundation for migrating other hardware status pages (Memory, Processors, Drives, etc.) to a more maintainable and performant architecture. Key changes: 1. Generic Redfish composables (src/api/composables/): - useRedfishRoot.ts: Caches ServiceRoot and detects OData support - useRedfishCollection.ts: Smart collection fetcher with OData $expand/$select support and graceful fallback - useAllSubResources.ts: Generic pattern for fetching nested resources from parent collections 2. Sensors page modernization: - Migrated from Vuex store to TanStack Query (Vue Query) - Created useSensors.ts composable for data fetching - Removed legacy Thermal and PowerSubsystem endpoints - Now uses only modern /Chassis/{id}/Sensors collection - Maintains existing UI/UX with Bootstrap Vue table 3. TypeScript support: - Added tsconfig.json and webpack ts-loader configuration - Created required Redfish type definitions - Preserves Redfish PascalCase property names 4. Performance optimizations: - Auto-detects and uses OData $expand for fewer API calls - Implements automatic caching and deduplication - Smart retry logic with exponential backoff - 30-second stale time with 5-minute garbage collection Benefits for future development: - The generic composables are designed for reuse across components: // Fetch all Memory from all Systems useAllSubResources('/redfish/v1/Systems', 'Memory') // Fetch all Drives from all Storage useAllSubResources('/redfish/v1/Storage', 'Drives') - Implemented TypeScript types - Reuses existing Bootstrap table components - Preserves existing UI/UX - Focuses on infrastructure reusability This pattern eliminates boilerplate Vuex store code and provides better developer experience with automatic loading states, error handling, and background refetching. Tested-by: Manual testing on development server - Sensors page loads correctly - OData optimization works when supported - Graceful fallback when OData unavailable - All table functionality preserved (sorting, filtering, export, cancel and searching) Change-Id: Id605319140f607b295d24085f3681f09ac0d5ebd Signed-off-by: Nishant Tiwari

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 @change event bindings for forms

2025-12-18T13:12:22+00:00

In Bootstrap-Vue-Next (Vue 3), the @change event on BFormCheckbox and BFormRadio passes an Event object instead of the boolean value. This caused malformed API payloads like: {"LocationIndicatorActive": {"isTrusted": true, "_vts": 1765562875420}} instead of: {"LocationIndicatorActive": true} Replace @change with @update:model-value which correctly passes the new value in Vue 3/Bootstrap-Vue-Next. Components fixed: - OverviewInventory.vue: LED toggle - InventoryServiceIndicator.vue: LED toggle - InventoryTableSystem.vue: LED toggle - NetworkGlobalSettings.vue: 6 network switches - Policies.vue: 4 policy switches (SSH, IPMI, vTPM, RTAD) - TableIpv4.vue: DHCP switch - TableIpv6.vue: DHCPv6 switch - Ldap.vue: LDAP auth and service type controls Also adds safety net in api.js: - Request interceptor to strip Vue reactivity from payloads - Detects and warns about Event objects in API payloads - Improved response error handling with null safety - Conditional debug logging (development mode only) Change-Id: I180d9143087284e28c5066a6ffc141cd7f7038c6 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

inventory: move serial console to system

2025-01-24T15:39:38+00:00

SerialConsole was deprecated in Manager v1_10_0 and has been removed in bmcweb [1]. Because the SerialConsole values were not available anymore, the Managers were not displayed because "setBmcInfo" couldn't find the "SerialConsole" properties. THe following error will be logged: ``` TypeError: Cannot read properties of undefined (reading 'ConnectTypesSupported') at Wa.setBmcInfo (app.25e72670.js:58:745295) at app.25e72670.js:50:2774 at app.25e72670.js:50:10113 at Array.forEach () at app.25e72670.js:50:10092 at Wa._withCommit (app.25e72670.js:50:11953) at Wa.commit (app.25e72670.js:50:10066) at Wa.commit (app.25e72670.js:50:9518) at o.commit (app.25e72670.js:50:2216) at app.25e72670.js:58:745747 ``` [1]: https://github.com/openbmc/bmcweb/commit/fa800c8a141aa4b209269e0fb50cae34aa24f75d Tested: BMC manager being listed in the inventory and serial console variables being displayed for the system. Change-Id: I1a24178717805ca50eef2c89042c0bd9ede1d5bc Signed-off-by: Tan Siewert

i18n fix after vue3 merge to master

2024-10-04T14:31:07+00:00

Fix i18n issue in the Power restore policy, Inventory LEDs, and User management page. After merge the vue3 code to master the i18n Power restore policy, Inventory LEDs, and User management page got conflicts and old code retrieved in master. So unable to render the Power restore policy, Inventory LEDs and unable to disable the user in user management page change the i18n.t method to i18n.global.t for the vue3 support. Change-Id: I46f3f56632308ceaee321dd896e16e922d964b60 Signed-off-by: Surya Venkatesan

Vuelidate, I18n, and filter are upgraded to vue3

2024-10-03T18:34:06+00:00

While navigating to the pages i18n, vuelidate, and filters errors occurred. i18n, and vuelidate code changes in each page adapted to vue3. Filter global function for date and time format implemented in the main.js file and those files which as called the filter functions. Change-Id: If1a2ee22d47750faef1c35ef2c263299067d9a20 Signed-off-by: Surya Venkatesan