Merge pull request #241 from zilliztech/database

Support database
zilliztech · Aug 6, 2023 · 8ba124a · 8ba124a
2 parents 182f98c + cfe4e23
commit 8ba124a
Show file tree

Hide file tree

Showing 19 changed files with 181 additions and 62 deletions.
diff --git a/client/src/App.tsx b/client/src/App.tsx
@@ -6,20 +6,23 @@ import { NavProvider } from './context/Navigation';
 import { AuthProvider } from './context/Auth';
 import { WebSocketProvider } from './context/WebSocket';
 import { PrometheusProvider } from './context/Prometheus';
+import { DatabaseProvider } from './context/Database';
 
 function App() {
   return (
     <AuthProvider>
       <RootProvider>
-        <PrometheusProvider>
-          <WebSocketProvider>
-            <NavProvider>
-              <MuiPickersUtilsProvider utils={DayjsUtils}>
-                <Router></Router>
-              </MuiPickersUtilsProvider>
-            </NavProvider>
-          </WebSocketProvider>
-        </PrometheusProvider>
+        <DatabaseProvider>
+          <PrometheusProvider>
+            <WebSocketProvider>
+              <NavProvider>
+                <MuiPickersUtilsProvider utils={DayjsUtils}>
+                  <Router></Router>
+                </MuiPickersUtilsProvider>
+              </NavProvider>
+            </WebSocketProvider>
+          </PrometheusProvider>
+        </DatabaseProvider>
       </RootProvider>
     </AuthProvider>
   );

diff --git a/client/src/components/layout/Header.tsx b/client/src/components/layout/Header.tsx
@@ -1,13 +1,15 @@
-import { FC, useContext } from 'react';
+import { FC, useContext, useEffect } from 'react';
 import { makeStyles, Theme, createStyles, Typography } from '@material-ui/core';
-import { HeaderType } from './Types';
-import { navContext } from '../../context/Navigation';
-import icons from '../icons/Icons';
 import { useNavigate } from 'react-router-dom';
-import { authContext } from '../../context/Auth';
+import { navContext } from '@/context/Navigation';
+import { databaseContext } from '@/context/Database';
+import { authContext } from '@/context/Auth';
 import { useTranslation } from 'react-i18next';
-import { MilvusHttp } from '../../http/Milvus';
-import { MILVUS_ADDRESS } from '../../consts/Localstorage';
+import { MilvusHttp } from '@/http/Milvus';
+import { MILVUS_ADDRESS } from '@/consts/Localstorage';
+import CustomSelector from '@/components/customSelector/CustomSelector';
+import icons from '../icons/Icons';
+import { HeaderType } from './Types';
 
 const useStyles = makeStyles((theme: Theme) =>
   createStyles({
@@ -22,7 +24,7 @@ const useStyles = makeStyles((theme: Theme) =>
       justifyContent: 'space-between',
       alignItems: 'center',
       paddingTop: theme.spacing(3),
-      paddingLeft: theme.spacing(5),
+      paddingLeft: theme.spacing(4),
       flex: 1,
     },
     navigation: {
@@ -32,6 +34,7 @@ const useStyles = makeStyles((theme: Theme) =>
     icon: {
       color: theme.palette.primary.main,
       cursor: 'pointer',
+      marginRight: theme.spacing(1),
     },
     addressWrapper: {
       display: 'flex',
@@ -54,14 +57,20 @@ const useStyles = makeStyles((theme: Theme) =>
         },
       },
     },
+    database: {
+      width: theme.spacing(16),
+      marginRight: theme.spacing(2),
+    },
   })
 );
 
 const Header: FC<HeaderType> = props => {
   const classes = useStyles();
   const { navInfo } = useContext(navContext);
+  const { database, databases, setDatabase } = useContext(databaseContext);
   const { address, setAddress, setIsAuth } = useContext(authContext);
   const navigate = useNavigate();
+
   const { t: commonTrans } = useTranslation();
   const statusTrans = commonTrans('status');
   const BackIcon = icons.back;
@@ -80,6 +89,12 @@ 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 (
     <header className={classes.header}>
       <div className={classes.contentWrapper}>
@@ -90,6 +105,20 @@ const Header: FC<HeaderType> = props => {
               onClick={() => handleBack(navInfo.backPath)}
             />
           )}
+          {navInfo.showDatabaseSelector ? (
+            <CustomSelector
+              label="Database"
+              value={database}
+              onChange={async (e: { target: { value: unknown } }) => {
+                const database = e.target.value as string;
+                await useDatabase(database);
+                setDatabase(database);
+              }}
+              options={dbOptions}
+              variant="filled"
+              wrapperClass={classes.database}
+            />
+          ) : null}
 
           <Typography variant="h4" color="textPrimary">
             {navInfo.navTitle}

diff --git a/client/src/components/menu/NavMenu.tsx b/client/src/components/menu/NavMenu.tsx
@@ -132,7 +132,7 @@ const useStyles = makeStyles((theme: Theme) =>
       },
     },
     expandIcon: {
-      left: '187px',
+      left: '160px',
       transform: 'rotateZ(180deg)',
     },
     collapseIcon: {

diff --git a/client/src/context/Database.tsx b/client/src/context/Database.tsx
@@ -0,0 +1,36 @@
+import { createContext, useEffect, useState } from 'react';
+import { DatabaseHttp } from '@/http/Database';
+import { DatabaseContextType } from './Types';
+
+export const databaseContext = createContext<DatabaseContextType>({
+  database: 'default',
+  databases: ['default'],
+  setDatabase: () => {},
+});
+
+const { Provider } = databaseContext;
+export const DatabaseProvider = (props: { children: React.ReactNode }) => {
+  const [database, setDatabase] = useState<string>('default');
+  const [databases, setDatabases] = useState<string[]>(['default']);
+
+  const fetchDatabases = async () => {
+    const res = await DatabaseHttp.getDatabases();
+    setDatabases(res.db_names);
+  };
+
+  useEffect(() => {
+    fetchDatabases();
+  }, []);
+
+  return (
+    <Provider
+      value={{
+        database,
+        databases,
+        setDatabase,
+      }}
+    >
+      {props.children}
+    </Provider>
+  );
+};
diff --git a/client/src/context/Navigation.tsx b/client/src/context/Navigation.tsx
@@ -7,6 +7,7 @@ export const navContext = createContext<NavContextType>({
   navInfo: {
     navTitle: '',
     backPath: '',
+    showDatabaseSelector: false,
   },
   setNavInfo: () => {},
 });
@@ -15,9 +16,11 @@ const { Provider } = navContext;
 
 export const NavProvider = (props: { children: React.ReactNode }) => {
   const { t } = useTranslation('nav');
+
   const [navInfo, setNavInfo] = useState<NavInfo>({
     navTitle: t('overview'),
     backPath: '',
+    showDatabaseSelector: false,
   });
 
   return <Provider value={{ navInfo, setNavInfo }}>{props.children}</Provider>;

diff --git a/client/src/context/Types.ts b/client/src/context/Types.ts
@@ -62,6 +62,12 @@ export type AuthContextType = {
   setIsAuth: Dispatch<SetStateAction<boolean>>;
 };
 
+export type DatabaseContextType = {
+  database: string;
+  databases: string[];
+  setDatabase: Dispatch<SetStateAction<string>>;
+};
+
 export type PrometheusContextType = {
   withPrometheus: boolean;
   setWithPrometheus: Dispatch<SetStateAction<boolean>>;

diff --git a/client/src/context/WebSocket.tsx b/client/src/context/WebSocket.tsx
@@ -9,12 +9,12 @@ import { CollectionView } from '../pages/collections/Types';
 import { checkIndexBuilding, checkLoading } from '../utils/Validation';
 import { WebSocketType } from './Types';
 
-export const webSokcetContext = createContext<WebSocketType>({
+export const webSocketContext = createContext<WebSocketType>({
   collections: [],
   setCollections: data => {},
 });
 
-const { Provider } = webSokcetContext;
+const { Provider } = webSocketContext;
 
 export const WebSocketProvider = (props: { children: React.ReactNode }) => {
   const [collections, setCollections] = useState<CollectionView[]>([]);

diff --git a/client/src/hooks/Navigation.ts b/client/src/hooks/Navigation.ts
@@ -22,6 +22,7 @@ export const useNavigationHook = (
         const navInfo: NavInfo = {
           navTitle: navTrans('overview'),
           backPath: '',
+          showDatabaseSelector: true,
         };
         setNavInfo(navInfo);
         break;
@@ -30,6 +31,7 @@ export const useNavigationHook = (
         const navInfo: NavInfo = {
           navTitle: navTrans('database'),
           backPath: '',
+          showDatabaseSelector: false,
         };
         setNavInfo(navInfo);
         break;
@@ -38,6 +40,7 @@ export const useNavigationHook = (
         const navInfo: NavInfo = {
           navTitle: navTrans('collection'),
           backPath: '',
+          showDatabaseSelector: true,
         };
         setNavInfo(navInfo);
         break;
@@ -46,6 +49,7 @@ export const useNavigationHook = (
         const navInfo: NavInfo = {
           navTitle: collectionName,
           backPath: '/collections',
+          showDatabaseSelector: false,
         };
         setNavInfo(navInfo);
         break;
@@ -54,6 +58,7 @@ export const useNavigationHook = (
         const navInfo: NavInfo = {
           navTitle: navTrans('search'),
           backPath: '',
+          showDatabaseSelector: true,
         };
         setNavInfo(navInfo);
         break;
@@ -62,6 +67,7 @@ export const useNavigationHook = (
         const navInfo: NavInfo = {
           navTitle: navTrans('system'),
           backPath: '',
+          showDatabaseSelector: false,
         };
         setNavInfo(navInfo);
         break;
@@ -70,14 +76,7 @@ export const useNavigationHook = (
         const navInfo: NavInfo = {
           navTitle: navTrans('user'),
           backPath: '',
-        };
-        setNavInfo(navInfo);
-        break;
-      }
-      case ALL_ROUTER_TYPES.PLUGIN: {
-        const navInfo: NavInfo = {
-          navTitle: title,
-          backPath: '',
+          showDatabaseSelector: false,
         };
         setNavInfo(navInfo);
         break;

diff --git a/client/src/http/Milvus.ts b/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 });
+  }
 }
diff --git a/client/src/pages/collections/Collections.tsx b/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 { webSokcetContext } from '@/context/WebSocket';
-import { WS_EVENTS, WS_EVENTS_TYPE } from '../../consts/Http';
+import { LOADING_STATE } from '@/consts/Milvus';
+import { webSocketContext } from '@/context/WebSocket';
+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>(
@@ -70,7 +72,7 @@ const Collections = () => {
   >([]);
 
   const { setDialog, openSnackBar } = useContext(rootContext);
-  const { collections, setCollections } = useContext(webSokcetContext);
+  const { collections, setCollections } = useContext(webSocketContext);
   const { t: collectionTrans } = useTranslation('collection');
   const { t: btnTrans } = useTranslation('btn');
   const { t: successTrans } = useTranslation('success');
@@ -105,7 +107,7 @@ const Collections = () => {
 
   useEffect(() => {
     fetchData();
-  }, [fetchData]);
+  }, [fetchData, database]);
 
   const formatCollections = useMemo(() => {
     const filteredCollections = search

diff --git a/client/src/pages/index.tsx b/client/src/pages/index.tsx
@@ -130,7 +130,7 @@ function Index() {
         <GlobalEffect>
           <div className={classes.content}>
             <NavMenu
-              width="200px"
+              width="172px"
               data={menuItems}
               defaultActive={defaultActive}
               // used for nested child menu