add custom progress component

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/i18n/cn/index.ts

@@ -6,6 +6,7 @@ const indexTrans = {
   index: 'Index',
   metric: 'Metric Type',
   desc: 'Description',
+  creating: 'Creating Index',
 
   createSuccess: 'Creating index successfully',
   deleteWarning:

client/src/i18n/en/index.ts

@@ -6,6 +6,8 @@ const indexTrans = {
   index: 'Index',
   desc: 'Description',
 
+  creating: 'Creating Index',
+
   metric: 'Metric Type',
   createSuccess: 'Creating index successfully',
   deleteWarning:

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: {
@@ -76,6 +75,8 @@ const IndexTypeElement: FC<{
   const { t: dialogTrans } = useTranslation('dialog');
   const { t: successTrans } = useTranslation('success');
 
+  const [createProgress, setCreateProgress] = useState<number>(40);
+
   const { setDialog, handleCloseDialog, openSnackBar } =
     useContext(rootContext);
 
@@ -179,7 +180,10 @@ const IndexTypeElement: FC<{
       }
       default: {
         return status === IndexState.InProgress ? (
-          <StatusIcon type={ChildrenStatusType.CREATING} />
+          <CustomLinearProgress
+            value={createProgress}
+            tooltip={indexTrans('creating')}
+          />
         ) : (
           <Chip
             label={data._indexType}