add partition table filter

client/src/components/grid/Table.tsx

@@ -311,7 +311,11 @@ const EnhancedTable: FC<TableType> = props => {
                 <tr>
                   <td
                     className={classes.noData}
-                    colSpan={colDefinitions.length}
+                    colSpan={
+                      openCheckBox
+                        ? colDefinitions.length + 1
+                        : colDefinitions.length
+                    }
                   >
                     {noData}
                   </td>

client/src/pages/collections/Collections.tsx

@@ -108,18 +108,6 @@ const Collections = () => {
     fetchData();
   }, [fetchData]);
 
-  const handleSearch = (value: string) => {
-    // setLoading(true);
-    // setTimeout(() => {
-    // setLoading(false);
-    const list = value
-      ? collections.filter(c => c._name.includes(value))
-      : collections;
-
-    setSearchedCollections(list);
-    // }, 100);
-  };
-
   const handleCreateCollection = async (param: CollectionCreateParam) => {
     const data: CollectionCreateParam = JSON.parse(JSON.stringify(param));
     const vectorType = [DataTypeEnum.BinaryVector, DataTypeEnum.FloatVector];
@@ -212,7 +200,11 @@ const Collections = () => {
       label: 'Search',
       icon: 'search',
       onSearch: (value: string) => {
-        handleSearch(value);
+        const list = value
+          ? collections.filter(c => c._name.includes(value))
+          : collections;
+
+        setSearchedCollections(list);
       },
     },
   ];

client/src/pages/partitions/partitions.tsx

@@ -1,5 +1,5 @@
 import { makeStyles, Theme } from '@material-ui/core';
-import { FC, useContext, useEffect, useState } from 'react';
+import { FC, useCallback, useContext, useEffect, useState } from 'react';
 import {
   PartitionManageParam,
   // PartitionParam,
@@ -47,6 +47,9 @@ const Partitions: FC<{
     []
   );
   const [partitions, setPartitions] = useState<PartitionView[]>([]);
+  const [searchedPartitions, setSearchedPartitions] = useState<PartitionView[]>(
+    []
+  );
   const {
     pageSize,
     handlePageSize,
@@ -54,28 +57,29 @@ const Partitions: FC<{
     handleCurrentPage,
     total,
     data: partitionList,
-  } = usePaginationHook(partitions);
+  } = usePaginationHook(searchedPartitions);
   const [loading, setLoading] = useState<boolean>(true);
   const { setDialog, handleCloseDialog, openSnackBar } =
     useContext(rootContext);
 
-  useEffect(() => {
-    fetchPartitions(collectionName);
-  }, [collectionName]);
-
-  const fetchPartitions = async (collectionName: string) => {
+  const fetchPartitions = useCallback(async (collectionName: string) => {
     try {
       const res = await PartitionHttp.getPartitions(collectionName);
 
-      const partitons: PartitionView[] = res.map(p =>
+      const partitions: PartitionView[] = res.map(p =>
         Object.assign(p, { _statusElement: <Status status={p._status} /> })
       );
       setLoading(false);
-      setPartitions(partitons);
+      setPartitions(partitions);
+      setSearchedPartitions(partitions);
     } catch (err) {
       setLoading(false);
     }
-  };
+  }, []);
+
+  useEffect(() => {
+    fetchPartitions(collectionName);
+  }, [collectionName, fetchPartitions]);
 
   const handleDelete = async () => {
     for (const partition of selectedPartitions) {
@@ -161,6 +165,17 @@ const Partitions: FC<{
         ? t('deletePartitionError')
         : '',
     },
+    {
+      label: 'Search',
+      icon: 'search',
+      onSearch: (value: string) => {
+        const list = value
+          ? partitions.filter(p => p._name.includes(value))
+          : partitions;
+
+        setSearchedPartitions(list);
+      },
+    },
   ];
 
   const colDefinitions: ColDefinitionsType[] = [