UI update

Signed-off-by: ruiyi.jiang <ruiyi.jiang@zilliz.com>

client/src/components/advancedSearch/CopyButton.tsx

@@ -54,7 +54,7 @@ const CopyButton: FC<CopyButtonProps> = props => {
       onClick={event => handleClick(event, value || '')}
       {...others}
     >
-      {icon || <CopyIcon style={{ color: 'transparent' }} />}
+      {icon || <CopyIcon  />}
     </CustomIconButton>
   );
 };
@@ -64,12 +64,7 @@ CopyButton.displayName = 'CopyButton';
 const useStyles = makeStyles((theme: Theme) =>
   createStyles({
     root: {},
-    button: {
-      '& svg': {
-        width: '16px',
-        height: '16px',
-      },
-    },
+    button: {},
     tooltip: {},
   })
 );

client/src/components/icons/Types.ts

@@ -6,8 +6,6 @@ export type IconsType =
   | 'deleteOutline'
   | 'list'
   | 'copy'
-  | 'visible'
-  | 'invisible'
   | 'error'
   | 'clear'
   | 'app'
@@ -36,7 +34,6 @@ export type IconsType =
   | 'refresh'
   | 'filter'
   | 'copyExpression'
-  | 'alias'
   | 'datePicker'
   | 'download'
   | 'source'
@@ -45,4 +42,6 @@ export type IconsType =
   | 'uploadFile'
   | 'compact'
   | 'saveAs'
-  | 'settings';
+  | 'settings'
+  | 'avatar'
+  | 'flush';

client/src/components/layout/Header.tsx

@@ -7,7 +7,6 @@ import {
   Typography,
   Tooltip,
 } from '@material-ui/core';
-import AccountCircleIcon from '@material-ui/icons/AccountCircle';
 import { useNavigate } from 'react-router-dom';
 import { navContext, dataContext, authContext } from '@/context';
 import { MilvusService } from '@/http';
@@ -42,6 +41,7 @@ const useStyles = makeStyles((theme: Theme) =>
       color: theme.palette.primary.main,
       cursor: 'pointer',
       marginRight: theme.spacing(1),
+      width: '20px',
     },
     addressWrapper: {
       display: 'flex',
@@ -82,6 +82,7 @@ const Header: FC<HeaderType> = props => {
   const { t: dbTrans } = useTranslation('database');
   const BackIcon = icons.back;
   const LogoutIcon = icons.logout;
+  const Avatar = icons.avatar;
 
   const handleBack = (path: string) => {
     navigate(path);
@@ -135,10 +136,19 @@ const Header: FC<HeaderType> = props => {
           </div>
           {username && (
             <Tooltip title={username}>
-              <AccountCircleIcon classes={{ root: classes.icon }} />
+              <div>
+                <Avatar classes={{ root: classes.icon }} />
+              </div>
             </Tooltip>
           )}
-          <LogoutIcon classes={{ root: classes.icon }} onClick={handleLogout} />
+          <Tooltip title={''}>
+            <div>
+              <LogoutIcon
+                classes={{ root: classes.icon }}
+                onClick={handleLogout}
+              />
+            </div>
+          </Tooltip>
         </div>
       </div>
     </header>

client/src/components/menu/NavMenu.tsx

@@ -46,38 +46,22 @@ const useStyles = makeStyles((theme: Theme) =>
       width: 'initial',
       color: theme.palette.attuGrey.dark,
       '&:hover': {
-        backgroundColor: '#e0e0e0',
+        backgroundColor: '#efefef',
       },
     },
     itemIcon: {
-      minWidth: '20px',
+      minWidth: '24px',
       marginRight: theme.spacing(1),
-
-      '& .icon': {
-        fill: 'transparent',
-
-        '& path': {
-          stroke: theme.palette.attuGrey.dark,
-          strokeWidth: 2,
-        },
-      },
     },
     itemText: {
       whiteSpace: 'nowrap',
     },
     active: {
-      color: '#000',
-      backgroundColor: '#e0e0e0',
+      color: '#323232',
+      backgroundColor: '#efefef',
 
       '& .icon': {
-        stroke: theme.palette.primary.main,
-
-        '& path': {
-          stroke: theme.palette.primary.main,
-        },
-      },
-      '& span': {
-        fontWeight: 'bold',
+        color: theme.palette.primary.main,
       },
     },
 

client/src/pages/collections/Collections.tsx

@@ -506,7 +506,7 @@ const Collections = () => {
         <span className="flex-center with-max-content">
           {collectionTrans('rowCount')}
           <CustomToolTip title={collectionTrans('entityCountInfo')}>
-            <InfoIcon classes={{ root: classes.icon }} />
+            <InfoIcon width={15} classes={{ root: classes.icon }} />
           </CustomToolTip>
         </span>
       ),
@@ -582,7 +582,7 @@ const Collections = () => {
         <span className="flex-center with-max-content">
           {collectionTrans('alias')}
           <CustomToolTip title={collectionTrans('aliasInfo')}>
-            <InfoIcon classes={{ root: classes.icon }} />
+            <InfoIcon width={15} classes={{ root: classes.icon }} />
           </CustomToolTip>
         </span>
       ),

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

@@ -37,6 +37,9 @@ const getExpanded = (nodes: DatabaseTreeItem[]) => {
 
 const useStyles = makeStyles((theme: Theme) => ({
   root: {
+    '& .MuiTreeItem-iconContainer': {
+      width: 'auto',
+    },
     '& .MuiTreeItem-group': {
       marginLeft: 0,
       '& .MuiTreeItem-content': {

client/src/pages/query/Query.tsx

@@ -348,7 +348,6 @@ const Query = () => {
                 disabled={!collection.loaded}
               >
                 <ResetIcon classes={{ root: 'icon' }} />
-                {btnTrans('reset')}
               </CustomButton>
               <CustomButton
                 variant="contained"

client/src/pages/query/Styles.ts

@@ -53,27 +53,10 @@ export const getQueryStyles = makeStyles((theme: Theme) => ({
       display: 'flex',
       justifyContent: 'space-between',
       alignItems: 'center',
-      gap: theme.spacing(2),
+      gap: theme.spacing(1),
     },
   },
   selector: {
     width: 180,
   },
-  vectorTableCell: {
-    '& >div': {
-      maxWidth: theme.spacing(50),
-      overflow: 'hidden',
-      textOverflow: 'ellipsis',
-    },
-    display: 'flex',
-    flexDirection: 'row',
-    alignItems: 'center',
-  },
-  copyBtn: {
-    padding: '4px',
-    width: '16px',
-    height: '16px',
-    position: 'relative',
-    top: '-3px',
-  },
 }));

client/src/pages/segments/Segments.tsx

@@ -91,7 +91,7 @@ const Segments = () => {
         });
       },
       label: btnTrans('flush'),
-      icon: 'saveAs',
+      icon: 'flush',
     },
     {
       type: 'button',

server/src/crons/crons.service.ts

@@ -60,10 +60,7 @@ export class CronsService {
       );
 
       if (!currentJob) {
-        console.log(
-          `running getCollection task, payload:`,
-          currentJob.data.payload
-        );
+        console.log(`running getCollection task, payload:`, currentJob.data);
         return;
       }
       try {