Add collapsible pipeline metrics and error indicator to target cards

FPS chart stays always visible; timing, frames, keepalive, errors, and
uptime are collapsed behind an animated toggle. Error warning icon
appears next to target name when errors_count > 0. Uses CSS grid
0fr→1fr transition for smooth expand/collapse animation.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
2026-03-09 00:27:08 +03:00
parent 6fc0e20e1d
commit dc4495a117
6 changed files with 86 additions and 21 deletions

View File

@@ -742,6 +742,54 @@ ul.section-tip li {
color: #ff5252;
}
/* Error indicator next to target name */
.target-error-indicator {
display: none;
color: var(--danger-color);
margin-left: 4px;
vertical-align: middle;
}
.target-error-indicator .icon {
width: 14px;
height: 14px;
}
.target-error-indicator.visible {
display: inline-flex;
align-items: center;
}
/* Collapsible target pipeline metrics */
.target-metrics-collapse {
margin-top: 4px;
}
.target-metrics-toggle {
cursor: pointer;
font-size: 0.75rem;
color: var(--text-secondary);
padding: 4px 0;
user-select: none;
background: none;
border: none;
font-family: inherit;
}
.target-metrics-toggle::before {
content: '▸ ';
}
.target-metrics-collapse.open .target-metrics-toggle::before {
content: '▾ ';
}
.target-metrics-animate {
display: grid;
grid-template-rows: 0fr;
transition: grid-template-rows 0.25s ease;
}
.target-metrics-collapse.open .target-metrics-animate {
grid-template-rows: 1fr;
}
.target-metrics-animate > .target-metrics-expanded {
overflow: hidden;
}
/* Timing breakdown bar */
.timing-breakdown {
margin-top: 8px;