feat: Reservoir UI draft (#3934)

# Add Reservoir Page for Artifact Management

This PR adds a new Reservoir page to the WebUI for managing artifacts like models, packages, and images. The implementation includes:

- New Reservoir page with artifact listing and detailed views
- Components for displaying artifact details and managing artifact lists
- Navigation integration in the sidebar menu
- Statistics dashboard showing installed artifacts, available artifacts, and storage usage
- Filtering capabilities by artifact type, status, and name
- Support for pulling artifacts from remote repositories

The page allows users to browse available artifacts, view detailed information about each artifact, and pull specific versions to their local environment.

Author: yomybaby

react/craco.config.js

@@ -24,15 +24,15 @@ module.exports = {
         '../resources/**/*',
       ],
     };
-    
+
     // Override deprecated middleware options with setupMiddlewares
     const originalOnBefore = devServerConfig.onBeforeSetupMiddleware;
     const originalOnAfter = devServerConfig.onAfterSetupMiddleware;
-    
+
     if (originalOnBefore || originalOnAfter) {
       delete devServerConfig.onBeforeSetupMiddleware;
       delete devServerConfig.onAfterSetupMiddleware;
-      
+
       devServerConfig.setupMiddlewares = (middlewares, devServer) => {
         if (originalOnBefore) {
           originalOnBefore(devServer);
@@ -43,7 +43,7 @@ module.exports = {
         return middlewares;
       };
     }
-    
+
     return devServerConfig;
   },
   babel: {

react/src/App.tsx

@@ -84,6 +84,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'));
 
 const SchedulerPage = React.lazy(() => import('./pages/SchedulerPage'));
 
@@ -459,6 +460,41 @@ const router = createBrowserRouter([
         handle: { labelKey: 'webui.menu.ResourcePolicy' },
         Component: ResourcePolicyPage,
       },
+      {
+        path: '/reservoir',
+        handle: { labelKey: 'Reservoir' },
+        children: [
+          {
+            path: '',
+            Component: () => {
+              return (
+                <BAIErrorBoundary>
+                  <Suspense
+                    fallback={
+                      <BAIFlex direction="column" style={{ maxWidth: 700 }}>
+                        <Skeleton active />
+                      </BAIFlex>
+                    }
+                  >
+                    <ReservoirPage />
+                  </Suspense>
+                </BAIErrorBoundary>
+              );
+            },
+          },
+          {
+            path: '/reservoir/:artifactId',
+            element: (
+              <BAIErrorBoundary>
+                <Suspense fallback={<Skeleton active />}>
+                  <ReservoirPage />
+                </Suspense>
+              </BAIErrorBoundary>
+            ),
+            handle: { labelKey: 'Artifact Details' },
+          },
+        ],
+      },
       {
         path: '/settings',
         element: (

react/src/components/MainLayout/WebUISider.tsx

@@ -103,6 +103,7 @@ export type MenuKeys =
   | 'environment'
   | 'scheduler'
   | 'resource-policy'
+  | 'reservoir'
   // superAdminMenu keys
   | 'agent'
   | 'settings'
@@ -285,6 +286,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'] = [