feat(FR-581): Add NEO vFolder list page

lablup · Feb 24, 2025 · c815a5a · c815a5a
1 parent 6abcf54
commit c815a5a
Show file tree

Hide file tree

Showing 10 changed files with 1,053 additions and 6 deletions.
diff --git a/react/src/App.tsx b/react/src/App.tsx
@@ -11,7 +11,7 @@ import WebUINavigate from './components/WebUINavigate';
 import { useBAISettingUserState } from './hooks/useBAISetting';
 import Page401 from './pages/Page401';
 import Page404 from './pages/Page404';
-import VFolderListPage from './pages/VFolderListPage';
+import VFolderNodeListPage from './pages/VFolderNodeListPage';
 import { Skeleton, theme } from 'antd';
 import React, { Suspense } from 'react';
 import { FC } from 'react';
@@ -318,7 +318,8 @@ const router = createBrowserRouter([
         handle: { labelKey: 'webui.menu.Data&Storage' },
         element: (
           <BAIErrorBoundary>
-            <VFolderListPage />
+            <VFolderNodeListPage />
+            {/* <VFolderListPage /> */}
           </BAIErrorBoundary>
         ),
       },

diff --git a/react/src/components/ActionItemContent.tsx b/react/src/components/ActionItemContent.tsx
@@ -0,0 +1,121 @@
+import Flex from './Flex';
+// import useResizeObserver from '@react-hook/resize-observer';
+import { Button, Divider, Typography, theme } from 'antd';
+import { ReactNode, useRef } from 'react';
+
+interface StartItemContentProps {
+  title: string | ReactNode;
+  description?: string;
+  icon?: React.ReactNode;
+  buttonText: string;
+  onClick?: () => void;
+  themeColor?: string;
+  itemRole?: 'user' | 'admin';
+  type?: 'simple' | 'default';
+}
+
+const ActionItemContent: React.FC<StartItemContentProps> = ({
+  title,
+  description,
+  icon,
+  buttonText,
+  onClick,
+  themeColor,
+  type = 'default',
+  itemRole = 'user',
+}) => {
+  const { token } = theme.useToken();
+  const containerRef = useRef<HTMLDivElement>(null);
+  const colorPrimaryWithAlpha = `rgba(${parseInt(token.colorPrimary.slice(1, 3), 16)}, ${parseInt(token.colorPrimary.slice(3, 5), 16)}, ${parseInt(token.colorPrimary.slice(5, 7), 16)}, 0.15)`;
+
+  return (
+    <Flex
+      ref={containerRef}
+      align="center"
+      justify="between"
+      direction="column"
+      style={{
+        height: '100%',
+        textAlign: 'center',
+        overflowY: 'auto',
+        padding: token.marginMD,
+      }}
+    >
+      <Flex direction="column" gap={type === 'default' ? 'sm' : 'xxs'}>
+        <Flex
+          align="center"
+          justify="center"
+          style={{
+            borderRadius: 25,
+            width: 50,
+            height: 50,
+            fontSize: token.fontSizeHeading3,
+            color: token.colorPrimary,
+            backgroundColor: colorPrimaryWithAlpha,
+          }}
+        >
+          {icon}
+        </Flex>
+        <Flex style={{ minHeight: 60 }}>
+          {typeof title === 'string' ? (
+            <Typography.Text
+              strong
+              style={{
+                fontSize: token.fontSizeHeading4,
+                color: themeColor
+                  ? themeColor
+                  : itemRole === 'user'
+                    ? token.colorPrimary
+                    : token.colorInfo,
+              }}
+            >
+              {title}
+            </Typography.Text>
+          ) : (
+            title
+          )}
+        </Flex>
+        <Typography.Text
+          type="secondary"
+          style={{ fontSize: token.fontSizeSM }}
+        >
+          {description}
+        </Typography.Text>
+      </Flex>
+      <Flex
+        direction="column"
+        style={{ width: '100%', position: 'sticky', bottom: 0 }}
+      >
+        {description && (
+          <Divider style={{ margin: token.marginSM, borderWidth: 2 }} />
+        )}
+        <Flex style={{ width: '100%', padding: `0 ${token.paddingMD}px` }}>
+          <Button
+            type="primary"
+            style={{
+              width: '100%',
+              height: 40,
+              backgroundColor: themeColor
+                ? themeColor
+                : itemRole === 'user'
+                  ? token.colorPrimary
+                  : token.colorInfo,
+            }}
+            onClick={onClick}
+          >
+            <Typography.Text
+              style={{
+                fontSize: token.fontSizeHeading5,
+                color: token.colorWhite,
+              }}
+            >
+              {buttonText}
+            </Typography.Text>
+          </Button>
+        </Flex>
+      </Flex>
+    </Flex>
+  );
+};
+
+export default ActionItemContent;
diff --git a/react/src/components/BAITable.tsx b/react/src/components/BAITable.tsx
@@ -99,7 +99,7 @@ const ResizableTitle = (
   );
 };
 
-interface BAITableProps<RecordType extends object = any>
+export interface BAITableProps<RecordType extends object = any>
   extends TableProps<RecordType> {
   resizable?: boolean;
   neoStyle?: boolean;

diff --git a/react/src/components/BAITag.tsx b/react/src/components/BAITag.tsx
@@ -0,0 +1,29 @@
+import { ConfigProvider, Tag } from 'antd';
+import { TagProps } from 'antd/lib/tag';
+import React from 'react';
+
+interface BAITagProps extends TagProps {}
+
+const BAITag: React.FC<BAITagProps> = ({ ...tagProps }) => {
+  return (
+    <ConfigProvider
+      theme={{
+        components: {
+          Tag: {
+            borderRadiusSM: 11,
+            colorText: '#999999',
+            defaultBg: 'transparent',
+            colorInfoBg: 'transparent',
+            colorWarningBg: 'transparent',
+            colorErrorBg: 'transparent',
+            colorSuccessBg: 'transparent',
+          },
+        },
+      }}
+    >
+      <Tag {...tagProps} />
+    </ConfigProvider>
+  );
+};
+
+export default BAITag;