Skip to content

Add legend-aligned status pills and multi-select Status filter to interfaces and dot1x views #388

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 10 commits into from
Oct 9, 2026
Merged

Add legend-aligned status pills and multi-select Status filter to interfaces and dot1x views #388

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
fa4c951
Add status pills to interfaces and dot1x views
TheWitness Oct 8, 2026
5d3779f
mactrack: address review on status pills PR
TheWitness Oct 8, 2026
1728343
Move interfaces Issues pills next to the Description column
TheWitness Oct 8, 2026
0a4f7d4
mactrack: regenerate cacti.pot for new status-filter strings
TheWitness Oct 8, 2026
ea19f92
Make status pills theme-appropriate; drop standalone pills stylesheet
TheWitness Oct 8, 2026
cbac6da
mactrack: unit-test status pill helpers and exclude view-glue line fr…
TheWitness Oct 8, 2026
4df8eed
tests: restore patch coverage for status-pill helpers and row formatters
TheWitness Oct 9, 2026
b7319f9
tests: add form_selectable_cell/cacti_version_compare/CACTI_VERSION s…
TheWitness Oct 9, 2026
8baffea
mactrack: fix status-pill label contrast (outline/fill instead of opa…
TheWitness Oct 9, 2026
4dbf525
Address PR review: pill contrast/a11y, dot1x Status sorting, test hea…
TheWitness Oct 9, 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: 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
* feature: Restyle the interfaces and dot1x status legends as rounded, evenly-spaced solid-colour chips with theme-appropriate colours (matching the Thold/Monitor/Syslog legends and the Deepness emerald), sized to the longest label and laid out as a CSS grid so they stay equal width across wrapped rows; also fixed a stray `background-color: color:` typo in the `.int_no_device` rule
* dev: Convert plugin bootstrap include/include_once calls to fail-fast require/require_once across the web, CLI, and hook entry points so a missing dependency halts execution instead of continuing with an undefined API
Expand Down
62 changes: 62 additions & 0 deletions css/classic.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -176,3 +176,65 @@
color: #000000;
}

/*
* Status pills for the interfaces "Issues" column and the 802.1x status
* column. Outlined when inactive and solid when active; each pill takes
* its colour from the --pill custom property defined below so it matches
* this theme's status legend chips.
*/
.mactrackPills {
display: flex;
flex-wrap: wrap;
gap: 3px;
align-items: center;
}

.mactrackPill {
appearance: none;
-webkit-appearance: none;
display: inline-block;
margin: 0;
padding: 1px 7px;
border-radius: 10px;
font: inherit;
font-size: 0.85em;
line-height: 1.5;
white-space: nowrap;
cursor: pointer;
user-select: none;
color: inherit;
background-color: transparent;
border: 1px solid var(--pill, #b5b5b5);
}

.mactrackPill:hover {
background-color: var(--pill, #666666);
color: #ffffff;
}

.mactrackPill:focus-visible {
outline: 2px solid var(--pill, #666666);
outline-offset: 1px;
}

.mactrackPillActive {
color: #ffffff;
background-color: var(--pill, #666666);
border-color: var(--pill, #666666);
}

.mactrackPill.int_up { --pill: #2b8435; }
.mactrackPill.int_up_wo_alias { --pill: #a85712; }
.mactrackPill.int_errors { --pill: #93302a; }
.mactrackPill.int_discards { --pill: #9a6a1a; }
.mactrackPill.int_no_graph { --pill: #5f5f57; }
.mactrackPill.int_down { --pill: #a12820; }

.mactrackPill.dot1x_authn_success { --pill: #2b8435; }
.mactrackPill.dot1x_auth_success { --pill: #3f7a4a; }
.mactrackPill.dot1x_authn_failed { --pill: #a12820; }
.mactrackPill.dot1x_auth_failed { --pill: #a85712; }
.mactrackPill.dot1x_running { --pill: #93302a; }
.mactrackPill.dot1x_idle { --pill: #9a6a1a; }
.mactrackPill.dot1x_auth_no_method { --pill: #5f5f57; }

62 changes: 62 additions & 0 deletions css/dark.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -175,3 +175,65 @@
background-color: rgba(205, 207, 196, 0.2);
color: #eeeeee;
}

/*
* Status pills for the interfaces "Issues" column and the 802.1x status
* column. Outlined when inactive and solid when active; each pill takes
* its colour from the --pill custom property defined below so it matches
* this theme's status legend chips.
*/
.mactrackPills {
display: flex;
flex-wrap: wrap;
gap: 3px;
align-items: center;
}

.mactrackPill {
appearance: none;
-webkit-appearance: none;
display: inline-block;
margin: 0;
padding: 1px 7px;
border-radius: 10px;
font: inherit;
font-size: 0.85em;
line-height: 1.5;
white-space: nowrap;
cursor: pointer;
user-select: none;
color: inherit;
background-color: transparent;
border: 1px solid var(--pill, #b5b5b5);
}

.mactrackPill:hover {
background-color: var(--pill, #666666);
color: #ffffff;
}

.mactrackPill:focus-visible {
outline: 2px solid var(--pill, #cccccc);
outline-offset: 1px;
}

.mactrackPillActive {
color: #ffffff;
background-color: var(--pill, #666666);
border-color: var(--pill, #666666);
}

.mactrackPill.int_up { --pill: #2b8435; }
.mactrackPill.int_up_wo_alias { --pill: #a85712; }
.mactrackPill.int_errors { --pill: #93302a; }
.mactrackPill.int_discards { --pill: #9a6a1a; }
.mactrackPill.int_no_graph { --pill: #5f5f57; }
.mactrackPill.int_down { --pill: #a12820; }

.mactrackPill.dot1x_authn_success { --pill: #2b8435; }
.mactrackPill.dot1x_auth_success { --pill: #3f7a4a; }
.mactrackPill.dot1x_authn_failed { --pill: #a12820; }
.mactrackPill.dot1x_auth_failed { --pill: #a85712; }
.mactrackPill.dot1x_running { --pill: #93302a; }
.mactrackPill.dot1x_idle { --pill: #9a6a1a; }
.mactrackPill.dot1x_auth_no_method { --pill: #5f5f57; }
62 changes: 62 additions & 0 deletions css/deepness.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -175,3 +175,65 @@
background-color: rgba(205, 207, 196, 0.2);
color: #eeeeee;
}

/*
* Status pills for the interfaces "Issues" column and the 802.1x status
* column. Outlined when inactive and solid when active; each pill takes
* its colour from the --pill custom property defined below so it matches
* this theme's status legend chips.
*/
.mactrackPills {
display: flex;
flex-wrap: wrap;
gap: 3px;
align-items: center;
}

.mactrackPill {
appearance: none;
-webkit-appearance: none;
display: inline-block;
margin: 0;
padding: 1px 7px;
border-radius: 10px;
font: inherit;
font-size: 0.85em;
line-height: 1.5;
white-space: nowrap;
cursor: pointer;
user-select: none;
color: inherit;
background-color: transparent;
border: 1px solid var(--pill, #b5b5b5);
}

.mactrackPill:hover {
background-color: var(--pill, #666666);
color: #ffffff;
}

.mactrackPill:focus-visible {
outline: 2px solid var(--pill, #cccccc);
outline-offset: 1px;
}

.mactrackPillActive {
color: #ffffff;
background-color: var(--pill, #666666);
border-color: var(--pill, #666666);
}

.mactrackPill.int_up { --pill: #197a54; }
.mactrackPill.int_up_wo_alias { --pill: #a85712; }
.mactrackPill.int_errors { --pill: #93302a; }
.mactrackPill.int_discards { --pill: #9a6a1a; }
.mactrackPill.int_no_graph { --pill: #5f5f57; }
.mactrackPill.int_down { --pill: #a12820; }

.mactrackPill.dot1x_authn_success { --pill: #197a54; }
.mactrackPill.dot1x_auth_success { --pill: #2c6f52; }
.mactrackPill.dot1x_authn_failed { --pill: #a12820; }
.mactrackPill.dot1x_auth_failed { --pill: #a85712; }
.mactrackPill.dot1x_running { --pill: #93302a; }
.mactrackPill.dot1x_idle { --pill: #9a6a1a; }
.mactrackPill.dot1x_auth_no_method { --pill: #5f5f57; }
62 changes: 62 additions & 0 deletions css/mactrack.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -104,3 +104,65 @@
color: #eeeeee;
}

/*
* Status pills for the interfaces "Issues" column and the 802.1x status
* column. Outlined when inactive and solid when active; each pill takes
* its colour from the --pill custom property defined below so it matches
* this theme's status legend chips.
*/
.mactrackPills {
display: flex;
flex-wrap: wrap;
gap: 3px;
align-items: center;
}

.mactrackPill {
appearance: none;
-webkit-appearance: none;
display: inline-block;
margin: 0;
padding: 1px 7px;
border-radius: 10px;
font: inherit;
font-size: 0.85em;
line-height: 1.5;
white-space: nowrap;
cursor: pointer;
user-select: none;
color: inherit;
background-color: transparent;
border: 1px solid var(--pill, #b5b5b5);
}

.mactrackPill:hover {
background-color: var(--pill, #666666);
color: #ffffff;
}

.mactrackPill:focus-visible {
outline: 2px solid var(--pill, #666666);
outline-offset: 1px;
}

.mactrackPillActive {
color: #ffffff;
background-color: var(--pill, #666666);
border-color: var(--pill, #666666);
}

.mactrackPill.int_up { --pill: #2b8435; }
.mactrackPill.int_up_wo_alias { --pill: #a85712; }
.mactrackPill.int_errors { --pill: #93302a; }
.mactrackPill.int_discards { --pill: #9a6a1a; }
.mactrackPill.int_no_graph { --pill: #5f5f57; }
.mactrackPill.int_down { --pill: #a12820; }

.mactrackPill.dot1x_authn_success { --pill: #2b8435; }
.mactrackPill.dot1x_auth_success { --pill: #3f7a4a; }
.mactrackPill.dot1x_authn_failed { --pill: #a12820; }
.mactrackPill.dot1x_auth_failed { --pill: #93302a; }
.mactrackPill.dot1x_running { --pill: #a85712; }
.mactrackPill.dot1x_idle { --pill: #5f5f57; }
.mactrackPill.dot1x_auth_no_method { --pill: #5f5f57; }

62 changes: 62 additions & 0 deletions css/modern.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -182,3 +182,65 @@
background-color: rgba(205, 207, 196, 0.8);
color: #000000;
}

/*
* Status pills for the interfaces "Issues" column and the 802.1x status
* column. Outlined when inactive and solid when active; each pill takes
* its colour from the --pill custom property defined below so it matches
* this theme's status legend chips.
*/
.mactrackPills {
display: flex;
flex-wrap: wrap;
gap: 3px;
align-items: center;
}

.mactrackPill {
appearance: none;
-webkit-appearance: none;
display: inline-block;
margin: 0;
padding: 1px 7px;
border-radius: 10px;
font: inherit;
font-size: 0.85em;
line-height: 1.5;
white-space: nowrap;
cursor: pointer;
user-select: none;
color: inherit;
background-color: transparent;
border: 1px solid var(--pill, #b5b5b5);
}

.mactrackPill:hover {
background-color: var(--pill, #666666);
color: #ffffff;
}

.mactrackPill:focus-visible {
outline: 2px solid var(--pill, #666666);
outline-offset: 1px;
}

.mactrackPillActive {
color: #ffffff;
background-color: var(--pill, #666666);
border-color: var(--pill, #666666);
}

.mactrackPill.int_up { --pill: #2b8435; }
.mactrackPill.int_up_wo_alias { --pill: #a85712; }
.mactrackPill.int_errors { --pill: #93302a; }
.mactrackPill.int_discards { --pill: #9a6a1a; }
.mactrackPill.int_no_graph { --pill: #5f5f57; }
.mactrackPill.int_down { --pill: #a12820; }

.mactrackPill.dot1x_authn_success { --pill: #2b8435; }
.mactrackPill.dot1x_auth_success { --pill: #3f7a4a; }
.mactrackPill.dot1x_authn_failed { --pill: #a12820; }
.mactrackPill.dot1x_auth_failed { --pill: #a85712; }
.mactrackPill.dot1x_running { --pill: #93302a; }
.mactrackPill.dot1x_idle { --pill: #9a6a1a; }
.mactrackPill.dot1x_auth_no_method { --pill: #5f5f57; }
Loading
Loading