Merge branch 'main' of github.com:zilliztech/attu

client/src/components/advancedSearch/CopyButton.tsx

@@ -13,7 +13,6 @@ const CopyButton: FC<CopyButtonProps> = props => {
   const { label, icon, className, value = '', ...others } = props;
   const classes = useStyles();
   const { t: commonTrans } = useTranslation();
-  const copyTrans = commonTrans('copy');
   const [tooltipTitle, setTooltipTitle] = useState('Copy');
 
   const unsecuredCopyToClipboard = (v: string) => {
@@ -40,10 +39,10 @@ const CopyButton: FC<CopyButtonProps> = props => {
       v = JSON.stringify(v);
     }
 
-    setTooltipTitle(copyTrans.copied);
+    setTooltipTitle(commonTrans('copy.copied'));
     navigator.clipboard?.writeText(v) ?? unsecuredCopyToClipboard(v);
     setTimeout(() => {
-      setTooltipTitle(copyTrans.copy);
+      setTooltipTitle(commonTrans('copy.copy'));
     }, 1000);
   };
 

client/src/components/code/CodeBlock.tsx

@@ -36,13 +36,12 @@ const CodeBlock: FC<CodeBlockProps> = ({
   const classes = getStyles();
 
   const { t: commonTrans } = useTranslation();
-  const copyTrans = commonTrans('copy');
 
   return (
     <div className={`${classes.wrapper} ${wrapperClass}`}>
       <CopyButton
         className={classes.copy}
-        label={copyTrans.label}
+        label={commonTrans('copy.label')}
         value={code}
       />
       <SyntaxHighlighter

client/src/components/grid/Grid.tsx

@@ -92,7 +92,6 @@ const AttuGrid: FC<AttuGridType> = props => {
 
   // i18n
   const { t: commonTrans } = useTranslation();
-  const gridTrans = commonTrans('grid');
 
   const {
     rowCount = 20,
@@ -117,7 +116,7 @@ const AttuGrid: FC<AttuGridType> = props => {
     title,
     openCheckBox = true,
     disableSelect = false,
-    noData = gridTrans.noData,
+    noData = commonTrans('grid.gridTrans.noData'),
     showHoverStyle = true,
     headEditable = false,
     editHeads = [],
@@ -167,7 +166,8 @@ const AttuGrid: FC<AttuGridType> = props => {
           {from} - {to}
         </Typography>
         <Typography variant="body2" className="rows" component="span">
-          {gridTrans.of} {count} {gridTrans.rows}
+          {commonTrans('grid.gridTrans.of')} {count}{' '}
+          {commonTrans('grid.gridTrans.rows')}
         </Typography>
       </>
     );

client/src/components/grid/Table.tsx

@@ -122,7 +122,6 @@ const EnhancedTable: FC<TableType> = props => {
   } = props;
   const classes = useStyles({ tableCellMaxWidth });
   const { t: commonTrans } = useTranslation();
-  const copyTrans = commonTrans('copy');
 
   return (
     <TableContainer className={classes.root}>
@@ -252,7 +251,7 @@ const EnhancedTable: FC<TableType> = props => {
 
                                   {needCopy && (
                                     <CopyButton
-                                      label={copyTrans.label}
+                                      label={commonTrans('copy.label')}
                                       value={row[colDef.id]}
                                       size="small"
                                       className={classes.copyBtn}

client/src/components/grid/TablePaginationActions.tsx

@@ -35,7 +35,6 @@ const TablePaginationActions = (props: TablePaginationActionsProps) => {
 
   // i18n
   const { t: commonTrans } = useTranslation();
-  const gridTrans = commonTrans('grid');
 
   const handleBackButtonClick = (
     event: React.MouseEvent<HTMLButtonElement>
@@ -54,7 +53,7 @@ const TablePaginationActions = (props: TablePaginationActionsProps) => {
       <StyledButton
         onClick={handleBackButtonClick}
         disabled={page === 0}
-        aria-label={gridTrans.prevLabel}
+        aria-label={commonTrans('grid.prevLabel')}
       >
         <PrevIcon />
       </StyledButton>
@@ -62,7 +61,7 @@ const TablePaginationActions = (props: TablePaginationActionsProps) => {
       <StyledButton
         onClick={handleNextButtonClick}
         disabled={page >= Math.ceil(count / rowsPerPage) - 1}
-        aria-label={gridTrans.nextLabel}
+        aria-label={commonTrans('grid.nextLabel')}
       >
         <NextIcon />
       </StyledButton>

client/src/components/layout/Header.tsx

@@ -112,7 +112,6 @@ const Header: FC = () => {
 
   // i8n
   const { t: commonTrans } = useTranslation();
-  const statusTrans = commonTrans('status');
   const { t: dbTrans } = useTranslation('database');
   const { t: successTrans } = useTranslation('success');
   const { t: userTrans } = useTranslation('user');
@@ -217,7 +216,9 @@ const Header: FC = () => {
           </ModeButton>
           <div className="text">
             <Typography className="address">{address}</Typography>
-            <Typography className="status">{statusTrans.running}</Typography>
+            <Typography className="status">
+              {commonTrans('status.running')}
+            </Typography>
           </div>
           {username && (
             <>

client/src/components/status/Status.tsx

@@ -34,51 +34,38 @@ const LoadingIconWrapper = styled('div')({
   marginRight: '10px',
 });
 
-const bgColorChange = keyframes`
-  0% {
-    background-color: inherit;
-  }
-  50% {
-    background-color: transparent;
-  }
-  100% {
-    background-color: inherit;
-  }
-`;
-
 const Status: FC<StatusType> = props => {
   const { status, percentage = 0 } = props;
   const { t: commonTrans } = useTranslation();
   const theme = useTheme();
-  const statusTrans = commonTrans('status');
 
   const { label, color } = useMemo(() => {
     switch (status) {
       case LOADING_STATE.UNLOADED:
         return {
-          label: statusTrans.unloaded,
+          label: commonTrans('status.unloaded'),
           color: theme.palette.primary.main,
         };
 
       case LOADING_STATE.LOADED:
         return {
-          label: statusTrans.loaded,
+          label: commonTrans('status.loaded'),
           color: '#06f3af',
         };
 
       case LOADING_STATE.LOADING:
         return {
-          label: `${percentage}% ${statusTrans.loading}`,
+          label: `${percentage}% ${commonTrans('status.loading')}`,
           color: '#f25c06',
         };
 
       default:
         return {
-          label: statusTrans.error,
+          label: commonTrans('status.error'),
           color: '#f25c06',
         };
     }
-  }, [status, statusTrans, percentage, theme.palette.primary.main]);
+  }, [status, percentage, theme.palette.primary.main]);
 
   return (
     <Root>

client/src/i18n/cn/button.ts

@@ -11,7 +11,7 @@ const btnTrans = {
   connecting: '连接中...',
   import: '导入',
   delete: '删除',
-  drop: 'drop',
+  drop: '删除',
   release: '释放',
   load: '加载',
   insert: '插入数据',

client/src/i18n/cn/collection.ts

@@ -2,7 +2,7 @@ const collectionTrans = {
   noLoadData: '没有加载的Collection',
   noData: '没有Collection',
 
-  rowCount: '大约的Entity数量',
+  rowCount: 'Entity数量(大约)',
   count: 'Entity数量',
 
   create: '创建Collection',
@@ -31,7 +31,7 @@ const collectionTrans = {
   consistencyLevelInfo:
     '一致性是指确保每个节点或副本在给定时间写入或读取数据时具有相同数据视图的属性。',
   entityCountInfo:
-    '这个计数是一个近似值，并可能因为Milvus的独特机制而稍有延迟。实际的计数可能会有所变化，并会定期更新。请注意，这个数字应该被用作参考，而不是精确的计数。',
+    '如果这个 collection 没有加载，这个计数是一个近似值，并可能因为Milvus的独特机制而稍有延迟。实际的计数可能会有所变化，并会定期更新。请注意，这个数字应该被用作参考，而不是精确的计数。',
   replicaTooltip: 'Collection的副本数量, 不能超过查询节点的数量。',
   modifyReplicaTooltip: '调整副本数量',
 
@@ -64,7 +64,8 @@ const collectionTrans = {
   partitionKey: '分区键',
   partitionKeyTooltip:
     'Milvus将根据分区键字段中的值在分区中存储entities。只支持一个Int64或VarChar字段。',
-  paritionKeyDisabledTooltip: '只允许一个分区字段，同时分区键字段不能用作主键字段。',
+  paritionKeyDisabledTooltip:
+    '只允许一个分区字段，同时分区键字段不能用作主键字段。',
   enableDynamicSchema: '启用动态Schema',
   analyzer: '分词器',
   enableMatch: '启用匹配',
@@ -137,24 +138,20 @@ const collectionTrans = {
     "压缩是通过组织数据段来优化存储和查询性能的过程。 <a href='https://milvus.io/blog/2022-2-21-compact.md' target='blank'>了解更多</a><br /><br /> 请注意，这个操作可能需要一些时间来完成，特别是对于大型数据集。我们建议在系统活动较低的时期或在计划的维护期间运行压缩以最小化干扰。",
 
   // column tooltip
-  autoIDTooltip: '主键列的值由Milvus自动生成。',
   dynamicSchemaTooltip:
     '动态Schema使用户能够在不修改现有Schema的情况下向Milvus collection插入带有新字段的entities。',
-  consistencyLevelTooltip:
-    '在分布式数据库中，一致性特指确保每个节点或副本在给定时间写入或读取数据时具有相同数据视图的属性。',
   consistencyBoundedTooltip: '它允许在一定时间内数据不一致。',
   consistencyStrongTooltip: '它确保用户可以读取数据的最新版本。',
   consistencySessionTooltip:
     '它确保在同一会话中所有数据写入可以立即在读取中感知。',
   consistencyEventuallyTooltip:
     '没有保证读写的顺序，副本最终会在没有进一步写操作的情况下收敛到相同的状态。',
-  releaseCollectionFirst: '请先释放collection。',
   noVectorIndexTooltip: '请保证所有向量列都有索引。',
 
-  clickToLoad: '点击加载collection。',
-  clickToRelease: '点击释放collection。',
-  clickToSearch: '点击执行向量搜索。',
-  clickToCreateVectorIndex: '点击创建向量索引。',
+  clickToLoad: '点击加载collection',
+  clickToRelease: '点击释放collection',
+  clickToSearch: '点击执行向量搜索',
+  clickToCreateVectorIndex: '点击创建向量索引',
   collectionIsLoading: 'colleciton正在加载...',
 };
 

client/src/i18n/cn/common.ts

@@ -18,6 +18,7 @@ const commonTrans = {
     prometheusNamespace: 'Prometheus命名空间',
     connectionTip: '支持自托管Milvus或Zilliz云专用集群。',
     checkHealth: '检查健康状态',
+    version: '版本',
   },
   status: {
     loaded: '已加载',

client/src/i18n/cn/home.ts

@@ -1,7 +1,6 @@
 const homeTrans = {
   load: '已加载的Collection',
-  all: '所有Collection',
-  data: '大约的Entity数量',
+  all: 'Collection 数量',
   rows: '{{number}}行',
   loading: '正在加载Collection',
   sysInfo: '系统信息',

client/src/i18n/cn/nav.ts

@@ -6,7 +6,6 @@ const navTrans = {
   search: '向量搜索',
   system: '系统视图',
   user: '用户和角色',
-  dbAdmin: '数据库管理',
   database: '数据库',
 };
 

client/src/i18n/cn/partition.ts

@@ -8,8 +8,8 @@ const partitionTrans = {
   name: '名称',
   createdTime: '创建时间',
   status: '状态',
-  rowCount: '大约Entity数量',
-  tooltip: '大约Entity数量。',
+  rowCount: 'Entity数量(大约)',
+  tooltip: '如果这个 collection 没有加载，这个计数是一个近似值，并可能因为Milvus的独特机制而稍有延迟。实际的计数可能会有所变化，并会定期更新。请注意，这个数字应该被用作参考，而不是精确的计数。',
 
   createTitle: '创建分区',
   nameWarning: '_default分区是保留的，不能用作名称',

client/src/i18n/cn/prometheus.ts

@@ -1,10 +0,0 @@
-const prometheusTrans = {
-  ready: 'Prometheus已准备好。',
-  invalid: 'Prometheus配置无效。',
-
-  totalCount: '总数',
-  searchCount: '搜索次数',
-  searchLatency: '搜索延迟',
-};
-
-export default prometheusTrans;

client/src/i18n/cn/search.ts

@@ -1,6 +1,4 @@
 const searchTrans = {
-  firstTip: '2. 输入搜索向量 {{dimensionTip}}',
-  secondTip: '1. 选择Collection和字段',
   thirdTip: '搜索参数 {{metricType}}',
   collection: '已加载的Collection',
   noCollection: '没有已加载的Collection',

client/src/i18n/cn/warning.ts

@@ -10,7 +10,8 @@ const warningTrans = {
     '{{name}} 应为 {{specValue}}，或在范围 {{min}} ~ {{max}} 内。',
   noSupportIndexType: 'Attu 还不支持 {{type}}。请更换其他字段。',
   valueLength: '{{name}} 长度应在 {{min}} ~ {{max}} 之间。',
-  username: ' 用户名不能为空，长度不能超过32个字符。必须以字母开头，只能包含下划线、字母或数字。',
+  username:
+    ' 用户名不能为空，长度不能超过32个字符。必须以字母开头，只能包含下划线、字母或数字。',
   cloudPassword: `包括以下三种：大写字母、小写字母、数字和特殊字符。`,
 };
 

client/src/i18n/en/collection.ts

@@ -144,14 +144,11 @@ const collectionTrans = {
     `,
 
   // column tooltip
-  autoIDTooltip: `The values of the primary key column are automatically generated by Milvus.`,
   dynamicSchemaTooltip: `Dynamic schema enables users to insert entities with new fields into a Milvus collection without modifying the existing schema.`,
-  consistencyLevelTooltip: `Consistency in a distributed database specifically refers to the property that ensures every node or replica has the same view of data when writing or reading data at a given time.`,
   consistencyBoundedTooltip: `It allows data inconsistency during a certain period of time`,
   consistencyStrongTooltip: `It ensures that users can read the latest version of data.`,
   consistencySessionTooltip: `It ensures that all data writes can be immediately perceived in reads during the same session.`,
   consistencyEventuallyTooltip: `There is no guaranteed order of reads and writes, and replicas eventually converge to the same state given that no further write operations are done.`,
-  releaseCollectionFirst: `Please release your collection first.`,
   noVectorIndexTooltip: `Please make sure all vector fields have index.`,
 
   clickToLoad: 'Click to load the collection.',

client/src/i18n/en/common.ts

@@ -1,3 +1,5 @@
+import { version } from "process";
+
 const commonTrans = {
   attu: {
     admin: 'Attu',
@@ -19,6 +21,7 @@ const commonTrans = {
     connectionTip:
       'Self-hosted Milvus or Zilliz Cloud Dedicated cluster are supported.',
     checkHealth: 'Check Health',
+    version: 'Version',
   },
   status: {
     loaded: 'loaded',
@@ -91,4 +94,4 @@ const commonTrans = {
   noPermissionTip: `You don't have permission to access this content.`,
 };
 
-export default commonTrans;
+export default commonTrans;

client/src/i18n/en/home.ts

@@ -1,7 +1,6 @@
 const homeTrans = {
   load: 'Loaded Collections',
   all: 'Collections',
-  data: 'Approx Entities',
   rows: '{{number}}',
   loading: 'Loading Collections',
   sysInfo: 'System Info',

client/src/i18n/en/nav.ts

@@ -6,7 +6,6 @@ const navTrans = {
   search: 'Vector Search',
   system: 'System View',
   user: 'User and Role',
-  dbAdmin: 'DB Management',
   database: 'Database',
 };
 

client/src/i18n/en/partition.ts

@@ -9,7 +9,8 @@ const partitionTrans = {
   createdTime: 'Created Time',
   status: 'Status',
   rowCount: 'Approx Entity Count',
-  tooltip: 'Approximately entity count.',
+  tooltip:
+    "If this collection is not loaded, this count is an approximate value and may have a slight delay due to Milvus' unique mechanism. The actual count may vary and will be updated periodically. Please note that this number should be used as a reference, not an exact count.",
 
   createTitle: 'Create Partition',
   nameWarning: '_default is reserved, cannot be used as name',

client/src/i18n/en/prometheus.ts

@@ -1,10 +0,0 @@
-const prometheusTrans = {
-  ready: 'Prometheus is ready.',
-  invalid: 'Prometheus configuration is invalid.',
-
-  totalCount: 'Total Count',
-  searchCount: 'Search Count',
-  searchLatency: 'Search Latency',
-};
-
-export default prometheusTrans;

client/src/i18n/en/search.ts

@@ -1,6 +1,4 @@
 const searchTrans = {
-  firstTip: '2. Enter search vector {{dimensionTip}}',
-  secondTip: '1. Choose collection and field',
   thirdTip: 'Search Parameters {{metricType}}',
   collection: 'loaded collection',
   noCollection: 'No loaded collection',

client/src/i18n/index.ts

@@ -32,8 +32,6 @@ import userTransEn from './en/user';
 import userTransCn from './cn/user';
 import databaseTransEn from './en/database';
 import databaseTransCn from './cn/database';
-import prometheusTransEn from './en/prometheus';
-import prometheusTransCn from './cn/prometheus';
 import propertiesEn from './en/properties';
 import propertiesCn from './cn/properties';
 import actionEn from './en/action';
@@ -56,7 +54,6 @@ export const resources = {
     systemView: systemViewTransCn,
     user: userTransCn,
     database: databaseTransCn,
-    prometheus: prometheusTransCn,
     properties: propertiesCn,
     action: actionCn,
   },
@@ -76,7 +73,6 @@ export const resources = {
     systemView: systemViewTransEn,
     user: userTransEn,
     database: databaseTransEn,
-    prometheus: prometheusTransEn,
     properties: propertiesEn,
     action: actionEn,
   },
@@ -90,7 +86,7 @@ i18n
   .init({
     fallbackLng: 'en',
     resources,
-    keySeparator: false,
+    keySeparator: '.',
     returnObjects: true,
     interpolation: {
       escapeValue: false,

client/src/pages/connect/AuthForm.tsx

@@ -44,7 +44,6 @@ export const AuthForm = () => {
 
   // i18n
   const { t: commonTrans } = useTranslation();
-  const attuTrans = commonTrans('attu');
   const { t: btnTrans } = useTranslation('btn');
   const { t: warningTrans } = useTranslation('warning');
   const { t: successTrans } = useTranslation('success');
@@ -244,8 +243,8 @@ export const AuthForm = () => {
       <section className={classes.wrapper}>
         <div className={classes.titleWrapper}>
           <Typography variant="h4" component="h4">
-            {attuTrans.connectTitle}
-            <CustomToolTip title={attuTrans.connectionTip}>
+            {commonTrans('attu.connectTitle')}
+            <CustomToolTip title={commonTrans('attu.connectionTip')}>
               <Icons.info />
             </CustomToolTip>
           </Typography>
@@ -255,13 +254,13 @@ export const AuthForm = () => {
         <CustomInput
           type="text"
           textConfig={{
-            label: attuTrans.address,
+            label: commonTrans('attu.address'),
             key: 'address',
             onChange: (val: string) =>
               handleInputChange('address', String(val)),
             variant: 'filled',
             className: classes.input,
-            placeholder: attuTrans.address,
+            placeholder: commonTrans('attu.address'),
             fullWidth: true,
             InputProps: {
               endAdornment: (
@@ -277,7 +276,7 @@ export const AuthForm = () => {
               {
                 rule: 'require',
                 errorText: warningTrans('required', {
-                  name: attuTrans.address,
+                  name: commonTrans('attu.address'),
                 }),
               },
             ],
@@ -285,14 +284,14 @@ export const AuthForm = () => {
           }}
           checkValid={checkIsValid}
           validInfo={validation}
-          key={attuTrans.address}
+          key={commonTrans('attu.address')}
         />
 
         {/* db  */}
         <CustomInput
           type="text"
           textConfig={{
-            label: `Milvus ${dbTrans('database')} ${attuTrans.optional}`,
+            label: `Milvus ${dbTrans('database')} ${commonTrans('attu.optional')}`,
             key: 'database',
             onChange: (value: string) => handleInputChange('database', value),
             variant: 'filled',
@@ -303,14 +302,14 @@ export const AuthForm = () => {
           }}
           checkValid={checkIsValid}
           validInfo={validation}
-          key={attuTrans.database}
+          key={commonTrans('attu.database')}
         />
 
         {/* toggle auth */}
         <div className={classes.toggle}>
           <CustomRadio
             checked={withPass}
-            label={attuTrans.authentication}
+            label={commonTrans('attu.authentication')}
             handleChange={handleEnableAuth}
           />
         </div>
@@ -321,55 +320,55 @@ export const AuthForm = () => {
             <CustomInput
               type="text"
               textConfig={{
-                label: `${attuTrans.token} ${attuTrans.optional} `,
+                label: `${commonTrans('attu.token')} ${commonTrans('attu.optional')} `,
                 key: 'token',
                 onChange: (val: string) => handleInputChange('token', val),
                 variant: 'filled',
                 className: classes.input,
-                placeholder: attuTrans.token,
+                placeholder: commonTrans('attu.token'),
                 fullWidth: true,
                 value: authReq.token,
               }}
               checkValid={checkIsValid}
               validInfo={validation}
-              key={attuTrans.token}
+              key={commonTrans('attu.token')}
             />
             {/* user  */}
             <CustomInput
               type="text"
               textConfig={{
-                label: `${attuTrans.username} ${attuTrans.optional}`,
+                label: `${commonTrans('attu.username')} ${commonTrans('attu.optional')}`,
                 key: 'username',
                 onChange: (value: string) =>
                   handleInputChange('username', value),
                 variant: 'filled',
                 className: classes.input,
-                placeholder: attuTrans.username,
+                placeholder: commonTrans('attu.username'),
                 fullWidth: true,
                 value: authReq.username,
               }}
               checkValid={checkIsValid}
               validInfo={validation}
-              key={attuTrans.username}
+              key={commonTrans('attu.username')}
             />
             {/* pass  */}
             <CustomInput
               type="text"
               textConfig={{
-                label: `${attuTrans.password} ${attuTrans.optional}`,
+                label: `${commonTrans('attu.password')} ${commonTrans('attu.optional')}`,
                 key: 'password',
                 onChange: (value: string) =>
                   handleInputChange('password', value),
                 variant: 'filled',
                 className: classes.input,
-                placeholder: attuTrans.password,
+                placeholder: commonTrans('attu.password'),
                 fullWidth: true,
                 type: 'password',
                 value: authReq.password,
               }}
               checkValid={checkIsValid}
               validInfo={validation}
-              key={attuTrans.password}
+              key={commonTrans('attu.password')}
             />
           </>
         )}
@@ -380,10 +379,10 @@ export const AuthForm = () => {
             control={
               <Checkbox
                 checked={authReq.ssl}
-                onChange={(e) => handleInputChange('ssl', e.target.checked)}
+                onChange={e => handleInputChange('ssl', e.target.checked)}
               />
             }
-            label={attuTrans.ssl}
+            label={commonTrans('attu.ssl')}
           />
         </div>
 
@@ -400,7 +399,9 @@ export const AuthForm = () => {
                 handleInputChange('checkHealth', e.target.checked);
               }}
             />
-            <Typography component="span">{attuTrans.checkHealth}</Typography>
+            <Typography component="span">
+              {commonTrans('attu.checkHealth')}
+            </Typography>
           </label>
         </div>
       </section>

client/src/pages/connect/ConnectContainer.tsx

@@ -78,7 +78,6 @@ const ConnectContainer = () => {
   const [version, setVersion] = useState('loading');
   const classes = getContainerStyles();
   const { t: commonTrans } = useTranslation();
-  const attuTrans = commonTrans('attu');
   const { t: btnTrans } = useTranslation('btn');
 
   useEffect(() => {
@@ -93,11 +92,11 @@ const ConnectContainer = () => {
         <section className={`flex-center ${classes.attu}`}>
           <Icons.attu classes={{ root: classes.logo }} />
           <Typography variant="body2" className={classes.brand}>
-            {attuTrans.admin}
+            {commonTrans('attu.admin')}
           </Typography>
           {version && (
             <Typography component="sub" className={classes.sub}>
-              {attuTrans.version} {version}
+              {commonTrans('attu.version')}: {version}
             </Typography>
           )}
 
@@ -124,7 +123,7 @@ const ConnectContainer = () => {
                 )
               }
             >
-              {attuTrans.fileIssue}
+              {commonTrans('attu.fileIssue')}
             </CustomButton>
 
             <CustomButton
@@ -133,7 +132,7 @@ const ConnectContainer = () => {
               onClick={() => window.open('https://milvus.io/discord', '_blank')}
               fullWidth={true}
             >
-              {attuTrans.discord}
+              {commonTrans('attu.discord')}
             </CustomButton>
           </div>
         </section>

client/src/pages/databases/collections/Collections.tsx

@@ -88,7 +88,6 @@ const Collections = () => {
   const { t: collectionTrans } = useTranslation('collection');
   const { t: btnTrans } = useTranslation('btn');
   const { t: commonTrans } = useTranslation();
-  const gridTrans = commonTrans('grid');
 
   const classes = useStyles();
 
@@ -517,7 +516,9 @@ const Collections = () => {
           order={order}
           orderBy={orderBy}
           hideOnDisable={true}
-          labelDisplayedRows={getLabelDisplayedRows(gridTrans.collections)}
+          labelDisplayedRows={getLabelDisplayedRows(
+            commonTrans('grid.collections')
+          )}
         />
       ) : (
         <>

client/src/pages/databases/collections/StatusAction.tsx

@@ -74,25 +74,24 @@ const StatusAction: FC<StatusActionType> = props => {
 
   // Determine status-related labels and icons
   const { label, tooltip, icon, deleteIcon } = useMemo(() => {
-    const statusTrans = commonTrans('status');
     switch (status) {
       case LOADING_STATE.UNLOADED:
         return {
-          label: statusTrans.unloaded,
+          label: commonTrans('status.unloaded'),
           tooltip: collectionTrans('clickToLoad'),
           icon: <div className={`${classes.circle} ${classes.unloaded}`}></div>,
           deleteIcon: <Icons.load />,
         };
       case LOADING_STATE.LOADED:
         return {
-          label: statusTrans.loaded,
+          label: commonTrans('status.loaded'),
           tooltip: collectionTrans('clickToRelease'),
           icon: <div className={`${classes.circle} ${classes.loaded}`}></div>,
           deleteIcon: <Icons.release />,
         };
       case LOADING_STATE.LOADING:
         return {
-          label: `${percentage}% ${statusTrans.loading}`,
+          label: `${percentage}% ${commonTrans('status.loading')}`,
           tooltip: collectionTrans('collectionIsLoading'),
           icon: (
             <StatusIcon
@@ -110,7 +109,7 @@ const StatusAction: FC<StatusActionType> = props => {
           deleteIcon: <Icons.release />,
         };
     }
-  }, [status, percentage, classes, commonTrans, collectionTrans]);
+  }, [status, percentage, classes, collectionTrans]);
 
   // Handle missing vector index
   const noIndex = collection.schema && !collection.schema.hasVectorIndex;

client/src/pages/databases/collections/data/CollectionData.tsx

@@ -66,7 +66,6 @@ const CollectionData = (props: CollectionDataProps) => {
   const { t: collectionTrans } = useTranslation('collection');
   const { t: btnTrans } = useTranslation('btn');
   const { t: commonTrans } = useTranslation();
-  const gridTrans = commonTrans('grid');
   // classes
   const classes = getQueryStyles();
 
@@ -490,11 +489,11 @@ const CollectionData = (props: CollectionDataProps) => {
                 })}
                 values={queryState.outputFields}
                 renderValue={selected => (
-                  <span>{`${(selected as string[]).length} ${
-                    gridTrans[
-                      (selected as string[]).length > 1 ? 'fields' : 'field'
-                    ]
-                  }`}</span>
+                  <span>{`${(selected as string[]).length} ${commonTrans(
+                    (selected as string[]).length > 1
+                      ? 'grid.fields'
+                      : 'grid.field'
+                  )}`}</span>
                 )}
                 label={searchTrans('outputFields')}
                 wrapperClass="selector"
@@ -604,7 +603,9 @@ const CollectionData = (props: CollectionDataProps) => {
             setRowsPerPage={setPageSize}
             rowsPerPage={pageSize}
             labelDisplayedRows={getLabelDisplayedRows(
-              gridTrans[queryResult.data.length > 1 ? 'entities' : 'entity'],
+              commonTrans(
+                queryResult.data.length > 1 ? 'grid.entities' : 'grid.entity'
+              ),
               `(${queryResult.latency || ''} ms)`
             )}
             noData={searchTrans(

client/src/pages/databases/collections/partitions/Partitions.tsx

@@ -39,7 +39,6 @@ const Partitions = () => {
   const { t: successTrans } = useTranslation('success');
   const { t: btnTrans } = useTranslation('btn');
   const { t: commonTrans } = useTranslation();
-  const gridTrans = commonTrans('grid');
   const [searchParams] = useSearchParams();
   const [search, setSearch] = useState<string>(
     (searchParams.get('search') as string) || ''
@@ -308,7 +307,9 @@ const Partitions = () => {
         orderBy={orderBy}
         handleSort={handleGridSort}
         labelDisplayedRows={getLabelDisplayedRows(
-          gridTrans[partitionList.length > 1 ? 'partitions' : 'partition']
+          commonTrans(
+            partitionList.length > 1 ? 'grid.partitions' : 'grid.partition'
+          )
         )}
       />
     </section>

client/src/pages/databases/collections/properties/Properties.tsx

@@ -54,7 +54,6 @@ const Properties = (props: PropertiesProps) => {
   const { t: successTrans } = useTranslation('success');
   const { t: btnTrans } = useTranslation('btn');
   const { t: commonTrans } = useTranslation();
-  const gridTrans = commonTrans('grid');
 
   const [properties, setProperties] = useState<Property[]>([]);
   const [selected, setSelected] = useState<Property[]>([]);
@@ -230,7 +229,7 @@ const Properties = (props: PropertiesProps) => {
         orderBy={orderBy}
         handleSort={handleGridSort}
         labelDisplayedRows={getLabelDisplayedRows(
-          gridTrans[data.length > 1 ? 'properties' : 'property']
+          commonTrans(data.length > 1 ? 'grid.properties' : 'grid.property')
         )}
       />
     </section>

client/src/pages/databases/collections/schema/CreateIndexDialog.tsx

@@ -27,12 +27,11 @@ const CreateIndex = (props: {
   handleCreate: (params: IndexExtraParam, index_name: string) => void;
   handleCancel: () => void;
 }) => {
-  const { collectionName, handleCreate, handleCancel, field } = props;
+  const { handleCreate, handleCancel, field } = props;
 
   const { t: indexTrans } = useTranslation('index');
   const { t: dialogTrans } = useTranslation('dialog');
   const { t: btnTrans } = useTranslation('btn');
-  const { t: commonTrans } = useTranslation();
 
   // https://milvus.io/docs/index.md#In-memory-Index
   const defaultIndexType = INDEX_TYPES_ENUM.AUTOINDEX;

client/src/pages/databases/collections/schema/Schema.tsx

@@ -34,7 +34,6 @@ const Overview = () => {
   const { t: indexTrans } = useTranslation('index');
   const { t: btnTrans } = useTranslation('btn');
   const { t: commonTrans } = useTranslation();
-  const gridTrans = commonTrans('grid');
 
   const consistencyTooltipsMap: Record<string, string> = {
     Strong: collectionTrans('consistencyStrongTooltip'),
@@ -508,7 +507,7 @@ const Overview = () => {
           openCheckBox={false}
           showPagination={false}
           labelDisplayedRows={getLabelDisplayedRows(
-            gridTrans[fields.length > 1 ? 'fields' : 'field']
+            commonTrans(`grid.${fields.length > 1 ? 'fields' : 'field'}`)
           )}
         />
       </section>

client/src/pages/databases/collections/search/SearchGlobalParams.tsx

@@ -51,7 +51,6 @@ const SearchGlobalParams = (props: SearchGlobalProps) => {
   const { t: warningTrans } = useTranslation('warning');
   const { t: commonTrans } = useTranslation();
   const { t: searchTrans } = useTranslation('search');
-  const gridTrans = commonTrans('grid');
 
   // UI functions
   const handleInputChange = useCallback(
@@ -112,9 +111,9 @@ const SearchGlobalParams = (props: SearchGlobalProps) => {
         })}
         values={searchGlobalParams.output_fields}
         renderValue={selected => (
-          <span>{`${(selected as string[]).length} ${
-            gridTrans[(selected as string[]).length > 1 ? 'fields' : 'field']
-          }`}</span>
+          <span>{`${(selected as string[]).length} ${commonTrans(
+            (selected as string[]).length > 1 ? 'grid.fields' : 'grid.field'
+          )}`}</span>
         )}
         label={searchTrans('outputFields')}
         wrapperClass="selector"

client/src/pages/databases/collections/segments/Segments.tsx

@@ -23,7 +23,6 @@ const Segments = () => {
   const { t: collectionTrans } = useTranslation('collection');
   const { t: btnTrans } = useTranslation('btn');
   const { t: commonTrans } = useTranslation();
-  const gridTrans = commonTrans('grid');
 
   const [loading, setLoading] = useState<boolean>(true);
 
@@ -236,7 +235,7 @@ const Segments = () => {
         orderBy={orderBy}
         handleSort={handleGridSort}
         labelDisplayedRows={getLabelDisplayedRows(
-          gridTrans[data.length > 1 ? 'segments' : 'segment']
+          commonTrans(data.length > 1 ? 'grid.segments' : 'grid.segment')
         )}
       />
     </div>

client/src/pages/databases/tree/index.tsx

@@ -34,7 +34,6 @@ const getExpanded = (nodes: DatabaseTreeItem[]) => {
 const CollectionNode: React.FC<{ data: CollectionObject }> = ({ data }) => {
   // i18n collectionTrans
   const { t: commonTrans } = useTranslation();
-  const statusTrans = commonTrans('status');
 
   // styles
   const classes = useStyles();
@@ -51,9 +50,9 @@ const CollectionNode: React.FC<{ data: CollectionObject }> = ({ data }) => {
   const hasIndex = data.schema && data.schema.hasVectorIndex;
   const loadStatus = hasIndex
     ? data.loaded
-      ? statusTrans.loaded
-      : statusTrans.unloaded
-    : statusTrans.noVectorIndex;
+      ? commonTrans('status.loaded')
+      : commonTrans('status.unloaded')
+    : commonTrans('status.noVectorIndex');
 
   return (
     <div className={classes.collectionNode}>

client/src/pages/search/Utils.tsx

@@ -5,7 +5,6 @@ export const getLabelDisplayedRows =
   (itemName: string = 'rows', info: string = '') =>
   ({ from = 0, to = 0, count = 0 }) => {
     const { t: commonTrans } = useTranslation();
-    const gridTrans = commonTrans('grid');
 
     return (
       <>
@@ -13,7 +12,7 @@ export const getLabelDisplayedRows =
           {from} - {to} &nbsp;
         </Typography>
         <Typography variant="body2" className="rows" component="span">
-          {gridTrans.of} {count} {itemName} {info}
+          {commonTrans('grid.of')} {count} {itemName} {info}
         </Typography>
       </>
     );

client/src/pages/system/DataCard.tsx

@@ -128,99 +128,102 @@ const DataProgress: FC<DataProgressProps> = ({ percent = 0, desc = '' }) => {
   );
 };
 
-const DataCard: FC<DataCardProps & React.HTMLAttributes<HTMLDivElement>> =
-  props => {
-    const classes = getStyles();
-    const { t } = useTranslation('systemView');
-    const { t: commonTrans } = useTranslation();
-    const capacityTrans: { [key in string]: string } = commonTrans('capacity');
-    const { node, extend } = props;
-
-    const hardwareTitle = [t('hardwareTitle'), t('valueTitle')];
-    const hardwareContent = [];
-
-    const configTitle = [t('configTitle'), t('valueTitle')];
-    const systemConfig: { label: string; value: any }[] = [];
-
-    const systemTitle = [t('systemTitle'), t('valueTitle')];
-
-    const systemContent = [];
-
-    const {
-      created_time: createTime,
-      updated_time: updateTime,
-      system_info = {},
-      hardware_infos: infos = {},
-      system_configurations,
-    } = node?.infos || {};
-
-    const {
-      cpu_core_count: cpu = 0,
-      cpu_core_usage: cpuUsage = 0,
-      // memory = 1,
-      memory_usage: memoryUsage = 0,
-      disk = 1,
-      disk_usage: diskUsage = 0,
-    } = infos;
-    const memUsage = formatByteSize(memoryUsage, capacityTrans);
-    if (extend) {
-      hardwareContent.push({ label: t('thCPUCount'), value: cpu });
-      hardwareContent.push({
-        label: t('thCPUUsage'),
-        value: <DataProgress percent={cpuUsage / 100} />,
-      });
-      hardwareContent.push({
-        label: t('thMemUsage'),
-        value: `${memUsage.value} ${memUsage.unit}`,
-      });
-      // hardwareContent.push({
-      //   label: t('thDiskUsage'),
-      //   value: (
-      //     <DataProgress
-      //       percent={diskUsage / disk}
-      //       desc={getByteString(diskUsage, disk, capacityTrans)}
-      //     />
-      //   ),
-      // });
-    }
-
-    if (system_configurations) {
-      Object.keys(system_configurations).forEach(key => {
-        systemConfig.push({ label: key, value: system_configurations[key] });
-      });
-    }
-
-    const { deploy_mode: mode = '', build_version: version = '' } = system_info;
-    systemContent.push({ label: t('thVersion'), value: version });
-    systemContent.push({ label: t('thDeployMode'), value: mode });
-    systemContent.push({
-      label: t('thCreateTime'),
-      value: createTime ? formatSystemTime(createTime) : '',
+const DataCard: FC<
+  DataCardProps & React.HTMLAttributes<HTMLDivElement>
+> = props => {
+  const classes = getStyles();
+  const { t } = useTranslation('systemView');
+  const { t: commonTrans } = useTranslation();
+  const capacityTrans: { [key in string]: string } = commonTrans(
+    'capacity'
+  ) as any;
+  const { node, extend } = props;
+
+  const hardwareTitle = [t('hardwareTitle'), t('valueTitle')];
+  const hardwareContent = [];
+
+  const configTitle = [t('configTitle'), t('valueTitle')];
+  const systemConfig: { label: string; value: any }[] = [];
+
+  const systemTitle = [t('systemTitle'), t('valueTitle')];
+
+  const systemContent = [];
+
+  const {
+    created_time: createTime,
+    updated_time: updateTime,
+    system_info = {},
+    hardware_infos: infos = {},
+    system_configurations,
+  } = node?.infos || {};
+
+  const {
+    cpu_core_count: cpu = 0,
+    cpu_core_usage: cpuUsage = 0,
+    // memory = 1,
+    memory_usage: memoryUsage = 0,
+    disk = 1,
+    disk_usage: diskUsage = 0,
+  } = infos;
+  const memUsage = formatByteSize(memoryUsage, capacityTrans);
+  if (extend) {
+    hardwareContent.push({ label: t('thCPUCount'), value: cpu });
+    hardwareContent.push({
+      label: t('thCPUUsage'),
+      value: <DataProgress percent={cpuUsage / 100} />,
+    });
+    hardwareContent.push({
+      label: t('thMemUsage'),
+      value: `${memUsage.value} ${memUsage.unit}`,
     });
-    systemContent.push({
-      label: t('thUpdateTime'),
-      value: updateTime ? formatSystemTime(updateTime) : '',
+    // hardwareContent.push({
+    //   label: t('thDiskUsage'),
+    //   value: (
+    //     <DataProgress
+    //       percent={diskUsage / disk}
+    //       desc={getByteString(diskUsage, disk, capacityTrans)}
+    //     />
+    //   ),
+    // });
+  }
+
+  if (system_configurations) {
+    Object.keys(system_configurations).forEach(key => {
+      systemConfig.push({ label: key, value: system_configurations[key] });
     });
+  }
+
+  const { deploy_mode: mode = '', build_version: version = '' } = system_info;
+  systemContent.push({ label: t('thVersion'), value: version });
+  systemContent.push({ label: t('thDeployMode'), value: mode });
+  systemContent.push({
+    label: t('thCreateTime'),
+    value: createTime ? formatSystemTime(createTime) : '',
+  });
+  systemContent.push({
+    label: t('thUpdateTime'),
+    value: updateTime ? formatSystemTime(updateTime) : '',
+  });
 
-    return (
-      <div className={classes.root}>
-        <div className={classes.title}>
-          <div>
-            <span className={classes.rootName}>Milvus / </span>
-            <span className={classes.childName}>{node?.infos?.name}</span>
-          </div>
-          <div className={classes.ip}>{`${t('thIP')}:${infos?.ip || ''}`}</div>
+  return (
+    <div className={classes.root}>
+      <div className={classes.title}>
+        <div>
+          <span className={classes.rootName}>Milvus / </span>
+          <span className={classes.childName}>{node?.infos?.name}</span>
         </div>
-        <DataSection titles={systemTitle} contents={systemContent} />
-        {extend && (
-          <DataSection titles={hardwareTitle} contents={hardwareContent} />
-        )}
-
-        {systemConfig.length ? (
-          <DataSection titles={configTitle} contents={systemConfig} />
-        ) : null}
+        <div className={classes.ip}>{`${t('thIP')}:${infos?.ip || ''}`}</div>
       </div>
-    );
-  };
+      <DataSection titles={systemTitle} contents={systemContent} />
+      {extend && (
+        <DataSection titles={hardwareTitle} contents={hardwareContent} />
+      )}
+
+      {systemConfig.length ? (
+        <DataSection titles={configTitle} contents={systemConfig} />
+      ) : null}
+    </div>
+  );
+};
 
 export default DataCard;

client/src/pages/system/NodeListView.tsx

@@ -67,9 +67,9 @@ const NodeListView: FC<NodeListViewProps> = props => {
   useNavigationHook(ALL_ROUTER_TYPES.SYSTEM);
   const { t } = useTranslation('systemView');
   const { t: commonTrans } = useTranslation();
-  const capacityTrans: { [key in string]: string } = commonTrans('capacity');
-
-  const gridTrans = commonTrans('grid');
+  const capacityTrans: { [key in string]: string } = commonTrans(
+    'capacity'
+  ) as any;
 
   const classes = getStyles();
   const [selectedChildNode, setSelectedChildNode] = useState<GridNode[]>([]);
@@ -222,7 +222,7 @@ const NodeListView: FC<NodeListViewProps> = props => {
             selected={selectedChildNode}
             setSelected={handleSelectChange}
             labelDisplayedRows={getLabelDisplayedRows(
-              gridTrans[data.length > 1 ? 'nodes' : 'node']
+              commonTrans(data.length > 1 ? 'grid.nodes' : 'grid.node')
             )}
           />
         </div>

client/src/pages/system/ProgressCard.tsx

@@ -1,4 +1,3 @@
-
 import { FC } from 'react';
 import { useTranslation } from 'react-i18next';
 import BaseCard from './BaseCard';
@@ -9,20 +8,25 @@ import type { ProgressCardProps } from './Types';
 const color1 = '#06F3AF';
 const color2 = '#635DCE';
 
-const ProgressCard: FC<ProgressCardProps> = (props) => {
+const ProgressCard: FC<ProgressCardProps> = props => {
   const { title, total, usage } = props;
   const { t } = useTranslation('systemView');
   const { t: commonTrans } = useTranslation();
-  const capacityTrans: { [key in string]: string } = commonTrans('capacity');
+  const capacityTrans: { [key in string]: string } = commonTrans(
+    'capacity'
+  ) as any;
 
   const color = title === t('diskTitle') ? color1 : color2;
-  const percent = (usage && total) ? (usage / total) : 0;
+  const percent = usage && total ? usage / total : 0;
 
   return (
-    <BaseCard title={title} content={`${getByteString(usage, total, capacityTrans)} (${Math.floor(percent * 100)}%)`}>
+    <BaseCard
+      title={title}
+      content={`${getByteString(usage, total, capacityTrans)} (${Math.floor(percent * 100)}%)`}
+    >
       <Progress percent={percent} color={color} />
     </BaseCard>
   );
 };
 
-export default ProgressCard;
+export default ProgressCard;

client/src/pages/user/dialogs/CreateUserDialog.tsx

@@ -44,7 +44,6 @@ const CreateUser: FC<CreateUserProps> = ({
   const { t: userTrans } = useTranslation('user');
   const { t: btnTrans } = useTranslation('btn');
   const { t: warningTrans } = useTranslation('warning');
-  const attuTrans = commonTrans('attu');
 
   // UI states
   const [form, setForm] = useState<CreateUserParams>({
@@ -72,7 +71,7 @@ const CreateUser: FC<CreateUserProps> = ({
     {
       rule: 'valueLength',
       errorText: warningTrans('valueLength', {
-        name: attuTrans.password,
+        name: commonTrans('attu.password'),
         min: 6,
         max: 256,
       }),
@@ -87,13 +86,13 @@ const CreateUser: FC<CreateUserProps> = ({
     {
       rule: 'require',
       errorText: warningTrans('required', {
-        name: attuTrans.password,
+        name: commonTrans('attu.password'),
       }),
     },
     {
       rule: 'valueLength',
       errorText: warningTrans('valueLength', {
-        name: attuTrans.password,
+        name: commonTrans('attu.password'),
         min: 8,
         max: 64,
       }),
@@ -110,18 +109,18 @@ const CreateUser: FC<CreateUserProps> = ({
 
   const createConfigs: ITextfieldConfig[] = [
     {
-      label: attuTrans.username,
+      label: commonTrans('attu.username'),
       key: 'username',
       onChange: (value: string) => handleInputChange('username', value),
       variant: 'filled',
       className: classes.input,
-      placeholder: attuTrans.username,
+      placeholder: commonTrans('attu.username'),
       fullWidth: true,
       validations: [
         {
           rule: 'require',
           errorText: warningTrans('required', {
-            name: attuTrans.username,
+            name: commonTrans('attu.username'),
           }),
         },
         {
@@ -132,12 +131,12 @@ const CreateUser: FC<CreateUserProps> = ({
       defaultValue: form.username,
     },
     {
-      label: attuTrans.password,
+      label: commonTrans('attu.password'),
       key: 'password',
       onChange: (value: string) => handleInputChange('password', value),
       variant: 'filled',
       className: classes.input,
-      placeholder: attuTrans.password,
+      placeholder: commonTrans('attu.password'),
       fullWidth: true,
       type: 'password',
       validations: !isDedicated ? opensourceUserPassRule : cloudUserPassRule,