refactoring dialogs part1

client/src/components/insert/ImportSample.tsx

@@ -1,145 +0,0 @@
-import { makeStyles, Theme, Typography } from '@material-ui/core';
-import { FC, useState, useContext } from 'react';
-import { useTranslation } from 'react-i18next';
-import DialogTemplate from '../customDialog/DialogTemplate';
-import CustomSelector from '../customSelector/CustomSelector';
-import { rootContext } from '../../context/Root';
-import { InsertStatusEnum } from './Types';
-
-const getStyles = makeStyles((theme: Theme) => {
-  return {
-    icon: {
-      fontSize: '16px',
-    },
-
-    selectors: {
-      '& .selectorWrapper': {
-        display: 'flex',
-        flexDirection: 'column',
-        marginBottom: theme.spacing(2),
-
-        '& .selectLabel': {
-          fontSize: '14px',
-          lineHeight: '20px',
-          color: theme.palette.attuDark.main,
-        },
-
-        '& .description': {
-          color: theme.palette.attuGrey.dark,
-          marginBottom: theme.spacing(1),
-          fontSize: 12,
-        },
-      },
-
-      '& .selector': {
-        minWidth: '128px',
-      },
-    },
-  };
-});
-
-/**
- * this component contains processes during insert
- * including import, preview and status
- */
-
-const ImportSample: FC<{ collection: string; handleImport: Function }> =
-  props => {
-    const classes = getStyles();
-    const [size, setSize] = useState<string>('100');
-    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 sizeOptions = [
-      {
-        label: '100',
-        value: '100',
-      },
-      {
-        label: '1k',
-        value: '1000',
-      },
-      {
-        label: '10k',
-        value: '10000',
-      },
-      {
-        label: '50k',
-        value: '50000',
-      },
-    ];
-
-    const handleNext = async () => {
-      if (insertStatus === InsertStatusEnum.success) {
-        handleCloseDialog();
-        return;
-      }
-      // start loading
-      setInsertStatus(InsertStatusEnum.loading);
-      const { result, msg } = await props.handleImport(props.collection, size);
-
-      if (!result) {
-        openSnackBar(msg, 'error');
-        setInsertStatus(InsertStatusEnum.init);
-        return;
-      }
-      setInsertStatus(InsertStatusEnum.success);
-      // hide dialog
-      handleCloseDialog();
-    };
-
-    return (
-      <DialogTemplate
-        title={insertTrans('importSampleData', {
-          collection: props.collection,
-        })}
-        handleClose={handleCloseDialog}
-        confirmLabel={
-          insertStatus === InsertStatusEnum.init
-            ? btnTrans('import')
-            : insertStatus === InsertStatusEnum.loading
-            ? btnTrans('importing')
-            : insertStatus === InsertStatusEnum.success
-            ? btnTrans('done')
-            : insertStatus
-        }
-        handleConfirm={handleNext}
-        confirmDisabled={false}
-        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>
-
-            <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);
-              }}
-            />
-          </div>
-        </form>
-      </DialogTemplate>
-    );
-  };
-
-export default ImportSample;

client/src/pages/collections/Collections.tsx

@@ -1,30 +1,29 @@
 import { useCallback, useContext, useEffect, useMemo, useState } from 'react';
 import { Link, useSearchParams } from 'react-router-dom';
+import { makeStyles, Theme } from '@material-ui/core';
+import { useTranslation } from 'react-i18next';
 import { useNavigationHook } from '../../hooks/Navigation';
 import { ALL_ROUTER_TYPES } from '../../router/Types';
 import AttuGrid from '../../components/grid/Grid';
 import CustomToolBar from '../../components/grid/ToolBar';
-import { CollectionView, InsertDataParam, LoadSampleParam } from './Types';
+import { CollectionView, InsertDataParam } from './Types';
 import { ColDefinitionsType, ToolBarConfig } from '../../components/grid/Types';
 import { usePaginationHook } from '../../hooks/Pagination';
 import icons from '../../components/icons/Icons';
 import EmptyCard from '../../components/cards/EmptyCard';
 import Status from '../../components/status/Status';
-import { useTranslation } from 'react-i18next';
 import { ChildrenStatusType } from '../../components/status/Types';
-import { makeStyles, Theme } from '@material-ui/core';
 import StatusIcon from '../../components/status/StatusIcon';
 import CustomToolTip from '../../components/customToolTip/CustomToolTip';
 import { rootContext } from '../../context/Root';
 import CreateCollectionDialog from '../dialogs/CreateCollectionDialog';
-import DeleteTemplate from '../../components/customDialog/DeleteDialogTemplate';
 import { CollectionHttp } from '../../http/Collection';
-import { useInsertDialogHook } from '../../hooks/Dialog';
 import LoadCollectionDialog from '../dialogs/LoadCollectionDialog';
 import ReleaseCollectionDialog from '../dialogs/ReleaseCollectionDialog';
+import DropCollectionDialog from '../dialogs/DropCollectionDialog';
 import Highlighter from 'react-highlight-words';
-import InsertContainer from '../../components/insert/Container';
-import ImportSample from '../../components/insert/ImportSample';
+import InsertDialog from '../dialogs/insert/Dialog';
+import ImportSampleDialog from '../dialogs/ImportSampleDialog';
 import { MilvusHttp } from '../../http/Milvus';
 import { LOADING_STATE } from '../../consts/Milvus';
 import { webSokcetContext } from '../../context/WebSocket';
@@ -57,7 +56,6 @@ const useStyles = makeStyles((theme: Theme) => ({
 
 const Collections = () => {
   useNavigationHook(ALL_ROUTER_TYPES.COLLECTIONS);
-  const { handleInsertDialog } = useInsertDialogHook();
   const [searchParams] = useSearchParams();
   const [search, setSearch] = useState<string>(
     (searchParams.get('search') as string) || ''
@@ -67,12 +65,10 @@ const Collections = () => {
     CollectionView[]
   >([]);
 
-  const { setDialog, handleCloseDialog, openSnackBar } =
-    useContext(rootContext);
+  const { setDialog, openSnackBar } = useContext(rootContext);
   const { collections, setCollections } = useContext(webSokcetContext);
   const { t: collectionTrans } = useTranslation('collection');
   const { t: btnTrans } = useTranslation('btn');
-  const { t: dialogTrans } = useTranslation('dialog');
   const { t: successTrans } = useTranslation('success');
   const classes = useStyles();
 
@@ -182,30 +178,7 @@ const Collections = () => {
     }
   };
 
-  const handleImportSample = async (
-    collectionName: string,
-    size: string
-  ): Promise<{ result: boolean; msg: string }> => {
-    const param: LoadSampleParam = {
-      collection_name: collectionName,
-      size: size,
-    };
-    try {
-      await CollectionHttp.importSample(collectionName, param);
-      await MilvusHttp.flush(collectionName);
-      return { result: true, msg: '' };
-    } catch (err: any) {
-      const {
-        response: {
-          data: { message },
-        },
-      } = err;
-      return { result: false, msg: message || '' };
-    }
-  };
-
   const onCreate = () => {
-    handleCloseDialog();
     openSnackBar(
       successTrans('create', { name: collectionTrans('collection') })
     );
@@ -224,15 +197,11 @@ const Collections = () => {
     fetchData();
   };
 
-  const handleDelete = async () => {
-    for (const item of selectedCollections) {
-      await CollectionHttp.deleteCollection(item._name);
-    }
+  const onDelete = () => {
     openSnackBar(
       successTrans('delete', { name: collectionTrans('collection') })
     );
     fetchData();
-    handleCloseDialog();
     setSelectedCollections([]);
   };
 
@@ -257,19 +226,25 @@ const Collections = () => {
     {
       label: btnTrans('insert'),
       onClick: () => {
-        handleInsertDialog(
-          <InsertContainer
-            collections={formatCollections}
-            defaultSelectedCollection={
-              selectedCollections.length === 1
-                ? selectedCollections[0]._name
-                : ''
-            }
-            // user can't select partition on collection page, so default value is ''
-            defaultSelectedPartition={''}
-            handleInsert={handleInsert}
-          />
-        );
+        setDialog({
+          open: true,
+          type: 'custom',
+          params: {
+            component: (
+              <InsertDialog
+                collections={formatCollections}
+                defaultSelectedCollection={
+                  selectedCollections.length === 1
+                    ? selectedCollections[0]._name
+                    : ''
+                }
+                // user can't select partition on collection page, so default value is ''
+                defaultSelectedPartition={''}
+                handleInsert={handleInsert}
+              />
+            ),
+          },
+        });
       },
       /**
        * insert validation:
@@ -296,13 +271,9 @@ const Collections = () => {
           type: 'custom',
           params: {
             component: (
-              <DeleteTemplate
-                label={btnTrans('drop')}
-                title={dialogTrans('deleteTitle', {
-                  type: collectionTrans('collection'),
-                })}
-                text={collectionTrans('deleteWarning')}
-                handleDelete={handleDelete}
+              <DropCollectionDialog
+                onDelete={onDelete}
+                collections={selectedCollections}
               />
             ),
           },
@@ -457,12 +428,7 @@ const Collections = () => {
               open: true,
               type: 'custom',
               params: {
-                component: (
-                  <ImportSample
-                    collection={row._name}
-                    handleImport={handleImportSample}
-                  />
-                ),
+                component: <ImportSampleDialog collection={row._name} />,
               },
             });
           },

client/src/pages/collections/Types.ts

@@ -127,12 +127,6 @@ export interface InsertDataParam {
   fields_data: any[];
 }
 
-export interface LoadSampleParam {
-  collection_name: string;
-  // e.g. [{vector: [1,2,3], age: 10}]
-  size: string;
-}
-
 export interface DeleteEntitiesReq {
   expr: string;
   partition_name?: string;

client/src/pages/dialogs/CreateCollectionDialog.tsx

@@ -220,6 +220,7 @@ const CreateCollectionDialog: FC<CollectionCreateProps> = ({ onCreate }) => {
     });
 
     onCreate && onCreate();
+    handleCloseDialog();
   };
 
   return (

client/src/pages/partitions/Create.tsx → client/src/pages/dialogs/CreatePartitionDialog.tsx

@@ -1,12 +1,16 @@
 import { makeStyles, Theme } from '@material-ui/core';
-import { FC, useMemo, useState } from 'react';
+import { FC, useMemo, useState, useContext } from 'react';
 import { useTranslation } from 'react-i18next';
+import { rootContext } from '../../context/Root';
 import DialogTemplate from '../../components/customDialog/DialogTemplate';
 import CustomInput from '../../components/customInput/CustomInput';
 import { ITextfieldConfig } from '../../components/customInput/Types';
 import { useFormValidation } from '../../hooks/Form';
 import { formatForm } from '../../utils/Form';
 import { PartitionCreateProps } from './Types';
+import { PartitionManageParam } from '../partitions/Types';
+import { ManageRequestMethods } from '../../types/Common';
+import { PartitionHttp } from '../../http/Partition';
 
 const useStyles = makeStyles((theme: Theme) => ({
   input: {
@@ -15,13 +19,15 @@ const useStyles = makeStyles((theme: Theme) => ({
 }));
 
 const CreatePartition: FC<PartitionCreateProps> = ({
-  handleCreate,
-  handleClose,
+  onCreate,
+  collectionName,
 }) => {
+  const classes = useStyles();
+
+  const { handleCloseDialog } = useContext(rootContext);
   const { t: partitionTrans } = useTranslation('partition');
   const { t: btnTrans } = useTranslation('btn');
   const { t: warningTrans } = useTranslation('warning');
-
   const [form, setForm] = useState<{ name: string }>({
     name: '',
   });
@@ -31,8 +37,6 @@ const CreatePartition: FC<PartitionCreateProps> = ({
   }, [form]);
   const { validation, checkIsValid, disabled } = useFormValidation(checkedForm);
 
-  const classes = useStyles();
-
   const handleInputChange = (value: string) => {
     setForm({ name: value });
   };
@@ -55,11 +59,20 @@ const CreatePartition: FC<PartitionCreateProps> = ({
       },
     ],
   };
+  const handleCreatePartition = async () => {
+    const param: PartitionManageParam = {
+      partitionName: form.name,
+      collectionName: collectionName,
+      type: ManageRequestMethods.CREATE,
+    };
 
-  const handleCreatePartition = () => {
-    handleCreate(form.name);
+    await PartitionHttp.managePartition(param);
+    onCreate && onCreate();
+    handleCloseDialog();
   };
 
+  const handleClose = () => {};
+
   return (
     <DialogTemplate
       title={partitionTrans('createTitle')}

client/src/pages/dialogs/DropCollectionDialog.tsx

@@ -0,0 +1,36 @@
+import { FC, useContext } from 'react';
+import { useTranslation } from 'react-i18next';
+import { rootContext } from '../../context/Root';
+import DeleteTemplate from '../../components/customDialog/DeleteDialogTemplate';
+import { CollectionHttp } from '../../http/Collection';
+import { DropCollectionProps } from './Types';
+
+const DropCollectionDialog: FC<DropCollectionProps> = props => {
+  const { collections, onDelete } = props;
+  const { handleCloseDialog } = useContext(rootContext);
+  const { t: collectionTrans } = useTranslation('collection');
+  const { t: btnTrans } = useTranslation('btn');
+  const { t: dialogTrans } = useTranslation('dialog');
+
+  const handleDelete = async () => {
+    for (const item of collections) {
+      await CollectionHttp.deleteCollection(item._name);
+    }
+
+    handleCloseDialog();
+    onDelete && onDelete();
+  };
+
+  return (
+    <DeleteTemplate
+      label={btnTrans('drop')}
+      title={dialogTrans('deleteTitle', {
+        type: collectionTrans('collection'),
+      })}
+      text={collectionTrans('deleteWarning')}
+      handleDelete={handleDelete}
+    />
+  );
+};
+
+export default DropCollectionDialog;

client/src/pages/dialogs/DropPartitionDialog.tsx

@@ -0,0 +1,41 @@
+import { FC, useContext } from 'react';
+import { useTranslation } from 'react-i18next';
+import { rootContext } from '../../context/Root';
+import DeleteTemplate from '../../components/customDialog/DeleteDialogTemplate';
+import { DropPartitionProps } from './Types';
+import { PartitionHttp } from '../../http/Partition';
+import { PartitionManageParam } from '../partitions/Types';
+import { ManageRequestMethods } from '../../types/Common';
+
+const DropPartitionDialog: FC<DropPartitionProps> = props => {
+  const { partitions, onDelete, collectionName } = props;
+  const { handleCloseDialog } = useContext(rootContext);
+  const { t: partitionTrans } = useTranslation('partition');
+  const { t: btnTrans } = useTranslation('btn');
+  const { t: dialogTrans } = useTranslation('dialog');
+
+  const handleDelete = async () => {
+    for (const partition of partitions) {
+      const param: PartitionManageParam = {
+        partitionName: partition._name,
+        collectionName,
+        type: ManageRequestMethods.DELETE,
+      };
+      await PartitionHttp.managePartition(param);
+    }
+
+    handleCloseDialog();
+    onDelete && onDelete();
+  };
+
+  return (
+    <DeleteTemplate
+      label={btnTrans('drop')}
+      title={dialogTrans('deleteTitle', { type: partitionTrans('partition') })}
+      text={partitionTrans('deleteWarning')}
+      handleDelete={handleDelete}
+    />
+  );
+};
+
+export default DropPartitionDialog;

client/src/pages/dialogs/ImportSampleDialog.tsx

@@ -0,0 +1,164 @@
+import { makeStyles, Theme, Typography } from '@material-ui/core';
+import { FC, useState, useContext } from 'react';
+import { useTranslation } from 'react-i18next';
+import DialogTemplate from '../../components/customDialog/DialogTemplate';
+import CustomSelector from '../../components/customSelector/CustomSelector';
+import { rootContext } from '../../context/Root';
+import { InsertStatusEnum } from './insert/Types';
+import { CollectionHttp } from '../../http/Collection';
+import { MilvusHttp } from '../../http/Milvus';
+import { LoadSampleParam } from './Types';
+
+const getStyles = makeStyles((theme: Theme) => {
+  return {
+    icon: {
+      fontSize: '16px',
+    },
+
+    selectors: {
+      '& .selectorWrapper': {
+        display: 'flex',
+        flexDirection: 'column',
+        marginBottom: theme.spacing(2),
+
+        '& .selectLabel': {
+          fontSize: '14px',
+          lineHeight: '20px',
+          color: theme.palette.attuDark.main,
+        },
+
+        '& .description': {
+          color: theme.palette.attuGrey.dark,
+          marginBottom: theme.spacing(1),
+          fontSize: 12,
+        },
+      },
+
+      '& .selector': {
+        minWidth: '128px',
+      },
+    },
+  };
+});
+
+const ImportSampleDialog: FC<{ collection: string }> = props => {
+  const classes = getStyles();
+  const [size, setSize] = useState<string>('100');
+  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 sizeOptions = [
+    {
+      label: '100',
+      value: '100',
+    },
+    {
+      label: '1k',
+      value: '1000',
+    },
+    {
+      label: '10k',
+      value: '10000',
+    },
+    {
+      label: '50k',
+      value: '50000',
+    },
+  ];
+
+  const handleImportSample = async (
+    collectionName: string,
+    size: string
+  ): Promise<{ result: boolean; msg: string }> => {
+    const param: LoadSampleParam = {
+      collection_name: collectionName,
+      size: size,
+    };
+    try {
+      await CollectionHttp.importSample(collectionName, param);
+      await MilvusHttp.flush(collectionName);
+      return { result: true, msg: '' };
+    } catch (err: any) {
+      const {
+        response: {
+          data: { message },
+        },
+      } = err;
+      return { result: false, msg: message || '' };
+    }
+  };
+
+  const handleNext = async () => {
+    if (insertStatus === InsertStatusEnum.success) {
+      handleCloseDialog();
+      return;
+    }
+    // start loading
+    setInsertStatus(InsertStatusEnum.loading);
+    const { result, msg } = await handleImportSample(props.collection, size);
+
+    if (!result) {
+      openSnackBar(msg, 'error');
+      setInsertStatus(InsertStatusEnum.init);
+      return;
+    }
+    setInsertStatus(InsertStatusEnum.success);
+    // hide dialog
+    handleCloseDialog();
+  };
+
+  return (
+    <DialogTemplate
+      title={insertTrans('importSampleData', {
+        collection: props.collection,
+      })}
+      handleClose={handleCloseDialog}
+      confirmLabel={
+        insertStatus === InsertStatusEnum.init
+          ? btnTrans('import')
+          : insertStatus === InsertStatusEnum.loading
+          ? btnTrans('importing')
+          : insertStatus === InsertStatusEnum.success
+          ? btnTrans('done')
+          : insertStatus
+      }
+      handleConfirm={handleNext}
+      confirmDisabled={false}
+      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>
+
+          <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);
+            }}
+          />
+        </div>
+      </form>
+    </DialogTemplate>
+  );
+};
+
+export default ImportSampleDialog;

client/src/pages/dialogs/LoadCollectionDialog.tsx

@@ -102,8 +102,7 @@ const LoadCollectionDialog = (props: any) => {
 
     // load collection request
     await CollectionHttp.loadCollection(collection, params);
-    // close dialog
-    handleCloseDialog();
+
     // callback
     onLoad && onLoad();
   };

client/src/pages/dialogs/Types.ts

@@ -0,0 +1,24 @@
+import { CollectionData } from '../collections/Types';
+import { PartitionData } from '../partitions/Types';
+
+export interface LoadSampleParam {
+  collection_name: string;
+  // e.g. [{vector: [1,2,3], age: 10}]
+  size: string;
+}
+
+export interface DropCollectionProps {
+  collections: CollectionData[];
+  onDelete: () => void;
+}
+
+export interface DropPartitionProps {
+  partitions: PartitionData[];
+  collectionName: string;
+  onDelete: () => void;
+}
+
+export interface PartitionCreateProps {
+  onCreate: () => void;
+  collectionName: string;
+}

client/src/components/insert/Container.tsx → client/src/pages/dialogs/insert/Dialog.tsx

@@ -9,9 +9,9 @@ import {
   useState,
 } from 'react';
 import { useTranslation } from 'react-i18next';
-import DialogTemplate from '../customDialog/DialogTemplate';
-import icons from '../icons/Icons';
-import { rootContext } from '../../context/Root';
+import DialogTemplate from '../../../components/customDialog/DialogTemplate';
+import icons from '../../../components/icons/Icons';
+import { rootContext } from '../../../context/Root';
 import InsertImport from './Import';
 import InsertPreview from './Preview';
 import InsertStatus from './Status';
@@ -20,10 +20,10 @@ import {
   InsertStatusEnum,
   InsertStepperEnum,
 } from './Types';
-import { Option } from '../customSelector/Types';
+import { Option } from '../../../components/customSelector/Types';
 import { parse } from 'papaparse';
-import { PartitionHttp } from '../../http/Partition';
-import { combineHeadsAndData } from '../../utils/Insert';
+import { PartitionHttp } from '../../../http/Partition';
+import { combineHeadsAndData } from '../../../utils/Insert';
 
 const getStyles = makeStyles((theme: Theme) => ({
   icon: {

client/src/components/insert/Import.tsx → client/src/pages/dialogs/insert/Import.tsx

@@ -1,11 +1,11 @@
 import { FC } from 'react';
 import { useTranslation } from 'react-i18next';
 import { makeStyles, Theme, Divider, Typography } from '@material-ui/core';
-import CustomSelector from '../customSelector/CustomSelector';
+import CustomSelector from '../../../components/customSelector/CustomSelector';
 import { InsertImportProps } from './Types';
-import Uploader from '../uploader/Uploader';
-import { INSERT_CSV_SAMPLE, INSERT_MAX_SIZE } from '../../consts/Insert';
-import { parseByte } from '../../utils/Format';
+import Uploader from '../../../components/uploader/Uploader';
+import { INSERT_CSV_SAMPLE, INSERT_MAX_SIZE } from '../../../consts/Insert';
+import { parseByte } from '../../../utils/Format';
 
 const getStyles = makeStyles((theme: Theme) => ({
   tip: {

client/src/components/insert/Preview.tsx → client/src/pages/dialogs/insert/Preview.tsx

@@ -2,13 +2,13 @@ import { FC, useCallback, useMemo } from 'react';
 import { makeStyles, Theme, Typography } from '@material-ui/core';
 import { useTranslation } from 'react-i18next';
 import { InsertPreviewProps } from './Types';
-import { Option } from '../customSelector/Types';
-import CustomSelector from '../customSelector/CustomSelector';
-import AttuGrid from '../grid/Grid';
-import { transferCsvArrayToTableData } from '../../utils/Insert';
-import { ColDefinitionsType } from '../grid/Types';
-import SimpleMenu from '../menu/SimpleMenu';
-import icons from '../icons/Icons';
+import { Option } from '../../../components/customSelector/Types';
+import CustomSelector from '../../../components/customSelector/CustomSelector';
+import AttuGrid from '../../../components/grid/Grid';
+import { transferCsvArrayToTableData } from '../../../utils/Insert';
+import { ColDefinitionsType } from '../../../components/grid/Types';
+import SimpleMenu from '../../../components/menu/SimpleMenu';
+import icons from '../../../components/icons/Icons';
 
 const getStyles = makeStyles((theme: Theme) => ({
   wrapper: {

client/src/components/insert/Status.tsx → client/src/pages/dialogs/insert/Status.tsx

@@ -5,10 +5,10 @@ import {
   Typography,
   CircularProgress,
 } from '@material-ui/core';
-import { InsertStatusEnum, InsertStatusProps } from './Types';
-import successPath from '../../assets/imgs/insert/success.png';
-import failPath from '../../assets/imgs/insert/fail.png';
 import { useTranslation } from 'react-i18next';
+import { InsertStatusEnum, InsertStatusProps } from './Types';
+import successPath from '../../../assets/imgs/insert/success.png';
+import failPath from '../../../assets/imgs/insert/fail.png';
 
 const getStyles = makeStyles((theme: Theme) => ({
   wrapper: {

client/src/components/insert/Types.ts → client/src/pages/dialogs/insert/Types.ts

@@ -1,7 +1,7 @@
-import { CollectionData } from '../../pages/collections/Types';
-import { PartitionView } from '../../pages/partitions/Types';
-import { FieldData } from '../../pages/schema/Types';
-import { Option } from '../customSelector/Types';
+import { CollectionData } from '../../collections/Types';
+import { PartitionView } from '../../partitions/Types';
+import { FieldData } from '../../schema/Types';
+import { Option } from '../../../components/customSelector/Types';
 
 export interface InsertContentProps {
   // optional on partition page since its collection is fixed

client/src/pages/partitions/Partitions.tsx

@@ -1,7 +1,7 @@
 import { makeStyles, Theme } from '@material-ui/core';
 import { FC, useContext, useEffect, useState } from 'react';
 import { useSearchParams } from 'react-router-dom';
-import { PartitionManageParam, PartitionView } from './Types';
+import { PartitionView } from './Types';
 import AttuGrid from '../../components/grid/Grid';
 import { ColDefinitionsType, ToolBarConfig } from '../../components/grid/Types';
 import { useTranslation } from 'react-i18next';
@@ -9,18 +9,17 @@ import { usePaginationHook } from '../../hooks/Pagination';
 import icons from '../../components/icons/Icons';
 import CustomToolTip from '../../components/customToolTip/CustomToolTip';
 import { rootContext } from '../../context/Root';
-import CreatePartition from './Create';
 import { PartitionHttp } from '../../http/Partition';
-import { ManageRequestMethods } from '../../types/Common';
-import DeleteTemplate from '../../components/customDialog/DeleteDialogTemplate';
 import Highlighter from 'react-highlight-words';
 import { useInsertDialogHook } from '../../hooks/Dialog';
-import InsertContainer from '../../components/insert/Container';
+import InsertContainer from '../dialogs/insert/Dialog';
 import { CollectionHttp } from '../../http/Collection';
 import { FieldHttp } from '../../http/Field';
 import { Field } from '../schema/Types';
 import { InsertDataParam } from '../collections/Types';
 import { MilvusHttp } from '../../http/Milvus';
+import CreatePartitionDialog from '../dialogs/CreatePartitionDialog';
+import DropPartitionDialog from '../dialogs/DropPartitionDialog';
 
 const useStyles = makeStyles((theme: Theme) => ({
   wrapper: {
@@ -46,7 +45,6 @@ const Partitions: FC<{
   const { t } = useTranslation('partition');
   const { t: successTrans } = useTranslation('success');
   const { t: btnTrans } = useTranslation('btn');
-  const { t: dialogTrans } = useTranslation('dialog');
   const [searchParams] = useSearchParams();
   const [search, setSearch] = useState<string>(
     (searchParams.get('search') as string) || ''
@@ -125,19 +123,9 @@ const Partitions: FC<{
     }, 300);
   }, [search, partitions]);
 
-  const handleDelete = async () => {
-    for (const partition of selectedPartitions) {
-      const param: PartitionManageParam = {
-        partitionName: partition._name,
-        collectionName,
-        type: ManageRequestMethods.DELETE,
-      };
-      await PartitionHttp.managePartition(param);
-    }
-
+  const onDelete = () => {
     openSnackBar(successTrans('delete', { name: t('partition') }));
     fetchPartitions(collectionName);
-    handleCloseDialog();
   };
 
   const handleSearch = (value: string) => {
@@ -179,9 +167,9 @@ const Partitions: FC<{
           type: 'custom',
           params: {
             component: (
-              <CreatePartition
-                handleCreate={handleCreatePartition}
-                handleClose={handleCloseDialog}
+              <CreatePartitionDialog
+                collectionName={collectionName}
+                onCreate={onCreate}
               />
             ),
           },
@@ -227,11 +215,10 @@ const Partitions: FC<{
           type: 'custom',
           params: {
             component: (
-              <DeleteTemplate
-                label={btnTrans('drop')}
-                title={dialogTrans('deleteTitle', { type: t('partition') })}
-                text={t('deleteWarning')}
-                handleDelete={handleDelete}
+              <DropPartitionDialog
+                partitions={selectedPartitions}
+                collectionName={collectionName}
+                onDelete={onDelete}
               />
             ),
           },
@@ -324,19 +311,11 @@ const Partitions: FC<{
     setSelectedPartitions([]);
   };
 
-  const handleCreatePartition = async (name: string) => {
-    const param: PartitionManageParam = {
-      partitionName: name,
-      collectionName,
-      type: ManageRequestMethods.CREATE,
-    };
-
-    await PartitionHttp.managePartition(param);
-
+  const onCreate = () => {
     openSnackBar(successTrans('create', { name: t('partition') }));
-    handleCloseDialog();
     // refresh partitions
     fetchPartitions(collectionName);
+    setSelectedPartitions([]);
   };
 
   return (

client/src/pages/partitions/Types.ts

@@ -27,8 +27,3 @@ export interface PartitionParam {
   collectionName: string;
   partitionNames: string[];
 }
-
-export interface PartitionCreateProps {
-  handleCreate: (name: string) => void;
-  handleClose: () => void;
-}