diff --git a/ui/src/pages/Admin/AdminLayout.tsx b/ui/src/pages/Admin/AdminLayout.tsx new file mode 100644 index 00000000..07bce973 --- /dev/null +++ b/ui/src/pages/Admin/AdminLayout.tsx @@ -0,0 +1,26 @@ +import { Outlet, useNavigate, useLocation } from 'react-router'; +import { Tabs } from '@cameleer/design-system'; + +const ADMIN_TABS = [ + { label: 'User Management', value: '/admin/rbac' }, + { label: 'Audit Log', value: '/admin/audit' }, + { label: 'OIDC', value: '/admin/oidc' }, + { label: 'Database', value: '/admin/database' }, + { label: 'OpenSearch', value: '/admin/opensearch' }, +]; + +export default function AdminLayout() { + const navigate = useNavigate(); + const location = useLocation(); + + return ( +
+ navigate(path)} + /> + +
+ ); +} diff --git a/ui/src/router.tsx b/ui/src/router.tsx index c63299d3..e8ae3d41 100644 --- a/ui/src/router.tsx +++ b/ui/src/router.tsx @@ -12,6 +12,7 @@ const RoutesMetrics = lazy(() => import('./pages/Routes/RoutesMetrics')); 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 RbacPage = lazy(() => import('./pages/Admin/RbacPage')); const AuditLogPage = lazy(() => import('./pages/Admin/AuditLogPage')); const OidcConfigPage = lazy(() => import('./pages/Admin/OidcConfigPage')); @@ -47,12 +48,18 @@ export const router = createBrowserRouter([ { path: 'agents', element: }, { path: 'agents/:appId', element: }, { path: 'agents/:appId/:instanceId', element: }, - { path: 'admin', element: }, - { path: 'admin/rbac', element: }, - { path: 'admin/audit', element: }, - { path: 'admin/oidc', element: }, - { path: 'admin/database', element: }, - { path: 'admin/opensearch', element: }, + { + path: 'admin', + element: , + children: [ + { index: true, element: }, + { path: 'rbac', element: }, + { path: 'audit', element: }, + { path: 'oidc', element: }, + { path: 'database', element: }, + { path: 'opensearch', element: }, + ], + }, { path: 'api-docs', element: }, ], },