08bac437f7
Replace hand-rolled <table>/<thead>/<tbody> markup in the AgentHealth page with the existing DataTable composite, using column definitions with custom render functions for StatusDot, Badge, and MonoText cells. Uses flush prop for seamless GroupCard integration and pageSize=50 to avoid pagination. Removes unused table-specific CSS classes (.instanceTable, .instanceRow, .thStatus, .tdStatus, .instanceRowActive, .instanceCountBadge). Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
222 lines
3.8 KiB
CSS
222 lines
3.8 KiB
CSS
/* Scrollable content area */
|
|
.content {
|
|
flex: 1;
|
|
overflow-y: auto;
|
|
padding: 20px 24px 40px;
|
|
min-width: 0;
|
|
background: var(--bg-body);
|
|
}
|
|
|
|
/* Stat strip */
|
|
.statStrip {
|
|
display: grid;
|
|
grid-template-columns: repeat(5, 1fr);
|
|
gap: 10px;
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
/* Stat breakdown with colored dots */
|
|
.breakdown {
|
|
display: flex;
|
|
gap: 8px;
|
|
font-size: 11px;
|
|
font-family: var(--font-mono);
|
|
}
|
|
|
|
.bpLive { color: var(--success); display: inline-flex; align-items: center; gap: 3px; }
|
|
.bpStale { color: var(--warning); display: inline-flex; align-items: center; gap: 3px; }
|
|
.bpDead { color: var(--error); display: inline-flex; align-items: center; gap: 3px; }
|
|
|
|
.routesSuccess { color: var(--success); }
|
|
.routesWarning { color: var(--warning); }
|
|
.routesError { color: var(--error); }
|
|
|
|
/* Scope breadcrumb trail */
|
|
.scopeTrail {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
margin-bottom: 12px;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.scopeLink {
|
|
color: var(--amber);
|
|
text-decoration: none;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.scopeLink:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.scopeSep {
|
|
color: var(--text-muted);
|
|
font-size: 10px;
|
|
}
|
|
|
|
.scopeCurrent {
|
|
color: var(--text-primary);
|
|
font-weight: 600;
|
|
font-family: var(--font-mono);
|
|
}
|
|
|
|
/* Section header */
|
|
.sectionHeaderRow {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
.sectionTitle {
|
|
font-size: 13px;
|
|
font-weight: 600;
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.sectionMeta {
|
|
font-size: 11px;
|
|
color: var(--text-muted);
|
|
font-family: var(--font-mono);
|
|
}
|
|
|
|
/* Group cards grid */
|
|
.groupGrid {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 14px;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.groupGridSingle {
|
|
display: grid;
|
|
grid-template-columns: 1fr;
|
|
gap: 14px;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
/* Group meta row */
|
|
.groupMeta {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 16px;
|
|
font-size: 11px;
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.groupMeta strong {
|
|
font-family: var(--font-mono);
|
|
color: var(--text-secondary);
|
|
font-weight: 600;
|
|
}
|
|
|
|
/* Alert banner in group footer */
|
|
.alertBanner {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 8px 16px;
|
|
background: var(--error-bg);
|
|
font-size: 11px;
|
|
color: var(--error);
|
|
font-weight: 500;
|
|
}
|
|
|
|
.alertIcon {
|
|
font-size: 14px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
/* Instance fields */
|
|
.instanceName {
|
|
font-weight: 600;
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.instanceMeta {
|
|
color: var(--text-muted);
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.instanceError {
|
|
color: var(--error);
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.instanceHeartbeatStale {
|
|
color: var(--warning);
|
|
font-weight: 600;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.instanceHeartbeatDead {
|
|
color: var(--error);
|
|
font-weight: 600;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
/* Detail panel content */
|
|
.detailContent {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 12px;
|
|
}
|
|
|
|
.detailRow {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
font-size: 12px;
|
|
font-family: var(--font-body);
|
|
padding: 4px 0;
|
|
border-bottom: 1px solid var(--border-subtle);
|
|
}
|
|
|
|
.detailLabel {
|
|
color: var(--text-muted);
|
|
font-weight: 500;
|
|
}
|
|
|
|
.detailProgress {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
width: 140px;
|
|
}
|
|
|
|
.chartPanel {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 6px;
|
|
}
|
|
|
|
.chartTitle {
|
|
font-size: 11px;
|
|
font-weight: 600;
|
|
color: var(--text-secondary);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.5px;
|
|
}
|
|
|
|
/* Event card (timeline panel) */
|
|
.eventCard {
|
|
margin-top: 20px;
|
|
background: var(--bg-surface);
|
|
border: 1px solid var(--border-subtle);
|
|
border-radius: var(--radius-lg);
|
|
box-shadow: var(--shadow-card);
|
|
overflow: hidden;
|
|
display: flex;
|
|
flex-direction: column;
|
|
max-height: 420px;
|
|
}
|
|
|
|
.eventCardHeader {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 10px 16px;
|
|
border-bottom: 1px solid var(--border-subtle);
|
|
}
|