Merge pull request #85 from Tumao727/bugfix/style-adjust

fix pagination and update table style

client/src/components/grid/Table.tsx

@@ -78,6 +78,8 @@ const useStyles = makeStyles(theme => ({
     },
   },
   cell: {
+    borderBottom: '1px solid #e9e9ed',
+
     '& p': {
       display: 'inline-block',
       verticalAlign: 'middle',
@@ -85,15 +87,9 @@ const useStyles = makeStyles(theme => ({
       textOverflow: 'ellipsis',
       whiteSpace: 'nowrap',
       maxWidth: '300px',
-      fontSize: '12.8px',
-    },
-    '& button': {
-      textTransform: 'inherit',
-      justifyContent: 'flex-start',
+      fontSize: '14px',
+      lineHeight: '20px',
     },
-    // '& svg': {
-    //   color: 'rgba(0, 0, 0, 0.33)',
-    // },
   },
   noData: {
     paddingTop: theme.spacing(6),
@@ -126,7 +122,6 @@ const EnhancedTable: FC<TableType> = props => {
   const [loadingRowCount, setLoadingRowCount] = useState<number>(0);
 
   const containerRef = useRef(null);
-  const rowRef = useRef(null);
 
   const handleRequestSort = (event: any, property: string) => {
     const isAsc = orderBy === property && order === 'asc';
@@ -145,7 +140,11 @@ const EnhancedTable: FC<TableType> = props => {
     if (setPageSize) {
       const containerHeight: number = (containerRef.current as any)!
         .offsetHeight;
-      const rowHeight: number = (rowRef.current as any)?.offsetHeight || 0;
+
+      // 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(
@@ -200,7 +199,6 @@ const EnhancedTable: FC<TableType> = props => {
 
                     return (
                       <TableRow
-                        ref={rowRef}
                         hover={showHoverStyle}
                         key={'row' + row[primaryKey] + index}
                         onClick={event => onSelected(event, row)}

client/src/components/status/StatusIcon.tsx

@@ -23,7 +23,7 @@ const StatusIcon: FC<StatusIconType> = props => {
       case 'creating':
         return (
           <CircularProgress
-            size={24}
+            size={20}
             thickness={8}
             classes={{ svg: classes.svg }}
           />

client/src/consts/Milvus.tsx

@@ -65,14 +65,14 @@ export const INDEX_CONFIG: {
     create: ['nlist', 'm'],
     search: ['nprobe'],
   },
-  IVF_SQ8: {
-    create: ['nlist'],
-    search: ['nprobe'],
-  },
-  IVF_SQ8_HYBRID: {
-    create: ['nlist'],
-    search: ['nprobe'],
-  },
+  // IVF_SQ8: {
+  //   create: ['nlist'],
+  //   search: ['nprobe'],
+  // },
+  // IVF_SQ8_HYBRID: {
+  //   create: ['nlist'],
+  //   search: ['nprobe'],
+  // },
   FLAT: {
     create: ['nlist'],
     search: ['nprobe'],
@@ -85,10 +85,10 @@ export const INDEX_CONFIG: {
     create: ['n_trees'],
     search: ['search_k'],
   },
-  RNSG: {
-    create: ['out_degree', 'candidate_pool_size', 'search_length', 'knng'],
-    search: ['search_length'],
-  },
+  // RNSG: {
+  //   create: ['out_degree', 'candidate_pool_size', 'search_length', 'knng'],
+  //   search: ['search_length'],
+  // },
 };
 
 export const COLLECTION_NAME_REGX = /^[0-9,a-z,A-Z$_]+$/;

client/src/hooks/Pagination.ts

@@ -7,9 +7,10 @@ export const usePaginationHook = (list: any[]) => {
   const total = list.length;
   const { data, offset } = useMemo(() => {
     const offset = pageSize * currentPage;
+    const data = list.slice(offset, offset + pageSize);
     return {
       offset,
-      data: list.slice(offset, offset + pageSize),
+      data,
     };
   }, [list, currentPage, pageSize]);
 

client/src/pages/connect/Connect.tsx

@@ -4,7 +4,7 @@ import { ITextfieldConfig } from '../../components/customInput/Types';
 import icons from '../../components/icons/Icons';
 import ConnectContainer from './ConnectContainer';
 import CustomInput from '../../components/customInput/CustomInput';
-import { useContext, useEffect, useMemo, useState } from 'react';
+import { useContext, useMemo, useState } from 'react';
 import { formatForm } from '../../utils/Form';
 import { useFormValidation } from '../../hooks/Form';
 import CustomButton from '../../components/customButton/CustomButton';

client/src/pages/structure/IndexTypeElement.tsx

@@ -1,6 +1,5 @@
 import { FC, useCallback, useContext, useEffect, useState } from 'react';
 import Chip from '@material-ui/core/Chip';
-import CustomButton from '../../components/customButton/CustomButton';
 import { IndexHttp } from '../../http/Index';
 import { IndexState } from '../../types/Milvus';
 import {
@@ -23,13 +22,43 @@ const useStyles = makeStyles((theme: Theme) => ({
     paddingLeft: theme.spacing(1),
   },
   btn: {
-    '& span': {
-      textTransform: 'uppercase',
-      whiteSpace: 'nowrap',
+    display: 'flex',
+    alignItems: 'center',
+    textTransform: 'uppercase',
+    whiteSpace: 'nowrap',
+
+    fontSize: '14px',
+    color: theme.palette.primary.main,
+
+    '&:hover': {
+      cursor: 'pointer',
+    },
+  },
+  btnDisabled: {
+    color: '#82838e',
+    pointerEvents: 'none',
+
+    '&:hover': {
+      cursor: 'default',
     },
   },
   chip: {
+    height: '24px',
     backgroundColor: '#e9e9ed',
+    padding: theme.spacing(0.5),
+
+    '& .icon': {
+      width: '16px',
+      height: '16px',
+    },
+  },
+  chipLabel: {
+    fontSize: '12px',
+    lineHeight: '16px',
+  },
+  addIcon: {
+    width: '20px',
+    height: '20px',
   },
 }));
 
@@ -136,14 +165,16 @@ const IndexTypeElement: FC<{
     switch (data._indexType) {
       case '': {
         return (
-          <CustomButton
-            disabled={data._createIndexDisabled}
-            className={classes.btn}
+          <div
+            role="button"
             onClick={handleCreate}
+            className={`${classes.btn} ${
+              data._createIndexDisabled ? classes.btnDisabled : ''
+            }`}
           >
-            <AddIcon />
+            <AddIcon classes={{ root: classes.addIcon }} />
             {indexTrans('create')}
-          </CustomButton>
+          </div>
         );
       }
       default: {
@@ -152,8 +183,8 @@ const IndexTypeElement: FC<{
         ) : (
           <Chip
             label={data._indexType}
-            classes={{ root: classes.chip }}
-            deleteIcon={<DeleteIcon />}
+            classes={{ root: classes.chip, label: classes.chipLabel }}
+            deleteIcon={<DeleteIcon classes={{ root: 'icon' }} />}
             onDelete={handleDelete}
           />
         );

client/src/pages/structure/Types.ts

@@ -41,10 +41,10 @@ export interface IndexView {
 export type IndexType =
   | 'FLAT'
   | 'IVF_FLAT'
-  | 'IVF_SQ8'
+  // | 'IVF_SQ8'
   // | 'IVF_SQ8_HYBRID'
   | 'IVF_PQ'
-  | 'RNSG'
+  // | 'RNSG'
   | 'HNSW'
   | 'ANNOY';
 

server/src/collections/collections.service.ts

@@ -112,6 +112,7 @@ export class CollectionsService {
       totalData: 0,
     };
     const res = await this.getCollectionNames();
+    data.collectionCount = res.collection_names.length;
     if (res.collection_names.length > 0) {
       for (const name of res.collection_names) {
         const collectionStatistics = await this.getCollectionStatistics({