update overview/collection/search after changing database

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

client/src/components/layout/Header.tsx

@@ -1,4 +1,4 @@
-import { FC, useContext } from 'react';
+import { FC, useContext, useEffect } from 'react';
 import { makeStyles, Theme, createStyles, Typography } from '@material-ui/core';
 import { useNavigate } from 'react-router-dom';
 import { navContext } from '@/context/Navigation';
@@ -90,6 +90,10 @@ const Header: FC<HeaderType> = props => {
     // navigate(0);
   };
 
+  const useDatabase = async (database: string) => {
+    await MilvusHttp.useDatabase({ database });
+  };
+
   const dbOptions = databases.map(d => ({ value: d, label: d }));
 
   return (
@@ -106,8 +110,9 @@ const Header: FC<HeaderType> = props => {
             <CustomSelector
               label="Database"
               value={database}
-              onChange={(e: { target: { value: unknown } }) => {
+              onChange={async (e: { target: { value: unknown } }) => {
                 const database = e.target.value as string;
+                await useDatabase(database);
                 setDatabase(database);
               }}
               options={dbOptions}

client/src/hooks/Navigation.ts

@@ -22,7 +22,7 @@ export const useNavigationHook = (
         const navInfo: NavInfo = {
           navTitle: navTrans('overview'),
           backPath: '',
-          showDatabaseSelector: false,
+          showDatabaseSelector: true,
         };
         setNavInfo(navInfo);
         break;

client/src/http/Milvus.ts

@@ -8,7 +8,7 @@ export class MilvusHttp extends BaseModel {
   static FLUSH_URL = '/milvus/flush';
   static METRICS_URL = '/milvus/metrics';
   static VERSION_URL = '/milvus/version';
-
+  static USE_DB_URL = '/milvus/usedb';
   static TIGGER_CRON_URL = '/crons';
 
   constructor(props: {}) {
@@ -58,4 +58,8 @@ export class MilvusHttp extends BaseModel {
       data,
     });
   }
+
+  static useDatabase(data: { database: string }) {
+    return super.create({ path: this.USE_DB_URL, data });
+  }
 }

client/src/pages/collections/Collections.tsx

@@ -3,6 +3,7 @@ import { Link, useSearchParams } from 'react-router-dom';
 import { makeStyles, Theme } from '@material-ui/core';
 import { useTranslation } from 'react-i18next';
 import { authContext } from '@/context/Auth';
+import { databaseContext } from '@/context/Database';
 import { useNavigationHook } from '@/hooks/Navigation';
 import { ALL_ROUTER_TYPES } from '@/router/Types';
 import AttuGrid from '@/components/grid/Grid';
@@ -27,9 +28,9 @@ import Highlighter from 'react-highlight-words';
 import InsertDialog from '../dialogs/insert/Dialog';
 import ImportSampleDialog from '../dialogs/ImportSampleDialog';
 import { MilvusHttp } from '@/http/Milvus';
-import { LOADING_STATE } from '../../consts/Milvus';
+import { LOADING_STATE } from '@/consts/Milvus';
 import { webSocketContext } from '@/context/WebSocket';
-import { WS_EVENTS, WS_EVENTS_TYPE } from '../../consts/Http';
+import { WS_EVENTS, WS_EVENTS_TYPE } from '@/consts/Http';
 import { checkIndexBuilding, checkLoading } from '@/utils/Validation';
 import Aliases from './Aliases';
 
@@ -59,6 +60,7 @@ const useStyles = makeStyles((theme: Theme) => ({
 const Collections = () => {
   useNavigationHook(ALL_ROUTER_TYPES.COLLECTIONS);
   const { isManaged } = useContext(authContext);
+  const { database } = useContext(databaseContext);
 
   const [searchParams] = useSearchParams();
   const [search, setSearch] = useState<string>(
@@ -105,7 +107,7 @@ const Collections = () => {
 
   useEffect(() => {
     fetchData();
-  }, [fetchData]);
+  }, [fetchData, database]);
 
   const formatCollections = useMemo(() => {
     const filteredCollections = search

client/src/pages/search/VectorSearch.tsx

@@ -1,24 +1,26 @@
+import { useCallback, useEffect, useMemo, useState, useContext } from 'react';
 import { TextField, Typography, Button } from '@material-ui/core';
 import { useTranslation } from 'react-i18next';
-import { useNavigationHook } from '@/hooks/Navigation';
+import { useLocation } from 'react-router-dom';
 import { ALL_ROUTER_TYPES } from '@/router/Types';
+import { useNavigationHook } from '@/hooks/Navigation';
+import { useSearchResult } from '@/hooks/Result';
+import { usePaginationHook } from '@/hooks/Pagination';
+import { useTimeTravelHook } from '@/hooks/TimeTravel';
+import { databaseContext } from '@/context/Database';
 import CustomSelector from '@/components/customSelector/CustomSelector';
-import { useCallback, useEffect, useMemo, useState } from 'react';
-import SearchParams from './SearchParams';
-import { DEFAULT_METRIC_VALUE_MAP } from '../../consts/Milvus';
-import { FieldOption, SearchResultView, VectorSearchParam } from './Types';
+import { ColDefinitionsType } from '@/components/grid/Types';
 import AttuGrid from '@/components/grid/Grid';
 import EmptyCard from '@/components/cards/EmptyCard';
 import icons from '@/components/icons/Icons';
-import { usePaginationHook } from '@/hooks/Pagination';
 import CustomButton from '@/components/customButton/CustomButton';
 import SimpleMenu from '@/components/menu/SimpleMenu';
-import { TOP_K_OPTIONS } from './Constants';
 import { Option } from '@/components/customSelector/Types';
+import Filter from '@/components/advancedSearch';
+import { Field } from '@/components/advancedSearch/Types';
+import { CustomDatePicker } from '@/components/customDatePicker/CustomDatePicker';
 import { CollectionHttp } from '@/http/Collection';
-import { CollectionData, DataTypeEnum } from '../collections/Types';
 import { IndexHttp } from '@/http/Index';
-import { getVectorSearchStyles } from './Styles';
 import { parseValue } from '@/utils/Insert';
 import {
   classifyFields,
@@ -27,21 +29,21 @@ import {
   getNonVectorFieldsForFilter,
   getVectorFieldOptions,
 } from '@/utils/search';
-import { ColDefinitionsType } from '@/components/grid/Types';
-import Filter from '@/components/advancedSearch';
-import { Field } from '@/components/advancedSearch/Types';
-import { useLocation } from 'react-router-dom';
 import { parseLocationSearch } from '@/utils/Format';
 import { cloneObj, generateVector } from '@/utils/Common';
-import { CustomDatePicker } from '@/components/customDatePicker/CustomDatePicker';
-import { useTimeTravelHook } from '@/hooks/TimeTravel';
 import { LOADING_STATE } from '@/consts/Milvus';
+import { DEFAULT_METRIC_VALUE_MAP } from '@/consts/Milvus';
 import { getLabelDisplayedRows } from './Utils';
-import { useSearchResult } from '@/hooks/Result';
+import SearchParams from './SearchParams';
+import { getVectorSearchStyles } from './Styles';
+import { CollectionData, DataTypeEnum } from '../collections/Types';
+import { TOP_K_OPTIONS } from './Constants';
+import { FieldOption, SearchResultView, VectorSearchParam } from './Types';
 
 const VectorSearch = () => {
   useNavigationHook(ALL_ROUTER_TYPES.SEARCH);
   const location = useLocation();
+  const { database } = useContext(databaseContext);
 
   // i18n
   const { t: searchTrans } = useTranslation('search');
@@ -237,7 +239,7 @@ const VectorSearch = () => {
   const fetchCollections = useCallback(async () => {
     const collections = await CollectionHttp.getCollections();
     setCollections(collections.filter(c => c._status === LOADING_STATE.LOADED));
-  }, []);
+  }, [database]);
 
   const fetchFieldsWithIndex = useCallback(
     async (collectionName: string, collections: CollectionData[]) => {
@@ -260,13 +262,18 @@ const VectorSearch = () => {
       const filterFields = getNonVectorFieldsForFilter(nonVectorFields);
       setFilterFields(filterFields);
     },
-    []
+    [collections]
   );
 
   useEffect(() => {
     fetchCollections();
   }, [fetchCollections]);
 
+  // clear selection if database is changed
+  useEffect(() => {
+    setSelectedCollection('');
+  }, [database]);
+
   // get field options with index when selected collection changed
   useEffect(() => {
     if (selectedCollection !== '') {

server/src/milvus/dto.ts

@@ -10,6 +10,11 @@ export class CheckMilvusDto {
   readonly address: string;
 }
 
+export class UseDatabaseDto {
+  @IsString()
+  readonly database: string;
+}
+
 export class FlushDto {
   @IsArray()
   @ArrayMinSize(1, { message: "At least need one collection name." })

server/src/milvus/milvus.controller.ts

@@ -1,7 +1,7 @@
 import { NextFunction, Request, Response, Router } from 'express';
 import { dtoValidationMiddleware } from '../middlewares/validation';
 import { MilvusService } from './milvus.service';
-import { ConnectMilvusDto, FlushDto } from './dto';
+import { ConnectMilvusDto, FlushDto, UseDatabaseDto } from './dto';
 import { INSIGHT_CACHE } from '../utils/Const';
 import packageJson from '../../package.json';
 
@@ -25,6 +25,11 @@ export class MilvusController {
       dtoValidationMiddleware(ConnectMilvusDto),
       this.connectMilvus.bind(this)
     );
+    this.router.post(
+      '/usedb',
+      dtoValidationMiddleware(UseDatabaseDto),
+      this.useDatabase.bind(this)
+    );
     this.router.post('/disconnect', this.closeConnection.bind(this));
     this.router.get('/check', this.checkConnect.bind(this));
     this.router.put(
@@ -95,6 +100,17 @@ export class MilvusController {
     res.send(data);
   }
 
+  async useDatabase(req: Request, res: Response, next: NextFunction) {
+    const { database } = req.body;
+
+    try {
+      const result = await this.milvusService.useDatabase(database);
+      res.send(result);
+    } catch (error) {
+      next(error);
+    }
+  }
+
   closeConnection(req: Request, res: Response, next: NextFunction) {
     const result = this.milvusService.closeConnection();
     res.send({ result });

server/src/milvus/milvus.service.ts

@@ -101,4 +101,11 @@ export class MilvusService {
     const res = MilvusService.activeMilvusClient.closeConnection();
     return res;
   }
+
+  async useDatabase(db: string) {
+    const res = await MilvusService.activeMilvusClient.use({
+      db_name: db,
+    });
+    return res;
+  }
 }