feat: open kernel log modal in Kernel list

react/src/components/ComputeSessionNodeItems/ConnectedKernelList.tsx

@@ -4,15 +4,18 @@ import { useCurrentProjectValue } from '../../hooks/useCurrentProject';
 import BAITable from '../BAITable';
 import DoubleTag from '../DoubleTag';
 import Flex from '../Flex';
+import ContainerLogModal from './ContainerLogModal';
 import { ConnectedKernelListLegacyQuery } from './__generated__/ConnectedKernelListLegacyQuery.graphql';
 import {
   ConnectedKernelListQuery,
   ConnectedKernelListQuery$data,
 } from './__generated__/ConnectedKernelListQuery.graphql';
-import { Tag, Typography } from 'antd';
+import { Button, Tag, Tooltip, Typography } from 'antd';
 import { ColumnType } from 'antd/lib/table';
 import graphql from 'babel-plugin-relay/macro';
 import _ from 'lodash';
+import { ScrollTextIcon } from 'lucide-react';
+import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useLazyLoadQuery } from 'react-relay';
 
@@ -57,6 +60,7 @@ const ConnectedKernelList: React.FC<ConnectedKernelListProps> = ({
 }) => {
   const { t } = useTranslation();
   const currentProject = useCurrentProjectValue();
+  const [kernelIdForLogModal, setKernelIdForLogModal] = useState<string>();
 
   // get the project id of the session for <= v24.12.0.
   const { session_for_project_id } =
@@ -94,6 +98,7 @@ const ConnectedKernelList: React.FC<ConnectedKernelListProps> = ({
             }
             count
           }
+          ...ContainerLogModalFragment
         }
       }
     `,
@@ -127,6 +132,15 @@ const ConnectedKernelList: React.FC<ConnectedKernelListProps> = ({
           <Typography.Text copyable ellipsis>
             {row_id}
           </Typography.Text>
+          <Tooltip title={t('session.SeeContainerLogs')}>
+            <Button
+              icon={<ScrollTextIcon />}
+              type="link"
+              onClick={() => {
+                setKernelIdForLogModal(row_id);
+              }}
+            />
+          </Tooltip>
         </>
       ),
     },
@@ -211,6 +225,16 @@ const ConnectedKernelList: React.FC<ConnectedKernelListProps> = ({
         // TODO: implement pagination when compute_session_node query supports pagination
         pagination={false}
       />
+      {kernelIdForLogModal && (
+        <ContainerLogModal
+          open={!!kernelIdForLogModal}
+          sessionFrgmt={session || null}
+          defaultKernelId={kernelIdForLogModal}
+          onCancel={() => {
+            setKernelIdForLogModal(undefined);
+          }}
+        />
+      )}
     </Flex>
   );
 };

react/src/components/ComputeSessionNodeItems/ContainerLogModal.tsx

@@ -19,10 +19,12 @@ import { useFragment } from 'react-relay';
 
 interface ContainerLogModalProps extends BAIModalProps {
   sessionFrgmt: ContainerLogModalFragment$key | null;
+  defaultKernelId?: string;
 }
 
 const ContainerLogModal: React.FC<ContainerLogModalProps> = ({
   sessionFrgmt,
+  defaultKernelId,
   ...modalProps
 }) => {
   const baiClient = useSuspendedBackendaiClient();
@@ -55,7 +57,8 @@ const ContainerLogModal: React.FC<ContainerLogModalProps> = ({
 
   const kernelNodes = session?.kernel_nodes?.edges?.map((e) => e?.node) || [];
   const [selectedKernelId, setSelectedKernelId] = useState(
-    _.find(kernelNodes, (e) => e?.cluster_role === 'main')?.row_id ||
+    defaultKernelId ||
+      _.find(kernelNodes, (e) => e?.cluster_role === 'main')?.row_id ||
       kernelNodes[0]?.row_id,
   );
 

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}

react/src/components/SessionDetailContent.tsx

@@ -232,25 +232,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">

react/src/pages/EndpointDetailPage.tsx

@@ -654,14 +654,16 @@ const EndpointDetailPage: React.FC<EndpointDetailPageProps> = () => {
               title: t('modelService.SessionId'),
               dataIndex: 'session',
               render: (sessionId) => {
-                return (
+                return baiClient.supports('session-node') ? (
                   <Typography.Link
                     onClick={() => {
                       setSelectedSessionId(sessionId);
                     }}
                   >
                     {sessionId}
                   </Typography.Link>
+                ) : (
+                  <Typography.Text>{sessionId}</Typography.Text>
                 );
               },
             },

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;
+    }
   }
 
   /**