| Age | Commit message (Collapse) | Author | Files | Lines |
|
Rewrite the design around one decision: how to make webui-vue build
offline and report per-dependency licenses using Yocto-native
mechanisms.
Recommend teaching autobump to generate per-component Yocto recipes
from package-lock.json (a webui-vue-specific special case that
changes no other recipe's build). Every npm dependency then fetches
like any other recipe, and the image SBOM comes for free via
per-recipe LICENSE and create-spdx. The webui-vue recipe is
rewritten to DEPENDS on those recipes and build Vite offline;
there is no separate pre-fetch step.
Demote pre-built dist and ad-hoc npm pre-fetch to rejected/deferred
alternatives, and abandon the repo-root CycloneDX/git-hook approach
(91792). Incorporate maintainer review feedback: shorter and
decision-focused, with no inlined recipe files.
Change-Id: I7d73812cc91079080af80f22cba49cf19279b839
Signed-off-by: Jason Westover <jwestover@nvidia.com>
|
|
Change-Id: Iefb20fbf212f11d104aa1cff4f050e9ce6c60200
Signed-off-by: George Liu <liuxiwei@ieisystem.com>
|
|
Replace Jest test runner with Vitest for native ES modules support
and faster test execution. This migration aligns the test tooling
with the Vite build system and eliminates CommonJS compatibility
issues.
Why Vitest over Jest?
While Jest is a mature ecosystem with broader adoption (45.5k
GitHub stars vs Vitest's 15.7k), Vitest is the recommended testing
framework for Vue 3 + Vite projects:
1. **Native ESM Support**: Vitest runs tests directly as ESM
without transformation, while Jest requires Babel/transformation
layers that add complexity and slow down test execution.
2. **Vite Integration**: Shares the same configuration, plugins,
and resolvers as the Vite build system. This eliminates the
dual-config maintenance burden (vite.config.js + jest.config.js).
3. **Vue 3 Ecosystem Alignment**: Vitest is created by the Vue
team and is the official recommendation in Vue 3 documentation.
It has first-class Vue component testing support via
@vue/test-utils.
4. **Performance**: Cold start is significantly faster due to
Vite's on-demand compilation. HMR for tests provides instant
feedback during test-driven development.
5. **API Compatibility**: Vitest intentionally matches Jest's API,
making migration straightforward and allowing developers to
leverage existing Jest knowledge.
ESLint 9 Upgrade:
- Upgrade ESLint from 8.57.1 to 9.18.0
- Migrate from .eslintrc.cjs to eslint.config.js (flat config)
- Upgrade eslint-plugin-vue from 9.2.0 to 10.0.0
- Replace eslint-plugin-vitest with @vitest/eslint-plugin@1.1.43
- Replace @vue/eslint-config-prettier with eslint-config-prettier
- Add globals package for flat config environment definitions
- Update lint-staged from 13.0.3 to 16.0.0
- Update prettier from 3.2.5 to 3.4.2
- Disable stricter vue rules for follow-up PR:
vue/no-reserved-component-names, vue/no-unused-components,
vue/no-deprecated-delete-set, vue/no-required-prop-with-default
Pre-commit Hooks:
- Add simple-git-hooks and lint-staged for automatic linting
- Run eslint --fix on JS/Vue files before commit
- Run prettier --write on markdown files before commit
- Add .prettierrc.yaml matching CI configuration
- Include .cjs/.mjs files in prettier JS override
Documentation:
- Update unit testing guide for Vitest
- Update coding standards with pre-commit hook details
References:
- Vitest official comparison:
https://vitest.dev/guide/comparisons.html#jest
- Vue 3 testing guide:
https://vuejs.org/guide/scaling-up/testing.html#unit-testing
- Vite ecosystem recommendations:
https://vitejs.dev/guide/features.html#testing
Test Results:
- 19 test files, 123 tests passing
- No warnings or deprecation messages
- Test execution: ~3.1s (on par with Jest)
Changes:
- Replace jest.config.js with Vitest config in vite.config.js
- Create tests/vitest.setup.js with Vitest-compatible mocks
- Update package.json scripts for Vitest
- Add vue3-snapshot-serializer for cleaner snapshots
- Use happy-dom and real i18n instance for faster tests
Dependency Updates:
- Remove @vue/cli-plugin-unit-jest, @vue/vue3-jest, babel-jest,
jest
- Add vitest, @vitest/coverage-v8, jsdom, happy-dom,
vue3-snapshot-serializer
Test File Migrations:
- Replace jest.fn() with vi.fn()
- Replace jest.spyOn() with vi.spyOn()
- Replace jest.mock() with vi.mock()
- Replace jest.resetModules() with vi.resetModules()
- Replace jest.unmock() with vi.unmock()
- Replace require() with dynamic import() for ESM compatibility
- Add explicit Vitest imports (vi, describe, it, expect, etc.)
Snapshot Improvements:
- Use vue3-snapshot-serializer to strip data-v-* scoped style
attributes from snapshots for cleaner, more stable output
- Add SVG component stubs for logo assets to avoid verbose path
data in snapshots (logo-header.svg, login-company-logo.svg,
built-on-openbmc-logo.svg)
- Updated all snapshot files for Vitest format
- Removed obsolete Jest snapshot entries
Performance Optimizations:
- Use happy-dom instead of jsdom (17% faster environment setup)
- Use real i18n instance instead of mock (eliminates redundant
dynamic imports, 55% faster test execution)
Tested:
- npm run test:unit runs 19 test files, 123 tests, and passed
them all with 0 warnings.
Change-Id: Iaf04335db54a5ceeff09bcd43675a488828dc44f
Signed-off-by: Jason Westover <jwestover@nvidia.com>
|
|
"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>
|
|
List all the vue app/env flags and add oneline description
Fixes https://github.com/openbmc/webui-vue/issues/75
Change-Id: I0133645297588784f6589b234ad8ac1e0814e782
Signed-off-by: Hariharan Rangasamy <hariharanr@ami.com>
|
|
- Add opt-in vendor overlays under src/env/locales/<env>
(and optional variant), merged on top of base locales at runtime.
- Auto-discover and bundle all base locale JSON files
in src/locales/.
- Example: move dump type labels under pageDumps.dumpTypes;
read vendor-only dump labels from overlays.
- Docs: update i18n guidelines and env README (formatting fixes).
- Tests: add focused unit tests for overlays and locale aliases.
Tested:
- Unit: i18n.locale-alias.spec.js, i18n.vendor.spec.js (passing)
- Manual: Verified dynamic locale discovery and overlay merge in UI
Change-Id: I8eae2bfec0e9622bafdafac3168dbf96650e8ae8
Signed-off-by: jason westover <jwestover@nvidia.com>
|
|
Signed-off-by: Patrick Williams <patrick@stwcx.xyz>
Change-Id: I5d07d550b9c483de6c4d5f64570ea8336564297a
|
|
The change from i18n.t method to i18n.global.t for vue3 support was
missed in the page-title guide. I found this on the Intel router and am
pushing this for completeness.
Change-Id: I97c993e36caa07af6df7c1ae3124e4f9380c493b
Signed-off-by: Jason M. Bills <jason.m.bills@intel.com>
|
|
Users of common WIMP GUIs (as opposed to interfaces primarily meant for
touch input) expect dialog boxes to have keyboard focus set on the
button for default action so that it can be executed by a single key
press. Usually that is chosen to proceed with the operation but in cases
where that leads to data loss the UI designers often pre-select Cancel
as a precaution.
This patch adds suitable property to all invocations of msgBoxConfirm()
method of `this.$bvModal` BootstrapVue object. For regular actions the
confirmation button is selected and can be activated by Enter or Space
bar. For actions deemed dangerous Cancel is focused instead so it takes
two key presses (first being Tab to shift the focus) to prooceed.
This also improves accessibility following the Web Content Accessibility
Guidelines (WCAG) published by W3C.
Tested: manually verified that modals are consistently shown with the
specified button focused, Enter and Space bar key presses produce the
same effect as left pointer button click: when Cancel is focused it just
closes the window, when OK is focused it sends the corresponding request
to the Redfish endpoint.
Change-Id: I66bfd02e48e08dc18994b11bbdd5d6b3ea27047f
Signed-off-by: Paul Fertser <fercerpav@gmail.com>
|
|
Looks like a new bump of the tools caught us.
Saw this fail on
https://gerrit.openbmc.org/c/openbmc/webui-vue/+/63442
Fails like:
```
diff --git a/docs/guide/components/page-section/index.md
b/docs/guide/components/page-section/index.md
index 94113c5..a37d67c 100644
--- a/docs/guide/components/page-section/index.md
+++ b/docs/guide/components/page-section/index.md
@@ -6,7 +6,7 @@ string will be rendered in an `h2` header element.
```vue
// Example: `src/views/AccessControl/Ldap/Ldap.vue`
- <page-section :section-title="$t('pageLdap.settings')">
+<page-section :section-title="$t('pageLdap.settings')"></page-section>
```
```
Change-Id: I1ada18a09050c5fbcc773a28ef20b8af1b7e84e4
Signed-off-by: Gunnar Mills <gmills@us.ibm.com>
|
|
Prettier is enabled in openbmc-build-scripts on Markdown, JSON, and YAML
files to have consistent formatting for these file types. Re-run the
formatter on the whole repository.
Change-Id: I2804ee3ab5ff6bcbf986b028db2fafec8e616779
Signed-off-by: Patrick Williams <patrick@stwcx.xyz>
|
|
Change-Id: I2165938df5adfd2b3891cb1335364b78e3f9c474
Signed-off-by: Paul Fertser <fercerpav@gmail.com>
|
|
This internationalization documentation patch provides the developers
with specific recommendations on using vue-i18n-extract.js tool to
ensure translations consistency.
Signed-off-by: Paul Fertser <fercerpav@gmail.com>
Change-Id: I506091c97043ad3f50c4753daddd450abe9744fc
|
|
The themes section of the webui style guide contained a section named
theme. This section also included information about the environmental
builds. The name was misleading and confusing, so we determined in the
GUI Design Work Group to update the section name.
Signed-off-by: Derick Montague <derick.montague@ibm.com>
Change-Id: Iad245199048f65f346e6c033a766605f303b0ade
|
|
Form quick start documentation contains info on
using the form and form group components, and the Vuelidate plugin.
This doc also provides a template for creating a new form.
Signed-off-by: Dixsie Wolmers <dixsie@ibm.com>
Change-Id: I5d05141ff05cd069e55853a8b2cb4adecb3c848a
|
|
- Explains how internationalization makes the OpenBMC Web UI
multilingual
- Explains the use of vue-i18n
Signed-off-by: Sandeepa Singh <sandeepa.singh@ibm.com>
Change-Id: Ica273814a857f37502b9bb71800de7660d4fa49b
|
|
To meet best practices and standards for markdown, this commit updates
all markdown files used for the VuePress documentation so that each
line is limited to 80 characters.
Signed-off-by: Derick Montague <derick.montague@ibm.com>
Change-Id: I0cadb33343ce1bc331dfefd096d8137a04c33604
|
|
Signed-off-by: Suren Neware <sneware9@in.ibm.com>
Change-Id: I93aa1082880985fef316424a9cf400a9d0a8c2b3
|
|
- Remove pages without content
- Update overview page name
Signed-off-by: Derick Montague <derick.montague@ibm.com>
Change-Id: Icf26e65d72d2900ddbe216be974930bcc9c0e196
|
|
Signed-off-by: Dixsie Wolmers <dixsie@ibm.com>
Change-Id: Id75c6e923682f199440ca8d3fd986f034a8f332b
|
|
Includes documentation for multi-lined toast body, refresh app link,
and timestamp.
Signed-off-by: Yoshie Muranaka <yoshiemuranaka@gmail.com>
Change-Id: Id95e1858a703cc0be44f1f6de51fd6daab24876d
|
|
Signed-off-by: Sukanya Pandey <sukapan1@in.ibm.com>
Change-Id: I578ead17e5870ae0981aba775c258b49d697a208
|
|
The component structure was not consistent. We determined how we
wanted to save image examples within the component directory, but not
all of the components were updated. The result was that some images
were not displaying on the component pages. This patchset resolves
that issue, along with removing the page component since it is not an
actual component within the application.
- Add directory for each component, move example images to the
directory, and update the image path
- Create a page-title and page-section directory and index.md for each
- Move content for page-title and page-section from the page.md file
into the index.md within the respective component directory
- Delete the page.md from the component directory as it is not a
component
- Update links to page.md in the page-anatomy.md file.
Signed-off-by: Derick Montague <derick.montague@ibm.com>
Change-Id: I1e554adf71abb4c84f423a30d3c3b598f678ade0
|
|
Signed-off-by: Yoshie Muranaka <yoshiemuranaka@gmail.com>
Change-Id: Ic40d7b4580417590b2d465fe359198c92354c242
|
|
Signed-off-by: Yoshie Muranaka <yoshiemuranaka@gmail.com>
Change-Id: Id450f9f461c40c5ff7e1c9510b082e88abd1a3ef
|
|
Signed-off-by: Yoshie Muranaka <yoshiemuranaka@gmail.com>
Change-Id: I3ab86678e2cc4f9771a07026a417298d716de649
|
|
Signed-off-by: Sukanya Pandey <sukapan1@in.ibm.com>
Change-Id: Id19854ed326eb55f6443a7015579ea6375193d1f
|
|
Signed-off-by: Yoshie Muranaka <yoshiemuranaka@gmail.com>
Change-Id: I52f71d9f3098e28d09c21c9293fe051878a41673
|
|
Components include: b-container, page-title, and page-section.
Signed-off-by: Dixsie Wolmers <dixsie@ibm.com>
Change-Id: I5933767d44504dbfb87c2772d140de4d0607d4ab
|
|
Signed-off-by: Sukanya Pandey <sukapan1@in.ibm.com>
Change-Id: I7fa990794533c80bc73bbcd15a0d7191ee70cd11
|
|
Create table directory to organize related images in the same
directory and add updates to image path that will fix incorrect
path in final build.
Signed-off-by: Yoshie Muranaka <yoshiemuranaka@gmail.com>
Change-Id: I896ed5babc596306c082ca6e79aa3c0948a61227
|
|
Signed-off-by: Dixsie Wolmers <dixsie@ibm.com>
Change-Id: I8597247305e1c3f7958f84b8496a7b75914b85c8
|
|
- Add unit testing section and page
Signed-off-by: Derick Montague <derick.montague@ibm.com>
Change-Id: I693b0576a5815aa7181c5ce068334509b99c7fc7
|
|
- Create directory in order to use relative path for images and better
organize content
Signed-off-by: Derick Montague <derick.montague@ibm.com>
Change-Id: Ia5085c1b72c162016ed4da037a15f5f53c744742
|
|
Signed-off-by: Yoshie Muranaka <yoshiemuranaka@gmail.com>
Change-Id: I6123210454c0d18f973cf4ee91a6891a938579a2
|
|
We are moving away from importing application components directly into
the VuePress docs. We will document code snippets and add screenshots
as a visual example.
This commit removes all code and configurations that supported importing
dynamic components into VuePress and added images in place of a working
component example on the page.
Signed-off-by: Yoshie Muranaka <yoshiemuranaka@gmail.com>
Change-Id: I9a75c5d51de8b6d941e4df7ae977d78c043d36e1
|
|
- Update max-width to use 72 character length
- Remove center align of default content and page-nav
- Decrease padding
Signed-off-by: Derick Montague <derick.montague@ibm.com>
Change-Id: Iafff0bc2bd0a64e2959997854e1acfb8804578d3
|
|
Create example BmcTable component to eventually showcase all
functionality. For now, it only includes table sort.
Signed-off-by: Yoshie Muranaka <yoshiemuranaka@gmail.com>
Change-Id: Id3f3ac603a58d5dbc8674ec5b2d9d059e935407d
|
|
Adds Table documentation page under Components section with
an example of how to create a basic table.
Signed-off-by: Yoshie Muranaka <yoshiemuranaka@gmail.com>
Change-Id: I9033fae662bd46d301edfb02d8a5c108e05017c6
|
|
There were two broken links on the Getting Started page. These were
broke when changed the docs information architecture (IA) and when
we removed the guidelines/overview page.
Signed-off-by: Derick Montague <derick.montague@ibm.com>
Change-Id: Ie12bd1b1320db4e8922c4a08d944d74aaf53a2a4
|
|
- Add StatusIcon to ehnaceApp and use the component imported into the
the documentation's component/app-imports directory to resolve fill
rendering bug in the Alert component
- Remove the scoped attribute to make the changes work for alerts in
documentation
- Update StatusIcon component to match changes to application component
Signed-off-by: Derick Montague <derick.montague@ibm.com>
Change-Id: I4090d58f78a1d10d9745ee592424ca0c0c91c610
|
|
The page anatomy quick start is intended to give developers a
quick reference for building out new pages.
Signed-off-by: Dixsie Wolmers <dixsie@ibm.com>
Change-Id: Idfed9e62822283c971e228a8a8a186ae05e485ae
|
|
Signed-off-by: Derick Montague <derick.montague@ibm.com>
Change-Id: I2dd0fb44a78da62864442fd633654a3e4f887184
|
|
Signed-off-by: Dixsie Wolmers <dixsie@ibm.com>
Change-Id: I6238767b89eda7e0aaebe73faa2ca3e0a61ebf5e
|
|
Signed-off-by: Derick Montague <derick.montague@ibm.com>
Change-Id: Ia00d714b0d33b849a6e9dde8d25e9e9c78d36002
|
|
- Remove all color-100 tokens since we are using bootstrap's built-in
functions for color lightening
- Update changed hex values
Signed-off-by: Derick Montague <derick.montague@ibm.com>
Change-Id: I08894fdb64021e38ea8b5c0f47e127d72f3d3ecd
|
|
- Move the env.md from /env directory to be displayed in the theming
section
- Update copy to remove references to downstream changes since changes
are made upstream
Signed-off-by: Derick Montague <derick.montague@ibm.com>
Change-Id: I5ed3c62a9534c071b6dbd7f69ed35d457353a628
|
|
Signed-off-by: Derick Montague <derick.montague@ibm.com>
Change-Id: I4399271998fca392f457d0d1769f1e9337881f44
|
|
Using the i18n module in the BVToastMixin file caused an issue with
VuePress that resulted in the static files not being created and the
documentation rendering as a blank page.
- Removed the import of the BVToastMixin
- Copied BVToastMixin to docs components and removed i18n
- Copied the StatusIcon to docs components to so icons will render
with the correct fill color in the toast notifications
GitHub Issue: https://github.com/openbmc/webui-vue/issues/40
Signed-off-by: Derick Montague <derick.montague@ibm.com>
Change-Id: Ie479df17d529ad2803c41e7442801e13601a0a02
|
|
- Add '@/' instead of '../../../'
Signed-off-by: Suren Neware <sneware9@in.ibm.com>
Change-Id: Ida1dc26f2bd62f38914a74b729ee8fd143c360ac
|