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-28T10:42:29+00:00 2026-09-28T10:42:29+00:00 Nishant Tiwari tiwari.nishant@ibm.com 2026-07-16T08:27:11+00:00 urn:sha1:85248e05cf5c44fc2a77135f829ae33b0d485e2f Implemented the ability to view and edit the system asset tag directly from the Overview page, including a modal dialog for editing, Vuex store action for saving, and truncation in the app header. Changes: - Added ModalAssetTag.vue component with: - Form input for editing the asset tag value - Vuelidate validation requiring a non-empty tag - Updated OverviewServer.vue to: - Display asset tag in the system information section - Add inline edit button using Carbon edit icon - Dispatch saveAssetTag store action with toast feedback - Refresh global system info after a successful save - Added saveAssetTag action to SystemStore.js using PATCH against the system path endpoint - Updated AppHeader.vue to truncate asset tags longer than 30 characters with an ellipsis, preserving full value in the title attribute for accessibility - Added translation keys for asset tag label, modal title, and success/error toast messages in en-US, ka-GE, and ru-RU locale files Testing: - Verified asset tag displays correctly in system info section - Verified modal opens, validates, and submits correctly - Verified PATCH request updates asset tag on the server - Validated success and error toast notifications display - Confirmed long asset tags are truncated in the header Change-Id: I6ac51dfc24b9d40986b74e9220cff955b029d659 Signed-off-by: Nishant Tiwari <tiwari.nishant@ibm.com> 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-08-12T13:44:58+00:00 Vijaysankar Ravi vijaysankarr@ami.com 2026-08-11T10:37:44+00:00 urn:sha1:4f2c725de80f3cd5a18cb7a153491f63c371453f Use findMessageId() to detect ResourceAlreadyExists in the redfish error response and show a specific toast instead of the generic add destination error. Tested: Adding a duplicate SNMP destination on AST2600 EVB shows the specific error toast instead of the generic one. Related: https://gerrit.openbmc.org/c/openbmc/phosphor-dbus-interfaces/+/90890 https://gerrit.openbmc.org/c/openbmc/phosphor-snmp/+/92218 https://gerrit.openbmc.org/c/openbmc/bmcweb/+/93102 Change-Id: I5a4fc6541c246085099aaad7d2515bb84805cb16 Signed-off-by: Vijaysankar Ravi <vijaysankarr@ami.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-17T06:36:24+00:00 Aravinth S aravinths@ami.com 2026-04-22T21:01:38+00:00 urn:sha1:64ca1925df0af1524d070ab66593b24a97773f84 This change allows users to view detailed certificate information by clicking a chevron icon to expand each certificate row. This makes it easier for administrators to inspect certificates without leaving the page or using external tools. Why this enhancement is needed: System administrators need complete certificate details for security audits, compliance verification, and troubleshooting SSL/TLS issues. Previously, users had to export certificates or use external tools to view comprehensive information, which was inefficient. What's included in the expanded view: - Certificate metadata: version, serial number, signature algorithm - Complete issuer details: organization, common name, unit, location - Complete subject details: who the certificate is issued to - Full validity timestamps with timezone information Implementation details: - Expand button aria-label is row-specific (e.g. "Expand table row HTTPS Certificate") so screen readers identify each row uniquely - Two-column layout uses <b-col sm="6"> to stack on small screens, matching the Inventory page pattern - Section headings (Issuer Information, Subject Information) are conditionally rendered — hidden when all fields in the section are absent, avoiding empty bold headers - X.509 Version stored only when present in the API response; displayed as v1/v2/v3 (ASN.1 integer + 1) for human readability - formatSerialNumber only reformats strings that contain at least one A-F hex letter; pure decimal serials are returned as-is - CertificateString removed from Vuex state mapping entirely - Unit tests added: store mapping (issuer, subject, serialNumber, Version conversion, absent Version) and component tests (expandLabel per-row identity, formatSerialNumber all input cases) Tested with HTTPS, LDAP, and TrustStore certificate types. Change-Id: I735ad571c189d7ba84464bf4a9f1d2280175b128 Signed-off-by: Aravinth Sri Krishna Raja Raghavan <aravinths@ami.com> 2026-06-16T05:11:10+00:00 Aravinth S aravinths@ami.com 2026-06-10T17:09:43+00:00 urn:sha1:aa7b42222ddeaae797e754d1e9591b916e49dd0c When getEthernetData was called after any save action (e.g., adding an IPv4 address), it unconditionally reset selectedInterfaceId back to the first interface (eth0). This caused subsequent API patches to target eth0 even when the user had navigated to a different tab (e.g., eth1). Only set selectedInterfaceId to firstInterfaceId on initial load when it is empty, preserving the user's active tab selection across data refreshes. Testing: 1. Navigate to Settings > Network page 2. Verify eth0 is selected by default on initial load 3. Switch to eth1 tab 4. Add or modify an IPv4 address on eth1 5. Verify the change is saved to eth1 (not eth0) 6. Confirm eth1 tab remains selected after the save 7. Repeat steps 3-6 with other network interfaces if available 8. Test with different configuration changes (DHCP enable/disable, IPv6 settings) to ensure tab selection persists Fixes: https://github.com/openbmc/webui-vue/issues/125 Change-Id: Ic112e88173d4d3c5c1409a17bee4837673523991 Signed-off-by: Aravinth Sri Krishna Raja Raghavan <aravinths@ami.com> 2026-06-14T15:59:13+00:00 Nikhil Ashoka a.nikhil@ibm.com 2026-04-23T05:23:59+00:00 urn:sha1:e474f13a5e3c33746b3f7072608eca63b7d415d9 - Implemented Basic Auth setting in Policies page. - User able to Enable/Disable the policy setting from UI. - Added property presence check. - Tested: p11 BMC machine, Able to enable/disable Basic auth, Checked with and without redfish property to ensure UI doesn't break. Checked success and error cases. Change-Id: I08c0ccb275dbe068894de9cb35d6a286b4dc6e4f Signed-off-by: Nikhil Ashoka <a.nikhil@ibm.com> 2026-06-09T16:55:25+00:00 Nikhil Ashoka a.nikhil@ibm.com 2026-02-06T12:01:56+00:00 urn:sha1:99099183438d878391f66d3c674fa2cd037a7840 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> 2026-06-02T09:33:37+00:00 Aravinth S aravinths@ami.com 2026-05-06T16:03:21+00:00 urn:sha1:95f0d613d5da226b190348bb36cf8ea911a2051c Enable users to switch between English, Russian, and Georgian languages directly from the application header, eliminating the need to log out and log back in to change language preferences. Prior to this enhancement, changing the interface language required users to: - Log out from their current session - Return to the login page - Select a different language - Log back in with credentials This workflow disruption made it impractical for operators to switch languages during their work sessions. The new language selector in the user dropdown allows users to: - Change language instantly from any page without logout - Switch between languages as needed during a single session - Maintain active sessions and current page context - Access all three supported languages (English, Russian, Georgian) The language preference persists across sessions via the Vuex store, so the selected language remains active after logout and login. This improvement is particularly valuable for: - Multilingual teams sharing the same BMC system - Operators who need to verify terminology in different languages - Training scenarios where instructors switch between languages - International deployments with diverse user bases Implementation includes: - Language dropdown in user menu (between Profile Settings and Log Out) - getAvailableLanguages() helper in i18n.js using Intl.DisplayNames to automatically generate language labels in "{English} - {Native}" format (e.g., "Russian - Русский", "US - English") - getRoutePageTitle() helper in i18n.js to eliminate duplicated route-to-title logic between App.vue and PageTitle.vue - Reactive translations via Vue i18n computed properties - Page title updates in both DOM (PageTitle component) and browser tab (App.vue document.title) - Component re-rendering triggered by routerKey increment - Centralized localStorage persistence in GlobalStore.js setLanguagePreference mutation - Translation keys added to en-US.json, ru-RU.json, and ka-GE.json (global.pageTitle.missing, appHeader.language) All interface text, navigation menus, and page titles update immediately when language is changed. Change-Id: Ie11523c5ff23fc1600aca2d8ee5adb542c5ce4b3 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>