Web-based user interface built on Vue.js for managing OpenBMC systems (mirror) https://git.radix-linux.su/BMC/OpenBmc/webui-vue.git/atom?h=master 2026-09-28T08:33:30+00:00 2026-09-28T08:33:30+00:00 Nikhil Ashoka a.nikhil@ibm.com 2026-07-21T11:13:20+00:00 urn:sha1:4628f24b336ea30b288a4b50d42c0e50d8d62869 This change migrates the Reboot BMC page from Vuex to TanStack Query and Composition API Key changes: 1. Redfish types (src/api/types/redfish.ts): - Adds Manager interface with LastResetTime and Actions fields, typed in PascalCase to match the Redfish schema 2. BMC reboot composable (src/components/Composables/useRebootBmc.ts): - Replaces Vuex controls/getLastBmcRebootTime and controls/rebootBmc with a Composition API composable - Uses useRedfishRoot() to resolve the Managers collection URI from ServiceRoot; fetches the first member (the BMC Manager) in queryFn - Configures staleTime: Infinity and gcTime: Infinity because LastResetTime only changes on a reboot; onSuccess invalidation handles the one real change event, avoiding unnecessary refetches - mutationFn is pure (no i18n strings, no toast calls); view owns all user-facing messages via try/catch - onSuccess calls invalidateQueries only (no optimistic update, which would be immediately overwritten by the refetch) - resetTarget prefers Actions['#Manager.Reset'].target from the cached Manager, falls back to the conventional Redfish path 3. View modernization (src/views/Operations/RebootBmc/RebootBmc.vue): - Refactors from Options API to <script setup>, using useRebootBmc(), useLoadingBar(), and useToast() composables - Loader semantics: isLoading drives the loading bar on first fetch only; cached data renders instantly on re-navigation with a silent background refetch (no flicker) - Reboot button disabled when bmcQuery.isError is true, preventing mutation dispatch with an unavailable reset target - Confirm dialog uses eventBus.$emit('confirm:open', ...) directly, matching the $confirm global property contract without Options API 4. Store cleanup (src/store/modules/Operations/ControlStore.js): - Removes lastBmcRebootTime state, getter, and setLastBmcRebootTime mutation (now owned by bmcQuery in the composable) - Removes getLastBmcRebootTime and rebootBmc actions (replaced by useQuery and useMutation in useRebootBmc.ts) - Removes unused i18n import - Remaining ControlStore state (isOperationInProgress, lastPowerOperationTime) and server power actions are unchanged; they are still used by ServerPowerOperations.vue and Firmware.vue 5. Toast rendering fix (src/components/Composables/useToast.ts, src/plugins/toast.js): - Fixes modelValue: false → true for danger/error toasts in both the Composition API useToast composable and the Options API ToastPlugin; modelValue: false suppressed toast rendering entirely in bootstrap-vue-next, making error toasts invisible app-wide Tested-by: Manual testing on development server - Last BMC reboot time loads correctly from Manager.LastResetTime - Reboot button triggers GracefulRestart POST; success and error toasts display with localized messages - Loading bar shows on first page load and during reboot POST; subsequent visits render cached data instantly - Read-only user receives the global Unauthorized toast (403 interceptor) followed by the page-level error toast Change-Id: I5d49527f176041958e48889d6261780fcffdd9df Signed-off-by: Nikhil Ashoka <a.nikhil@ibm.com> 2026-06-25T06:39:00+00:00 Aravinth S aravinths@ami.com 2026-05-21T11:58:46+00:00 urn:sha1:f286d820e441325a86733fe7433be9d001a9a9d9 Non-admin users navigating to the Serial Over LAN page had no clear feedback — the page either failed silently or showed a generic error. Show the SOL button and nav item to all users and render an Access Denied alert when the session lacks the required privilege. A reusable AccessDeniedAlert global component is introduced so other restricted pages can adopt the same pattern with a single line. Change-Id: Ifbb93bb966c801b3a72230e8f3b752b62ef22929 Signed-off-by: Aravinth Sri Krishna Raja Raghavan <aravinths@ami.com> 2026-06-12T12:21:10+00:00 Jason Westover jwestover@nvidia.com 2026-05-27T04:59:10+00:00 urn:sha1:3e800a250fe9960500115dc08c403ea5cdfa316c @xterm/xterm v6 injects runtime <style> elements via DomRenderer _injectCss(), which violates bmcweb's style-src 'self' Content Security Policy and breaks the Serial Over LAN console in production. Revert to xterm 4.19.0 with matching xterm-addon-attach and xterm-addon-fit packages, and restore the pre-v6 import paths in SerialOverLanConsole. Import xterm.css in an unscoped style block so Vue scoped attribute selectors do not prevent xterm's helper textarea hiding rules from applying to dynamically created terminal DOM. Change-Id: Ifc34dd876c576e53a5253d9dd215b8e86e97fc26 Signed-off-by: Jason Westover <jwestover@nvidia.com> 2026-05-27T14:09:49+00:00 Aravinth S aravinths@ami.com 2025-09-16T08:07:01+00:00 urn:sha1:59a7a8b9233a979d4b75008b13478f44c21b3236 Disables firmware update page buttons for users with "Read-only" privileges to improve user experience. This helps users understand when they lack permissions to perform firmware updates based on their current session role. This is a UI-only improvement. Backend (bmcweb) validates all operations according to Redfish privilege rules regardless of UI state. Changes: - Created reusable usePrivilegeCheck() composable - Added privilege check to disable firmware update controls for read-only users - Added info banner to notify "The attempted action is not accessible from the logged in account. Contact your system administrator to check your privilege role". - Follows Vue 3 Composition API patterns Tested-by: Manual testing with Administrator, Operator, and ReadOnly roles Change-Id: I7e6e28267b094ab04f7dcc4b1e0cc609dc7f5e28 Signed-off-by: Aravinth Sri Krishna Raja Raghavan <aravinths@ami.com> 2026-05-19T05:59:53+00:00 Aravinth S aravinths@ami.com 2026-02-26T17:46:00+00:00 urn:sha1:12f127826f3ffaf2eba27e1f510974cf72ef399d Previously, when a user started virtual media redirection and navigated to another page, the image name was not shown upon returning. This update retains the image name on the Virtual Media page during Single Page Application (SPA) navigation. **Implementation:** - Active file and nbd objects are preserved in Vuex store state during SPA routing; the filename is displayed using the File.name property. - Proxy device objects are consistently shaped with file and nbd fields initialized to null in all construction paths. - Virtual media store is cleared on logout via a new clearDevices mutation, ensuring stale state is not retained across sessions. - When the BMC reports a device as Inserted but no browser-owned NBD connection exists (e.g. another UI session), the UI shows an informational label and a Stop button that ejects via Redfish EjectMedia instead of assuming a local NbdServer is present. **Limitations:** The image name is only retained during in-app navigation and is lost on: - Browser refresh (F5) - WebSocket connection cannot survive page reload - Duplicate tabs - each tab maintains independent state **Testing:** 1. Image name displays when starting virtual media redirection 2. Image name persists when navigating between pages 3. Image name clears when stopping redirection 4. Second tab with active redirection shows informational state; Stop ejects via Redfish and both tabs return to idle 5. Logout clears virtual media state; new session starts clean 6. Multiple proxy devices maintain independent state Change-Id: I5568025382a18adf89b18d3e81026c3112ae1e7e Signed-off-by: Aravinth Sri Krishna Raja Raghavan <aravinths@ami.com> 2026-05-19T02:01:29+00:00 Hariharan Rangasamy hariharanr@ami.com 2026-05-05T10:09:02+00:00 urn:sha1:b54efe4280e0b72330abca8c906fd515d08f6351 Add new "Capture Screenshot" button in KVM toolbar. Button only appears when KVM is connected. Downloads KVM canvas as PNG image with timestamp filename. The screenshot functionality captures the current state of the KVM display. Tested: 1. Launch KVM from web. 2. Click on Capture Screenshot. 3. The PNG image is downloaded. Change-Id: Ie9a0062c0f6ca9878955b2c558cbc866849f77ef Signed-off-by: Hariharan Rangasamy <hariharanr@ami.com> 2026-03-05T06:56:06+00:00 Vedangi Mittal vedangimittal3004@gmail.com 2026-02-03T08:35:59+00:00 urn:sha1:f4861f9cfd88ef599b829b0717505937d9cf241b - 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 <vedangimittal3004@gmail.com> 2026-01-20T00:21:36+00:00 Jason Westover jwestover@nvidia.com 2026-01-08T14:30:44+00:00 urn:sha1:063a8e0efc946b319300c610a3fb44dde4433d31 "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 <jwestover@nvidia.com> 2026-01-13T21:32:20+00:00 jason westover jwestover@nvidia.com 2025-08-18T22:16:01+00:00 urn:sha1:313d15cf9f14e8a264f97a3370c3be4e494e5e0d 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 <jwestover@nvidia.com> 2026-01-11T22:17:22+00:00 Jason Westover jwestover@nvidia.com 2025-12-21T17:54:45+00:00 urn:sha1:75b020396e10c3ecc5ceae8eaf7ce7705445cdf8 Complete the migration from Vuelidate v1 (vuelidate 0.7.7) to v2 (@vuelidate/core 2.0.3 and @vuelidate/validators 2.0.4). Changes include: - Replace imports from 'vuelidate/lib/validators' with '@vuelidate/validators' - Convert static 'validations:' objects to 'validations()' methods which return the validation rules object - Update helpers.regex() syntax from v1 two-arg format helpers.regex('name', pattern) to v2 single-arg helpers.regex(pattern) - Create custom macAddress validator using regex since macAddress is not included in @vuelidate/validators v2 - Remove deprecated vuelidate 0.7.7 package from dependencies - Add unit tests for Vuelidate v2 migration verification - Fix DateTime store to continue with DateTime update even if NTP settings update fails - Fix Network Table components (IPv4, IPv6, DNS) missing @ok event handlers for Add modal dialogs - Fix CSR country dropdown by restoring COUNTRY_LIST data and moving useI18n() call to setup() function - Fix disconnected modals in Network page by using eventBus to communicate between child components and parent (hostname, MAC address, default gateway edit buttons) Tested: - npm run build completes successfully - npm run test:unit passes 66 new Vuelidate validation tests: - VuelidateMixin.spec.js: getValidationState method tests - TableDateFilter.spec.js: Date range validation tests - ModalHostname.spec.js: Hostname validation tests - ModalMacAddress.spec.js: MAC address validation tests - ModalUser.spec.js: User form validation tests - Manual testing performed: - User Management: Create/edit user with password confirmation - LDAP: Enable/disable with conditional field requirements - Date/Time: Switch between NTP and manual modes - Factory Reset: Confirm checkbox validation when server is on - Network Settings: Add IPv4, IPv6, DNS addresses via modals - Network Settings: Edit hostname, MAC address, default gateway - Certificates: Generate CSR with country dropdown working Change-Id: I0f6b5d89d1791b36977f1a3c16cbd10bca6a484a Signed-off-by: Jason Westover <jwestover@nvidia.com>