new schema view

Signed-off-by: shanghaikid <jiangruiyi@gmail.com>

client/src/http/Field.ts

@@ -57,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/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: {
@@ -25,6 +25,10 @@ const useStyles = makeStyles((theme: Theme) => ({
     top: '3px',
     color: 'grey',
   },
+  chip: {
+    marginLeft: theme.spacing(0.5),
+    marginRight: theme.spacing(0.5),
+  },
   nameWrapper: {
     display: 'flex',
     alignItems: 'center',
@@ -62,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);
@@ -104,7 +107,6 @@ const Schema: FC<{
   const fetchFields = useCallback(
     async (collectionName: string) => {
       const KeyIcon = icons.key;
-      const PartitionIcon = icons.filter;
 
       try {
         const list = await fetchSchemaListWithIndex(collectionName);
@@ -113,22 +115,51 @@ const Schema: FC<{
             _fieldNameElement: (
               <div className={classes.nameWrapper}>
                 {f._fieldName}
-                {f._isPrimaryKey && (
+                {f._isPrimaryKey ? (
                   <div
                     className={classes.iconTitle}
                     title={collectionTrans('idFieldName')}
                   >
                     <KeyIcon classes={{ root: 'key' }} />
                   </div>
-                )}
-                {f.is_partition_key && (
-                  <div
-                    className={classes.iconTitle}
-                    title={collectionTrans('partitionKey')}
-                  >
-                    <PartitionIcon 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: (
@@ -150,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}
+              </>
             ),
           })
         );
@@ -182,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',