reorg files

Signed-off-by: ruiyi.jiang <ruiyi.jiang@zilliz.com>

client/src/i18n/cn/home.ts

@@ -1,5 +1,24 @@
-const homeTrans = {
-  welcome: '欢迎来到 Milvus!',
+const overviewTrans = {
+  load: '已加载的Collection',
+  all: '所有Collection',
+  data: '大约的Entity数量',
+  rows: '{{number}}行',
+  loading: '正在加载Collection',
+  sysInfo: '系统信息',
+  database: '数据库',
+  milvusVersion: 'Milvus版本',
+  upTime: '运行时间',
+  deployMode: '部署模式',
+  databases: '数据库',
+  users: '用户',
+  roles: '角色',
+  days: '天',
+  hours: '小时',
+  minutes: '分钟',
+  dataNodes: '数据节点',
+  queryNodes: '查询节点',
+  indexNodes: '索引节点',
+  createdTime: '创建时间',
 };
 
-export default homeTrans;
+export default overviewTrans;

client/src/i18n/cn/overview.ts

@@ -1,24 +0,0 @@
-const overviewTrans = {
-  load: '已加载的Collection',
-  all: '所有Collection',
-  data: '大约的Entity数量',
-  rows: '{{number}}行',
-  loading: '正在加载Collection',
-  sysInfo: '系统信息',
-  database: '数据库',
-  milvusVersion: 'Milvus版本',
-  upTime: '运行时间',
-  deployMode: '部署模式',
-  databases: '数据库',
-  users: '用户',
-  roles: '角色',
-  days: '天',
-  hours: '小时',
-  minutes: '分钟',
-  dataNodes: '数据节点',
-  queryNodes: '查询节点',
-  indexNodes: '索引节点',
-  createdTime: '创建时间',
-};
-
-export default overviewTrans;

client/src/i18n/en/home.ts

@@ -1,5 +1,24 @@
-const homeTrans = {
-  welcome: 'Welcome to Milvus!',
+const overviewTrans = {
+  load: 'Loaded Collections',
+  all: 'Collections',
+  data: 'Approx Entities',
+  rows: '{{number}}',
+  loading: 'Loading Collections',
+  sysInfo: 'System Info',
+  database: 'Database',
+  milvusVersion: 'Milvus Version',
+  upTime: 'Up Time',
+  deployMode: 'Deploy Mode',
+  databases: 'Databases',
+  users: 'Users',
+  roles: 'Roles',
+  days: 'days',
+  hours: 'hours',
+  minutes: 'minutes',
+  dataNodes: 'Data Nodes',
+  queryNodes: 'Query Nodes',
+  indexNodes: 'Index Nodes',
+  createdTime: 'Created Time',
 };
 
-export default homeTrans;
+export default overviewTrans;

client/src/i18n/en/overview.ts

@@ -1,24 +0,0 @@
-const overviewTrans = {
-  load: 'Loaded Collections',
-  all: 'Collections',
-  data: 'Approx Entities',
-  rows: '{{number}}',
-  loading: 'Loading Collections',
-  sysInfo: 'System Info',
-  database: 'Database',
-  milvusVersion: 'Milvus Version',
-  upTime: 'Up Time',
-  deployMode: 'Deploy Mode',
-  databases: 'Databases',
-  users: 'Users',
-  roles: 'Roles',
-  days: 'days',
-  hours: 'hours',
-  minutes: 'minutes',
-  dataNodes: 'Data Nodes',
-  queryNodes: 'Query Nodes',
-  indexNodes: 'Index Nodes',
-  createdTime: 'Created Time',
-};
-
-export default overviewTrans;

client/src/i18n/index.ts

@@ -10,8 +10,8 @@ import warningCn from './cn/warning';
 import warningEn from './en/warning';
 import navCn from './cn/nav';
 import navEn from './en/nav';
-import overviewCn from './cn/overview';
-import overviewEn from './en/overview';
+import homeCn from './cn/home';
+import homeEn from './en/home';
 import collectionCn from './cn/collection';
 import collectionEn from './en/collection';
 import dialogCn from './cn/dialog';
@@ -41,7 +41,7 @@ export const resources = {
     btn: buttonCn,
     warning: warningCn,
     nav: navCn,
-    overview: overviewCn,
+    home: homeCn,
     collection: collectionCn,
     dialog: dialogCn,
     partition: partitionCn,
@@ -59,7 +59,7 @@ export const resources = {
     btn: buttonEn,
     warning: warningEn,
     nav: navEn,
-    overview: overviewEn,
+    home: homeEn,
     collection: collectionEn,
     dialog: dialogEn,
     partition: partitionEn,

client/src/pages/databases/Databases.tsx

@@ -85,7 +85,7 @@ const Databases = () => {
     {
       label: collectionTrans('schemaTab'),
       component: <Overview />,
-      path: `info`,
+      path: `overview`,
     },
     {
       label: collectionTrans('dataTab'),

client/src/pages/databases/collections/Aliases.tsx

@@ -3,7 +3,7 @@ import { Chip, IconButton, makeStyles, Theme } from '@material-ui/core';
 import { useTranslation } from 'react-i18next';
 import { rootContext, dataContext } from '@/context';
 import icons from '@/components/icons/Icons';
-import CreateAliasDialog from '../../dialogs/CreateAliasDialog';
+import CreateAliasDialog from '@/pages/dialogs/CreateAliasDialog';
 import DeleteTemplate from '@/components/customDialog/DeleteDialogTemplate';
 import { CollectionObject } from '@server/types';
 

client/src/pages/databases/collections/Collections.tsx

@@ -13,15 +13,15 @@ import icons from '@/components/icons/Icons';
 import EmptyCard from '@/components/cards/EmptyCard';
 import StatusAction from '@/pages/databases/collections/StatusAction';
 import CustomToolTip from '@/components/customToolTip/CustomToolTip';
-import CreateCollectionDialog from '../../dialogs/CreateCollectionDialog';
-import LoadCollectionDialog from '../../dialogs/LoadCollectionDialog';
-import ReleaseCollectionDialog from '../../dialogs/ReleaseCollectionDialog';
-import DropCollectionDialog from '../../dialogs/DropCollectionDialog';
-import RenameCollectionDialog from '../../dialogs/RenameCollectionDialog';
-import DuplicateCollectionDialog from '../../dialogs/DuplicateCollectionDialog';
-import InsertDialog from '../../dialogs/insert/Dialog';
-import ImportSampleDialog from '../../dialogs/ImportSampleDialog';
-import { getLabelDisplayedRows } from '../../search/Utils';
+import CreateCollectionDialog from '@/pages/dialogs/CreateCollectionDialog';
+import LoadCollectionDialog from '@/pages/dialogs/LoadCollectionDialog';
+import ReleaseCollectionDialog from '@/pages/dialogs/ReleaseCollectionDialog';
+import DropCollectionDialog from '@/pages/dialogs/DropCollectionDialog';
+import RenameCollectionDialog from '@/pages/dialogs/RenameCollectionDialog';
+import DuplicateCollectionDialog from '@/pages/dialogs/DuplicateCollectionDialog';
+import InsertDialog from '@/pages/dialogs/insert/Dialog';
+import ImportSampleDialog from '@/pages/dialogs/ImportSampleDialog';
+import { getLabelDisplayedRows } from '@/pages/search/Utils';
 import { LOADING_STATE } from '@/consts';
 import { formatNumber } from '@/utils';
 import Aliases from './Aliases';
@@ -343,7 +343,7 @@ const Collections = () => {
       formatter({ collection_name }) {
         return (
           <Link
-            to={`/databases/${database}/${collection_name}/info`}
+            to={`/databases/${database}/${collection_name}/overview`}
             className={classes.link}
             title={collection_name}
           >

client/src/pages/databases/collections/data/Data.tsx

@@ -13,8 +13,8 @@ import { ToolBarConfig } from '@/components/grid/Types';
 import Filter from '@/components/advancedSearch';
 import DeleteTemplate from '@/components/customDialog/DeleteDialogTemplate';
 import CustomToolBar from '@/components/grid/ToolBar';
-import InsertDialog from '../../../dialogs/insert/Dialog';
-import { getLabelDisplayedRows } from '../../../search/Utils';
+import InsertDialog from '@/pages/dialogs/insert/Dialog';
+import { getLabelDisplayedRows } from '@/pages/search/Utils';
 import { getQueryStyles } from './Styles';
 import {
   DYNAMIC_FIELD,
@@ -23,8 +23,8 @@ import {
   ConsistencyLevelEnum,
 } from '@/consts';
 import CustomSelector from '@/components/customSelector/CustomSelector';
-import EmptyDataDialog from '../../../dialogs/EmptyDataDialog';
-import ImportSampleDialog from '../../../dialogs/ImportSampleDialog';
+import EmptyDataDialog from '@/pages/dialogs/EmptyDataDialog';
+import ImportSampleDialog from '@/pages/dialogs/ImportSampleDialog';
 import { detectItemType } from '@/utils';
 
 const Data = () => {

client/src/pages/databases/collections/overview/Overview.tsx

@@ -14,7 +14,7 @@ import icons from '@/components/icons/Icons';
 import { formatFieldType } from '@/utils';
 import { rootContext, dataContext } from '@/context';
 import IndexTypeElement from './IndexTypeElement';
-import { getLabelDisplayedRows } from '../../../search/Utils';
+import { getLabelDisplayedRows } from '@/pages/search/Utils';
 import { LOADING_STATE } from '@/consts';
 import LoadCollectionDialog from '@/pages/dialogs/LoadCollectionDialog';
 import ReleaseCollectionDialog from '@/pages/dialogs/ReleaseCollectionDialog';

client/src/pages/databases/collections/partitions/Partitions.tsx

@@ -10,12 +10,12 @@ import icons from '@/components/icons/Icons';
 import CustomToolTip from '@/components/customToolTip/CustomToolTip';
 import { rootContext } from '@/context';
 import { CollectionService, PartitionService } from '@/http';
-import InsertContainer from '../../../dialogs/insert/Dialog';
-import CreatePartitionDialog from '../../../dialogs/CreatePartitionDialog';
-import DropPartitionDialog from '../../../dialogs/DropPartitionDialog';
+import InsertContainer from '@/pages/dialogs/insert/Dialog';
+import CreatePartitionDialog from '@/pages/dialogs/CreatePartitionDialog';
+import DropPartitionDialog from '@/pages/dialogs/DropPartitionDialog';
 import { PartitionData } from '@server/types';
 import { formatNumber } from '@/utils';
-import { getLabelDisplayedRows } from '../../../search/Utils';
+import { getLabelDisplayedRows } from '@/pages/search/Utils';
 
 const useStyles = makeStyles((theme: Theme) => ({
   wrapper: {

client/src/pages/databases/tree/index.tsx

@@ -207,7 +207,7 @@ const DatabaseTree: React.FC<DatabaseToolProps> = props => {
       node.type === 'db'
         ? `/databases/${database}/${params.databasePage || 'collections'}`
         : `/databases/${database}/${node.name}/${
-            params.collectionPage || 'info'
+            params.collectionPage || 'overview'
           }`
     );
   };

client/src/pages/dialogs/insert/Status.tsx

@@ -7,8 +7,8 @@ import {
 } from '@material-ui/core';
 import { useTranslation } from 'react-i18next';
 import { InsertStatusEnum, InsertStatusProps } from './Types';
-import successPath from '../../../assets/imgs/insert/success.png';
-import failPath from '../../../assets/imgs/insert/fail.png';
+import successPath from '@/assets/imgs/insert/success.png';
+import failPath from '@/assets/imgs/insert/fail.png';
 
 const getStyles = makeStyles((theme: Theme) => ({
   wrapper: {

client/src/pages/home/Overview.tsx → client/src/pages/home/Home.tsx

@@ -30,8 +30,8 @@ const useStyles = makeStyles((theme: Theme) => ({
   },
 }));
 
-const Overview = () => {
-  useNavigationHook(ALL_ROUTER_TYPES.OVERVIEW);
+const Home = () => {
+  useNavigationHook(ALL_ROUTER_TYPES.HOME);
   const {
     databases,
     database,
@@ -42,7 +42,7 @@ const Overview = () => {
   } = useContext(dataContext);
   const { data } = useContext(systemContext);
   const classes = useStyles();
-  const { t: overviewTrans } = useTranslation('overview');
+  const { t: homeTrans } = useTranslation('home');
   const { t: databaseTrans } = useTranslation('database');
 
   // calculation diff to the rootCoord create time
@@ -69,10 +69,10 @@ const Overview = () => {
       const withinOneDay = hourDiff < 24;
       duration = withinOneHour ? minDiff : withinOneDay ? hourDiff : dayDiff;
       unit = withinOneHour
-        ? overviewTrans('minutes')
+        ? homeTrans('minutes')
         : withinOneDay
-        ? overviewTrans('hours')
-        : overviewTrans('day');
+        ? homeTrans('hours')
+        : homeTrans('day');
     }
 
     return `${duration.toFixed(2)} ${unit}`;
@@ -113,7 +113,7 @@ const Overview = () => {
       {data?.systemInfo && (
         <>
           <section className={classes.section}>
-            <Typography variant="h4">{overviewTrans('sysInfo')}</Typography>
+            <Typography variant="h4">{homeTrans('sysInfo')}</Typography>
             <div className={classes.cardWrapper}>
               <SysCard
                 title={'Milvus Version'}
@@ -122,23 +122,23 @@ const Overview = () => {
               />
 
               <SysCard
-                title={overviewTrans('deployMode')}
+                title={homeTrans('deployMode')}
                 count={data?.deployMode}
                 link="system"
               />
               <SysCard
-                title={overviewTrans('upTime')}
+                title={homeTrans('upTime')}
                 count={duration}
                 link="system"
               />
 
               <SysCard
-                title={overviewTrans('users')}
+                title={homeTrans('users')}
                 count={data?.users?.length}
                 link="users"
               />
               <SysCard
-                title={overviewTrans('roles')}
+                title={homeTrans('roles')}
                 count={data?.roles?.length}
                 link="roles"
               />
@@ -149,17 +149,17 @@ const Overview = () => {
             <section className={classes.section}>
               <div className={classes.cardWrapper}>
                 <SysCard
-                  title={overviewTrans('dataNodes')}
+                  title={homeTrans('dataNodes')}
                   count={data?.dataNodes?.length}
                   link="system"
                 />
                 <SysCard
-                  title={overviewTrans('indexNodes')}
+                  title={homeTrans('indexNodes')}
                   count={data?.indexNodes?.length}
                   link="system"
                 />
                 <SysCard
-                  title={overviewTrans('queryNodes')}
+                  title={homeTrans('queryNodes')}
                   count={data?.queryNodes?.length}
                   link="system"
                 />
@@ -172,4 +172,4 @@ const Overview = () => {
   );
 };
 
-export default Overview;
+export default Home;

client/src/pages/home/collectionCard/CollectionCard.tsx

@@ -1,205 +0,0 @@
-import {
-  makeStyles,
-  Theme,
-  Typography,
-  Divider,
-  Card,
-  CardContent,
-} from '@material-ui/core';
-import { FC, useContext, useEffect, useState } from 'react';
-import CustomButton from '@/components/customButton/CustomButton';
-import icons from '@/components/icons/Icons';
-import Status from '@/components/status/Status';
-import { useTranslation } from 'react-i18next';
-import CustomIconButton from '@/components/customButton/CustomIconButton';
-import { useNavigate, Link } from 'react-router-dom';
-import { LOADING_STATE } from '@/consts';
-import { rootContext, dataContext } from '@/context';
-import ReleaseCollectionDialog from '../../dialogs/ReleaseCollectionDialog';
-import { CollectionCardProps } from './Types';
-import { CollectionService } from '@/http';
-
-const useStyles = makeStyles((theme: Theme) => ({
-  wrapper: {
-    textAlign: 'end',
-    '& .link': {
-      display: 'flex',
-      alignItems: 'center',
-      margin: theme.spacing(2, 0),
-      color: theme.palette.attuDark.main,
-      wordBreak: 'break-all',
-      textAlign: 'left',
-      fontSize: '20px',
-      lineHeight: '24px',
-      fontWeight: 'bold',
-      textDecoration: 'none',
-    },
-  },
-  loading: {
-    background: '#F0F4F9',
-    border: `1px dashed ${theme.palette.primary.main}`,
-  },
-
-  icon: {
-    color: theme.palette.primary.main,
-    marginLeft: theme.spacing(0.5),
-    fontSize: '16px',
-  },
-  content: {
-    margin: 0,
-    padding: 0,
-    '& > li': {
-      display: 'flex',
-      alignItems: 'center',
-      marginBottom: theme.spacing(0.5),
-    },
-  },
-  rowCount: {
-    marginLeft: theme.spacing(1),
-  },
-  divider: {
-    marginBottom: theme.spacing(2),
-  },
-  release: {
-    fontSize: '16px',
-
-    '& path': {
-      fill: theme.palette.primary.main,
-    },
-  },
-  search: {
-    fontSize: '16px',
-    marginRight: theme.spacing(0.5),
-    '& path': {
-      fill: '#fff',
-    },
-  },
-  btn: {
-    marginRight: theme.spacing(1),
-    padding: theme.spacing(0.5, 1),
-    lineHeight: '20px',
-    fontSize: 14,
-  },
-}));
-
-const CollectionCard: FC<CollectionCardProps> = ({
-  collection,
-  onRelease,
-  wrapperClass = '',
-}) => {
-  const { database } = useContext(dataContext);
-  const [loading, setLoading] = useState(false);
-  const [count, setCount] = useState<number>();
-  const classes = useStyles();
-  const { setDialog } = useContext(rootContext);
-
-  const {
-    collection_name,
-    status: status,
-    loadedPercentage,
-    replicas,
-  } = collection;
-  const navigate = useNavigate();
-  // icons
-  const RightArrowIcon = icons.rightArrow;
-  const ReleaseIcon = icons.release;
-  const VectorSearchIcon = icons.navSearch;
-  // i18n
-  const { t: collectionTrans } = useTranslation('collection');
-  const { t: btnTrans } = useTranslation('btn');
-
-  const onReleaseClick = () => {
-    setDialog({
-      open: true,
-      type: 'custom',
-      params: {
-        component: (
-          <ReleaseCollectionDialog
-            collection={collection_name}
-            onRelease={onRelease}
-          />
-        ),
-      },
-    });
-  };
-
-  const onVectorSearchClick = () => {
-    navigate({
-      pathname: '/search',
-      search: `?collectionName=${collection_name}`,
-    });
-  };
-
-  const fetchData = async () => {
-    try {
-      setLoading(true);
-      const data = await CollectionService.count(collection_name);
-      setCount(data.rowCount);
-    } catch (e) {
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  useEffect(() => {
-    if (status === LOADING_STATE.LOADED) {
-      fetchData();
-    }
-  }, [status]);
-
-  return (
-    <Card
-      className={`${classes.wrapper} ${wrapperClass} ${
-        collection.status === LOADING_STATE.LOADING && classes.loading
-      }`}
-    >
-      <CardContent>
-        <div>
-          <Status status={status} percentage={loadedPercentage} />
-        </div>
-        <Link
-          className="link"
-          to={`/databases/${database}/${collection_name}/data`}
-        >
-          {collection_name}
-          <RightArrowIcon classes={{ root: classes.icon }} />
-        </Link>
-        <ul className={classes.content}>
-          {replicas && replicas.length > 1 ? (
-            <li>
-              <Typography>{collectionTrans('replicaNum')}</Typography>:
-              <Typography className={classes.rowCount}>
-                {replicas.length}
-              </Typography>
-            </li>
-          ) : null}
-          <li>
-            <Typography>{collectionTrans('count')}</Typography>:
-            {loading ? (
-              `...`
-            ) : (
-              <Typography className={classes.rowCount}>{count}</Typography>
-            )}
-          </li>
-        </ul>
-        <Divider classes={{ root: classes.divider }} />
-        <CustomButton
-          variant="contained"
-          className={classes.btn}
-          onClick={onVectorSearchClick}
-        >
-          <VectorSearchIcon classes={{ root: classes.search }} />
-          {btnTrans('vectorSearch')}
-        </CustomButton>
-        <CustomIconButton
-          onClick={onReleaseClick}
-          tooltip={btnTrans('release')}
-        >
-          <ReleaseIcon classes={{ root: classes.release }} />
-        </CustomIconButton>
-      </CardContent>
-    </Card>
-  );
-};
-
-export default CollectionCard;

client/src/pages/home/collectionCard/Types.ts

@@ -1,7 +0,0 @@
-import { CollectionObject } from '@server/types';
-
-export interface CollectionCardProps {
-  collection: CollectionObject;
-  onRelease: () => void;
-  wrapperClass?: string;
-}

client/src/pages/index.tsx

@@ -13,7 +13,7 @@ import {
   prometheusContext,
   dataContext,
 } from '@/context';
-import Overview from '@/pages/home/Overview';
+import Overview from '@/pages/home/Home';
 
 const useStyles = makeStyles((theme: Theme) =>
   createStyles({

client/src/router/Types.ts

@@ -1,6 +1,6 @@
 export enum ALL_ROUTER_TYPES {
   // '/'
-  OVERVIEW = 'overview',
+  HOME = 'home',
   // '/collections'
   COLLECTIONS = 'collections',
   // '/collections/:collectionId'