From e0522bb4455d3274f64b02d0826e113fef90fd44 Mon Sep 17 00:00:00 2001
From: agatha197 <kimsujin@lablup.com>
Date: Thu, 28 Aug 2025 08:30:07 +0900
Subject: [PATCH] feat(FR-1405): version control of deployment features

---
 react/src/App.tsx                              |  3 +++
 react/src/components/MainLayout/WebUISider.tsx | 11 ++++++++++-
 react/src/pages/DeploymentDetailPage.tsx       |  2 +-
 react/src/pages/DeploymentListPage.tsx         |  2 +-
 src/components/backend-ai-webui.ts             |  9 ++++++++-
 src/lib/backend.ai-client-esm.ts               |  3 +++
 6 files changed, 26 insertions(+), 4 deletions(-)

diff --git a/react/src/App.tsx b/react/src/App.tsx
index 8bb150aaa3..803b0e2549 100644
--- a/react/src/App.tsx
+++ b/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'),
 );
diff --git a/react/src/components/MainLayout/WebUISider.tsx b/react/src/components/MainLayout/WebUISider.tsx
index c9fd1e5e83..40e48e5098 100644
--- a/react/src/components/MainLayout/WebUISider.tsx
+++ b/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 }} />,
diff --git a/react/src/pages/DeploymentDetailPage.tsx b/react/src/pages/DeploymentDetailPage.tsx
index 6198e74b4a..86a0dccca1 100644
--- a/react/src/pages/DeploymentDetailPage.tsx
+++ b/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
diff --git a/react/src/pages/DeploymentListPage.tsx b/react/src/pages/DeploymentListPage.tsx
index 8afb058e9f..2d3b8ee31e 100644
--- a/react/src/pages/DeploymentListPage.tsx
+++ b/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
diff --git a/src/components/backend-ai-webui.ts b/src/components/backend-ai-webui.ts
index c72f6dbb2a..cb184328d3 100644
--- a/src/components/backend-ai-webui.ts
+++ b/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') {
diff --git a/src/lib/backend.ai-client-esm.ts b/src/lib/backend.ai-client-esm.ts
index d201f426b6..1eba48680f 100644
--- a/src/lib/backend.ai-client-esm.ts
+++ b/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;
+    }
   }
 
   /**