fix overview page release collection not working

client/src/hooks/Dialog.tsx

@@ -5,6 +5,7 @@ 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';
 
 // handle release and load dialog
 export interface DialogHookProps {
@@ -46,7 +47,7 @@ export const useDialogHook = (props: DialogHookProps) => {
   };
 
   const handleAction = (
-    data: PartitionView | CollectionView,
+    data: PartitionView | CollectionView | CollectionData,
     cb: (data: any) => Promise<any>
   ) => {
     const actionType: 'release' | 'load' =

client/src/http/Collection.ts

@@ -1,6 +1,7 @@
 import { ChildrenStatusType, StatusEnum } from '../components/status/Types';
 import { CollectionView } from '../pages/collections/Types';
 import { IndexState, ShowCollectionsType } from '../types/Milvus';
+import { formatNumber } from '../utils/Common';
 import BaseModel from './BaseModel';
 
 export class CollectionHttp extends BaseModel implements CollectionView {
@@ -77,7 +78,7 @@ export class CollectionHttp extends BaseModel implements CollectionView {
   }
 
   get _rowCount() {
-    return this.rowCount;
+    return formatNumber(Number(this.rowCount));
   }
 
   get _status() {

client/src/pages/overview/Overview.tsx

@@ -1,9 +1,11 @@
 import { makeStyles, Theme, Typography } from '@material-ui/core';
-import { useEffect, useMemo, useState } from 'react';
+import { 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 { rootContext } from '../../context/Root';
+import { useDialogHook } from '../../hooks/Dialog';
 import { useNavigationHook } from '../../hooks/Navigation';
 import { CollectionHttp } from '../../http/Collection';
 import { ALL_ROUTER_TYPES } from '../../router/Types';
@@ -29,9 +31,11 @@ const useStyles = makeStyles((theme: Theme) => ({
 
 const Overview = () => {
   useNavigationHook(ALL_ROUTER_TYPES.OVERVIEW);
+  const { handleAction } = useDialogHook({ type: 'collection' });
   const classes = useStyles();
   const { t: overviewTrans } = useTranslation('overview');
   const { t: collectionTrans } = useTranslation('collection');
+  const { t: successTrans } = useTranslation('success');
   const [statistics, setStatistics] = useState<{
     collectionCount: number;
     totalData: number;
@@ -41,19 +45,35 @@ const Overview = () => {
   });
 
   const [loadCollections, setLoadCollections] = useState<CollectionHttp[]>([]);
+  const { openSnackBar } = useContext(rootContext);
+
+  const fetchData = async () => {
+    const res = await CollectionHttp.getStatistics();
+    const loadCollections = await CollectionHttp.getCollections({
+      type: ShowCollectionsType.InMemory,
+    });
+    setStatistics(res);
+    setLoadCollections(loadCollections);
+  };
 
   useEffect(() => {
-    const fetchData = async () => {
-      const res = await CollectionHttp.getStatistics();
-      const loadCollections = await CollectionHttp.getCollections({
-        type: ShowCollectionsType.InMemory,
-      });
-      setStatistics(res);
-      setLoadCollections(loadCollections);
-    };
     fetchData();
   }, []);
 
+  const fetchRelease = async (data: CollectionData) => {
+    const name = data._name;
+    const res = await CollectionHttp.releaseCollection(name);
+    openSnackBar(
+      successTrans('release', { name: collectionTrans('collection') })
+    );
+    fetchData();
+    return res;
+  };
+
+  const handleRelease = (data: CollectionData) => {
+    handleAction(data, fetchRelease);
+  };
+
   const statisticsData = useMemo(() => {
     return {
       data: [
@@ -80,10 +100,10 @@ const Overview = () => {
 
   const loadCollectionsData: CollectionData[] = useMemo(() => {
     return loadCollections.map(v => ({
-      id: v._id,
-      name: v._name,
-      status: StatusEnum.loaded,
-      rowCount: Number(v._rowCount),
+      _id: v._id,
+      _name: v._name,
+      _status: StatusEnum.loaded,
+      _rowCount: v._rowCount,
     }));
   }, [loadCollections]);
 
@@ -98,7 +118,11 @@ const Overview = () => {
       {loadCollectionsData.length > 0 ? (
         <div className={classes.cardsWrapper}>
           {loadCollectionsData.map(collection => (
-            <CollectionCard key={collection.id} data={collection} />
+            <CollectionCard
+              key={collection._id}
+              data={collection}
+              handleRelease={handleRelease}
+            />
           ))}
         </div>
       ) : (

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

@@ -53,17 +53,20 @@ const useStyles = makeStyles((theme: Theme) => ({
 
 const CollectionCard: FC<CollectionCardProps> = ({
   data,
+  handleRelease,
   wrapperClass = '',
 }) => {
   const classes = useStyles();
-  const { name, status, rowCount } = data;
+  const { _name: name, _status: status, _rowCount: rowCount } = data;
   const RightArrowIcon = icons.rightArrow;
   const InfoIcon = icons.info;
   const ReleaseIcon = icons.release;
   const { t: collectionTrans } = useTranslation('collection');
   const { t: btnTrans } = useTranslation('btn');
 
-  const handleRelease = () => {};
+  const onReleaseClick = () => {
+    handleRelease(data);
+  };
 
   return (
     <div className={`card-wrapper ${classes.wrapper} ${wrapperClass}`}>
@@ -86,7 +89,7 @@ const CollectionCard: FC<CollectionCardProps> = ({
         <Typography className={classes.rowCount}>{rowCount}</Typography>
       </div>
       <Divider classes={{ root: classes.divider }} />
-      <CustomButton variant="contained" onClick={handleRelease}>
+      <CustomButton variant="contained" onClick={onReleaseClick}>
         <ReleaseIcon classes={{ root: `${classes.icon} ${classes.release}` }} />
         {btnTrans('release')}
       </CustomButton>

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

@@ -2,12 +2,13 @@ import { StatusEnum } from '../../../components/status/Types';
 
 export interface CollectionCardProps {
   data: CollectionData;
+  handleRelease: (data: CollectionData) => void;
   wrapperClass?: string;
 }
 
 export interface CollectionData {
-  name: string;
-  status: StatusEnum;
-  id: string;
-  rowCount: number;
+  _name: string;
+  _status: StatusEnum;
+  _id: string;
+  _rowCount: string;
 }