cameleer/cameleer-server
1
0
Fork 0
Code Issues 45 Pull Requests Actions Packages Projects Releases Wiki Activity

feat(ui): restructure router for tab-based navigation with legacy redirects

Browse Source 
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
hsiegeln
2026-03-28 13:59:20 +01:00
parent 611c201887
commit 66abb1fe3a
1 changed files with 46 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

64
ui/src/router.tsx
View File

@@ -1,4 +1,4 @@
import { createBrowserRouter, Navigate } from 'react-router'; import { createBrowserRouter, Navigate, useParams } from 'react-router';
import { ProtectedRoute } from './auth/ProtectedRoute'; import { ProtectedRoute } from './auth/ProtectedRoute';
import { LoginPage } from './auth/LoginPage'; import { LoginPage } from './auth/LoginPage';
import { OidcCallback } from './auth/OidcCallback'; import { OidcCallback } from './auth/OidcCallback';
@@ -6,12 +6,9 @@ import { LayoutShell } from './components/LayoutShell';
import { lazy, Suspense } from 'react'; import { lazy, Suspense } from 'react';
import { Spinner } from '@cameleer/design-system'; import { Spinner } from '@cameleer/design-system';
const Dashboard = lazy(() => import('./pages/Dashboard/Dashboard')); const ExchangesPage = lazy(() => import('./pages/Exchanges/ExchangesPage'));
const ExchangeDetail = lazy(() => import('./pages/ExchangeDetail/ExchangeDetail')); const DashboardPage = lazy(() => import('./pages/DashboardTab/DashboardPage'));
const RoutesMetrics = lazy(() => import('./pages/Routes/RoutesMetrics')); const RuntimePage = lazy(() => import('./pages/RuntimeTab/RuntimePage'));
const RouteDetail = lazy(() => import('./pages/Routes/RouteDetail'));
const AgentHealth = lazy(() => import('./pages/AgentHealth/AgentHealth'));
const AgentInstance = lazy(() => import('./pages/AgentInstance/AgentInstance'));
const AdminLayout = lazy(() => import('./pages/Admin/AdminLayout')); const AdminLayout = lazy(() => import('./pages/Admin/AdminLayout'));
const RbacPage = lazy(() => import('./pages/Admin/RbacPage')); const RbacPage = lazy(() => import('./pages/Admin/RbacPage'));
const AuditLogPage = lazy(() => import('./pages/Admin/AuditLogPage')); const AuditLogPage = lazy(() => import('./pages/Admin/AuditLogPage'));
@@ -29,6 +26,20 @@ function SuspenseWrapper({ children }: { children: React.ReactNode }) {
); );
} }
/** Redirect legacy /apps/:appId/:routeId paths to /exchanges/:appId/:routeId */
function LegacyAppRedirect() {
const { appId, routeId } = useParams<{ appId: string; routeId?: string }>();
const path = routeId ? `/exchanges/${appId}/${routeId}` : `/exchanges/${appId}`;
return <Navigate to={path} replace />;
}
/** Redirect legacy /agents/:appId/:instanceId paths to /runtime/:appId/:instanceId */
function LegacyAgentRedirect() {
const { appId, instanceId } = useParams<{ appId: string; instanceId?: string }>();
const path = instanceId ? `/runtime/${appId}/${instanceId}` : `/runtime/${appId}`;
return <Navigate to={path} replace />;
}
export const router = createBrowserRouter([ export const router = createBrowserRouter([
{ path: '/login', element: <LoginPage /> }, { path: '/login', element: <LoginPage /> },
{ path: '/oidc/callback', element: <OidcCallback /> }, { path: '/oidc/callback', element: <OidcCallback /> },
@@ -38,17 +49,34 @@ export const router = createBrowserRouter([
{ {
element: <LayoutShell />, element: <LayoutShell />,
children: [ children: [
{ index: true, element: <Navigate to="/apps" replace /> }, // Default redirect
{ path: 'apps', element: <SuspenseWrapper><Dashboard /></SuspenseWrapper> }, { index: true, element: <Navigate to="/exchanges" replace /> },
{ path: 'apps/:appId', element: <SuspenseWrapper><Dashboard /></SuspenseWrapper> },
{ path: 'apps/:appId/:routeId', element: <SuspenseWrapper><Dashboard /></SuspenseWrapper> }, // Exchanges tab
{ path: 'exchanges/:id', element: <SuspenseWrapper><ExchangeDetail /></SuspenseWrapper> }, { path: 'exchanges', element: <SuspenseWrapper><ExchangesPage /></SuspenseWrapper> },
{ path: 'routes', element: <SuspenseWrapper><RoutesMetrics /></SuspenseWrapper> }, { path: 'exchanges/:appId', element: <SuspenseWrapper><ExchangesPage /></SuspenseWrapper> },
{ path: 'routes/:appId', element: <SuspenseWrapper><RoutesMetrics /></SuspenseWrapper> }, { path: 'exchanges/:appId/:routeId', element: <SuspenseWrapper><ExchangesPage /></SuspenseWrapper> },
{ path: 'routes/:appId/:routeId', element: <SuspenseWrapper><RouteDetail /></SuspenseWrapper> }, { path: 'exchanges/:appId/:routeId/:exchangeId', element: <SuspenseWrapper><ExchangesPage /></SuspenseWrapper> },
{ path: 'agents', element: <SuspenseWrapper><AgentHealth /></SuspenseWrapper> },
{ path: 'agents/:appId', element: <SuspenseWrapper><AgentHealth /></SuspenseWrapper> }, // Dashboard tab
{ path: 'agents/:appId/:instanceId', element: <SuspenseWrapper><AgentInstance /></SuspenseWrapper> }, { path: 'dashboard', element: <SuspenseWrapper><DashboardPage /></SuspenseWrapper> },
{ path: 'dashboard/:appId', element: <SuspenseWrapper><DashboardPage /></SuspenseWrapper> },
{ path: 'dashboard/:appId/:routeId', element: <SuspenseWrapper><DashboardPage /></SuspenseWrapper> },
// Runtime tab
{ path: 'runtime', element: <SuspenseWrapper><RuntimePage /></SuspenseWrapper> },
{ path: 'runtime/:appId', element: <SuspenseWrapper><RuntimePage /></SuspenseWrapper> },
{ path: 'runtime/:appId/:instanceId', element: <SuspenseWrapper><RuntimePage /></SuspenseWrapper> },
// Legacy redirects — Sidebar uses hardcoded /apps/... and /agents/... paths
{ path: 'apps', element: <Navigate to="/exchanges" replace /> },
{ path: 'apps/:appId', element: <LegacyAppRedirect /> },
{ path: 'apps/:appId/:routeId', element: <LegacyAppRedirect /> },
{ path: 'agents', element: <Navigate to="/runtime" replace /> },
{ path: 'agents/:appId', element: <LegacyAgentRedirect /> },
{ path: 'agents/:appId/:instanceId', element: <LegacyAgentRedirect /> },
// Admin (unchanged)
{ {
path: 'admin', path: 'admin',
element: <SuspenseWrapper><AdminLayout /></SuspenseWrapper>, element: <SuspenseWrapper><AdminLayout /></SuspenseWrapper>,