summaryrefslogtreecommitdiff
path: root/src/views/Operations/VirtualMedia
AgeCommit message (Collapse)AuthorFilesLines
2026-05-19Show image name during virtual media redirectionAravinth S1-7/+89
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-01-20Migrate build system from Vue-CLI to ViteJason Westover1-1/+1
"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-14Fix Unit tests and useI18n() misusejason westover2-4/+0
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>
2025-12-18Fix Vue 3 v-model and form event handlingJason Westover1-1/+16
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 <jwestover@nvidia.com>
2025-11-22Migrate to Bootstrap 5 and remove Vue compat pluginjason westover2-7/+12
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>
2025-10-31Fixed linter warning messagesHariharan Rangasamy1-0/+1
Warnings: src/components/AppHeader/AppHeader.vue 235:18 warning The "refresh" event has been triggered but not declared on `emits` option vue/require-explicit-emits src/components/Global/FormFile.vue 11:23 warning The "input" event has been triggered but not declared on `emits` option vue/require-explicit-emits src/components/Global/Search.vue 64:18 warning The "change-search" event has been triggered but not declared on `emits` option vue/require-explicit-emits 68:18 warning The "clear-search" event has been triggered but not declared on `emits` option vue/require-explicit-emits src/components/Global/TableDateFilter.vue 165:18 warning The "change" event has been triggered but not declared on `emits` option vue/require-explicit-emits src/components/Global/TableFilter.vue 107:18 warning The "filter-change" event has been triggered but not declared on `emits` option vue/require-explicit-emits src/components/Global/TableRowAction.vue 47:21 warning The "click-table-action" event has been triggered but not declared on `emits` option vue/require-explicit-emits src/components/Global/TableToolbar.vue 16:27 warning The "batch-action" event has been triggered but not declared on `emits` option vue/require-explicit-emits 23:27 warning The "clear-selected" event has been triggered but not declared on `emits` option vue/require-explicit-emits src/views/Logs/Dumps/DumpsModalConfirmation.vue 85:18 warning The "ok" event has been triggered but not declared on `emits` option vue/require-explicit-emits src/views/Operations/FactoryReset/FactoryResetModal.vue 122:18 warning The "okConfirm" event has been triggered but not declared on `emits` option vue/require-explicit-emits src/views/Operations/Firmware/FirmwareFormUpdate.vue 6:9 warning `<template>` require directive vue/no-lone-template src/views/Operations/Firmware/FirmwareModalSwitchToRunning.vue 7:16 warning The "ok" event has been triggered but not declared on `emits` option vue/require-explicit-emits src/views/Operations/Firmware/FirmwareModalUpdateFirmware.vue 7:16 warning The "ok" event has been triggered but not declared on `emits` option vue/require-explicit-emits src/views/Operations/VirtualMedia/ModalConfigureConnection.vue 127:18 warning The "ok" event has been triggered but not declared on `emits` option vue/require-explicit-emits src/views/SecurityAndAccess/Certificates/ModalUploadCertificate.vue 147:18 warning The "ok" event has been triggered but not declared on `emits` option vue/require-explicit-emits src/views/SecurityAndAccess/Ldap/ModalAddRoleGroup.vue 147:18 warning The "ok" event has been triggered but not declared on `emits` option vue/require-explicit-emits 163:18 warning The "hidden" event has been triggered but not declared on `emits` option vue/require-explicit-emits src/views/SecurityAndAccess/UserManagement/ModalSettings.vue 200:18 warning The "ok" event has been triggered but not declared on `emits` option vue/require-explicit-emits src/views/SecurityAndAccess/UserManagement/ModalUser.vue 370:18 warning The "ok" event has been triggered but not declared on `emits` option vue/require-explicit-emits 386:18 warning The "hidden" event has been triggered but not declared on `emits` option vue/require-explicit-emits src/views/Settings/DateTime/DateTime.vue 328:18 warning The "change" event has been triggered but not declared on `emits` option vue/require-explicit-emits src/views/Settings/Network/ModalDefaultGateway.vue 103:18 warning The "ok" event has been triggered but not declared on `emits` option vue/require-explicit-emits 114:18 warning The "hidden" event has been triggered but not declared on `emits` option vue/require-explicit-emits src/views/Settings/Network/ModalDns.vue 81:18 warning The "ok" event has been triggered but not declared on `emits` option vue/require-explicit-emits 92:18 warning The "hidden" event has been triggered but not declared on `emits` option vue/require-explicit-emits src/views/Settings/Network/ModalHostname.vue 99:18 warning The "ok" event has been triggered but not declared on `emits` option vue/require-explicit-emits 110:18 warning The "hidden" event has been triggered but not declared on `emits` option vue/require-explicit-emits src/views/Settings/Network/ModalIpv4.vue 148:18 warning The "ok" event has been triggered but not declared on `emits` option vue/require-explicit-emits 165:18 warning The "hidden" event has been triggered but not declared on `emits` option vue/require-explicit-emits src/views/Settings/Network/ModalIpv6.vue 120:18 warning The "ok" event has been triggered but not declared on `emits` option vue/require-explicit-emits 135:18 warning The "hidden" event has been triggered but not declared on `emits` option vue/require-explicit-emits src/views/Settings/Network/ModalMacAddress.vue 98:18 warning The "ok" event has been triggered but not declared on `emits` option vue/require-explicit-emits 109:18 warning The "hidden" event has been triggered but not declared on `emits` option vue/require-explicit-emits src/views/Settings/SnmpAlerts/ModalAddDestination.vue 124:18 warning The "ok" event has been triggered but not declared on `emits` option vue/require-explicit-emits 139:18 warning The "hidden" event has been triggered but not declared on `emits` option vue/require-explicit-emits Change-Id: I66fb82679cc12003ad435c5c73bb67c2d70b3658 Signed-off-by: Hariharan Rangasamy <hariharanr@ami.com>
2024-10-03Invalid feedback if condition changeSurya Venkatesan1-1/+1
For required, invalid format, minlength, maxlength, date, pattern validation if condition change in the few components Change-Id: Id8eebc140301e48dde833a604ca92426ebf77c9c Signed-off-by: Surya Venkatesan <suryav@ami.com>
2024-10-03Vuelidate, I18n, and filter are upgraded to vue3Surya V2-14/+27
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 <suryav@ami.com>
2024-10-03Upgrade vue3 and all dependenciesEd Tanous1-1/+7
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>
2024-03-05Reformat files with new linterEd Tanous1-6/+6
All changes should be whitespace, and were done using npm run-script lint. Change-Id: I943c6b435c5c872841af5affc1e89910468b5ca6 Signed-off-by: Ed Tanous <ed@tanous.net>
2023-03-27After the session expired redirect to login pagekirankumarb071-0/+1
If the user switches pages between the KVM and Virtual Media pages after the session has expired, it won't redirect to the login page. So I have added the system redfish API call in the create method to check the session timeout status. If the session is expired, the API call will get a 401 status, and WEBUI will be redirected to the login page. Change-Id: I069768ee0cef41afb4e6aa770bb8bec6565a16bd Signed-off-by: Kirankumarb07 Ballapalli <kirankumarb@ami.com>
2021-08-10IA update: Update control section to operationsSandeepa Singh3-0/+368
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
generated by cgit v1.2.3 (git 2.39.0) at 2026-10-01 10:49:20 +0300