|
This change switches power control to the EnvironmentMetrics-based
Redfish endpoint, derives minimum and maximum power cap values
dynamically from Redfish data, and updates ControlMode and SetPoint
handling to align with the latest schema.
Key changes:
1. Power control API and Redfish types:
- Removes src/api/services/powerControlService.ts; fetching and
PATCH are handled in the composable using shared Redfish utilities
- Adds EnvironmentMetrics and PowerLimitWatts types in
src/api/types/redfish.ts with proper ControlMode enum
('Automatic' | 'Disabled' | 'Manual' | 'Override')
- Chassis gains an EnvironmentMetrics link
- Composable resolves the Chassis collection via
useRedfishCollection<Chassis>('/redfish/v1/Chassis'), picks the
first chassis with EnvironmentMetrics, and fetches that resource
with useQuery; mutation sends PATCH and invalidates queries to
refetch fresh server state (returns Promise<void>; view owns
user-facing messages)
2. Power control composable
(src/components/Composables/usePowerControl.ts):
- Replaces Vuex PowerControlStore with a Composition API-based
composable
- Uses useRedfishRoot() and useRedfishCollection for cached
ServiceRoot and Chassis; uses TanStack Query to load and cache
EnvironmentMetrics power data
- Configures staleTime (30s freshness window) and refetchInterval
(30s automatic polling when tab visible) for live power
consumption updates
- Note: Only controls the first Chassis with EnvironmentMetrics in
multi-chassis systems (intentional for current use case)
- Forwards AbortSignal to API calls for proper request cancellation
- Reuses shouldRetry function from useAllSubResources
- Derives dynamic min and max power cap values from Redfish
PowerLimitWatts.AllowableMin/Max
- Provides a mutation for submitting updated SetPoint and
ControlMode; omits SetPoint when disabling to avoid sending
invalid values
- Handles all ControlMode enum values (Automatic, Disabled, Manual,
Override); UI sets Automatic/Disabled but preserves Manual/Override
when read from server
- Type-safe parameters (number | null instead of string coercion)
3. Toast composable and global plugin:
- useToast.ts (renamed from .js) uses bootstrap-vue-next useToast()
with TypeScript types; keeps successToast/errorToast API with
i18n titles
- Type restricted to string for simplicity; includes TODO for
potential VNode support expansion if needed
- src/plugins/toast.js continues to expose global $toast for
Options API
- BVToastMixin.js updated to use modelValue and extract VNode
content for consistency with bootstrap-vue-next 0.40.8
- Both implementations use isStatus: true for consistent toast
styling with status icons
4. Views modernization:
- Refactors src/views/ResourceManagement/Power.vue to use
<script setup>, usePowerControl(), and the new toast composable;
submitForm uses try/catch and
t('pageServerPowerOperations.toast.*') for success/error toasts
- Implements value caching to preserve user's typed input when
toggling power cap checkbox on/off
- Guards form sync watcher with v$.value?.$dirty check to prevent
overwriting in-progress edits during background refetch
- Loader semantics: show on first load (isLoading) and mutations,
but render cached data instantly on subsequent visits with silent
background refetch (avoids flicker)
- Renamed validator from 'between' to 'withinPowerCapRange' to
avoid confusion with Vuelidate's built-in validator
- Handles all ControlMode values (Automatic, Disabled, Manual,
Override) in form state synchronization
- Refactors src/views/Overview/OverviewPower.vue to read from the
power control composable instead of Vuex; implements settled
computed to emit overview-power-complete only when chassis
collection is fetched AND either no EnvironmentMetrics exists or
metrics query has completed (prevents premature completion)
- Shows power cap for all active control modes (Automatic, Manual,
Override)
- Removes mapState/mapActions usage and related Vuex wiring
5. Store cleanup and typing:
- Deletes src/store/modules/ResourceManagement/PowerControlStore.js
- Removes PowerControlStore registration from src/store/index.js
- Updates src/store/api.d.ts to match actual implementation
(set_auth_token with snake_case, accepts string | null |
undefined)
- Adds src/i18n.d.ts to provide basic typing for the shared api
Tested-by: Manual testing on development server
- Power consumption and cap values load correctly from
EnvironmentMetrics with automatic 30-second polling (refetchInterval)
when tab is visible
- Min and max power cap values reflect dynamic limits from Redfish
- Updating the power cap and enable state sends correct SetPoint and
ControlMode values; SetPoint is omitted when disabling
- All ControlMode values (Automatic, Disabled, Manual, Override) are
handled correctly
- User's typed values are preserved when toggling power cap checkbox
- Form edits are not overwritten by background refetch (dirty state
guard)
- Success/error toasts show localized messages with consistent
modelValue-based timing and status icons
- Overview power card reflects updated power state; overview loader
waits for both chassis and metrics queries to settle before
completing
- Request cancellation works properly on component unmount
Change-Id: Ic61631efd8790150a5e2914822f1dd25bd77305a
Signed-off-by: Nikhil Ashoka <a.nikhil@ibm.com>
|
|
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>
|
