feat(FR-1405): version control of deployment features

react/src/App.tsx

@@ -81,13 +81,16 @@
 const ChatPage = React.lazy(() => import('./pages/ChatPage'));
 
 const AIAgentPage = React.lazy(() => import('./pages/AIAgentPage'));
 const ReservoirPage = React.lazy(() => import('./pages/ReservoirPage'));
 const ReservoirArtifactDetailPage = React.lazy(
   () => import('./pages/ReservoirArtifactDetailPage'),
 );
 
 const SchedulerPage = React.lazy(() => import('./pages/SchedulerPage'));
 // Deployment pages
+// const DeploymentListPage = React.lazy(
+//   () => import('./pages/Deployments/DeploymentListPage'),
+// );
 const DeploymentListPage = React.lazy(
   () => import('./pages/DeploymentListPage'),
 );
@@ -521,49 +524,6 @@
         handle: { labelKey: 'webui.menu.ResourcePolicy' },
         Component: ResourcePolicyPage,
       },
-      {
-        path: '/reservoir',
-        handle: { labelKey: 'webui.menu.Reservoir' },
-        children: [
-          {
-            path: '',
-            Component: () => {
-              const baiClient = useSuspendedBackendaiClient();
-              return baiClient?.supports('reservoir') ? (
-                <BAIErrorBoundary>
-                  <Suspense
-                    fallback={
-                      <BAIFlex direction="column" style={{ maxWidth: 700 }}>
-                        <Skeleton active />
-                      </BAIFlex>
-                    }
-                  >
-                    <ReservoirPage />
-                  </Suspense>
-                </BAIErrorBoundary>
-              ) : (
-                <WebUINavigate to={'/error'} replace />
-              );
-            },
-          },
-          {
-            path: '/reservoir/:artifactId',
-            Component: () => {
-              const baiClient = useSuspendedBackendaiClient();
-              return baiClient?.supports('reservoir') ? (
-                <BAIErrorBoundary>
-                  <Suspense fallback={<Skeleton active />}>
-                    <ReservoirArtifactDetailPage />
-                  </Suspense>
-                </BAIErrorBoundary>
-              ) : (
-                <WebUINavigate to={'/error'} replace />
-              );
-            },
-            handle: { labelKey: 'webui.menu.ArtifactDetails' },
-          },
-        ],
-      },
       {
         path: '/settings',
         element: (

react/src/components/MainLayout/WebUISider.tsx

@@ -19,6 +19,7 @@ import {
   CloudUploadOutlined,
   ControlOutlined,
   DashboardOutlined,
+  DeploymentUnitOutlined,
   FileDoneOutlined,
   HddOutlined,
   InfoCircleOutlined,
@@ -185,12 +186,20 @@ const WebUISider: React.FC<WebUISiderProps> = (props) => {
       key: 'job',
       group: 'workload',
     },
-    {
+    !baiClient.supports('deployment') && {
       label: <WebUILink to="/serving">{t('webui.menu.Serving')}</WebUILink>,
       icon: <BAIEndpointsIcon style={{ color: token.colorPrimary }} />,
       key: 'serving',
       group: 'service',
     },
+    baiClient.supports('deployment') && {
+      label: (
+        <WebUILink to="/deployment">{t('webui.menu.Deployment')}</WebUILink>
+      ),
+      icon: <DeploymentUnitOutlined style={{ color: token.colorPrimary }} />,
+      key: 'deployment',
+      group: 'service',
+    },
     {
       label: <WebUILink to="/model-store">{t('data.ModelStore')}</WebUILink>,
       icon: <BAIModelStoreIcon style={{ color: token.colorPrimary }} />,

react/src/pages/DeploymentDetailPage.tsx

@@ -89,7 +89,7 @@ const DeploymentDetailPage: React.FC = () => {
   const { deployment } = useLazyLoadQuery<DeploymentDetailPageQuery>(
     graphql`
       query DeploymentDetailPageQuery($deploymentId: ID!) {
-        deployment(id: $deploymentId) {
+        deployment(id: $deploymentId) @since(version: "25.14.0") {
           id @required(action: THROW)
           metadata {
             name

react/src/pages/DeploymentListPage.tsx

@@ -53,7 +53,7 @@ const DeploymentListPage: React.FC = () => {
   const deployments = useLazyLoadQuery<DeploymentListPageQuery>(
     graphql`
       query DeploymentListPageQuery($filter: DeploymentFilter, $first: Int) {
-        deployments(filter: $filter, first: $first) {
+        deployments(filter: $filter, first: $first) @since(version: "25.14.0") {
           edges {
             node {
               id

src/components/backend-ai-webui.ts

@@ -138,7 +138,6 @@ export default class BackendAIWebUI extends connect(store)(LitElement) {
   @property({ type: Number }) minibarWidth = 88;
   @property({ type: Number }) sidebarWidth = 250;
   @property({ type: Number }) sidepanelWidth = 250;
-  @property({ type: Object }) supports = Object();
   @property({ type: Array }) availablePages = [
     'start',
     'dashboard',
@@ -627,6 +626,14 @@ export default class BackendAIWebUI extends connect(store)(LitElement) {
         page: 'agent-summary',
         available: !this.isHideAgents,
       },
+      {
+        page: 'serving',
+        available: !globalThis.backendaiclient.supports('deployment'),
+      },
+      {
+        page: 'deployment',
+        available: !!globalThis.backendaiclient.supports('deployment'),
+      },
     ];
 
     if (this._page === 'start') {

src/lib/backend.ai-client-esm.ts

@@ -820,6 +820,9 @@ class Client {
     if (this.isManagerVersionCompatibleWith('25.12.0')) {
       this._features['reservoir'] = true;
     }
+    if (this.isManagerVersionCompatibleWith('25.14.0')) {
+      this._features['deployment'] = true;
+    }
   }
 
   /**