659 lines
28 KiB
TypeScript
659 lines
28 KiB
TypeScript
import { useState, useMemo, useCallback } from 'react';
|
|
import { useParams, useNavigate } from 'react-router';
|
|
import { ExternalLink, RefreshCw, Pencil } from 'lucide-react';
|
|
import {
|
|
StatCard, StatusDot, Badge, MonoText,
|
|
GroupCard, DataTable, EventFeed,
|
|
LogViewer, ButtonGroup, SectionHeader, Toggle, Select, Button, useToast,
|
|
Alert, ConfirmDialog,
|
|
} from '@cameleer/design-system';
|
|
import type { Column, FeedEvent, LogEntry, ButtonGroupItem } from '@cameleer/design-system';
|
|
import styles from './AgentHealth.module.css';
|
|
import sectionStyles from '../../styles/section-card.module.css';
|
|
import logStyles from '../../styles/log-panel.module.css';
|
|
import { useAgents, useAgentEvents } from '../../api/queries/agents';
|
|
import { useApplicationLogs } from '../../api/queries/logs';
|
|
import { useApplicationConfig, useUpdateApplicationConfig } from '../../api/queries/commands';
|
|
import { useCatalog, useDismissApp } from '../../api/queries/catalog';
|
|
import { useIsAdmin } from '../../auth/auth-store';
|
|
import { useEnvironmentStore } from '../../api/environment-store';
|
|
import type { ConfigUpdateResponse } from '../../api/queries/commands';
|
|
import type { AgentInstance } from '../../api/types';
|
|
import { timeAgo } from '../../utils/format-utils';
|
|
import { formatUptime, mapLogLevel, eventSeverity, eventIcon } from '../../utils/agent-utils';
|
|
|
|
// ── Helpers ──────────────────────────────────────────────────────────────────
|
|
|
|
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)' },
|
|
];
|
|
|
|
const LOG_SOURCE_ITEMS: ButtonGroupItem[] = [
|
|
{ value: 'app', label: 'App' },
|
|
{ value: 'agent', label: 'Agent' },
|
|
];
|
|
|
|
// ── AgentHealth page ─────────────────────────────────────────────────────────
|
|
|
|
export default function AgentHealth() {
|
|
const { appId } = useParams();
|
|
const navigate = useNavigate();
|
|
const { toast } = useToast();
|
|
const selectedEnv = useEnvironmentStore((s) => s.environment);
|
|
const { data: agents } = useAgents(undefined, appId, selectedEnv);
|
|
const { data: appConfig } = useApplicationConfig(appId);
|
|
const updateConfig = useUpdateApplicationConfig();
|
|
|
|
const isAdmin = useIsAdmin();
|
|
const selectedEnvForCatalog = useEnvironmentStore((s) => s.environment);
|
|
const { data: catalogApps } = useCatalog(selectedEnvForCatalog);
|
|
const dismissApp = useDismissApp();
|
|
const catalogEntry = catalogApps?.find((a) => a.slug === appId);
|
|
|
|
const [confirmDismissOpen, setConfirmDismissOpen] = useState(false);
|
|
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({ config: updated, environment: selectedEnv }, {
|
|
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, selectedEnv);
|
|
|
|
const [logSearch, setLogSearch] = useState('');
|
|
const [logLevels, setLogLevels] = useState<Set<string>>(new Set());
|
|
const [logSource, setLogSource] = useState<string>(''); // '' = all, 'app', 'agent'
|
|
const [logSortAsc, setLogSortAsc] = useState(false);
|
|
const [logRefreshTo, setLogRefreshTo] = useState<string | undefined>();
|
|
const { data: rawLogs } = useApplicationLogs(appId, undefined, { toOverride: logRefreshTo, source: logSource || undefined });
|
|
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 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}>
|
|
{/* No agents warning + dismiss — shown when app-scoped, no agents, admin */}
|
|
{appId && agentList.length === 0 && isAdmin && (
|
|
<>
|
|
<Alert variant="warning" title="No agents connected" className={styles.dismissAlert}>
|
|
<span>
|
|
{catalogEntry?.managed ? 'Managed app' : 'Discovered app'} — {(catalogEntry?.exchangeCount ?? 0).toLocaleString()} exchanges recorded.
|
|
{' '}You can dismiss this application to remove it and all associated data.
|
|
</span>
|
|
<div style={{ marginTop: 8 }}>
|
|
<Button variant="danger" size="sm" disabled={dismissApp.isPending}
|
|
onClick={() => setConfirmDismissOpen(true)}>
|
|
{dismissApp.isPending ? 'Dismissing\u2026' : 'Dismiss Application'}
|
|
</Button>
|
|
</div>
|
|
</Alert>
|
|
<ConfirmDialog
|
|
open={confirmDismissOpen}
|
|
onClose={() => setConfirmDismissOpen(false)}
|
|
onConfirm={() => {
|
|
setConfirmDismissOpen(false);
|
|
dismissApp.mutate(appId, {
|
|
onSuccess: () => {
|
|
toast({ title: 'Application dismissed', description: `${appId} and all associated data have been deleted`, variant: 'success' });
|
|
navigate('/runtime');
|
|
},
|
|
onError: (err) => {
|
|
toast({ title: 'Dismiss failed', description: err.message, variant: 'error', duration: 86_400_000 });
|
|
},
|
|
});
|
|
}}
|
|
title="Dismiss Application"
|
|
message={`This will permanently delete "${appId}" and all associated data (${(catalogEntry?.exchangeCount ?? 0).toLocaleString()} exchanges, logs, diagrams). This action cannot be undone.`}
|
|
confirmText={appId}
|
|
confirmLabel="Dismiss"
|
|
variant="danger"
|
|
loading={dismissApp.isPending}
|
|
/>
|
|
</>
|
|
)}
|
|
|
|
{/* 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={`${sectionStyles.section} ${styles.configBar}`}>
|
|
{configEditing ? (
|
|
<>
|
|
<div className={styles.configField}>
|
|
<span className={styles.configLabel}>App Log Level</span>
|
|
<Select value={String(configDraft.applicationLogLevel ?? 'INFO')}
|
|
onChange={(e) => setConfigDraft(d => ({ ...d, applicationLogLevel: e.target.value }))}
|
|
options={[
|
|
{ value: 'ERROR', label: 'ERROR' },
|
|
{ value: 'WARN', label: 'WARN' },
|
|
{ value: 'INFO', label: 'INFO' },
|
|
{ value: 'DEBUG', label: 'DEBUG' },
|
|
{ value: 'TRACE', label: 'TRACE' },
|
|
]}
|
|
/>
|
|
</div>
|
|
<div className={styles.configField}>
|
|
<span className={styles.configLabel}>Agent Log Level</span>
|
|
<Select value={String(configDraft.agentLogLevel ?? 'INFO')}
|
|
onChange={(e) => setConfigDraft(d => ({ ...d, agentLogLevel: e.target.value }))}
|
|
options={[
|
|
{ value: 'ERROR', label: 'ERROR' },
|
|
{ value: 'WARN', label: 'WARN' },
|
|
{ value: 'INFO', label: 'INFO' },
|
|
{ value: 'DEBUG', label: 'DEBUG' },
|
|
{ value: 'TRACE', label: 'TRACE' },
|
|
]}
|
|
/>
|
|
</div>
|
|
<div className={styles.configField}>
|
|
<span className={styles.configLabel}>Engine Level</span>
|
|
<Select value={String(configDraft.engineLevel ?? 'REGULAR')}
|
|
onChange={(e) => setConfigDraft(d => ({ ...d, engineLevel: e.target.value }))}
|
|
options={[
|
|
{ value: 'NONE', label: 'None' },
|
|
{ value: 'MINIMAL', label: 'Minimal' },
|
|
{ value: 'REGULAR', label: 'Regular' },
|
|
{ value: 'COMPLETE', label: 'Complete' },
|
|
]}
|
|
/>
|
|
</div>
|
|
<div className={styles.configField}>
|
|
<span className={styles.configLabel}>Payload Capture</span>
|
|
<Select value={String(configDraft.payloadCaptureMode ?? 'NONE')}
|
|
onChange={(e) => setConfigDraft(d => ({ ...d, payloadCaptureMode: e.target.value }))}
|
|
options={[
|
|
{ value: 'NONE', label: 'None' },
|
|
{ value: 'INPUT', label: 'Input' },
|
|
{ value: 'OUTPUT', label: 'Output' },
|
|
{ value: 'BOTH', label: 'Both' },
|
|
]}
|
|
/>
|
|
</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 variant="primary" size="sm" onClick={saveConfigEdit} disabled={updateConfig.isPending}>Save</Button>
|
|
<Button variant="secondary" size="sm" 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 variant="ghost" size="sm" 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={logStyles.logCard}>
|
|
<div className={logStyles.logHeader}>
|
|
<SectionHeader>Application Log</SectionHeader>
|
|
<div className={logStyles.headerActions}>
|
|
<span className={styles.sectionMeta}>{logEntries.length} entries</span>
|
|
<Button variant="ghost" size="sm" onClick={() => setLogSortAsc((v) => !v)} title={logSortAsc ? 'Oldest first' : 'Newest first'}>
|
|
{logSortAsc ? '\u2191' : '\u2193'}
|
|
</Button>
|
|
<Button variant="ghost" size="sm" onClick={() => setLogRefreshTo(new Date().toISOString())} title="Refresh">
|
|
<RefreshCw size={14} />
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
<div className={logStyles.logToolbar}>
|
|
<div className={logStyles.logSearchWrap}>
|
|
<input
|
|
type="text"
|
|
className={logStyles.logSearchInput}
|
|
placeholder="Search logs\u2026"
|
|
value={logSearch}
|
|
onChange={(e) => setLogSearch(e.target.value)}
|
|
aria-label="Search logs"
|
|
/>
|
|
{logSearch && (
|
|
<button
|
|
type="button"
|
|
className={logStyles.logSearchClear}
|
|
onClick={() => setLogSearch('')}
|
|
aria-label="Clear search"
|
|
>
|
|
×
|
|
</button>
|
|
)}
|
|
</div>
|
|
<ButtonGroup
|
|
items={LOG_SOURCE_ITEMS}
|
|
value={logSource ? new Set([logSource]) : new Set()}
|
|
onChange={(v) => setLogSource(v.size === 0 ? '' : [...v][0])}
|
|
/>
|
|
<ButtonGroup items={LOG_LEVEL_ITEMS} value={logLevels} onChange={setLogLevels} />
|
|
{logLevels.size > 0 && (
|
|
<Button variant="ghost" size="sm" onClick={() => setLogLevels(new Set())}>
|
|
Clear
|
|
</Button>
|
|
)}
|
|
</div>
|
|
{filteredLogs.length > 0 ? (
|
|
<LogViewer entries={filteredLogs} maxHeight={360} />
|
|
) : (
|
|
<div className={logStyles.logEmpty}>
|
|
{logSearch || logLevels.size > 0 ? 'No matching log entries' : 'No log entries available'}
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
<div className={`${sectionStyles.section} ${styles.eventCard}`}>
|
|
<div className={styles.eventCardHeader}>
|
|
<span className={styles.sectionTitle}>Timeline</span>
|
|
<div className={logStyles.headerActions}>
|
|
<span className={styles.sectionMeta}>{feedEvents.length} events</span>
|
|
<Button variant="ghost" size="sm" onClick={() => setEventSortAsc((v) => !v)} title={eventSortAsc ? 'Oldest first' : 'Newest first'}>
|
|
{eventSortAsc ? '\u2191' : '\u2193'}
|
|
</Button>
|
|
<Button variant="ghost" size="sm" onClick={() => setEventRefreshTo(new Date().toISOString())} title="Refresh">
|
|
<RefreshCw size={14} />
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
{feedEvents.length > 0 ? (
|
|
<EventFeed events={feedEvents} maxItems={100} />
|
|
) : (
|
|
<div className={logStyles.logEmpty}>No events in the selected time range.</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
);
|
|
}
|