add vector search short cut link if loaded on status action component

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

client/src/i18n/cn/collection.ts

@@ -132,6 +132,7 @@ const collectionTrans = {
 
   clickToLoad: '点击加载collection。',
   clickToRelease: '点击释放collection。',
+  clickToSearch: '点击执行向量搜索。',
   collectionIsLoading: 'colleciton正在加载...',
 };
 

client/src/i18n/en/collection.ts

@@ -130,6 +130,7 @@ const collectionTrans = {
 
   clickToLoad: 'Click to load the collection.',
   clickToRelease: 'Click to release the collection.',
+  clickToSearch: 'Click to execute vector search.',
   collectionIsLoading: 'The collection is loading...',
 };
 

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

@@ -11,8 +11,10 @@ import {
 } from '@material-ui/core';
 import { LOADING_STATE } from '@/consts';
 import StatusIcon, { LoadingType } from '@/components/status/StatusIcon';
-import icons from '@/components/icons/Icons';
+import Icons from '@/components/icons/Icons';
 import CustomToolTip from '@/components/customToolTip/CustomToolTip';
+import CustomButton from '@/components/customButton/CustomButton';
+import { useNavigate } from 'react-router-dom';
 
 const useStyles = makeStyles((theme: Theme) =>
   createStyles({
@@ -54,6 +56,9 @@ const useStyles = makeStyles((theme: Theme) =>
     flash: {
       animation: '$bgColorChange 1.5s infinite',
     },
+    extraBtn: {
+      height: 24,
+    },
 
     '@keyframes bgColorChange': {
       '0%': {
@@ -71,13 +76,16 @@ const useStyles = makeStyles((theme: Theme) =>
 
 const StatusAction: FC<StatusActionType> = props => {
   const theme = useTheme();
+  const navigate = useNavigate();
+
   const classes = useStyles({ color: theme.palette.primary.main });
-  const ReleaseIcon = icons.release;
-  const LoadIcon = icons.load;
+  const ReleaseIcon = Icons.release;
+  const LoadIcon = Icons.load;
 
   const { status, percentage = 0, schema, action = () => {} } = props;
   const { t: commonTrans } = useTranslation();
   const { t: collectionTrans } = useTranslation('collection');
+  const { t: btnTrans } = useTranslation('btn');
 
   const statusTrans = commonTrans('status');
   const {
@@ -151,6 +159,21 @@ const StatusAction: FC<StatusActionType> = props => {
           icon={noIndex ? noIndexIcon : icon}
         />
       </CustomToolTip>
+      {status === LOADING_STATE.LOADED && (
+        <CustomButton
+          startIcon={<Icons.navSearch />}
+          className={classes.extraBtn}
+          tooltip={collectionTrans('clickToSearch')}
+          onClick={() => {
+            navigate({
+              pathname: '/search',
+              search: `?collectionName=${schema.name}`,
+            });
+          }}
+        >
+          {btnTrans('vectorSearch')}
+        </CustomButton>
+      )}
     </div>
   );
 };

client/src/pages/databases/collections/overview/Overview.tsx

@@ -39,6 +39,13 @@ const useStyles = makeStyles((theme: Theme) => ({
     marginBottom: theme.spacing(2),
     paddingTop: theme.spacing(0.5),
   },
+  horizonalBlock: {
+    display: 'flex',
+    flexWrap: 'wrap',
+    '& >div': {
+      marginRight: theme.spacing(2),
+    },
+  },
   block: {
     '& *': {
       fontSize: '14px',
@@ -50,6 +57,9 @@ const useStyles = makeStyles((theme: Theme) => ({
     fontSize: '20px',
     marginLeft: theme.spacing(0.5),
   },
+  extraBtn: {
+    height: 24,
+  },
   questionIcon: {
     position: 'relative',
     top: '2px',
@@ -256,28 +266,40 @@ const Overview = () => {
       {collection && (
         <section className={classes.infoWrapper}>
           <div className={classes.block}>
-            <Typography variant="h5">{collectionTrans('status')}</Typography>
-            <StatusAction
-              status={collection.status}
-              percentage={collection.loadedPercentage}
-              schema={collection.schema!}
-              action={() => {
-                setDialog({
-                  open: true,
-                  type: 'custom',
-                  params: {
-                    component:
-                      collection.status === LOADING_STATE.UNLOADED ? (
-                        <LoadCollectionDialog collection={collection} />
-                      ) : (
-                        <ReleaseCollectionDialog collection={collection} />
-                      ),
-                  },
-                });
-              }}
-            />
+            <Typography variant="h5">
+              {collectionTrans('description')}
+            </Typography>
+            <Typography variant="h6">
+              {collection?.description || '--'}
+            </Typography>
           </div>
 
+          <section className={classes.horizonalBlock}>
+            <div className={classes.block}>
+              <Typography variant="h5">{collectionTrans('status')}</Typography>
+
+              <StatusAction
+                status={collection.status}
+                percentage={collection.loadedPercentage}
+                schema={collection.schema!}
+                action={() => {
+                  setDialog({
+                    open: true,
+                    type: 'custom',
+                    params: {
+                      component:
+                        collection.status === LOADING_STATE.UNLOADED ? (
+                          <LoadCollectionDialog collection={collection} />
+                        ) : (
+                          <ReleaseCollectionDialog collection={collection} />
+                        ),
+                    },
+                  });
+                }}
+              />
+            </div>
+          </section>
+
           <div className={classes.block}>
             <Typography variant="h5">
               {collectionTrans('rowCount')}
@@ -290,10 +312,10 @@ const Overview = () => {
 
           <div className={classes.block}>
             <Typography variant="h5">
-              {collectionTrans('description')}
+              {collectionTrans('createdTime')}
             </Typography>
             <Typography variant="h6">
-              {collection?.description || '--'}
+              {new Date(collection.createdTime).toLocaleString()}
             </Typography>
           </div>
 
@@ -321,15 +343,6 @@ const Overview = () => {
               </Tooltip>
             </Typography>
           </div>
-
-          <div className={classes.block}>
-            <Typography variant="h5">
-              {collectionTrans('createdTime')}
-            </Typography>
-            <Typography variant="h6">
-              {new Date(collection.createdTime).toLocaleString()}
-            </Typography>
-          </div>
         </section>
       )}