Skip to content

mactrack: show MAC authorization as a themed status pill #390

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
TheWitness merged 5 commits into from
Oct 10, 2026
Merged

mactrack: show MAC authorization as a themed status pill #390

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
fdd8cf2
mactrack: show MAC authorization as a themed status pill
TheWitness Oct 10, 2026
68855bc
mactrack: add a Dashboard tab with admin status cards
TheWitness Oct 10, 2026
1d5b84a
mactrack: fix dashboard CI (prepared baseline, tabs test stubs)
TheWitness Oct 10, 2026
9692b53
mactrack: allowlist mactrack_view_dashboard.php for patch coverage
TheWitness Oct 10, 2026
f8c3af6
mactrack: make the MAC authorization pill a working drill-down
TheWitness Oct 10, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,8 @@

--- develop ---

* feature: Add a Dashboard tab (the first MacTrack tab) presenting admin status cards in a draggable, add/remove grid like the syslog Status tab: inventory and device status, address/port totals, collection settings, scan runtimes (with slowest devices), database table sizes, MacWatch activity and vendor breakdown; card layout persists per user
* feature: On the MAC Addresses tab, show the authorization state as a themed status pill (green "Authorized" / red "Unauthorized") consistent with the interface and 802.1x pills, instead of plain coloured text
* feature: On Cacti 1.2.32+, zebra-stripe the interfaces list and add an "Issues" column of clickable status pills (one per legend state, active states highlighted); clicking a pill toggles that state in a new multi-select Status filter styled like Base Cacti's Graph View Graph Templates selector
* feature: Add a status pill column to the 802.1x view after the username; clicking the pill drills down by setting the Status filter to that session status
* feature: Lay the interfaces and dot1x status legends out as a centered footer in normal document flow via a shared `.mactrackLegendFooter` class, instead of a fixed-position overlay that could cover the last rows at the bottom of the page
Expand Down
276 changes: 276 additions & 0 deletions css/cards.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,276 @@
/*
+-------------------------------------------------------------------------+
| Copyright (C) 2004-2026 The Cacti Group |
+-------------------------------------------------------------------------+
| Cacti: The Complete RRDtool-based Graphing Solution |
+-------------------------------------------------------------------------+
*/

/*
* MacTrack Dashboard card chrome. A grid of status cards with a draggable
* header, per-card tools and optional expand. Colours derive from currentColor
* (the active theme's text colour) via color-mix, so the cards follow every
* theme without per-theme overrides. See js/cards.js for the behaviour and
* mactrack_view_dashboard.php for the markup.
*/

.mtdashToolbar {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
margin: 10px 4px 0;
}

.mtdashToolbarLabel {
font-size: 12px;
font-weight: 600;
}

.mtdashAdd {
box-sizing: border-box;
min-width: 220px;
padding: 4px 8px;
border: 1px solid color-mix(in srgb, currentColor 28%, transparent);
border-radius: 7px;
background: color-mix(in srgb, currentColor 4%, transparent);
color: inherit;
font-size: 12px;
}

#mactrack_dashboard.mtdashGrid {
display: grid;
grid-template-columns: repeat(8, minmax(0, 1fr));
align-items: start;
gap: 14px;
margin: 10px 4px;
font-variant-numeric: tabular-nums;
}

.mtdashSpan1 { grid-column: span 2; }
.mtdashSpan2 { grid-column: span 2; }
.mtdashSpan3 { grid-column: span 4; }
.mtdashSpan4 { grid-column: span 4; }

@media (min-width: 1200px) {
.mtdashSpan1 { grid-column: span 1; }
.mtdashSpan2 { grid-column: span 2; }
.mtdashSpan3 { grid-column: span 3; }
.mtdashSpan4 { grid-column: span 4; }
}

.mtdashCard {
box-sizing: border-box;
min-width: 0;
display: flex;
flex-direction: column;
border: 1px solid color-mix(in srgb, currentColor 22%, transparent);
background: color-mix(in srgb, currentColor 5%, transparent);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
border-radius: 4px;
overflow: hidden;
}

.mtdashCardDragging {
opacity: 0.5;
}

.mtdashCardHeader {
box-sizing: border-box;
/* fixed row height so a tool/handle hover highlight never reflows the header */
min-height: 34px;
display: flex;
align-items: center;
gap: 8px;
padding: 7px 10px;
border-bottom: 1px solid color-mix(in srgb, currentColor 18%, transparent);
background: color-mix(in srgb, currentColor 9%, transparent);
}

.mtdashCardDrag {
flex: 0 0 auto;
box-sizing: border-box;
padding: 2px 5px;
/* reserve the border so a hover/focus highlight recolours it instead of resizing the header */
border: 1px solid transparent;
border-radius: 4px;
background: transparent;
color: color-mix(in srgb, currentColor 50%, transparent);
font-size: 13px;
line-height: 1;
cursor: grab;
}

.mtdashCardDrag:hover,
.mtdashCardDrag:focus-visible {
color: currentColor;
border-color: transparent;
background: color-mix(in srgb, currentColor 12%, transparent);
outline: none;
}

.mtdashCardDrag:active {
cursor: grabbing;
}

.mtdashCardTitle {
flex: 1 1 auto;
min-width: 0;
margin: 0;
font-size: 13px;
font-weight: 600;
line-height: 1.3;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}

.mtdashCardTools {
flex: 0 0 auto;
display: flex;
align-items: center;
gap: 1px;
}

.mtdashCardTool {
box-sizing: border-box;
padding: 2px 5px;
/* reserve the border so a hover/focus highlight recolours it instead of resizing the header */
border: 1px solid transparent;
border-radius: 4px;
background: transparent;
color: color-mix(in srgb, currentColor 50%, transparent);
font-size: 12px;
line-height: 1;
cursor: pointer;
}

.mtdashCardTool:hover,
.mtdashCardTool:focus-visible {
color: currentColor;
border-color: transparent;
background: color-mix(in srgb, currentColor 12%, transparent);
outline: none;
}

/* Only the control matching the card's current state is shown. */
.mtdashCard:not(.mtdashCardExpanded) .mtdashCardTool[data-tool="collapse"],
.mtdashCardExpanded .mtdashCardTool[data-tool="expand"] {
display: none;
}

.mtdashCardBody {
padding: 6px 12px 10px;
overflow-x: auto;
}

/* Expandable cards clip to a fixed height until "show more"; a fade hints at the
clipped content. */
.mtdashCardExpandable:not(.mtdashCardExpanded) .mtdashCardBody {
position: relative;
max-height: 220px;
overflow: hidden;
}

.mtdashCardExpandable:not(.mtdashCardExpanded) .mtdashCardBody::after {
content: '';
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 30px;
pointer-events: none;
background: linear-gradient(transparent, color-mix(in srgb, currentColor 5%, transparent));
}

.mtdashTable {
width: 100%;
border-collapse: collapse;
font-size: 12px;
}

.mtdashTable th,
.mtdashTable td {
padding: 6px 8px;
text-align: left;
vertical-align: top;
overflow-wrap: anywhere;
}

.mtdashTable thead th {
font-weight: 600;
border-bottom: 1px solid color-mix(in srgb, currentColor 18%, transparent);
}

.mtdashKv tbody th {
font-weight: normal;
color: color-mix(in srgb, currentColor 75%, transparent);
}

.mtdashKv td {
text-align: right;
font-weight: 600;
}

.mtdashTable tbody tr + tr > th,
.mtdashTable tbody tr + tr > td {
border-top: 1px solid color-mix(in srgb, currentColor 9%, transparent);
}

.mtdashEmpty {
color: color-mix(in srgb, currentColor 60%, transparent);
font-style: italic;
}

/* Proportion bars (device status, table sizes). */
.mtdashBars {
display: flex;
flex-direction: column;
gap: 8px;
}

.mtdashBarRow {
display: flex;
flex-direction: column;
gap: 3px;
}

.mtdashBarHead {
display: flex;
justify-content: space-between;
font-size: 12px;
}

.mtdashBar,
.mtdashInlineBar {
position: relative;
height: 8px;
border-radius: 4px;
background: color-mix(in srgb, currentColor 12%, transparent);
overflow: hidden;
}

.mtdashInlineBar {
display: block;
margin-bottom: 2px;
}

.mtdashBarFill {
display: block;
height: 100%;
border-radius: 4px;
background: color-mix(in srgb, currentColor 45%, transparent);
}

.mtdashBarFill.mtdash-up { background: #2b8435; }
.mtdashBarFill.mtdash-warn { background: #a85712; }
.mtdashBarFill.mtdash-down { background: #a12820; }
.mtdashBarFill.mtdash-none { background: color-mix(in srgb, currentColor 40%, transparent); }

.mtdashDialogBody {
font-variant-numeric: tabular-nums;
}

.mtdashDialogBody .mtdashTable {
font-size: 13px;
}
2 changes: 2 additions & 0 deletions css/classic.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -237,4 +237,6 @@
.mactrackPill.dot1x_running { --pill: #93302a; }
.mactrackPill.dot1x_idle { --pill: #9a6a1a; }
.mactrackPill.dot1x_auth_no_method { --pill: #5f5f57; }
.mactrackPill.mac_authorized { --pill: #2b8435; }
.mactrackPill.mac_unauthorized { --pill: #a12820; }

2 changes: 2 additions & 0 deletions css/dark.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -237,3 +237,5 @@
.mactrackPill.dot1x_running { --pill: #93302a; }
.mactrackPill.dot1x_idle { --pill: #9a6a1a; }
.mactrackPill.dot1x_auth_no_method { --pill: #5f5f57; }
.mactrackPill.mac_authorized { --pill: #2b8435; }
.mactrackPill.mac_unauthorized { --pill: #a12820; }
2 changes: 2 additions & 0 deletions css/deepness.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -237,3 +237,5 @@
.mactrackPill.dot1x_running { --pill: #93302a; }
.mactrackPill.dot1x_idle { --pill: #9a6a1a; }
.mactrackPill.dot1x_auth_no_method { --pill: #5f5f57; }
.mactrackPill.mac_authorized { --pill: #197a54; }
.mactrackPill.mac_unauthorized { --pill: #a12820; }
2 changes: 2 additions & 0 deletions css/mactrack.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -165,4 +165,6 @@
.mactrackPill.dot1x_running { --pill: #a85712; }
.mactrackPill.dot1x_idle { --pill: #5f5f57; }
.mactrackPill.dot1x_auth_no_method { --pill: #5f5f57; }
.mactrackPill.mac_authorized { --pill: #2b8435; }
.mactrackPill.mac_unauthorized { --pill: #a12820; }

2 changes: 2 additions & 0 deletions css/modern.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -244,3 +244,5 @@
.mactrackPill.dot1x_running { --pill: #93302a; }
.mactrackPill.dot1x_idle { --pill: #9a6a1a; }
.mactrackPill.dot1x_auth_no_method { --pill: #5f5f57; }
.mactrackPill.mac_authorized { --pill: #2b8435; }
.mactrackPill.mac_unauthorized { --pill: #a12820; }
2 changes: 2 additions & 0 deletions css/paper-plane.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -237,3 +237,5 @@
.mactrackPill.dot1x_running { --pill: #93302a; }
.mactrackPill.dot1x_idle { --pill: #9a6a1a; }
.mactrackPill.dot1x_auth_no_method { --pill: #5f5f57; }
.mactrackPill.mac_authorized { --pill: #2b8435; }
.mactrackPill.mac_unauthorized { --pill: #a12820; }
2 changes: 2 additions & 0 deletions css/paw.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -237,3 +237,5 @@
.mactrackPill.dot1x_running { --pill: #93302a; }
.mactrackPill.dot1x_idle { --pill: #9a6a1a; }
.mactrackPill.dot1x_auth_no_method { --pill: #5f5f57; }
.mactrackPill.mac_authorized { --pill: #2b8435; }
.mactrackPill.mac_unauthorized { --pill: #a12820; }
2 changes: 2 additions & 0 deletions css/sunrise.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -237,3 +237,5 @@
.mactrackPill.dot1x_running { --pill: #93302a; }
.mactrackPill.dot1x_idle { --pill: #9a6a1a; }
.mactrackPill.dot1x_auth_no_method { --pill: #5f5f57; }
.mactrackPill.mac_authorized { --pill: #2b8435; }
.mactrackPill.mac_unauthorized { --pill: #a12820; }
Loading
Loading