feat: add Route Detail page with diagram, processor stats, and tabbed sections

Replaces the filtered RoutesMetrics view at /routes/:appId/:routeId with a
dedicated RouteDetail page showing route diagram, processor stats table,
performance charts, recent executions, and client-side grouped error patterns.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
hsiegeln
2026-03-23 18:25:58 +01:00
parent 8e27f45a2b
commit 94d1e81852
4 changed files with 367 additions and 1 deletions

View File

@@ -0,0 +1,25 @@
import { useQuery } from '@tanstack/react-query';
import { config } from '../../config';
import { useAuthStore } from '../../auth/auth-store';
export function useProcessorMetrics(routeId: string | null, appId?: string) {
return useQuery({
queryKey: ['processor-metrics', routeId, appId],
queryFn: async () => {
const token = useAuthStore.getState().accessToken;
const params = new URLSearchParams();
if (routeId) params.set('routeId', routeId);
if (appId) params.set('appId', appId);
const res = await fetch(`${config.apiBaseUrl}/routes/metrics/processors?${params}`, {
headers: {
Authorization: `Bearer ${token}`,
'X-Cameleer-Protocol-Version': '1',
},
});
if (!res.ok) throw new Error(`${res.status}`);
return res.json();
},
enabled: !!routeId,
refetchInterval: 30_000,
});
}