[OpenNMS/opennms] e57195: NMS-20182: Various UI fixes after the PrimeVue / O...

  Branch: refs/heads/foundation-2026
  Home:   https://github.com/OpenNMS/opennms
  Commit: e57195b8e6c0c914bca00145dc48ce19d843c867
      https://github.com/OpenNMS/opennms/commit/e57195b8e6c0c914bca00145dc48ce19d843c867
  Author: Scott Theleman <[email protected]>
  Date:   2026-08-25 (Tue, 25 Aug 2026)

  Changed paths:
    M core/web-assets/src/main/assets/style/opennms-theme.scss
    M opennms-base-assembly/src/main/filtered/etc/search-actions.xml
    M opennms-webapp/src/main/webapp/WEB-INF/jsp/alarm/list.jsp
    M opennms-webapp/src/main/webapp/account/selfService/passwordGate.jsp
    M opennms-webapp/src/main/webapp/includes/bootstrap-footer.jsp
    M opennms-webapp/src/main/webapp/includes/bootstrap.jsp
    M opennms-webapp/src/main/webapp/login.jsp
    M smoke-test/src/test/java/org/opennms/smoketest/AdminPageIT.java
    M smoke-test/src/test/java/org/opennms/smoketest/MenuHeaderIT.java
    M ui/packages/onms-ui/src/components/OnmsDialog.vue
    M ui/packages/onms-ui/src/components/OnmsDrawer.vue
    M ui/src/components/Common/FormField.vue
    M ui/src/components/Device/DCBTable.vue
    M ui/src/components/Layout/Footer.vue
    M ui/src/components/Logs/Editor.vue
    M ui/src/components/Logs/Logs.vue
    M ui/src/components/Nodes/ColumnSelectionDrawer.vue
    M ui/src/components/Nodes/NodeAdvancedFiltersDrawer.vue
    M ui/src/components/SCV/SCVForm.vue
    M ui/src/components/SnmpConfiguration/SnmpConfigDetailsPanel.vue
    M ui/src/containers/Map.vue
    M ui/src/main/App.vue
    M ui/src/styles/onms-base.scss
    M ui/src/styles/opennms-styles.scss
    M ui/tests/components/Common/FormField.test.ts

  Log Message:
  -----------
  NMS-20182: Various UI fixes after the PrimeVue / OnmsUI migration (#8808)

* NMS-20182: Keep legacy <textarea>s readable in dark mode

The alarm detail page's Sticky Memo and Journal Memo textareas carry no
`.form-control` class, so Bootstrap gives them no explicit background or
text color. In dark mode PrimeVue emits `color-scheme: dark` on the
document, which inherits into the legacy JSP page and makes the browser
paint those textareas with dark UA field colors on a light-only page.

Add `textarea` to the existing rule that already pins native selects,
checkboxes and radios to `color-scheme: light`, so legacy textareas stay
dark-on-light in both themes. Only the menu bundle imports this
stylesheet, so the SPA's PrimeVue Textarea (which sets its colors from
theme tokens) is unaffected.

* NMS-20182: Stop a:visited from overriding button label colors

`a:visited` has a pseudo-class in the selector, so it outranks Bootstrap's
single-class `.btn-secondary`. Any list-page menu item that was both an
anchor with an href and an already-visited URL therefore lost its white
label: "View all alarms" and "Short/Long Listing" on the alarm list,
"View all events" and the "Next" pagination button on the event list. The
items rendered as anchors without an href ("Advanced Search", "Severity
Legend", "Help") are never :visited, which is why they stayed white.

The rule was redundant anyway — the `a` rule above it already colors
visited links, since an author declaration beats the UA's visited color —
so drop it from both places it was declared and leave a note about why it
should not come back. Also drop the two `text-white` workarounds it had
prompted on the alarm list, and DCBTable's scoped `a:visited`, so its
node links keep one color in both states.

* Add Vue Resource Graphs, Geographical Map and Topological Map to 'search-actions.xml' so they are searchable.

* NMS-20182: Lock page scroll while a drawer or modal dialog is open

The drawers are modal, but PrimeVue defaults `blockScroll` to false, so the
wheel over an open drawer scrolled the node table behind it — the page's
scrollbar sat at the viewport edge and read as the drawer's. In the Advanced
Filters drawer it was worse: that drawer's own scroller made two adjacent
scrollbars, only one of which belonged to it.

Turn `blockScroll` on in the seam wrappers — unconditionally for Drawer,
tracking `modal` for Dialog, which also covers OnmsConfirmationDialog and
OnmsMessageDialog.

That alone is not enough here. `html { overflow-x: hidden }` makes <html> the
SPA's scroll container, so the body class PrimeVue toggles never reaches the
element that actually scrolls; lock <html> off that class instead. Match open
`.p-overlay-mask` elements as well, because PrimeVue's block/unblock is not
reference-counted: closing a dialog opened inside an open drawer removed the
body class and unlocked the page while the drawer was still up. Add
`scrollbar-gutter: stable` so hiding the page scrollbar does not shift the
fixed Menubar and side rail — PrimeVue's `padding-right` compensation only
moves in-flow content.

Finally, drop the two node drawers' inner `height: 100%; overflow: auto`, so
PrimeVue's `.p-drawer-content` is each drawer's single scroll container.

* NMS-20182: Align the SNMP Add button with the inputs beside it

The button sat outside any FormField, so it never skipped the vertical space
its siblings' labels occupy and its top edge landed a label-height above their
inputs. An eyeballed `margin-top` had been standing in for that space and was
too small.

Give FormField a `reserveLabelSpace` prop instead: with no label of its own it
lays out an aria-hidden, `for`-less <label> so an unlabelled field still lines
its control up with the labelled fields next to it. A real <label> element is
what makes this work — the label line box comes from the global `label`
typography, which a <span> would not pick up — and it keeps the stand-in in
step with the labelled case for free.

The Add button now sits in such a FormField and needs no offset of its own;
matching the input height keeps their centers aligned as before.

* NMS-20182: Sit the JSP footer at the bottom of a short page

JSP pages left #content a plain block, so the footer stopped wherever the
content ended: on a short page it floated hundreds of pixels above the bottom
of the window (157px into a 969px viewport on the node list). The Vue SPA does
not have this problem because its layout grid is `min-height: 100vh` with a 1fr
content row that takes up the slack.

Give #content the same shape with flexbox. Block layout has no way to push a
last child down — auto margins only work in flex and grid — so the container has
to become a flex column.

Page markup must not become flex items in the process: that stretches
inline-level children (the outage list's .btn-group grew to the full content
width), collapses ones sized by auto margins (the reports page's <hr> shrank to
nothing) and stops margin collapsing. So bootstrap.jsp wraps everything but the
footer in a new #content-body div, leaving #content with exactly two flex items
and all page markup inside a plain block, where it lays out exactly as before.
#content-body takes the slack; the footer follows it.

Also drop the SPA's default body margin, which sat outside .app-layout's
`min-height: 100vh`: it made every page overflow the viewport by ~16px, so even
a page that fit scrolled and its footer never reached the bottom of the window.
Both stacks now put the footer exactly at the bottom edge.

* NMS-20182: Drop the SPA footer's 1rem spacer div

The spacer sat inside the layout's footer row, making it 57px tall instead of
41px. A page whose content needs the full height left over from the header —
SNMP Config, OpenAPI and Resource Graphs all want exactly 868px at a 969px
viewport — therefore overflowed by the spacer's 16px and grew a scrollbar with
nothing to scroll to. Those three now fit exactly, and the footer looks the same
without it: it keeps its own 0.5rem padding and top border.

* NMS-20182: Stop Map, Logs and SCV clipping the footer

Each of these pages sizes its tall element with a hand-picked `calc(100vh - x)`,
and each x was too small for the chrome actually above and below it, so the page
overflowed the viewport and pushed the footer off the bottom of the window — most
visibly on the map, where the footer was cut in half.

Derive the subtraction instead of guessing it: the masthead comes off via
--onms-header-height, then the 41px footer band, then whatever that page stacks
around the element — a breadcrumb row, card padding, a heading, a filter box.
Each site spells the terms out so the next person can check the arithmetic
against what they see. Map was 21px over, Logs 62px, SCV 7px; all three now fit
exactly, at a 969px viewport and at 720px.

The Logs page needed both halves of its card: capping only the editor left the
log list, with its heading and filter box, as the taller column.

* NMS-20182: Address PR review on the footer and scroll-lock changes

Four fixes from review:

Wrap the custom-footer includes in a block of their own. They are emitted after
the footer, so an install's markup was landing as a direct flex item of #content
— the exact case #content-body exists to prevent. Confirmed with a test include:
as flex items a <span> stretched from 160px to the full 1562px and an <hr> sized
by auto margins collapsed to zero.

Lock page scroll on the dialog and drawer masks specifically, not on
`.p-overlay-mask` alone. DataTable, Tree, TreeTable, Image, Galleria and SpeedDial
put that class on their masks unconditionally, so the broader selector would have
frozen page scroll for the length of a table's loading state the day anyone wires
up OnmsTable's loading prop.

Replace the 41px footer band literal with an --onms-footer-height token, defined
in Footer.vue next to the element it describes and mirroring how Menubar.vue owns
--onms-header-height. `.footer` takes its min-height from the token so the two
cannot drift, and the four pages that size against it now consume it.

Close #content-body and #content on login.jsp and passwordGate.jsp. They include
bootstrap.jsp but deliberately not bootstrap-footer.jsp, so nothing else closed
the divs it opens. Both stay footer-less.

* fix smoke tests



To unsubscribe from these emails, change your notification settings at https://github.com/OpenNMS/opennms/settings/notifications


_______________________________________________
Please read the OpenNMS Mailing List FAQ:
http://www.opennms.org/wiki/index.php?page=MailingListFaq
opennms-cvs mailing list

To *unsubscribe* or change your subscription options, see the bottom of this page:
https://lists.sourceforge.net/lists/listinfo/opennms-cvs