add overview page

client/src/http/Collection.ts

@@ -1,6 +1,6 @@
 import { ChildrenStatusType, StatusEnum } from '../components/status/Types';
 import { CollectionView } from '../pages/collections/Types';
-import { IndexState } from '../types/Milvus';
+import { IndexState, ShowCollectionsType } from '../types/Milvus';
 import BaseModel from './BaseModel';
 
 export class CollectionHttp extends BaseModel implements CollectionView {
@@ -10,6 +10,7 @@ export class CollectionHttp extends BaseModel implements CollectionView {
   private rowCount!: string;
   private index_status!: string;
   private id!: string;
+  private isLoaded!: boolean;
 
   static COLLECTIONS_URL = '/collections';
   static COLLECTIONS_INDEX_STATUS_URL = '/collections/indexes/status';
@@ -22,8 +23,10 @@ export class CollectionHttp extends BaseModel implements CollectionView {
     Object.assign(this, props);
   }
 
-  static getCollections(): Promise<CollectionHttp[]> {
-    return super.findAll({ path: this.COLLECTIONS_URL, params: {} });
+  static getCollections(data?: {
+    type: ShowCollectionsType;
+  }): Promise<CollectionHttp[]> {
+    return super.findAll({ path: this.COLLECTIONS_URL, params: data || {} });
   }
 
   static createCollection(data: any) {
@@ -78,7 +81,7 @@ export class CollectionHttp extends BaseModel implements CollectionView {
   }
 
   get _status() {
-    return StatusEnum.loaded;
+    return this.isLoaded === true ? StatusEnum.loaded : StatusEnum.unloaded;
   }
 
   get _indexState() {

client/src/pages/overview/Overview.tsx

@@ -7,6 +7,7 @@ import { StatusEnum } from '../../components/status/Types';
 import { useNavigationHook } from '../../hooks/Navigation';
 import { CollectionHttp } from '../../http/Collection';
 import { ALL_ROUTER_TYPES } from '../../router/Types';
+import { ShowCollectionsType } from '../../types/Milvus';
 import { formatNumber } from '../../utils/Common';
 import CollectionCard from './collectionCard/CollectionCard';
 import { CollectionData } from './collectionCard/Types';
@@ -39,10 +40,16 @@ const Overview = () => {
     totalData: 0,
   });
 
+  const [loadCollections, setLoadCollections] = useState<CollectionHttp[]>([]);
+
   useEffect(() => {
     const fetchData = async () => {
       const res = await CollectionHttp.getStatistics();
+      const loadCollections = await CollectionHttp.getCollections({
+        type: ShowCollectionsType.InMemory,
+      });
       setStatistics(res);
+      setLoadCollections(loadCollections);
     };
     fetchData();
   }, []);
@@ -52,7 +59,7 @@ const Overview = () => {
       data: [
         {
           label: overviewTrans('load'),
-          value: formatNumber(4337),
+          value: formatNumber(loadCollections.length),
           valueColor: '#07d197',
         },
         {
@@ -69,46 +76,17 @@ const Overview = () => {
         },
       ],
     };
-  }, [overviewTrans, statistics]);
+  }, [overviewTrans, statistics, loadCollections]);
 
-  const mockCollections: CollectionData[] = [
-    {
-      name: 'collection1',
-      id: 'c1',
-      status: StatusEnum.loaded,
-      rowCount: 2,
-    },
-    {
-      name: 'collection2',
-      id: 'c2',
-      status: StatusEnum.loaded,
-      rowCount: 2,
-    },
-    {
-      name: 'collection3',
-      id: 'c3',
-      status: StatusEnum.loaded,
-      rowCount: 2,
-    },
-    {
-      name: 'collection4',
-      id: 'c4',
+  const loadCollectionsData: CollectionData[] = useMemo(() => {
+    return loadCollections.map(v => ({
+      id: v._id,
+      name: v._name,
       status: StatusEnum.loaded,
-      rowCount: 2,
-    },
-    {
-      name: 'collection5',
-      id: 'c5',
-      status: StatusEnum.loaded,
-      rowCount: 2,
-    },
-    {
-      name: 'collection6',
-      id: 'c6',
-      status: StatusEnum.loaded,
-      rowCount: 2,
-    },
-  ];
+      rowCount: Number(v._rowCount),
+    }));
+  }, [loadCollections]);
+
   const CollectionIcon = icons.navCollection;
 
   return (
@@ -117,9 +95,9 @@ const Overview = () => {
       <Typography className={classes.collectionTitle}>
         {overviewTrans('load')}
       </Typography>
-      {mockCollections.length > 0 ? (
+      {loadCollectionsData.length > 0 ? (
         <div className={classes.cardsWrapper}>
-          {mockCollections.map(collection => (
+          {loadCollectionsData.map(collection => (
             <CollectionCard key={collection.id} data={collection} />
           ))}
         </div>

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

@@ -56,7 +56,7 @@ const CollectionCard: FC<CollectionCardProps> = ({
   wrapperClass = '',
 }) => {
   const classes = useStyles();
-  const { name, status, id, rowCount } = data;
+  const { name, status, rowCount } = data;
   const RightArrowIcon = icons.rightArrow;
   const InfoIcon = icons.info;
   const ReleaseIcon = icons.release;
@@ -73,7 +73,7 @@ const CollectionCard: FC<CollectionCardProps> = ({
       <Link
         classes={{ root: classes.link }}
         underline="none"
-        href={`/collection/${id}`}
+        href={`/collections/${name}`}
       >
         {name}
         <RightArrowIcon classes={{ root: classes.icon }} />

client/src/types/Milvus.ts

@@ -5,3 +5,8 @@ export enum IndexState {
   Finished = 'Finished',
   Failed = 'Failed',
 }
+
+export enum ShowCollectionsType {
+  All = 0,
+  InMemory = 1,
+}