add collection filter

client/src/components/customInput/SearchInput.tsx

@@ -1,5 +1,6 @@
 import { InputAdornment, makeStyles, TextField } from '@material-ui/core';
-import { useRef, FC, useState } from 'react';
+import { useRef, FC, useState, useEffect } from 'react';
+import { useHistory } from 'react-router-dom';
 import Icons from '../icons/Icons';
 import { SearchType } from './Types';
 
@@ -48,6 +49,8 @@ const useSearchStyles = makeStyles(theme => ({
   },
 }));
 
+let timer: NodeJS.Timeout | null = null;
+
 const SearchInput: FC<SearchType> = props => {
   const { searchText = '', onClear = () => {}, onSearch = () => {} } = props;
   const [searchValue, setSearchValue] = useState<string>(searchText);
@@ -56,8 +59,33 @@ const SearchInput: FC<SearchType> = props => {
 
   const classes = useSearchStyles({ searched, showInput });
 
+  const history = useHistory();
   const inputRef = useRef<any>(null);
 
+  const savedSearchFn = useRef<(value: string) => void>(() => {});
+  useEffect(() => {
+    savedSearchFn.current = onSearch;
+  }, [onSearch]);
+
+  useEffect(() => {
+    timer = setTimeout(() => {
+      const params = new URLSearchParams();
+      if (searchValue) {
+        params.append('search', searchValue);
+      } else {
+        params.delete('search');
+      }
+      // add search value in url
+      history.push({ search: params.toString() });
+
+      savedSearchFn.current(searchValue);
+    }, 300);
+
+    return () => {
+      timer && clearTimeout(timer);
+    };
+  }, [searchValue, history]);
+
   const onIconClick = () => {
     setShowInput(true);
     if (inputRef.current) {

client/src/pages/collections/Collection.tsx

@@ -10,8 +10,8 @@ import { parseLocationSearch } from '../../utils/Format';
 import Structure from '../structure/Structure';
 
 enum TAB_EMUM {
-  'partition',
   'structure',
+  'partition',
 }
 
 const Collection = () => {
@@ -29,7 +29,7 @@ const Collection = () => {
   const activeTabIndex = useMemo(() => {
     const { activeIndex } = location.search
       ? parseLocationSearch(location.search)
-      : { activeIndex: TAB_EMUM.partition };
+      : { activeIndex: TAB_EMUM.structure };
     return Number(activeIndex);
   }, [location]);
 

client/src/pages/collections/Collections.tsx

@@ -44,6 +44,9 @@ const Collections = () => {
   useNavigationHook(ALL_ROUTER_TYPES.COLLECTIONS);
   const { handleAction } = useDialogHook({ type: 'collection' });
   const [collections, setCollections] = useState<CollectionView[]>([]);
+  const [searchedCollections, setSearchedCollections] = useState<
+    CollectionView[]
+  >([]);
   const {
     pageSize,
     handlePageSize,
@@ -51,7 +54,7 @@ const Collections = () => {
     handleCurrentPage,
     total,
     data: collectionList,
-  } = usePaginationHook(collections);
+  } = usePaginationHook(searchedCollections);
   const [loading, setLoading] = useState<boolean>(true);
   const [selectedCollections, setSelectedCollections] = useState<
     CollectionView[]
@@ -75,27 +78,27 @@ const Collections = () => {
       const res = await CollectionHttp.getCollections();
       const statusRes = await CollectionHttp.getCollectionsIndexState();
       setLoading(false);
+      const collections = res.map(v => {
+        const indexStatus = statusRes.find(item => item._name === v._name);
+        Object.assign(v, {
+          nameElement: (
+            <Link to={`/collections/${v._name}`} className={classes.link}>
+              {v._name}
+            </Link>
+          ),
+          statusElement: <Status status={v._status} />,
+          indexCreatingElement: (
+            <StatusIcon
+              type={indexStatus?._indexState || ChildrenStatusType.FINISH}
+            />
+          ),
+        });
 
-      setCollections(
-        res.map(v => {
-          const indexStatus = statusRes.find(item => item._name === v._name);
-          Object.assign(v, {
-            nameElement: (
-              <Link to={`/collections/${v._name}`} className={classes.link}>
-                {v._name}
-              </Link>
-            ),
-            statusElement: <Status status={v._status} />,
-            indexCreatingElement: (
-              <StatusIcon
-                type={indexStatus?._indexState || ChildrenStatusType.FINISH}
-              />
-            ),
-          });
+        return v;
+      });
 
-          return v;
-        })
-      );
+      setCollections(collections);
+      setSearchedCollections(collections);
     } catch (err) {
       setLoading(false);
     }
@@ -105,6 +108,18 @@ 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];
@@ -193,6 +208,13 @@ const Collections = () => {
       icon: 'delete',
       disabled: data => data.length === 0,
     },
+    {
+      label: 'Search',
+      icon: 'search',
+      onSearch: (value: string) => {
+        handleSearch(value);
+      },
+    },
   ];
 
   const colDefinitions: ColDefinitionsType[] = [