62b5c56c56
Icons now reflect event type (UserPlus for registration, Skull for dead, HeartPulse for recovery, Route for state changes, etc.) while severity still drives the color. Updated in both AgentInstance and AgentHealth pages. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
644 lines
26 KiB
TypeScript
644 lines
26 KiB
TypeScript
import { useState, useMemo, useCallback } from 'react';
|
|
import { useParams, useNavigate } from 'react-router';
|
|
import { ExternalLink, RefreshCw, Pencil, UserPlus, UserMinus, Play, Square, Clock, Skull, HeartPulse, Route, Send, Activity } from 'lucide-react';
|
|
import {
|
|
StatCard, StatusDot, Badge, MonoText,
|
|
GroupCard, DataTable, EventFeed,
|
|
LogViewer, ButtonGroup, SectionHeader, Toggle, useToast,
|
|
} from '@cameleer/design-system';
|
|
import type { Column, FeedEvent, LogEntry, ButtonGroupItem } from '@cameleer/design-system';
|
|
import styles from './AgentHealth.module.css';
|
|
import { useAgents, useAgentEvents } from '../../api/queries/agents';
|
|
import { useApplicationLogs } from '../../api/queries/logs';
|
|
import { useApplicationConfig, useUpdateApplicationConfig } from '../../api/queries/commands';
|
|
import type { ConfigUpdateResponse } from '../../api/queries/commands';
|
|
import type { AgentInstance } from '../../api/types';
|
|
|
|
// ── Helpers ──────────────────────────────────────────────────────────────────
|
|
|
|
function timeAgo(iso?: string): string {
|
|
if (!iso) return '\u2014';
|
|
const diff = Date.now() - new Date(iso).getTime();
|
|
const secs = Math.floor(diff / 1000);
|
|
if (secs < 60) return `${secs}s ago`;
|
|
const mins = Math.floor(secs / 60);
|
|
if (mins < 60) return `${mins}m ago`;
|
|
const hours = Math.floor(mins / 60);
|
|
if (hours < 24) return `${hours}h ago`;
|
|
return `${Math.floor(hours / 24)}d ago`;
|
|
}
|
|
|
|
function formatUptime(seconds?: number): string {
|
|
if (!seconds) return '\u2014';
|
|
const days = Math.floor(seconds / 86400);
|
|
const hours = Math.floor((seconds % 86400) / 3600);
|
|
const mins = Math.floor((seconds % 3600) / 60);
|
|
if (days > 0) return `${days}d ${hours}h`;
|
|
if (hours > 0) return `${hours}h ${mins}m`;
|
|
return `${mins}m`;
|
|
}
|
|
|
|
function formatErrorRate(rate?: number): string {
|
|
if (rate == null) return '\u2014';
|
|
return `${(rate * 100).toFixed(1)}%`;
|
|
}
|
|
|
|
type NormStatus = 'live' | 'stale' | 'dead';
|
|
|
|
function normalizeStatus(status: string): NormStatus {
|
|
return status.toLowerCase() as NormStatus;
|
|
}
|
|
|
|
function statusColor(s: NormStatus): 'success' | 'warning' | 'error' {
|
|
if (s === 'live') return 'success';
|
|
if (s === 'stale') return 'warning';
|
|
return 'error';
|
|
}
|
|
|
|
// ── Data grouping ────────────────────────────────────────────────────────────
|
|
|
|
interface AppGroup {
|
|
appId: string;
|
|
instances: AgentInstance[];
|
|
liveCount: number;
|
|
staleCount: number;
|
|
deadCount: number;
|
|
totalTps: number;
|
|
totalActiveRoutes: number;
|
|
totalRoutes: number;
|
|
}
|
|
|
|
function groupByApp(agentList: AgentInstance[]): AppGroup[] {
|
|
const map = new Map<string, AgentInstance[]>();
|
|
for (const a of agentList) {
|
|
const app = a.applicationId;
|
|
const list = map.get(app) ?? [];
|
|
list.push(a);
|
|
map.set(app, list);
|
|
}
|
|
return Array.from(map.entries()).map(([appId, instances]) => ({
|
|
appId,
|
|
instances,
|
|
liveCount: instances.filter((i) => normalizeStatus(i.status) === 'live').length,
|
|
staleCount: instances.filter((i) => normalizeStatus(i.status) === 'stale').length,
|
|
deadCount: instances.filter((i) => normalizeStatus(i.status) === 'dead').length,
|
|
totalTps: instances.reduce((s, i) => s + (i.tps ?? 0), 0),
|
|
totalActiveRoutes: instances.reduce((s, i) => s + (i.activeRoutes ?? 0), 0),
|
|
totalRoutes: instances.reduce((s, i) => s + (i.totalRoutes ?? 0), 0),
|
|
}));
|
|
}
|
|
|
|
function appHealth(group: AppGroup): 'success' | 'warning' | 'error' {
|
|
if (group.deadCount > 0) return 'error';
|
|
if (group.staleCount > 0) return 'warning';
|
|
return 'success';
|
|
}
|
|
|
|
// ── Detail sub-components ────────────────────────────────────────────────────
|
|
|
|
const LOG_LEVEL_ITEMS: ButtonGroupItem[] = [
|
|
{ value: 'error', label: 'Error', color: 'var(--error)' },
|
|
{ value: 'warn', label: 'Warn', color: 'var(--warning)' },
|
|
{ value: 'info', label: 'Info', color: 'var(--success)' },
|
|
{ value: 'debug', label: 'Debug', color: 'var(--running)' },
|
|
{ value: 'trace', label: 'Trace', color: 'var(--text-muted)' },
|
|
];
|
|
|
|
function mapLogLevel(level: string): LogEntry['level'] {
|
|
switch (level?.toUpperCase()) {
|
|
case 'ERROR': return 'error';
|
|
case 'WARN': case 'WARNING': return 'warn';
|
|
case 'DEBUG': return 'debug';
|
|
case 'TRACE': return 'trace';
|
|
default: return 'info';
|
|
}
|
|
}
|
|
|
|
// ── AgentHealth page ─────────────────────────────────────────────────────────
|
|
|
|
export default function AgentHealth() {
|
|
const { appId } = useParams();
|
|
const navigate = useNavigate();
|
|
const { toast } = useToast();
|
|
const { data: agents } = useAgents(undefined, appId);
|
|
const { data: appConfig } = useApplicationConfig(appId);
|
|
const updateConfig = useUpdateApplicationConfig();
|
|
|
|
const [configEditing, setConfigEditing] = useState(false);
|
|
const [configDraft, setConfigDraft] = useState<Record<string, string | boolean>>({});
|
|
|
|
const startConfigEdit = useCallback(() => {
|
|
if (!appConfig) return;
|
|
setConfigDraft({
|
|
applicationLogLevel: appConfig.applicationLogLevel ?? 'INFO',
|
|
agentLogLevel: appConfig.agentLogLevel ?? 'INFO',
|
|
engineLevel: appConfig.engineLevel ?? 'REGULAR',
|
|
payloadCaptureMode: appConfig.payloadCaptureMode ?? 'NONE',
|
|
metricsEnabled: appConfig.metricsEnabled,
|
|
});
|
|
setConfigEditing(true);
|
|
}, [appConfig]);
|
|
|
|
const saveConfigEdit = useCallback(() => {
|
|
if (!appConfig) return;
|
|
const updated = { ...appConfig, ...configDraft };
|
|
updateConfig.mutate(updated, {
|
|
onSuccess: (saved: ConfigUpdateResponse) => {
|
|
setConfigEditing(false);
|
|
setConfigDraft({});
|
|
if (saved.pushResult.success) {
|
|
toast({ title: 'Config updated', description: `${appId} (v${saved.config.version}) — pushed to ${saved.pushResult.total}/${saved.pushResult.total} agents`, variant: 'success' });
|
|
} else {
|
|
const failed = [...saved.pushResult.responses.filter(r => r.status !== 'SUCCESS').map(r => r.agentId), ...saved.pushResult.timedOut];
|
|
toast({ title: 'Config updated — partial push failure', description: `${saved.pushResult.responded}/${saved.pushResult.total} responded. Failed: ${failed.join(', ')}`, variant: 'warning', duration: 86_400_000 });
|
|
}
|
|
},
|
|
onError: () => {
|
|
toast({ title: 'Config update failed', variant: 'error', duration: 86_400_000 });
|
|
},
|
|
});
|
|
}, [appConfig, configDraft, updateConfig, toast, appId]);
|
|
const [eventSortAsc, setEventSortAsc] = useState(false);
|
|
const [eventRefreshTo, setEventRefreshTo] = useState<string | undefined>();
|
|
const { data: events } = useAgentEvents(appId, undefined, 50, eventRefreshTo);
|
|
|
|
const [logSearch, setLogSearch] = useState('');
|
|
const [logLevels, setLogLevels] = useState<Set<string>>(new Set());
|
|
const [logSortAsc, setLogSortAsc] = useState(false);
|
|
const [logRefreshTo, setLogRefreshTo] = useState<string | undefined>();
|
|
const { data: rawLogs } = useApplicationLogs(appId, undefined, { toOverride: logRefreshTo });
|
|
const logEntries = useMemo<LogEntry[]>(() => {
|
|
const mapped = (rawLogs || []).map((l) => ({
|
|
timestamp: l.timestamp ?? '',
|
|
level: mapLogLevel(l.level),
|
|
message: l.message ?? '',
|
|
}));
|
|
return logSortAsc ? mapped.toReversed() : mapped;
|
|
}, [rawLogs, logSortAsc]);
|
|
const logSearchLower = logSearch.toLowerCase();
|
|
const filteredLogs = logEntries
|
|
.filter((l) => logLevels.size === 0 || logLevels.has(l.level))
|
|
.filter((l) => !logSearchLower || l.message.toLowerCase().includes(logSearchLower));
|
|
|
|
const agentList = agents ?? [];
|
|
|
|
const groups = useMemo(() => groupByApp(agentList), [agentList]);
|
|
|
|
// Aggregate stats
|
|
const totalInstances = agentList.length;
|
|
const liveCount = agentList.filter((a) => normalizeStatus(a.status) === 'live').length;
|
|
const staleCount = agentList.filter((a) => normalizeStatus(a.status) === 'stale').length;
|
|
const deadCount = agentList.filter((a) => normalizeStatus(a.status) === 'dead').length;
|
|
const totalTps = agentList.reduce((s, a) => s + (a.tps ?? 0), 0);
|
|
const totalActiveRoutes = agentList.reduce((s, a) => s + (a.activeRoutes ?? 0), 0);
|
|
const totalRoutes = agentList.reduce((s, a) => s + (a.totalRoutes ?? 0), 0);
|
|
|
|
// Map events to FeedEvent
|
|
const feedEvents: FeedEvent[] = useMemo(() => {
|
|
const eventIcon = (type: string) => {
|
|
switch (type) {
|
|
case 'REGISTERED': return <UserPlus size={14} />;
|
|
case 'DEREGISTERED': return <UserMinus size={14} />;
|
|
case 'AGENT_STARTED': return <Play size={14} />;
|
|
case 'AGENT_STOPPED': return <Square size={14} />;
|
|
case 'WENT_STALE': return <Clock size={14} />;
|
|
case 'WENT_DEAD': return <Skull size={14} />;
|
|
case 'RECOVERED': return <HeartPulse size={14} />;
|
|
case 'ROUTE_STATE_CHANGED': return <Route size={14} />;
|
|
case 'COMMAND_DELIVERED':
|
|
case 'COMMAND_ACKNOWLEDGED': return <Send size={14} />;
|
|
default: return <Activity size={14} />;
|
|
}
|
|
};
|
|
|
|
const eventSeverity = (type: string): FeedEvent['severity'] => {
|
|
switch (type) {
|
|
case 'WENT_DEAD':
|
|
case 'AGENT_STOPPED':
|
|
case 'DEREGISTERED': return 'error';
|
|
case 'WENT_STALE': return 'warning';
|
|
case 'RECOVERED':
|
|
case 'REGISTERED':
|
|
case 'AGENT_STARTED': return 'success';
|
|
default: return 'running';
|
|
}
|
|
};
|
|
|
|
const mapped = (events ?? []).map((e: { id: number; instanceId: string; eventType: string; detail: string; timestamp: string }) => ({
|
|
id: String(e.id),
|
|
severity: eventSeverity(e.eventType),
|
|
icon: eventIcon(e.eventType),
|
|
message: `${e.instanceId}: ${e.eventType}${e.detail ? ' \u2014 ' + e.detail : ''}`,
|
|
timestamp: new Date(e.timestamp),
|
|
}));
|
|
return eventSortAsc ? mapped.toReversed() : mapped;
|
|
}, [events, eventSortAsc]);
|
|
|
|
// Column definitions for the instance DataTable
|
|
const instanceColumns: Column<AgentInstance>[] = useMemo(
|
|
() => [
|
|
{
|
|
key: 'status',
|
|
header: '',
|
|
width: '12px',
|
|
render: (_val, row) => <StatusDot variant={normalizeStatus(row.status)} />,
|
|
},
|
|
{
|
|
key: '_inspect',
|
|
header: '',
|
|
width: '36px',
|
|
render: (_val, row) => (
|
|
<button
|
|
className={styles.inspectLink}
|
|
title="Open instance page"
|
|
onClick={(e) => {
|
|
e.stopPropagation();
|
|
navigate(`/agents/${row.applicationId}/${row.instanceId}`);
|
|
}}
|
|
>
|
|
<ExternalLink size={14} />
|
|
</button>
|
|
),
|
|
},
|
|
{
|
|
key: 'name',
|
|
header: 'Instance',
|
|
render: (_val, row) => (
|
|
<MonoText size="sm" className={styles.instanceName}>{row.displayName ?? row.instanceId}</MonoText>
|
|
),
|
|
},
|
|
{
|
|
key: 'state',
|
|
header: 'State',
|
|
render: (_val, row) => {
|
|
const ns = normalizeStatus(row.status);
|
|
return <Badge label={row.status} color={statusColor(ns)} variant="filled" />;
|
|
},
|
|
},
|
|
{
|
|
key: 'uptime',
|
|
header: 'Uptime',
|
|
render: (_val, row) => (
|
|
<MonoText size="xs" className={styles.instanceMeta}>{formatUptime(row.uptimeSeconds)}</MonoText>
|
|
),
|
|
},
|
|
{
|
|
key: 'tps',
|
|
header: 'TPS',
|
|
render: (_val, row) => (
|
|
<MonoText size="xs" className={styles.instanceMeta}>
|
|
{row.tps != null ? `${row.tps.toFixed(1)}/s` : '\u2014'}
|
|
</MonoText>
|
|
),
|
|
},
|
|
{
|
|
key: 'errorRate',
|
|
header: 'Errors',
|
|
render: (_val, row) => (
|
|
<MonoText size="xs" className={row.errorRate ? styles.instanceError : styles.instanceMeta}>
|
|
{formatErrorRate(row.errorRate)}
|
|
</MonoText>
|
|
),
|
|
},
|
|
{
|
|
key: 'lastHeartbeat',
|
|
header: 'Heartbeat',
|
|
render: (_val, row) => {
|
|
const ns = normalizeStatus(row.status);
|
|
return (
|
|
<MonoText
|
|
size="xs"
|
|
className={
|
|
ns === 'dead'
|
|
? styles.instanceHeartbeatDead
|
|
: ns === 'stale'
|
|
? styles.instanceHeartbeatStale
|
|
: styles.instanceMeta
|
|
}
|
|
>
|
|
{timeAgo(row.lastHeartbeat)}
|
|
</MonoText>
|
|
);
|
|
},
|
|
},
|
|
],
|
|
[],
|
|
);
|
|
|
|
function handleInstanceClick(inst: AgentInstance) {
|
|
navigate(`/runtime/${inst.applicationId}/${inst.instanceId}`);
|
|
}
|
|
|
|
const isFullWidth = !!appId;
|
|
|
|
return (
|
|
<div className={styles.content}>
|
|
{/* Stat strip */}
|
|
<div className={styles.statStrip}>
|
|
<StatCard
|
|
label="Total Agents"
|
|
value={String(totalInstances)}
|
|
accent={deadCount > 0 ? 'warning' : 'amber'}
|
|
detail={
|
|
<span className={styles.breakdown}>
|
|
<span className={styles.bpLive}><StatusDot variant="live" /> {liveCount} live</span>
|
|
<span className={styles.bpStale}><StatusDot variant="stale" /> {staleCount} stale</span>
|
|
<span className={styles.bpDead}><StatusDot variant="dead" /> {deadCount} dead</span>
|
|
</span>
|
|
}
|
|
/>
|
|
<StatCard
|
|
label="Applications"
|
|
value={String(groups.length)}
|
|
accent="running"
|
|
detail={
|
|
<span className={styles.breakdown}>
|
|
<span className={styles.bpLive}>
|
|
<StatusDot variant="live" /> {groups.filter((g) => g.deadCount === 0 && g.staleCount === 0).length} healthy
|
|
</span>
|
|
<span className={styles.bpStale}>
|
|
<StatusDot variant="stale" /> {groups.filter((g) => g.staleCount > 0 && g.deadCount === 0).length} degraded
|
|
</span>
|
|
<span className={styles.bpDead}>
|
|
<StatusDot variant="dead" /> {groups.filter((g) => g.deadCount > 0).length} critical
|
|
</span>
|
|
</span>
|
|
}
|
|
/>
|
|
<StatCard
|
|
label="Active Routes"
|
|
value={
|
|
<span
|
|
className={
|
|
styles[
|
|
totalActiveRoutes === 0
|
|
? 'routesError'
|
|
: totalActiveRoutes < totalRoutes
|
|
? 'routesWarning'
|
|
: 'routesSuccess'
|
|
]
|
|
}
|
|
>
|
|
{totalActiveRoutes}/{totalRoutes}
|
|
</span>
|
|
}
|
|
accent={totalActiveRoutes === 0 ? 'error' : totalActiveRoutes < totalRoutes ? 'warning' : 'success'}
|
|
detail={totalActiveRoutes < totalRoutes ? `${totalRoutes - totalActiveRoutes} suspended` : 'all routes active'}
|
|
/>
|
|
<StatCard
|
|
label="Total TPS"
|
|
value={totalTps.toFixed(1)}
|
|
accent="amber"
|
|
detail="msg/s"
|
|
/>
|
|
<StatCard
|
|
label="Dead"
|
|
value={String(deadCount)}
|
|
accent={deadCount > 0 ? 'error' : 'success'}
|
|
detail={deadCount > 0 ? 'requires attention' : 'all healthy'}
|
|
/>
|
|
</div>
|
|
|
|
<div style={{ marginBottom: 12 }}>
|
|
<Badge
|
|
label={`${liveCount}/${totalInstances} live`}
|
|
color={deadCount > 0 ? 'error' : staleCount > 0 ? 'warning' : 'success'}
|
|
variant="filled"
|
|
/>
|
|
</div>
|
|
|
|
{/* Application config bar */}
|
|
{appId && appConfig && (
|
|
<div className={styles.configBar}>
|
|
{configEditing ? (
|
|
<>
|
|
<div className={styles.configField}>
|
|
<span className={styles.configLabel}>App Log Level</span>
|
|
<select className={styles.configSelect} value={String(configDraft.applicationLogLevel ?? 'INFO')}
|
|
onChange={(e) => setConfigDraft(d => ({ ...d, applicationLogLevel: e.target.value }))}>
|
|
<option value="ERROR">ERROR</option>
|
|
<option value="WARN">WARN</option>
|
|
<option value="INFO">INFO</option>
|
|
<option value="DEBUG">DEBUG</option>
|
|
<option value="TRACE">TRACE</option>
|
|
</select>
|
|
</div>
|
|
<div className={styles.configField}>
|
|
<span className={styles.configLabel}>Agent Log Level</span>
|
|
<select className={styles.configSelect} value={String(configDraft.agentLogLevel ?? 'INFO')}
|
|
onChange={(e) => setConfigDraft(d => ({ ...d, agentLogLevel: e.target.value }))}>
|
|
<option value="ERROR">ERROR</option>
|
|
<option value="WARN">WARN</option>
|
|
<option value="INFO">INFO</option>
|
|
<option value="DEBUG">DEBUG</option>
|
|
<option value="TRACE">TRACE</option>
|
|
</select>
|
|
</div>
|
|
<div className={styles.configField}>
|
|
<span className={styles.configLabel}>Engine Level</span>
|
|
<select className={styles.configSelect} value={String(configDraft.engineLevel ?? 'REGULAR')}
|
|
onChange={(e) => setConfigDraft(d => ({ ...d, engineLevel: e.target.value }))}>
|
|
<option value="NONE">None</option>
|
|
<option value="MINIMAL">Minimal</option>
|
|
<option value="REGULAR">Regular</option>
|
|
<option value="COMPLETE">Complete</option>
|
|
</select>
|
|
</div>
|
|
<div className={styles.configField}>
|
|
<span className={styles.configLabel}>Payload Capture</span>
|
|
<select className={styles.configSelect} value={String(configDraft.payloadCaptureMode ?? 'NONE')}
|
|
onChange={(e) => setConfigDraft(d => ({ ...d, payloadCaptureMode: e.target.value }))}>
|
|
<option value="NONE">None</option>
|
|
<option value="INPUT">Input</option>
|
|
<option value="OUTPUT">Output</option>
|
|
<option value="BOTH">Both</option>
|
|
</select>
|
|
</div>
|
|
<div className={styles.configField}>
|
|
<span className={styles.configLabel}>Metrics</span>
|
|
<Toggle checked={Boolean(configDraft.metricsEnabled)}
|
|
onChange={(e) => setConfigDraft(d => ({ ...d, metricsEnabled: (e.target as HTMLInputElement).checked }))} />
|
|
</div>
|
|
<div className={styles.configActions}>
|
|
<button className={styles.configSaveBtn} onClick={saveConfigEdit} disabled={updateConfig.isPending}>Save</button>
|
|
<button className={styles.configCancelBtn} onClick={() => { setConfigEditing(false); setConfigDraft({}); }}>Cancel</button>
|
|
</div>
|
|
</>
|
|
) : (
|
|
<>
|
|
<div className={styles.configField}>
|
|
<span className={styles.configLabel}>App Log Level</span>
|
|
<Badge label={appConfig.applicationLogLevel ?? 'INFO'} color={
|
|
(appConfig.applicationLogLevel ?? 'INFO') === 'ERROR' ? 'error'
|
|
: (appConfig.applicationLogLevel ?? 'INFO') === 'WARN' ? 'warning'
|
|
: (appConfig.applicationLogLevel ?? 'INFO') === 'DEBUG' ? 'running'
|
|
: (appConfig.applicationLogLevel ?? 'INFO') === 'TRACE' ? 'auto' : 'success'
|
|
} variant="filled" />
|
|
</div>
|
|
<div className={styles.configField}>
|
|
<span className={styles.configLabel}>Agent Log Level</span>
|
|
<Badge label={appConfig.agentLogLevel ?? 'INFO'} color={
|
|
(appConfig.agentLogLevel ?? 'INFO') === 'ERROR' ? 'error'
|
|
: (appConfig.agentLogLevel ?? 'INFO') === 'WARN' ? 'warning'
|
|
: (appConfig.agentLogLevel ?? 'INFO') === 'DEBUG' ? 'running'
|
|
: (appConfig.agentLogLevel ?? 'INFO') === 'TRACE' ? 'auto' : 'success'
|
|
} variant="filled" />
|
|
</div>
|
|
<div className={styles.configField}>
|
|
<span className={styles.configLabel}>Engine Level</span>
|
|
<Badge label={appConfig.engineLevel ?? 'REGULAR'} color={
|
|
(appConfig.engineLevel ?? 'REGULAR') === 'NONE' ? 'error'
|
|
: (appConfig.engineLevel ?? 'REGULAR') === 'MINIMAL' ? 'warning'
|
|
: (appConfig.engineLevel ?? 'REGULAR') === 'COMPLETE' ? 'running' : 'success'
|
|
} variant="filled" />
|
|
</div>
|
|
<div className={styles.configField}>
|
|
<span className={styles.configLabel}>Payload Capture</span>
|
|
<Badge label={appConfig.payloadCaptureMode ?? 'NONE'} color={
|
|
(appConfig.payloadCaptureMode ?? 'NONE') === 'BOTH' ? 'running'
|
|
: (appConfig.payloadCaptureMode ?? 'NONE') === 'NONE' ? 'auto' : 'warning'
|
|
} variant="filled" />
|
|
</div>
|
|
<div className={styles.configField}>
|
|
<span className={styles.configLabel}>Metrics</span>
|
|
<Badge label={appConfig.metricsEnabled ? 'On' : 'Off'} color={appConfig.metricsEnabled ? 'success' : 'error'} variant="filled" />
|
|
</div>
|
|
<button className={styles.configEditBtn} title="Edit config" onClick={startConfigEdit}><Pencil size={14} /></button>
|
|
</>
|
|
)}
|
|
</div>
|
|
)}
|
|
|
|
{/* Group cards grid */}
|
|
<div className={isFullWidth ? styles.groupGridSingle : styles.groupGrid}>
|
|
{groups.map((group) => (
|
|
<GroupCard
|
|
key={group.appId}
|
|
title={group.appId}
|
|
accent={appHealth(group)}
|
|
headerRight={
|
|
<Badge
|
|
label={`${group.liveCount}/${group.instances.length} LIVE`}
|
|
color={appHealth(group)}
|
|
variant="filled"
|
|
/>
|
|
}
|
|
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
|
|
}
|
|
>
|
|
<DataTable<AgentInstance & { id: string }>
|
|
columns={instanceColumns as Column<AgentInstance & { id: string }>[]}
|
|
data={group.instances.map(i => ({ ...i, id: i.instanceId }))}
|
|
onRowClick={handleInstanceClick}
|
|
pageSize={50}
|
|
flush
|
|
/>
|
|
</GroupCard>
|
|
))}
|
|
</div>
|
|
|
|
{/* Log + Timeline side by side */}
|
|
<div className={styles.bottomRow}>
|
|
<div className={styles.logCard}>
|
|
<div className={styles.logHeader}>
|
|
<SectionHeader>Application Log</SectionHeader>
|
|
<div className={styles.headerActions}>
|
|
<span className={styles.sectionMeta}>{logEntries.length} entries</span>
|
|
<button className={styles.sortBtn} onClick={() => setLogSortAsc((v) => !v)} title={logSortAsc ? 'Oldest first' : 'Newest first'}>
|
|
{logSortAsc ? '\u2191' : '\u2193'}
|
|
</button>
|
|
<button className={styles.refreshBtn} onClick={() => setLogRefreshTo(new Date().toISOString())} title="Refresh">
|
|
<RefreshCw size={14} />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div className={styles.logToolbar}>
|
|
<div className={styles.logSearchWrap}>
|
|
<input
|
|
type="text"
|
|
className={styles.logSearchInput}
|
|
placeholder="Search logs\u2026"
|
|
value={logSearch}
|
|
onChange={(e) => setLogSearch(e.target.value)}
|
|
aria-label="Search logs"
|
|
/>
|
|
{logSearch && (
|
|
<button
|
|
type="button"
|
|
className={styles.logSearchClear}
|
|
onClick={() => setLogSearch('')}
|
|
aria-label="Clear search"
|
|
>
|
|
×
|
|
</button>
|
|
)}
|
|
</div>
|
|
<ButtonGroup items={LOG_LEVEL_ITEMS} value={logLevels} onChange={setLogLevels} />
|
|
{logLevels.size > 0 && (
|
|
<button className={styles.logClearFilters} onClick={() => setLogLevels(new Set())}>
|
|
Clear
|
|
</button>
|
|
)}
|
|
</div>
|
|
{filteredLogs.length > 0 ? (
|
|
<LogViewer entries={filteredLogs} maxHeight={360} />
|
|
) : (
|
|
<div className={styles.logEmpty}>
|
|
{logSearch || logLevels.size > 0 ? 'No matching log entries' : 'No log entries available'}
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
<div className={styles.eventCard}>
|
|
<div className={styles.eventCardHeader}>
|
|
<span className={styles.sectionTitle}>Timeline</span>
|
|
<div className={styles.headerActions}>
|
|
<span className={styles.sectionMeta}>{feedEvents.length} events</span>
|
|
<button className={styles.sortBtn} onClick={() => setEventSortAsc((v) => !v)} title={eventSortAsc ? 'Oldest first' : 'Newest first'}>
|
|
{eventSortAsc ? '\u2191' : '\u2193'}
|
|
</button>
|
|
<button className={styles.refreshBtn} onClick={() => setEventRefreshTo(new Date().toISOString())} title="Refresh">
|
|
<RefreshCw size={14} />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
{feedEvents.length > 0 ? (
|
|
<EventFeed events={feedEvents} maxItems={100} />
|
|
) : (
|
|
<div className={styles.logEmpty}>No events in the selected time range.</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
);
|
|
}
|