81f85aa82d
Migrate all page components from the @cameleer/design-system v0.0.3 example UI, replacing mock data with real backend API hooks. This brings richer visuals (KpiStrip, GroupCard, RouteFlow, ProcessorTimeline, DateRangePicker, expandable rows) while preserving all existing API integration, auth, and routing infrastructure. Pages migrated: Dashboard, RoutesMetrics, RouteDetail, ExchangeDetail, AgentHealth, AgentInstance, OidcConfig, AuditLog, RBAC (Users/Groups/Roles). Also enhanced LayoutShell CommandPalette with real search data from catalog. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
227 lines
3.9 KiB
CSS
227 lines
3.9 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 */
|
|
.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;
|
|
}
|
|
|
|
.emptyChart {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
height: 80px;
|
|
background: var(--bg-surface-raised);
|
|
border: 1px dashed var(--border-subtle);
|
|
border-radius: var(--radius-md);
|
|
font-size: 12px;
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
/* 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);
|
|
}
|