add load state

client/src/components/status/Status.tsx

@@ -1,7 +1,9 @@
 import { FC, useMemo } from 'react';
-import { StatusType, StatusEnum } from './Types';
+import { ChildrenStatusType, StatusType } from './Types';
 import { useTranslation } from 'react-i18next';
 import { makeStyles, Theme, createStyles, Typography } from '@material-ui/core';
+import { LOADING_STATE } from '../../consts/Milvus';
+import StatusIcon from './StatusIcon';
 
 const useStyles = makeStyles((theme: Theme) =>
   createStyles({
@@ -21,6 +23,10 @@ const useStyles = makeStyles((theme: Theme) =>
       marginRight: theme.spacing(0.5),
     },
 
+    loading:{
+      marginRight:"10px"
+    },
+
     flash: {
       animation: '$bgColorChange 1.5s infinite',
     },
@@ -45,20 +51,20 @@ const Status: FC<StatusType> = props => {
   const statusTrans = commonTrans('status');
   const { label, color } = useMemo(() => {
     switch (status) {
-      case StatusEnum.unloaded:
+      case LOADING_STATE.UNLOADED:
         return {
           label: statusTrans.unloaded,
           color: '#06aff2',
         };
 
-      case StatusEnum.loaded:
+      case LOADING_STATE.LOADED:
         return {
           label: statusTrans.loaded,
           color: '#06f3af',
         };
-      case StatusEnum.error:
+      case LOADING_STATE.LOADING:
         return {
-          label: statusTrans.error,
+          label: statusTrans.loading,
           color: '#f25c06',
         };
 
@@ -74,7 +80,9 @@ const Status: FC<StatusType> = props => {
 
   return (
     <div className={classes.root}>
-      {status === StatusEnum.loaded && <div className={classes.circle}></div>}
+      {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}
       </Typography>

client/src/components/status/StatusIcon.tsx

@@ -16,7 +16,7 @@ const useStyles = makeStyles((theme: Theme) => ({
 
 const StatusIcon: FC<StatusIconType> = props => {
   const classes = useStyles();
-  const { type } = props;
+  const { type, className = "" } = props;
 
   const getElement = (type: ChildrenStatusType): ReactElement => {
     switch (type) {
@@ -35,7 +35,7 @@ const StatusIcon: FC<StatusIconType> = props => {
     }
   };
 
-  return <div className={classes.wrapper}>{getElement(type)}</div>;
+  return <div className={`${classes.wrapper} ${className}`}>{getElement(type)}</div>;
 };
 
 export default StatusIcon;

client/src/components/status/Types.ts

@@ -1,10 +1,12 @@
-export enum StatusEnum {
-  'unloaded',
-  'loaded',
-  'error',
-}
+import { LOADING_STATE } from "../../consts/Milvus";
+
+// export enum StatusEnum {
+//   'unloaded',
+//   'loaded',
+//   'error',
+// }
 export type StatusType = {
-  status: StatusEnum;
+  status: LOADING_STATE;
 };
 
 // @todo need rename
@@ -16,4 +18,5 @@ export enum ChildrenStatusType {
 
 export type StatusIconType = {
   type: ChildrenStatusType;
+  className?: string;
 };

client/src/consts/Milvus.tsx

@@ -194,3 +194,9 @@ export const DEFAULT_SEARCH_PARAM_VALUE_MAP: {
 };
 
 export const DEFAULT_NLIST_VALUE = 1024;
+
+export enum LOADING_STATE {
+  LOADED,
+  LOADING,
+  UNLOADED,
+}

client/src/hooks/Dialog.tsx

@@ -4,8 +4,8 @@ import { Typography } from '@material-ui/core';
 import { rootContext } from '../context/Root';
 import { CollectionView } from '../pages/collections/Types';
 import { PartitionView } from '../pages/partitions/Types';
-import { StatusEnum } from '../components/status/Types';
 import { CollectionData } from '../pages/overview/collectionCard/Types';
+import { LOADING_STATE } from '../consts/Milvus';
 
 // handle release and load dialog
 export interface LoadAndReleaseDialogHookProps {
@@ -53,7 +53,7 @@ export const useLoadAndReleaseDialogHook = (
     cb: (data: any) => Promise<any>
   ) => {
     const actionType: 'release' | 'load' =
-      data._status === StatusEnum.loaded ? 'release' : 'load';
+      data._status === LOADING_STATE.UNLOADED ? 'load' : 'release';
     const { title, component, confirmLabel } = actionsMap[actionType];
 
     setDialog({

client/src/http/Collection.ts

@@ -1,4 +1,4 @@
-import { ChildrenStatusType, StatusEnum } from '../components/status/Types';
+import { ChildrenStatusType } from '../components/status/Types';
 import { CollectionView, InsertDataParam } from '../pages/collections/Types';
 import { Field } from '../pages/schema/Types';
 import { VectorSearchParam } from '../pages/seach/Types';
@@ -7,6 +7,7 @@ import { formatNumber } from '../utils/Common';
 import BaseModel from './BaseModel';
 import { FieldHttp } from './Field';
 import dayjs from 'dayjs';
+import { LOADING_STATE } from '../consts/Milvus';
 
 export class CollectionHttp extends BaseModel implements CollectionView {
   private autoID!: string;
@@ -15,7 +16,7 @@ export class CollectionHttp extends BaseModel implements CollectionView {
   private rowCount!: string;
   private index_status!: string;
   private id!: string;
-  private isLoaded!: boolean;
+  private loadState!: LOADING_STATE;
   private createdTime!: string;
   private schema!: {
     fields: Field[];
@@ -110,12 +111,12 @@ export class CollectionHttp extends BaseModel implements CollectionView {
     return formatNumber(Number(this.rowCount));
   }
 
-  get _isLoaded() {
-    return this.isLoaded;
+  get _loadState() {
+    return this.loadState;
   }
 
   get _status() {
-    return this.isLoaded === true ? StatusEnum.loaded : StatusEnum.unloaded;
+    return this.loadState;
   }
 
   get _fields() {

client/src/http/Partition.ts

@@ -1,5 +1,5 @@
 import dayjs from 'dayjs';
-import { StatusEnum } from '../components/status/Types';
+import { LOADING_STATE } from '../consts/Milvus';
 import {
   PartitionManageParam,
   PartitionParam,
@@ -82,7 +82,7 @@ export class PartitionHttp extends BaseModel implements PartitionData {
 
   get _status() {
     // @TODO replace mock data
-    return StatusEnum.unloaded;
+    return LOADING_STATE.UNLOADED
   }
 
   // Befor milvus-2.0-rc3  will return '0'.

client/src/i18n/cn/common.ts

@@ -8,6 +8,7 @@ const commonTrans = {
     unloaded: 'unloaded',
     error: 'error',
     running: 'running',
+    loading: 'loading'
   },
   grid: {
     action: 'action',

client/src/i18n/en/common.ts

@@ -8,6 +8,7 @@ const commonTrans = {
     unloaded: 'unloaded',
     error: 'error',
     running: 'running',
+    loading: 'loading'
   },
   grid: {
     action: 'action',

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, StatusEnum } 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';
@@ -32,6 +32,7 @@ import Highlighter from 'react-highlight-words';
 import { parseLocationSearch } from '../../utils/Format';
 import InsertContainer from '../../components/insert/Container';
 import { MilvusHttp } from '../../http/Milvus';
+import { LOADING_STATE } from '../../consts/Milvus';
 
 const useStyles = makeStyles((theme: Theme) => ({
   emptyWrapper: {
@@ -382,16 +383,16 @@ const Collections = () => {
         {
           onClick: (e: React.MouseEvent, row: CollectionView) => {
             const cb =
-              row._status === StatusEnum.unloaded ? handleLoad : handleRelease;
+              row._status === LOADING_STATE.UNLOADED ? handleLoad : handleRelease;
             handleAction(row, cb);
           },
           icon: 'load',
           label: 'load',
           showIconMethod: 'renderFn',
           getLabel: (row: CollectionView) =>
-            row._status === StatusEnum.loaded ? 'release' : 'load',
+            row._status === LOADING_STATE.UNLOADED ? 'load' : 'release',
           renderIconFn: (row: CollectionView) =>
-            row._status === StatusEnum.loaded ? <ReleaseIcon /> : <LoadIcon />,
+            row._status === LOADING_STATE.UNLOADED ?  <LoadIcon />:<ReleaseIcon />,
         },
       ],
     },

client/src/pages/collections/Types.ts

@@ -1,16 +1,17 @@
 import { Dispatch, ReactElement, SetStateAction } from 'react';
-import { ChildrenStatusType, StatusEnum } from '../../components/status/Types';
+import { ChildrenStatusType } from '../../components/status/Types';
+import { LOADING_STATE } from '../../consts/Milvus';
 import { FieldData } from '../schema/Types';
 
 export interface CollectionData {
   _name: string;
   _id: string;
-  _status: StatusEnum;
+  _status: LOADING_STATE;
   _rowCount: string;
   _desc: string;
   _indexState: ChildrenStatusType;
   _fields?: FieldData[];
-  _isLoaded: boolean;
+  _loadState: LOADING_STATE;
 }
 
 export interface CollectionView extends CollectionData {

client/src/pages/overview/Overview.tsx

@@ -3,7 +3,7 @@ import { useCallback, useContext, useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import EmptyCard from '../../components/cards/EmptyCard';
 import icons from '../../components/icons/Icons';
-import { StatusEnum } from '../../components/status/Types';
+import { LOADING_STATE } from '../../consts/Milvus';
 import { rootContext } from '../../context/Root';
 import { useLoadAndReleaseDialogHook } from '../../hooks/Dialog';
 import { useNavigationHook } from '../../hooks/Navigation';
@@ -49,7 +49,7 @@ const Overview = () => {
   const fetchData = useCallback(async () => {
     const res = await CollectionHttp.getStatistics();
     const collections = await CollectionHttp.getCollections();
-    const loadCollections = collections.filter(c => c._isLoaded);
+    const loadCollections = collections.filter(c => c._loadState !== LOADING_STATE.UNLOADED);
     setStatistics(res);
     setLoadCollections(loadCollections);
   }, []);
@@ -100,7 +100,7 @@ const Overview = () => {
     return loadCollections.map(v => ({
       _id: v._id,
       _name: v._name,
-      _status: StatusEnum.loaded,
+      _status: v._loadState,
       _rowCount: v._rowCount,
     }));
   }, [loadCollections]);

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

@@ -1,4 +1,4 @@
-import { StatusEnum } from '../../../components/status/Types';
+import { LOADING_STATE } from '../../../consts/Milvus';
 
 export interface CollectionCardProps {
   data: CollectionData;
@@ -8,7 +8,7 @@ export interface CollectionCardProps {
 
 export interface CollectionData {
   _name: string;
-  _status: StatusEnum;
+  _status: LOADING_STATE;
   _id: string;
   _rowCount: string;
 }

client/src/pages/partitions/Types.ts

@@ -1,11 +1,11 @@
 import { ReactElement } from 'react';
-import { StatusEnum } from '../../components/status/Types';
+import { LOADING_STATE } from '../../consts/Milvus';
 import { ManageRequestMethods } from '../../types/Common';
 
 export interface PartitionData {
   _id: string;
   _name: string;
-  _status: StatusEnum;
+  _status: LOADING_STATE;
   _rowCount: string;
   _formatName: string;
 }

server/src/collections/collections.service.ts

@@ -13,7 +13,7 @@ import {
 } from '@zilliz/milvus2-sdk-node/dist/milvus/types';
 import { throwErrorFromSDK } from '../utils/Error';
 import { findKeyValue } from '../utils/Helper';
-import { ROW_COUNT } from '../utils/Const';
+import { LOADING_STATE, ROW_COUNT } from '../utils/Const';
 import {
   ShowCollectionsReq,
   ShowCollectionsType,
@@ -122,6 +122,14 @@ export class CollectionsService {
         const autoID = collectionInfo.schema.fields.find(
           (v) => v.is_primary_key === true,
         )?.autoID;
+        const loadCollection = loadedCollections.data.find(
+          (v) => v.name === name,
+        );
+        const loadingState = !loadCollection
+          ? LOADING_STATE.UNLOADED
+          : loadCollection.loadedPercentage === '100'
+          ? LOADING_STATE.LOADED
+          : LOADING_STATE.LOADING;
 
         data.push({
           collection_name: name,
@@ -130,9 +138,7 @@ export class CollectionsService {
           autoID,
           rowCount: findKeyValue(collectionStatistics.stats, ROW_COUNT),
           id: collectionInfo.collectionID,
-          isLoaded: !!loadedCollections.data.find(
-            (v) => v.name === name && Number(v.loadedPercentage) === 100,
-          ),
+          loadState: loadingState,
           createdTime: collectionInfo.created_utc_timestamp,
         });
       }

server/src/collections/dto.ts

@@ -21,6 +21,7 @@ enum VectorTypes {
   Binary = DataType.BinaryVector,
   Float = DataType.FloatVector,
 }
+
 export class CreateCollection {
   @ApiProperty({
     description: 'Milvus collection name',

server/src/utils/Const.ts

@@ -1 +1,7 @@
 export const ROW_COUNT = 'row_count';
+
+export enum LOADING_STATE {
+  LOADED,
+  LOADING,
+  UNLOADED,
+}