ALEC-307: Migrate the ALEC UI to Onms Vue components - #175
joseanesONMS wants to merge 3 commits into
Conversation
…e bootstrap The OpenNMS 37 UI standardized on @opennms/onms-ui (Onms-* wrappers around PrimeVue, NMS-20029). The package is private/workspace-only, so ALEC vendors it (pinned to opennms develop @ 5ebe7e2c828) behind an '@opennms/onms-ui' alias that makes the published package a drop-in swap later. Also vendored: the OpenNMS PrimeVue preset, the --onms-* token theme, severity classes, 25 host icons, FormField and HelpBadge. theme/primevue-host.ts makes bundled PrimeVue work without app.use() (the host app renders ALEC's root, so we never own the app): on a PrimeVue host it bridges the host's live config to our bundled injection Symbols so theme and dark mode stay host-managed; on a Feather host it installs our own config with the vendored preset into the host app's globalProperties. Toolchain aligned with the host for the modern SFC syntax the vendored components use: TS 5.5, vue-tsc 3.3, Vue 3.5 / vue-router 4.6 types (runtime still resolves to the host's globals). npm's package-lock.json replaces the stale yarn.lock. ESLint now errors on primevue/* and @featherds/* imports outside the seam, mirroring the host rule. https://opennms.atlassian.net/browse/ALEC-307
All 30 Feather-using components/containers now use the vendored Onms-* wrappers: buttons/icon-buttons, chips, radios, checkboxes, selects, inputs, textareas, tabs, drawers, spinners, toasts (useOnmsToast via the single OnmsToastHost in MainContainer), FormField-wrapped labelled fields, and the shared severity classes for every severity affordance. FeatherDS is fully removed: the 28 @featherds packages, the ALEC-306 feather-styles bootstrap and vendored feather themes, theme-dev.ts, and variables.scss are gone; styling rides on --onms-* tokens (which resolve through PrimeVue --p-* tokens supplied by the bundled preset on any host). vue-tsc, eslint (0 errors), and all 86 unit tests pass; regenerated bundles included. https://opennms.atlassian.net/browse/ALEC-307
White-on-green failed contrast in dark mode; both Add Alarms buttons now render as standard filled primary OnmsButtons like every other action. https://opennms.atlassian.net/browse/ALEC-307
synqotik
left a comment
There was a problem hiding this comment.
Most of these files (e.g. anything in ui/components or onms-ui) should not have been added.
The Feather components should be rewritten using the onms-ui package, however the actual onms-ui code and implementation should not be in this codebase. After compilation, when you actually run it against an OpenNMS instance, the code will wire up at runtime.
If this doesn't make sense, or isn't working, let me know, I'm happy to take a look myself.
|
We will create a branch for an alec 4.0 that will be compatible with Meridian 26+. This ticket will go into that branch. Current claude findings in response to current concerns: I checked the opennms checkout to confirm the reviewer's premise, and it holds.
What has to come out of the branch
Three gaps the reviewer's message does not cover
|
Jira: https://opennms.atlassian.net/browse/ALEC-307
Rewrites the ALEC plugin UI from FeatherDS to the OpenNMS Onms-* component stack so it renders natively on the OpenNMS 37 Vue UI and stays self-contained on Feather-based hosts (Meridian, OpenNMS ≤36).
@opennms/onms-uiis private/workspace-only today, so the 35 wrappers are vendored (pinned to opennms develop5ebe7e2c828) behind an@opennms/onms-uialias the published package can later replace as a drop-in.ui/src/theme/primevue-host.tsbridges bundled PrimeVue to whichever host mounts the plugin: on a PrimeVue host the live host config drives theme and dark mode; on a Feather host the vendored OpenNMS preset self-installs (the host app renders ALEC's root, soapp.use()is never available to a plugin).useOnmsToast, and the shared severity classes — and FeatherDS is fully removed (28 packages, the ALEC-306 CSS stopgap,variables.scss).primevue/*and@featherds/*imports outside the seam, mirroring the host rule; the UI toolchain is aligned with the host (TS 5.5, vue-tsc 3.3, Vue 3.5 types — runtime still resolves to the host globals).