From 52c76bd1cd65ff2a2a53983301c46805be47ebcb Mon Sep 17 00:00:00 2001
From: yomybaby <621215+yomybaby@users.noreply.github.com>
Date: Fri, 14 Feb 2025 02:52:54 +0000
Subject: [PATCH] feat(FR-503): open kernel log modal in Kernel list (#3100)

resolves #3138 (FR-503)

Added a container log viewer button to the connected kernel list. Users can now directly view container logs for each kernel by clicking the log icon next to the kernel ID, which opens a modal displaying the container logs.

![image.png](https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/XqC2uNFuj0wg8I60sMUh/8ed2137c-59ab-4d84-baeb-80f2ecf44f28.png)
---
 .../ConnectedKernelList.tsx                   | 26 ++++++++++++++++++-
 .../ContainerLogModal.tsx                     |  5 +++-
 2 files changed, 29 insertions(+), 2 deletions(-)

diff --git a/react/src/components/ComputeSessionNodeItems/ConnectedKernelList.tsx b/react/src/components/ComputeSessionNodeItems/ConnectedKernelList.tsx
index 43d7a6a25e..3fc2d3dc2e 100644
--- a/react/src/components/ComputeSessionNodeItems/ConnectedKernelList.tsx
+++ b/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>
   );
 };
diff --git a/react/src/components/ComputeSessionNodeItems/ContainerLogModal.tsx b/react/src/components/ComputeSessionNodeItems/ContainerLogModal.tsx
index cc3c3bd64e..5b5a7bb101 100644
--- a/react/src/components/ComputeSessionNodeItems/ContainerLogModal.tsx
+++ b/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,
   );