Filter loaded collection on search page and grid row size (#145)

* fix attu grid

* remove console

* use LOADING_STATE

client/src/components/grid/Grid.tsx

@@ -101,6 +101,8 @@ const AttuGrid: FC<AttuGridType> = props => {
   const {
     rowCount = 20,
     rowsPerPage = 10,
+    tableHeaderHeight = 57,
+    rowHeight = 49,
     primaryKey = 'id',
     showToolbar = false,
     toolbarConfigs = [],
@@ -225,6 +227,8 @@ const AttuGrid: FC<AttuGridType> = props => {
           handleSort={handleSort}
           order={order}
           orderBy={orderBy}
+          tableHeaderHeight={tableHeaderHeight}
+          rowHeight={rowHeight}
         ></Table>
         {rowCount && showPagination ? (
           <TablePagination

client/src/components/grid/Table.tsx

@@ -132,6 +132,8 @@ const EnhancedTable: FC<TableType> = props => {
     handleSort,
     order,
     orderBy,
+    tableHeaderHeight = 57,
+    rowHeight = 49,
   } = props;
   const classes = useStyles({ tableCellMaxWidth });
   const [loadingRowCount, setLoadingRowCount] = useState<number>(0);
@@ -158,11 +160,7 @@ const EnhancedTable: FC<TableType> = props => {
       const containerHeight: number = (containerRef.current as any)!
         .offsetHeight;
 
-      // table default row height is 54
-      // if pass component as row item, its max height should be 54 too
-      const rowHeight = 54;
       // table header default height is 57
-      const tableHeaderHeight: number = 57;
       if (rowHeight > 0) {
         const pageSize = Math.floor(
           (containerHeight - tableHeaderHeight) / rowHeight
@@ -170,7 +168,7 @@ const EnhancedTable: FC<TableType> = props => {
         setPageSize(pageSize);
       }
     }
-  }, [setPageSize]);
+  }, [setPageSize, tableHeaderHeight, rowHeight]);
 
   return (
     <TableContainer

client/src/components/grid/Types.ts

@@ -88,6 +88,8 @@ export type TableType = {
   handleSort?: (e: any, orderBy: string) => void;
   order?: SortDirection;
   orderBy?: string;
+  tableHeaderHeight?: number;
+  rowHeight?: number;
 };
 
 export type ColDefinitionsType = {
@@ -140,6 +142,8 @@ export type AttuGridType = ToolBarType & {
   handleSort?: (e: any, orderBy: string) => void;
   order?: SortDirection;
   orderBy?: string;
+  tableHeaderHeight?: number;
+  rowHeight?: number;
 };
 
 export type ActionBarType = {

client/src/i18n/cn/search.ts

@@ -3,7 +3,7 @@ const searchTrans = {
   secondTip: '2. Choose collection and field',
   thirdTip: '3. Set search parameters',
   vectorPlaceholder: 'Please input your vector value here, e.g. [1, 2, 3, 4]',
-  collection: 'Choose Collection',
+  collection: 'Choose Loaded Collection',
   noCollection: 'No collection',
   field: 'Choose Field',
   startTip: 'Start your vector search',

client/src/i18n/cn/success.ts

@@ -1,10 +1,10 @@
 const successTrans = {
   connect: 'Connection to milvus successful',
-  create: `{{name}} has been created`,
-  load: `{{name}} has been loaded`,
-  delete: `{{name}} successfully dropped`,
-  release: `{{name}} has been released`,
-  update: `{{name}} has been updated`,
+  create: `{{name}} has been created.`,
+  load: `{{name}} is loading.`,
+  delete: `{{name}} successfully dropped,`,
+  release: `{{name}} has been released,`,
+  update: `{{name}} has been updated,`,
 };
 
 export default successTrans;

client/src/i18n/en/search.ts

@@ -3,9 +3,9 @@ const searchTrans = {
   secondTip: '1. Choose collection and field',
   thirdTip: '3. Set search parameters',
   vectorPlaceholder: 'Please input your vector value here, e.g. [1, 2, 3, 4]',
-  collection: 'Choose Collection',
-  noCollection: 'No collection',
-  field: 'Choose Field',
+  collection: 'Choose loaded collection',
+  noCollection: 'No loaded collection',
+  field: 'Choose vector field',
   startTip: 'Start your vector search',
   empty: 'No result',
   result: 'Search Results',

client/src/i18n/en/success.ts

@@ -1,10 +1,10 @@
 const successTrans = {
   connect: 'Connection to milvus successful',
-  create: `{{name}} has been created`,
-  load: `{{name}} has been loaded`,
-  delete: `{{name}} successfully dropped`,
-  release: `{{name}} has been released`,
-  update: `{{name}} has been updated`,
+  create: `{{name}} has been created.`,
+  load: `{{name}} is loading.`,
+  delete: `{{name}} successfully dropped,`,
+  release: `{{name}} has been released,`,
+  update: `{{name}} has been updated,`,
 };
 
 export default successTrans;

client/src/pages/search/VectorSearch.tsx

@@ -36,6 +36,7 @@ import { parseLocationSearch } from '../../utils/Format';
 import { cloneObj, generateVector } from '../../utils/Common';
 import { CustomDatePicker } from '../../components/customDatePicker/CustomDatePicker';
 import { useTimeTravelHook } from '../../hooks/TimeTravel';
+import { LOADING_STATE } from '../../consts/Milvus';
 
 const VectorSearch = () => {
   useNavigationHook(ALL_ROUTER_TYPES.SEARCH);
@@ -221,7 +222,7 @@ const VectorSearch = () => {
   // fetch data
   const fetchCollections = useCallback(async () => {
     const collections = await CollectionHttp.getCollections();
-    setCollections(collections);
+    setCollections(collections.filter(c => c._status === LOADING_STATE.LOADED));
   }, []);
 
   const fetchFieldsWithIndex = useCallback(