feat: Agent Health page with progressive filtering and GroupCard component
Add URL-driven Agent Health page (/agents, /agents/:appId, /agents/:appId/:instanceId) that progressively narrows from all applications to a single instance with trend charts. Create generic GroupCard composite for grouping instances by application. Expand mock data to 8 instances across 4 apps with varied states. Split sidebar Agents header into navigable link + collapse chevron. Update agent tree paths to /agents/:appId/:instanceId. Add EventFeed with lifecycle events. Change SidebarAgent.tps from string to number. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
hsiegeln
@@ -1,28 +0,0 @@
|
||||
import { useParams } from 'react-router-dom'
|
||||
import { AppShell } from '../../design-system/layout/AppShell/AppShell'
|
||||
import { Sidebar } from '../../design-system/layout/Sidebar/Sidebar'
|
||||
import { TopBar } from '../../design-system/layout/TopBar/TopBar'
|
||||
import { EmptyState } from '../../design-system/primitives/EmptyState/EmptyState'
|
||||
import { SIDEBAR_APPS } from '../../mocks/sidebar'
|
||||
|
||||
export function AgentDetail() {
|
||||
const { id } = useParams<{ id: string }>()
|
||||
|
||||
return (
|
||||
<AppShell sidebar={<Sidebar apps={SIDEBAR_APPS} />}>
|
||||
<TopBar
|
||||
breadcrumb={[
|
||||
{ label: 'Agents', href: '/agents' },
|
||||
{ label: id ?? '' },
|
||||
]}
|
||||
environment="PRODUCTION"
|
||||
shift="Day (06:00-18:00)"
|
||||
user={{ name: 'hendrik' }}
|
||||
/>
|
||||
<EmptyState
|
||||
title="Agent Detail"
|
||||
description="Agent detail view coming soon."
|
||||
/>
|
||||
</AppShell>
|
||||
)
|
||||
}
|
||||
@@ -7,44 +7,44 @@
|
||||
background: var(--bg-body);
|
||||
}
|
||||
|
||||
/* System overview strip */
|
||||
.overviewStrip {
|
||||
/* Stat strip */
|
||||
.statStrip {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(6, 1fr);
|
||||
gap: 10px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.overviewCard {
|
||||
background: var(--bg-surface);
|
||||
border: 1px solid var(--border-subtle);
|
||||
border-radius: var(--radius-md);
|
||||
box-shadow: var(--shadow-card);
|
||||
padding: 12px 16px;
|
||||
text-align: center;
|
||||
/* Scope breadcrumb trail */
|
||||
.scopeTrail {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
margin-bottom: 12px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.overviewLabel {
|
||||
font-size: 10px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.6px;
|
||||
.scopeLink {
|
||||
color: var(--amber);
|
||||
text-decoration: none;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.scopeLink:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.scopeSep {
|
||||
color: var(--text-muted);
|
||||
margin-bottom: 4px;
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.overviewValue {
|
||||
font-size: 22px;
|
||||
font-weight: 700;
|
||||
font-family: var(--font-mono);
|
||||
.scopeCurrent {
|
||||
color: var(--text-primary);
|
||||
line-height: 1.2;
|
||||
font-weight: 600;
|
||||
font-family: var(--font-mono);
|
||||
}
|
||||
|
||||
.valueLive { color: var(--success); }
|
||||
.valueStale { color: var(--warning); }
|
||||
.valueDead { color: var(--error); }
|
||||
|
||||
/* Section header */
|
||||
.sectionHeaderRow {
|
||||
display: flex;
|
||||
@@ -65,119 +65,145 @@
|
||||
font-family: var(--font-mono);
|
||||
}
|
||||
|
||||
/* Agent cards grid */
|
||||
.agentGrid {
|
||||
/* Group cards grid */
|
||||
.groupGrid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 14px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
/* Agent card */
|
||||
.agentCard {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0;
|
||||
overflow: hidden;
|
||||
padding: 0 !important;
|
||||
.groupGridSingle {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
gap: 14px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
/* Agent card header */
|
||||
.agentCardHeader {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 14px 16px 10px;
|
||||
cursor: pointer;
|
||||
transition: background 0.15s;
|
||||
}
|
||||
|
||||
.agentCardHeader:hover {
|
||||
background: var(--bg-hover);
|
||||
}
|
||||
|
||||
.agentCardLeft {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.agentCardName {
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
font-family: var(--font-mono);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.agentCardService {
|
||||
/* Instance count badge in group header */
|
||||
.instanceCountBadge {
|
||||
font-size: 11px;
|
||||
color: var(--text-secondary);
|
||||
font-family: var(--font-mono);
|
||||
color: var(--text-muted);
|
||||
background: var(--bg-inset);
|
||||
padding: 2px 8px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.agentCardRight {
|
||||
/* Group meta row */
|
||||
.groupMeta {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.expandIcon {
|
||||
font-size: 10px;
|
||||
gap: 16px;
|
||||
font-size: 11px;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
/* Agent metrics row */
|
||||
.agentMetrics {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0;
|
||||
padding: 6px 12px 12px;
|
||||
border-top: 1px solid var(--border-subtle);
|
||||
.groupMeta strong {
|
||||
font-family: var(--font-mono);
|
||||
color: var(--text-secondary);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.agentMetric {
|
||||
/* Alert banner in group footer */
|
||||
.alertBanner {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
padding: 6px 12px;
|
||||
min-width: 80px;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 8px 16px;
|
||||
background: var(--error-bg);
|
||||
font-size: 11px;
|
||||
color: var(--error);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.metricLabel {
|
||||
.alertIcon {
|
||||
font-size: 14px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
/* Instance header row */
|
||||
.instanceHeader {
|
||||
display: grid;
|
||||
grid-template-columns: 8px minmax(80px, 1.2fr) auto auto auto auto auto;
|
||||
gap: 12px;
|
||||
padding: 4px 16px;
|
||||
font-size: 9px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.6px;
|
||||
color: var(--text-muted);
|
||||
margin-bottom: 2px;
|
||||
letter-spacing: 0.5px;
|
||||
color: var(--text-faint);
|
||||
border-bottom: 1px solid var(--border-subtle);
|
||||
}
|
||||
|
||||
.metricValue {
|
||||
/* Instance row */
|
||||
.instanceRow {
|
||||
display: grid;
|
||||
grid-template-columns: 8px minmax(80px, 1.2fr) auto auto auto auto auto;
|
||||
gap: 12px;
|
||||
align-items: center;
|
||||
padding: 8px 16px;
|
||||
border-bottom: 1px solid var(--border-subtle);
|
||||
font-size: 12px;
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
transition: background 0.1s;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.instanceRow:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.instanceRow:hover {
|
||||
background: var(--bg-hover);
|
||||
}
|
||||
|
||||
.instanceRowActive {
|
||||
background: var(--amber-bg);
|
||||
border-left: 3px solid var(--amber);
|
||||
}
|
||||
|
||||
/* Instance fields */
|
||||
.instanceName {
|
||||
font-weight: 600;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.metricValueWarn {
|
||||
color: var(--warning);
|
||||
font-family: var(--font-mono);
|
||||
font-size: 12px;
|
||||
.instanceMeta {
|
||||
color: var(--text-muted);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.metricValueError {
|
||||
.instanceError {
|
||||
color: var(--error);
|
||||
font-family: var(--font-mono);
|
||||
font-size: 12px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* Expanded charts area */
|
||||
.agentCharts {
|
||||
.instanceHeartbeatStale {
|
||||
color: var(--warning);
|
||||
font-weight: 600;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.instanceHeartbeatDead {
|
||||
color: var(--error);
|
||||
font-weight: 600;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* Instance expanded charts */
|
||||
.instanceCharts {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 12px;
|
||||
padding: 12px 16px;
|
||||
background: var(--bg-raised);
|
||||
border-top: 1px solid var(--border-subtle);
|
||||
border-bottom: 1px solid var(--border-subtle);
|
||||
}
|
||||
|
||||
.agentChart {
|
||||
.chartPanel {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
@@ -190,3 +216,8 @@
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
/* Event section */
|
||||
.eventSection {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
import { useState } from 'react'
|
||||
import { useMemo } from 'react'
|
||||
import { useParams, Link } from 'react-router-dom'
|
||||
import styles from './AgentHealth.module.css'
|
||||
|
||||
// Layout
|
||||
@@ -7,226 +8,304 @@ import { Sidebar } from '../../design-system/layout/Sidebar/Sidebar'
|
||||
import { TopBar } from '../../design-system/layout/TopBar/TopBar'
|
||||
|
||||
// Composites
|
||||
import { GroupCard } from '../../design-system/composites/GroupCard/GroupCard'
|
||||
import { LineChart } from '../../design-system/composites/LineChart/LineChart'
|
||||
import { EventFeed } from '../../design-system/composites/EventFeed/EventFeed'
|
||||
|
||||
// Primitives
|
||||
import { StatusDot } from '../../design-system/primitives/StatusDot/StatusDot'
|
||||
import { MonoText } from '../../design-system/primitives/MonoText/MonoText'
|
||||
import { Badge } from '../../design-system/primitives/Badge/Badge'
|
||||
import { Card } from '../../design-system/primitives/Card/Card'
|
||||
import { StatCard } from '../../design-system/primitives/StatCard/StatCard'
|
||||
|
||||
// Mock data
|
||||
import { agents } from '../../mocks/agents'
|
||||
import { agents, type AgentHealth as AgentHealthData } from '../../mocks/agents'
|
||||
import { SIDEBAR_APPS } from '../../mocks/sidebar'
|
||||
import { agentEvents } from '../../mocks/agentEvents'
|
||||
|
||||
// ─── Build trend data for each agent ─────────────────────────────────────────
|
||||
function buildAgentTrendSeries(agentId: string) {
|
||||
const baseValues: Record<string, { throughput: number; errorRate: number }> = {
|
||||
'prod-1': { throughput: 14.2, errorRate: 0.2 },
|
||||
'prod-2': { throughput: 11.8, errorRate: 3.1 },
|
||||
'prod-3': { throughput: 12.1, errorRate: 0.5 },
|
||||
'prod-4': { throughput: 9.1, errorRate: 0.3 },
|
||||
}
|
||||
const base = baseValues[agentId] ?? { throughput: 10, errorRate: 1 }
|
||||
// ── URL scope parsing ────────────────────────────────────────────────────────
|
||||
|
||||
const now = new Date('2026-03-18T09:15:00')
|
||||
const points = 20
|
||||
const intervalMs = (3 * 60 * 60 * 1000) / points // 3 hours
|
||||
type Scope =
|
||||
| { level: 'all' }
|
||||
| { level: 'app'; appId: string }
|
||||
| { level: 'instance'; appId: string; instanceId: string }
|
||||
|
||||
const throughputData = Array.from({ length: points }, (_, i) => ({
|
||||
x: new Date(now.getTime() - (points - i) * intervalMs),
|
||||
y: Math.max(0, base.throughput + (Math.random() - 0.5) * 4),
|
||||
}))
|
||||
|
||||
const errorRateData = Array.from({ length: points }, (_, i) => ({
|
||||
x: new Date(now.getTime() - (points - i) * intervalMs),
|
||||
y: Math.max(0, base.errorRate + (Math.random() - 0.5) * 2),
|
||||
}))
|
||||
|
||||
return { throughputData, errorRateData }
|
||||
function useScope(): Scope {
|
||||
const { '*': rest } = useParams()
|
||||
const segments = rest?.split('/').filter(Boolean) ?? []
|
||||
if (segments.length >= 2) return { level: 'instance', appId: segments[0], instanceId: segments[1] }
|
||||
if (segments.length === 1) return { level: 'app', appId: segments[0] }
|
||||
return { level: 'all' }
|
||||
}
|
||||
|
||||
// ─── Summary stats ────────────────────────────────────────────────────────────
|
||||
const liveCount = agents.filter((a) => a.status === 'live').length
|
||||
const totalTps = agents.reduce((sum, a) => sum + parseFloat(a.tps), 0)
|
||||
const totalActiveRoutes = agents.reduce((sum, a) => sum + a.activeRoutes, 0)
|
||||
// ── Data grouping ────────────────────────────────────────────────────────────
|
||||
|
||||
// ─── AgentHealth page ─────────────────────────────────────────────────────────
|
||||
export function AgentHealth() {
|
||||
const [expandedAgent, setExpandedAgent] = useState<string | null>(null)
|
||||
interface AppGroup {
|
||||
appId: string
|
||||
instances: AgentHealthData[]
|
||||
liveCount: number
|
||||
staleCount: number
|
||||
deadCount: number
|
||||
totalTps: number
|
||||
totalActiveRoutes: number
|
||||
totalRoutes: number
|
||||
}
|
||||
|
||||
function toggleAgent(id: string) {
|
||||
setExpandedAgent((prev) => (prev === id ? null : id))
|
||||
function groupByApp(agentList: AgentHealthData[]): AppGroup[] {
|
||||
const map = new Map<string, AgentHealthData[]>()
|
||||
for (const a of agentList) {
|
||||
const list = map.get(a.appId) ?? []
|
||||
list.push(a)
|
||||
map.set(a.appId, list)
|
||||
}
|
||||
return Array.from(map.entries()).map(([appId, instances]) => ({
|
||||
appId,
|
||||
instances,
|
||||
liveCount: instances.filter((i) => i.status === 'live').length,
|
||||
staleCount: instances.filter((i) => i.status === 'stale').length,
|
||||
deadCount: instances.filter((i) => i.status === 'dead').length,
|
||||
totalTps: instances.reduce((s, i) => s + i.tps, 0),
|
||||
totalActiveRoutes: instances.reduce((s, i) => s + i.activeRoutes, 0),
|
||||
totalRoutes: instances.reduce((s, i) => s + i.totalRoutes, 0),
|
||||
}))
|
||||
}
|
||||
|
||||
function appHealth(group: AppGroup): 'success' | 'warning' | 'error' {
|
||||
if (group.deadCount > 0) return 'error'
|
||||
if (group.staleCount > 0) return 'warning'
|
||||
return 'success'
|
||||
}
|
||||
|
||||
// ── Trend data (mock) ────────────────────────────────────────────────────────
|
||||
|
||||
function buildTrendData(agent: AgentHealthData) {
|
||||
const now = Date.now()
|
||||
const points = 20
|
||||
const interval = (3 * 60 * 60 * 1000) / points
|
||||
|
||||
const throughput = Array.from({ length: points }, (_, i) => ({
|
||||
x: new Date(now - (points - i) * interval),
|
||||
y: Math.max(0, agent.tps + (Math.random() - 0.5) * 4),
|
||||
}))
|
||||
|
||||
const errorRate = Array.from({ length: points }, (_, i) => ({
|
||||
x: new Date(now - (points - i) * interval),
|
||||
y: Math.max(0, (agent.errorRate ? parseFloat(agent.errorRate) : 0.5) + (Math.random() - 0.5) * 2),
|
||||
}))
|
||||
|
||||
return { throughput, errorRate }
|
||||
}
|
||||
|
||||
// ── Breadcrumb ───────────────────────────────────────────────────────────────
|
||||
|
||||
function buildBreadcrumb(scope: Scope) {
|
||||
const crumbs: { label: string; href?: string }[] = [
|
||||
{ label: 'System', href: '/' },
|
||||
{ label: 'Agents', href: '/agents' },
|
||||
]
|
||||
if (scope.level === 'app' || scope.level === 'instance') {
|
||||
crumbs.push({ label: scope.appId, href: `/agents/${scope.appId}` })
|
||||
}
|
||||
if (scope.level === 'instance') {
|
||||
crumbs.push({ label: scope.instanceId })
|
||||
}
|
||||
return crumbs
|
||||
}
|
||||
|
||||
// ── AgentHealth page ─────────────────────────────────────────────────────────
|
||||
|
||||
export function AgentHealth() {
|
||||
const scope = useScope()
|
||||
|
||||
// Filter agents by scope
|
||||
const filteredAgents = useMemo(() => {
|
||||
if (scope.level === 'all') return agents
|
||||
if (scope.level === 'app') return agents.filter((a) => a.appId === scope.appId)
|
||||
return agents.filter((a) => a.appId === scope.appId && a.id === scope.instanceId)
|
||||
}, [scope])
|
||||
|
||||
const groups = useMemo(() => groupByApp(filteredAgents), [filteredAgents])
|
||||
|
||||
// Aggregate stats
|
||||
const totalInstances = filteredAgents.length
|
||||
const liveCount = filteredAgents.filter((a) => a.status === 'live').length
|
||||
const staleCount = filteredAgents.filter((a) => a.status === 'stale').length
|
||||
const deadCount = filteredAgents.filter((a) => a.status === 'dead').length
|
||||
const totalTps = filteredAgents.reduce((s, a) => s + a.tps, 0)
|
||||
const totalActiveRoutes = filteredAgents.reduce((s, a) => s + a.activeRoutes, 0)
|
||||
|
||||
// Filter events by scope
|
||||
const filteredEvents = useMemo(() => {
|
||||
if (scope.level === 'all') return agentEvents
|
||||
if (scope.level === 'app') {
|
||||
return agentEvents.filter((e) => e.message.includes(`[${scope.appId}]`))
|
||||
}
|
||||
return agentEvents.filter(
|
||||
(e) => e.message.includes(`[${scope.appId}]`) && e.message.includes(scope.instanceId),
|
||||
)
|
||||
}, [scope])
|
||||
|
||||
// Single instance for expanded charts
|
||||
const singleInstance = scope.level === 'instance' ? filteredAgents[0] : null
|
||||
const trendData = singleInstance ? buildTrendData(singleInstance) : null
|
||||
|
||||
const isFullWidth = scope.level !== 'all'
|
||||
|
||||
return (
|
||||
<AppShell
|
||||
sidebar={
|
||||
<Sidebar apps={SIDEBAR_APPS} />
|
||||
}
|
||||
>
|
||||
{/* Top bar */}
|
||||
<AppShell sidebar={<Sidebar apps={SIDEBAR_APPS} />}>
|
||||
<TopBar
|
||||
breadcrumb={[
|
||||
{ label: 'Dashboard', href: '/' },
|
||||
{ label: 'Agents' },
|
||||
]}
|
||||
breadcrumb={buildBreadcrumb(scope)}
|
||||
environment="PRODUCTION"
|
||||
shift="Day (06:00-18:00)"
|
||||
user={{ name: 'hendrik' }}
|
||||
/>
|
||||
|
||||
{/* Scrollable content */}
|
||||
<div className={styles.content}>
|
||||
|
||||
{/* System overview strip */}
|
||||
<div className={styles.overviewStrip}>
|
||||
<div className={styles.overviewCard}>
|
||||
<div className={styles.overviewLabel}>Total Agents</div>
|
||||
<div className={styles.overviewValue}>{agents.length}</div>
|
||||
</div>
|
||||
<div className={styles.overviewCard}>
|
||||
<div className={styles.overviewLabel}>Live</div>
|
||||
<div className={`${styles.overviewValue} ${styles.valueLive}`}>{liveCount}</div>
|
||||
</div>
|
||||
<div className={styles.overviewCard}>
|
||||
<div className={styles.overviewLabel}>Stale</div>
|
||||
<div className={`${styles.overviewValue} ${agents.some(a => a.status === 'stale') ? styles.valueStale : ''}`}>
|
||||
{agents.filter((a) => a.status === 'stale').length}
|
||||
</div>
|
||||
</div>
|
||||
<div className={styles.overviewCard}>
|
||||
<div className={styles.overviewLabel}>Dead</div>
|
||||
<div className={`${styles.overviewValue} ${agents.some(a => a.status === 'dead') ? styles.valueDead : ''}`}>
|
||||
{agents.filter((a) => a.status === 'dead').length}
|
||||
</div>
|
||||
</div>
|
||||
<div className={styles.overviewCard}>
|
||||
<div className={styles.overviewLabel}>Total TPS</div>
|
||||
<div className={styles.overviewValue}>{totalTps.toFixed(1)}/s</div>
|
||||
</div>
|
||||
<div className={styles.overviewCard}>
|
||||
<div className={styles.overviewLabel}>Active Routes</div>
|
||||
<div className={styles.overviewValue}>{totalActiveRoutes}</div>
|
||||
</div>
|
||||
{/* Stat strip */}
|
||||
<div className={styles.statStrip}>
|
||||
<StatCard label="Total Instances" value={String(totalInstances)} />
|
||||
<StatCard label="Live" value={String(liveCount)} accent="success" />
|
||||
<StatCard label="Stale" value={String(staleCount)} accent={staleCount > 0 ? 'warning' : undefined} />
|
||||
<StatCard label="Dead" value={String(deadCount)} accent={deadCount > 0 ? 'error' : undefined} />
|
||||
<StatCard label="Total TPS" value={`${totalTps.toFixed(1)}/s`} />
|
||||
<StatCard label="Active Routes" value={String(totalActiveRoutes)} />
|
||||
</div>
|
||||
|
||||
{/* Scope breadcrumb trail */}
|
||||
{scope.level !== 'all' && (
|
||||
<div className={styles.scopeTrail}>
|
||||
<Link to="/agents" className={styles.scopeLink}>All Agents</Link>
|
||||
{scope.level === 'instance' && (
|
||||
<>
|
||||
<span className={styles.scopeSep}>▸</span>
|
||||
<Link to={`/agents/${scope.appId}`} className={styles.scopeLink}>{scope.appId}</Link>
|
||||
</>
|
||||
)}
|
||||
<span className={styles.scopeSep}>▸</span>
|
||||
<span className={styles.scopeCurrent}>
|
||||
{scope.level === 'app' ? scope.appId : scope.instanceId}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Section header */}
|
||||
<div className={styles.sectionHeaderRow}>
|
||||
<span className={styles.sectionTitle}>Agent Details</span>
|
||||
<span className={styles.sectionMeta}>{liveCount}/{agents.length} live · Click to expand charts</span>
|
||||
<span className={styles.sectionTitle}>
|
||||
{scope.level === 'all' ? 'Agent Groups' : scope.level === 'app' ? scope.appId : scope.instanceId}
|
||||
</span>
|
||||
<span className={styles.sectionMeta}>
|
||||
{liveCount}/{totalInstances} live
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Agent cards grid */}
|
||||
<div className={styles.agentGrid}>
|
||||
{agents.map((agent) => {
|
||||
const isExpanded = expandedAgent === agent.id
|
||||
const trendData = isExpanded ? buildAgentTrendSeries(agent.id) : null
|
||||
const statusVariant = agent.status === 'live' ? 'live' : agent.status === 'stale' ? 'stale' : 'dead'
|
||||
const cardAccent = agent.status === 'live' ? 'success' : agent.status === 'stale' ? 'warning' : 'error'
|
||||
{/* Group cards grid */}
|
||||
<div className={isFullWidth ? styles.groupGridSingle : styles.groupGrid}>
|
||||
{groups.map((group) => (
|
||||
<GroupCard
|
||||
key={group.appId}
|
||||
title={group.appId}
|
||||
accent={appHealth(group)}
|
||||
headerRight={
|
||||
<span className={styles.instanceCountBadge}>
|
||||
{group.instances.length} instance{group.instances.length !== 1 ? 's' : ''}
|
||||
</span>
|
||||
}
|
||||
meta={
|
||||
<div className={styles.groupMeta}>
|
||||
<span><strong>{group.totalTps.toFixed(1)}</strong> msg/s</span>
|
||||
<span><strong>{group.totalActiveRoutes}</strong>/{group.totalRoutes} routes</span>
|
||||
<span>
|
||||
<StatusDot variant={appHealth(group) === 'success' ? 'live' : appHealth(group) === 'warning' ? 'stale' : 'dead'} />
|
||||
</span>
|
||||
</div>
|
||||
}
|
||||
footer={group.deadCount > 0 ? (
|
||||
<div className={styles.alertBanner}>
|
||||
<span className={styles.alertIcon}>⚠</span>
|
||||
<span>Single point of failure — {group.deadCount === group.instances.length ? 'no redundancy' : `${group.deadCount} dead instance${group.deadCount > 1 ? 's' : ''}`}</span>
|
||||
</div>
|
||||
) : undefined}
|
||||
>
|
||||
{/* Instance header row */}
|
||||
<div className={styles.instanceHeader}>
|
||||
<span />
|
||||
<span>Instance</span>
|
||||
<span>State</span>
|
||||
<span>Uptime</span>
|
||||
<span>TPS</span>
|
||||
<span>Errors</span>
|
||||
<span>Heartbeat</span>
|
||||
</div>
|
||||
|
||||
return (
|
||||
<Card
|
||||
key={agent.id}
|
||||
accent={cardAccent as 'success' | 'warning' | 'error'}
|
||||
className={styles.agentCard}
|
||||
>
|
||||
{/* Agent card header */}
|
||||
<div
|
||||
className={styles.agentCardHeader}
|
||||
onClick={() => toggleAgent(agent.id)}
|
||||
role="button"
|
||||
tabIndex={0}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === 'Enter' || e.key === ' ') toggleAgent(agent.id)
|
||||
}}
|
||||
aria-expanded={isExpanded}
|
||||
>
|
||||
<div className={styles.agentCardLeft}>
|
||||
<StatusDot variant={statusVariant} />
|
||||
<div>
|
||||
<div className={styles.agentCardName}>{agent.name}</div>
|
||||
<div className={styles.agentCardService}>{agent.service} {agent.version}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className={styles.agentCardRight}>
|
||||
{/* Instance rows */}
|
||||
{group.instances.map((inst) => (
|
||||
<div key={inst.id}>
|
||||
<Link
|
||||
to={`/agents/${inst.appId}/${inst.id}`}
|
||||
className={[
|
||||
styles.instanceRow,
|
||||
scope.level === 'instance' && scope.instanceId === inst.id ? styles.instanceRowActive : '',
|
||||
].filter(Boolean).join(' ')}
|
||||
>
|
||||
<StatusDot variant={inst.status === 'live' ? 'live' : inst.status === 'stale' ? 'stale' : 'dead'} />
|
||||
<MonoText size="sm" className={styles.instanceName}>{inst.name}</MonoText>
|
||||
<Badge
|
||||
label={agent.status.toUpperCase()}
|
||||
color={agent.status === 'live' ? 'success' : agent.status === 'stale' ? 'warning' : 'error'}
|
||||
label={inst.status.toUpperCase()}
|
||||
color={inst.status === 'live' ? 'success' : inst.status === 'stale' ? 'warning' : 'error'}
|
||||
variant="filled"
|
||||
/>
|
||||
<span className={styles.expandIcon}>{isExpanded ? '▲' : '▼'}</span>
|
||||
</div>
|
||||
</div>
|
||||
<MonoText size="xs" className={styles.instanceMeta}>{inst.uptime}</MonoText>
|
||||
<MonoText size="xs" className={styles.instanceMeta}>{inst.tps.toFixed(1)}/s</MonoText>
|
||||
<MonoText size="xs" className={inst.errorRate ? styles.instanceError : styles.instanceMeta}>
|
||||
{inst.errorRate ?? '0 err/h'}
|
||||
</MonoText>
|
||||
<MonoText size="xs" className={
|
||||
inst.status === 'dead' ? styles.instanceHeartbeatDead :
|
||||
inst.status === 'stale' ? styles.instanceHeartbeatStale :
|
||||
styles.instanceMeta
|
||||
}>
|
||||
{inst.lastSeen}
|
||||
</MonoText>
|
||||
</Link>
|
||||
|
||||
{/* Agent metrics row */}
|
||||
<div className={styles.agentMetrics}>
|
||||
<div className={styles.agentMetric}>
|
||||
<span className={styles.metricLabel}>TPS</span>
|
||||
<MonoText size="sm" className={styles.metricValue}>{agent.tps}</MonoText>
|
||||
</div>
|
||||
<div className={styles.agentMetric}>
|
||||
<span className={styles.metricLabel}>Uptime</span>
|
||||
<MonoText size="sm" className={styles.metricValue}>{agent.uptime}</MonoText>
|
||||
</div>
|
||||
<div className={styles.agentMetric}>
|
||||
<span className={styles.metricLabel}>Last Seen</span>
|
||||
<MonoText size="sm" className={styles.metricValue}>{agent.lastSeen}</MonoText>
|
||||
</div>
|
||||
{agent.errorRate && (
|
||||
<div className={styles.agentMetric}>
|
||||
<span className={styles.metricLabel}>Error Rate</span>
|
||||
<MonoText size="sm" className={styles.metricValueError}>{agent.errorRate}</MonoText>
|
||||
{/* Expanded charts for single instance */}
|
||||
{singleInstance?.id === inst.id && trendData && (
|
||||
<div className={styles.instanceCharts}>
|
||||
<div className={styles.chartPanel}>
|
||||
<div className={styles.chartTitle}>Throughput (msg/s)</div>
|
||||
<LineChart
|
||||
series={[{ label: 'tps', data: trendData.throughput }]}
|
||||
height={160}
|
||||
width={480}
|
||||
yLabel="msg/s"
|
||||
/>
|
||||
</div>
|
||||
<div className={styles.chartPanel}>
|
||||
<div className={styles.chartTitle}>Error Rate (err/h)</div>
|
||||
<LineChart
|
||||
series={[{ label: 'errors', data: trendData.errorRate, color: 'var(--error)' }]}
|
||||
height={160}
|
||||
width={480}
|
||||
yLabel="err/h"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
<div className={styles.agentMetric}>
|
||||
<span className={styles.metricLabel}>CPU</span>
|
||||
<MonoText size="sm" className={agent.cpuUsagePct > 70 ? styles.metricValueWarn : styles.metricValue}>
|
||||
{agent.cpuUsagePct}%
|
||||
</MonoText>
|
||||
</div>
|
||||
<div className={styles.agentMetric}>
|
||||
<span className={styles.metricLabel}>Memory</span>
|
||||
<MonoText size="sm" className={agent.memoryUsagePct > 80 ? styles.metricValueError : agent.memoryUsagePct > 70 ? styles.metricValueWarn : styles.metricValue}>
|
||||
{agent.memoryUsagePct}%
|
||||
</MonoText>
|
||||
</div>
|
||||
<div className={styles.agentMetric}>
|
||||
<span className={styles.metricLabel}>Routes</span>
|
||||
<MonoText size="sm" className={styles.metricValue}>
|
||||
{agent.activeRoutes}/{agent.totalRoutes}
|
||||
</MonoText>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Expanded detail: trend charts */}
|
||||
{isExpanded && trendData && (
|
||||
<div className={styles.agentCharts}>
|
||||
<div className={styles.agentChart}>
|
||||
<div className={styles.chartTitle}>Throughput (msg/s)</div>
|
||||
<LineChart
|
||||
series={[{ label: 'tps', data: trendData.throughputData }]}
|
||||
height={140}
|
||||
width={380}
|
||||
yLabel="msg/s"
|
||||
/>
|
||||
</div>
|
||||
<div className={styles.agentChart}>
|
||||
<div className={styles.chartTitle}>Error Rate (err/h)</div>
|
||||
<LineChart
|
||||
series={[{ label: 'errors', data: trendData.errorRateData, color: 'var(--error)' }]}
|
||||
height={140}
|
||||
width={380}
|
||||
yLabel="err/h"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</Card>
|
||||
)
|
||||
})}
|
||||
))}
|
||||
</GroupCard>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* EventFeed */}
|
||||
{filteredEvents.length > 0 && (
|
||||
<div className={styles.eventSection}>
|
||||
<div className={styles.sectionHeaderRow}>
|
||||
<span className={styles.sectionTitle}>Timeline</span>
|
||||
</div>
|
||||
<EventFeed events={filteredEvents} />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</AppShell>
|
||||
)
|
||||
|
||||
@@ -13,6 +13,7 @@ import {
|
||||
Dropdown,
|
||||
EventFeed,
|
||||
FilterBar,
|
||||
GroupCard,
|
||||
LineChart,
|
||||
MenuItem,
|
||||
Modal,
|
||||
@@ -430,6 +431,25 @@ export function CompositesSection() {
|
||||
</div>
|
||||
</DemoCard>
|
||||
|
||||
{/* 11b. GroupCard */}
|
||||
<DemoCard
|
||||
id="groupcard"
|
||||
title="GroupCard"
|
||||
description="Generic card with header, meta row, children, and optional footer. Used for grouping instances by application."
|
||||
>
|
||||
<div style={{ maxWidth: 500 }}>
|
||||
<GroupCard
|
||||
title="order-service"
|
||||
accent="success"
|
||||
headerRight={<span style={{ fontSize: 11, fontFamily: 'var(--font-mono)', color: 'var(--text-muted)', background: 'var(--bg-inset)', padding: '2px 8px', borderRadius: 10 }}>3 instances</span>}
|
||||
meta={<div style={{ display: 'flex', gap: 16, fontSize: 11, color: 'var(--text-muted)' }}><span><strong>34.4</strong> msg/s</span><span><strong>9</strong>/9 routes</span></div>}
|
||||
footer={undefined}
|
||||
>
|
||||
<div style={{ padding: '8px 16px', fontSize: 12, color: 'var(--text-secondary)' }}>Instance rows go here</div>
|
||||
</GroupCard>
|
||||
</div>
|
||||
</DemoCard>
|
||||
|
||||
{/* 12. FilterBar */}
|
||||
<DemoCard
|
||||
id="filterbar"
|
||||
|
||||
@@ -35,8 +35,8 @@ const SAMPLE_APPS: SidebarApp[] = [
|
||||
{ id: 'r2', name: 'payment-validate', exchangeCount: 3102 },
|
||||
],
|
||||
agents: [
|
||||
{ id: 'ag1', name: 'agent-prod-1', status: 'live' as const, tps: '42 tps' },
|
||||
{ id: 'ag2', name: 'agent-prod-2', status: 'live' as const, tps: '38 tps' },
|
||||
{ id: 'ag1', name: 'agent-prod-1', status: 'live' as const, tps: 42 },
|
||||
{ id: 'ag2', name: 'agent-prod-2', status: 'live' as const, tps: 38 },
|
||||
],
|
||||
},
|
||||
{
|
||||
@@ -48,7 +48,7 @@ const SAMPLE_APPS: SidebarApp[] = [
|
||||
{ id: 'r3', name: 'notify-customer', exchangeCount: 2201 },
|
||||
],
|
||||
agents: [
|
||||
{ id: 'ag3', name: 'agent-staging-1', status: 'stale' as const, tps: '5 tps' },
|
||||
{ id: 'ag3', name: 'agent-staging-1', status: 'stale' as const, tps: 5 },
|
||||
],
|
||||
},
|
||||
{
|
||||
|
||||
Reference in New Issue
Block a user