Repository navigation
Monitor: flow large grouping cards across page, add Tree grouping cards, fix down-group header contrast - #273
Open
TheWitness wants to merge 3 commits into
Open
TheWitness wants to merge 3 commits into
TheWitness wants to merge 3 commits into
Conversation
…ds, fix down-group header contrast - Large grouping cards now span multiple grid columns (data-span) so a device template with many devices flows across the page instead of forming one tall, narrow column that scrolls off screen; grid switched to auto-fill + dense flow for predictable spanning. - Tree grouping now renders as card panels (one per tree, plus a Non-Tree card) consistent with the Site and Device Template groupings, instead of the legacy section layout. - Grouping card title colours are now !important so Cacti core device-status classes can't override them and leave unreadable text on a coloured header (e.g. a down device template).
TheWitness
requested review from
bmfmancini and
xmacan
and
a balanced review from Copilot
October 10, 2026 23:41
Contributor
There was a problem hiding this comment.
🟡 Changes recommended
Tree ordering is not persisted, Non-Tree labels can be incorrectly trimmed, and fixed spans can break narrow layouts.
3 open findings
What changed in this PR
Updates grouped-card rendering for large device groups and Tree grouping while improving status-header contrast.
Changes:
- Adds responsive multi-column card spans.
- Adds Tree and Non-Tree grouping cards.
- Strengthens status-header colour overrides.
| File | Description |
|---|---|
includes/render.php |
Adds card spanning and Tree card rendering. |
css/monitor.css |
Updates grid flow and header colours. |
CHANGELOG.md |
Documents the three fixes. |
🧠 Review effort: Balanced
💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.
… length from rendered hosts, persist tree card order - CSS: establish the grouping grid as a query container and cap each card's span to the tracks actually available (container queries) so wide cards never force an implicit track / horizontal overflow on narrow layouts. - renderTree cards: derive the default-view trim length from the hosts actually rendered (tree + Non-Tree), matching the Site/Template paths, instead of a tree-only measure that could trim against unrelated devices or collapse to 0. - saveCardOrder: allow the tree grouping and preserve string group ids (tree_<id>/nontree) via a safe character allowlist instead of casting to int, so tree card drags persist. - Share the Non-Tree label through a helper so the string multiset is unchanged.
- Cast preg_replace result to string for strict typing. - Avoid mixing list destructuring with aligned assignments in the tree card builder.
bmfmancini
approved these changes
Oct 11, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Fixes three issues with the new grouped-card Monitor view (introduced in #272), reported against the Device Template grouping on the Monitor page:
1. Large groups now flow across the page
A device template with many devices (e.g. a Net-SNMP template with ~30 hosts) was locked into a single ~260px grid column, producing one tall, narrow column of tiles that scrolled off the bottom of the page. Cards now span multiple grid columns based on their device count (
grid-column: span N,N = min(4, ceil(hosts / 6))), so a large group flows across the page and fills a few rows. The grid usesauto-fill+grid-auto-flow: row densefor predictable spanning and gap backfill.2. Tree grouping is now a card layout
renderSite()andrenderTemplate()were migrated to the card grid in #272, butrenderTree()was left on the legacy section layout, so the Tree grouping had no cards. It now renders as card panels (one card per tree, plus a Non-Tree Devices card), consistent with the Site and Device Template groupings and honouring the Tree filter (all / specific tree / non-tree).3. Down-group header contrast fixed
The grouping card title colours (
.monitorGroupTitle.deviceDown, etc.) were being overridden by Cacti core's device-status classes (.deviceDownforces red text), leaving unreadable low-contrast text on the coloured header of any group whose worst status was down. The title palette is now marked!importantso it always wins, keeping header text readable.Changes
includes/render.php— per-card column span inmonitorRenderGroupCards(); newmonitorRenderTreeCards()and a card-layout branch inrenderTree().css/monitor.css— gridauto-fill+ dense flow;!importanton group title colours.CHANGELOG.md— three bug entries under 3.0.Testing
php -lclean on all changed PHP files.js/monitor.jsjQuery UI sortable) reorders DOM nodes in place, so inline span styles persist;data-groupserialization is unchanged.