UI update

Signed-off-by: ryjiang <jiangruiyi@gmail.com>

client/src/components/grid/Grid.tsx

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

client/src/components/grid/Table.tsx

@@ -40,17 +40,13 @@ const useStyles = makeStyles(theme => ({
   box: {
     backgroundColor: '#fff',
   },
-  paper: {
-    width: '100%',
-    marginBottom: theme.spacing(2),
-  },
   table: {
     minWidth: '100%',
     minHeight: 57,
   },
   tableCell: {
     background: theme.palette.common.white,
-    padding: `${theme.spacing(1.5)} ${theme.spacing(2)}`,
+    padding: `${theme.spacing(1.5)} `,
   },
   cellContainer: {
     display: 'flex',
@@ -136,8 +132,10 @@ const EnhancedTable: FC<TableType> = props => {
     handleSort,
     order,
     orderBy,
-    tableHeaderHeight = 57,
-    rowHeight = 49,
+    tableHeaderHeight,
+    rowHeight,
+    showPagination,
+    pagerHeight,
   } = props;
   const classes = useStyles({ tableCellMaxWidth });
   const [loadingRowCount, setLoadingRowCount] = useState<number>(0);
@@ -145,31 +143,34 @@ const EnhancedTable: FC<TableType> = props => {
   const { t: commonTrans } = useTranslation();
   const copyTrans = commonTrans('copy');
 
-  useEffect(() => {
-    // if the type of containerRef is null, set default height.
-    let height: number =
-      containerRef.current?.offsetHeight || tableHeaderHeight;
-    if (height < tableHeaderHeight) {
-      height = tableHeaderHeight;
+  const calculateRowCountAndPageSize = () => {
+    if (containerRef.current && rowHeight > 0) {
+      const containerHeight: number = containerRef.current.offsetHeight;
+      const rowCount = Math.floor(
+        (containerHeight -
+          tableHeaderHeight -
+          (showPagination ? pagerHeight : 0)) /
+          rowHeight
+      );
+      // console.log(rowCount, containerHeight, tableHeaderHeight);
+      setLoadingRowCount(rowCount);
+
+      if (setPageSize) {
+        setPageSize(rowCount);
+      }
     }
-    // calculate how many rows can be fit in the container
-    const count = Math.floor((height - tableHeaderHeight) / rowHeight);
-    setLoadingRowCount(count);
-  }, [containerRef]);
+  };
 
   useEffect(() => {
-    if (setPageSize) {
-      const containerHeight: number = (containerRef.current as any)!
-        .offsetHeight;
+    calculateRowCountAndPageSize();
+    // Add event listener for window resize
+    window.addEventListener('resize', calculateRowCountAndPageSize);
 
-      if (rowHeight > 0) {
-        const pageSize = Math.floor(
-          (containerHeight - tableHeaderHeight) / rowHeight
-        );
-        setPageSize(pageSize);
-      }
-    }
-  }, [setPageSize, tableHeaderHeight, rowHeight]);
+    // Clean up event listener on unmount
+    return () => {
+      window.removeEventListener('resize', calculateRowCountAndPageSize);
+    };
+  }, [tableHeaderHeight, rowHeight, setPageSize]);
 
   return (
     <TableContainer
@@ -270,28 +271,33 @@ const EnhancedTable: FC<TableType> = props => {
                             <div className={classes.cellContainer}>
                               {row[colDef.id] && (
                                 <>
-                                  <Typography title={row[colDef.id]}>
-                                    {colDef.onClick ? (
-                                      <Button
-                                        color="primary"
-                                        data-data={row[colDef.id]}
-                                        data-index={index}
-                                        size="small"
-                                        onClick={e => {
-                                          colDef.onClick &&
-                                            colDef.onClick(e, row);
-                                        }}
-                                      >
-                                        {colDef.formatter
-                                          ? colDef.formatter(row)
-                                          : row[colDef.id]}
-                                      </Button>
-                                    ) : colDef.formatter ? (
-                                      colDef.formatter(row)
-                                    ) : (
-                                      row[colDef.id]
-                                    )}
-                                  </Typography>
+                                  {colDef.onClick ? (
+                                    <Button
+                                      color="primary"
+                                      data-data={row[colDef.id]}
+                                      data-index={index}
+                                      size="small"
+                                      onClick={e => {
+                                        colDef.onClick &&
+                                          colDef.onClick(e, row);
+                                      }}
+                                    >
+                                      {colDef.formatter ? (
+                                        colDef.formatter(row)
+                                      ) : (
+                                        <Typography title={row[colDef.id]}>
+                                          {row[colDef.id]}
+                                        </Typography>
+                                      )}
+                                    </Button>
+                                  ) : colDef.formatter ? (
+                                    colDef.formatter(row)
+                                  ) : (
+                                    <Typography title={row[colDef.id]}>
+                                      {row[colDef.id]}
+                                    </Typography>
+                                  )}
+
                                   {needCopy && (
                                     <CopyButton
                                       label={copyTrans.label}

client/src/components/grid/TableHead.tsx

@@ -25,12 +25,12 @@ const useStyles = makeStyles(theme => ({
   },
   tableCell: {
     // background: theme.palette.common.t,
-    paddingLeft: theme.spacing(2),
+    padding: theme.spacing(1.5),
     // borderBottom: 'none',
   },
   tableHeader: {
     color: 'rgba(0, 0, 0, 0.6)',
-    fontSize: '12.8px',
+    fontWeight: 500,
   },
   tableRow: {
     // borderBottom: '1px solid rgba(0, 0, 0, 0.6);',
@@ -47,7 +47,7 @@ const EnhancedTableHead: FC<TableHeadType> = props => {
     colDefinitions = [],
     handleSort,
     openCheckBox,
-    disableSelect
+    disableSelect,
   } = props;
   const classes = useStyles();
   const createSortHandler = (property: string) => (event: React.MouseEvent) => {
@@ -65,7 +65,10 @@ const EnhancedTableHead: FC<TableHeadType> = props => {
               checked={rowCount > 0 && numSelected === rowCount}
               onChange={onSelectAllClick}
               disabled={disableSelect}
-              inputProps={{ 'aria-label': 'select all desserts', 'role': 'checkbox' }}
+              inputProps={{
+                'aria-label': 'select all desserts',
+                role: 'checkbox',
+              }}
             />
           </TableCell>
         )}
@@ -113,4 +116,4 @@ const EnhancedTableHead: FC<TableHeadType> = props => {
   );
 };
 
-export default EnhancedTableHead;
+export default EnhancedTableHead;

client/src/components/grid/ToolBar.tsx

@@ -33,7 +33,7 @@ const useStyles = makeStyles((theme: Theme) =>
       alignItems: 'center',
     },
     toolbar: {
-      marginBottom: theme.spacing(2),
+      marginBottom: theme.spacing(1),
     },
   })
 );
@@ -62,7 +62,7 @@ const CustomToolBar: FC<ToolBarType> = props => {
   return (
     <>
       <Grid container role="toolbar" className={classes.toolbar}>
-        <Grid item xs={8}>
+        <Grid item xs={10}>
           {leftConfigs.map((c, i) => {
             const isSelect = c.type === 'select' || c.type === 'groupSelect';
             if (isSelect) {
@@ -115,7 +115,7 @@ const CustomToolBar: FC<ToolBarType> = props => {
         </Grid>
 
         {rightConfigs.length > 0 && (
-          <Grid className={classes.gridEnd} item xs={4}>
+          <Grid className={classes.gridEnd} item xs={2}>
             {rightConfigs.map((c, i) => {
               if (c.icon === 'search') {
                 if (!c.onSearch) {

client/src/components/grid/Types.ts

@@ -92,8 +92,10 @@ export type TableType = {
   handleSort?: (e: any, orderBy: string) => void;
   order?: SortDirection;
   orderBy?: string;
-  tableHeaderHeight?: number;
-  rowHeight?: number;
+  tableHeaderHeight: number;
+  rowHeight: number;
+  showPagination: boolean;
+  pagerHeight: number
 };
 
 export type ColDefinitionsType = {
@@ -150,6 +152,7 @@ export type AttuGridType = ToolBarType & {
   tableHeaderHeight?: number;
   rowHeight?: number;
   hideOnDisable?: boolean;
+  pagerHeight?: number;
 };
 
 export type ActionBarType = {

client/src/hooks/Query.ts

@@ -20,6 +20,7 @@ export const useQuery = (params: {
   const [total, setTotal] = useState<number>(0);
   const [expr, setExpr] = useState<string>('');
   const [queryResult, setQueryResult] = useState<any>({ data: [], latency: 0 });
+  const lastQuery = useRef<any>();
 
   // build local cache for pk ids
   const pageCache = useRef(new Map());
@@ -59,23 +60,26 @@ export const useQuery = (params: {
     page: number = currentPage,
     consistency_level = collection.consistencyLevel
   ) => {
-    if (!collection.primaryKey.value || !collection.loaded) {
-      //   console.info('[skip running query]: no key yet');
-      return;
-    }
     const _expr = getPageExpr(page);
     // console.log('query expr', _expr);
     params.onQueryStart(_expr);
 
     try {
-      // execute query
-      const res = await Collection.queryData(params.collectionName, {
+      const queryParams = {
         expr: _expr,
         output_fields: collection.fields.map((i: any) => i.name),
         limit: pageSize || 10,
         consistency_level,
         // travel_timestamp: timeTravelInfo.timestamp,
-      });
+      };
+
+      // cache last query
+      lastQuery.current = queryParams;
+      // execute query
+      const res = await Collection.queryData(
+        params.collectionName,
+        queryParams
+      );
 
       // get last item of the data
       const lastItem = res.data[res.data.length - 1];
@@ -136,9 +140,6 @@ export const useQuery = (params: {
   };
 
   const count = async (consistency_level = collection.consistency_level) => {
-    if (!collection.primaryKey.value || !collection.loaded) {
-      return;
-    }
     const count = 'count(*)';
     const res = await Collection.queryData(params.collectionName, {
       expr: expr,
@@ -163,7 +164,10 @@ export const useQuery = (params: {
 
   // query if expr is changed
   useEffect(() => {
-    // reset
+    if (!collection.primaryKey.value || !collection.loaded) {
+      console.info('[skip running query]: no key yet');
+      return;
+    } // reset
     reset();
     // get count;
     count();
@@ -173,6 +177,10 @@ export const useQuery = (params: {
 
   // query if collection is changed
   useEffect(() => {
+    if (!collection.primaryKey.value || !collection.loaded) {
+      // console.info('[skip running query]: no key yet');
+      return;
+    }
     // reset
     reset();
     // get count;
@@ -183,6 +191,10 @@ export const useQuery = (params: {
 
   // query if page size is changed
   useEffect(() => {
+    if (!collection.primaryKey.value || !collection.loaded) {
+      // console.info('[skip running query]: no key yet');
+      return;
+    }
     // reset
     reset();
     // do the query

client/src/i18n/cn/button.ts

@@ -39,6 +39,14 @@ const btnTrans = {
   copyJsonTooltip: '复制所选的数据为JSON格式',
   emptyTooltip: '清空所有数据',
   deleteTooltip: '删除所选的数据',
+  deleteColTooltip: '删除所选的collection',
+  duplicateTooltip: '复制collection，不包含数据',
+  renameTooltip: '重命名collection',
+
+  // disable tooltip
+  downloadDisabledTooltip: '导出前请先选择数据',
+  emptyDataDisabledTooltip: '请先选择一个已加载的集合以清空数据',
+  deleteDisableTooltip: '请至少选择一个要删除的项目。',
 };
 
 export default btnTrans;

client/src/i18n/cn/collection.ts

@@ -6,18 +6,9 @@ const collectionTrans = {
   count: 'Entity数量',
 
   create: '创建Collection',
-  delete: '删除',
-  deleteTooltip: '请至少选择一个要删除的项目。',
-  rename: '重命名',
-  renameTooltip: '请选择一个要重命名的Collection。',
-  duplicate: '复制',
-  duplicateTooltip: '请选择一个要复制的Collection。',
   newColName: '新的Collection名称',
   alias: '别名',
   aliasTooltip: '请选择一个Collection创建别名',
-  download: '下载',
-  empty: '清空数据',
-
   collection: 'Collection',
   entities: 'Entities',
 
@@ -38,8 +29,6 @@ const collectionTrans = {
     '一致性是指确保每个节点或副本在给定时间写入或读取数据时具有相同数据视图的属性。',
   entityCountInfo:
     '这个计数是一个近似值，并可能因为Milvus的独特机制而稍有延迟。实际的计数可能会有所变化，并会定期更新。请注意，这个数字应该被用作参考，而不是精确的计数。',
-  duplicateCollectionInfo:
-    '复制Collection不会复制Collection中的数据。它只会使用现有的Schema创建一个新的Collection。',
 
   // create dialog
   createTitle: '创建Collection',
@@ -142,12 +131,6 @@ const collectionTrans = {
   clickToLoad: '点击加载collection。',
   clickToRelease: '点击释放collection。',
   collectionIsLoading: 'colleciton正在加载...',
-
-  // flush dialog
-  flush: '落盘',
-  flushDialogInfo: `落盘是一个在数据被插入到Milvus后，封闭和索引任何剩余段的过程。这避免了在未封闭的段上进行暴力搜索。  <br /><br />最好在插入会话结束时使用落盘，以防止数据碎片化。 <br /><br /><strong>注意：对于大型数据集，此操作可能需要一些时间。</strong>`,
-
-  emptyDataDialogInfo: `您正在尝试清空数据。此操作无法撤销，请谨慎操作。`,
 };
 
 export default collectionTrans;

client/src/i18n/cn/dialog.ts

@@ -15,6 +15,12 @@ const dialogTrans = {
 
   createTitle: `在 "{{name}}" 上创建 {{type}}`,
   emptyTitle: `清空{{type}}的数据`,
+
+  // info
+  duplicateCollectionInfo:
+    '复制Collection不会复制Collection中的数据。它只会使用现有的Schema创建一个新的Collection。',
+  flushDialogInfo: `落盘是一个在数据被插入到Milvus后，封闭和索引任何剩余段的过程。这避免了在未封闭的段上进行暴力搜索。  <br /><br />最好在插入会话结束时使用落盘，以防止数据碎片化。 <br /><br /><strong>注意：对于大型数据集，此操作可能需要一些时间。</strong>`,
+  emptyDataDialogInfo: `您正在尝试清空数据。此操作无法撤销，请谨慎操作。`,
 };
 
 export default dialogTrans;

client/src/i18n/en/button.ts

@@ -37,8 +37,16 @@ const btnTrans = {
   importSampleDataTooltip: 'Import sample data into the current collection',
   exportTooltip: 'Export selected data to csv',
   copyJsonTooltip: 'Copy selected data as JSON format',
-  emptyTooltip: 'Empty all data in the collection',
+  emptyTooltip: 'Empty all data in the selected collection',
   deleteTooltip: 'Delete selected data',
+  deleteColTooltip: 'Drop selected collection',
+  duplicateTooltip: 'Duplicate selected collection without data',
+  renameTooltip: 'Rename collection',
+
+  // disable tooltip
+  downloadDisabledTooltip: 'Please select data before exporting',
+  emptyDataDisabledTooltip: 'Please select one loaded collection to empty data',
+  deleteDisableTooltip: 'Please select at least one item to delete.',
 };
 
 export default btnTrans;

client/src/i18n/en/collection.ts

@@ -6,20 +6,9 @@ const collectionTrans = {
   count: 'Entity Count',
 
   create: 'Collection',
-  delete: 'delete',
-  deleteTooltip: 'Please select at least one item to delete.',
-  rename: 'rename',
-  renameTooltip: 'Please select one collection to rename.',
-  duplicate: 'duplicate',
-  duplicateTooltip: 'Please select one collection to duplicate.',
   newColName: 'New Collection Name',
   alias: 'Alias',
   aliasTooltip: 'Please select one collection to create alias',
-  download: 'Download',
-  downloadDisabledTooltip: 'Please select data before exporting',
-  empty: 'empty data',
-  emptyDataDisableTooltip: 'Please select one loaded collection to empty data',
-
   collection: 'Collection',
   entities: 'entities',
 
@@ -40,8 +29,6 @@ const collectionTrans = {
     'Consistency refers to the property that ensures every node or replica has the same view of data when writing or reading data at a given time.',
   entityCountInfo:
     'This count is an approximation and may be slightly delayed due to the unique mechanisms of Milvus. The actual count may vary and is updated periodically. Please note that this number should be used as a reference and not as an exact count.',
-  duplicateCollectionInfo:
-    'Duplicating a collection does not copy the data within the collection. It only creates a new collection using the existing schema.',
 
   // create dialog
   createTitle: 'Create Collection',
@@ -142,13 +129,6 @@ const collectionTrans = {
   clickToLoad: 'Click to load the collection.',
   clickToRelease: 'Click to release the collection.',
   collectionIsLoading: 'The collection is loading...',
-
-  // flush dialog
-  flush: 'Flush',
-  flushDialogInfo: `Flush is a process that seals and indexes any remaining segments after data is upserted into Milvus. This avoids brute force searches on unsealed segments.  <br /><br />It's best to use flush at the end of an upsert session to prevent data fragmentation. <br /><br /><strong>Note: that this operation may take some time for large datasets.</strong>`,
-
-  // empty dialog
-  emptyDataDialogInfo: `You are attempting to empty the data. This action cannot be undone, please proceed with caution.`,
 };
 
 export default collectionTrans;

client/src/i18n/en/dialog.ts

@@ -15,6 +15,12 @@ const dialogTrans = {
 
   createTitle: `Create {{type}} on "{{name}}"`,
   emptyTitle: `Empty data for {{type}}`,
+
+  // info
+  duplicateCollectionInfo:
+    'Duplicating a collection does not copy the data within the collection. It only creates a new collection using the existing schema.',
+  flushDialogInfo: `Flush is a process that seals and indexes any remaining segments after data is upserted into Milvus. This avoids brute force searches on unsealed segments.  <br /><br />It's best to use flush at the end of an upsert session to prevent data fragmentation. <br /><br /><strong>Note: that this operation may take some time for large datasets.</strong>`,
+  emptyDataDialogInfo: `You are attempting to empty the data. This action cannot be undone, please proceed with caution.`,
 };
 
 export default dialogTrans;

client/src/pages/collections/Collections.tsx

@@ -147,19 +147,6 @@ const Collections = () => {
     const data = filteredCollections.map(v => {
       // const indexStatus = statusRes.find(item => item.collectionName === v.collectionName);
       Object.assign(v, {
-        nameElement: (
-          <Link
-            to={`/collections/${v.collectionName}/data`}
-            className={classes.link}
-            title={v.collectionName}
-          >
-            <Highlighter
-              textToHighlight={v.collectionName}
-              searchWords={[search]}
-              highlightClassName={classes.highlight}
-            />
-          </Link>
-        ),
         features: (
           <>
             {v.autoID ? (
@@ -302,6 +289,7 @@ const Collections = () => {
       btnVariant: 'text',
       btnColor: 'secondary',
       label: btnTrans('importFile'),
+      tooltip: btnTrans('importFileTooltip'),
       onClick: () => {
         setDialog({
           open: true,
@@ -359,8 +347,7 @@ const Collections = () => {
         });
       },
       label: btnTrans('rename'),
-      // tooltip: collectionTrans('deleteTooltip'),
-      disabledTooltip: collectionTrans('renameTooltip'),
+      tooltip: btnTrans('renameTooltip'),
       disabled: data => data.length !== 1,
     },
     {
@@ -391,8 +378,7 @@ const Collections = () => {
         });
       },
       label: btnTrans('duplicate'),
-      // tooltip: collectionTrans('deleteTooltip'),
-      disabledTooltip: collectionTrans('duplicateTooltip'),
+      tooltip: btnTrans('duplicateTooltip'),
       disabled: data => data.length !== 1,
     },
 
@@ -423,8 +409,8 @@ const Collections = () => {
         });
       },
       label: btnTrans('drop'),
-      // tooltip: collectionTrans('deleteTooltip'),
-      disabledTooltip: collectionTrans('deleteTooltip'),
+      tooltip: btnTrans('deleteColTooltip'),
+      disabledTooltip: btnTrans('deleteDisableTooltip'),
       disabled: data => data.length < 1,
     },
 
@@ -451,10 +437,25 @@ const Collections = () => {
 
   const colDefinitions: ColDefinitionsType[] = [
     {
-      id: 'nameElement',
+      id: 'collectionName',
       align: 'left',
       disablePadding: true,
       sortBy: 'collectionName',
+      formatter({ collectionName }) {
+        return (
+          <Link
+            to={`/collections/${collectionName}/data`}
+            className={classes.link}
+            title={collectionName}
+          >
+            <Highlighter
+              textToHighlight={collectionName}
+              searchWords={[search]}
+              highlightClassName={classes.highlight}
+            />
+          </Link>
+        );
+      },
       label: collectionTrans('name'),
     },
     {

client/src/pages/dialogs/DuplicateCollectionDailog.tsx

@@ -95,7 +95,7 @@ const DuplicateCollectionDialog: FC<DuplicateCollectionDialogProps> = props => {
       children={
         <>
           <Typography variant="body1" component="p" className={classes.desc}>
-            {collectionTrans('duplicateCollectionInfo')}
+            {dialogTrans('duplicateCollectionInfo')}
           </Typography>
           <CustomInput
             type="text"

client/src/pages/dialogs/EmptyDataDialog.tsx

@@ -28,7 +28,7 @@ const EmptyDataDialog: FC<EmptyDataProps> = props => {
         type: collectionTrans('collection'),
       })}
       compare={collectionName}
-      text={collectionTrans('emptyDataDialogInfo')}
+      text={dialogTrans('emptyDataDialogInfo')}
       handleDelete={handleDelete}
     />
   );

client/src/pages/dialogs/FlushDialog.tsx

@@ -47,12 +47,12 @@ const FlushDialog: FC<FlushDialogProps> = props => {
             component="p"
             className={classes.desc}
             dangerouslySetInnerHTML={{
-              __html: collectionTrans('flushDialogInfo'),
+              __html: dialogTrans('flushDialogInfo'),
             }}
           ></Typography>
         </>
       }
-      confirmLabel={btnTrans('confirm')}
+      confirmLabel={btnTrans('flush')}
       handleConfirm={handleConfirm}
       confirmDisabled={disabled}
     />

client/src/pages/partitions/Partitions.tsx

@@ -188,7 +188,7 @@ const Partitions = () => {
                 : ''
             }
             partitions={partitions}
-            handleInsert={handleInsert}
+            onInsert={handleInsert}
           />
         );
       },

client/src/pages/query/Query.tsx

@@ -208,7 +208,7 @@ const Query = () => {
       disabled: () => total == 0,
       label: btnTrans('empty'),
       tooltip: btnTrans('emptyTooltip'),
-      disabledTooltip: collectionTrans('emptyDataDisableTooltip'),
+      disabledTooltip: btnTrans('emptyDataDisabledTooltip'),
     },
     {
       type: 'button',
@@ -219,7 +219,7 @@ const Query = () => {
       label: btnTrans('export'),
       icon: 'download',
       tooltip: btnTrans('exportTooltip'),
-      disabledTooltip: collectionTrans('downloadDisabledTooltip'),
+      disabledTooltip: btnTrans('downloadDisabledTooltip'),
       disabled: () => !selectedData?.length,
     },
     {
@@ -237,7 +237,7 @@ const Query = () => {
       label: btnTrans('copyJson'),
       icon: 'copy',
       tooltip: btnTrans('copyJsonTooltip'),
-      disabledTooltip: collectionTrans('downloadDisabledTooltip'),
+      disabledTooltip: btnTrans('downloadDisabledTooltip'),
       disabled: () => !selectedData?.length,
     },
 
@@ -265,7 +265,7 @@ const Query = () => {
       label: btnTrans('delete'),
       icon: 'delete',
       tooltip: btnTrans('deleteTooltip'),
-      disabledTooltip: collectionTrans('deleteTooltip'),
+      disabledTooltip: collectionTrans('deleteDisabledTooltip'),
       disabled: () => selectedData.length === 0,
     },
   ];