Merge branch 'main' into feat/check-insight

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/components/menu/NavMenu.tsx

@@ -1,33 +1,47 @@
 import { useState, FC, useEffect } from 'react';
+import clsx from 'clsx';
 import { makeStyles, Theme, createStyles } from '@material-ui/core/styles';
+import Button from '@material-ui/core/Button';
 import List from '@material-ui/core/List';
 import ListItem from '@material-ui/core/ListItem';
 import ListItemIcon from '@material-ui/core/ListItemIcon';
 import ListItemText from '@material-ui/core/ListItemText';
-import Collapse from '@material-ui/core/Collapse';
 import { NavMenuItem, NavMenuType } from './Types';
 import icons from '../icons/Icons';
 import { useTranslation } from 'react-i18next';
 import Typography from '@material-ui/core/Typography';
+import ChevronRightIcon from '@material-ui/icons/ChevronRight';
+
+const duration = '100ms';
 
 const useStyles = makeStyles((theme: Theme) =>
   createStyles({
     root: {
-      width: (props: any) => props.width || '100%',
       background: theme.palette.common.white,
-
+      paddingTop: 0,
       paddingBottom: theme.spacing(5),
       display: 'flex',
       flexDirection: 'column',
       justifyContent: 'space-between',
+      transition: theme.transitions.create('width', {
+        duration,
+      }),
+      overflow: 'hidden',
+    },
+    rootCollapse: {
+      width: '86px',
+    },
+    rootExpand: {
+      width: (props: any) => props.width || '100%',
     },
     nested: {
       paddingLeft: theme.spacing(4),
     },
     item: {
       marginBottom: theme.spacing(2),
-      marginLeft: theme.spacing(3),
-
+      paddingLeft: theme.spacing(4),
+      boxSizing: 'content-box',
+      height: theme.spacing(3),
       width: 'initial',
       color: theme.palette.milvusGrey.dark,
     },
@@ -43,6 +57,16 @@ const useStyles = makeStyles((theme: Theme) =>
         },
       },
     },
+    itemText: {
+      transition: theme.transitions.create('opacity', {
+        duration,
+      }),
+      whiteSpace: 'nowrap',
+      opacity: 0,
+    },
+    itemTextExpand: {
+      opacity: 1,
+    },
     active: {
       color: theme.palette.primary.main,
       borderRight: `2px solid ${theme.palette.primary.main}`,
@@ -57,46 +81,91 @@ const useStyles = makeStyles((theme: Theme) =>
     logoWrapper: {
       width: '100%',
       display: 'flex',
-      justifyContent: 'center',
       alignItems: 'center',
-
-      marginTop: theme.spacing(3),
-
+      height: '86px',
       marginBottom: theme.spacing(8),
+      backgroundColor: theme.palette.primary.main,
+      paddingLeft: theme.spacing(4),
 
       '& .title': {
         margin: 0,
         fontSize: '16px',
-        lineHeight: '19px',
         letterSpacing: '0.15px',
-        color: '#323232',
+        color: 'white',
+        whiteSpace: 'nowrap',
+        lineHeight: '86px',
+        opacity: 0,
+        transition: theme.transitions.create('opacity', {
+          duration,
+        }),
+      },
+    },
+    logoWrapperExpand: {
+      '& .title': {
+        opacity: 1,
       },
     },
     logo: {
+      transition: theme.transitions.create('all', {
+        duration,
+      }),
+    },
+    logoExpand: {
       marginRight: theme.spacing(1),
+      '& path': {
+        fill: 'white',
+      },
     },
+    logoCollapse: {
+      backgroundColor: theme.palette.primary.main,
+      '& path': {
+        fill: 'white',
+      },
+      transform: 'scale(1.5)',
+    },
+    actionIcon: {
+      position: 'fixed',
+      borderRadius: '50%',
+      backgroundColor: 'white',
+      top: '74px',
+      transition: theme.transitions.create('all', {
+        duration,
+      }),
+      minWidth: '24px',
+      padding: 0,
+
+      '& svg path': {
+        fill: theme.palette.milvusGrey.dark,
+      },
+
+      '&:hover': {
+        backgroundColor: theme.palette.primary.main,
+
+        '& svg path': {
+          fill: 'white',
+        },
+      },
+    },
+    expandIcon: {
+      left: '187px',
+      transform: 'rotateZ(180deg)',
+    },
+    collapseIcon: {
+      left: '73px',
+    },
+
   })
 );
 
 const NavMenu: FC<NavMenuType> = props => {
-  const { width, data, defaultActive = '', defaultOpen = {} } = props;
+  const { width, data, defaultActive = '' } = props;
   const classes = useStyles({ width });
-  const [open, setOpen] = useState<{ [x: string]: boolean }>(defaultOpen);
+  const [expanded, setExpanded] = useState<boolean>(true);
   const [active, setActive] = useState<string>(defaultActive);
 
   const { t } = useTranslation();
   const milvusTrans: { [key in string]: string } = t('milvus');
 
-  const ExpandLess = icons.expandLess;
-  const ExpandMore = icons.expandMore;
-
-  const handleClick = (label: string) => {
-    setOpen(v => ({
-      ...v,
-      [label]: !v[label],
-    }));
-  };
-
   useEffect(() => {
     if (defaultActive) {
       setActive(defaultActive);
@@ -104,7 +173,7 @@ const NavMenu: FC<NavMenuType> = props => {
   }, [defaultActive]);
 
   const NestList = (props: { data: NavMenuItem[]; className?: string }) => {
-    const { className, data } = props;
+    const { className = '', data } = props;
     return (
       <>
         {data.map((v: NavMenuItem) => {
@@ -116,32 +185,17 @@ const NavMenu: FC<NavMenuType> = props => {
                 ? v.iconActiveClass
                 : v.iconNormalClass
               : 'icon';
-          if (v.children) {
-            return (
-              <div key={v.label}>
-                <ListItem button onClick={() => handleClick(v.label)}>
-                  <ListItemIcon>
-                    <IconComponent classes={{ root: iconClass }} />
-                  </ListItemIcon>
-
-                  <ListItemText primary={v.label} />
-                  {open[v.label] ? <ExpandLess /> : <ExpandMore />}
-                </ListItem>
-                <Collapse in={open[v.label]} timeout="auto" unmountOnExit>
-                  <List component="div" disablePadding>
-                    <NestList data={v.children} className={classes.nested} />
-                  </List>
-                </Collapse>
-              </div>
-            );
-          }
           return (
             <ListItem
               button
               key={v.label}
-              className={`${className || ''} ${classes.item} ${
-                isActive ? classes.active : ''
-              }`}
+              title={v.label}
+              className={
+                clsx(classes.item, {
+                  [className]: className,
+                  [classes.active]: isActive,
+                })
+              }
               onClick={() => {
                 setActive(v.label);
                 v.onClick && v.onClick();
@@ -151,7 +205,13 @@ const NavMenu: FC<NavMenuType> = props => {
                 <IconComponent classes={{ root: iconClass }} />
               </ListItemIcon>
 
-              <ListItemText primary={v.label} />
+              <ListItemText
+                className={
+                  clsx(classes.itemText, {
+                    [classes.itemTextExpand]: expanded,
+                  })
+                }
+                primary={v.label} />
             </ListItem>
           );
         })}
@@ -162,15 +222,42 @@ const NavMenu: FC<NavMenuType> = props => {
   const Logo = icons.milvus;
 
   return (
-    <List component="nav" className={classes.root}>
+    <List component="nav" className={
+      clsx(classes.root, {
+        [classes.rootExpand]: expanded,
+        [classes.rootCollapse]: !expanded,
+      })
+    }>
       <div>
-        <div className={classes.logoWrapper}>
-          <Logo classes={{ root: classes.logo }} />
+        <div className={
+          clsx(classes.logoWrapper, {
+            [classes.logoWrapperExpand]: expanded,
+          })
+        }>
+          <Logo
+            classes={{ root: classes.logo }}
+            className={
+              clsx({
+                [classes.logoExpand]: expanded,
+                [classes.logoCollapse]: !expanded,
+              })
+            }
+          />
           <Typography variant="h3" className="title">
             {milvusTrans.admin}
           </Typography>
         </div>
-
+        <Button
+          onClick={() => { setExpanded(!expanded) }}
+          className={
+            clsx(classes.actionIcon, {
+              [classes.expandIcon]: expanded,
+              [classes.collapseIcon]: !expanded,
+            })
+          }
+        >
+          <ChevronRightIcon />
+        </Button>
         <NestList data={data} />
       </div>
     </List>

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/package.json

@@ -32,7 +32,7 @@
     "@nestjs/websockets": "^8.0.4",
     "@types/passport-jwt": "^3.0.5",
     "@types/passport-local": "^1.0.33",
-    "@zilliz/milvus2-sdk-node": "^1.0.6",
+    "@zilliz/milvus2-sdk-node": "^1.0.7",
     "body-parser": "^1.19.0",
     "cache-manager": "^3.4.4",
     "class-transformer": "^0.4.0",

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({

server/yarn.lock

@@ -1319,10 +1319,10 @@
   resolved "https://registry.yarnpkg.com/@xtuc/long/-/long-4.2.2.tgz#d291c6a4e97989b5c61d9acf396ae4fe133a718d"
   integrity sha512-NuHqBY1PB/D8xU6s/thBgOAiAP7HOYDQ32+BFZILJ8ivkUkAHQnWfn6WhL79Owj1qmUnoN/YPhktdIoucipkAQ==
 
-"@zilliz/milvus2-sdk-node@^1.0.6":
-  version "1.0.6"
-  resolved "https://registry.yarnpkg.com/@zilliz/milvus2-sdk-node/-/milvus2-sdk-node-1.0.6.tgz#e4293395f7cb24a437a9df92d2059c3b7e8f1889"
-  integrity sha512-n1nIafhd7FOPF5js6FoeJ9OuNX0ujIUMkINQPZyBCg8vVILQoOqyaTLcBCcVnqa+ejg1b2KXHlcTYrxWTJfTtw==
+"@zilliz/milvus2-sdk-node@^1.0.7":
+  version "1.0.7"
+  resolved "https://registry.yarnpkg.com/@zilliz/milvus2-sdk-node/-/milvus2-sdk-node-1.0.7.tgz#b3d0bedbf9e35662e76e716ddb99dc3fc781fc00"
+  integrity sha512-4DFNqDkELG/s4JHqlT6/yZOtMxBWSca1G+RGfj3UC3pg7ncAUuw7HSpScLJ0uWhdUABWroQC6AD0DLnHNGhjFQ==
   dependencies:
     "@grpc/grpc-js" "^1.2.12"
     "@grpc/proto-loader" "^0.6.0"