feat(alerts): a covering rule's hosts fold away behind its "N hosts" (#5483)
CI / lint (push) Successful in 2s
CI / integration (push) Successful in 1m7s
CI / unit (push) Successful in 1m26s
CI / publish (push) Successful in 1m9s

#5483 "Alerts list: a covering rule's hosts start collapsed behind a toggle;
no dashed rows", from the operator's review of the Alerts list. Each rule is
its own tbody; its hosts sit in another, hidden until "N hosts" is pressed.
A rule with a host that isn't quiet opens on its own and names the host where
"last fired" was, so a problem never hides behind the fold. Host rows lose the
dashed rules for a sunken band under the indent.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
2026-10-09 10:40:17 -04:00
co-authored by Claude Opus 5.5
parent 731e7cd6e6
commit a642b4c37c
4 changed files with 55 additions and 11 deletions
+14 -3
View File
@@ -186,7 +186,10 @@ strong, b, th { font-weight: 500; }
.table { width: 100%; border-collapse: collapse; }
.table th { text-align: left; padding: 0.6rem 1rem; color: var(--text-muted); font-weight: 500; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.04em; border-bottom: 1px solid var(--border-mid); }
.table td { padding: 0.7rem 1rem; border-bottom: 1px solid var(--border); font-size: 0.9rem; }
.table tbody tr:last-child td { border-bottom: none; }
/* The table's last row has no rule under it; a table may have several tbodys
(the Alerts list: one per rule, its hosts in another, maybe hidden). */
.table tbody:last-child tr:last-child td,
.table tbody:has(+ tbody[hidden]:last-child) tr:last-child td { border-bottom: none; }
.table tbody tr:hover td { background: var(--bg-elevated); }
.table .td-actions { text-align: right; white-space: nowrap; }
/* A header that sorts its column (sort_th in _macros.html): reads as the
@@ -216,9 +219,17 @@ strong, b, th { font-weight: 500; }
/* The Docker page's one-line answer, above its tiles (#5298). */
.page-verdict { margin: 0 0 0.75rem; font-size: 0.95rem; }
.table tr.row-off > td { opacity: 0.55; }
/* A covering alert rule's per-host rules (#5464), indented under it. */
.table tr.row-child > td { border-top-style: dashed; }
/* A covering alert rule's per-host rules (#5464), indented on a sunken band
under it, opened by its "N hosts" toggle (#5483). */
.table tr.row-child:not(:hover) > td { background: var(--bg); }
.table tr.row-child .cell-name { padding-left: 2rem; }
.row-toggle { background: none; border: 0; padding: 0; font: inherit; color: var(--text-muted);
cursor: pointer; text-decoration: underline dotted; text-underline-offset: 2px; }
.row-toggle::before { content: "▸"; display: inline-block; margin-right: 0.25rem;
transition: transform var(--fs-dur-fast) var(--fs-ease); }
.row-toggle[aria-expanded="true"]::before { transform: rotate(90deg); }
.row-toggle:hover { color: var(--text); }
.row-toggle:focus-visible { outline: none; box-shadow: var(--fs-focus-ring); border-radius: var(--fs-radius-sm); }
/* The rule form's metric preview (#5475): now, then the last day beside its sparkline. */
.metric-preview { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 1rem;
margin-top: 0.4rem; font-size: 0.85rem; }