refactor: draft for dashboard page

react/src/App.tsx

@@ -11,7 +11,7 @@ import { useSuspendedBackendaiClient } from './hooks';
 import { useBAISettingUserState } from './hooks/useBAISetting';
 import Page401 from './pages/Page401';
 import Page404 from './pages/Page404';
-import VFolderListPage from './pages/VFolderListPage';
+// import VFolderListPage from './pages/VFolderListPage';
 import { Skeleton, theme } from 'antd';
 import React, { Suspense } from 'react';
 import { FC } from 'react';
@@ -64,6 +64,10 @@ const AdminDashboardPage = React.lazy(
 );
 const DashboardPage = React.lazy(() => import('./pages/DashboardPage'));
 
+const NeoVFolderListPage = React.lazy(
+  () => import('./pages/NeoVFolderListPage'),
+);
+
 const RedirectToStart = () => {
   useSuspendedBackendaiClient();
   const pathName = '/start';
@@ -250,7 +254,8 @@ const router = createBrowserRouter([
         handle: { labelKey: 'webui.menu.Data&Storage' },
         element: (
           <BAIErrorBoundary>
-            <VFolderListPage />
+            {/* <VFolderListPage /> */}
+            <NeoVFolderListPage />
           </BAIErrorBoundary>
         ),
       },

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

react/src/components/BAIStartSimpleCard.tsx

@@ -79,6 +79,7 @@ const BAIStartSimpleCard: React.FC<BAIStartSimpleCardProps> = ({
                 fontSize: token.fontSizeSM,
                 color: '#333333',
                 textAlign: 'center',
+                whiteSpace: 'pre-line',
               }}
             >
               {title}

react/src/components/MainLayout/WebUISider.tsx

@@ -79,7 +79,6 @@ const WebUISider: React.FC<WebUISiderProps> = (props) => {
     baiClient?.supports('user-committed-image') ?? false;
 
   const menuInPreparation = [
-    'data',
     'my-environment',
     'examples',
     'serving',
@@ -116,15 +115,7 @@ const WebUISider: React.FC<WebUISiderProps> = (props) => {
       type: 'group',
       children: [
         {
-          label: (
-            <Tooltip
-              placement="right"
-              title="Work In Progress..."
-              color={'#333333'}
-            >
-              {t('webui.menu.Data&Storage')}
-            </Tooltip>
-          ),
+          label: t('webui.menu.Data&Storage'),
           icon: <CloudUploadOutlined style={{ color: token.colorPrimaryBg }} />,
           key: 'data',
         },

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,

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
           }
         }
       `,

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') {

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,
     },
   ];