Runtime page (AgentInstance): - Rearrange charts: CPU, Memory, GC (top); Threads, Chunks Exported, Chunks Dropped (bottom). Removes throughput/error charts (belong on Dashboard, not Runtime). - Pass global time range (from/to) to useAgentMetrics — charts now respect the time filter instead of always showing last 60 minutes. - Bottom row (logs + timeline) fills remaining vertical space. Dashboard L3: - Processor metrics section fills remaining vertical space. - Chart x-axis uses timestamps instead of bucket indices. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
37 lines
1.2 KiB
TypeScript
37 lines
1.2 KiB
TypeScript
import { useQuery } from '@tanstack/react-query';
|
|
import { config } from '../../config';
|
|
import { useAuthStore } from '../../auth/auth-store';
|
|
import { useRefreshInterval } from './use-refresh-interval';
|
|
|
|
export function useAgentMetrics(
|
|
agentId: string | null,
|
|
names: string[],
|
|
buckets = 60,
|
|
from?: string,
|
|
to?: string,
|
|
) {
|
|
const refetchInterval = useRefreshInterval(30_000);
|
|
return useQuery({
|
|
queryKey: ['agent-metrics', agentId, names.join(','), buckets, from, to],
|
|
queryFn: async () => {
|
|
const token = useAuthStore.getState().accessToken;
|
|
const params = new URLSearchParams({
|
|
names: names.join(','),
|
|
buckets: String(buckets),
|
|
});
|
|
if (from) params.set('from', from);
|
|
if (to) params.set('to', to);
|
|
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,
|
|
});
|
|
}
|