refactor params for part of dialogs

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

client/src/components/status/Types.ts

@@ -11,7 +11,6 @@ export type StatusActionType = {
   percentage?: string | number;
   action?: Function;
   schema: SchemaObject;
-  collectionName: string;
   onIndexCreate?: Function;
 };
 

client/src/pages/collections/Aliases.tsx

@@ -2,10 +2,10 @@ import { useContext } from 'react';
 import { Chip, IconButton, makeStyles, Theme } from '@material-ui/core';
 import { useTranslation } from 'react-i18next';
 import { rootContext, dataContext } from '@/context';
-import { AliasesProps } from './Types';
 import icons from '@/components/icons/Icons';
 import CreateAliasDialog from '../dialogs/CreateAliasDialog';
 import DeleteTemplate from '@/components/customDialog/DeleteDialogTemplate';
+import { CollectionObject } from '@server/types';
 
 const useStyles = makeStyles((theme: Theme) => ({
   wrapper: {
@@ -20,12 +20,19 @@ const useStyles = makeStyles((theme: Theme) => ({
   },
 }));
 
+export interface AliasesProps {
+  aliases: string[];
+  collection: CollectionObject;
+  onCreate?: Function;
+  onDelete?: Function;
+}
+
 export default function Aliases(props: AliasesProps) {
   const { dropAlias } = useContext(dataContext);
 
   const {
     aliases,
-    collectionName,
+    collection,
     onCreate = () => {},
     onDelete = () => {},
   } = props;
@@ -48,7 +55,7 @@ export default function Aliases(props: AliasesProps) {
       params: {
         component: (
           <CreateAliasDialog
-            collectionName={collectionName}
+            collection={collection}
             cb={async collectionName => {
               await onCreate(collectionName);
             }}
@@ -75,16 +82,19 @@ export default function Aliases(props: AliasesProps) {
   }
 
   const handleDelete = async (params: {
-    collection: string;
+    collection: CollectionObject;
     alias: string;
   }) => {
-    await dropAlias(params.collection, params.alias);
+    await dropAlias(params.collection.collection_name, params.alias);
     openSnackBar(successTrans('delete', { name: collectionTrans('alias') }));
     handleCloseDialog();
-    await onDelete(collectionName);
+    await onDelete(collection.collection_name);
   };
 
-  const _onDelete = (alias: { collection: string; alias: string }) => {
+  const _onDelete = (alias: {
+    collection: CollectionObject;
+    alias: string;
+  }) => {
     setDialog({
       open: true,
       type: 'custom',
@@ -116,7 +126,7 @@ export default function Aliases(props: AliasesProps) {
             e.stopPropagation();
           }}
           onDelete={() => {
-            _onDelete({ collection: collectionName, alias: a });
+            _onDelete({ collection: collection, alias: a });
           }}
         />
       ))}

client/src/pages/collections/Collections.tsx

@@ -19,7 +19,7 @@ import LoadCollectionDialog from '../dialogs/LoadCollectionDialog';
 import ReleaseCollectionDialog from '../dialogs/ReleaseCollectionDialog';
 import DropCollectionDialog from '../dialogs/DropCollectionDialog';
 import RenameCollectionDialog from '../dialogs/RenameCollectionDialog';
-import DuplicateCollectionDialog from '../dialogs/DuplicateCollectionDailog';
+import DuplicateCollectionDialog from '../dialogs/DuplicateCollectionDialog';
 import InsertDialog from '../dialogs/insert/Dialog';
 import ImportSampleDialog from '../dialogs/ImportSampleDialog';
 import { getLabelDisplayedRows } from '../search/Utils';
@@ -214,9 +214,7 @@ const Collections = () => {
                 // user can't select partition on collection page, so default value is ''
                 defaultSelectedPartition={''}
                 onInsert={async (collectionName: string) => {
-                  setTimeout(async () => {
-                    await fetchCollection(collectionName);
-                  });
+                  await fetchCollection(collectionName);
                   setSelectedCollections([]);
                 }}
               />
@@ -244,10 +242,10 @@ const Collections = () => {
           params: {
             component: (
               <RenameCollectionDialog
-                cb={async (collectionName: string) => {
+                cb={async () => {
                   setSelectedCollections([]);
                 }}
-                collectionName={selectedCollections[0].collection_name}
+                collection={selectedCollections[0]}
               />
             ),
           },
@@ -271,7 +269,7 @@ const Collections = () => {
                 cb={async () => {
                   setSelectedCollections([]);
                 }}
-                collectionName={selectedCollections[0].collection_name}
+                collection={selectedCollections[0]}
                 collections={collections}
               />
             ),
@@ -367,7 +365,6 @@ const Collections = () => {
             status={v.status}
             percentage={v.loadedPercentage}
             schema={v.schema}
-            collectionName={v.collection_name}
             action={() => {
               setDialog({
                 open: true,
@@ -476,9 +473,7 @@ const Collections = () => {
         </span>
       ),
       formatter(v) {
-        return (
-          <Aliases aliases={v.aliases} collectionName={v.collection_name} />
-        );
+        return <Aliases aliases={v.aliases} collection={v} />;
       },
     });
   }

client/src/pages/collections/StatusAction.tsx

@@ -78,13 +78,7 @@ const StatusAction: FC<StatusActionType> = props => {
   const ReleaseIcon = icons.remove;
   const LoadIcon = icons.addOutline;
 
-  const {
-    status,
-    percentage = 0,
-    collectionName,
-    schema,
-    action = () => {},
-  } = props;
+  const { status, percentage = 0, schema, action = () => {} } = props;
   const { t: commonTrans } = useTranslation();
   const { t: collectionTrans } = useTranslation('collection');
 

client/src/pages/collections/Types.ts

@@ -80,13 +80,6 @@ export interface DeleteEntitiesReq {
   partition_name?: string;
 }
 
-export interface AliasesProps {
-  aliases: string[];
-  collectionName: string;
-  onCreate?: Function;
-  onDelete?: Function;
-}
-
 export interface LoadReplicaReq {
   replica_number: number;
 }

client/src/pages/dialogs/CreateAliasDialog.tsx

@@ -7,7 +7,7 @@ import CustomInput from '@/components/customInput/CustomInput';
 import { formatForm } from '@/utils';
 import { useFormValidation } from '@/hooks';
 import { ITextfieldConfig } from '@/components/customInput/Types';
-import { CreateAliasProps } from './Types';
+import { CollectionObject } from '@server/types';
 
 const useStyles = makeStyles((theme: Theme) => ({
   desc: {
@@ -15,11 +15,16 @@ const useStyles = makeStyles((theme: Theme) => ({
   },
 }));
 
+export interface CreateAliasProps {
+  collection: CollectionObject;
+  cb?: (collection: CollectionObject) => void;
+}
+
 const CreateAliasDialog: FC<CreateAliasProps> = props => {
   const { createAlias } = useContext(dataContext);
   const { handleCloseDialog } = useContext(rootContext);
 
-  const { cb, collectionName } = props;
+  const { cb, collection } = props;
   const [form, setForm] = useState({
     alias: '',
   });
@@ -43,9 +48,9 @@ const CreateAliasDialog: FC<CreateAliasProps> = props => {
   };
 
   const handleConfirm = async () => {
-    await createAlias(collectionName, form.alias);
+    await createAlias(collection.collection_name, form.alias);
     handleCloseDialog();
-    cb && (await cb(collectionName));
+    cb && (await cb(collection));
   };
 
   const aliasInputConfig: ITextfieldConfig = {
@@ -72,7 +77,7 @@ const CreateAliasDialog: FC<CreateAliasProps> = props => {
   return (
     <DialogTemplate
       title={dialogTrans('createAlias', {
-        type: collectionName,
+        type: collection.collection_name,
       })}
       handleClose={handleCloseDialog}
       children={

client/src/pages/dialogs/DuplicateCollectionDailog.tsx → client/src/pages/dialogs/DuplicateCollectionDialog.tsx

@@ -7,7 +7,7 @@ import CustomInput from '@/components/customInput/CustomInput';
 import { formatForm } from '@/utils';
 import { useFormValidation } from '@/hooks';
 import { ITextfieldConfig } from '@/components/customInput/Types';
-import { DuplicateCollectionDialogProps } from './Types';
+import { CollectionObject } from '@server/types';
 
 const useStyles = makeStyles((theme: Theme) => ({
   wrapper: {
@@ -18,12 +18,18 @@ const useStyles = makeStyles((theme: Theme) => ({
   },
 }));
 
+export interface DuplicateCollectionDialogProps {
+  collection: CollectionObject;
+  collections: CollectionObject[];
+  cb?: (collectionName: string) => void;
+}
+
 const DuplicateCollectionDialog: FC<DuplicateCollectionDialogProps> = props => {
   const { duplicateCollection } = useContext(dataContext);
 
-  const { cb, collectionName, collections } = props;
+  const { cb, collection, collections } = props;
   const [form, setForm] = useState({
-    duplicate: `${collectionName}_duplicate`,
+    duplicate: `${collection.collection_name}_duplicate`,
   });
 
   const classes = useStyles();
@@ -48,7 +54,7 @@ const DuplicateCollectionDialog: FC<DuplicateCollectionDialogProps> = props => {
 
   const handleConfirm = async () => {
     // duplicate
-    await duplicateCollection(collectionName, form.duplicate);
+    await duplicateCollection(collection.collection_name, form.duplicate);
     // show success message
     openSnackBar(
       successTrans('duplicate', {
@@ -97,7 +103,7 @@ const DuplicateCollectionDialog: FC<DuplicateCollectionDialogProps> = props => {
     <DialogTemplate
       dialogClass={classes.wrapper}
       title={dialogTrans('duplicateTitle', {
-        type: collectionName,
+        type: collection.collection_name,
       })}
       handleClose={handleCloseDialog}
       children={

client/src/pages/dialogs/EmptyDataDialog.tsx

@@ -3,10 +3,15 @@ import { useTranslation } from 'react-i18next';
 import { rootContext } from '@/context';
 import DeleteTemplate from '@/components/customDialog/DeleteDialogTemplate';
 import { DataService } from '@/http';
-import { EmptyDataProps } from './Types';
+import { CollectionObject } from '@server/types';
+
+export interface EmptyDataProps {
+  collection: CollectionObject;
+  cb?: () => void;
+}
 
 const EmptyDataDialog: FC<EmptyDataProps> = props => {
-  const { cb, collectionName } = props;
+  const { cb, collection } = props;
 
   const { handleCloseDialog } = useContext(rootContext);
   const { t: dialogTrans } = useTranslation('dialog');
@@ -15,7 +20,7 @@ const EmptyDataDialog: FC<EmptyDataProps> = props => {
 
   const handleDelete = async () => {
     // duplicate
-    await DataService.emptyData(collectionName);
+    await DataService.emptyData(collection.collection_name);
     // close dialog
     handleCloseDialog();
     cb && cb();
@@ -27,7 +32,7 @@ const EmptyDataDialog: FC<EmptyDataProps> = props => {
       title={dialogTrans('emptyTitle', {
         type: collectionTrans('collection'),
       })}
-      compare={collectionName}
+      compare={collection.collection_name}
       text={dialogTrans('emptyDataDialogInfo')}
       handleDelete={handleDelete}
     />

client/src/pages/dialogs/ImportSampleDialog.tsx

@@ -9,6 +9,7 @@ import { InsertStatusEnum } from './insert/Types';
 import { DataService } from '@/http';
 import { LoadSampleParam } from './Types';
 import icons from '@/components/icons/Icons';
+import { CollectionObject } from '@server/types';
 
 const DownloadIcon = icons.download;
 
@@ -76,160 +77,174 @@ const sizeOptions = [
   },
 ];
 
-const ImportSampleDialog: FC<{ collection: string; cb?: Function }> = props => {
-  const classes = getStyles();
-  const { collection } = props;
-  const [size, setSize] = useState<string>(sizeOptions[0].value);
-  const [csvFileName, setCsvFileName] = useState<string>(
-    `${collection}.sample.${size}.csv`
-  );
-  const [jsonFileName, setJsonFileName] = useState<string>(
-    `${collection}.sample.${size}.json`
-  );
-  const [insertStatus, setInsertStatus] = useState<InsertStatusEnum>(
-    InsertStatusEnum.init
-  );
-
-  const { t: insertTrans } = useTranslation('insert');
-  const { t: btnTrans } = useTranslation('btn');
-  const { handleCloseDialog, openSnackBar } = useContext(rootContext);
-  // selected collection name
-
-  const handleImportSample = async (
-    collectionName: string,
-    size: string,
-    download: boolean = false,
-    format: 'csv' | 'json' = 'csv'
-  ): Promise<{ result: string | boolean; msg: string }> => {
-    const param: LoadSampleParam = {
-      collection_name: collectionName,
-      size: size,
-      download,
-      format: format,
-    };
-    try {
-      const res = await DataService.importSample(collectionName, param);
-      if (download) {
-        const fileName = format === 'csv' ? csvFileName : jsonFileName;
-        const type =
-          format === 'csv' ? 'text/csv;charset=utf-8;' : 'application/json';
-        const blob = new Blob([res.sampleFile], { type });
-        saveAs(blob, fileName);
-        return { result: res.sampleFile, msg: '' };
-      }
-      await DataService.flush(collectionName);
-      if (props.cb) {
-        await props.cb(collectionName);
+const ImportSampleDialog: FC<{ collection: CollectionObject; cb?: Function }> =
+  props => {
+    const classes = getStyles();
+    const { collection } = props;
+    const [size, setSize] = useState<string>(sizeOptions[0].value);
+    const [csvFileName, setCsvFileName] = useState<string>(
+      `${collection}.sample.${size}.csv`
+    );
+    const [jsonFileName, setJsonFileName] = useState<string>(
+      `${collection}.sample.${size}.json`
+    );
+    const [insertStatus, setInsertStatus] = useState<InsertStatusEnum>(
+      InsertStatusEnum.init
+    );
+
+    const { t: insertTrans } = useTranslation('insert');
+    const { t: btnTrans } = useTranslation('btn');
+    const { handleCloseDialog, openSnackBar } = useContext(rootContext);
+    // selected collection name
+
+    const handleImportSample = async (
+      collectionName: string,
+      size: string,
+      download: boolean = false,
+      format: 'csv' | 'json' = 'csv'
+    ): Promise<{ result: string | boolean; msg: string }> => {
+      const param: LoadSampleParam = {
+        collection_name: collectionName,
+        size: size,
+        download,
+        format: format,
+      };
+      try {
+        const res = await DataService.importSample(collectionName, param);
+        if (download) {
+          const fileName = format === 'csv' ? csvFileName : jsonFileName;
+          const type =
+            format === 'csv' ? 'text/csv;charset=utf-8;' : 'application/json';
+          const blob = new Blob([res.sampleFile], { type });
+          saveAs(blob, fileName);
+          return { result: res.sampleFile, msg: '' };
+        }
+        await DataService.flush(collectionName);
+        if (props.cb) {
+          await props.cb(collectionName);
+        }
+        return { result: true, msg: '' };
+      } catch (err: any) {
+        const {
+          response: {
+            data: { message },
+          },
+        } = err;
+        return { result: false, msg: message || '' };
       }
-      return { result: true, msg: '' };
-    } catch (err: any) {
-      const {
-        response: {
-          data: { message },
-        },
-      } = err;
-      return { result: false, msg: message || '' };
-    }
-  };
-
-  const onDownloadCSVClicked = async () => {
-    return await handleImportSample(collection, size, true, 'csv');
-  };
+    };
 
-  const onDownloadJSONClicked = async () => {
-    return await handleImportSample(collection, size, true, 'json');
-  };
+    const onDownloadCSVClicked = async () => {
+      return await handleImportSample(
+        collection.collection_name,
+        size,
+        true,
+        'csv'
+      );
+    };
 
-  const importData = async () => {
-    if (insertStatus === InsertStatusEnum.success) {
-      handleCloseDialog();
-      return;
-    }
-    // start loading
-    setInsertStatus(InsertStatusEnum.loading);
-    const { result, msg } = await handleImportSample(collection, size);
-
-    if (!result) {
-      openSnackBar(msg, 'error');
-      setInsertStatus(InsertStatusEnum.init);
-      return;
-    }
-    setInsertStatus(InsertStatusEnum.success);
-    // hide dialog
-    handleCloseDialog();
-  };
+    const onDownloadJSONClicked = async () => {
+      return await handleImportSample(
+        collection.collection_name,
+        size,
+        true,
+        'json'
+      );
+    };
 
-  return (
-    <DialogTemplate
-      title={insertTrans('importSampleData', {
-        collection,
-      })}
-      handleClose={handleCloseDialog}
-      confirmLabel={
-        insertStatus === InsertStatusEnum.init
-          ? btnTrans('import')
-          : insertStatus === InsertStatusEnum.loading
-          ? btnTrans('importing')
-          : insertStatus === InsertStatusEnum.success
-          ? btnTrans('done')
-          : insertStatus
+    const importData = async () => {
+      if (insertStatus === InsertStatusEnum.success) {
+        handleCloseDialog();
+        return;
       }
-      handleConfirm={importData}
-      confirmDisabled={insertStatus === InsertStatusEnum.loading}
-      showActions={true}
-      showCancel={false}
-      // don't show close icon when insert not finish
-      // showCloseIcon={insertStatus !== InsertStatusEnum.loading}
-    >
-      <form className={classes.selectors}>
-        <div className="selectorWrapper">
-          <div className="description">
-            <Typography variant="inherit" component="p">
-              {insertTrans('importSampleDataDesc')}
-            </Typography>
-          </div>
-
-          <div className="actions">
-            <CustomSelector
-              label={insertTrans('sampleDataSize')}
-              options={sizeOptions}
-              wrapperClass="selector"
-              labelClass="selectLabel"
-              value={size}
-              variant="filled"
-              onChange={(e: { target: { value: unknown } }) => {
-                const size = e.target.value;
-                setSize(size as string);
-                setCsvFileName(`${collection}.sample.${size}.csv`);
-                setJsonFileName(`${collection}.sample.${size}.json`);
-              }}
-            />
-          </div>
+      // start loading
+      setInsertStatus(InsertStatusEnum.loading);
+      const { result, msg } = await handleImportSample(
+        collection.collection_name,
+        size
+      );
+
+      if (!result) {
+        openSnackBar(msg, 'error');
+        setInsertStatus(InsertStatusEnum.init);
+        return;
+      }
+      setInsertStatus(InsertStatusEnum.success);
+      // hide dialog
+      handleCloseDialog();
+    };
 
-          <div className="download-actions">
-            <Chip
-              className={classes.downloadBtn}
-              icon={<DownloadIcon />}
-              label={csvFileName}
-              title={csvFileName}
-              variant="outlined"
-              size="small"
-              onClick={onDownloadCSVClicked}
-            />
-            <Chip
-              className={classes.downloadBtn}
-              icon={<DownloadIcon />}
-              label={jsonFileName}
-              title={jsonFileName}
-              variant="outlined"
-              size="small"
-              onClick={onDownloadJSONClicked}
-            />
+    return (
+      <DialogTemplate
+        title={insertTrans('importSampleData', {
+          collection,
+        })}
+        handleClose={handleCloseDialog}
+        confirmLabel={
+          insertStatus === InsertStatusEnum.init
+            ? btnTrans('import')
+            : insertStatus === InsertStatusEnum.loading
+            ? btnTrans('importing')
+            : insertStatus === InsertStatusEnum.success
+            ? btnTrans('done')
+            : insertStatus
+        }
+        handleConfirm={importData}
+        confirmDisabled={insertStatus === InsertStatusEnum.loading}
+        showActions={true}
+        showCancel={false}
+        // don't show close icon when insert not finish
+        // showCloseIcon={insertStatus !== InsertStatusEnum.loading}
+      >
+        <form className={classes.selectors}>
+          <div className="selectorWrapper">
+            <div className="description">
+              <Typography variant="inherit" component="p">
+                {insertTrans('importSampleDataDesc')}
+              </Typography>
+            </div>
+
+            <div className="actions">
+              <CustomSelector
+                label={insertTrans('sampleDataSize')}
+                options={sizeOptions}
+                wrapperClass="selector"
+                labelClass="selectLabel"
+                value={size}
+                variant="filled"
+                onChange={(e: { target: { value: unknown } }) => {
+                  const size = e.target.value;
+                  setSize(size as string);
+                  setCsvFileName(`${collection}.sample.${size}.csv`);
+                  setJsonFileName(`${collection}.sample.${size}.json`);
+                }}
+              />
+            </div>
+
+            <div className="download-actions">
+              <Chip
+                className={classes.downloadBtn}
+                icon={<DownloadIcon />}
+                label={csvFileName}
+                title={csvFileName}
+                variant="outlined"
+                size="small"
+                onClick={onDownloadCSVClicked}
+              />
+              <Chip
+                className={classes.downloadBtn}
+                icon={<DownloadIcon />}
+                label={jsonFileName}
+                title={jsonFileName}
+                variant="outlined"
+                size="small"
+                onClick={onDownloadJSONClicked}
+              />
+            </div>
           </div>
-        </div>
-      </form>
-    </DialogTemplate>
-  );
-};
+        </form>
+      </DialogTemplate>
+    );
+  };
 
 export default ImportSampleDialog;

client/src/pages/dialogs/RenameCollectionDialog.tsx

@@ -7,7 +7,7 @@ import { useFormValidation } from '@/hooks';
 import DialogTemplate from '@/components/customDialog/DialogTemplate';
 import CustomInput from '@/components/customInput/CustomInput';
 import { ITextfieldConfig } from '@/components/customInput/Types';
-import { RenameCollectionProps } from './Types';
+import { CollectionObject } from '@server/types';
 
 const useStyles = makeStyles((theme: Theme) => ({
   desc: {
@@ -15,10 +15,15 @@ const useStyles = makeStyles((theme: Theme) => ({
   },
 }));
 
+export interface RenameCollectionProps {
+  collection: CollectionObject;
+  cb?: (collectionName: string) => void;
+}
+
 const RenameCollectionDialog: FC<RenameCollectionProps> = props => {
   const { renameCollection } = useContext(dataContext);
 
-  const { collectionName, cb } = props;
+  const { collection, cb } = props;
   const [form, setForm] = useState({
     new_collection_name: '',
   });
@@ -44,7 +49,10 @@ const RenameCollectionDialog: FC<RenameCollectionProps> = props => {
   };
 
   const handleConfirm = async () => {
-    await renameCollection(collectionName, form.new_collection_name);
+    await renameCollection(
+      collection.collection_name,
+      form.new_collection_name
+    );
     openSnackBar(
       successTrans('rename', {
         name: collectionTrans('collection'),
@@ -78,7 +86,7 @@ const RenameCollectionDialog: FC<RenameCollectionProps> = props => {
   return (
     <DialogTemplate
       title={dialogTrans('renameTitle', {
-        type: collectionName,
+        type: collection.collection_name,
       })}
       handleClose={handleCloseDialog}
       children={

client/src/pages/dialogs/Types.ts

@@ -24,24 +24,6 @@ interface CollectionDialogBaseProps {
 export interface CompactDialogProps extends CollectionDialogBaseProps {}
 export interface FlushDialogProps extends CollectionDialogBaseProps {}
 
-export interface CreateAliasProps {
-  collectionName: string;
-  cb?: (collectionName: string) => void;
-}
-
-export interface EmptyDataProps {
-  collectionName: string;
-  cb?: () => void;
-}
-
-export interface DuplicateCollectionDialogProps extends CreateAliasProps {
-  collections: CollectionObject[];
-}
-
-export interface RenameCollectionProps {
-  collectionName: string;
-  cb?: (collectionName: string) => void;
-}
 export interface LoadSampleParam {
   collection_name: string;
   // e.g. [{vector: [1,2,3], age: 10}]

client/src/pages/query/Query.tsx

@@ -201,7 +201,7 @@ const Query = () => {
                   );
                   await onDelete();
                 }}
-                collectionName={collectionName}
+                collection={collection!}
               />
             ),
           },

client/src/pages/schema/Schema.tsx

@@ -258,7 +258,6 @@ const Schema = () => {
               status={collection.status}
               percentage={collection.loadedPercentage}
               schema={collection.schema!}
-              collectionName={collection.collection_name}
               action={() => {
                 setDialog({
                   open: true,