Files
Extrudex/frontend/src/app/components/dashboard-summary/dashboard-summary.component.html

63 lines
2.3 KiB
HTML
Raw Normal View History

<!-- Dashboard Summary Bar — Fleet-wide health at a glance -->
<section class="dashboard-summary" role="status" aria-label="Dashboard summary">
<!-- System Health Indicator -->
<div class="summary-item health-indicator"
[class.healthy]="health().status === 'healthy'"
[class.degraded]="isDegraded()"
[class.down]="isDown()"
[matTooltip]="statusLabel()"
matTooltipPosition="below">
<span class="connection-dot" [class.connected]="health().connected"></span>
<span class="health-label">{{ statusLabel() }}</span>
</div>
<!-- Total Active Agents -->
<div class="summary-item" matTooltip="Total active agents" matTooltipPosition="below">
<mat-icon aria-hidden="true">smart_toy</mat-icon>
<span class="metric-value">{{ summary().active }} / {{ summary().total }}</span>
<span class="metric-label">Active</span>
</div>
<!-- Status Breakdown -->
<div class="summary-item status-breakdown">
<mat-chip-set aria-label="Agent status breakdown">
<mat-chip
class="status-chip chip-active"
[class.has-count]="summary().active > 0"
matTooltip="Active agents">
<mat-icon matChipStart>check_circle</mat-icon>
<span class="chip-count">{{ summary().active }}</span>
<span class="chip-label">Active</span>
</mat-chip>
<mat-chip
class="status-chip chip-idle"
[class.has-count]="summary().idle > 0"
matTooltip="Idle agents">
<mat-icon matChipStart>pause_circle</mat-icon>
<span class="chip-count">{{ summary().idle }}</span>
<span class="chip-label">Idle</span>
</mat-chip>
<mat-chip
class="status-chip chip-thinking"
[class.has-count]="summary().thinking > 0"
matTooltip="Thinking agents">
<mat-icon matChipStart>psychology</mat-icon>
<span class="chip-count">{{ summary().thinking }}</span>
<span class="chip-label">Thinking</span>
</mat-chip>
<mat-chip
class="status-chip chip-error"
[class.has-count]="hasErrors()"
matTooltip="Agents in error">
<mat-icon matChipStart>error</mat-icon>
<span class="chip-count">{{ summary().error }}</span>
<span class="chip-label">Error</span>
</mat-chip>
</mat-chip-set>
</div>
</section>