feat: Reservoir UI draft

Author: yomybaby

react/src/App.tsx

@@ -82,6 +82,7 @@ const SessionDetailAndContainerLogOpenerLegacy = React.lazy(
 const ChatPage = React.lazy(() => import('./pages/ChatPage'));
 
 const AIAgentPage = React.lazy(() => import('./pages/AIAgentPage'));
+const ReservoirPage = React.lazy(() => import('./pages/ReservoirPage'));
 
 interface CustomHandle {
   title?: string;
@@ -435,6 +436,25 @@ const router = createBrowserRouter([
         handle: { labelKey: 'webui.menu.ResourcePolicy' },
         Component: ResourcePolicyPage,
       },
+      {
+        path: '/reservoir',
+        handle: { labelKey: 'Reservoir' },
+        Component: () => {
+          return (
+            <BAIErrorBoundary>
+              <Suspense
+                fallback={
+                  <Flex direction="column" style={{ maxWidth: 700 }}>
+                    <Skeleton active />
+                  </Flex>
+                }
+              >
+                <ReservoirPage />
+              </Suspense>
+            </BAIErrorBoundary>
+          );
+        },
+      },
       {
         path: '/settings',
         element: (

react/src/components/MainLayout/WebUISider.tsx

@@ -95,6 +95,7 @@ export type MenuKeys =
   | 'credential'
   | 'environment'
   | 'resource-policy'
+  | 'reservoir'
   // superAdminMenu keys
   | 'agent'
   | 'settings'
@@ -275,6 +276,11 @@ const WebUISider: React.FC<WebUISiderProps> = (props) => {
       icon: <SolutionOutlined style={{ color: token.colorInfo }} />,
       key: 'resource-policy',
     },
+    {
+      label: <WebUILink to="/reservoir">Reservoir</WebUILink>,
+      icon: <HddOutlined style={{ color: token.colorInfo }} />,
+      key: 'reservoir',
+    },
   ];
 
   const superAdminMenu: MenuProps['items'] = [