init topo0

client/src/components/icons/Icons.tsx

@@ -73,6 +73,9 @@ const icons: { [x in IconsType]: (props?: any) => React.ReactElement } = {
   navSearch: (props = {}) => (
     <SvgIcon viewBox="0 0 20 20" component={VectorSearchIcon} {...props} />
   ),
+  navSystem: (props = {}) => (
+    <SvgIcon viewBox="0 0 20 20" component={VectorSearchIcon} {...props} />
+  ),
   info: (props = {}) => (
     <SvgIcon viewBox="0 0 16 16" component={InfoIcon} {...props} />
   ),

client/src/components/icons/Types.ts

@@ -16,6 +16,7 @@ export type IconsType =
   | 'navCollection'
   | 'navConsole'
   | 'navSearch'
+  | 'navSystem'
   | 'expandLess'
   | 'expandMore'
   | 'back'

client/src/components/layout/Layout.tsx

@@ -55,6 +55,10 @@ const Layout = (props: any) => {
       return navTrans('search');
     }
 
+    if (location.pathname.includes('system')) {
+      return navTrans('system');
+    }
+
     return navTrans('overview');
   }, [location, navTrans]);
 
@@ -76,6 +80,11 @@ const Layout = (props: any) => {
       iconActiveClass: 'activeSearchIcon',
       iconNormalClass: 'normalSearchIcon',
     },
+    {
+      icon: icons.navSystem,
+      label: navTrans('system'),
+      onClick: () => history.push('/system'),
+    },
   ];
 
   return (

client/src/hooks/Navigation.ts

@@ -47,6 +47,14 @@ export const useNavigationHook = (
         setNavInfo(navInfo);
         break;
       }
+      case ALL_ROUTER_TYPES.SYSTEM: {
+        const navInfo: NavInfo = {
+          navTitle: navTrans('system'),
+          backPath: '',
+        };
+        setNavInfo(navInfo);
+        break;
+      }
       default:
         break;
     }

client/src/i18n/cn/nav.ts

@@ -3,6 +3,7 @@ const navTrans = {
   collection: 'Collection',
   console: 'Search Console',
   search: 'Vector Search',
+  system: 'System View',
 };
 
 export default navTrans;

client/src/i18n/en/nav.ts

@@ -3,6 +3,7 @@ const navTrans = {
   collection: 'Collection',
   console: 'Search Console',
   search: 'Vector Search',
+  system: 'System View',
 };
 
 export default navTrans;

client/src/pages/system/SystemView.tsx

@@ -0,0 +1,15 @@
+import { useNavigationHook } from '../../hooks/Navigation';
+import { ALL_ROUTER_TYPES } from '../../router/Types';
+import Topo from './Topology';
+
+const SystemView = () => {
+  useNavigationHook(ALL_ROUTER_TYPES.SYSTEM);
+
+  return (
+    <div>
+      <Topo />
+    </div>
+  );
+};
+
+export default SystemView;

client/src/router/Config.ts

@@ -3,6 +3,7 @@ import Collections from '../pages/collections/Collections';
 import Connect from '../pages/connect/Connect';
 import Overview from '../pages/overview/Overview';
 import VectorSearch from '../pages/seach/VectorSearch';
+import SystemView from '../pages/system/SystemView';
 import { RouterConfigType } from './Types';
 
 const RouterConfig: RouterConfigType[] = [
@@ -31,6 +32,11 @@ const RouterConfig: RouterConfigType[] = [
     component: VectorSearch,
     auth: true,
   },
+  {
+    path: '/system',
+    component: SystemView,
+    auth: true,
+  },
 ];
 
 export default RouterConfig;

client/src/router/Types.ts

@@ -7,6 +7,8 @@ export enum ALL_ROUTER_TYPES {
   COLLECTION_DETAIL = 'collection_detail',
   // 'search'
   SEARCH = 'search',
+  // 'system'
+  SYSTEM = 'system'
 }
 
 export type NavInfo = {