Refactor overview page to schema page

Signed-off-by: ryjiang <[email protected]>
zilliztech · Nov 19, 2024 · 8f49692 · 8f49692
1 parent a6511e3
commit 8f49692
Show file tree

Hide file tree

Showing 18 changed files with 292 additions and 282 deletions.
diff --git a/client/src/context/Data.tsx b/client/src/context/Data.tsx
@@ -18,7 +18,7 @@ import {
 import {
   IndexCreateParam,
   IndexManageParam,
-} from '@/pages/databases/collections/overview/Types';
+} from '@/pages/databases/collections/schema/Types';
 import { DataContextType } from './Types';
 import {
   CollectionObject,

diff --git a/client/src/context/Types.ts b/client/src/context/Types.ts
@@ -9,7 +9,7 @@ import { NavInfo } from '@/router/Types';
 import {
   IndexCreateParam,
   IndexManageParam,
-} from '@/pages/databases/collections/overview/Types';
+} from '@/pages/databases/collections/schema/Types';
 import { AuthObject } from '@server/types';
 
 export type RootContextType = {

diff --git a/client/src/http/Collection.service.ts b/client/src/http/Collection.service.ts
@@ -15,7 +15,7 @@ import { ManageRequestMethods } from '../types/Common';
 import {
   IndexCreateParam,
   IndexManageParam,
-} from '@/pages/databases/collections/overview/Types';
+} from '@/pages/databases/collections/schema/Types';
 
 export class CollectionService extends BaseModel {
   static getCollections(data?: {

diff --git a/client/src/i18n/cn/collection.ts b/client/src/i18n/cn/collection.ts
@@ -65,6 +65,7 @@ const collectionTrans = {
   loadContent:
     'Milvus中的所有搜索和查询操作都在内存中执行，只有加载的Collection可以被搜索。',
   loadConfirmLabel: '加载',
+  replica: '副本',
   replicaNum: '副本数量',
   replicaDes: `有了内存副本，Milvus可以在多个查询节点上加载相同的段。副本数量不能超过查询节点数量。`,
   enableRepica: `启用内存副本`,

diff --git a/client/src/i18n/en/collection.ts b/client/src/i18n/en/collection.ts
@@ -67,6 +67,7 @@ const collectionTrans = {
   loadContent:
     'All search and query operations within Milvus are executed in memory, only loaded collection can be searched.',
   loadConfirmLabel: 'Load',
+  replica: 'Replica',
   replicaNum: 'Replica number',
   replicaDes: `With in-memory replicas, Milvus can load the same segment on multiple query nodes. The replica number can not exceed query node count.`,
   enableRepica: `Enable in-memory replica`,
@@ -134,7 +135,7 @@ const collectionTrans = {
   clickToLoad: 'Click to load the collection.',
   clickToRelease: 'Click to release the collection.',
   clickToSearch: 'Click to execute vector search.',
-  clickToCreateVectorIndex: 'Click to create an vector index.',
+  clickToCreateVectorIndex: 'Click to create the vector index.',
   collectionIsLoading: 'The collection is loading...',
 };
 

diff --git a/client/src/pages/databases/Databases.tsx b/client/src/pages/databases/Databases.tsx
@@ -8,7 +8,7 @@ import RouteTabList from '@/components/customTabList/RouteTabList';
 import DatabaseTree from '@/pages/databases/tree';
 import { ITab } from '@/components/customTabList/Types';
 import Partitions from './collections/partitions/Partitions';
-import Overview from './collections/overview/Overview';
+import Schema from './collections/schema/Schema';
 import Data from './collections/data/CollectionData';
 import Segments from './collections/segments/Segments';
 import Properties from './collections/properties/Properties';
@@ -391,9 +391,9 @@ const CollectionTabs = (props: {
   // collection tabs
   const collectionTabs: ITab[] = [
     {
-      label: collectionTrans('overviewTab'),
-      component: <Overview />,
-      path: `overview`,
+      label: collectionTrans('schemaTab'),
+      component: <Schema />,
+      path: `schema`,
     },
     {
       label: collectionTrans('searchTab'),

diff --git a/client/src/pages/databases/collections/StatusAction.tsx b/client/src/pages/databases/collections/StatusAction.tsx
@@ -12,22 +12,21 @@ import LoadCollectionDialog from '@/pages/dialogs/LoadCollectionDialog';
 import ReleaseCollectionDialog from '@/pages/dialogs/ReleaseCollectionDialog';
 import { makeStyles } from '@mui/styles';
 
+// Define styles using MUI's makeStyles
 const useStyles = makeStyles((theme: Theme) => ({
   root: {
     display: 'flex',
     alignItems: 'center',
   },
   chip: {
     border: 'none',
-    background: `rgba(0, 0, 0, 0.04)`,
     marginRight: theme.spacing(0.5),
     paddingLeft: theme.spacing(0.5),
   },
   circle: {
-    width: '8px',
-    height: '8px',
+    width: 8,
+    height: 8,
     borderRadius: '50%',
-    backgroundColor: theme.palette.primary.main,
   },
   loaded: {
     border: `1px solid ${theme.palette.primary.main}`,
@@ -41,68 +40,53 @@ const useStyles = makeStyles((theme: Theme) => ({
     border: `1px solid ${theme.palette.text.disabled}`,
     backgroundColor: '#fff',
   },
-
   loading: {
-    marginRight: '10px',
-  },
-  icon: {
-    marginTop: theme.spacing(0.5),
-  },
-  flash: {
-    animation: '$bgColorChange 1.5s infinite',
+    marginRight: theme.spacing(1.25),
   },
   extraBtn: {
     height: 24,
   },
-
-  '@keyframes bgColorChange': {
-    '0%': {
-      backgroundColor: (props: any) => props.color,
-    },
-    '50%': {
-      backgroundColor: 'transparent',
-    },
-    '100%': {
-      backgroundColor: (props: any) => props.color,
-    },
-  },
 }));
 
 const StatusAction: FC<StatusActionType> = props => {
+  const {
+    status,
+    percentage = 0,
+    collection,
+    action = () => {},
+    showExtraAction,
+    createIndexElement,
+  } = props;
+
+  // Theme and styles
   const theme = useTheme();
-  const { setDialog } = useContext(rootContext);
+  const classes = useStyles();
 
-  const classes = useStyles({ color: theme.palette.primary.main });
-  const ReleaseIcon = Icons.release;
-  const LoadIcon = Icons.load;
+  // Context
+  const { setDialog } = useContext(rootContext);
 
-  const { status, percentage = 0, collection, action = () => {} } = props;
+  // Translations
   const { t: commonTrans } = useTranslation();
   const { t: collectionTrans } = useTranslation('collection');
   const { t: btnTrans } = useTranslation('btn');
 
-  const statusTrans = commonTrans('status');
-  const {
-    label,
-    tooltip,
-    icon = <span></span>,
-    deleteIcon = <ReleaseIcon />,
-  } = useMemo(() => {
+  // Determine status-related labels and icons
+  const { label, tooltip, icon, deleteIcon } = useMemo(() => {
+    const statusTrans = commonTrans('status');
     switch (status) {
       case LOADING_STATE.UNLOADED:
         return {
           label: statusTrans.unloaded,
-          icon: <div className={`${classes.circle} ${classes.unloaded}`}></div>,
           tooltip: collectionTrans('clickToLoad'),
-          deleteIcon: <LoadIcon />,
+          icon: <div className={`${classes.circle} ${classes.unloaded}`}></div>,
+          deleteIcon: <Icons.load />,
         };
-
       case LOADING_STATE.LOADED:
         return {
           label: statusTrans.loaded,
-          icon: <div className={`${classes.circle} ${classes.loaded}`}></div>,
           tooltip: collectionTrans('clickToRelease'),
-          deleteIcon: <ReleaseIcon />,
+          icon: <div className={`${classes.circle} ${classes.loaded}`}></div>,
+          deleteIcon: <Icons.release />,
         };
       case LOADING_STATE.LOADING:
         return {
@@ -114,78 +98,75 @@ const StatusAction: FC<StatusActionType> = props => {
               className={classes.loading}
             />
           ),
+          deleteIcon: null, // No delete icon during loading
         };
-
       default:
         return {
           label: status,
-          icon: <span></span>,
           tooltip: '',
-          deleteIcon: <ReleaseIcon />,
+          icon: <span></span>,
+          deleteIcon: <Icons.release />,
         };
     }
-  }, [status, statusTrans, percentage]);
+  }, [status, percentage, classes, commonTrans, collectionTrans]);
 
+  // Handle missing vector index
   const noIndex = collection.schema && !collection.schema.hasVectorIndex;
-  const noVectorIndexTooltip = collectionTrans('noVectorIndexTooltip');
   const noIndexIcon = (
     <div className={`${classes.circle} ${classes.noIndex}`}></div>
   );
+  const noIndexTooltip = collectionTrans('noVectorIndexTooltip');
+
+  // Handle chip click
+  const handleChipClick = (e: MouseEvent<HTMLDivElement>) => {
+    e.stopPropagation();
+    setDialog({
+      open: true,
+      type: 'custom',
+      params: {
+        component:
+          status === LOADING_STATE.UNLOADED ? (
+            <LoadCollectionDialog collection={collection} />
+          ) : (
+            <ReleaseCollectionDialog collection={collection} />
+          ),
+      },
+    });
+  };
 
   return (
     <div className={classes.root}>
-      <CustomToolTip
-        title={noIndex ? noVectorIndexTooltip : tooltip}
-        placement={'top'}
-      >
+      <CustomToolTip title={noIndex ? noIndexTooltip : tooltip} placement="top">
         <Chip
           className={classes.chip}
-          variant="outlined"
           label={<Typography>{label}</Typography>}
-          onDelete={() => action()}
-          onClick={(e: MouseEvent<HTMLDivElement>) => {
-            e.stopPropagation();
-            setDialog({
-              open: true,
-              type: 'custom',
-              params: {
-                component:
-                  collection.status === LOADING_STATE.UNLOADED ? (
-                    <LoadCollectionDialog collection={collection} />
-                  ) : (
-                    <ReleaseCollectionDialog collection={collection} />
-                  ),
-              },
-            });
-          }}
+          onClick={handleChipClick}
           disabled={noIndex}
-          deleteIcon={deleteIcon}
+          deleteIcon={<Icons.release />}
           size="small"
           icon={noIndex ? noIndexIcon : icon}
         />
       </CustomToolTip>
 
-      {props.showExtraAction && collection.schema && (
+      {showExtraAction && collection.schema && (
         <>
           {status === LOADING_STATE.LOADED && (
             <CustomButton
               startIcon={<Icons.navSearch />}
               className={classes.extraBtn}
               tooltip={collectionTrans('clickToSearch')}
               onClick={() => {
-                const currentHash = window.location.hash;
-                const newHash = currentHash.replace('overview', 'search');
-
+                const newHash = window.location.hash.replace(
+                  'schema',
+                  'search'
+                );
                 window.location.hash = newHash;
               }}
             >
               {btnTrans('vectorSearch')}
             </CustomButton>
           )}
-
-          {collection.schema &&
-            !collection.schema.hasVectorIndex &&
-            props.createIndexElement}
+          {!collection.schema.hasVectorIndex && createIndexElement}
         </>
       )}
     </div>

diff --git a/...bases/collections/overview/CreateForm.tsx → ...tabases/collections/schema/CreateForm.tsx b/...bases/collections/overview/CreateForm.tsx → ...tabases/collections/schema/CreateForm.tsx
diff --git a/...ollections/overview/CreateIndexDialog.tsx → .../collections/schema/CreateIndexDialog.tsx b/...ollections/overview/CreateIndexDialog.tsx → .../collections/schema/CreateIndexDialog.tsx
diff --git a/...collections/overview/IndexTypeElement.tsx → ...s/collections/schema/IndexTypeElement.tsx b/...collections/overview/IndexTypeElement.tsx → ...s/collections/schema/IndexTypeElement.tsx
@@ -45,7 +45,6 @@ const useStyles = makeStyles((theme: Theme) => ({
     },
   },
   chip: {
-    background: `rgba(0, 0, 0, 0.04)`,
     padding: theme.spacing(0.5),
 
     '& .icon': {
-Original file line number
+Diff line change
@@ Expand Up / @@ -45,7 +45,6 @@ const useStyles = makeStyles((theme: Theme) => ({ @@
         },
       },
       chip: {
-        background: `rgba(0, 0, 0, 0.04)`,
         padding: theme.spacing(0.5),
         '& .icon': {
@@ Expand Down @@