feat: Session list NEO

react/src/App.tsx

@@ -57,8 +57,8 @@ const InteractiveLoginPage = React.lazy(
 );
 const ImportAndRunPage = React.lazy(() => import('./pages/ImportAndRunPage'));
 
-const ComputeSessionList = React.lazy(
-  () => import('./components/ComputeSessionList'),
+const ComputeSessionListPage = React.lazy(
+  () => import('./pages/ComputeSessionListPage'),
 );
 const AgentSummaryPage = React.lazy(() => import('./pages/AgentSummaryPage'));
 
@@ -139,7 +139,7 @@ const router = createBrowserRouter([
         handle: { labelKey: 'webui.menu.Sessions' },
         element: (
           <BAIErrorBoundary>
-            <ComputeSessionList />
+            <ComputeSessionListPage />
           </BAIErrorBoundary>
         ),
       },

react/src/components/BAILink.tsx

@@ -15,7 +15,7 @@ const useStyles = createStyles(({ css, token }) => ({
 }));
 
 interface BAILinkProps extends LinkProps {
-  type: 'hover';
+  type?: 'hover';
 }
 const BAILink: React.FC<BAILinkProps> = ({ type, ...linkProps }) => {
   const { styles } = useStyles();

react/src/components/ComputeSessionNodeItems/SessionOccupiedSlot.tsx

@@ -0,0 +1,54 @@
+import { convertBinarySizeUnit } from '../../helper';
+import { useResourceSlotsDetails } from '../../hooks/backendai';
+import { SessionOccupiedSlotFragment$key } from './__generated__/SessionOccupiedSlotFragment.graphql';
+import { Divider, Typography } from 'antd';
+import graphql from 'babel-plugin-relay/macro';
+import _ from 'lodash';
+import React from 'react';
+import { useFragment } from 'react-relay';
+
+interface OccupiedSlotViewProps {
+  sessionFrgmt: SessionOccupiedSlotFragment$key;
+  type: 'cpu' | 'mem' | 'accelerator';
+}
+const SessionOccupiedSlot: React.FC<OccupiedSlotViewProps> = ({
+  type,
+  sessionFrgmt,
+}) => {
+  const { deviceMetadata } = useResourceSlotsDetails();
+  const session = useFragment(
+    graphql`
+      fragment SessionOccupiedSlotFragment on ComputeSessionNode {
+        id
+        occupied_slots
+      }
+    `,
+    sessionFrgmt,
+  );
+
+  const occupiedSlots = JSON.parse(session.occupied_slots || '{}');
+
+  if (type === 'cpu') {
+    return occupiedSlots.cpu ?? '-';
+  } else if (type === 'mem') {
+    const mem = occupiedSlots.mem ?? '-';
+    return mem === '-' ? mem : convertBinarySizeUnit(mem, 'G')?.number + ' GiB';
+  } else if (type === 'accelerator') {
+    const occupiedAccelerators = _.omit(occupiedSlots, ['cpu', 'mem']);
+    return _.isEmpty(occupiedAccelerators)
+      ? '-'
+      : _.map(occupiedAccelerators, (value, key) => {
+          return (
+            <>
+              <Typography.Text>{value}</Typography.Text>
+              <Divider type="vertical" />
+              <Typography.Text>
+                {deviceMetadata?.[key]?.human_readable_name}
+              </Typography.Text>
+            </>
+          );
+        });
+  }
+};
+
+export default SessionOccupiedSlot;

react/src/components/ComputeSessionNodeItems/SessionReservation.tsx

@@ -10,7 +10,8 @@ import { useFragment } from 'react-relay';
 
 const SessionReservation: React.FC<{
   sessionFrgmt: SessionReservationFragment$key;
-}> = ({ sessionFrgmt }) => {
+  mode?: 'simple-elapsed' | 'detail';
+}> = ({ sessionFrgmt, mode = 'detail' }) => {
   const baiClient = useSuspendedBackendaiClient();
   const { t } = useTranslation();
   const session = useFragment(
@@ -25,7 +26,7 @@ const SessionReservation: React.FC<{
   );
   return (
     <>
-      {dayjs(session.created_at).format('lll')}
+      {mode !== 'simple-elapsed' && dayjs(session.created_at).format('lll')}
       <BAIIntervalView
         callback={() => {
           return session?.created_at
@@ -36,14 +37,18 @@ const SessionReservation: React.FC<{
             : '-';
         }}
         delay={1000}
-        render={(intervalValue) => (
-          <DoubleTag
-            values={[
-              { label: t('session.ElapsedTime') },
-              { label: intervalValue },
-            ]}
-          />
-        )}
+        render={(intervalValue) =>
+          mode === 'simple-elapsed' ? (
+            intervalValue
+          ) : (
+            <DoubleTag
+              values={[
+                { label: t('session.ElapsedTime') },
+                { label: intervalValue },
+              ]}
+            />
+          )
+        }
       />
     </>
   );

react/src/components/ComputeSessionNodeItems/SessionStatusTag.tsx

@@ -12,6 +12,7 @@ import { useFragment } from 'react-relay';
 
 interface SessionStatusTagProps {
   sessionFrgmt?: SessionStatusTagFragment$key | null;
+  showInfo?: boolean;
 }
 const statusTagColor = {
   //prepare
@@ -49,6 +50,7 @@ const statusInfoTagColor = {
 };
 const SessionStatusTag: React.FC<SessionStatusTagProps> = ({
   sessionFrgmt,
+  showInfo,
 }) => {
   const session = useFragment(
     graphql`
@@ -64,7 +66,7 @@ const SessionStatusTag: React.FC<SessionStatusTagProps> = ({
   const { token } = theme.useToken();
 
   return session ? (
-    _.isEmpty(session.status_info) ? (
+    _.isEmpty(session.status_info) || !showInfo ? (
       <Tag
         color={
           session.status ? _.get(statusTagColor, session.status) : undefined

react/src/components/ComputeSessionNodeItems/TerminateSessionModal.tsx

@@ -200,6 +200,7 @@ const TerminateSessionModal: React.FC<TerminateSessionModalProps> = ({
     `,
     sessionFrgmt,
   );
+
   const [isForce, setIsForce] = useState(false);
   const userRole = useCurrentUserRole();
 

react/src/components/ComputeSessionNodeList.tsx

@@ -0,0 +1,7 @@
+import React from 'react';
+
+const ComputeSessionNodeList = () => {
+  return <div>ComputeSessionNodeList</div>;
+};
+
+export default ComputeSessionNodeList;

react/src/components/SessionDetailContent.tsx

@@ -166,7 +166,7 @@ const SessionDetailContent: React.FC<{
           label={t('session.Status')}
           contentStyle={{ display: 'flex', gap: token.marginSM }}
         >
-          <SessionStatusTag sessionFrgmt={session} />
+          <SessionStatusTag sessionFrgmt={session} showInfo />
           {/* <Button type="text" icon={<TriangleAlertIcon />} /> */}
         </Descriptions.Item>
         <Descriptions.Item label={t('session.SessionType')}>

react/src/components/SessionNodes.tsx

@@ -0,0 +1,132 @@
+import BAILink from './BAILink';
+import BAITable from './BAITable';
+import SessionOccupiedSlot from './ComputeSessionNodeItems/SessionOccupiedSlot';
+import SessionReservation from './ComputeSessionNodeItems/SessionReservation';
+import SessionStatusTag from './ComputeSessionNodeItems/SessionStatusTag';
+import SessionDetailDrawer from './SessionDetailDrawer';
+import { SessionNodesFragment$key } from './__generated__/SessionNodesFragment.graphql';
+import { TableProps } from 'antd/lib';
+import graphql from 'babel-plugin-relay/macro';
+import _ from 'lodash';
+import React, { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useFragment } from 'react-relay';
+
+interface SessionNodesProps extends Omit<TableProps, 'dataSource' | 'columns'> {
+  sessionsFrgmt: SessionNodesFragment$key;
+}
+const SessionNodes: React.FC<SessionNodesProps> = ({
+  sessionsFrgmt,
+  ...tableProps
+}) => {
+  const { t } = useTranslation();
+  const [selectedSessionId, setSelectedSessionId] = useState<string>();
+
+  const sessions = useFragment(
+    graphql`
+      fragment SessionNodesFragment on ComputeSessionNode @relay(plural: true) {
+        id
+        row_id
+        name
+        ...SessionStatusTagFragment
+        ...SessionReservationFragment
+        ...SessionOccupiedSlotFragment
+      }
+    `,
+    sessionsFrgmt,
+  );
+
+  return (
+    <>
+      <BAITable
+        dataSource={sessions}
+        columns={[
+          {
+            key: 'name',
+            title: t('session.SessionName'),
+            dataIndex: 'name',
+            render: (name: string, session) => {
+              return (
+                <BAILink
+                  to={'#'}
+                  type="hover"
+                  onClick={(e) => {
+                    session.row_id && setSelectedSessionId(session.row_id);
+                  }}
+                >
+                  {name}
+                </BAILink>
+              );
+            },
+            sorter: true,
+          },
+          {
+            key: 'status',
+            title: t('session.Status'),
+            dataIndex: 'status',
+            render: (status: string, session) => {
+              // @ts-expect-error
+              return <SessionStatusTag sessionFrgmt={session} />;
+            },
+          },
+          {
+            key: 'utils',
+            title: t('session.Utilization'),
+          },
+          {
+            key: 'accelerator',
+            title: t('session.launcher.AIAccelerator'),
+            render: (__, session) => {
+              return (
+                <SessionOccupiedSlot
+                  // @ts-expect-error
+                  sessionFrgmt={session}
+                  type="accelerator"
+                />
+              );
+            },
+          },
+          {
+            key: 'cpu',
+            title: t('session.launcher.CPU'),
+            render: (__, session) => {
+              // @ts-expect-error
+              return <SessionOccupiedSlot sessionFrgmt={session} type="cpu" />;
+            },
+          },
+          {
+            key: 'mem',
+            title: t('session.launcher.Memory'),
+            render: (__, session) => {
+              // @ts-expect-error
+              return <SessionOccupiedSlot sessionFrgmt={session} type="mem" />;
+            },
+          },
+          {
+            key: 'elapsedTime',
+            title: t('session.ElapsedTime'),
+            render: (__, session) => {
+              return (
+                <SessionReservation
+                  mode="simple-elapsed"
+                  // @ts-expect-error
+                  sessionFrgmt={session}
+                />
+              );
+            },
+          },
+        ]}
+        {...tableProps}
+      />
+      <SessionDetailDrawer
+        open={!selectedSessionId}
+        sessionId={selectedSessionId}
+        onClose={() => {
+          setSelectedSessionId(undefined);
+        }}
+      />
+    </>
+  );
+};
+
+export default SessionNodes;