Merge pull request #32 from Tumao727/feature/load-partition

add load partition

client/src/hooks/Dialog.tsx

@@ -0,0 +1,71 @@
+import { useContext } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Typography } from '@material-ui/core';
+import { rootContext } from '../context/Root';
+import { CollectionView } from '../pages/collections/Types';
+import { PartitionView } from '../pages/partitions/Types';
+import { StatusEnum } from '../components/status/Types';
+
+// handle release and load dialog
+export interface DialogHookProps {
+  type: 'partition' | 'collection';
+}
+
+export const useDialogHook = (props: DialogHookProps) => {
+  const { type } = props;
+  const { setDialog } = useContext(rootContext);
+  const { t: dialogTrans } = useTranslation('dialog');
+  const { t: btnTrans } = useTranslation('btn');
+  const { t: partitionTrans } = useTranslation('partition');
+  const { t: collectionTrans } = useTranslation('collection');
+
+  const name =
+    type === 'collection'
+      ? collectionTrans('collection')
+      : partitionTrans('partition');
+
+  const actionsMap = {
+    release: {
+      title: dialogTrans('releaseTitle', { type: name }),
+      component: (
+        <Typography className="dialog-content">
+          {dialogTrans('releaseContent', { type: name })}
+        </Typography>
+      ),
+      confirmLabel: btnTrans('release'),
+    },
+    load: {
+      title: dialogTrans('loadTitle', { type: name }),
+      component: (
+        <Typography className="dialog-content">
+          {dialogTrans('loadContent', { type: name })}
+        </Typography>
+      ),
+      confirmLabel: btnTrans('load'),
+    },
+  };
+
+  const handleAction = (
+    data: PartitionView | CollectionView,
+    cb: (data: any) => Promise<any>
+  ) => {
+    const actionType: 'release' | 'load' =
+      data._status === StatusEnum.loaded ? 'release' : 'load';
+    const { title, component, confirmLabel } = actionsMap[actionType];
+
+    setDialog({
+      open: true,
+      type: 'notice',
+      params: {
+        title,
+        component,
+        confirmLabel,
+        confirm: () => cb(data),
+      },
+    });
+  };
+
+  return {
+    handleAction,
+  };
+};

client/src/http/Partition.ts

@@ -1,13 +1,17 @@
 import { StatusEnum } from '../components/status/Types';
-import { PartitionManageParam, PartitionView } from '../pages/partitions/Types';
+import {
+  PartitionManageParam,
+  PartitionParam,
+  PartitionView,
+} from '../pages/partitions/Types';
 import { formatNumber } from '../utils/Common';
 import BaseModel from './BaseModel';
 
 export class PartitionHttp extends BaseModel implements PartitionView {
-  id!: string;
-  name!: string;
-  rowCount!: string;
-  status!: StatusEnum;
+  private id!: string;
+  private name!: string;
+  private rowCount!: string;
+  private status!: StatusEnum;
 
   constructor(props: {}) {
     super(props);
@@ -35,11 +39,27 @@ export class PartitionHttp extends BaseModel implements PartitionView {
     });
   }
 
+  static loadPartition(param: PartitionParam) {
+    const { collectionName, partitionNames } = param;
+    const path = `${this.URL_BASE}/load`;
+    return super.update({
+      path,
+      data: {
+        collection_name: collectionName,
+        partition_names: partitionNames,
+      },
+    });
+  }
+
   get _id() {
     return this.id;
   }
 
   get _name() {
+    return this.name;
+  }
+
+  get _formatName() {
     return this.name === '_default' ? 'Default partition' : this.name;
   }
 

client/src/i18n/cn/button.ts

@@ -10,6 +10,7 @@ const btnTrans = {
   delete: '删除',
   release: 'Release',
   create: 'Create',
+  load: 'Load',
 };
 
 export default btnTrans;

client/src/i18n/cn/dialog.ts

@@ -2,6 +2,12 @@ const dialogTrans = {
   deleteTipAction: 'Type',
   deleteTipPurpose: 'to confirm.',
   deleteTitle: `Delete {{type}}`,
+
+  releaseTitle: `Release {{type}}`,
+  loadTitle: `Load {{type}}`,
+
+  loadContent: `You are trying to load a {{type}} with data. Only loaded {{type}} can be searched.`,
+  releaseContent: `You are trying to release a {{type}} with data. Please be aware that the data will no longer be available for search.`,
 };
 
 export default dialogTrans;

client/src/i18n/cn/success.ts

@@ -1,6 +1,7 @@
 const successTrans = {
   connect: 'Connet milvus success',
   create: `{{name}} has been created`,
+  load: `{{name}} has been loaded`,
   delete: `{{name}} has been deleted`,
 };
 

client/src/i18n/en/button.ts

@@ -10,6 +10,7 @@ const btnTrans = {
   import: 'Import',
   delete: 'Delete',
   release: 'Release',
+  load: 'Load',
 };
 
 export default btnTrans;

client/src/i18n/en/dialog.ts

@@ -2,6 +2,11 @@ const dialogTrans = {
   deleteTipAction: 'Type',
   deleteTipPurpose: 'to confirm.',
   deleteTitle: `Delete {{type}}`,
+  releaseTitle: `Release {{type}}`,
+  loadTitle: `Load {{type}}`,
+
+  loadContent: `You are trying to load a {{type}} with data. Only loaded {{type}} can be searched.`,
+  releaseContent: `You are trying to release a {{type}} with data. Please be aware that the data will no longer be available for search.`,
 };
 
 export default dialogTrans;

client/src/i18n/en/success.ts

@@ -1,6 +1,7 @@
 const successTrans = {
   connect: 'Connet milvus success',
   create: `{{name}} has been created`,
+  load: `{{name}} has been loaded`,
   delete: `{{name}} has been deleted`,
 };
 

client/src/pages/collections/Collections.tsx

@@ -12,13 +12,14 @@ import EmptyCard from '../../components/cards/EmptyCard';
 import Status from '../../components/status/Status';
 import { useTranslation } from 'react-i18next';
 import { ChildrenStatusType, StatusEnum } from '../../components/status/Types';
-import { makeStyles, Theme, Typography } from '@material-ui/core';
+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 CreateCollection from './Create';
 import DeleteTemplate from '../../components/customDialog/DeleteDialogTemplate';
 import { CollectionHttp } from '../../http/Collection';
+import { useDialogHook } from '../../hooks/Dialog';
 
 const useStyles = makeStyles((theme: Theme) => ({
   emptyWrapper: {
@@ -41,7 +42,7 @@ const useStyles = makeStyles((theme: Theme) => ({
 
 const Collections = () => {
   useNavigationHook(ALL_ROUTER_TYPES.COLLECTIONS);
-
+  const { handleAction } = useDialogHook({ type: 'partition' });
   const [collections, setCollections] = useState<CollectionView[]>([]);
   const {
     pageSize,
@@ -129,47 +130,6 @@ const Collections = () => {
     setSelectedCollections([]);
   };
 
-  const handleAction = (data: CollectionView) => {
-    const actionType: 'release' | 'load' =
-      data._status === StatusEnum.loaded ? 'release' : 'load';
-
-    const actionsMap = {
-      release: {
-        title: t('releaseTitle'),
-        component: (
-          <Typography className={classes.dialogContent}>
-            {t('releaseContent')}
-          </Typography>
-        ),
-        confirmLabel: t('releaseConfirmLabel'),
-        confirm: () => handleRelease(data),
-      },
-      load: {
-        title: t('loadTitle'),
-        component: (
-          <Typography className={classes.dialogContent}>
-            {t('loadContent')}
-          </Typography>
-        ),
-        confirmLabel: t('loadConfirmLabel'),
-        confirm: () => handleLoad(data),
-      },
-    };
-
-    const { title, component, confirmLabel, confirm } = actionsMap[actionType];
-
-    setDialog({
-      open: true,
-      type: 'notice',
-      params: {
-        title,
-        component,
-        confirmLabel,
-        confirm,
-      },
-    });
-  };
-
   const toolbarConfigs: ToolBarConfig[] = [
     {
       label: t('create'),
@@ -264,7 +224,9 @@ const Collections = () => {
       actionBarConfigs: [
         {
           onClick: (e: React.MouseEvent, row: CollectionView) => {
-            handleAction(row);
+            const cb =
+              row._status === StatusEnum.unloaded ? handleLoad : handleRelease;
+            handleAction(row, cb);
           },
           icon: 'load',
           label: 'load',

client/src/pages/partitions/Types.ts

@@ -8,14 +8,22 @@ export interface PartitionView {
   _status: StatusEnum;
   _statusElement?: ReactElement;
   _rowCount: string;
+  _formatName: string;
 }
 
+// delete and create
 export interface PartitionManageParam {
   collectionName: string;
   partitionName: string;
   type: ManageRequestMethods;
 }
 
+// load and release
+export interface PartitionParam {
+  collectionName: string;
+  partitionNames: string[];
+}
+
 export interface PartitionCreateProps {
   handleCreate: (name: string) => void;
   handleClose: () => void;

client/src/pages/partitions/partitions.tsx

@@ -1,6 +1,6 @@
 import { makeStyles, Theme } from '@material-ui/core';
 import { FC, useContext, useEffect, useState } from 'react';
-import { PartitionManageParam, PartitionView } from './Types';
+import { PartitionManageParam, PartitionParam, PartitionView } from './Types';
 import MilvusGrid from '../../components/grid';
 import { ColDefinitionsType, ToolBarConfig } from '../../components/grid/Types';
 import { useTranslation } from 'react-i18next';
@@ -12,6 +12,8 @@ import CreatePartition from './Create';
 import { PartitionHttp } from '../../http/Partition';
 import Status from '../../components/status/Status';
 import { ManageRequestMethods } from '../../types/Common';
+import { StatusEnum } from '../../components/status/Types';
+import { useDialogHook } from '../../hooks/Dialog';
 
 const useStyles = makeStyles((theme: Theme) => ({
   wrapper: {
@@ -30,7 +32,10 @@ const Partitions: FC<{
   const { t } = useTranslation('partition');
   const { t: successTrans } = useTranslation('success');
   const InfoIcon = icons.info;
+  const LoadIcon = icons.load;
+  const ReleaseIcon = icons.release;
 
+  const { handleAction } = useDialogHook({ type: 'partition' });
   const [selectedPartitions, setSelectedPartitions] = useState<PartitionView[]>(
     []
   );
@@ -64,6 +69,19 @@ const Partitions: FC<{
     }
   };
 
+  const handleRelease = async (data: PartitionView) => {};
+
+  const handleLoad = async (data: PartitionView) => {
+    const param: PartitionParam = {
+      collectionName,
+      partitionNames: [data._name!],
+    };
+    const res = await PartitionHttp.loadPartition(param);
+    openSnackBar(successTrans('load', { name: t('partition') }));
+    fetchPartitions(collectionName);
+    return res;
+  };
+
   const toolbarConfigs: ToolBarConfig[] = [
     {
       label: t('create'),
@@ -99,7 +117,7 @@ const Partitions: FC<{
       label: t('id'),
     },
     {
-      id: '_name',
+      id: '_formatName',
       align: 'left',
       disablePadding: false,
       label: t('name'),
@@ -123,6 +141,30 @@ const Partitions: FC<{
         </span>
       ),
     },
+    {
+      id: 'action',
+      align: 'center',
+      disablePadding: false,
+      label: '',
+      showActionCell: true,
+      isHoverAction: true,
+      actionBarConfigs: [
+        {
+          onClick: (e: React.MouseEvent, row: PartitionView) => {
+            const cb =
+              row._status === StatusEnum.unloaded ? handleLoad : handleRelease;
+            handleAction(row, cb);
+          },
+          icon: 'load',
+          label: 'load',
+          showIconMethod: 'renderFn',
+          getLabel: (row: PartitionView) =>
+            row._status === StatusEnum.loaded ? 'release' : 'load',
+          renderIconFn: (row: PartitionView) =>
+            row._status === StatusEnum.loaded ? <ReleaseIcon /> : <LoadIcon />,
+        },
+      ],
+    },
   ];
 
   const handleSelectChange = (value: PartitionView[]) => {

client/src/styles/common.css

@@ -42,3 +42,14 @@ fieldset {
 .page-empty-card .MuiSvgIcon-root path {
   stroke: #aeaebb;
 }
+
+/* used for release or load dialog content */
+.dialog-content {
+  line-height: 24px;
+  font-size: 16px;
+  text-transform: lowercase;
+}
+
+.dialog-content::first-letter {
+  text-transform: uppercase;
+}