Add replica support

client/src/components/customTabList/CustomTabList.tsx

@@ -4,6 +4,10 @@ import { ITabListProps, ITabPanel } from './Types';
 
 const useStyles = makeStyles((theme: Theme) => ({
   wrapper: {
+    display: 'flex',
+    flexDirection: 'column',
+    flexBasis: 0,
+    flexGrow: 1,
     '& .MuiTab-wrapper': {
       textTransform: 'capitalize',
       fontWeight: 'bold',
@@ -25,7 +29,7 @@ const useStyles = makeStyles((theme: Theme) => ({
     flexBasis: 0,
     flexGrow: 1,
     marginTop: theme.spacing(2),
-    overflowY: 'auto',
+    overflow: 'hidden',
   },
 }));
 
@@ -65,10 +69,9 @@ const CustomTabList: FC<ITabListProps> = props => {
   };
 
   return (
-    <>
+    <div className={`${classes.wrapper}  ${wrapperClass}`}>
       <Tabs
         classes={{
-          root: `${classes.wrapper} ${wrapperClass}`,
           indicator: classes.tab,
           flexContainer: classes.tabContainer,
         }}
@@ -99,7 +102,7 @@ const CustomTabList: FC<ITabListProps> = props => {
           {tab.component}
         </TabPanel>
       ))}
-    </>
+    </div>
   );
 };
 

client/src/components/dialogs/LoadCollectionDialog.tsx

@@ -0,0 +1,196 @@
+import { useEffect, useState, useContext, useMemo } from 'react';
+import {
+  Typography,
+  makeStyles,
+  Theme,
+  Switch,
+  FormControlLabel,
+} from '@material-ui/core';
+import { useTranslation } from 'react-i18next';
+import { CollectionHttp } from '../../http/Collection';
+import { rootContext } from '../../context/Root';
+import { useFormValidation } from '../../hooks/Form';
+import { formatForm } from '../../utils/Form';
+import { parseJson, getNode } from '../../utils/Metric';
+import CustomInput from '../customInput/CustomInput';
+import { ITextfieldConfig } from '../customInput/Types';
+import DialogTemplate from '../customDialog/DialogTemplate';
+import { MilvusHttp } from '../../http/Milvus';
+import CustomToolTip from '../customToolTip/CustomToolTip';
+import { MILVUS_NODE_TYPE, MILVUS_DEPLOY_MODE } from '../../consts/Milvus';
+import icons from '../icons/Icons';
+
+const useStyles = makeStyles((theme: Theme) => ({
+  desc: {
+    marginBottom: theme.spacing(2),
+    maxWidth: 480,
+  },
+  replicaDesc: {
+    marginBottom: theme.spacing(2),
+    maxWidth: 480,
+  },
+  toggle: {
+    marginBottom: theme.spacing(2),
+  },
+  icon: {
+    fontSize: '20px',
+    marginLeft: theme.spacing(0.5),
+  },
+}));
+
+const LoadCollectionDialog = (props: any) => {
+  const classes = useStyles();
+  const { collection, onLoad } = props;
+  const { t: dialogTrans } = useTranslation('dialog');
+  const { t: collectionTrans } = useTranslation('collection');
+  const { t: btnTrans } = useTranslation('btn');
+  const { t: warningTrans } = useTranslation('warning');
+  const { handleCloseDialog } = useContext(rootContext);
+  const [form, setForm] = useState({
+    replica: 0,
+  });
+  const [enableRelica, setEnableRelica] = useState(false);
+  const [replicaToggle, setReplicaToggle] = useState(false);
+
+  // check if it is cluster
+  useEffect(() => {
+    async function fetchData() {
+      const res = await MilvusHttp.getMetrics();
+      const parsedJson = parseJson(res);
+      // get root cord
+      const rootCoords = getNode(
+        parsedJson.workingNodes,
+        MILVUS_NODE_TYPE.ROOTCOORD
+      );
+      // get query nodes
+      const queryNodes = getNode(
+        parsedJson.workingNodes,
+        MILVUS_NODE_TYPE.QUERYNODE
+      );
+
+      const rootCoord = rootCoords[0];
+
+      // should we show replic toggle
+      const enableRelica =
+        rootCoord.infos.system_info.deploy_mode ===
+        MILVUS_DEPLOY_MODE.DISTRIBUTED;
+
+      // only show replica toggle in distributed mode && query node > 1
+      if (enableRelica && queryNodes.length > 1) {
+        setForm({
+          replica: queryNodes.length,
+        });
+        setEnableRelica(enableRelica);
+      }
+    }
+    fetchData();
+  }, []);
+
+  // input  state change
+  const handleInputChange = (value: number) => {
+    setForm({ replica: value });
+  };
+  // confirm action
+  const handleConfirm = async () => {
+    let params;
+
+    if (enableRelica) {
+      params = { replica_number: Number(form.replica) };
+    }
+
+    // load collection request
+    await CollectionHttp.loadCollection(collection, params);
+    // close dialog
+    handleCloseDialog();
+    // callback
+    onLoad && onLoad();
+  };
+
+  // validator
+  const checkedForm = useMemo(() => {
+    return enableRelica ? [] : formatForm(form);
+  }, [form, enableRelica]);
+
+  // validate
+  const { validation, checkIsValid, disabled } = useFormValidation(checkedForm);
+
+  // input config
+  const inputConfig: ITextfieldConfig = {
+    label: collectionTrans('replicaNum'),
+    type: 'number',
+    key: 'replica',
+    onChange: handleInputChange,
+    variant: 'filled',
+    placeholder: collectionTrans('replicaNum'),
+    fullWidth: true,
+    validations: [],
+    required: enableRelica,
+    defaultValue: form.replica,
+  };
+
+  // if replica is enabled, add validation
+  if (enableRelica) {
+    inputConfig.validations?.push({
+      rule: 'require',
+      errorText: warningTrans('required', {
+        name: collectionTrans('replicaNum'),
+      }),
+    });
+  }
+
+  // toggle enbale replica
+  const handleChange = () => {
+    setReplicaToggle(!replicaToggle);
+  };
+
+  const InfoIcon = icons.info;
+
+  return (
+    <DialogTemplate
+      title={dialogTrans('loadTitle', {
+        type: collection,
+      })}
+      handleClose={handleCloseDialog}
+      children={
+        <>
+          <Typography variant="body1" component="p" className={classes.desc}>
+            {collectionTrans('loadContent')}
+          </Typography>
+          {enableRelica ? (
+            <>
+              <FormControlLabel
+                control={
+                  <Switch checked={replicaToggle} onChange={handleChange} />
+                }
+                label={
+                  <CustomToolTip title={collectionTrans('replicaDes')}>
+                    <>
+                      {collectionTrans('enableRepica')}
+                      <InfoIcon classes={{ root: classes.icon }} />
+                    </>
+                  </CustomToolTip>
+                }
+                className={classes.toggle}
+              />
+            </>
+          ) : null}
+          {replicaToggle ? (
+            <>
+              <CustomInput
+                type="text"
+                textConfig={inputConfig}
+                checkValid={checkIsValid}
+                validInfo={validation}
+              />
+            </>
+          ) : null}
+        </>
+      }
+      confirmLabel={btnTrans('load')}
+      handleConfirm={handleConfirm}
+      confirmDisabled={replicaToggle ? disabled : false}
+    />
+  );
+};
+
+export default LoadCollectionDialog;

client/src/components/dialogs/ReleaseCollectionDialog.tsx

@@ -0,0 +1,63 @@
+import { useContext, useState } from 'react';
+import { Typography, makeStyles, Theme } from '@material-ui/core';
+import { useTranslation } from 'react-i18next';
+import { CollectionHttp } from '../../http/Collection';
+import { rootContext } from '../../context/Root';
+import DialogTemplate from '../customDialog/DialogTemplate';
+
+const useStyles = makeStyles((theme: Theme) => ({
+  desc: {
+    margin: '8px 0 16px 0',
+    maxWidth: 480,
+  },
+}));
+
+const ReleaseCollectionDialog = (props: any) => {
+  const classes = useStyles();
+
+  const { collection, onRelease } = props;
+  const { t: dialogTrans } = useTranslation('dialog');
+  const { t: btnTrans } = useTranslation('btn');
+  const { handleCloseDialog } = useContext(rootContext);
+  const [disabled, setDisabled] = useState(false);
+
+  // confirm action
+  const handleConfirm = async () => {
+    // disable confirm button
+    setDisabled(true);
+    try {
+      // release collection
+      await CollectionHttp.releaseCollection(collection);
+      // execute callback
+      onRelease && onRelease();
+      // enable confirm button
+      setDisabled(false);
+      // close dialog
+      handleCloseDialog();
+    } finally {
+      // enable confirm button
+      setDisabled(false);
+    }
+  };
+
+  return (
+    <DialogTemplate
+      title={dialogTrans('releaseTitle', {
+        type: collection,
+      })}
+      handleClose={handleCloseDialog}
+      children={
+        <>
+          <Typography variant="body1" component="p" className={classes.desc}>
+            {dialogTrans('releaseContent', { type: collection })}
+          </Typography>
+        </>
+      }
+      confirmLabel={btnTrans('release')}
+      handleConfirm={handleConfirm}
+      confirmDisabled={disabled}
+    />
+  );
+};
+
+export default ReleaseCollectionDialog;

client/src/consts/Milvus.tsx

@@ -216,4 +216,20 @@ export enum LOADING_STATE {
 
 export const DEFAULT_VECTORS = 100000;
 export const DEFAULT_SEFMENT_FILE_SIZE = 1024;
-export const DEFAULT_MILVUS_PORT = 19530;
+export const DEFAULT_MILVUS_PORT = 19530;
+
+export enum MILVUS_NODE_TYPE {
+  ROOTCOORD = 'rootcoord',
+  QUERYCOORD = 'querycoord',
+  INDEXCOORD = 'indexcoord',
+  QUERYNODE = 'querynode',
+  INDEXNODE = 'indexnode',
+  DATACORD = 'datacord',
+  DATANODE = 'datanode',
+  PROXY = 'proxy',
+}
+
+export enum MILVUS_DEPLOY_MODE {
+  DISTRIBUTED = 'DISTRIBUTED',
+  STANDALONE = 'STANDALONE',
+}