From b76dc411e190b90ce5420a9cc7924576dae3453b Mon Sep 17 00:00:00 2001
From: Jihyun Kang <jihyunkang@lablup.com>
Date: Tue, 15 Oct 2024 16:57:44 +0900
Subject: [PATCH] refactor: draft for dashboard page

---
 .../src/components/AllocatedResourcesCard.tsx | 169 ++++++++---
 react/src/components/ResourceUnit.tsx         |  18 +-
 react/src/hooks/hooksUsingRelay.tsx           |   1 +
 .../hooks/useResourceLimitAndRemaining.tsx    |   6 +-
 react/src/pages/AdminDashboardPage.tsx        |   8 +-
 react/src/pages/DashboardPage.tsx             | 278 +++++++++++++++---
 6 files changed, 377 insertions(+), 103 deletions(-)

diff --git a/react/src/components/AllocatedResourcesCard.tsx b/react/src/components/AllocatedResourcesCard.tsx
index 853a44a91..7284a31d5 100644
--- a/react/src/components/AllocatedResourcesCard.tsx
+++ b/react/src/components/AllocatedResourcesCard.tsx
@@ -1,8 +1,21 @@
-import { useCurrentProjectValue } from '../hooks/useCurrentProject';
+import { humanReadableBinarySize, iSizeToSize } from '../helper';
+import { useSuspendedBackendaiClient } from '../hooks';
+import { useResourceSlotsDetails } from '../hooks/backendai';
+import { useSuspenseTanQuery } from '../hooks/reactQueryAlias';
+import {
+  useCurrentProjectValue,
+  useCurrentResourceGroupValue,
+} from '../hooks/useCurrentProject';
+import {
+  ResourceSlots,
+  ResourceAllocation,
+  limitParser,
+} from '../hooks/useResourceLimitAndRemaining';
+import BAILayoutCard from './BAILayoutCard';
 import Flex from './Flex';
 import ResourceGroupSelect from './ResourceGroupSelect';
+import ResourceGroupSelectForCurrentProject from './ResourceGroupSelectForCurrentProject';
 import ResourceUnit, { ResourceUnitProps } from './ResourceUnit';
-import BAILayoutCard from './BAILayoutCard';
 import { QuestionCircleOutlined, SyncOutlined } from '@ant-design/icons';
 import {
   Button,
@@ -30,33 +43,101 @@ const AllocatedResourcesCard: React.FC<AllocatedResourcesCardProps> = ({
 }) => {
   const { token } = theme.useToken();
   const { t } = useTranslation();
+  const currentResourceGroup = useCurrentResourceGroupValue(); // use global state
   const currentProject = useCurrentProjectValue();
+  const baiClient = useSuspendedBackendaiClient();
+  const { mergedResourceSlots } = useResourceSlotsDetails();
+
+  const { data: resourceAllocation, refetch } = useSuspenseTanQuery<
+    ResourceAllocation | undefined
+  >({
+    queryKey: ['check-presets', currentProject.name, currentResourceGroup],
+    queryFn: () => {
+      if (currentResourceGroup) {
+        return baiClient.resourcePreset
+          .check({
+            group: currentProject.name,
+            scaling_group: currentResourceGroup,
+          })
+          .catch(() => {});
+      } else {
+        return;
+      }
+    },
+    // onSuccess: (data) => {
+    //   if (!data) {
+    //     refetch();
+    //   }
+    // },
+    // suspense: !_.isEmpty(currentResourceGroup), //prevent flicking
+  });
+
+  const mergeResources = (remaining: any, using: any) => {
+    let merged: ResourceSlots = {
+      cpu: '',
+      mem: '',
+    };
+
+    [remaining, using].forEach((obj) => {
+      Object.entries(obj).forEach(([key, value]) => {
+        const numValue = parseFloat(value as string) || 0;
+        merged[key] = (parseFloat(merged[key] || '0') + numValue).toString();
+      });
+    });
+
+    return merged;
+  };
+
+  const remaining =
+    resourceAllocation?.scaling_groups[currentResourceGroup as string]
+      ?.remaining || {};
+  const using =
+    resourceAllocation?.scaling_groups[currentResourceGroup as string]?.using ||
+    {};
+  const mergedResources: ResourceSlots = mergeResources(remaining, using);
+
+  const accelerators = _.omit(mergedResources, ['cpu', 'mem']);
+  const usingAccelerators: { [key: string]: string } = _.omit(using, [
+    'cpu',
+    'mem',
+  ]);
+
+  console.log(iSizeToSize(limitParser(using?.mem) + '', 'g', 0));
+
+  const acceleratorData = _.map(accelerators, (value, key) => ({
+    name: mergedResourceSlots[key]?.human_readable_name || key.toUpperCase(),
+    displayUnit: mergedResourceSlots[key]?.display_unit || 'Unit',
+    value: usingAccelerators[key],
+    percentage:
+      (parseInt(usingAccelerators[key]) / parseInt(mergedResources[key])) * 100,
+  }));
 
-  const resourceUnitMockData: Array<ResourceUnitProps> = [
+  const resourceUnitData: Array<ResourceUnitProps> = [
     {
       name: 'CPU',
       displayUnit: 'Core',
-      value: 12,
-      percentage: (4 / 12) * 100,
+      value: using?.cpu as string,
+      percentage:
+        (parseInt(using?.cpu as string) / parseInt(mergedResources.cpu)) * 100,
     },
     {
       name: 'RAM',
       displayUnit: 'GiB',
-      value: 256,
-      percentage: (8 / 12) * 100,
-    },
-    {
-      name: 'FGPU',
-      displayUnit: 'GiB',
-      value: 3.5,
-      percentage: (4 / 12) * 100,
-    },
-    {
-      name: 'ATOM',
-      displayUnit: 'Unit',
-      value: 2,
-      percentage: (2 / 12) * 100,
+      value: iSizeToSize(limitParser(using?.mem) + '', 'g', 0)?.number?.toFixed(
+        1,
+      ) as string,
+      percentage:
+        (parseInt(
+          iSizeToSize(limitParser(using?.mem) + '', 'g', 0)
+            ?.numberFixed as string,
+        ) /
+          parseInt(
+            iSizeToSize(limitParser(mergedResources.mem) + '', 'g', 0)
+              ?.numberFixed as string,
+          )) *
+        100,
     },
+    ...acceleratorData,
   ];
   return (
     <ConfigProvider
@@ -80,40 +161,44 @@ const AllocatedResourcesCard: React.FC<AllocatedResourcesCardProps> = ({
         }
         extra={
           <>
-            <ResourceGroupSelect
-              placeholder={t('session.ResourceGroup')}
-              variant="borderless"
+            <ResourceGroupSelectForCurrentProject
               style={{ minWidth: 151, fontSize: token.fontSizeLG, padding: 0 }}
-              dropdownStyle={{ color: '#999999' }} 
-              projectName={currentProject.name}/>
+              variant="borderless"
+              showSearch
+            />
             <Button
               type="text"
               icon={<SyncOutlined />}
               style={{ color: 'inherit' }}
+              onClick={() => {
+                refetch();
+              }}
             />
           </>
         }
         style={{ width: width ?? 678, height: 192 }}
       >
-        <Flex justify="between" style={{ maxWidth: 630 }}>
-          {_.map(
-            resourceUnitMockData,
-            (resourceUnit: ResourceUnitProps, index) => (
-              <>
-                <ResourceUnit
-                  key={index}
-                  name={resourceUnit.name}
-                  displayUnit={resourceUnit.displayUnit}
-                  value={resourceUnit.value}
-                  percentage={resourceUnit.percentage}
-                  color={'#00BD9B'}
+        <Flex justify="between" align="stretch" style={{ width: '100%' }}>
+          {_.map(resourceUnitData, (resourceUnit: ResourceUnitProps, index) => (
+            <Flex
+              style={{ width: `${_.round(100 / resourceUnitData.length)}%` }}
+            >
+              <ResourceUnit
+                key={index}
+                name={resourceUnit.name}
+                displayUnit={resourceUnit.displayUnit}
+                value={resourceUnit.value}
+                percentage={resourceUnit.percentage}
+                color={'#00BD9B'}
+              />
+              {index < resourceUnitData.length - 1 && (
+                <Divider
+                  type="vertical"
+                  style={{ height: 70, margin: '0 auto' }}
                 />
-                {index < resourceUnitMockData.length - 1 && (
-                  <Divider type="vertical" style={{ height: 70 }} />
-                )}
-              </>
-            ),
-          )}
+              )}
+            </Flex>
+          ))}
         </Flex>
       </BAILayoutCard>
       {/* <Card
diff --git a/react/src/components/ResourceUnit.tsx b/react/src/components/ResourceUnit.tsx
index 77769aa5b..38b5d9d0f 100644
--- a/react/src/components/ResourceUnit.tsx
+++ b/react/src/components/ResourceUnit.tsx
@@ -5,9 +5,10 @@ import React from 'react';
 export interface ResourceUnitProps {
   name: string;
   displayUnit: string;
-  value: number;
+  value: string;
   percentage: number;
   color?: string;
+  style?: React.CSSProperties;
 }
 
 const ResourceUnit: React.FC<ResourceUnitProps> = ({
@@ -16,20 +17,11 @@ const ResourceUnit: React.FC<ResourceUnitProps> = ({
   value,
   percentage,
   color,
+  style,
 }) => {
   const { token } = theme.useToken();
   return (
-    <Flex
-      direction="column"
-      style={
-        {
-          // width: 88,
-          // height: 70,
-        }
-      }
-      align="start"
-      justify="center"
-    >
+    <Flex direction="column" style={style} align="start" justify="center">
       <Typography.Text
         style={{
           // marginBottom: token.margin,
@@ -40,7 +32,7 @@ const ResourceUnit: React.FC<ResourceUnitProps> = ({
         {name}
       </Typography.Text>
       <Flex direction="column" align="start" justify="start">
-        <Flex align="baseline">
+        <Flex align="baseline" gap="xxs">
           <Typography.Text
             style={{
               fontSize: token.sizeXL,
diff --git a/react/src/hooks/hooksUsingRelay.tsx b/react/src/hooks/hooksUsingRelay.tsx
index 9e659d280..e54b34e06 100644
--- a/react/src/hooks/hooksUsingRelay.tsx
+++ b/react/src/hooks/hooksUsingRelay.tsx
@@ -60,6 +60,7 @@ export const useCurrentKeyPairResourcePolicyLazyLoadQuery = (
           keypair_resource_policy(name: $name) {
             max_containers_per_session
             max_concurrent_sessions
+            max_concurrent_sftp_sessions
           }
         }
       `,
diff --git a/react/src/hooks/useResourceLimitAndRemaining.tsx b/react/src/hooks/useResourceLimitAndRemaining.tsx
index 8266692b8..1499c4227 100644
--- a/react/src/hooks/useResourceLimitAndRemaining.tsx
+++ b/react/src/hooks/useResourceLimitAndRemaining.tsx
@@ -56,7 +56,7 @@ type ScalingGroup = {
   remaining: ResourceRemaining;
 };
 
-type ResourceSlots = {
+export type ResourceSlots = {
   cpu: string;
   mem: string;
   [key: string]: string;
@@ -77,7 +77,7 @@ export type ResourcePreset = {
   allocatable: boolean;
 };
 
-type ResourceAllocation = {
+export type ResourceAllocation = {
   keypair_limits: ResourceLimits;
   keypair_using: ResourceUsing;
   keypair_remaining: ResourceRemaining;
@@ -356,7 +356,7 @@ export const useResourceLimitAndRemaining = ({
   ] as const;
 };
 
-const limitParser = (limit: string | undefined) => {
+export const limitParser = (limit: string | undefined) => {
   if (limit === undefined) {
     return undefined;
   } else if (limit === 'Infinity') {
diff --git a/react/src/pages/AdminDashboardPage.tsx b/react/src/pages/AdminDashboardPage.tsx
index 516974a0c..6197845c1 100644
--- a/react/src/pages/AdminDashboardPage.tsx
+++ b/react/src/pages/AdminDashboardPage.tsx
@@ -208,25 +208,25 @@ const AdminDashboardPage: React.FC<AdminDashboardPageProps> = (props) => {
     {
       name: 'CPU',
       displayUnit: 'Core',
-      value: 12,
+      value: '12',
       percentage: (4 / 12) * 100,
     },
     {
       name: 'RAM',
       displayUnit: 'GiB',
-      value: 256,
+      value: '256',
       percentage: (8 / 12) * 100,
     },
     {
       name: 'FGPU',
       displayUnit: 'GiB',
-      value: 3.5,
+      value: '3.5',
       percentage: (4 / 12) * 100,
     },
     {
       name: 'ATOM',
       displayUnit: 'Unit',
-      value: 2,
+      value: '2',
       percentage: (2 / 12) * 100,
     },
   ];
diff --git a/react/src/pages/DashboardPage.tsx b/react/src/pages/DashboardPage.tsx
index 48a8f8e9d..75d4ffde9 100644
--- a/react/src/pages/DashboardPage.tsx
+++ b/react/src/pages/DashboardPage.tsx
@@ -8,10 +8,18 @@ import {
   iSizeToSize,
   localeCompare,
 } from '../helper';
-import { useUpdatableState } from '../hooks';
+import {
+  useCurrentDomainValue,
+  useSuspendedBackendaiClient,
+  useUpdatableState,
+} from '../hooks';
+import { useCurrentKeyPairResourcePolicyLazyLoadQuery } from '../hooks/hooksUsingRelay';
 import { useBAIPaginationOptionState } from '../hooks/reactPaginationQueryOptions';
 import { useCurrentProjectValue } from '../hooks/useCurrentProject';
 import { DashboardPageSessionListQuery } from './__generated__/DashboardPageSessionListQuery.graphql';
+import { DashboardPage_EndpointListQuery } from './__generated__/DashboardPage_EndpointListQuery.graphql';
+import { DashboardPage_UserInfoQuery } from './__generated__/DashboardPage_UserInfoQuery.graphql';
+import { DashboardPage_UserResourcePolicyQuery } from './__generated__/DashboardPage_UserResourcePolicyQuery.graphql';
 import { QuestionCircleOutlined, SyncOutlined } from '@ant-design/icons';
 import {
   Button,
@@ -30,7 +38,7 @@ import { ColumnType, TableRowSelection } from 'antd/lib/table/interface';
 import graphql from 'babel-plugin-relay/macro';
 import dayjs from 'dayjs';
 import _ from 'lodash';
-import React, { useTransition } from 'react';
+import React, { useDeferredValue, useTransition } from 'react';
 import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useLazyLoadQuery } from 'react-relay';
@@ -55,7 +63,7 @@ export const statusTagColor = {
 const DashboardPage: React.FC<DashboardPageProps> = (props) => {
   const { token } = theme.useToken();
   const { t } = useTranslation();
-
+  const baiClient = useSuspendedBackendaiClient();
   const [
     sessionFetchKey,
     // setSessionFetchKey
@@ -69,6 +77,41 @@ const DashboardPage: React.FC<DashboardPageProps> = (props) => {
     pageSize: 10,
   });
   const { id: projectId } = useCurrentProjectValue();
+  const [servicesFetchKey, updateServicesFetchKey] =
+    useUpdatableState('initial-fetch');
+
+  const [{ keypair, keypairResourcePolicy }] =
+    useCurrentKeyPairResourcePolicyLazyLoadQuery();
+
+  const { user } = useLazyLoadQuery<DashboardPage_UserInfoQuery>(
+    graphql`
+      query DashboardPage_UserInfoQuery($domain_name: String, $email: String) {
+        user(domain_name: $domain_name, email: $email) {
+          id
+          # https://github.com/lablup/backend.ai/pull/1354
+          resource_policy @since(version: "23.09.0")
+        }
+      }
+    `,
+    {
+      domain_name: useCurrentDomainValue(),
+      email: baiClient?.email,
+    },
+  );
+
+  const { user_resource_policy } =
+    useLazyLoadQuery<DashboardPage_UserResourcePolicyQuery>(
+      graphql`
+        query DashboardPage_UserResourcePolicyQuery($user_RP_name: String) {
+          user_resource_policy(name: $user_RP_name) @since(version: "23.09.6") {
+            max_session_count_per_model_session
+          }
+        }
+      `,
+      {
+        user_RP_name: user?.resource_policy,
+      },
+    );
 
   // TODO: refactor with useControllableState
   const [selectedRowKeys, setSelectedRowKeys] = useState<Array<React.Key>>([]);
@@ -80,7 +123,13 @@ const DashboardPage: React.FC<DashboardPageProps> = (props) => {
     onChange: onSelectChange,
   };
   const [order, setOrder] = useState<string>();
-
+  const [paginationState, setPaginationState] = useState<{
+    current: number;
+    pageSize: number;
+  }>({
+    current: 1,
+    pageSize: 10,
+  });
   const { compute_session_list } =
     useLazyLoadQuery<DashboardPageSessionListQuery>(
       graphql`
@@ -104,6 +153,10 @@ const DashboardPage: React.FC<DashboardPageProps> = (props) => {
               session_id
               name
               created_at
+              containers {
+                live_stat
+                last_stat
+              }
               terminated_at
               status
               occupied_slots
@@ -128,6 +181,37 @@ const DashboardPage: React.FC<DashboardPageProps> = (props) => {
       },
     );
 
+  const { endpoint_list: modelServiceList } =
+    useLazyLoadQuery<DashboardPage_EndpointListQuery>(
+      graphql`
+        query DashboardPage_EndpointListQuery(
+          $offset: Int!
+          $projectID: UUID
+          $limit: Int!
+          $filter: String
+        ) {
+          endpoint_list(
+            offset: $offset
+            limit: $limit
+            project: $projectID
+            filter: $filter
+          ) {
+            total_count
+          }
+        }
+      `,
+      {
+        offset: baiPaginationOption.offset,
+        limit: 10,
+        projectID: projectId,
+        filter: null,
+      },
+      {
+        fetchPolicy: 'network-only',
+        fetchKey: servicesFetchKey,
+      },
+    );
+
   const columns = filterEmptyItem<ColumnType<any>>([
     {
       title: '#',
@@ -165,29 +249,119 @@ const DashboardPage: React.FC<DashboardPageProps> = (props) => {
     },
     {
       title: 'Utils.',
-      render: () => (
-        <Flex direction="column" justify="start" gap={4}>
-          <Progress
-            percent={5}
-            strokeLinecap="butt"
-            size={[107, 11]}
-            strokeColor="#999"
-          />
-          <Progress
-            percent={100}
-            strokeLinecap="butt"
-            status="normal"
-            size={[107, 11]}
-            strokeColor="#999"
-          />
-          <Progress
-            percent={22}
-            strokeLinecap="butt"
-            size={[107, 11]}
-            strokeColor="#999"
-          />
-        </Flex>
-      ),
+      dataIndex: 'containers',
+      render: (value) => {
+        const aggregatedLiveStat: {
+          [key: string]: { capacity: number; current: number; ratio: number };
+        } = {
+          cpu_util: { capacity: 0, current: 0, ratio: 0 },
+          mem: { capacity: 0, current: 0, ratio: 0 },
+        };
+
+        value.forEach((container: { live_stat: any }) => {
+          const parsedLiveStat = _.isEmpty(container.live_stat)
+            ? null
+            : JSON.parse(container.live_stat);
+
+          if (parsedLiveStat) {
+            Object.keys(parsedLiveStat).forEach((statKey) => {
+              if (
+                statKey === 'cpu_util' ||
+                statKey === 'cpu_used' ||
+                statKey === 'mem' ||
+                statKey === 'io_read' ||
+                statKey === 'io_write' ||
+                statKey === 'io_scratch_size' ||
+                statKey === 'net_rx' ||
+                statKey === 'net_tx'
+              ) {
+                if (!aggregatedLiveStat[statKey]) {
+                  aggregatedLiveStat[statKey] = {
+                    capacity: 0,
+                    current: 0,
+                    ratio: 0,
+                  };
+                }
+                aggregatedLiveStat[statKey].current += parseFloat(
+                  parsedLiveStat[statKey].current,
+                );
+                aggregatedLiveStat[statKey].capacity += parseFloat(
+                  parsedLiveStat[statKey].capacity,
+                );
+                return;
+              }
+              if (statKey.includes('_util') || statKey.includes('_mem')) {
+                if (!aggregatedLiveStat[statKey]) {
+                  aggregatedLiveStat[statKey] = {
+                    capacity: 0,
+                    current: 0,
+                    ratio: 0,
+                  };
+                }
+                aggregatedLiveStat[statKey].current += parseFloat(
+                  parsedLiveStat[statKey].current,
+                );
+                aggregatedLiveStat[statKey].capacity += parseFloat(
+                  parsedLiveStat[statKey].capacity,
+                );
+              }
+            });
+          }
+        });
+
+        // Calculate utilization ratios
+        if (aggregatedLiveStat.cpu_util) {
+          aggregatedLiveStat.cpu_util.ratio =
+            aggregatedLiveStat.cpu_util.current /
+              aggregatedLiveStat.cpu_util.capacity || 0;
+        }
+        if (aggregatedLiveStat.mem) {
+          aggregatedLiveStat.mem.ratio =
+            aggregatedLiveStat.mem.current / aggregatedLiveStat.mem.capacity ||
+            0;
+        }
+
+        Object.keys(aggregatedLiveStat).forEach((statKey) => {
+          if (statKey === 'cpu_util' || statKey === 'mem') return;
+          if (
+            statKey.indexOf('_util') !== -1 &&
+            aggregatedLiveStat[statKey].capacity > 0
+          ) {
+            aggregatedLiveStat[statKey].ratio =
+              aggregatedLiveStat[statKey].current / 100 || 0;
+          }
+          if (
+            statKey.indexOf('_mem') !== -1 &&
+            aggregatedLiveStat[statKey].capacity > 0
+          ) {
+            aggregatedLiveStat[statKey].ratio =
+              aggregatedLiveStat[statKey].current /
+                aggregatedLiveStat[statKey].capacity || 0;
+          }
+        });
+
+        return (
+          <Flex direction="column" justify="start" gap={4}>
+            {Object.entries(
+              _.pickBy(
+                aggregatedLiveStat,
+                (_value: any, key: string) =>
+                  key === 'cpu_util' || key === 'mem' || key.includes('_util'),
+              ),
+            ).map(([key, value]) => {
+              return (
+                <Progress
+                  key={key}
+                  percent={_.round(aggregatedLiveStat[key]?.ratio, 2) || 0}
+                  strokeLinecap="butt"
+                  size={[107, 11]}
+                  strokeColor="#999"
+                />
+              );
+            })}
+          </Flex>
+        );
+      },
     },
     {
       title: t('session.launcher.AIAccelerator'),
@@ -294,12 +468,17 @@ const DashboardPage: React.FC<DashboardPageProps> = (props) => {
                         level={1}
                         style={{ margin: 0, color: token.colorLinkHover }}
                       >
-                        3
+                        {
+                          _.filter(
+                            compute_session_list?.items,
+                            (item) => item?.status !== 'TERMINATED',
+                          ).length
+                        }
                       </Typography.Title>
                       <Typography.Text
                         style={{ fontSize: 16, marginBottom: 3 }}
                       >
-                        {' / 5'}
+                        {`/ ${keypairResourcePolicy.max_concurrent_sessions}`}
                       </Typography.Text>
                     </Flex>
                   }
@@ -315,7 +494,7 @@ const DashboardPage: React.FC<DashboardPageProps> = (props) => {
                       <Typography.Text
                         style={{ fontSize: 10, color: 'rgba(0,0,0,0)' }}
                       >
-                        {'hello world'}
+                        {'blank'}
                       </Typography.Text>
                     </Flex>
                   }
@@ -325,12 +504,12 @@ const DashboardPage: React.FC<DashboardPageProps> = (props) => {
                         level={1}
                         style={{ margin: 0, color: token.colorLinkHover }}
                       >
-                        2
+                        {modelServiceList?.total_count ?? 0}
                       </Typography.Title>
                       <Typography.Text
                         style={{ fontSize: 16, marginBottom: 3 }}
                       >
-                        {' / 3'}
+                        {`/ ${user_resource_policy?.max_session_count_per_model_session}`}
                       </Typography.Text>
                     </Flex>
                   }
@@ -346,7 +525,7 @@ const DashboardPage: React.FC<DashboardPageProps> = (props) => {
                       <Typography.Text
                         style={{ fontSize: 10, color: 'rgba(0,0,0,0)' }}
                       >
-                        {'hello world'}
+                        {'blank'}
                       </Typography.Text>
                     </Flex>
                   }
@@ -356,12 +535,17 @@ const DashboardPage: React.FC<DashboardPageProps> = (props) => {
                         level={1}
                         style={{ margin: 0, color: token.colorLinkHover }}
                       >
-                        1
+                        {
+                          _.filter(
+                            compute_session_list?.items,
+                            (item) => item?.type === 'SYSTEM',
+                          ).length
+                        }
                       </Typography.Title>
                       <Typography.Text
                         style={{ fontSize: 16, marginBottom: 3 }}
                       >
-                        {' / 1'}
+                        {` / ${keypairResourcePolicy?.max_concurrent_sftp_sessions}`}
                       </Typography.Text>
                     </Flex>
                   }
@@ -386,12 +570,18 @@ const DashboardPage: React.FC<DashboardPageProps> = (props) => {
                   type="text"
                   icon={<SyncOutlined />}
                   style={{ color: 'inherit' }}
+                  onClick={() => {}}
                 />
               }
               style={{ width: 1146, height: 360 }}
             >
               <SessionListTemplate
-                dataSource={filterNonNullItems(compute_session_list?.items)}
+                dataSource={filterNonNullItems(
+                  _.filter(
+                    compute_session_list?.items,
+                    (item) => item?.status !== 'TERMINATED',
+                  ),
+                )}
                 columns={columns}
               ></SessionListTemplate>
             </BAILayoutCard>
@@ -416,23 +606,29 @@ const DashboardPage: React.FC<DashboardPageProps> = (props) => {
                         label: 'NVIDIA CUDA FGPU',
                         value: 'cuda.shares',
                       },
-                      {
-                        label: 'Rebellions ATOM',
-                        value: 'atom.device',
-                      },
+                      // {
+                      //   label: 'Rebellions ATOM',
+                      //   value: 'atom.device',
+                      // },
                     ]}
                   ></Select>
                   <Button
                     type="text"
                     icon={<SyncOutlined />}
                     style={{ color: 'inherit' }}
+                    onClick={() => {}}
                   />
                 </Flex>
               }
               style={{ width: 1146, height: 360 }}
             >
               <SessionListTemplate
-                dataSource={filterNonNullItems(compute_session_list?.items)}
+                dataSource={filterNonNullItems(
+                  _.filter(
+                    compute_session_list?.items,
+                    (item) => item?.status !== 'TERMINATED',
+                  ),
+                )}
                 columns={columns}
               ></SessionListTemplate>
             </BAILayoutCard>