summaryrefslogtreecommitdiff
path: root/src/components/AppHeader
AgeCommit message (Collapse)AuthorFilesLines
3 daysAdd asset tag edit functionality to overview pageHEADmasterNishant Tiwari1-1/+9
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-06-02Add dynamic language selector in headerAravinth S1-2/+57
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-03-05Implemented styling changesVedangi Mittal1-1/+1
- 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-20Migrate build system from Vue-CLI to ViteJason Westover1-17/+12
"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 westover1-2/+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-11-22Migrate to Bootstrap 5 and remove Vue compat pluginjason westover1-20/+26
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>
2025-03-26style: add Sass configuration for Vue 3suryav97241-7/+3
Configure sass in the vue.config.js file and remove the import of the scss file from each page. The styles are handled by the css loaderOptions in the config file. Every component and page has the appropriate style applied. The appearance adjusts to the openBmc webui in Vue 2. Change-Id: I3773c063646185b80b7bd61d05aa80a993cbd121 Signed-off-by: Surya Venkatesan <suryav@ami.com>
2024-10-03Vuelidate, I18n, and filter are upgraded to vue3Surya V1-2/+3
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-03i18n, vue-router and vuex upgradeEd Tanous1-1/+3
1. Configuration of i18n legacy as false. 2. Translation function t is called using the useI18n. 3. Used the i18n.global.t() function from i18n instead of this.$t() 4. Event bus error that occurred during logout. 5. Implemented vue-router 4.4.0 and vuex upgrade to 4.1.0 Change-Id: I9464d82c76dcc1445ce271983ea3ab9d7b03d265 Signed-off-by: Surya Venkatesan <suryav@ami.com>
2024-10-03Upgrade vue3 and all dependenciesEd Tanous1-3/+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-04-24Inline the header svgEd Tanous1-0/+1
Ideally we wouldn't have to pull down this file on every load, and we could just inline it. This commit implements inlining. Note, that this requires a minor modification to the unit test, as the inline header remains when unit tests are run. It's not clear at this time how to make inlining plugin operate on unit tests, but it doesn't seem terribly important. Tested: Loading the webui no longer shows a download of logo-header Change-Id: Iaa5be5b5a84e0ad6e1f430113f929032835c9f1c Signed-off-by: Ed Tanous <ed@tanous.net>
2024-03-05Reformat files with new linterEd Tanous1-3/+7
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-06-20Fix kvm session and add event busKonstantin1-0/+5
Bug description: Before this commit KVM window wasn't being closed after logging out Test: Step1. Launch webui on browser and see KVM page on /#/operations/kvm. Step2. Open additional window using 'Open in new tab'. Step3. Navigate to another page. For example, /#/operations/key-clear. Step4. Logout. Window is still open. Change-Id: Ife79ebca41eb4d588c0b8f4fae06135420eda155 Signed-off-by: Konstantin Maskov <sulwirld@gmail.com>
2023-03-27Added route restrictions based on user privilegeDamian Celico1-0/+3
This commit allows us to add 'exclusiveToRoles' field to route config files, with the list of roles that can access this resource, if needed. In this case, only Administrator can access Virtual-Media page and SOL console, and it is blocked for other users. Signed-off-by: Sivaprabu Ganesan <sivaprabug@ami.com> Change-Id: Ibcee18bd92d97c34414ecaf2caf6af28070c5538
2021-12-23Fixed routerKey prop eslint warningKenneth Fullbright1-1/+4
Eslint throws a warning to props that don't have a default value - Added a default value to the routerKey prop. Signed-off-by: Kenneth Fullbright <kennyneedsmilky@gmail.com> Change-Id: I2d9d4abd0512eeadf27f8941a0f391979eb9a80a
2021-12-20Fixed refresh system info on headerkennyneedsmilky1-1/+4
The refresh button in the App header previously only re-rendered the main mage section, this change also refreshes the app header and main content. Signed-off-by: Kenneth Fullbright <kennyneedsmilky@gmail.com> Change-Id: Iff7f3f14bca8ddfd815ccb1b87dd182c4bfd79ba
2021-09-03Update login page layoutDerick Montague1-1/+1
This update will: - Change the positioning of the form to be on the left - Add the built on OpenBMC logo to the bottom right corner of the screen - Add the ability to include a GUI custom name using a .env variable. If the variable is not present, the login page will not include the <h1> section heading element. - Remove the word "logo" from the alt attribute for the company logo image used in the application header and on the login page. Github story: https://github.com/openbmc/webui-vue/issues/63 Signed-off-by: Derick Montague <derick.montague@ibm.com> Change-Id: I83ac5aecff0b3858c3ab5f38ab1aaa603d59acf1
2021-08-27Add system information on Appheader pageSukanya Pandey1-9/+30
- Model type and serial number are newly added system info data on Appheader. - On small screens and below system information(model type, serial number and asset tag) will be hidden. - On large screen and below model type and serial number will be visible but asset tag will be hidden. - For all other screens all the system info will be visible. Signed-off-by: Sukanya Pandey <sukapan1@in.ibm.com> Change-Id: Ia844a26f658083cbd5fa9c8f3f6bea8b65ddcd11
2021-08-10IA update: Update control section to operationsSandeepa Singh1-1/+1
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
2021-08-10IA update: Add logs and update overview iconDerick Montague1-1/+1
This is the first patchset of the information architecture changes. These changes are the result of several months of design research with users to improve the existing information architecture (IA). More information can we found in the Github story. This patchset will add a Logs section and move event logs and dumps from the Health section to the new Logs section. It will also update the icon used for the Overview page. Github story: https://github.com/openbmc/webui-vue/issues/56 Testing: 1. IBM build: - Logs contained Event logs and dumps - Both pages rendered when clicking link 2. Intel build - Logs contained Event logs only - Logs page rendered when clicking link 3. Tested default build - Logs contained Event logs only - Logs page rendered when clicking link Signed-off-by: Derick Montague <derick.montague@ibm.com> Change-Id: I4621837202cf5ad3469d6ea460d9a5bdc79c8816
2021-05-18Replace use of the term host with serverDerick Montague1-8/+8
This patchset focuses on the global store use for server power operations and impacts several pages in the interface. For consistency, both in the UI and the code base, we are replacing the term host with server. This change impacts both the user and the developer experience. Maintaining consistency in naming allows both developers and users to form a mental model of the overall system and will help remove confusion when interacting with the UI and editing the interface. Testing: 1. Tested shutdown, power on, and reboot and verified the icons and page sections in the site header and the server power operations page update as expected during power operations. 2. Verified the one-time boot operations alert is displayed to the user when changing the boot settings on the server power operations page 3 Tested factory reset and validated the correct information message is displayed to the user with the server power off and on when performing the factory reset functions. 4. Verified the SOL Console status icon updates correctly during power operations. 5. Verified the alert message is displayed on the firmware update page when the server is powered on. Signed-off-by: Derick Montague <derick.montague@ibm.com> Change-Id: I88499a746364ab80f16a8b350d550407d094e95d
2021-02-17Fix skip link 404 error on refresh bugDerick Montague1-1/+9
Problem: When a user uses the skip link anchor to skip the navigation, the route was being changed to /#main-content. This route does not exist. If a user were to manually refresh the page, it would return a 404. This link is critical to meet accessibility guidelines and is needed by users that navigate with a keyboard. The challenge is that we need to mirror a full page refresh on all route changes, so we set focus on the app-header element on each route change. When we click the skip to navigation link, there should not be a route change. All we need is to set focus on the <main> element so that the user can tab to the first tabbable element in the main content section. Solution: - Use a native <a> element with an attached click event handler - Prevent the default action of adding the hash to the URL - Create a global mixin to reuse for route changes and skip link activation - Emit an event that can be listened for to call the global mixin Signed-off-by: Derick Montague <derick.montague@ibm.com> Change-Id: I4c2301b02f608eeb376ed2d1bd809f3d5c1bf545
2021-02-16Add enhancements to BVToastMixinYoshie Muranaka1-4/+3
Adds ability to create toasts with multi-lined body content and options to include a timestamp and application refresh action. Signed-off-by: Yoshie Muranaka <yoshiemuranaka@gmail.com> Change-Id: I30b1da04a0e0b5f29a419950462d1ca35e207552
2020-12-16Show asset name in the app headerSukanya Pandey1-1/+15
Signed-off-by: Sukanya Pandey <sukapan1@in.ibm.com> Change-Id: If5394604d6c91b3604eaadb33178376fe6da672c
2020-11-12Resolve custom-event-name-casing lint warningsSukanya Pandey1-2/+2
Signed-off-by: Sukanya Pandey <sukapan1@in.ibm.com> Change-Id: I9eea4eac3b8cacc216fc9ad1011e51622622e75f
2020-11-03Update linting packages to use latestDerick Montague1-8/+8
- 99% of changes were small syntax changes that were changed by the lint command. There were a couple of small manual changes to meet the property order patterns established as part of the vue:recommended guidelines. There are rules that were set from errors to warnings and new stories are being opened to address those issues. Testing: - Successfully ran npm run serve - Successfully ran npm run lint - Verified functionality works as expected, e.g. success and failure use cases - Resolved any JavaScript errors thrown to the console Signed-off-by: Derick Montague <derick.montague@ibm.com> Change-Id: Ie082f31c73ccbe8a60afa8f88a9ef6dbf33d9fd2
2020-10-29Update button focus state for small screenDerick Montague1-8/+10
The focus state uses the box-shadow and two inset values. The first should match the background of the button or link container. The second is the actual color of the outline focus state. On smaller viewports, the menu stacks and is a different color. - Add mixin with optional color param for setting the color of the inset box-shadow that matches the container's background color - Add a focus state for the helper-menu at the smaller breakpoint - Remove the multiple :focus pseudo-selector declarations that remove the outline and set it when we set the initial focus state Signed-off-by: Derick Montague <derick.montague@ibm.com> Change-Id: I8eb046f892b395baba41dd62460d2a771bd1f92a
2020-10-23Add style to left sidebar and app headerSurenNeware1-23/+47
- Updated hover, active and focus state for left sidebar menu items. - Add style guide for top header navigation. - Add new white color logo. - Add focus and active state to current menu item. Signed-off-by: Suren Neware <sneware9@in.ibm.com> Change-Id: Ib97df4efda216f653ce0415c3f3ae9ae75bcb9cd
2020-10-23Add support for mutual TLSYoshie Muranaka1-0/+3
Adding check for 'IsAuthenticated' cookie in AuthenticationStore and adding a check in created hook for AppHeader component because it is visible on all authenticated pages. Signed-off-by: Yoshie Muranaka <yoshiemuranaka@gmail.com> Change-Id: Ic558c9c45fd3f5874c8c516cb6bc005cba4946e2
2020-10-21Show error toast notification on unauthorized accessSukanya Pandey1-0/+15
-When 403 status code which is an unauthorized access occured -show error toast notification. Signed-off-by: Sukanya Pandey <sukapan1@in.ibm.com> Change-Id: I55fa7052073f87f28c3584b68fd4e84247a4237e
2020-10-19Update relative path imports to use '@' aliasSurenNeware1-2/+2
- Add '@/' instead of '../../../' Signed-off-by: Suren Neware <sneware9@in.ibm.com> Change-Id: Ida1dc26f2bd62f38914a74b729ee8fd143c360ac
2020-10-16Add title attribute to header actionsSurenNeware1-6/+11
- Add title attrbute to refresh and avatar icons in app header. Signed-off-by: Suren Neware <sneware9@in.ibm.com> Change-Id: I89629548ecf5141e3c168fe7b5e1a60d1f86620c
2020-08-28Add Intel themeMateusz Gapski1-5/+2
Add Intel fonts, colours Signed-off-by: Mateusz Gapski <mateuszx.gapski@intel.com> Change-Id: Idbfa1422f2667515efb60e24f9a84b7d77d11fcd
2020-08-25Add link to header logoDixsie Wolmers1-5/+7
- Adds link to app header logo that will redirect to overview Signed-off-by: Dixsie Wolmers <dixsie@ibm.com> Change-Id: Ia17356ee89d732c30d681754d1c9c26c0ea6481b
2020-07-27Add application header test hooksDerick Montague1-8/+29
We are not able to easily pass the data attribute to the markup created by some of the Bootstrap-vue components. In these cases we are adding the data attribute to the parent container. Those elements will use the word container in the data attribute value. Signed-off-by: Derick Montague <derick.montague@ibm.com> Change-Id: I5f1cb43aaed9233415e9b7b9a7f71580f27f921d
2020-07-27Add ability to customize theme stylesYoshie Muranaka1-2/+0
Showcases how different themes/styles can be supported using .env variables. If an environemnt name is specified during the build process, an overrides file will be pulled in to allow modifications to color and font definitions. This commit includes possible style modifications with the openpower env name as an example. To see the openpower changes, add the variable definition VUE_APP_NAME="openpower" to your .env.development.local file or build using 'npm run build -- --mode openpower' - Moves helper imports into vue config to allow for specific import order - Removed helper imports in SFCs Signed-off-by: Yoshie Muranaka <yoshiemuranaka@gmail.com> Change-Id: Iaf7a59c24fda06a7b74e23f2f042fb3300cb2056
2020-07-22Intel environmentMateusz Gapski1-2/+13
add environment for Intel add logo as a placeholder Signed-off-by: Mateusz Gapski <mateuszx.gapski@intel.com> Change-Id: Iad1ef66ef73e7f9e0857122cc29729543cbf6682
2020-07-21Update use of Sass variables for better themingYoshie Muranaka1-6/+6
Use Bootstrap color functions for theme-colors and grays instead of directly referencing Sass variable to allow more flexible theming. Signed-off-by: Yoshie Muranaka <yoshiemuranaka@gmail.com> Change-Id: Id08b77ff6df3bdf99400dcdfe964853706f1070f
2020-06-24Responsive Site HeaderSurenNeware1-7/+42
- Changed Header shortcut menu Icon position - Fixed Media devices responsive layout Signed-off-by: Suren Neware <sneware9@in.ibm.com> Change-Id: I817d8f11d9fb720bb9e37f4a136cb19305144228
2020-06-17Profile settings pageSukanya Pandey1-49/+67
-To set the profile by setting password. -This commit adds a profile page which allows the user to change their password. In the future, the profile page will also contain user settings like language and timezone. The API called to change the user's password is '/redfish/v1/AccountService/Accounts/<userName>' Signed-off-by: Sukanya Pandey <sukapan1@in.ibm.com> Change-Id: Ie54a54beff8c85bc9ac5af21c35edc481b34cf44
2020-06-02Add link to app header status iconsDixsie Wolmers1-2/+2
Signed-off-by: Dixsie Wolmers <dixsie@ibm.com> Change-Id: Id7a303c415778351089786e894c42770e1810d01
2020-05-21Update EventLogStore request to use RedfishYoshie Muranaka1-3/+3
Changes to WebSocketPlugin to dispatch event log GET request when new event interfaces are received. By re-fetching the Redfish logs the health status icon in the application header will always reflect the visible event logs. The plugin was previously only updating the header status, so it was possible for the header status and event logs to be out of sync. - Changed to use Redfish endpoint for event log GET request /redfish/v1/Systems/system/LogServices/EventLog/Entries - Update AppHeader Health status icon to reflect changes made with Redfish log Severity property Signed-off-by: Yoshie Muranaka <yoshiemuranaka@gmail.com> Change-Id: I73a3a441dcbbb3a29ef9a51f961c062689cb5add
2020-05-16Add Redfish mapping for quiesced and dignostics modeYoshie Muranaka1-0/+2
- Add yellow warning icon Power status in app header for diagnostics mode Signed-off-by: Yoshie Muranaka <yoshiemuranaka@gmail.com> Change-Id: I8a0f18139da2a29f4bcc4025db3aada158f86026
2020-05-05Update Sass architecture to require helper importsDerick Montague1-0/+2
- Restructuring file strucure to support single file components use of Sass variables when imported into vuepress. - Creating a scalable file structure using Sass best practices Tested by building and testing both the vue web ui and the the documentation application. Signed-off-by: Derick Montague <derick.montague@ibm.com> Change-Id: Iddcefbf305c8dac978ee24e903df33b609e395e3
2020-05-01Create LoadingBar componentYoshie Muranaka1-1/+10
Create loading bar component to indicate when page data is 'loading'. Not every component view will need to show the loading bar (eg Reboot BMC). The LoadingBarMixin can be imported per component as needed. Signed-off-by: Yoshie Muranaka <yoshiemuranaka@gmail.com> Change-Id: I6735be37bc0a81f5bb2b7c93fb31a0e0ef9b40d1
2020-04-09Resolve header and nav accessibility violationsDerick Montague1-21/+35
- Add aria-label to nav sections in app-header and app-nav to meet accessibility guidelines. When application has multiple nav elements an aria-label is required to help screen readers identify the elements - Remove b-nav child of b-nav-bar in app-header to fix invalid markup generated by Bootstrap-vue components. Components were not used as expected by the component library - Replace b-nav-item with HTML <li> elements using nav-item css classes in order to use button elements. Bootstrap-vue generates <a> elements which is not the semantic HTML element to use for items that are not links to other sections of the application. - Removed aria-expanded and nav-open class from nav-trigger button - Update appHeader unit test Used a TDD approach to write all tests to fail and then updated the methods and actions to make the tests suceed. Each test resulting in a dispatched action should be called once only and with the expected action. Signed-off-by: Derick Montague <derick.montague@ibm.com> Change-Id: I18af3727708526f814b7ceb77a0c28fda9f3d9bd
2020-03-10Remove unused colors from color paletteDerick Montague1-3/+3
The color palette has been stripped down to a maximum of two colors shades per palette. This works for our design since components use a base color with a lighter color as an accent color. This change reduces the amount of CSS generated by Bootstrap when the CSS is compiled. Github Story: https://github.com/openbmc/webui-vue/issues/2 Signed-off-by: Derick Montague <derick.montague@ibm.com> Change-Id: I2ddb37f5c89c749a7303799c6f7499ddd83d5a92
2020-03-03Add translation to header and navigationYoshie Muranaka1-6/+6
Signed-off-by: Yoshie Muranaka <yoshiemuranaka@gmail.com> Change-Id: I31a6c7a45a20c68efc367ba625c7b06b2d7ba47d
2020-02-19Add responsive layoutYoshie Muranaka1-6/+64
The main navigation will be collapsed until the viewport minimum width reaches the Bootstrap defined 'lg' breakpoint (defaults to 992px). - Adding motion variables and updating some CSS values to use existing Sass variables Signed-off-by: Yoshie Muranaka <yoshiemuranaka@gmail.com> Change-Id: Id159b84da6adf55fdb15842b0e33b1ede4eeceb4
generated by cgit v1.2.3 (git 2.39.0) at 2026-10-01 22:28:43 +0300