support flush (#351)

Signed-off-by: ruiyi.jiang <ruiyi.jiang@zilliz.com>

client/src/components/icons/Icons.tsx

@@ -110,6 +110,11 @@ const icons: { [x in IconsType]: (props?: any) => React.ReactElement } = {
   key: (props = {}) => (
     <SvgIcon viewBox="0 0 16 16" component={KeyIcon} {...props} />
   ),
+  saveAs: (props = {}) => (
+    <svg viewBox="0 0 24 24" {...props} fill="currentColor" width="24">
+      <path d="M17 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V7l-4-4zm-5 16c-1.66 0-3-1.34-3-3s1.34-3 3-3 3 1.34 3 3-1.34 3-3 3zm3-10H5V5h10v4z"></path>{' '}
+    </svg>
+  ),
   upload: (props = {}) => (
     <SvgIcon
       viewBox="0 0 16 16"

client/src/components/icons/Types.ts

@@ -42,4 +42,5 @@ export type IconsType =
   | 'edit'
   | 'database'
   | 'uploadFile'
-  | 'compact';
+  | 'compact'
+  | 'saveAs';

client/src/i18n/cn/collection.ts

@@ -143,6 +143,10 @@ const collectionTrans = {
   clickToLoad: '点击加载collection。',
   clickToRelease: '点击释放collection。',
   collectionIsLoading: 'colleciton正在加载...',
+
+  // flush dialog
+  flush: '落盘',
+  flushDialogInfo: `落盘是一个在数据被插入到Milvus后，封闭和索引任何剩余段的过程。这避免了在未封闭的段上进行暴力搜索。  <br /><br />最好在插入会话结束时使用落盘，以防止数据碎片化。 <br /><br /><strong>注意：对于大型数据集，此操作可能需要一些时间。</strong>`,
 };
 
 export default collectionTrans;

client/src/i18n/cn/dialog.ts

@@ -7,6 +7,7 @@ const dialogTrans = {
   duplicateTitle: `复制 {{type}}`,
   createAlias: `为 {{type}} 创建别名`,
   compact: `压缩Collection {{type}}`,
+  flush: `为 {{type}} 的数据落盘`,
   loadTitle: `加载 {{type}}`,
 
   loadContent: `您正在尝试加载带有数据的 {{type}}。只有已加载的 {{type}} 可以被搜索。`,

client/src/i18n/en/collection.ts

@@ -142,6 +142,10 @@ 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>`,
 };
 
 export default collectionTrans;

client/src/i18n/en/dialog.ts

@@ -7,6 +7,7 @@ const dialogTrans = {
   duplicateTitle: `Duplicate {{type}}`,
   createAlias: `Create alias for {{type}}`,
   compact: `Compact collection {{type}}`,
+  flush: `Flush data for {{type}}`,
   loadTitle: `Load {{type}}`,
 
   loadContent: `You are trying to load a {{type}} with data. Only loaded {{type}} can be searched.`,

client/src/pages/dialogs/FlushDialog.tsx

@@ -0,0 +1,62 @@
+import { FC, useContext } from 'react';
+import { Typography, makeStyles, Theme } from '@material-ui/core';
+import { useTranslation } from 'react-i18next';
+import { rootContext } from '@/context';
+import DialogTemplate from '@/components/customDialog/DialogTemplate';
+import { FlushDialogProps } from './Types';
+import { DataService } from '@/http';
+
+const useStyles = makeStyles((theme: Theme) => ({
+  desc: {
+    margin: '8px 0 16px 0',
+    maxWidth: '500px',
+  },
+  dialog: {},
+}));
+
+const FlushDialog: FC<FlushDialogProps> = props => {
+  const { cb, collectionName } = props;
+
+  const classes = useStyles();
+
+  const { handleCloseDialog } = useContext(rootContext);
+  const { t: dialogTrans } = useTranslation('dialog');
+  const { t: collectionTrans } = useTranslation('collection');
+  const { t: btnTrans } = useTranslation('btn');
+
+  const handleConfirm = async () => {
+    await DataService.flush(collectionName);
+
+    handleCloseDialog();
+    cb && cb();
+  };
+
+  const disabled = false;
+
+  return (
+    <DialogTemplate
+      dialogClass={classes.dialog}
+      title={dialogTrans('flush', {
+        type: collectionName,
+      })}
+      handleClose={handleCloseDialog}
+      children={
+        <>
+          <Typography
+            variant="body1"
+            component="p"
+            className={classes.desc}
+            dangerouslySetInnerHTML={{
+              __html: collectionTrans('flushDialogInfo'),
+            }}
+          ></Typography>
+        </>
+      }
+      confirmLabel={btnTrans('confirm')}
+      handleConfirm={handleConfirm}
+      confirmDisabled={disabled}
+    />
+  );
+};
+
+export default FlushDialog;

client/src/pages/dialogs/Types.ts

@@ -23,6 +23,7 @@ interface CollectionDialogBaseProps {
 }
 
 export interface CompactDialogProps extends CollectionDialogBaseProps {}
+export interface FlushDialogProps extends CollectionDialogBaseProps {}
 
 export interface CreateAliasProps {
   collectionName: string;

client/src/pages/segments/Segments.tsx

@@ -8,6 +8,7 @@ import { ColDefinitionsType } from '@/components/grid/Types';
 import { ToolBarConfig } from '@/components/grid/Types';
 import CustomToolBar from '@/components/grid/ToolBar';
 import CompactDialog from '@/pages/dialogs/CompactDialog';
+import FlushDialog from '@/pages/dialogs/FlushDialog';
 import { getQueryStyles } from '../query/Styles';
 import { Segment } from './Types';
 
@@ -75,6 +76,25 @@ const Segments: FC<{
       label: collectionTrans('compact'),
       icon: 'compact',
     },
+    {
+      type: 'iconBtn',
+      onClick: () => {
+        setDialog({
+          open: true,
+          type: 'custom',
+          params: {
+            component: (
+              <FlushDialog
+                collectionName={collectionName}
+                cb={onCompactExecuted}
+              />
+            ),
+          },
+        });
+      },
+      label: collectionTrans('flush'),
+      icon: 'saveAs',
+    },
   ];
 
   const colDefinitions: ColDefinitionsType[] = [