add database selector part1

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

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>
   );

client/src/components/layout/Header.tsx

@@ -1,13 +1,15 @@
 import { FC, useContext } 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,17 +57,24 @@ 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;
+  const ForwardIcon = icons.rightArrow;
   const LogoutIcon = icons.logout;
 
   const handleBack = (path: string) => {
@@ -80,6 +90,8 @@ const Header: FC<HeaderType> = props => {
     // navigate(0);
   };
 
+  const dbOptions = databases.map(d => ({ value: d, label: d }));
+
   return (
     <header className={classes.header}>
       <div className={classes.contentWrapper}>
@@ -90,6 +102,20 @@ const Header: FC<HeaderType> = props => {
               onClick={() => handleBack(navInfo.backPath)}
             />
           )}
+          {navInfo.showDatabaseSelector ? (
+            <CustomSelector
+              label="Database"
+              value={database}
+              onChange={(e: { target: { value: unknown } }) => {
+                const database = e.target.value as string;
+                setDatabase(database);
+              }}
+              options={dbOptions}
+              variant="filled"
+              wrapperClass={classes.database}
+            />
+          ) : null}
+          {/* <ForwardIcon classes={{ root: classes.icon }} /> */}
 
           <Typography variant="h4" color="textPrimary">
             {navInfo.navTitle}

client/src/components/menu/NavMenu.tsx

@@ -132,7 +132,7 @@ const useStyles = makeStyles((theme: Theme) =>
       },
     },
     expandIcon: {
-      left: '187px',
+      left: '160px',
       transform: 'rotateZ(180deg)',
     },
     collapseIcon: {

client/src/context/Database.tsx

@@ -0,0 +1,38 @@
+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 }) => {
+  // get milvus address from local storage
+  const [database, setDatabase] = useState<string>('default');
+  const [databases, setDatabases] = useState<string[]>(['default']);
+
+  const fetchDatabases = async () => {
+    const res = await DatabaseHttp.getDatabases();
+    setDatabases(res.db_names);
+    console.log(databases);
+  };
+
+  useEffect(() => {
+    fetchDatabases();
+  }, []);
+
+  return (
+    <Provider
+      value={{
+        database,
+        databases,
+        setDatabase,
+      }}
+    >
+      {props.children}
+    </Provider>
+  );
+};

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>;

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>>;

client/src/hooks/Navigation.ts

@@ -22,6 +22,7 @@ export const useNavigationHook = (
         const navInfo: NavInfo = {
           navTitle: navTrans('overview'),
           backPath: '',
+          showDatabaseSelector: false,
         };
         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;

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

client/src/pages/user/Users.tsx

@@ -1,5 +1,5 @@
 import { useMemo } from 'react';
-import { useNavigate, useLocation, useParams } from 'react-router-dom';
+import { useNavigate, useLocation } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 import { makeStyles, Theme } from '@material-ui/core';
 import { useNavigationHook } from '@/hooks/Navigation';

client/src/router/Types.ts

@@ -18,4 +18,5 @@ export enum ALL_ROUTER_TYPES {
 export type NavInfo = {
   navTitle: string;
   backPath: string;
+  showDatabaseSelector: boolean;
 };