213aa86c47
Three-level dashboard driven by sidebar selection: - L1 (no selection): all-apps overview with health table, per-app charts - L2 (app selected): route performance table, error velocity, top errors - L3 (route selected): processor table, latency heatmap data, bottleneck KPI Backend: 3 new endpoints (timeseries/by-app, timeseries/by-route, errors/top), per-app SLA settings (app_settings table, V12 migration), exact SLA compliance from executions hypertable, error velocity with acceleration detection. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
22 lines
808 B
TypeScript
22 lines
808 B
TypeScript
import { useParams } from 'react-router';
|
|
import { lazy, Suspense } from 'react';
|
|
import { Spinner } from '@cameleer/design-system';
|
|
|
|
const DashboardL1 = lazy(() => import('./DashboardL1'));
|
|
const DashboardL2 = lazy(() => import('./DashboardL2'));
|
|
const DashboardL3 = lazy(() => import('./DashboardL3'));
|
|
|
|
const Fallback = <div style={{ display: 'flex', justifyContent: 'center', padding: '4rem' }}><Spinner size="lg" /></div>;
|
|
|
|
export default function DashboardPage() {
|
|
const { appId, routeId } = useParams<{ appId?: string; routeId?: string }>();
|
|
|
|
if (routeId && appId) {
|
|
return <Suspense fallback={Fallback}><DashboardL3 /></Suspense>;
|
|
}
|
|
if (appId) {
|
|
return <Suspense fallback={Fallback}><DashboardL2 /></Suspense>;
|
|
}
|
|
return <Suspense fallback={Fallback}><DashboardL1 /></Suspense>;
|
|
}
|