add java code view

client/src/components/code/CodeView.tsx

@@ -14,7 +14,8 @@ const getStyles = makeStyles((theme: Theme) => ({
     padding: theme.spacing(4),
     backgroundColor: theme.palette.attuDark.main,
     borderRadius: 8,
-
+    display: 'flex',
+    flexDirection: 'column',
     color: '#fff',
   },
   title: {
@@ -26,7 +27,6 @@ const getStyles = makeStyles((theme: Theme) => ({
     minHeight: 0,
 
     '& .MuiTab-wrapper': {
-      textTransform: 'uppercase',
       fontWeight: 'bold',
       color: '#fff',
     },
@@ -68,32 +68,20 @@ const getStyles = makeStyles((theme: Theme) => ({
   },
 
   block: {
-    /**
-     * container height minus:
-     * 1. CodeView padding top and bottom (32 * 2)
-     * 2. CodeBlock padding top and bottom (24 * 2)
-     * 3. title height and margin bottom (24 + 16)
-     * 4. tab title height and margin bottom (36 + 16)
-     */
-    height: (props: { height: number }) =>
-      props.height - 32 * 2 - 24 * 2 - (24 + 16) - (36 + 16),
+    height: `calc(100% - ${theme.spacing(4.5)})`,
     overflowY: 'auto',
   },
 }));
 
-const CodeView: FC<CodeViewProps> = ({
-  wrapperClass = '',
-  data,
-  height = 0,
-}) => {
-  const classes = getStyles({ height });
+const CodeView: FC<CodeViewProps> = ({ wrapperClass = '', data }) => {
+  const classes = getStyles();
   const { t: commonTrans } = useTranslation();
 
   const tabs: ITab[] = data.map(item => ({
     label: item.label,
     component: (
       <CodeBlock
-        wrapperClass={height !== 0 ? classes.block : ''}
+        wrapperClass={classes.block}
         language={item.language}
         code={item.code}
       />

client/src/components/code/Types.ts

@@ -7,6 +7,8 @@ export interface CodeViewProps {
 export enum CodeLanguageEnum {
   javascript = 'javascript',
   python = 'python',
+  java = 'java',
+  go = 'go',
 }
 
 export interface CodeBlockProps {

client/src/components/customDialog/DialogTemplate.tsx

@@ -66,18 +66,6 @@ const DialogTemplate: FC<DialogContainerProps> = ({
   const onCancel = handleCancel || handleClose;
 
   const dialogRef = useRef(null);
-  const [dialogHeight, setDialogHeight] = useState<number>(0);
-
-  /**
-   * code mode height should not over original dialog height
-   * everytime children change, should recalculate dialog height
-   */
-  useEffect(() => {
-    if (dialogRef.current) {
-      const height = (dialogRef.current as any).offsetHeight;
-      setDialogHeight(height);
-    }
-  }, [children]);
 
   const _handleConfirm = (event: React.FormEvent<HTMLFormElement>) => {
     handleConfirm();
@@ -127,11 +115,7 @@ const DialogTemplate: FC<DialogContainerProps> = ({
 
         <div className={`${classes.block} ${classes.codeWrapper}`}>
           {showCode && (
-            <CodeView
-              height={dialogHeight}
-              wrapperClass={classes.code}
-              data={codeBlocksData}
-            />
+            <CodeView wrapperClass={classes.code} data={codeBlocksData} />
           )}
         </div>
       </form>

client/src/components/customTabList/CustomTabList.tsx

@@ -25,6 +25,7 @@ const useStyles = makeStyles((theme: Theme) => ({
     flexBasis: 0,
     flexGrow: 1,
     marginTop: theme.spacing(2),
+    overflowY: 'auto',
   },
 }));
 

client/src/i18n/cn/common.ts

@@ -32,8 +32,9 @@ const commonTrans = {
   search: 'Search by name',
   code: 'Code View',
   view: 'View Code',
-  js: 'NODE.JS',
-  py: 'PYTHON',
+  js: 'Node.js',
+  py: 'Python',
+  java: 'Java',
   community: {
     hi: 'Hi, there!',
     growing: 'Our growing community is here!',

client/src/i18n/en/common.ts

@@ -32,8 +32,9 @@ const commonTrans = {
   search: 'Search by name',
   code: 'Code View',
   view: 'View Code',
-  js: 'NODE.JS',
-  py: 'PYTHON',
+  js: 'Node.js',
+  py: 'Python',
+  java: 'Java',
   community: {
     hi: 'Hi, there!',
     growing: 'Our growing community is here!',

client/src/pages/schema/Create.tsx

@@ -13,6 +13,7 @@ import {
 import { useFormValidation } from '../../hooks/Form';
 import { getCreateIndexJSCode } from '../../utils/code/Js';
 import { getCreateIndexPYCode } from '../../utils/code/Py';
+import { getCreateIndexJavaCode } from '../../utils/code/Java';
 import { formatForm, getMetricOptions } from '../../utils/Form';
 import { computMilvusRecommonds, formatSize } from '../../utils/SizingTool';
 import { DataTypeEnum, DataTypeStringEnum } from '../collections/Types';
@@ -215,28 +216,30 @@ const CreateIndex = (props: {
       DataTypeStringEnum.FloatVector,
     ];
     const isScalarField = !vectorTypes.includes(fieldType);
+    const getCodeParams = {
+      collectionName,
+      fieldName,
+      extraParams,
+      isScalarField,
+      indexName: indexSetting.index_name,
+      metricType: indexSetting.metric_type,
+      indexType: indexSetting.index_type,
+    };
     return [
       {
         label: commonTrans('py'),
         language: CodeLanguageEnum.python,
-        code: getCreateIndexPYCode({
-          collectionName,
-          fieldName,
-          indexName: indexSetting.index_name,
-          extraParams,
-          isScalarField,
-        }),
+        code: getCreateIndexPYCode(getCodeParams),
+      },
+      {
+        label: commonTrans('java'),
+        language: CodeLanguageEnum.java,
+        code: getCreateIndexJavaCode(getCodeParams),
       },
       {
         label: commonTrans('js'),
         language: CodeLanguageEnum.javascript,
-        code: getCreateIndexJSCode({
-          collectionName,
-          fieldName,
-          extraParams,
-          indexName: indexSetting.index_name,
-          isScalarField,
-        }),
+        code: getCreateIndexJSCode(getCodeParams),
       },
     ];
   }, [
@@ -256,7 +259,7 @@ const CreateIndex = (props: {
     // setDisabled(true);
     setIndexSetting(v => ({
       ...v,
-      index_name: '',
+      index_name: v.index_name,
       metric_type: defaultMetricType,
       M: '',
       m: '4',

client/src/styles/common.css

@@ -61,17 +61,3 @@ fieldset {
 .dialog-content::first-letter {
   text-transform: uppercase;
 }
-
-/* change scrollbar style */
-::-webkit-scrollbar {
-  width: 8px;
-}
-
-::-webkit-scrollbar-track {
-  background-color: #f9f9f9;
-}
-
-::-webkit-scrollbar-thumb {
-  border-radius: 8px;
-  background-color: #eee;
-}

client/src/utils/code/Java.ts

@@ -0,0 +1,34 @@
+import { CreateIndexCodeParam } from './Types';
+
+export const getCreateIndexJavaCode = (params: CreateIndexCodeParam) => {
+  const {
+    collectionName,
+    fieldName,
+    indexName,
+    metricType,
+    extraParams,
+    indexType,
+  } = params;
+
+  const JavaCode = `import io.milvus.param.*;
+
+  // Index type
+final IndexType INDEX_TYPE = IndexType.IVF_FLAT;
+// Index param
+final String INDEX_PARAM = ${JSON.stringify(extraParams, null, 2)};
+// Create index
+milvusClient.createIndex(
+  CreateIndexParam.newBuilder()
+    .withCollectionName("${collectionName}")
+    .withIndexName("${indexName}")
+    .withFieldName("${fieldName}")
+    .withIndexType("IndexType.${indexType}")
+    .withMetricType("${metricType}")
+    .withExtraParam(INDEX_PARAM)
+    .withSyncMode(Boolean.FALSE)
+    .build()
+);
+`;
+
+  return JavaCode;
+};

client/src/utils/code/Js.ts

@@ -1,8 +1,14 @@
 import { CreateIndexCodeParam } from './Types';
 
 export const getCreateIndexJSCode = (params: CreateIndexCodeParam) => {
-  const { collectionName, fieldName, indexName, isScalarField, extraParams } =
-    params;
+  const {
+    collectionName,
+    fieldName,
+    indexName,
+    isScalarField,
+    extraParams,
+    indexType,
+  } = params;
 
   const jsCode = `import { MilvusClient } from '@zilliz/milvus2-sdk-node';
 const client = new MilvusClient(milvus_address);
@@ -16,7 +22,8 @@ client.indexManager.createIndex({
       ? ''
       : `extra_params: ${JSON.stringify(extraParams, null, 2)},`
   }
-});`;
+});
+`;
 
   return jsCode;
 };

client/src/utils/code/Py.ts

@@ -16,9 +16,10 @@ export const getCreateIndexPYCode = (params: CreateIndexCodeParam) => {
     ...extraParams,
     params: parseValue(extraParams.params),
   };
-  const pyCode = `from pymilvus_orm import Collection
+  const pyCode = `from pymilvus import Collection
 
 collection = Collection('${collectionName}')
+
 ${
   isScalarField
     ? ''
@@ -29,7 +30,8 @@ collection.create_index(
   field_name="${fieldName}",
   ${isScalarField ? '' : `index_params=index_params,`}
   index_name="${indexName}"
-)`;
+)
+`;
 
   return pyCode;
 };

client/src/utils/code/Types.ts

@@ -5,4 +5,6 @@ export interface CreateIndexCodeParam {
   indexName: string;
   extraParams: IndexExtraParam;
   isScalarField: boolean;
+  metricType: string;
+  indexType: string;
 }