[OpenNMS/opennms] 807a2a: fix(ui): align and size-normalize DCB action-butto...

  Branch: refs/heads/jira/NMS-20033-ui-styling-pr-review-issues
  Home:   https://github.com/OpenNMS/opennms
  Commit: 807a2ab7b0f4395e82ab1d4b18caa92954b4c75a
      https://github.com/OpenNMS/opennms/commit/807a2ab7b0f4395e82ab1d4b18caa92954b4c75a
  Author: Scott Theleman <[email protected]>
  Date:   2026-07-23 (Thu, 23 Jul 2026)

  Changed paths:
    M ui/src/components/Device/DCBTable.vue

  Log Message:
  -----------
  fix(ui): align and size-normalize DCB action-button icons (NMS-20033)

Icons inside .btn-container came from mixed sources: History/Download are 1em
OnmsIcon SVGs (~18px) while Compare (assets/Compare.vue) hardcodes 24px plus a
margin-top: -10px hack, so it rendered larger and misaligned. Normalize every
.btn-icon to 1.5em and neutralize the per-asset px sizes and -10px margins
(scoped to .btn-container so the shared Compare/Backup assets used by the DCB
modals are unaffected), and flex-center each icon with its label.


  Commit: dd076d9ac668ded1be49f526935f1dd3f627fa69
      https://github.com/OpenNMS/opennms/commit/dd076d9ac668ded1be49f526935f1dd3f627fa69
  Author: Scott Theleman <[email protected]>
  Date:   2026-07-23 (Thu, 23 Jul 2026)

  Changed paths:
    M ui/src/components/EventConfigEventCreate/BasicInformation.vue
    M ui/src/components/EventConfiguration/Dialog/CreateEventConfigurationDialog.vue
    M ui/src/components/EventConfiguration/Dialog/UploadedFileRenameDialog.vue
    M ui/src/components/SCV/ScvSearchDrawer.vue
    M ui/src/components/SnmpDataCollection/Dialog/UploadedFileRenameDialog.vue
    M ui/src/components/SnmpDataCollection/SnmpDataCollectionSourceDetail/Drawer/MibGroupCreationDrawer.vue
    M ui/src/components/SnmpDataCollection/SnmpDataCollectionSourceDetail/Drawer/ResourceTypeCreationDrawer.vue
    M ui/src/components/SnmpDataCollection/SnmpDataCollectionSourceDetail/Drawer/SnmpDataCollectionSourceProfilesDrawer.vue
    M ui/src/components/TrapdConfiguration/CreateSnmpV3User.vue

  Log Message:
  -----------
  style(ui): outline all text-variant Cancel buttons (NMS-20033)

Add the outlined prop to every PrimeVue Button/PButton that has the text prop
and a Cancel label, so they read as bordered rather than borderless. Covers the
dialogs and drawers across EventConfiguration, SnmpDataCollection, Trapd, and
SCV (including the second Cancel button in the MIB group and resource type
creation drawers). Buttons that were already outlined/filled are unchanged.


  Commit: 88a7d963342533a932697ff5d180bfcea0bbe7fc
      https://github.com/OpenNMS/opennms/commit/88a7d963342533a932697ff5d180bfcea0bbe7fc
  Author: Scott Theleman <[email protected]>
  Date:   2026-07-23 (Thu, 23 Jul 2026)

  Changed paths:
    M ui/src/containers/DeviceConfigBackup.vue

  Log Message:
  -----------
  dcb fix


  Commit: 029d437ddff613565a1ac4f0b802ea2560e98c8f
      https://github.com/OpenNMS/opennms/commit/029d437ddff613565a1ac4f0b802ea2560e98c8f
  Author: Scott Theleman <[email protected]>
  Date:   2026-07-23 (Thu, 23 Jul 2026)

  Changed paths:
    M ui/src/styles/primevue-overrides.scss

  Log Message:
  -----------
  fix(ui): show border on outlined+text buttons (NMS-20033)

A PrimeVue Button with both the outlined and text props applies both
p-button-outlined and p-button-text classes; the text variant's transparent
border-color wins in the cascade, so the 2px outlined border rendered
invisibly (visible on outlined-only buttons, not on the text Cancel buttons).
Reassert border-color: currentColor for the .p-button-outlined.p-button-text
combination so the outline shows. One global rule covers every such button.


  Commit: 10a4cebd4131841942dc8de3b3fe736b4069f021
      https://github.com/OpenNMS/opennms/commit/10a4cebd4131841942dc8de3b3fe736b4069f021
  Author: Scott Theleman <[email protected]>
  Date:   2026-07-23 (Thu, 23 Jul 2026)

  Changed paths:
    M ui/src/components/Device/DCBSearch.vue
    M ui/src/components/EventConfiguration/EventConfigSourceTable.vue
    M ui/src/components/FileEditor/Search.vue
    M ui/src/components/Nodes/NodesTable.vue
    M ui/src/components/SnmpConfiguration/SnmpConfigDefinitionsTable.vue
    M ui/src/components/SnmpConfiguration/SnmpConfigProfilesTable.vue
    M ui/src/styles/primevue-overrides.scss

  Log Message:
  -----------
  fix(ui): normalize search-input icon size to 1.5rem (NMS-20033)

The IconField search glyph is an OnmsIcon (1em SVG) sized by the .p-inputicon
font-size. PrimeVue's default rendered it too small on most screens, while six
screens overrode it to 1.75rem (too large) with duplicated positioning CSS.
Replace those scattered overrides with one global .p-inputicon rule at 1.5rem,
centered on the input mid-line (top:50% + margin-top of -1/2 the icon height).


  Commit: 2c1847961d7d294f7f165a6238857f0f77212eab
      https://github.com/OpenNMS/opennms/commit/2c1847961d7d294f7f165a6238857f0f77212eab
  Author: Scott Theleman <[email protected]>
  Date:   2026-07-23 (Thu, 23 Jul 2026)

  Changed paths:
    M ui/src/components/Resources/Graph.vue

  Log Message:
  -----------
  fix(ui): destroy Chart.js instances to stop canvas reuse errors on resource graphs (NMS-20033)

Graph.vue created a Chart.js chart but never destroyed it, so a reused canvas
(same ${label}-${definition} id after navigating away/back or infinite-scroll
replacement) still had a live chart. Chart.js then threw 'Canvas is already in
use...', which the render() catch swallowed — the graph silently failed to
appear on the first try. Destroy any prior chart on the canvas before creating
a new one (Chart.getChart(ctx)?.destroy()) and destroy on unmount.


  Commit: 7a2d043730033cd4682e7e6239653650be0af603
      https://github.com/OpenNMS/opennms/commit/7a2d043730033cd4682e7e6239653650be0af603
  Author: Scott Theleman <[email protected]>
  Date:   2026-07-23 (Thu, 23 Jul 2026)

  Changed paths:
    M ui/src/components/Resources/NodeResourceList.vue

  Log Message:
  -----------
  fix(ui): await graph definitions before navigating on Graph All (NMS-20033)

graphAll() fired getGraphDefinitionsByResourceIds() without awaiting it and
immediately routed to the graphs view, so Graphs.vue mounted while the fetch
was in flight. Graphs.vue snapshots graphStore.definitionsList at setup, so an
empty list meant the initial addGraphDefinition() calls had nothing to show and
no graphs rendered on the first attempt. Await the fetch first (matching the
sibling 'graph selected' handler).


  Commit: 82dfc5254c1112fd3fcd32238d3388c97e748180
      https://github.com/OpenNMS/opennms/commit/82dfc5254c1112fd3fcd32238d3388c97e748180
  Author: Scott Theleman <[email protected]>
  Date:   2026-07-23 (Thu, 23 Jul 2026)

  Changed paths:
    M ui/src/components/Resources/Graphs.vue

  Log Message:
  -----------
  refactor(ui): seed resource graphs reactively from the store (NMS-20033)

Graphs.vue snapshotted graphStore.definitionsList at setup and consumed it in
onMounted, so an empty list at that instant meant no graphs rendered. Replace
the snapshot with a store-reactive seed (watch on definitionsList, immediate)
that fills the initial page once definitions are available, whether already
loaded at mount or arriving shortly after. Makes the first render depend on
data availability rather than mount timing (hardens the earlier graphAll fix).


  Commit: 91220672529079f1092042e0655da8b26eec1bf2
      https://github.com/OpenNMS/opennms/commit/91220672529079f1092042e0655da8b26eec1bf2
  Author: Scott Theleman <[email protected]>
  Date:   2026-07-23 (Thu, 23 Jul 2026)

  Changed paths:
    M ui/src/components/Resources/Graph.vue
    M ui/src/components/SnmpDataCollection/SnmpDataCollectionSourceDetail/Drawer/SnmpDataCollectionSourceProfilesDrawer.vue

  Log Message:
  -----------
  style(ui): uppercase resource-graph tabs; fix oversized profiles autocomplete (NMS-20033)

- Graph.vue: uppercase the Graph/Data tab labels (text-transform on .p-tab).
- SnmpDataCollectionSourceProfilesDrawer: the Add Profile AutoComplete isn't in
  a FormField, so its input inherited the global 3.75rem .p-inputtext height and
  read too tall. Constrain it to the app-standard 3rem (the value FormField
  applies), matching the correctly-sized System Definition MIB Groups control.


  Commit: 29502386cbf9cb82f0e5960f0d7f82c075878827
      https://github.com/OpenNMS/opennms/commit/29502386cbf9cb82f0e5960f0d7f82c075878827
  Author: Scott Theleman <[email protected]>
  Date:   2026-07-23 (Thu, 23 Jul 2026)

  Changed paths:
    M ui/src/components/SnmpDataCollection/SnmpDataCollectionProfile/SnmpDataCollectionProfileDetails.vue
    M ui/src/containers/SnmpDataCollection.vue

  Log Message:
  -----------
  styling tweaks


  Commit: 1d0cde2b471f6a0f68b2b31b1b8d665fcd0140d4
      https://github.com/OpenNMS/opennms/commit/1d0cde2b471f6a0f68b2b31b1b8d665fcd0140d4
  Author: Scott Theleman <[email protected]>
  Date:   2026-07-23 (Thu, 23 Jul 2026)

  Changed paths:
    M ui/src/components/Common/FormField.vue
    M ui/src/components/SnmpDataCollection/SnmpDataCollectionProfile/ProfileSourcesTab.vue
    M ui/src/components/SnmpDataCollection/SnmpDataCollectionSourceDetail/Drawer/SnmpDataCollectionSourceProfilesDrawer.vue
    M ui/src/styles/primevue-overrides.scss

  Log Message:
  -----------
  refactor(ui): promote 3rem input height to global; wrap two form autocompletes in FormField (NMS-20033)

- Promote height: 3rem to the global .p-inputtext/.p-select rule (was 3.75rem)
  and drop FormField's now-redundant pilot height override. 92% of controls
  were already 3rem via FormField; this brings the ~12 non-FormField controls
  (e.g. the Profiles/Add Source autocompletes) into line and retires the
  vestigial 3.75rem default. FormField keeps its multiselect min-height/width.
- Wrap the 'Add Profile' (SnmpDataCollectionSourceProfilesDrawer) and 'Add
  Source' (ProfileSourcesTab) autocompletes in FormField for label/structure
  consistency; remove the bespoke height CSS added earlier (global now covers it).


  Commit: d2abaa7c60fe67a01bad01e0a9ac05eb9cf8b99f
      https://github.com/OpenNMS/opennms/commit/d2abaa7c60fe67a01bad01e0a9ac05eb9cf8b99f
  Author: Scott Theleman <[email protected]>
  Date:   2026-07-23 (Thu, 23 Jul 2026)

  Changed paths:
    M ui/src/components/Layout/Footer.vue

  Log Message:
  -----------
  fix(ui): give the footer a dark background in dark mode (NMS-20033)

The footer hardcoded background-color: #e9ecef, so it stayed light in dark mode
on the Vue SPA pages. Add an .open-dark override using var(--p-content-background)
(and a theme-aware border-top color) so it reads correctly in dark mode; light
mode is unchanged. JSP pages are unaffected.


  Commit: 4e5994f961bc8df14ad6501589b27737cdd87176
      https://github.com/OpenNMS/opennms/commit/4e5994f961bc8df14ad6501589b27737cdd87176
  Author: Scott Theleman <[email protected]>
  Date:   2026-07-23 (Thu, 23 Jul 2026)

  Changed paths:
    M ui/src/components/Layout/Footer.vue

  Log Message:
  -----------
  more tweaks


Compare: https://github.com/OpenNMS/opennms/compare/013234dc8687...4e5994f961bc

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