Merge pull request #202 from zilliztech/partitionKey

Support Partition key

client/src/components/customDialog/DialogTemplate.tsx

@@ -17,6 +17,9 @@ const useStyles = makeStyles((theme: Theme) => ({
     '& form': {
       display: 'flex',
     },
+    '& .MuiDialogContent-root': {
+      maxHeight: '60vh',
+    },
   },
   block: {
     borderRadius: 8,

client/src/http/Field.ts

@@ -7,6 +7,7 @@ export class FieldHttp extends BaseModel implements FieldData {
   fieldID!: string;
   type_params!: { key: string; value: string }[];
   is_primary_key!: true;
+  is_partition_key!: false;
   name!: string;
   description!: string;
   autoID!: boolean;
@@ -35,6 +36,10 @@ export class FieldHttp extends BaseModel implements FieldData {
     return this.is_primary_key;
   }
 
+  get _isPartitionKey() {
+    return this.is_partition_key;
+  }
+
   get _isAutoId() {
     return this.autoID;
   }
@@ -52,12 +57,12 @@ export class FieldHttp extends BaseModel implements FieldData {
   }
 
   get _dimension() {
-    return this.type_params.find(item => item.key === 'dim')?.value || '--';
+    return this.type_params.find(item => item.key === 'dim')?.value || '';
   }
 
   get _maxLength() {
     return (
-      this.type_params.find(item => item.key === 'max_length')?.value || '--'
+      this.type_params.find(item => item.key === 'max_length')?.value || ''
     );
   }
 }

client/src/i18n/en/collection.ts

@@ -41,14 +41,16 @@ const collectionTrans = {
   consistency: 'Consistency Level',
   consistencyLevel: 'Consistency Level',
   description: 'Description',
-  fieldType: 'Field Type',
+  fieldType: 'Type',
   vectorFieldType: 'Vector Field Type',
-  fieldName: 'Field Name',
-  idFieldName: 'ID Name',
-  vectorFieldName: 'Vector Name',
+  fieldName: 'Field',
+  idFieldName: 'Primary Key Field',
+  vectorFieldName: 'Vector Field',
   autoId: 'Auto ID',
-  vectorType: 'Vector Type',
-  idType: 'ID Type',
+  autoIdToggleTip:
+    'Whether the primary key is automatically generated by Milvus, only suppport INT64.',
+  vectorType: 'Type',
+  idType: 'Type',
   dimension: 'Dimension',
   dimensionTooltip: 'Only vector type has dimension',
   dimensionMutipleWarning: 'Dimension should be 8 multiple',
@@ -58,6 +60,9 @@ const collectionTrans = {
   nameContentWarning: 'Only numbers, letters, and underscores are allowed.',
   nameFirstLetterWarning:
     'Name first character must be underscore or character(a~z, A~Z)',
+  partitionKey: 'Partition Key',
+  partitionKeyTooltip:
+    ' Milvus will store entities in a partition according to the values in the partition key field. Only one Int64 or VarChar field is suppported.',
 
   // load dialog
   loadTitle: 'Load Collection',
@@ -84,7 +89,7 @@ const collectionTrans = {
   schemaTab: 'Schema',
   queryTab: 'Data Query',
   previewTab: 'Data Preview',
-  startTip: 'Start your data query.',
+  startTip: 'Start your data query',
   dataQuerylimits:
     ' Please note that the maximum number of results for your data query is 16384.',
   exprPlaceHolder: 'Please enter your data query, for example id > 0',

client/src/pages/collections/CreateFields.tsx

@@ -1,8 +1,16 @@
-import { makeStyles, Theme, TextField, IconButton } from '@material-ui/core';
+import {
+  makeStyles,
+  Theme,
+  TextField,
+  IconButton,
+  Switch,
+  FormControlLabel,
+} from '@material-ui/core';
 import { FC, Fragment, ReactElement, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import CustomSelector from '../../components/customSelector/CustomSelector';
 import icons from '../../components/icons/Icons';
+import CustomToolTip from '../../components/customToolTip/CustomToolTip';
 import { generateId } from '../../utils/Common';
 import { getCreateFieldType } from '../../utils/Format';
 import {
@@ -12,7 +20,6 @@ import {
 } from '../../utils/Validation';
 import {
   ALL_OPTIONS,
-  AUTO_ID_OPTIONS,
   PRIMARY_FIELDS_OPTIONS,
   VECTOR_FIELDS_OPTIONS,
 } from './Constants';
@@ -27,7 +34,6 @@ const useStyles = makeStyles((theme: Theme) => ({
   optionalWrapper: {
     width: '100%',
     paddingRight: theme.spacing(1),
-    maxHeight: '240px',
     overflowY: 'auto',
   },
   rowWrapper: {
@@ -41,7 +47,7 @@ const useStyles = makeStyles((theme: Theme) => ({
     fontSize: '14px',
   },
   fieldInput: {
-    width: '160px',
+    width: '170px',
   },
   select: {
     width: '140px',
@@ -72,6 +78,8 @@ const useStyles = makeStyles((theme: Theme) => ({
     padding: 0,
     width: '16px',
     height: '16px',
+    position: 'relative',
+    top: '-8px',
   },
   helperText: {
     lineHeight: '20px',
@@ -79,6 +87,15 @@ const useStyles = makeStyles((theme: Theme) => ({
     margin: theme.spacing(0),
     marginLeft: '11px',
   },
+  toggle: {
+    marginBottom: theme.spacing(2),
+    marginLeft: theme.spacing(0.5),
+    marginRight: theme.spacing(0.5),
+  },
+  icon: {
+    fontSize: '20px',
+    marginLeft: theme.spacing(0.5),
+  },
 }));
 
 type inputType = {
@@ -106,6 +123,7 @@ const CreateFields: FC<CreateFieldsProps> = ({
 
   const AddIcon = icons.addOutline;
   const RemoveIcon = icons.remove;
+  const InfoIcon = icons.info;
 
   const { requiredFields, optionalFields } = useMemo(
     () =>
@@ -326,6 +344,41 @@ const CreateFields: FC<CreateFieldsProps> = ({
     });
   };
 
+  const generateParitionKeyToggle = (field: Field, fields: Field[]) => {
+    return (
+      <FormControlLabel
+        control={
+          <Switch
+            checked={!!field.is_partition_key}
+            disabled={
+              fields.some(f => f.is_partition_key) && !field.is_partition_key
+            }
+            size="small"
+            onChange={() => {
+              changeFields(
+                field.id!,
+                'is_partition_key',
+                !field.is_partition_key
+              );
+            }}
+          />
+        }
+        label={
+          <CustomToolTip
+            title={collectionTrans('partitionKeyTooltip')}
+            placement="top"
+          >
+            <>
+              {collectionTrans('partitionKey')}
+              {/* <InfoIcon classes={{ root: classes.icon }} /> */}
+            </>
+          </CustomToolTip>
+        }
+        className={classes.toggle}
+      />
+    );
+  };
+
   const changeFields = (id: string, key: string, value: any) => {
     const newFields = fields.map(f => {
       if (f.id !== id) {
@@ -373,7 +426,6 @@ const CreateFields: FC<CreateFieldsProps> = ({
     autoID: boolean
   ): ReactElement => {
     const isVarChar = field.data_type === DataTypeEnum.VarChar;
-    const autoIdOff = isVarChar ? 'false' : autoID ? 'true' : 'false';
     return (
       <div className={`${classes.rowWrapper}`}>
         {generateFieldName(field, collectionTrans('idFieldName'))}
@@ -391,21 +443,29 @@ const CreateFields: FC<CreateFieldsProps> = ({
         )}
         {generateDesc(field)}
 
-        <CustomSelector
-          label={collectionTrans('autoId')}
-          options={AUTO_ID_OPTIONS}
-          value={autoIdOff}
-          onChange={(e: React.ChangeEvent<{ value: unknown }>) => {
-            const autoId = e.target.value === 'true';
-            setAutoID(autoId);
-          }}
-          variant="filled"
-          wrapperClass={classes.autoIdSelect}
-          disabled={isVarChar}
-          size="small"
-        />
-
         {isVarChar && generateMaxLength(field)}
+
+        <FormControlLabel
+          control={
+            <Switch
+              checked={autoID}
+              disabled={isVarChar}
+              size="small"
+              onChange={() => {
+                setAutoID(!autoID);
+              }}
+            />
+          }
+          label={
+            <CustomToolTip
+              title={collectionTrans('autoIdToggleTip')}
+              placement="top"
+            >
+              <>{collectionTrans('autoId')}</>
+            </CustomToolTip>
+          }
+          className={classes.toggle}
+        />
       </div>
     );
   };
@@ -441,8 +501,13 @@ const CreateFields: FC<CreateFieldsProps> = ({
     );
   };
 
-  const generateNumberRow = (field: Field, index: number): ReactElement => {
+  const generateNumberRow = (
+    field: Field,
+    index: number,
+    fields: Field[]
+  ): ReactElement => {
     const isVarChar = field.data_type === DataTypeEnum.VarChar;
+    const isInt64 = field.data_type === DataTypeEnum.Int64;
     return (
       <div className={`${classes.rowWrapper}`}>
         {generateFieldName(field)}
@@ -455,6 +520,7 @@ const CreateFields: FC<CreateFieldsProps> = ({
         {generateDesc(field)}
 
         {isVarChar && generateMaxLength(field)}
+        {(isVarChar || isInt64) && generateParitionKeyToggle(field, fields)}
         <IconButton
           onClick={() => {
             handleAddNewField(index);
@@ -511,14 +577,18 @@ const CreateFields: FC<CreateFieldsProps> = ({
     return generateDefaultVectorRow(field, index);
   };
 
-  const generateOptionalFieldRow = (field: Field, index: number) => {
+  const generateOptionalFieldRow = (
+    field: Field,
+    index: number,
+    fields: Field[]
+  ) => {
     // optional type is vector or number
     if (field.createType === 'vector') {
       return generateVectorRow(field);
     }
 
     // use number as default createType
-    return generateNumberRow(field, index);
+    return generateNumberRow(field, index, fields);
   };
 
   return (
@@ -531,7 +601,11 @@ const CreateFields: FC<CreateFieldsProps> = ({
       <div className={classes.optionalWrapper}>
         {optionalFields.map((field, index) => (
           <Fragment key={field.id}>
-            {generateOptionalFieldRow(field, index + requiredFields.length)}
+            {generateOptionalFieldRow(
+              field,
+              index + requiredFields.length,
+              optionalFields
+            )}
           </Fragment>
         ))}
       </div>

client/src/pages/collections/Types.ts

@@ -91,6 +91,7 @@ export interface Field {
   name: string | null;
   data_type: DataTypeEnum;
   is_primary_key: boolean;
+  is_partition_key?: boolean;
   description: string;
   dimension?: number | string;
   isDefault?: boolean;
@@ -102,6 +103,7 @@ export interface Field {
   createType?: CreateFieldType;
   max_length?: string | null;
   autoID?: boolean;
+  
 }
 
 export type CreateFieldType =

client/src/pages/dialogs/CreateCollectionDialog.tsx

@@ -184,10 +184,11 @@ const CreateCollectionDialog: FC<CollectionCreateProps> = ({ onCreate }) => {
     const param: CollectionCreateParam = {
       ...form,
       fields: fields.map(v => {
-        const data: any = {
+        const data: Field = {
           name: v.name,
           description: v.description,
           is_primary_key: v.is_primary_key,
+          is_partition_key: v.is_partition_key,
           data_type: v.data_type,
           dimension: vectorType.includes(v.data_type) ? v.dimension : undefined,
           max_length: v.max_length,
@@ -236,7 +237,6 @@ const CreateCollectionDialog: FC<CollectionCreateProps> = ({ onCreate }) => {
     >
       <>
         <fieldset className={classes.fieldset}>
-          <legend>{collectionTrans('general')}</legend>
           {generalInfoConfigs.map(config => (
             <CustomInput
               key={config.key}

client/src/pages/schema/Schema.tsx

@@ -1,15 +1,15 @@
-import { makeStyles, Theme, Typography } from '@material-ui/core';
+import { makeStyles, Theme, Typography, Chip } from '@material-ui/core';
 import { FC, useCallback, useEffect, useState } from 'react';
 import AttuGrid from '../../components/grid/Grid';
 import { ColDefinitionsType } from '../../components/grid/Types';
 import { useTranslation } from 'react-i18next';
 import { usePaginationHook } from '../../hooks/Pagination';
 import icons from '../../components/icons/Icons';
-import CustomToolTip from '../../components/customToolTip/CustomToolTip';
 import { FieldHttp } from '../../http/Field';
 import { FieldView } from './Types';
 import IndexTypeElement from './IndexTypeElement';
 import { IndexHttp } from '../../http/Index';
+import { DataTypeStringEnum } from '../collections/Types';
 
 const useStyles = makeStyles((theme: Theme) => ({
   wrapper: {
@@ -19,6 +19,16 @@ const useStyles = makeStyles((theme: Theme) => ({
     fontSize: '20px',
     marginLeft: theme.spacing(0.5),
   },
+  iconTitle: {
+    fontSize: '8px',
+    position: 'relative',
+    top: '3px',
+    color: 'grey',
+  },
+  chip: {
+    marginLeft: theme.spacing(0.5),
+    marginRight: theme.spacing(0.5),
+  },
   nameWrapper: {
     display: 'flex',
     alignItems: 'center',
@@ -56,7 +66,6 @@ const Schema: FC<{
   const classes = useStyles();
   const { t: collectionTrans } = useTranslation('collection');
   const { t: indexTrans } = useTranslation('index');
-  const InfoIcon = icons.info;
 
   const [fields, setFields] = useState<FieldView[]>([]);
   const [loading, setLoading] = useState<boolean>(true);
@@ -106,7 +115,51 @@ const Schema: FC<{
             _fieldNameElement: (
               <div className={classes.nameWrapper}>
                 {f._fieldName}
-                {f._isPrimaryKey && <KeyIcon classes={{ root: 'key' }} />}
+                {f._isPrimaryKey ? (
+                  <div
+                    className={classes.iconTitle}
+                    title={collectionTrans('idFieldName')}
+                  >
+                    <KeyIcon classes={{ root: 'key' }} />
+                  </div>
+                ) : null}
+                {f.is_partition_key ? (
+                  <Chip
+                    className={classes.chip}
+                    size="small"
+                    label="Partition key"
+                    variant="outlined"
+                  />
+                ) : null}
+                {f._isAutoId ? (
+                  <Chip
+                    className={classes.chip}
+                    size="small"
+                    label="auto id"
+                    variant="outlined"
+                  />
+                ) : null}
+              </div>
+            ),
+            _fieldTypeElement: (
+              <div className={classes.nameWrapper}>
+                {f._fieldType}
+                {f._dimension ? (
+                  <Chip
+                    className={classes.chip}
+                    size="small"
+                    label={`dim: ${f._dimension}`}
+                    variant="outlined"
+                  />
+                ) : null}
+                {f._maxLength && f._maxLength !== 'null' ? (
+                  <Chip
+                    className={classes.chip}
+                    size="small"
+                    label={`max: ${f._maxLength}`}
+                    variant="outlined"
+                  />
+                ) : null}
               </div>
             ),
             _indexParamElement: (
@@ -128,11 +181,15 @@ const Schema: FC<{
               </div>
             ),
             _indexTypeElement: (
-              <IndexTypeElement
-                data={f}
-                collectionName={collectionName}
-                cb={fetchFields}
-              />
+              <>
+                {f._fieldType !== DataTypeStringEnum.JSON ? (
+                  <IndexTypeElement
+                    data={f}
+                    collectionName={collectionName}
+                    cb={fetchFields}
+                  />
+                ) : null}
+              </>
             ),
           })
         );
@@ -160,30 +217,30 @@ const Schema: FC<{
       sortBy: '_fieldName',
     },
     {
-      id: '_fieldType',
+      id: '_fieldTypeElement',
       align: 'left',
       disablePadding: false,
       label: collectionTrans('fieldType'),
     },
-    {
-      id: '_dimension',
-      align: 'left',
-      disablePadding: false,
-      label: (
-        <span className="flex-center">
-          {collectionTrans('dimension')}
-          <CustomToolTip title={collectionTrans('dimensionTooltip')}>
-            <InfoIcon classes={{ root: classes.icon }} />
-          </CustomToolTip>
-        </span>
-      ),
-    },
-    {
-      id: '_maxLength',
-      align: 'left',
-      disablePadding: true,
-      label: collectionTrans('maxLength'),
-    },
+    // {
+    //   id: '_dimension',
+    //   align: 'left',
+    //   disablePadding: false,
+    //   label: (
+    //     <span className="flex-center">
+    //       {collectionTrans('dimension')}
+    //       <CustomToolTip title={collectionTrans('dimensionTooltip')}>
+    //         <InfoIcon classes={{ root: classes.icon }} />
+    //       </CustomToolTip>
+    //     </span>
+    //   ),
+    // },
+    // {
+    //   id: '_maxLength',
+    //   align: 'left',
+    //   disablePadding: true,
+    //   label: collectionTrans('maxLength'),
+    // },
     {
       id: '_indexName',
       align: 'left',

client/src/pages/schema/Types.ts

@@ -30,6 +30,7 @@ export interface Field {
 export interface FieldData {
   _fieldId: string;
   _isPrimaryKey: boolean;
+  is_partition_key: boolean;
   _isAutoId: boolean;
   _fieldName: string;
   _fieldNameElement?: ReactElement;