Merge pull request #204 from zilliztech/latency

show latency in search result

client/src/components/grid/Types.ts

@@ -1,6 +1,7 @@
+import React, { ReactElement } from 'react';
+import { LabelDisplayedRowsArgs } from '@material-ui/core';
 import { IconsType } from '../icons/Types';
 import { SearchType } from '../customInput/Types';
-import React, { ReactElement } from 'react';
 
 export type IconConfigType = {
   [x: string]: JSX.Element;
@@ -124,7 +125,7 @@ export type AttuGridType = ToolBarType & {
   setRowsPerPage?: (size: number) => void;
   primaryKey: string;
   onChangePage?: (e: any, nextPageNum: number) => void;
-  labelDisplayedRows?: (obj: any) => string;
+  labelDisplayedRows?: (obj: LabelDisplayedRowsArgs) => React.ReactNode;
   page?: number;
   showToolbar?: boolean;
   rows: any[];
@@ -156,7 +157,7 @@ type ActionBarConfig = {
   onClick: (e: React.MouseEvent, row: any) => void;
   icon?: IconsType;
   text?: string;
-  linkButton? : boolean;
+  linkButton?: boolean;
   showIconMethod?: 'iconType' | 'renderFn';
   renderIconFn?: (row: any) => ReactElement;
   label?: string;

client/src/i18n/en/common.ts

@@ -22,6 +22,7 @@ const commonTrans = {
     action: 'action',
     noData: 'No Data',
     rows: 'Rows',
+    results: 'results',
     of: 'of',
     nextLabel: 'next page',
     prevLabel: 'prev page',

client/src/pages/query/Query.tsx

@@ -20,6 +20,7 @@ import CustomToolBar from '../../components/grid/ToolBar';
 // import { CustomDatePicker } from '../../components/customDatePicker/CustomDatePicker';
 import { saveAs } from 'file-saver';
 import { DataTypeStringEnum } from '../collections/Types';
+import { getLabelDisplayedRows } from '../search/Utils';
 
 const Query: FC<{
   collectionName: string;
@@ -32,6 +33,10 @@ const Query: FC<{
   const [primaryKey, setPrimaryKey] = useState<{ value: string; type: string }>(
     { value: '', type: DataTypeStringEnum.Int64 }
   );
+
+  // latency
+  const [latency, setLatency] = useState<number>(0);
+
   const { setDialog, handleCloseDialog, openSnackBar } =
     useContext(rootContext);
   const VectorSearchIcon = icons.vectorSearch;
@@ -149,6 +154,7 @@ const Query: FC<{
       });
       const result = res.data;
       setQueryResult(result);
+      setLatency(res.latency);
     } catch (err) {
       setQueryResult([]);
     } finally {
@@ -314,6 +320,7 @@ const Query: FC<{
           orderBy={orderBy}
           order={order}
           handleSort={handleGridSort}
+          labelDisplayedRows={getLabelDisplayedRows(`(${latency} ms)`)}
         />
       ) : (
         <EmptyCard

client/src/pages/search/Utils.tsx

@@ -0,0 +1,19 @@
+import { Typography } from '@material-ui/core';
+import { useTranslation } from 'react-i18next';
+
+export const getLabelDisplayedRows =
+  (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}
+        </Typography>
+      </>
+    );
+  };

client/src/pages/search/VectorSearch.tsx

@@ -37,6 +37,7 @@ import { cloneObj, generateVector } from '../../utils/Common';
 import { CustomDatePicker } from '../../components/customDatePicker/CustomDatePicker';
 import { useTimeTravelHook } from '../../hooks/TimeTravel';
 import { LOADING_STATE } from '../../consts/Milvus';
+import { getLabelDisplayedRows } from './Utils';
 
 const VectorSearch = () => {
   useNavigationHook(ALL_ROUTER_TYPES.SEARCH);
@@ -45,6 +46,7 @@ const VectorSearch = () => {
   // i18n
   const { t: searchTrans } = useTranslation('search');
   const { t: btnTrans } = useTranslation('btn');
+
   const classes = getVectorSearchStyles();
 
   // data stored inside the component
@@ -71,6 +73,9 @@ const VectorSearch = () => {
   const [expression, setExpression] = useState<string>('');
   const [vectors, setVectors] = useState<string>('');
 
+  // latency
+  const [latency, setLatency] = useState<number>(0);
+
   const {
     pageSize,
     handlePageSize,
@@ -133,7 +138,7 @@ const VectorSearch = () => {
             align: 'left',
             disablePadding: false,
             label: key,
-            needCopy: primaryKeyField === key
+            needCopy: primaryKeyField === key,
           }))
       : [];
   }, [searchResult, primaryKeyField]);
@@ -330,6 +335,7 @@ const VectorSearch = () => {
 
       const result = transferSearchResult(res.results);
       setSearchResult(result);
+      setLatency(res.latency);
     } catch (err) {
       setTableLoading(false);
     }
@@ -542,6 +548,7 @@ const VectorSearch = () => {
           isLoading={tableLoading}
           orderBy={orderBy}
           order={order}
+          labelDisplayedRows={getLabelDisplayedRows(`(${latency} ms)`)}
           handleSort={handleGridSort}
           tableCellMaxWidth="100%"
         />

server/src/collections/collections.service.ts

@@ -86,8 +86,12 @@ export class CollectionsService {
   }
 
   async vectorSearch(data: SearchReq) {
+    const now = Date.now();
     const res = await this.milvusService.client.search(data);
+    const after = Date.now();
+
     throwErrorFromSDK(res.status);
+    Object.assign(res, { latency: after - now });
     return res;
   }
 
@@ -119,8 +123,12 @@ export class CollectionsService {
       collection_name: string;
     } & QueryDto
   ) {
+    const now = Date.now();
     const res = await this.milvusService.client.query(data);
+    const after = Date.now();
+
     throwErrorFromSDK(res.status);
+    Object.assign(res, { latency: after - now });
     return res;
   }