Merge pull request #187 from Tumao727/feature/index-create-progress

add show index build progres

client/src/components/customProgress/CustomLinearProgress.tsx

@@ -0,0 +1,64 @@
+import {
+  makeStyles,
+  withStyles,
+  Theme,
+  LinearProgress,
+  Tooltip,
+  Typography,
+} from '@material-ui/core';
+import { FC } from 'react';
+import { CustomLinearProgressProps } from './Types';
+
+const getProgressStyles = makeStyles((theme: Theme) => ({
+  wrapper: {
+    display: 'flex',
+    alignItems: 'center',
+  },
+  percent: {
+    minWidth: '35px',
+    marginLeft: theme.spacing(1),
+    color: '#010e29',
+  },
+}));
+
+const BorderLinearProgress = withStyles((theme: Theme) => ({
+  root: {
+    height: 10,
+    borderRadius: 8,
+    border: '1px solid #e9e9ed',
+    minWidth: 85,
+  },
+  colorPrimary: {
+    backgroundColor: '#fff',
+  },
+  bar: {
+    borderRadius: 5,
+    backgroundColor: theme.palette.primary.main,
+  },
+}))(LinearProgress);
+
+const CustomLinearProgress: FC<CustomLinearProgressProps> = ({
+  value,
+  tooltip = '',
+  wrapperClass = '',
+}) => {
+  const classes = getProgressStyles();
+
+  return (
+    <div className={`${classes.wrapper} ${wrapperClass}`}>
+      {tooltip !== '' ? (
+        <Tooltip title={tooltip} aria-label={tooltip} arrow>
+          <BorderLinearProgress variant="determinate" value={value} />
+        </Tooltip>
+      ) : (
+        <BorderLinearProgress variant="determinate" value={value} />
+      )}
+      <Typography
+        variant="body1"
+        className={classes.percent}
+      >{`${value}%`}</Typography>
+    </div>
+  );
+};
+
+export default CustomLinearProgress;

client/src/components/customProgress/Types.ts

@@ -0,0 +1,6 @@
+export interface CustomLinearProgressProps {
+  tooltip?: string;
+  // percentage, e.g. 50 means complete 50%
+  value: number;
+  wrapperClass?: string;
+}

client/src/http/Index.ts

@@ -24,9 +24,9 @@ export class IndexHttp extends BaseModel implements IndexView {
   static async getIndexStatus(
     collectionName: string,
     fieldName: string
-  ): Promise<IndexState> {
+  ): Promise<{ state: IndexState }> {
     const path = `${this.BASE_URL}/state`;
-    return super.findAll({
+    return super.search({
       path,
       params: { collection_name: collectionName, field_name: fieldName },
     });
@@ -59,6 +59,22 @@ export class IndexHttp extends BaseModel implements IndexView {
     return super.batchDelete({ path, data: { ...param, type } });
   }
 
+  static async getIndexBuildProgress(
+    collectionName: string,
+    fieldName: string
+  ) {
+    const path = `${this.BASE_URL}/progress`;
+    return super.search({
+      path,
+      params: {
+        collection_name: collectionName,
+        field_name: fieldName,
+        // user can't set index_name, use empty string as its value
+        index_name: '',
+      },
+    });
+  }
+
   get _indexType() {
     return this.params.find(p => p.key === 'index_type')?.value || '';
   }

client/src/i18n/cn/index.ts

@@ -6,8 +6,9 @@ const indexTrans = {
   index: 'Index',
   metric: 'Metric Type',
   desc: 'Description',
+  creating: 'Creating Index',
 
-  createSuccess: 'Creating index successfully',
+  createSuccess: 'Start creating index',
   deleteWarning:
     'You are trying to delete an index. This action cannot be undone.',
 };

client/src/i18n/en/index.ts

@@ -6,8 +6,10 @@ const indexTrans = {
   index: 'Index',
   desc: 'Description',
 
+  creating: 'Creating Index',
+
   metric: 'Metric Type',
-  createSuccess: 'Creating index successfully',
+  createSuccess: 'Start creating index',
   deleteWarning:
     'You are trying to delete an index. This action cannot be undone.',
 };

client/src/pages/overview/collectionCard/CollectionCard.tsx

@@ -121,7 +121,7 @@ const CollectionCard: FC<CollectionCardProps> = ({
         <VectorSearchIcon classes={{ root: classes.search }} />
         {btnTrans('vectorSearch')}
       </CustomButton>
-      <CustomIconButton onClick={onReleaseClick}>
+      <CustomIconButton onClick={onReleaseClick} tooltip={btnTrans('release')}>
         <ReleaseIcon classes={{ root: classes.release }} />
       </CustomIconButton>
     </div>

client/src/pages/schema/IndexTypeElement.tsx

@@ -8,14 +8,13 @@ import {
   IndexManageParam,
   ParamPair,
 } from './Types';
-import StatusIcon from '../../components/status/StatusIcon';
-import { ChildrenStatusType } from '../../components/status/Types';
 import { useTranslation } from 'react-i18next';
 import { makeStyles, Theme } from '@material-ui/core';
 import icons from '../../components/icons/Icons';
 import { rootContext } from '../../context/Root';
 import CreateIndex from './Create';
 import DeleteTemplate from '../../components/customDialog/DeleteDialogTemplate';
+import CustomLinearProgress from '../../components/customProgress/CustomLinearProgress';
 
 const useStyles = makeStyles((theme: Theme) => ({
   item: {
@@ -62,20 +61,24 @@ const useStyles = makeStyles((theme: Theme) => ({
   },
 }));
 
+let timer: NodeJS.Timeout | null = null;
+
 const IndexTypeElement: FC<{
   data: FieldView;
   collectionName: string;
   cb: (collectionName: string) => void;
 }> = ({ data, collectionName, cb }) => {
   const classes = useStyles();
-
-  const [status, setStatus] = useState<string>('');
+  // set in progress as defalut status
+  const [status, setStatus] = useState<string>(IndexState.InProgress);
 
   const { t: indexTrans } = useTranslation('index');
   const { t: btnTrans } = useTranslation('btn');
   const { t: dialogTrans } = useTranslation('dialog');
   const { t: successTrans } = useTranslation('success');
 
+  const [createProgress, setCreateProgress] = useState<number>(0);
+
   const { setDialog, handleCloseDialog, openSnackBar } =
     useContext(rootContext);
 
@@ -84,7 +87,7 @@ const IndexTypeElement: FC<{
 
   const fetchStatus = useCallback(async () => {
     if (data._indexType !== '') {
-      const status = await IndexHttp.getIndexStatus(
+      const { state: status } = await IndexHttp.getIndexStatus(
         collectionName,
         data._fieldName
       );
@@ -96,6 +99,40 @@ const IndexTypeElement: FC<{
     fetchStatus();
   }, [fetchStatus]);
 
+  const fetchProgress = useCallback(() => {
+    if (timer) {
+      clearTimeout(timer);
+    }
+    if (data._indexType !== '' && status === IndexState.InProgress) {
+      timer = setTimeout(async () => {
+        const res = await IndexHttp.getIndexBuildProgress(
+          collectionName,
+          data._fieldName
+        );
+
+        const { indexed_rows, total_rows } = res;
+        const percent = Number(indexed_rows) / Number(total_rows);
+        const value = Math.floor(percent * 100);
+        setCreateProgress(value);
+
+        if (value !== 100) {
+          fetchProgress();
+        } else {
+          timer && clearTimeout(timer);
+          // reset build progress
+          setCreateProgress(0);
+          // change index create status
+          setStatus(IndexState.Finished);
+        }
+      }, 500);
+    }
+  }, [collectionName, data._fieldName, status, data._indexType]);
+
+  // get index build progress
+  useEffect(() => {
+    fetchProgress();
+  }, [fetchProgress]);
+
   const requestCreateIndex = async (params: ParamPair[]) => {
     const indexCreateParam: IndexCreateParam = {
       collection_name: collectionName,
@@ -179,7 +216,10 @@ const IndexTypeElement: FC<{
       }
       default: {
         return status === IndexState.InProgress ? (
-          <StatusIcon type={ChildrenStatusType.CREATING} />
+          <CustomLinearProgress
+            value={createProgress}
+            tooltip={indexTrans('creating')}
+          />
         ) : (
           <Chip
             label={data._indexType}

server/src/schema/dto.ts

@@ -100,9 +100,9 @@ export class GetIndexProgress {
     description: 'index name',
   })
   @IsString()
-  @IsNotEmpty({
-    message: 'index_name is empty',
-  })
+  // @IsNotEmpty({
+  //   message: 'index_name is empty',
+  // })
   readonly index_name: string;
 
   @ApiProperty({