feat: Session list NEO

react/src/App.tsx

@@ -60,8 +60,8 @@ const UserCredentialsPage = React.lazy(
   () => import('./pages/UserCredentialsPage'),
 );
 
-const ComputeSessionList = React.lazy(
-  () => import('./components/ComputeSessionList'),
+const ComputeSessionListPage = React.lazy(
+  () => import('./pages/ComputeSessionListPage'),
 );
 const AgentSummaryPage = React.lazy(() => import('./pages/AgentSummaryPage'));
 
@@ -142,7 +142,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/BAIPropertyFilter.tsx

@@ -91,7 +91,7 @@ function trimFilterValue(filterValue: string): string {
 }
 
 export function mergeFilterValues(
-  filterStrings: Array<string | undefined>,
+  filterStrings: Array<string | undefined | null>,
   operator: string = '&',
 ) {
   const mergedFilter = _.join(

react/src/components/BAITable.tsx

@@ -1,8 +1,9 @@
 import { useDebounce } from 'ahooks';
-import { GetProps, Table } from 'antd';
+import { ConfigProvider, GetProps, Table } from 'antd';
 import { createStyles } from 'antd-style';
 import { ColumnsType, ColumnType } from 'antd/es/table';
 import { TableProps } from 'antd/lib';
+import { ComponentToken } from 'antd/lib/table/style';
 import _ from 'lodash';
 import { useEffect, useMemo, useRef, useState } from 'react';
 import { Resizable, ResizeCallbackData } from 'react-resizable';
@@ -23,6 +24,11 @@ const useStyles = createStyles(({ token, css }) => ({
       whitespace: 'pre';
       wordwrap: 'break-word';
     }
+
+    thead.ant-table-thead > tr > th.ant-table-cell {
+      font-weight: 500;
+      color: ${token.colorTextTertiary};
+    }
   `,
 }));
 
@@ -94,6 +100,7 @@ const ResizableTitle = (
 interface BAITableProps<RecordType extends object = any>
   extends TableProps<RecordType> {
   resizable?: boolean;
+  tableComponentToken?: ComponentToken;
 }
 
 const columnKeyOrIndexKey = (column: any, index: number) =>
@@ -110,6 +117,7 @@ const BAITable = <RecordType extends object = any>({
   resizable = false,
   columns,
   components,
+  tableComponentToken,
   ...tableProps
 }: BAITableProps<RecordType>) => {
   const { styles } = useStyles();
@@ -145,22 +153,35 @@ const BAITable = <RecordType extends object = any>({
   }, [resizable, columns, resizedColumnWidths]);
 
   return (
-    <Table
-      sortDirections={['descend', 'ascend', 'descend']}
-      showSorterTooltip={false}
-      className={resizable ? styles.resizableTable : ''}
-      components={
-        resizable
-          ? _.merge(components || {}, {
-              header: {
-                cell: ResizableTitle,
+    <ConfigProvider
+      theme={
+        tableComponentToken
+          ? {
+              components: {
+                Table: tableComponentToken,
               },
-            })
-          : components
+            }
+          : undefined
       }
-      columns={mergedColumns}
-      {...tableProps}
-    />
+    >
+      <Table
+        size="small"
+        sortDirections={['descend', 'ascend', 'descend']}
+        showSorterTooltip={false}
+        className={resizable ? styles.resizableTable : ''}
+        components={
+          resizable
+            ? _.merge(components || {}, {
+                header: {
+                  cell: ResizableTitle,
+                },
+              })
+            : components
+        }
+        columns={mergedColumns}
+        {...tableProps}
+      />
+    </ConfigProvider>
   );
 };
 

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

@@ -1,3 +1,4 @@
+import { formatDurationAsDays } from '../../helper';
 import { useSuspendedBackendaiClient } from '../../hooks';
 import BAIIntervalView from '../BAIIntervalView';
 import DoubleTag from '../DoubleTag';
@@ -10,8 +11,8 @@ import { useFragment } from 'react-relay';
 
 const SessionReservation: React.FC<{
   sessionFrgmt: SessionReservationFragment$key;
-}> = ({ sessionFrgmt }) => {
-  const baiClient = useSuspendedBackendaiClient();
+  mode?: 'simple-elapsed' | 'detail';
+}> = ({ sessionFrgmt, mode = 'detail' }) => {
   const { t } = useTranslation();
   const session = useFragment(
     graphql`
@@ -25,25 +26,27 @@ const SessionReservation: React.FC<{
   );
   return (
     <>
-      {dayjs(session.created_at).format('lll')}
+      {mode !== 'simple-elapsed' && dayjs(session.created_at).format('lll')}
       <BAIIntervalView
+        key={session.id}
         callback={() => {
           return session?.created_at
-            ? baiClient.utils.elapsedTime(
-                session.created_at,
-                session?.terminated_at,
-              )
+            ? formatDurationAsDays(session.created_at, session?.terminated_at)
             : '-';
         }}
         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
@@ -51,6 +52,7 @@ const statusInfoTagColor = {
 };
 const SessionStatusTag: React.FC<SessionStatusTagProps> = ({
   sessionFrgmt,
+  showInfo,
 }) => {
   const session = useFragment(
     graphql`
@@ -66,7 +68,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/SessionDetailContent.tsx

@@ -169,7 +169,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')}>