feat: show duplicate data warning on the data page (#902)

* feat: show duplicate data warning on the data page

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

* remove console

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

* update text

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

---------

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

client/src/i18n/cn/search.ts

@@ -30,6 +30,7 @@ const searchTrans = {
   textPlaceHolder: '请在此输入您的文本',
   partitionFilter: '分区过滤',
   loading: '加载中...',
+  duplicateDataWarning: '注意：当页数据可能包含重复数据。',
 };
 
 export default searchTrans;

client/src/i18n/en/search.ts

@@ -30,6 +30,7 @@ const searchTrans = {
   textPlaceHolder: 'Please input your text here',
   partitionFilter: 'Partition Filter',
   loading: 'Loading...',
+  duplicateDataWarning: 'Note: The current page may contain duplicate entities.',
 };
 
 export default searchTrans;

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

@@ -26,6 +26,7 @@ import {
   MenuItem,
   FormControl,
   InputLabel,
+  Typography,
 } from '@mui/material';
 import EmptyDataDialog from '@/pages/dialogs/EmptyDataDialog';
 import ImportSampleDialog from '@/pages/dialogs/ImportSampleDialog';
@@ -525,6 +526,7 @@ const CollectionData = (props: CollectionDataProps) => {
                   );
                 }}
                 sx={{
+                  width: '120px',
                   '& .MuiSelect-select': {
                     fontSize: '14px',
                     minHeight: '28px',
@@ -624,7 +626,42 @@ const CollectionData = (props: CollectionDataProps) => {
               commonTrans(
                 queryResult.data.length > 1 ? 'grid.entities' : 'grid.entity'
               ),
-              `(${queryResult.latency || ''} ms)`
+              <>
+                <Typography
+                  component="span"
+                  sx={{
+                    fontSize: '0.75rem',
+                    lineHeight: 1,
+                  }}
+                >
+                  ({queryResult.latency || ''} ms)
+                </Typography>
+                {currentPage * pageSize + pageSize < total &&
+                queryResult.data.length < pageSize ? (
+                  <Typography
+                    component="span"
+                    sx={{
+                      color: 'warning.main',
+                      fontWeight: 500,
+                      display: 'inline-flex',
+                      alignItems: 'center',
+                      gap: '4px',
+                      fontSize: '0.75rem',
+                      lineHeight: 1,
+                      marginLeft: '4px',
+                    }}
+                  >
+                    <icons.info
+                      sx={{
+                        fontSize: '12px',
+                        color: 'warning.main',
+                        marginTop: '1px',
+                      }}
+                    />
+                    {searchTrans('duplicateDataWarning')}
+                  </Typography>
+                ) : null}
+              </>
             )}
             noData={searchTrans(
               `${collection.loaded ? 'empty' : 'collectionNotLoaded'}`

client/src/pages/search/Utils.tsx

@@ -1,19 +1,39 @@
-import Typography from '@mui/material/Typography';
 import { useTranslation } from 'react-i18next';
+import { ReactNode } from 'react';
 
 export const getLabelDisplayedRows =
-  (itemName: string = 'rows', info: string = '') =>
+  (itemName: string = 'rows', info: string | ReactNode = '') =>
   ({ from = 0, to = 0, count = 0 }) => {
     const { t: commonTrans } = useTranslation();
 
     return (
-      <>
-        <Typography variant="body2" component="span">
-          {from} - {to} &nbsp;
-        </Typography>
-        <Typography variant="body2" className="rows" component="span">
-          {commonTrans('grid.of')} {count} {itemName} {info}
-        </Typography>
-      </>
+      <div
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+          gap: '4px',
+          fontSize: '0.75rem',
+          lineHeight: 1,
+          height: '20px',
+        }}
+      >
+        <span style={{ fontSize: 'inherit' }}>
+          {from} - {to}
+        </span>
+        <span style={{ fontSize: 'inherit' }}>
+          {commonTrans('grid.of')} {count} {itemName}
+        </span>
+        {info && (
+          <span
+            style={{
+              fontSize: 'inherit',
+              display: 'flex',
+              alignItems: 'center',
+            }}
+          >
+            {info}
+          </span>
+        )}
+      </div>
     );
   };