update pagination

client/src/hooks/Pagination.ts

@@ -1,14 +1,26 @@
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 
 const PAGE_SIZE = 15;
-export const usePaginationHook = () => {
+export const usePaginationHook = (list: any[]) => {
   const [offset, setOffset] = useState(0);
   const [currentPage, setCurrentPage] = useState(0);
   const [total, setTotal] = useState(0);
+  const [data, setData] = useState<any[]>([]);
+
+  useEffect(() => {
+    if (list.length > 0) {
+      setTotal(list.length);
+      setData(list.slice(0, PAGE_SIZE));
+    }
+  }, [list]);
 
   const handleCurrentPage = (page: number) => {
     setCurrentPage(page);
-    setOffset(PAGE_SIZE * page);
+    const offset = PAGE_SIZE * page;
+    setOffset(offset);
+
+    const data = list.slice(offset, offset + PAGE_SIZE);
+    setData(data);
   };
 
   return {
@@ -18,5 +30,6 @@ export const usePaginationHook = () => {
     handleCurrentPage,
     total,
     setTotal,
+    data,
   };
 };

client/src/pages/collections/Collections.tsx

@@ -42,16 +42,15 @@ const useStyles = makeStyles((theme: Theme) => ({
 const Collections = () => {
   useNavigationHook(ALL_ROUTER_TYPES.COLLECTIONS);
 
+  const [collections, setCollections] = useState<CollectionView[]>([]);
   const {
     pageSize,
     currentPage,
     handleCurrentPage,
-    // offset,
     total,
-    // setTotal
-  } = usePaginationHook();
-  const [collections, setCollections] = useState<CollectionView[]>([]);
-  // const [loading, setLoading] = useState<boolean>(false);
+    data: collectionList,
+  } = usePaginationHook(collections);
+  const [loading, setLoading] = useState<boolean>(true);
   const [selectedCollections, setSelectedCollections] = useState<
     CollectionView[]
   >([]);
@@ -63,8 +62,6 @@ const Collections = () => {
 
   const classes = useStyles();
 
-  const loading = false;
-
   const LoadIcon = icons.load;
   const ReleaseIcon = icons.release;
   const InfoIcon = icons.info;
@@ -72,6 +69,7 @@ const Collections = () => {
   const fetchData = useCallback(async () => {
     const res = await CollectionHttp.getCollections();
     const statusRes = await CollectionHttp.getCollectionsIndexState();
+    setLoading(false);
     setCollections(
       res.map(v => {
         const indexStatus = statusRes.find(item => item._name === v._name);
@@ -275,7 +273,7 @@ const Collections = () => {
         <MilvusGrid
           toolbarConfigs={toolbarConfigs}
           colDefinitions={colDefinitions}
-          rows={collections}
+          rows={collectionList}
           rowCount={total}
           primaryKey="id"
           openCheckBox={true}
@@ -285,7 +283,7 @@ const Collections = () => {
           page={currentPage}
           onChangePage={handlePageChange}
           rowsPerPage={pageSize}
-          // isLoading={loading}
+          isLoading={loading}
         />
       ) : (
         <>

client/src/pages/partitions/partitions.tsx

@@ -29,6 +29,10 @@ const Partitions: FC<{
   const { t } = useTranslation('partition');
   const InfoIcon = icons.info;
 
+  const [selectedPartitions, setSelectedPartitions] = useState<PartitionView[]>(
+    []
+  );
+  const [partitions, setPartitions] = useState<PartitionView[]>([]);
   const {
     pageSize,
     currentPage,
@@ -36,12 +40,8 @@ const Partitions: FC<{
     // offset,
     total,
     // setTotal
-  } = usePaginationHook();
-
-  const [selectedPartitions, setSelectedPartitions] = useState<PartitionView[]>(
-    []
-  );
-  const [partitions, setPartitions] = useState<PartitionView[]>([]);
+    data: partitionList,
+  } = usePaginationHook(partitions);
   const [loading, setLoading] = useState<boolean>(true);
   const { setDialog, handleCloseDialog, openSnackBar } =
     useContext(rootContext);
@@ -141,6 +141,8 @@ const Partitions: FC<{
 
     openSnackBar('create partition success');
     handleCloseDialog();
+    // refresh partitions
+    fetchPartitions(collectionName);
   };
 
   return (
@@ -148,7 +150,7 @@ const Partitions: FC<{
       <MilvusGrid
         toolbarConfigs={toolbarConfigs}
         colDefinitions={colDefinitions}
-        rows={partitions}
+        rows={partitionList}
         rowCount={total}
         primaryKey="id"
         openCheckBox={true}