refactor: restructure RBAC page to container + tab components, add CSS module
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
hsiegeln
26
ui/src/api/queries/agent-metrics.ts
Normal file
26
ui/src/api/queries/agent-metrics.ts
Normal file
@@ -0,0 +1,26 @@
|
||||
import { useQuery } from '@tanstack/react-query';
|
||||
import { config } from '../../config';
|
||||
import { useAuthStore } from '../../auth/auth-store';
|
||||
|
||||
export function useAgentMetrics(agentId: string | null, names: string[], buckets = 60) {
|
||||
return useQuery({
|
||||
queryKey: ['agent-metrics', agentId, names.join(','), buckets],
|
||||
queryFn: async () => {
|
||||
const token = useAuthStore.getState().accessToken;
|
||||
const params = new URLSearchParams({
|
||||
names: names.join(','),
|
||||
buckets: String(buckets),
|
||||
});
|
||||
const res = await fetch(`${config.apiBaseUrl}/agents/${agentId}/metrics?${params}`, {
|
||||
headers: {
|
||||
Authorization: `Bearer ${token}`,
|
||||
'X-Cameleer-Protocol-Version': '1',
|
||||
},
|
||||
});
|
||||
if (!res.ok) throw new Error(`${res.status}`);
|
||||
return res.json() as Promise<{ metrics: Record<string, Array<{ time: string; value: number }>> }>;
|
||||
},
|
||||
enabled: !!agentId && names.length > 0,
|
||||
refetchInterval: 30_000,
|
||||
});
|
||||
}
|
||||
@@ -1,178 +1,38 @@
|
||||
import { useState, useMemo } from 'react';
|
||||
import {
|
||||
Tabs, DataTable, Badge, Avatar, Button, Input, Modal, FormField,
|
||||
Select, AlertDialog, StatCard, Spinner,
|
||||
} from '@cameleer/design-system';
|
||||
import type { Column } from '@cameleer/design-system';
|
||||
import {
|
||||
useUsers, useUser, useGroups, useGroup, useRoles, useRole, useRbacStats,
|
||||
useCreateUser, useUpdateUser, useDeleteUser,
|
||||
useAssignRoleToUser, useRemoveRoleFromUser,
|
||||
useAddUserToGroup, useRemoveUserFromGroup,
|
||||
useCreateGroup, useUpdateGroup, useDeleteGroup,
|
||||
useCreateRole, useUpdateRole, useDeleteRole,
|
||||
useAssignRoleToGroup, useRemoveRoleFromGroup,
|
||||
} from '../../api/queries/admin/rbac';
|
||||
import { useState } from 'react';
|
||||
import { StatCard, Tabs } from '@cameleer/design-system';
|
||||
import { useRbacStats } from '../../api/queries/admin/rbac';
|
||||
import styles from './UserManagement.module.css';
|
||||
|
||||
// Lazy imports for tab components (will be created in tasks 17-19)
|
||||
// For now, use placeholder components so the page compiles
|
||||
const UsersTab = () => <div>Users tab — coming soon</div>;
|
||||
const GroupsTab = () => <div>Groups tab — coming soon</div>;
|
||||
const RolesTab = () => <div>Roles tab — coming soon</div>;
|
||||
|
||||
export default function RbacPage() {
|
||||
const [tab, setTab] = useState('users');
|
||||
const { data: stats } = useRbacStats();
|
||||
const [tab, setTab] = useState('users');
|
||||
|
||||
return (
|
||||
<div>
|
||||
<h2 style={{ marginBottom: '1rem' }}>RBAC Management</h2>
|
||||
|
||||
<div style={{ display: 'flex', gap: '1rem', marginBottom: '1.5rem', flexWrap: 'wrap' }}>
|
||||
<h2 style={{ margin: '0 0 16px' }}>User Management</h2>
|
||||
<div className={styles.statStrip}>
|
||||
<StatCard label="Users" value={stats?.userCount ?? 0} />
|
||||
<StatCard label="Groups" value={stats?.groupCount ?? 0} />
|
||||
<StatCard label="Roles" value={stats?.roleCount ?? 0} />
|
||||
</div>
|
||||
|
||||
<Tabs
|
||||
tabs={[
|
||||
{ label: 'Users', value: 'users', count: stats?.userCount },
|
||||
{ label: 'Groups', value: 'groups', count: stats?.groupCount },
|
||||
{ label: 'Roles', value: 'roles', count: stats?.roleCount },
|
||||
{ label: 'Users', value: 'users' },
|
||||
{ label: 'Groups', value: 'groups' },
|
||||
{ label: 'Roles', value: 'roles' },
|
||||
]}
|
||||
active={tab}
|
||||
onChange={setTab}
|
||||
/>
|
||||
|
||||
<div style={{ marginTop: '1rem' }}>
|
||||
{tab === 'users' && <UsersTab />}
|
||||
{tab === 'groups' && <GroupsTab />}
|
||||
{tab === 'roles' && <RolesTab />}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function UsersTab() {
|
||||
const { data: users, isLoading } = useUsers();
|
||||
const [createOpen, setCreateOpen] = useState(false);
|
||||
const [deleteId, setDeleteId] = useState<string | null>(null);
|
||||
const [form, setForm] = useState({ username: '', displayName: '', email: '', password: '' });
|
||||
const createUser = useCreateUser();
|
||||
const deleteUser = useDeleteUser();
|
||||
|
||||
const columns: Column<any>[] = [
|
||||
{ key: 'userId', header: 'Username', render: (v) => <span style={{ fontWeight: 500 }}>{String(v)}</span> },
|
||||
{ key: 'displayName', header: 'Display Name' },
|
||||
{ key: 'email', header: 'Email' },
|
||||
{ key: 'provider', header: 'Provider', render: (v) => <Badge label={String(v)} /> },
|
||||
{
|
||||
key: 'effectiveRoles', header: 'Roles',
|
||||
render: (v) => (
|
||||
<div style={{ display: 'flex', gap: '0.25rem', flexWrap: 'wrap' }}>
|
||||
{(v as any[] || []).map((r: any) => <Badge key={r.id || r.name} label={r.name} color="auto" />)}
|
||||
</div>
|
||||
),
|
||||
},
|
||||
];
|
||||
|
||||
if (isLoading) return <Spinner />;
|
||||
|
||||
const rows = (users || []).map((u: any) => ({ ...u, id: u.userId }));
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div style={{ display: 'flex', justifyContent: 'flex-end', marginBottom: '1rem' }}>
|
||||
<Button variant="primary" onClick={() => setCreateOpen(true)}>Create User</Button>
|
||||
</div>
|
||||
<DataTable columns={columns} data={rows} pageSize={20} />
|
||||
|
||||
<Modal open={createOpen} onClose={() => setCreateOpen(false)} title="Create User">
|
||||
<div style={{ display: 'grid', gap: '1rem', padding: '1rem' }}>
|
||||
<FormField label="Username" required><Input value={form.username} onChange={(e) => setForm({ ...form, username: e.target.value })} /></FormField>
|
||||
<FormField label="Display Name"><Input value={form.displayName} onChange={(e) => setForm({ ...form, displayName: e.target.value })} /></FormField>
|
||||
<FormField label="Email"><Input value={form.email} onChange={(e) => setForm({ ...form, email: e.target.value })} /></FormField>
|
||||
<FormField label="Password"><Input type="password" value={form.password} onChange={(e) => setForm({ ...form, password: e.target.value })} /></FormField>
|
||||
<Button variant="primary" onClick={() => { createUser.mutate(form); setCreateOpen(false); setForm({ username: '', displayName: '', email: '', password: '' }); }}>Create</Button>
|
||||
</div>
|
||||
</Modal>
|
||||
|
||||
<AlertDialog
|
||||
open={!!deleteId}
|
||||
onClose={() => setDeleteId(null)}
|
||||
onConfirm={() => { if (deleteId) deleteUser.mutate(deleteId); setDeleteId(null); }}
|
||||
title="Delete User"
|
||||
description={`Are you sure you want to delete user "${deleteId}"?`}
|
||||
confirmLabel="Delete"
|
||||
variant="danger"
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function GroupsTab() {
|
||||
const { data: groups, isLoading } = useGroups();
|
||||
const [createOpen, setCreateOpen] = useState(false);
|
||||
const [form, setForm] = useState({ name: '' });
|
||||
const createGroup = useCreateGroup();
|
||||
|
||||
const columns: Column<any>[] = [
|
||||
{ key: 'name', header: 'Name', render: (v) => <span style={{ fontWeight: 500 }}>{String(v)}</span> },
|
||||
{ key: 'members', header: 'Members', render: (v) => String((v as any[])?.length ?? 0) },
|
||||
{
|
||||
key: 'effectiveRoles', header: 'Roles',
|
||||
render: (v) => (
|
||||
<div style={{ display: 'flex', gap: '0.25rem', flexWrap: 'wrap' }}>
|
||||
{(v as any[] || []).map((r: any) => <Badge key={r.id || r.name} label={r.name} color="auto" />)}
|
||||
</div>
|
||||
),
|
||||
},
|
||||
];
|
||||
|
||||
if (isLoading) return <Spinner />;
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div style={{ display: 'flex', justifyContent: 'flex-end', marginBottom: '1rem' }}>
|
||||
<Button variant="primary" onClick={() => setCreateOpen(true)}>Create Group</Button>
|
||||
</div>
|
||||
<DataTable columns={columns} data={groups || []} pageSize={20} />
|
||||
|
||||
<Modal open={createOpen} onClose={() => setCreateOpen(false)} title="Create Group">
|
||||
<div style={{ display: 'grid', gap: '1rem', padding: '1rem' }}>
|
||||
<FormField label="Name" required><Input value={form.name} onChange={(e) => setForm({ ...form, name: e.target.value })} /></FormField>
|
||||
<Button variant="primary" onClick={() => { createGroup.mutate(form); setCreateOpen(false); setForm({ name: '' }); }}>Create</Button>
|
||||
</div>
|
||||
</Modal>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function RolesTab() {
|
||||
const { data: roles, isLoading } = useRoles();
|
||||
const [createOpen, setCreateOpen] = useState(false);
|
||||
const [form, setForm] = useState({ name: '', description: '', scope: '' });
|
||||
const createRole = useCreateRole();
|
||||
|
||||
const columns: Column<any>[] = [
|
||||
{ key: 'name', header: 'Name', render: (v) => <span style={{ fontWeight: 500 }}>{String(v)}</span> },
|
||||
{ key: 'description', header: 'Description' },
|
||||
{ key: 'scope', header: 'Scope', render: (v) => v ? <Badge label={String(v)} /> : null },
|
||||
{ key: 'system', header: 'System', render: (v) => v ? <Badge label="System" color="warning" /> : null },
|
||||
{ key: 'effectivePrincipals', header: 'Users', render: (v) => String((v as any[])?.length ?? 0) },
|
||||
];
|
||||
|
||||
if (isLoading) return <Spinner />;
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div style={{ display: 'flex', justifyContent: 'flex-end', marginBottom: '1rem' }}>
|
||||
<Button variant="primary" onClick={() => setCreateOpen(true)}>Create Role</Button>
|
||||
</div>
|
||||
<DataTable columns={columns} data={roles || []} pageSize={20} />
|
||||
|
||||
<Modal open={createOpen} onClose={() => setCreateOpen(false)} title="Create Role">
|
||||
<div style={{ display: 'grid', gap: '1rem', padding: '1rem' }}>
|
||||
<FormField label="Name" required><Input value={form.name} onChange={(e) => setForm({ ...form, name: e.target.value })} /></FormField>
|
||||
<FormField label="Description"><Input value={form.description} onChange={(e) => setForm({ ...form, description: e.target.value })} /></FormField>
|
||||
<FormField label="Scope"><Input value={form.scope} onChange={(e) => setForm({ ...form, scope: e.target.value })} /></FormField>
|
||||
<Button variant="primary" onClick={() => { createRole.mutate(form); setCreateOpen(false); setForm({ name: '', description: '', scope: '' }); }}>Create</Button>
|
||||
</div>
|
||||
</Modal>
|
||||
{tab === 'users' && <UsersTab />}
|
||||
{tab === 'groups' && <GroupsTab />}
|
||||
{tab === 'roles' && <RolesTab />}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
48
ui/src/pages/Admin/UserManagement.module.css
Normal file
48
ui/src/pages/Admin/UserManagement.module.css
Normal file
@@ -0,0 +1,48 @@
|
||||
.statStrip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 16px; }
|
||||
.splitPane { display: grid; grid-template-columns: 52fr 48fr; height: calc(100vh - 280px); }
|
||||
.listPane { overflow-y: auto; border-right: 1px solid var(--border-subtle); padding-right: 16px; }
|
||||
.detailPane { overflow-y: auto; padding-left: 16px; }
|
||||
.listHeader { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
|
||||
.entityList { display: flex; flex-direction: column; gap: 2px; }
|
||||
.entityItem {
|
||||
display: flex; align-items: center; gap: 10px; padding: 8px 10px;
|
||||
cursor: pointer; border-radius: 6px; transition: background 0.1s;
|
||||
}
|
||||
.entityItem:hover { background: var(--bg-hover); }
|
||||
.entityItemSelected { background: var(--bg-raised); }
|
||||
.entityInfo { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
|
||||
.entityName { font-weight: 600; font-size: 13px; display: flex; align-items: center; gap: 6px; }
|
||||
.entityMeta { font-size: 11px; color: var(--text-muted); }
|
||||
.entityTags { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 2px; }
|
||||
.createForm {
|
||||
background: var(--bg-surface); border: 1px solid var(--border-subtle);
|
||||
border-radius: var(--radius-lg); padding: 12px; margin-bottom: 12px;
|
||||
}
|
||||
.createFormActions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 8px; }
|
||||
.detailHeader {
|
||||
display: flex; align-items: center; gap: 12px;
|
||||
margin-bottom: 16px; padding-bottom: 16px; border-bottom: 1px solid var(--border-subtle);
|
||||
}
|
||||
.metaGrid {
|
||||
display: grid; grid-template-columns: 100px 1fr; gap: 6px 12px;
|
||||
font-size: 13px; margin-bottom: 16px;
|
||||
}
|
||||
.metaLabel {
|
||||
font-weight: 700; font-size: 10px; text-transform: uppercase;
|
||||
letter-spacing: 0.6px; color: var(--text-muted);
|
||||
}
|
||||
.sectionTags { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 8px; }
|
||||
.inheritedNote { font-size: 11px; font-style: italic; color: var(--text-muted); margin-top: 4px; }
|
||||
.securitySection {
|
||||
padding: 12px; border: 1px solid var(--border-subtle);
|
||||
border-radius: var(--radius-lg); margin-bottom: 16px;
|
||||
}
|
||||
.resetForm { display: flex; gap: 8px; margin-top: 8px; }
|
||||
.emptyDetail {
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
height: 100%; color: var(--text-muted); font-size: 13px;
|
||||
}
|
||||
.sectionTitle {
|
||||
font-size: 13px; font-weight: 700; color: var(--text-primary);
|
||||
margin-bottom: 8px; margin-top: 16px;
|
||||
}
|
||||
@@ -82,3 +82,99 @@
|
||||
font-weight: 600;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
/* DetailPanel: Overview tab */
|
||||
|
||||
.overviewContent {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
padding: 4px 0;
|
||||
}
|
||||
|
||||
.overviewRow {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.detailList {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.detailRow {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: baseline;
|
||||
padding: 6px 0;
|
||||
border-bottom: 1px solid var(--border-subtle);
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.detailRow:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.detailRow dt {
|
||||
color: var(--text-muted);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.detailRow dd {
|
||||
margin: 0;
|
||||
color: var(--text-primary);
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.metricsSection {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.metricLabel {
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
color: var(--text-muted);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
||||
/* DetailPanel: Performance tab */
|
||||
|
||||
.performanceContent {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
padding: 4px 0;
|
||||
}
|
||||
|
||||
.chartSection {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.chartLabel {
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
color: var(--text-muted);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
||||
.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);
|
||||
}
|
||||
|
||||
@@ -3,10 +3,12 @@ import { useParams, useNavigate } from 'react-router';
|
||||
import {
|
||||
StatCard, StatusDot, Badge, MonoText,
|
||||
GroupCard, EventFeed, Breadcrumb, Alert,
|
||||
DetailPanel, ProgressBar, LineChart,
|
||||
} from '@cameleer/design-system';
|
||||
import styles from './AgentHealth.module.css';
|
||||
import { useAgents, useAgentEvents } from '../../api/queries/agents';
|
||||
import { useRouteCatalog } from '../../api/queries/catalog';
|
||||
import { useAgentMetrics } from '../../api/queries/agent-metrics';
|
||||
|
||||
function formatUptime(seconds?: number): string {
|
||||
if (!seconds) return '—';
|
||||
@@ -29,6 +31,138 @@ function formatRelativeTime(iso?: string): string {
|
||||
return `${Math.floor(hours / 24)}d ago`;
|
||||
}
|
||||
|
||||
function AgentOverviewContent({ agent }: { agent: any }) {
|
||||
const { data: memMetrics } = useAgentMetrics(
|
||||
agent.id,
|
||||
['jvm.memory.heap.used', 'jvm.memory.heap.max'],
|
||||
1,
|
||||
);
|
||||
const { data: cpuMetrics } = useAgentMetrics(agent.id, ['jvm.cpu.process'], 1);
|
||||
|
||||
const cpuValue = cpuMetrics?.metrics?.['jvm.cpu.process']?.[0]?.value;
|
||||
const heapUsed = memMetrics?.metrics?.['jvm.memory.heap.used']?.[0]?.value;
|
||||
const heapMax = memMetrics?.metrics?.['jvm.memory.heap.max']?.[0]?.value;
|
||||
|
||||
const heapPercent = heapUsed != null && heapMax != null && heapMax > 0
|
||||
? Math.round((heapUsed / heapMax) * 100)
|
||||
: undefined;
|
||||
const cpuPercent = cpuValue != null ? Math.round(cpuValue * 100) : undefined;
|
||||
|
||||
const statusVariant: 'live' | 'stale' | 'dead' =
|
||||
agent.status === 'LIVE' ? 'live' : agent.status === 'STALE' ? 'stale' : 'dead';
|
||||
const statusColor: 'success' | 'warning' | 'error' =
|
||||
agent.status === 'LIVE' ? 'success' : agent.status === 'STALE' ? 'warning' : 'error';
|
||||
|
||||
return (
|
||||
<div className={styles.overviewContent}>
|
||||
<div className={styles.overviewRow}>
|
||||
<StatusDot variant={statusVariant} />
|
||||
<Badge label={agent.status} color={statusColor} />
|
||||
</div>
|
||||
|
||||
<dl className={styles.detailList}>
|
||||
<div className={styles.detailRow}>
|
||||
<dt>Application</dt>
|
||||
<dd><MonoText>{agent.group ?? '—'}</MonoText></dd>
|
||||
</div>
|
||||
<div className={styles.detailRow}>
|
||||
<dt>Version</dt>
|
||||
<dd><MonoText>{agent.version ?? '—'}</MonoText></dd>
|
||||
</div>
|
||||
<div className={styles.detailRow}>
|
||||
<dt>Uptime</dt>
|
||||
<dd>{formatUptime(agent.uptimeSeconds)}</dd>
|
||||
</div>
|
||||
<div className={styles.detailRow}>
|
||||
<dt>Last Heartbeat</dt>
|
||||
<dd>{formatRelativeTime(agent.lastHeartbeat)}</dd>
|
||||
</div>
|
||||
<div className={styles.detailRow}>
|
||||
<dt>TPS</dt>
|
||||
<dd>{agent.tps != null ? (agent.tps as number).toFixed(2) : '—'}</dd>
|
||||
</div>
|
||||
<div className={styles.detailRow}>
|
||||
<dt>Error Rate</dt>
|
||||
<dd>{agent.errorRate != null ? `${((agent.errorRate as number) * 100).toFixed(1)}%` : '—'}</dd>
|
||||
</div>
|
||||
<div className={styles.detailRow}>
|
||||
<dt>Routes</dt>
|
||||
<dd>{agent.activeRoutes ?? '—'} active / {agent.totalRoutes ?? '—'} total</dd>
|
||||
</div>
|
||||
</dl>
|
||||
|
||||
<div className={styles.metricsSection}>
|
||||
<div className={styles.metricLabel}>
|
||||
Heap Memory{heapUsed != null && heapMax != null
|
||||
? ` — ${Math.round(heapUsed / 1024 / 1024)}MB / ${Math.round(heapMax / 1024 / 1024)}MB`
|
||||
: ''}
|
||||
</div>
|
||||
<ProgressBar
|
||||
value={heapPercent}
|
||||
variant={heapPercent == null ? 'primary' : heapPercent > 85 ? 'error' : heapPercent > 70 ? 'warning' : 'success'}
|
||||
indeterminate={heapPercent == null}
|
||||
size="sm"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className={styles.metricsSection}>
|
||||
<div className={styles.metricLabel}>
|
||||
CPU Usage{cpuPercent != null ? ` — ${cpuPercent}%` : ''}
|
||||
</div>
|
||||
<ProgressBar
|
||||
value={cpuPercent}
|
||||
variant={cpuPercent == null ? 'primary' : cpuPercent > 80 ? 'error' : cpuPercent > 60 ? 'warning' : 'success'}
|
||||
indeterminate={cpuPercent == null}
|
||||
size="sm"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function AgentPerformanceContent({ agent }: { agent: any }) {
|
||||
const { data: tpsMetrics } = useAgentMetrics(agent.id, ['cameleer.tps'], 60);
|
||||
const { data: errMetrics } = useAgentMetrics(agent.id, ['cameleer.error.rate'], 60);
|
||||
|
||||
const tpsSeries = useMemo(() => {
|
||||
const raw = tpsMetrics?.metrics?.['cameleer.tps'] ?? [];
|
||||
return [{
|
||||
label: 'TPS',
|
||||
data: raw.map((p) => ({ x: new Date(p.time), y: p.value })),
|
||||
}];
|
||||
}, [tpsMetrics]);
|
||||
|
||||
const errSeries = useMemo(() => {
|
||||
const raw = errMetrics?.metrics?.['cameleer.error.rate'] ?? [];
|
||||
return [{
|
||||
label: 'Error Rate',
|
||||
data: raw.map((p) => ({ x: new Date(p.time), y: p.value * 100 })),
|
||||
}];
|
||||
}, [errMetrics]);
|
||||
|
||||
return (
|
||||
<div className={styles.performanceContent}>
|
||||
<div className={styles.chartSection}>
|
||||
<div className={styles.chartLabel}>Throughput (TPS)</div>
|
||||
{tpsSeries[0].data.length > 0 ? (
|
||||
<LineChart series={tpsSeries} yLabel="req/s" height={160} />
|
||||
) : (
|
||||
<div className={styles.emptyChart}>No data available</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className={styles.chartSection}>
|
||||
<div className={styles.chartLabel}>Error Rate (%)</div>
|
||||
{errSeries[0].data.length > 0 ? (
|
||||
<LineChart series={errSeries} yLabel="%" height={160} />
|
||||
) : (
|
||||
<div className={styles.emptyChart}>No data available</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default function AgentHealth() {
|
||||
const { appId } = useParams();
|
||||
const navigate = useNavigate();
|
||||
@@ -160,6 +294,26 @@ export default function AgentHealth() {
|
||||
<EventFeed events={feedEvents} maxItems={100} />
|
||||
</div>
|
||||
)}
|
||||
|
||||
{selectedAgent && (
|
||||
<DetailPanel
|
||||
open={!!selectedAgent}
|
||||
title={selectedAgent.name ?? selectedAgent.id}
|
||||
onClose={() => setSelectedAgent(null)}
|
||||
tabs={[
|
||||
{
|
||||
label: 'Overview',
|
||||
value: 'overview',
|
||||
content: <AgentOverviewContent agent={selectedAgent} />,
|
||||
},
|
||||
{
|
||||
label: 'Performance',
|
||||
value: 'performance',
|
||||
content: <AgentPerformanceContent agent={selectedAgent} />,
|
||||
},
|
||||
]}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user