Merge pull request #93 from Tumao727/bugfix/style-adjust

hide load / release partition and update style

client/src/components/cards/EmptyCard.tsx

@@ -11,7 +11,7 @@ const useStyles = makeStyles((theme: Theme) => ({
     marginTop: theme.spacing(4),
     fontSize: '36px',
     lineHeight: '42px',
-    color: '#82838e',
+    color: theme.palette.milvusGrey.dark,
     fontWeight: 'bold',
     letterSpacing: '-0.02em',
   },

client/src/components/customButton/CustomButton.tsx

@@ -21,7 +21,7 @@ const buttonStyle = makeStyles(theme => ({
     fontWeight: 'bold',
     lineHeight: '16px',
     '&:hover': {
-      backgroundColor: theme.palette.primary.light,
+      backgroundColor: theme.palette.primary.dark,
       boxShadow: 'initial',
     },
   },

client/src/components/customDialog/CustomDialog.tsx

@@ -16,9 +16,7 @@ import CustomDialogTitle from './CustomDialogTitle';
 const useStyles = makeStyles((theme: Theme) =>
   createStyles({
     paper: {
-      // maxWidth: '480px',
       minWidth: '480px',
-      // width: '100%',
       borderRadius: '8px',
       padding: 0,
     },
@@ -29,10 +27,9 @@ const useStyles = makeStyles((theme: Theme) =>
       maxWidth: '80%',
     },
     dialogContent: {
-      marginTop: theme.spacing(4),
+      marginTop: theme.spacing(2),
     },
     title: {
-      // padding: theme.spacing(4),
       '& p': {
         fontWeight: '500',
         overflow: 'hidden',
@@ -43,7 +40,7 @@ const useStyles = makeStyles((theme: Theme) =>
       },
     },
     padding: {
-      padding: theme.spacing(4),
+      padding: theme.spacing(3, 4, 4),
     },
     cancel: {
       color: theme.palette.common.black,

client/src/components/customDialog/DeleteDialogTemplate.tsx

@@ -33,7 +33,7 @@ const useStyles = makeStyles((theme: Theme) => ({
     padding: '10px 12px',
   },
   cancelBtn: {
-    color: '#82838e',
+    color: theme.palette.milvusGrey.dark,
   },
 }));
 

client/src/components/customInput/CustomInput.tsx

@@ -65,7 +65,7 @@ const handleOnChange = (param: IChangeParam) => {
 
 const getAdornmentStyles = makeStyles(theme => ({
   icon: {
-    color: '#82838e',
+    color: theme.palette.milvusGrey.dark,
   },
 }));
 
@@ -217,6 +217,7 @@ const getTextfield = (
           ? { ...inputProps, ...defaultInputProps }
           : { ...defaultInputProps }
       }
+      error={info?.result && info.errText !== ''}
       InputProps={InputProps ? { ...InputProps } : {}}
       helperText={
         info && info.result && info.errText
@@ -247,6 +248,7 @@ const getStyles = makeStyles(theme => ({
     wordWrap: 'break-word',
     wordBreak: 'break-all',
     overflow: 'hidden',
+    marginLeft: '12px',
   },
   errBtn: {
     marginRight: `${theme.spacing(1)}`,

client/src/components/layout/Layout.tsx

@@ -32,7 +32,7 @@ const useStyles = makeStyles((theme: Theme) =>
     },
     normalConsole: {
       '& path': {
-        fill: '#82838e',
+        fill: theme.palette.milvusGrey.dark,
       },
     },
   })

client/src/components/menu/NavMenu.tsx

@@ -29,7 +29,7 @@ const useStyles = makeStyles((theme: Theme) =>
       marginLeft: theme.spacing(3),
 
       width: 'initial',
-      color: '#82838e',
+      color: theme.palette.milvusGrey.dark,
     },
     itemIcon: {
       minWidth: '20px',
@@ -39,7 +39,7 @@ const useStyles = makeStyles((theme: Theme) =>
         fill: 'transparent',
 
         '& path': {
-          stroke: '#82838e',
+          stroke: theme.palette.milvusGrey.dark,
         },
       },
     },

client/src/pages/collections/CreateFields.tsx

@@ -1,5 +1,5 @@
 import { makeStyles, Theme, TextField, IconButton } from '@material-ui/core';
-import { FC, Fragment, ReactElement } from 'react';
+import { FC, Fragment, ReactElement, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import CustomButton from '../../components/customButton/CustomButton';
 import CustomSelector from '../../components/customSelector/CustomSelector';
@@ -21,6 +21,12 @@ import {
 } from './Types';
 
 const useStyles = makeStyles((theme: Theme) => ({
+  optionalWrapper: {
+    width: '100%',
+    paddingRight: theme.spacing(1),
+    maxHeight: '240px',
+    overflowY: 'auto',
+  },
   rowWrapper: {
     display: 'flex',
     flexWrap: 'nowrap',
@@ -69,14 +75,13 @@ const useStyles = makeStyles((theme: Theme) => ({
     width: '20px',
     height: '20px',
   },
-  mb3: {
-    marginBottom: theme.spacing(3),
-  },
   mb2: {
     marginBottom: theme.spacing(2),
   },
   helperText: {
-    color: theme.palette.error.main,
+    lineHeight: '20px',
+    margin: theme.spacing(0.25, 0),
+    marginLeft: '12px',
   },
 }));
 
@@ -106,6 +111,35 @@ const CreateFields: FC<CreateFieldsProps> = ({
   const AddIcon = icons.add;
   const RemoveIcon = icons.remove;
 
+  const { requiredFields, optionalFields } = useMemo(
+    () =>
+      fields.reduce(
+        (acc, field) => {
+          const createType: CreateFieldType = getCreateFieldType(field);
+          const requiredTypes: CreateFieldType[] = [
+            'primaryKey',
+            'defaultVector',
+          ];
+          const key = requiredTypes.includes(createType)
+            ? 'requiredFields'
+            : 'optionalFields';
+
+          acc[key].push({
+            ...field,
+            createType,
+          });
+
+          return acc;
+        },
+        {
+          requiredFields: [] as Field[],
+          optionalFields: [] as Field[],
+        }
+      ),
+
+    [fields]
+  );
+
   const getSelector = (
     type: 'all' | 'vector',
     label: string,
@@ -152,6 +186,7 @@ const CreateFields: FC<CreateFieldsProps> = ({
           },
         }}
         disabled={isReadOnly}
+        error={validate(value) !== ' '}
         helperText={validate(value)}
         FormHelperTextProps={{
           className: classes.helperText,
@@ -294,7 +329,7 @@ const CreateFields: FC<CreateFieldsProps> = ({
     autoID: boolean
   ): ReactElement => {
     return (
-      <div className={`${classes.rowWrapper} ${classes.mb3}`}>
+      <div className={`${classes.rowWrapper}`}>
         {getInput({
           label: collectionTrans('fieldType'),
           value: PRIMARY_KEY_FIELD,
@@ -325,7 +360,7 @@ const CreateFields: FC<CreateFieldsProps> = ({
   const generateDefaultVectorRow = (field: Field): ReactElement => {
     return (
       <>
-        <div className={`${classes.rowWrapper} ${classes.mb2}`}>
+        <div className={`${classes.rowWrapper}`}>
           {getSelector(
             'vector',
             collectionTrans('fieldType'),
@@ -350,7 +385,7 @@ const CreateFields: FC<CreateFieldsProps> = ({
 
   const generateNumberRow = (field: Field): ReactElement => {
     return (
-      <div className={`${classes.rowWrapper} ${classes.mb2}`}>
+      <div className={`${classes.rowWrapper}`}>
         <IconButton
           onClick={() => handleRemoveField(field)}
           classes={{ root: classes.iconBtn }}
@@ -373,7 +408,7 @@ const CreateFields: FC<CreateFieldsProps> = ({
 
   const generateVectorRow = (field: Field) => {
     return (
-      <div className={`${classes.rowWrapper} ${classes.mb2}`}>
+      <div className={`${classes.rowWrapper}`}>
         <IconButton classes={{ root: classes.iconBtn }} aria-label="delete">
           <RemoveIcon />
         </IconButton>
@@ -391,30 +426,37 @@ const CreateFields: FC<CreateFieldsProps> = ({
     );
   };
 
-  const generateFieldRow = (field: Field, autoID: boolean) => {
-    const createType: CreateFieldType = getCreateFieldType(field);
-    switch (createType) {
-      case 'primaryKey': {
-        return generatePrimaryKeyRow(field, autoID);
-      }
-      case 'defaultVector': {
-        return generateDefaultVectorRow(field);
-      }
-      case 'vector': {
-        return generateVectorRow(field);
-      }
-      // use number as default createType
-      default: {
-        return generateNumberRow(field);
-      }
+  const generateRequiredFieldRow = (field: Field, autoID: boolean) => {
+    // required type is primaryKey or defaultVector
+    if (field.createType === 'primaryKey') {
+      return generatePrimaryKeyRow(field, autoID);
+    }
+    // use defaultVector as default return type
+    return generateDefaultVectorRow(field);
+  };
+
+  const generateOptionalFieldRow = (field: Field) => {
+    // optional type is vector or number
+    if (field.createType === 'vector') {
+      return generateVectorRow(field);
     }
+
+    // use number as default createType
+    return generateNumberRow(field);
   };
 
   return (
     <>
-      {fields.map((field, index) => (
-        <Fragment key={index}>{generateFieldRow(field, autoID)}</Fragment>
+      {requiredFields.map((field, index) => (
+        <Fragment key={index}>
+          {generateRequiredFieldRow(field, autoID)}
+        </Fragment>
       ))}
+      <div className={classes.optionalWrapper}>
+        {optionalFields.map((field, index) => (
+          <Fragment key={index}>{generateOptionalFieldRow(field)}</Fragment>
+        ))}
+      </div>
     </>
   );
 };

client/src/pages/collections/Types.ts

@@ -57,6 +57,7 @@ export interface Field {
   isDefault?: boolean;
   id?: string;
   type_params?: { key: string; value: any }[];
+  createType?: CreateFieldType;
 }
 
 export type CreateFieldType =

client/src/pages/connect/Connect.tsx

@@ -24,6 +24,7 @@ const useStyles = makeStyles((theme: Theme) => ({
   },
   titleWrapper: {
     display: 'flex',
+    alignItems: 'center',
     padding: theme.spacing(3),
     margin: '0 auto',
 

client/src/pages/partitions/partitions.tsx

@@ -1,6 +1,10 @@
 import { makeStyles, Theme } from '@material-ui/core';
 import { FC, useContext, useEffect, useState } from 'react';
-import { PartitionManageParam, PartitionParam, 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,8 +16,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';
+// import { StatusEnum } from '../../components/status/Types';
+// import { useDialogHook } from '../../hooks/Dialog';
 import DeleteTemplate from '../../components/customDialog/DeleteDialogTemplate';
 
 const useStyles = makeStyles((theme: Theme) => ({
@@ -35,10 +39,10 @@ const Partitions: FC<{
   const { t: btnTrans } = useTranslation('btn');
   const { t: dialogTrans } = useTranslation('dialog');
   const InfoIcon = icons.info;
-  const LoadIcon = icons.load;
-  const ReleaseIcon = icons.release;
+  // const LoadIcon = icons.load;
+  // const ReleaseIcon = icons.release;
 
-  const { handleAction } = useDialogHook({ type: 'partition' });
+  // const { handleAction } = useDialogHook({ type: 'partition' });
   const [selectedPartitions, setSelectedPartitions] = useState<PartitionView[]>(
     []
   );
@@ -88,27 +92,27 @@ const Partitions: FC<{
     handleCloseDialog();
   };
 
-  const handleRelease = async (data: PartitionView) => {
-    const param: PartitionParam = {
-      collectionName,
-      partitionNames: [data._name],
-    };
-    const res = await PartitionHttp.releasePartition(param);
-    openSnackBar(successTrans('release', { name: t('partition') }));
-    fetchPartitions(collectionName);
-    return res;
-  };
+  // const handleRelease = async (data: PartitionView) => {
+  //   const param: PartitionParam = {
+  //     collectionName,
+  //     partitionNames: [data._name],
+  //   };
+  //   const res = await PartitionHttp.releasePartition(param);
+  //   openSnackBar(successTrans('release', { name: t('partition') }));
+  //   fetchPartitions(collectionName);
+  //   return res;
+  // };
 
-  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 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[] = [
     {
@@ -172,12 +176,12 @@ const Partitions: FC<{
       disablePadding: false,
       label: t('name'),
     },
-    {
-      id: '_statusElement',
-      align: 'left',
-      disablePadding: false,
-      label: t('status'),
-    },
+    // {
+    //   id: '_statusElement',
+    //   align: 'left',
+    //   disablePadding: false,
+    //   label: t('status'),
+    // },
     {
       id: '_rowCount',
       align: 'left',
@@ -191,30 +195,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 />,
-        },
-      ],
-    },
+    // {
+    //   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/pages/structure/Structure.tsx

@@ -38,7 +38,7 @@ const useStyles = makeStyles((theme: Theme) => ({
       marginRight: theme.spacing(2),
 
       '& .key': {
-        color: '#82838e',
+        color: theme.palette.milvusGrey.dark,
         display: 'inline-block',
         marginRight: theme.spacing(0.5),
       },

client/src/styles/theme.ts

@@ -3,6 +3,17 @@ import {
   unstable_createMuiStrictModeTheme as createMuiTheme,
 } from '@material-ui/core/styles';
 
+declare module '@material-ui/core/styles/createPalette' {
+  interface Palette {
+    milvusBlue: Palette['primary'];
+    milvusGrey: Palette['primary'];
+  }
+  interface PaletteOptions {
+    milvusBlue: PaletteOptions['primary'];
+    milvusGrey: PaletteOptions['primary'];
+  }
+}
+
 const commonThemes = {
   typography: {
     fontFamily: [
@@ -21,8 +32,8 @@ const commonThemes = {
   palette: {
     primary: {
       main: '#06aff2',
-      light: '#65daf8',
-      dark: '#009bc4',
+      light: '#bfdeff',
+      dark: '#0689D2',
     },
     secondary: {
       light: '#82d3ba',
@@ -34,6 +45,16 @@ const commonThemes = {
       light: '#ff8f68',
       dark: '#cd3804',
     },
+    milvusBlue: {
+      main: '#f8f8fc',
+      dark: '#dcdce3',
+    },
+    milvusGrey: {
+      main: '#aeaebb',
+      light: '#dcdce3',
+      dark: '#82838e',
+      contrastText: '#f8f8fc',
+    },
   },
   breakpoints: {
     values: {
@@ -59,15 +80,17 @@ export const theme = createMuiTheme({
       h1: {
         fontSize: '36px',
         lineHeight: '42px',
+        fontWeight: 'bold',
         letterSpacing: '-0.02em',
       },
       h2: {
         lineHeight: '24px',
         fontSize: '28px',
+        fontWeight: 'bold',
       },
       h3: {
         lineHeight: '20px',
-        fontSize: '23px',
+        fontSize: '24px',
         fontWeight: 'bold',
       },
       h4: {
@@ -87,14 +110,17 @@ export const theme = createMuiTheme({
         lineHeight: '24px',
         letterSpacing: '-0.01em',
       },
+      // style for element p
       body1: {
         fontSize: '14px',
         lineHeight: '20px',
       },
+      // small caption
       body2: {
         fontSize: '12px',
         lineHeight: '16px',
       },
+      // tiny caption
       caption: {
         fontSize: '10px',
         lineHeight: '12px',