add collection load state

client/src/components/status/Status.tsx

@@ -23,8 +23,8 @@ const useStyles = makeStyles((theme: Theme) =>
       marginRight: theme.spacing(0.5),
     },
 
-    loading:{
-      marginRight:"10px"
+    loading: {
+      marginRight: '10px',
     },
 
     flash: {
@@ -46,7 +46,7 @@ const useStyles = makeStyles((theme: Theme) =>
 );
 
 const Status: FC<StatusType> = props => {
-  const { status } = props;
+  const { status, percentage = 0 } = props;
   const { t: commonTrans } = useTranslation();
   const statusTrans = commonTrans('status');
   const { label, color } = useMemo(() => {
@@ -64,7 +64,7 @@ const Status: FC<StatusType> = props => {
         };
       case LOADING_STATE.LOADING:
         return {
-          label: statusTrans.loading,
+          label: `${percentage}% ${statusTrans.loading}`,
           color: '#f25c06',
         };
 
@@ -74,14 +74,21 @@ const Status: FC<StatusType> = props => {
           color: '#f25c06',
         };
     }
-  }, [status, statusTrans]);
+  }, [status, statusTrans, percentage]);
 
   const classes = useStyles({ color });
 
   return (
     <div className={classes.root}>
-      {status === LOADING_STATE.LOADED && <div className={classes.circle}></div>}
-      {status === LOADING_STATE.LOADING && <StatusIcon type={ChildrenStatusType.CREATING} className={classes.loading} />}
+      {status === LOADING_STATE.LOADED && (
+        <div className={classes.circle}></div>
+      )}
+      {status === LOADING_STATE.LOADING && (
+        <StatusIcon
+          type={ChildrenStatusType.CREATING}
+          className={classes.loading}
+        />
+      )}
 
       <Typography variant="body2" className={classes.label}>
         {label}

client/src/components/status/Types.ts

@@ -1,4 +1,4 @@
-import { LOADING_STATE } from "../../consts/Milvus";
+import { LOADING_STATE } from '../../consts/Milvus';
 
 // export enum StatusEnum {
 //   'unloaded',
@@ -7,6 +7,7 @@ import { LOADING_STATE } from "../../consts/Milvus";
 // }
 export type StatusType = {
   status: LOADING_STATE;
+  percentage?: string;
 };
 
 // @todo need rename

client/src/hooks/Dialog.tsx

@@ -2,9 +2,8 @@ import { ReactElement, useContext } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Typography } from '@material-ui/core';
 import { rootContext } from '../context/Root';
-import { CollectionView } from '../pages/collections/Types';
+import { CollectionData, CollectionView } from '../pages/collections/Types';
 import { PartitionView } from '../pages/partitions/Types';
-import { CollectionData } from '../pages/overview/collectionCard/Types';
 import { LOADING_STATE } from '../consts/Milvus';
 
 // handle release and load dialog

client/src/http/Collection.ts

@@ -16,7 +16,7 @@ export class CollectionHttp extends BaseModel implements CollectionView {
   private rowCount!: string;
   private index_status!: string;
   private id!: string;
-  private loadState!: LOADING_STATE;
+  private loadedPercentage!: string;
   private createdTime!: string;
   private schema!: {
     fields: Field[];
@@ -111,12 +111,17 @@ export class CollectionHttp extends BaseModel implements CollectionView {
     return formatNumber(Number(this.rowCount));
   }
 
-  get _loadState() {
-    return this.loadState;
+  get _loadedPercentage() {
+    return this.loadedPercentage;
   }
-
+  // load status
   get _status() {
-    return this.loadState;
+    // If not load, insight server will return '-1'. Otherwise milvus will return percentage
+    return this._loadedPercentage === '-1'
+      ? LOADING_STATE.UNLOADED
+      : this._loadedPercentage === '100'
+      ? LOADING_STATE.LOADED
+      : LOADING_STATE.LOADING;
   }
 
   get _fields() {

client/src/i18n/cn/common.ts

@@ -8,7 +8,7 @@ const commonTrans = {
     unloaded: 'unloaded',
     error: 'error',
     running: 'running',
-    loading: 'loading'
+    loading: 'is loaded',
   },
   grid: {
     action: 'action',
@@ -36,7 +36,7 @@ const commonTrans = {
     qr: 'Scan WeChat QR code to get access',
     more: 'More Channels to Explore',
     join: 'Join our growing social community today',
-    get: 'Get insight, tips and share ideas'
+    get: 'Get insight, tips and share ideas',
   },
 };
 

client/src/i18n/en/common.ts

@@ -8,7 +8,7 @@ const commonTrans = {
     unloaded: 'unloaded',
     error: 'error',
     running: 'running',
-    loading: 'loading'
+    loading: 'is loaded',
   },
   grid: {
     action: 'action',
@@ -36,7 +36,7 @@ const commonTrans = {
     qr: 'Scan WeChat QR code to get access',
     more: 'More Channels to Explore',
     join: 'Join our growing social community today',
-    get: 'Get insight, tips and share ideas'
+    get: 'Get insight, tips and share ideas',
   },
 };
 

client/src/pages/collections/Collections.tsx

@@ -16,7 +16,7 @@ import icons from '../../components/icons/Icons';
 import EmptyCard from '../../components/cards/EmptyCard';
 import Status from '../../components/status/Status';
 import { useTranslation } from 'react-i18next';
-import { ChildrenStatusType,  } from '../../components/status/Types';
+import { ChildrenStatusType } from '../../components/status/Types';
 import { makeStyles, Theme } from '@material-ui/core';
 import StatusIcon from '../../components/status/StatusIcon';
 import CustomToolTip from '../../components/customToolTip/CustomToolTip';
@@ -383,7 +383,9 @@ const Collections = () => {
         {
           onClick: (e: React.MouseEvent, row: CollectionView) => {
             const cb =
-              row._status === LOADING_STATE.UNLOADED ? handleLoad : handleRelease;
+              row._status === LOADING_STATE.UNLOADED
+                ? handleLoad
+                : handleRelease;
             handleAction(row, cb);
           },
           icon: 'load',
@@ -392,7 +394,11 @@ const Collections = () => {
           getLabel: (row: CollectionView) =>
             row._status === LOADING_STATE.UNLOADED ? 'load' : 'release',
           renderIconFn: (row: CollectionView) =>
-            row._status === LOADING_STATE.UNLOADED ?  <LoadIcon />:<ReleaseIcon />,
+            row._status === LOADING_STATE.UNLOADED ? (
+              <LoadIcon />
+            ) : (
+              <ReleaseIcon />
+            ),
         },
       ],
     },

client/src/pages/collections/Types.ts

@@ -6,12 +6,12 @@ import { FieldData } from '../schema/Types';
 export interface CollectionData {
   _name: string;
   _id: string;
+  _loadedPercentage:string;
   _status: LOADING_STATE;
   _rowCount: string;
   _desc: string;
   _indexState: ChildrenStatusType;
   _fields?: FieldData[];
-  _loadState: LOADING_STATE;
 }
 
 export interface CollectionView extends CollectionData {
@@ -76,7 +76,7 @@ export interface CreateFieldsProps {
   fields: Field[];
   setFields: Dispatch<SetStateAction<Field[]>>;
   setFieldsValidation: Dispatch<
-    SetStateAction<{ [x: string]: string | boolean }[]>
+    SetStateAction<{ [x: string]: string | boolean; }[]>
   >;
   autoID: boolean;
   setAutoID: (value: boolean) => void;

client/src/pages/overview/Overview.tsx

@@ -10,8 +10,8 @@ import { useNavigationHook } from '../../hooks/Navigation';
 import { CollectionHttp } from '../../http/Collection';
 import { ALL_ROUTER_TYPES } from '../../router/Types';
 import { formatNumber } from '../../utils/Common';
+import { CollectionData } from '../collections/Types';
 import CollectionCard from './collectionCard/CollectionCard';
-import { CollectionData } from './collectionCard/Types';
 import StatisticsCard from './statisticsCard/StatisticsCard';
 
 const useStyles = makeStyles((theme: Theme) => ({
@@ -49,7 +49,9 @@ const Overview = () => {
   const fetchData = useCallback(async () => {
     const res = await CollectionHttp.getStatistics();
     const collections = await CollectionHttp.getCollections();
-    const loadCollections = collections.filter(c => c._loadState !== LOADING_STATE.UNLOADED);
+    const loadCollections = collections.filter(
+      c => c._status !== LOADING_STATE.UNLOADED
+    );
     setStatistics(res);
     setLoadCollections(loadCollections);
   }, []);
@@ -96,15 +98,6 @@ const Overview = () => {
     };
   }, [overviewTrans, statistics, loadCollections]);
 
-  const loadCollectionsData: CollectionData[] = useMemo(() => {
-    return loadCollections.map(v => ({
-      _id: v._id,
-      _name: v._name,
-      _status: v._loadState,
-      _rowCount: v._rowCount,
-    }));
-  }, [loadCollections]);
-
   const CollectionIcon = icons.navCollection;
 
   return (
@@ -113,9 +106,9 @@ const Overview = () => {
       <Typography className={classes.collectionTitle}>
         {overviewTrans('load')}
       </Typography>
-      {loadCollectionsData.length > 0 ? (
+      {loadCollections.length > 0 ? (
         <div className={classes.cardsWrapper}>
-          {loadCollectionsData.map(collection => (
+          {loadCollections.map(collection => (
             <CollectionCard
               key={collection._id}
               data={collection}

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

@@ -14,12 +14,17 @@ import { CollectionCardProps } from './Types';
 import { useTranslation } from 'react-i18next';
 import CustomIconButton from '../../../components/customButton/CustomIconButton';
 import { useHistory } from 'react-router-dom';
+import { LOADING_STATE } from '../../../consts/Milvus';
 
 const useStyles = makeStyles((theme: Theme) => ({
   wrapper: {
     padding: theme.spacing(2),
     textAlign: 'end',
   },
+  loading: {
+    background: '#F0F4F9',
+    border: `1px dashed #06AFF2`,
+  },
   link: {
     display: 'flex',
     alignItems: 'center',
@@ -77,7 +82,12 @@ const CollectionCard: FC<CollectionCardProps> = ({
   wrapperClass = '',
 }) => {
   const classes = useStyles();
-  const { _name: name, _status: status, _rowCount: rowCount } = data;
+  const {
+    _name: name,
+    _status: status,
+    _rowCount: rowCount,
+    _loadedPercentage,
+  } = data;
   const history = useHistory();
   // icons
   const RightArrowIcon = icons.rightArrow;
@@ -97,9 +107,13 @@ const CollectionCard: FC<CollectionCardProps> = ({
   };
 
   return (
-    <div className={`card-wrapper ${classes.wrapper} ${wrapperClass}`}>
+    <div
+      className={`card-wrapper ${classes.wrapper} ${wrapperClass} ${
+        data._status === LOADING_STATE.LOADING && classes.loading
+      }`}
+    >
       <div>
-        <Status status={status} />
+        <Status status={status} percentage={_loadedPercentage} />
       </div>
       <Link
         classes={{ root: classes.link }}

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

@@ -1,14 +1,7 @@
-import { LOADING_STATE } from '../../../consts/Milvus';
+import { CollectionData } from '../../collections/Types';
 
 export interface CollectionCardProps {
   data: CollectionData;
   handleRelease: (data: CollectionData) => void;
   wrapperClass?: string;
 }
-
-export interface CollectionData {
-  _name: string;
-  _status: LOADING_STATE;
-  _id: string;
-  _rowCount: string;
-}

server/generate-csv.ts

@@ -18,8 +18,8 @@ const generateVector = (dimension) => {
   return JSON.stringify(vectors);
 };
 
-while (records.length < 5000) {
-  const value = generateVector(128);
+while (records.length < 100000) {
+  const value = generateVector(4);
   records.push({ vector: value });
 }
 

server/src/collections/collections.service.ts

@@ -125,12 +125,10 @@ export class CollectionsService {
         const loadCollection = loadedCollections.data.find(
           (v) => v.name === name,
         );
-        const loadingState = !loadCollection
-          ? LOADING_STATE.UNLOADED
-          : loadCollection.loadedPercentage === '100'
-          ? LOADING_STATE.LOADED
-          : LOADING_STATE.LOADING;
 
+        const loadedPercentage = !loadCollection
+          ? '-1'
+          : loadCollection.loadedPercentage;
         data.push({
           collection_name: name,
           schema: collectionInfo.schema,
@@ -138,7 +136,7 @@ export class CollectionsService {
           autoID,
           rowCount: findKeyValue(collectionStatistics.stats, ROW_COUNT),
           id: collectionInfo.collectionID,
-          loadState: loadingState,
+          loadedPercentage,
           createdTime: collectionInfo.created_utc_timestamp,
         });
       }