feat(FR-1660): add action buttons column to SessionNodes table

Author: yomybaby

packages/backend.ai-ui/src/components/Table/BAITable.tsx

@@ -326,6 +326,7 @@ const BAITable = <RecordType extends object = any>({
           styles.neoHeader,
           tableProps.rowSelection?.columnWidth === 0 &&
             styles.zeroWithSelectionColumn,
+          styles.adjustZIndex,
         )}
         style={{
           opacity: loading ? 0.7 : 1,
@@ -472,6 +473,11 @@ const useStyles = createStyles(({ token, css }) => ({
       padding: 0 !important;
     }
   `,
+  adjustZIndex: css`
+    td.ant-table-cell.ant-table-cell-fix-left {
+      z-index: 4;
+    }
+  `,
 }));
 
 const ResizableTitle = (

react/src/components/ComputeSessionNodeItems/SessionActionButtons.tsx

@@ -47,6 +47,7 @@ interface SessionActionButtonsProps {
   hiddenButtonKeys?: SessionActionButtonKey[];
   onAction?: (action: SessionActionButtonKey) => void;
   primaryAppOption?: PrimaryAppOption;
+  noPrimaryButton?: boolean;
 }
 
 const isActive = (session: SessionActionButtonsFragment$data) => {
@@ -76,6 +77,7 @@ const SessionActionButtons: React.FC<SessionActionButtonsProps> = ({
   hiddenButtonKeys,
   primaryAppOption,
   onAction,
+  noPrimaryButton: noPrimaryColor,
 }) => {
   const { t } = useTranslation();
   const { token } = theme.useToken();
@@ -158,7 +160,7 @@ const SessionActionButtons: React.FC<SessionActionButtonsProps> = ({
           >
             <Button
               size={size}
-              type={'primary'}
+              type={noPrimaryColor ? undefined : 'primary'}
               disabled={
                 !isAppSupported(session) || !isActive(session) || !isOwner
               }
@@ -192,7 +194,9 @@ const SessionActionButtons: React.FC<SessionActionButtonsProps> = ({
             >
               <Button
                 size={size}
-                type={primaryAppOption ? undefined : 'primary'}
+                type={
+                  primaryAppOption || noPrimaryColor ? undefined : 'primary'
+                }
                 disabled={
                   !isAppSupported(session) || !isActive(session) || !isOwner
                 }

react/src/components/SessionNodes.tsx

@@ -4,6 +4,7 @@ import {
 } from '../__generated__/SessionNodesFragment.graphql';
 import { useSuspendedBackendaiClient } from '../hooks';
 import { useCurrentUserRole } from '../hooks/backendai';
+import SessionActionButtons from './ComputeSessionNodeItems/SessionActionButtons';
 import SessionReservation from './ComputeSessionNodeItems/SessionReservation';
 import SessionSlotCell from './ComputeSessionNodeItems/SessionSlotCell';
 import SessionStatusTag from './ComputeSessionNodeItems/SessionStatusTag';
@@ -60,6 +61,7 @@ const SessionNodes: React.FC<SessionNodesProps> = ({
         ...BAISessionAgentIdsFragment
         ...BAISessionTypeTagFragment
         ...BAISessionClusterModeFragment
+        ...SessionActionButtonsFragment
         kernel_nodes {
           edges {
             node {
@@ -114,6 +116,20 @@ const SessionNodes: React.FC<SessionNodesProps> = ({
           return <SessionStatusTag sessionFrgmt={session} />;
         },
       },
+      {
+        key: 'actionButtons',
+        title: t('general.Control'),
+        defaultHidden: true,
+        sorter: false,
+        render: (__, session) => (
+          <SessionActionButtons
+            size="small"
+            sessionFrgmt={session}
+            compact
+            noPrimaryButton
+          />
+        ),
+      },
       // This column will be added back when the session list column setting ui is ready
       // {
       //   key: 'utils',