Skip to content

feat(ui): warn when SPA-vs-backend major version drifts#7

Open
cnewkirk wants to merge 1 commit into
developfrom
feat/ui-api-compat-banner
Open

feat(ui): warn when SPA-vs-backend major version drifts#7
cnewkirk wants to merge 1 commit into
developfrom
feat/ui-api-compat-banner

Conversation

@cnewkirk

@cnewkirk cnewkirk commented Apr 29, 2026

Copy link
Copy Markdown
Owner

Summary

On SPA boot, fetches /opennms/rest/info and compares the backend's major version against a UI_COMPATIBLE_API constant baked into the build. If they don't match, renders a fixed yellow banner at the bottom of the screen with a dismiss button. Does not block use — just informs the user that the UI was built for a different OpenNMS major and some features may not work correctly.

What changes

  • ui/src/main/main.ts: top-level await checkApiCompatibility() runs once at boot; the resulting message (or null) is provided via Vue's inject API.
  • ui/src/main/App.vue: injects the value, wraps it in a ref so the dismiss button can clear it, renders the banner when set.
  • Banner background uses var(--p-yellow-500, #eab308) — picks up PrimeVue's theme color when available, falls back to a hardcoded yellow otherwise.

Why ship this with versioning

A versioned UI (#6) makes it possible to install a SPA built for OpenNMS 35.x onto a 36.x backend. That's a useful escape valve, but users need a visible signal that they're in that state. This banner is the cheapest possible signal — pure client-side, no backend changes, dismissible.

Test plan

  • yarn build succeeds against develop
  • Manual: serve the SPA against a matching backend — no banner. Modify UI_COMPATIBLE_API to '34', rebuild, reload — banner appears with version-mismatch message; dismiss button hides it
  • Manual: ensure dismissal does not persist across reloads (banner re-checks on each boot — by design)

Relationship to other PRs in this series

Fetches /opennms/rest/info at startup, compares the backend major version
against UI_COMPATIBLE_API ('35'), and renders a fixed yellow banner if they
differ. Banner is client-side only and dismissible via an × button.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant