new attu Home (#436)

* home part1 Signed-off-by: ryjiang <[email protected]> * home part2 Signed-off-by: ryjiang <[email protected]> * add delete button Signed-off-by: ruiyi.jiang <[email protected]> * support view and manage database on homepage Signed-off-by: ryjiang <[email protected]> * home page part2 Signed-off-by: ryjiang <[email protected]> * add loadings Signed-off-by: ryjiang <[email protected]> --------- Signed-off-by: ryjiang <[email protected]> Signed-off-by: ruiyi.jiang <[email protected]>
zilliztech · Mar 14, 2024 · e9e4fd5 · e9e4fd5
1 parent 33a4c63
commit e9e4fd5
Show file tree

Hide file tree

Showing 27 changed files with 493 additions and 462 deletions.
diff --git a/client/src/components/layout/Header.tsx b/client/src/components/layout/Header.tsx
@@ -95,7 +95,7 @@ const Header: FC<HeaderType> = props => {
     await MilvusService.useDatabase({ database });
   };
 
-  const dbOptions = databases.map(d => ({ value: d, label: d }));
+  const dbOptions = databases.map(d => ({ value: d.name, label: d.name }));
   return (
     <header className={classes.header}>
       <div className={classes.contentWrapper}>

diff --git a/client/src/components/menu/NavMenu.tsx b/client/src/components/menu/NavMenu.tsx
@@ -85,7 +85,7 @@ const useStyles = makeStyles((theme: Theme) =>
     },
     logoExpand: {
       marginRight: theme.spacing(1),
-      transform: 'scale(2)',
+      transform: 'scale(1.5)',
     },
     logoCollapse: {
       transform: 'scale(1.5)',

diff --git a/client/src/context/Data.tsx b/client/src/context/Data.tsx
@@ -13,19 +13,28 @@ import { IndexCreateParam, IndexManageParam } from '@/pages/schema/Types';
 import { getDbValueFromUrl } from '@/utils';
 import { DataContextType } from './Types';
 import { LAST_TIME_DATABASE } from '@/consts';
-import { CollectionObject, CollectionFullObject } from '@server/types';
+import {
+  CollectionObject,
+  CollectionFullObject,
+  DatabaseObject,
+} from '@server/types';
 import { WS_EVENTS, WS_EVENTS_TYPE } from '@server/utils/Const';
 import { checkIndexing, checkLoading } from '@server/utils/Shared';
 
 export const dataContext = createContext<DataContextType>({
-  loading: false,
+  loading: true,
+  loadingDatabases: true,
   collections: [],
   setCollections: () => {},
-  database: 'default',
+  database: '',
   setDatabase: () => {},
   databases: [],
   setDatabaseList: () => {},
-  fetchDatabases: async () => {},
+  createDatabase: async () => {},
+  dropDatabase: async () => {},
+  fetchDatabases: async () => {
+    return [];
+  },
   fetchCollections: async () => {},
   fetchCollection: async () => {
     return {} as CollectionFullObject;
@@ -69,15 +78,16 @@ export const DataProvider = (props: { children: React.ReactNode }) => {
   // local data state
   const [collections, setCollections] = useState<CollectionObject[]>([]);
   const [connected, setConnected] = useState(false);
-  const [loading, setLoading] = useState(false);
-  const [database, setDatabase] = useState<string>(
+  const [loading, setLoading] = useState(true);
+  const [loadingDatabases, setLoadingDatabases] = useState(true);
+  const defaultDb =
     initialDatabase ||
-      window.localStorage.getItem(LAST_TIME_DATABASE) ||
-      'default'
-  );
-  const [databases, setDatabases] = useState<string[]>([database]);
+    window.localStorage.getItem(LAST_TIME_DATABASE) ||
+    'default';
+  const [database, setDatabase] = useState<string>(defaultDb);
+  const [databases, setDatabases] = useState<DatabaseObject[]>([]);
   // auth context
-  const { isAuth, clientId } = useContext(authContext);
+  const { isAuth, clientId, logout } = useContext(authContext);
   // socket ref
   const socket = useRef<Socket | null>(null);
 
@@ -134,9 +144,31 @@ export const DataProvider = (props: { children: React.ReactNode }) => {
 
   // API: fetch databases
   const fetchDatabases = async () => {
-    const res = await DatabaseService.getDatabases();
+    setLoadingDatabases(true);
+    const newDatabases = await DatabaseService.listDatabases();
+    setLoadingDatabases(false);
+
+    // if no database, logout
+    if (newDatabases.length === 0) {
+      logout();
+    }
+    setDatabases(newDatabases);
+
+    return newDatabases;
+  };
+
+  // API: create database
+  const createDatabase = async (params: { db_name: string }) => {
+    await DatabaseService.createDatabase(params);
+    await fetchDatabases();
+  };
+
+  // API: delete database
+  const dropDatabase = async (params: { db_name: string }) => {
+    await DatabaseService.dropDatabase(params);
+    const newDatabases = await fetchDatabases();
 
-    setDatabases(res.db_names);
+    setDatabase(newDatabases[0].name);
   };
 
   // API:fetch collections
@@ -308,7 +340,7 @@ export const DataProvider = (props: { children: React.ReactNode }) => {
       // clear collections
       setCollections([]);
       // clear database
-      setDatabases(['default']);
+      setDatabases([]);
       // set connected to false
       setConnected(false);
     }
@@ -337,12 +369,15 @@ export const DataProvider = (props: { children: React.ReactNode }) => {
     <Provider
       value={{
         loading,
+        loadingDatabases,
         collections,
         setCollections,
         database,
         databases,
         setDatabase,
         setDatabaseList: setDatabases,
+        createDatabase,
+        dropDatabase,
         fetchDatabases,
         fetchCollections,
         fetchCollection,

diff --git a/client/src/context/Types.ts b/client/src/context/Types.ts
@@ -1,5 +1,9 @@
 import { Dispatch, ReactElement, SetStateAction } from 'react';
-import { CollectionObject, CollectionFullObject } from '@server/types';
+import {
+  CollectionObject,
+  CollectionFullObject,
+  DatabaseObject,
+} from '@server/types';
 import { NavInfo } from '@/router/Types';
 import { IndexCreateParam, IndexManageParam } from '@/pages/schema/Types';
 
@@ -91,13 +95,21 @@ export type NavContextType = {
 
 export type DataContextType = {
   loading: boolean;
+  loadingDatabases: boolean;
   collections: CollectionObject[];
   setCollections: Dispatch<SetStateAction<CollectionObject[]>>;
   database: string;
   setDatabase: Dispatch<SetStateAction<string>>;
-  databases: string[];
-  setDatabaseList: Dispatch<SetStateAction<string[]>>;
-  fetchDatabases: () => Promise<void>;
+  databases: DatabaseObject[];
+  setDatabaseList: Dispatch<SetStateAction<DatabaseObject[]>>;
+
+  // APIs
+  // databases
+  fetchDatabases: () => Promise<DatabaseObject[]>;
+  createDatabase: (params: { db_name: string }) => Promise<void>;
+  dropDatabase: (params: { db_name: string }) => Promise<void>;
+
+  // collections
   fetchCollections: () => Promise<void>;
   fetchCollection: (name: string) => Promise<CollectionFullObject>;
   createCollection: (data: any) => Promise<CollectionFullObject>;

diff --git a/client/src/hooks/Navigation.ts b/client/src/hooks/Navigation.ts
@@ -20,9 +20,9 @@ export const useNavigationHook = (
     switch (type) {
       case ALL_ROUTER_TYPES.OVERVIEW: {
         const navInfo: NavInfo = {
-          navTitle: navTrans('overview'),
+          navTitle: navTrans('welcome'),
           backPath: '',
-          showDatabaseSelector: true,
+          showDatabaseSelector: false,
         };
         setNavInfo(navInfo);
         break;

diff --git a/client/src/http/Database.service.ts b/client/src/http/Database.service.ts
@@ -1,12 +1,18 @@
-import {
-  CreateDatabaseParams,
-  DropDatabaseParams,
-} from '../pages/dbAdmin/Types';
 import BaseModel from './BaseModel';
+import { DatabaseObject } from '@server/types';
+
+// request types
+export interface CreateDatabaseParams {
+  db_name: string;
+}
+
+export interface DropDatabaseParams {
+  db_name: string;
+}
 
 export class DatabaseService extends BaseModel {
-  static getDatabases() {
-    return super.search<{ db_names: [] }>({
+  static listDatabases() {
+    return super.search<DatabaseObject[]>({
       path: `/databases`,
       params: {},
     });

diff --git a/client/src/i18n/cn/home.ts b/client/src/i18n/cn/home.ts
@@ -0,0 +1,5 @@
+const homeTrans = {
+  welcome: '欢迎来到 Milvus!',
+};
+
+export default homeTrans;
diff --git a/client/src/i18n/cn/nav.ts b/client/src/i18n/cn/nav.ts
@@ -1,5 +1,6 @@
 const navTrans = {
   overview: '概览',
+  welcome: '欢迎来到 Milvus！',
   collection: 'Collection',
   console: '搜索控制台',
   search: '向量搜索',

diff --git a/client/src/i18n/cn/overview.ts b/client/src/i18n/cn/overview.ts
@@ -18,6 +18,7 @@ const overviewTrans = {
   dataNodes: '数据节点',
   queryNodes: '查询节点',
   indexNodes: '索引节点',
+  createdTime: '创建时间',
 };
 
 export default overviewTrans;
diff --git a/client/src/i18n/en/home.ts b/client/src/i18n/en/home.ts
@@ -0,0 +1,5 @@
+const homeTrans = {
+  welcome: 'Welcome to Milvus!',
+};
+
+export default homeTrans;
diff --git a/client/src/i18n/en/nav.ts b/client/src/i18n/en/nav.ts
@@ -1,5 +1,6 @@
 const navTrans = {
   overview: 'Overview',
+  welcome: 'Welcome to Milvus!',
   collection: 'Collection',
   console: 'Search Console',
   search: 'Vector Search',

diff --git a/client/src/i18n/en/overview.ts b/client/src/i18n/en/overview.ts
@@ -1,13 +1,13 @@
 const overviewTrans = {
   load: 'Loaded Collections',
-  all: 'All Collections',
+  all: 'Collections',
   data: 'Approx Entities',
   rows: '{{number}}',
   loading: 'Loading Collections',
   sysInfo: 'System Info',
   database: 'Database',
   milvusVersion: 'Milvus Version',
-  upTime: 'Root Coordinator Up Time',
+  upTime: 'Up Time',
   deployMode: 'Deploy Mode',
   databases: 'Databases',
   users: 'Users',
@@ -18,6 +18,7 @@ const overviewTrans = {
   dataNodes: 'Data Nodes',
   queryNodes: 'Query Nodes',
   indexNodes: 'Index Nodes',
+  createdTime: 'Created Time',
 };
 
 export default overviewTrans;
diff --git a/client/src/pages/databases/Databases.tsx b/client/src/pages/databases/Databases.tsx
@@ -13,6 +13,8 @@ import Query from '../query/Query';
 import Segments from '../segments/Segments';
 import { dataContext } from '@/context';
 import Collections from '../collections/Collections';
+import StatusIcon from '@/components/status/StatusIcon';
+import { ChildrenStatusType } from '@/components/status/Types';
 
 const useStyles = makeStyles((theme: Theme) => ({
   wrapper: {
@@ -97,7 +99,7 @@ const Databases = () => {
     <section className={`page-wrapper ${classes.wrapper}`}>
       <section className={classes.tree}>
         {loading ? (
-          `loading`
+          <StatusIcon type={ChildrenStatusType.CREATING} />
         ) : (
           <DatabaseTree
             key="collections"