fix grid pagenation text (#419)

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

client/src/i18n/cn/common.ts

@@ -22,6 +22,16 @@ const commonTrans = {
     action: '操作',
     noData: '无数据',
     rows: '行',
+    entity: 'Entity',
+    entities: 'Entities',
+    collection: 'Collection',
+    collections: 'Collections',
+    field: '字段',
+    fields: '字段',
+    segment: '数据段',
+    segments: '数据段',
+    partition: '分区',
+    partitions: '分区',
     results: '结果',
     of: '的',
     nextLabel: '下一页',

client/src/i18n/en/common.ts

@@ -1,3 +1,5 @@
+import { partition } from "d3";
+
 const commonTrans = {
   attu: {
     admin: 'Attu',
@@ -22,6 +24,16 @@ const commonTrans = {
     action: 'action',
     noData: 'No Data',
     rows: 'Rows',
+    entity: 'Entity',
+    entities: 'Entities',
+    collection: 'Collection',
+    collections: 'Collections',
+    field: 'Field',
+    fields: 'Fields',
+    segment: 'Segment',
+    segments: 'Segments',
+    partition: 'Partition',
+    partitions: 'Partitions',
     results: 'results',
     of: 'of',
     nextLabel: 'next page',

client/src/pages/collections/Collections.tsx

@@ -22,6 +22,7 @@ import RenameCollectionDialog from '../dialogs/RenameCollectionDialog';
 import DuplicateCollectionDialog from '../dialogs/DuplicateCollectionDailog';
 import InsertDialog from '../dialogs/insert/Dialog';
 import ImportSampleDialog from '../dialogs/ImportSampleDialog';
+import { getLabelDisplayedRows } from '../search/Utils';
 import { LOADING_STATE } from '@/consts';
 import { formatNumber } from '@/utils';
 import Aliases from './Aliases';
@@ -85,6 +86,9 @@ const Collections = () => {
   const { t: collectionTrans } = useTranslation('collection');
   const { t: btnTrans } = useTranslation('btn');
   const { t: successTrans } = useTranslation('success');
+  const { t: commonTrans } = useTranslation();
+  const gridTrans = commonTrans('grid');
+
   const classes = useStyles();
 
   const InfoIcon = icons.info;
@@ -619,6 +623,7 @@ const Collections = () => {
           order={order}
           orderBy={orderBy}
           hideOnDisable={true}
+          labelDisplayedRows={getLabelDisplayedRows(gridTrans.collections)}
         />
       ) : (
         <>

client/src/pages/partitions/Partitions.tsx

@@ -15,6 +15,7 @@ import CreatePartitionDialog from '../dialogs/CreatePartitionDialog';
 import DropPartitionDialog from '../dialogs/DropPartitionDialog';
 import { PartitionData } from '@server/types';
 import { formatNumber } from '@/utils';
+import { getLabelDisplayedRows } from '../search/Utils';
 
 const useStyles = makeStyles((theme: Theme) => ({
   wrapper: {
@@ -36,6 +37,8 @@ const Partitions = () => {
   const { t } = useTranslation('partition');
   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) || ''
@@ -306,6 +309,9 @@ const Partitions = () => {
         order={order}
         orderBy={orderBy}
         handleSort={handleGridSort}
+        labelDisplayedRows={getLabelDisplayedRows(
+          gridTrans[partitionList.length > 1 ? 'partitions' : 'partition']
+        )}
       />
     </section>
   );

client/src/pages/query/Query.tsx

@@ -45,6 +45,8 @@ const Query = () => {
   const { t: searchTrans } = useTranslation('search');
   const { t: collectionTrans } = useTranslation('collection');
   const { t: btnTrans } = useTranslation('btn');
+  const { t: commonTrans } = useTranslation();
+  const gridTrans = commonTrans('grid');
   // classes
   const classes = getQueryStyles();
 
@@ -404,6 +406,7 @@ const Query = () => {
             setRowsPerPage={setPageSize}
             rowsPerPage={pageSize}
             labelDisplayedRows={getLabelDisplayedRows(
+              gridTrans[queryResult.data.length > 1 ? 'entities' : 'entity'],
               `(${queryResult.latency || ''} ms)`
             )}
             noData={searchTrans(

client/src/pages/schema/Schema.tsx

@@ -10,6 +10,7 @@ import { formatFieldType } from '@/utils';
 import { CollectionService } from '@/http';
 import IndexTypeElement from './IndexTypeElement';
 import { FieldObject } from '@server/types';
+import { getLabelDisplayedRows } from '../search/Utils';
 
 const useStyles = makeStyles((theme: Theme) => ({
   wrapper: {
@@ -65,6 +66,8 @@ const Schema = () => {
   const classes = useStyles();
   const { t: collectionTrans } = useTranslation('collection');
   const { t: indexTrans } = useTranslation('index');
+  const { t: commonTrans } = useTranslation();
+  const gridTrans = commonTrans('grid');
 
   const [fields, setFields] = useState<FieldObject[]>([]);
   const [loading, setLoading] = useState<boolean>(true);
@@ -242,6 +245,9 @@ const Schema = () => {
         order={order}
         orderBy={orderBy}
         handleSort={handleGridSort}
+        labelDisplayedRows={getLabelDisplayedRows(
+          gridTrans[schemaList.length > 1 ? 'fields' : 'field']
+        )}
       />
     </section>
   );

client/src/pages/search/Utils.tsx

@@ -2,17 +2,18 @@ import { Typography } from '@material-ui/core';
 import { useTranslation } from 'react-i18next';
 
 export const getLabelDisplayedRows =
-  (info: string) =>
+  (itemName: string = 'rows', info: string = '') =>
   ({ from = 0, to = 0, count = 0 }) => {
     const { t: commonTrans } = useTranslation();
     const gridTrans = commonTrans('grid');
+
     return (
       <>
         <Typography variant="body2" component="span">
           {from} - {to}
         </Typography>
         <Typography variant="body2" className="rows" component="span">
-          {gridTrans.of} {count} {gridTrans.results} {info}
+          {gridTrans.of} {count} {itemName} {info}
         </Typography>
       </>
     );

client/src/pages/segments/Segments.tsx

@@ -12,6 +12,7 @@ import CompactDialog from '@/pages/dialogs/CompactDialog';
 import FlushDialog from '@/pages/dialogs/FlushDialog';
 import { getQueryStyles } from '../query/Styles';
 import { Segment } from './Types';
+import { getLabelDisplayedRows } from '../search/Utils';
 
 const Segments = () => {
   const { collectionName = '' } = useParams<{ collectionName: string }>();
@@ -21,6 +22,8 @@ const Segments = () => {
   const [segments, setSegments] = useState<Segment[]>([]);
   const { t: collectionTrans } = useTranslation('collection');
   const { t: btnTrans } = useTranslation('btn');
+  const { t: commonTrans } = useTranslation();
+  const gridTrans = commonTrans('grid');
 
   const [loading, setLoading] = useState<boolean>(true);
 
@@ -189,6 +192,9 @@ const Segments = () => {
         order={order}
         orderBy={orderBy}
         handleSort={handleGridSort}
+        labelDisplayedRows={getLabelDisplayedRows(
+          gridTrans[data.length > 1 ? 'segments' : 'segment']
+        )}
       />
     </div>
   );