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

Author: agatha197

react/src/App.tsx

@@ -93,6 +93,9 @@ const ReservoirArtifactDetailPage = React.lazy(
 
 const SchedulerPage = React.lazy(() => import('./pages/SchedulerPage'));
 // Deployment pages
+// const DeploymentListPage = React.lazy(
+//   () => import('./pages/Deployments/DeploymentListPage'),
+// );
 const DeploymentListPage = React.lazy(
   () => import('./pages/DeploymentListPage'),
 );

react/src/components/MainLayout/WebUISider.tsx

@@ -19,6 +19,7 @@ import {
   CloudUploadOutlined,
   ControlOutlined,
   DashboardOutlined,
+  DeploymentUnitOutlined,
   FileDoneOutlined,
   HddOutlined,
   InfoCircleOutlined,
@@ -184,12 +185,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

@@ -137,7 +137,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',
@@ -639,6 +638,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

@@ -825,6 +825,9 @@ class Client {
     if (this.isManagerVersionCompatibleWith('25.15.0')) {
       this._features['agent-stats'] = true;
     }
+    if (this.isManagerVersionCompatibleWith('25.14.0')) {
+      this._features['deployment'] = true;
+    }
   }
 
   /**