From 3d5a36a2370e5f2f36a521ef4c0d8a1489ba925d Mon Sep 17 00:00:00 2001
From: SungChul Hong <hsc6263@gmail.com>
Date: Tue, 4 Feb 2025 20:29:52 +0900
Subject: [PATCH] fix: set session detail panel version compatibility

---
 ...ssionDetailAndContainerLogOpenerLegacy.tsx | 20 ++++++----
 react/src/components/SessionDetailContent.tsx | 40 ++++++++++---------
 react/src/pages/EndpointDetailPage.tsx        |  4 +-
 src/components/backend-ai-session-list.ts     |  7 +++-
 src/lib/backend.ai-client-esm.ts              |  3 ++
 5 files changed, 46 insertions(+), 28 deletions(-)

diff --git a/react/src/components/SessionDetailAndContainerLogOpenerLegacy.tsx b/react/src/components/SessionDetailAndContainerLogOpenerLegacy.tsx
index ae01d81c9e..48fa6ee777 100644
--- a/react/src/components/SessionDetailAndContainerLogOpenerLegacy.tsx
+++ b/react/src/components/SessionDetailAndContainerLogOpenerLegacy.tsx
@@ -1,3 +1,4 @@
+import { useSuspendedBackendaiClient } from '../hooks';
 import ContainerLogModalWithLazyQueryLoader from './ComputeSessionNodeItems/ContainerLogModalWithLazyQueryLoader';
 import SessionDetailDrawer from './SessionDetailDrawer';
 import { useState, useEffect, useTransition } from 'react';
@@ -8,6 +9,7 @@ const SessionDetailAndContainerLogOpenerLegacy = () => {
   const [containerLogModalSessionId, setContainerLogModalSessionId] =
     useState<string>();
   const [isPendingLogModalOpen, startLogModalOpenTransition] = useTransition();
+  const baiClient = useSuspendedBackendaiClient();
 
   useEffect(() => {
     const handler = (e: any) => {
@@ -21,15 +23,19 @@ const SessionDetailAndContainerLogOpenerLegacy = () => {
     };
   }, [startLogModalOpenTransition, setContainerLogModalSessionId]);
 
+  const supportSessionDetailPanel = baiClient?.supports('session-node');
+
   return (
     <>
-      <SessionDetailDrawer
-        open={!sessionId}
-        sessionId={sessionId || undefined}
-        onClose={() => {
-          setSessionId(null, 'replaceIn');
-        }}
-      />
+      {supportSessionDetailPanel ? (
+        <SessionDetailDrawer
+          open={!sessionId}
+          sessionId={sessionId || undefined}
+          onClose={() => {
+            setSessionId(null, 'replaceIn');
+          }}
+        />
+      ) : null}
       <ContainerLogModalWithLazyQueryLoader
         open={!!containerLogModalSessionId || isPendingLogModalOpen}
         loading={isPendingLogModalOpen}
diff --git a/react/src/components/SessionDetailContent.tsx b/react/src/components/SessionDetailContent.tsx
index acf7b1b6b5..98cf642047 100644
--- a/react/src/components/SessionDetailContent.tsx
+++ b/react/src/components/SessionDetailContent.tsx
@@ -220,25 +220,27 @@ const SessionDetailContent: React.FC<{
             )}
           </Descriptions.Item>
           <Descriptions.Item label={t('session.launcher.MountedFolders')}>
-            {_.map(
-              _.zip(legacy_session?.mounts, session?.vfolder_mounts),
-              (mountInfo) => {
-                const [name, id] = mountInfo;
-                return (
-                  <Button
-                    key={id}
-                    type="link"
-                    size="small"
-                    icon={<FolderOutlined />}
-                    onClick={() => {
-                      open(id ?? '');
-                    }}
-                  >
-                    {name}
-                  </Button>
-                );
-              },
-            )}
+            {baiClient.supports('vfolder-mounts')
+              ? _.map(
+                  _.zip(legacy_session?.mounts, session?.vfolder_mounts),
+                  (mountInfo) => {
+                    const [name, id] = mountInfo;
+                    return (
+                      <Button
+                        key={id}
+                        type="link"
+                        size="small"
+                        icon={<FolderOutlined />}
+                        onClick={() => {
+                          open(id ?? '');
+                        }}
+                      >
+                        {name}
+                      </Button>
+                    );
+                  },
+                )
+              : legacy_session?.mounts?.join(', ')}
           </Descriptions.Item>
           <Descriptions.Item label={t('session.launcher.ResourceAllocation')}>
             <Flex gap={'sm'} wrap="wrap">
diff --git a/react/src/pages/EndpointDetailPage.tsx b/react/src/pages/EndpointDetailPage.tsx
index 3540e6ec0c..c19598eed3 100644
--- a/react/src/pages/EndpointDetailPage.tsx
+++ b/react/src/pages/EndpointDetailPage.tsx
@@ -654,7 +654,7 @@ const EndpointDetailPage: React.FC<EndpointDetailPageProps> = () => {
               title: t('modelService.SessionId'),
               dataIndex: 'session',
               render: (sessionId) => {
-                return (
+                return baiClient.supports('session-node') ? (
                   <Typography.Link
                     onClick={() => {
                       setSelectedSessionId(sessionId);
@@ -662,6 +662,8 @@ const EndpointDetailPage: React.FC<EndpointDetailPageProps> = () => {
                   >
                     {sessionId}
                   </Typography.Link>
+                ) : (
+                  <Typography.Text>{sessionId}</Typography.Text>
                 );
               },
             },
diff --git a/src/components/backend-ai-session-list.ts b/src/components/backend-ai-session-list.ts
index b4a4b0022e..3e8a94b201 100644
--- a/src/components/backend-ai-session-list.ts
+++ b/src/components/backend-ai-session-list.ts
@@ -3117,9 +3117,11 @@ export default class BackendAISessionList extends BackendAIPage {
               white-space: pre-wrap;
               white-space-collapse: collapse;
               word-break: break-all;
+            }
+            #session-name-field[data-allow-detail-panel='true'] {
               cursor: pointer;
             }
-            #session-name-field:hover {
+            #session-name-field[data-allow-detail-panel='true']:hover {
               text-decoration: underline;
               color: var(--token-colorLink);
             }
@@ -3147,6 +3149,9 @@ export default class BackendAISessionList extends BackendAIPage {
             <div class="horizontal center center-justified layout">
               <pre
                 id="session-name-field"
+                data-allow-detail-panel=${globalThis.backendaiclient.supports(
+                  'session-node',
+                )}
                 @click="${() => this.triggerOpenSessionDetailDrawer(rowData)}"
                 @keyup="${() => {}}"
               >
diff --git a/src/lib/backend.ai-client-esm.ts b/src/lib/backend.ai-client-esm.ts
index 71ad1cbb3f..ad463928bb 100644
--- a/src/lib/backend.ai-client-esm.ts
+++ b/src/lib/backend.ai-client-esm.ts
@@ -738,6 +738,9 @@ class Client {
     if (this.isManagerVersionCompatibleWith(['25.1.0', '24.09.6', '24.03.12'])) {
       this._features['vfolder-id-based'] = true;
     }
+    if (this.isManagerVersionCompatibleWith(['25.1.1', '24.09.6'])) {
+      this._features['vfolder-mounts'] = true;
+    }
   }
 
   /**