1. adjust the navigation menu

2. optimized the layout

eventmesh-dashboard-view/src/App.tsx

@@ -2,32 +2,16 @@ import React from 'react'
 import { createTheme, ThemeProvider, CssBaseline } from '@mui/material'
 import AppRoutes from './routes/Routes'
 import GlobalStyles from '@mui/material/GlobalStyles'
+import { AppBackgroundColor, AppThemeConfig } from './app.const'
 
-const inputGlobalStyles = (
-  <GlobalStyles styles={{ backgroundColor: '#f9fafb' }} />
-)
 
 function App() {
-  const theme = React.useMemo(
-    () =>
-      createTheme({
-        palette: {
-          primary: {
-            main: '#43497a'
-          },
-          background: {}
-        },
-        typography: {
-          fontSize: 12
-        }
-      }),
-    []
-  ) // [prefersDarkMode]
+  const theme = React.useMemo(() => createTheme(AppThemeConfig), []) // [prefersDarkMode]
 
   return (
     <ThemeProvider theme={theme}>
       <CssBaseline />
-      {inputGlobalStyles}
+      <GlobalStyles styles={{ backgroundColor: AppBackgroundColor }} />
       <AppRoutes />
     </ThemeProvider>
   )

eventmesh-dashboard-view/src/app.const.ts

@@ -0,0 +1,9 @@
+export const AppSectionBoxShadow = '2px 2px 40px 2px rgba(0,0,0,.05)'
+export const AppBackgroundColor = '#f9fafb'
+export const AppThemeConfig = {
+  palette: {
+    primary: {
+      main: '#188aeb'
+    }
+  }
+}

eventmesh-dashboard-view/src/assets/icons/index.ts

@@ -1,27 +1,30 @@
-import HomeOutlinedIcon from '@mui/icons-material/HomeOutlined';
-import AddCircleOutlineOutlinedIcon from '@mui/icons-material/AddCircleOutlineOutlined';
-import FoundationIcon from '@mui/icons-material/Foundation';
-import RefreshIcon from '@mui/icons-material/Refresh';
+import HomeOutlinedIcon from '@mui/icons-material/HomeOutlined'
+import AddCircleOutlineOutlinedIcon from '@mui/icons-material/AddCircleOutlineOutlined'
+import FoundationIcon from '@mui/icons-material/Foundation'
+import RefreshIcon from '@mui/icons-material/Refresh'
+import PushPinIcon from '@mui/icons-material/PushPin'
+import PushPinOutlinedIcon from '@mui/icons-material/PushPinOutlined'
 
-import { ReactComponent as EventMeshLogoIcon } from './eventmesh-logo.svg';
-import { ReactComponent as EventMeshTopicIcon } from './eventmesh-topic.svg';
-import { ReactComponent as HomeIcon } from './home.svg';
-import { ReactComponent as RuntimeIcon } from './runtime.svg';
-import { ReactComponent as TopicIcon } from './topic.svg';
-import { ReactComponent as ConnectionIcon } from './connection.svg';
-import { ReactComponent as MessageIcon } from './message.svg';
-import { ReactComponent as SecurityIcon } from './security.svg';
-
-import { ReactComponent as SettingsIcon } from './settings.svg';
-import { ReactComponent as UsersIcon } from './users.svg';
-import { ReactComponent as LogsIcon } from './logs.svg';
+import { ReactComponent as EventMeshLogoIcon } from './eventmesh-logo.svg'
+import { ReactComponent as EventMeshTopicIcon } from './eventmesh-topic.svg'
+import { ReactComponent as HomeIcon } from './home.svg'
+import { ReactComponent as RuntimeIcon } from './runtime.svg'
+import { ReactComponent as TopicIcon } from './topic.svg'
+import { ReactComponent as ConnectionIcon } from './connection.svg'
+import { ReactComponent as MessageIcon } from './message.svg'
+import { ReactComponent as SecurityIcon } from './security.svg'
 
+import { ReactComponent as SettingsIcon } from './settings.svg'
+import { ReactComponent as UsersIcon } from './users.svg'
+import { ReactComponent as LogsIcon } from './logs.svg'
 
 export const Icons = {
   HomeOutlined: HomeOutlinedIcon,
   AddCircleOutlineOutlined: AddCircleOutlineOutlinedIcon,
   Foundation: FoundationIcon,
   Refresh: RefreshIcon,
+  PushPin: PushPinIcon,
+  PushPinOutlined: PushPinOutlinedIcon,
 
   EventMeshLogo: EventMeshLogoIcon,
   EventMeshTopic: EventMeshTopicIcon,
@@ -35,5 +38,5 @@ export const Icons = {
 
   Settings: SettingsIcon,
   Users: UsersIcon,
-  Logs: LogsIcon,
+  Logs: LogsIcon
 }

eventmesh-dashboard-view/src/components/Construction.tsx

@@ -11,6 +11,8 @@ const Construction = forwardRef<typeof Box, ConstructionProps>(
       <Box
         ref={ref}
         sx={{
+          width: 1,
+          height: 1,
           display: 'flex',
           justifyContent: 'center',
           alignItems: 'center',

eventmesh-dashboard-view/src/components/page/RootLayout.tsx

@@ -0,0 +1,27 @@
+import React, { forwardRef } from 'react'
+import { Box, Stack, StackProps } from '@mui/material'
+
+import { Outlet } from 'react-router-dom'
+import { grey } from '@mui/material/colors'
+import Navigation from '../../routes/navigation/Navigation'
+
+interface RootLayoutProps extends StackProps {}
+
+const RootLayout = forwardRef<typeof Box, RootLayoutProps>(
+  ({ children, ...props }, ref) => {
+    return (
+      <Stack
+        direction="row"
+        sx={{
+          position: 'relative',
+          height: '100vh',
+          bgcolor: grey[100]
+        }}>
+        <Navigation />
+        <Box sx={{ flexGrow: 1, pl: 4, overflow: 'hidden' }}>{children}</Box>
+      </Stack>
+    )
+  }
+)
+RootLayout.displayName = 'RootLayout'
+export default RootLayout

eventmesh-dashboard-view/src/index.tsx

@@ -1,5 +1,6 @@
 import React from 'react'
 import ReactDOM from 'react-dom/client'
+import  './styles/index.css'
 import App from './App'
 import reportWebVitals from './reportWebVitals'
 import { BrowserRouter } from 'react-router-dom'

eventmesh-dashboard-view/src/routes/Routes.tsx

@@ -1,38 +1,49 @@
 import React from 'react'
 import { useRoutes, Navigate } from 'react-router-dom'
-import RootLayout from './RootLayout'
 import Home from './home/Home'
-import Topic from './topic/Topic'
-import Runtime from './runtime/Runtime'
-import Connection from './connection/Connection'
-import Message from './message/Message'
-import Security from './security/Security'
+import ClusterOverView from './cluster/overview/Overview'
+import ClusterTopic from './cluster/topic/Topic'
+import ClusterRuntime from './cluster/runtime/Runtime'
+import ClusterConnection from './cluster/connection/Connection'
+import ClusterMessage from './cluster/message/Message'
+import ClusterSecurity from './cluster/security/Security'
 import Users from './users/Users'
 import Logs from './logs/Logs'
 import Settings from './settings/Settings'
+import Clusters from './cluster/Clusters'
 
 const AppRoutes = () => {
   return useRoutes([
     {
-      path: '/',
-      element: <RootLayout />,
+      path: '*',
+      element: <Navigate to="home" replace />
+    },
+    { path: 'home', element: <Home /> },
+    {
+      path: 'clusters',
+      element: <Clusters />,
       children: [
+        { path: 'clusters', element: <Clusters /> },
         {
-          path: '*',
-          element: <Navigate to="/home" replace />
-        },
-        { path: '', element: <Navigate to="/home" /> },
-        { path: 'home', element: <Home /> },
-        { path: 'runtime', element: <Runtime /> },
-        { path: 'topic', element: <Topic /> },
-        { path: 'connection', element: <Connection /> },
-        { path: 'message', element: <Message /> },
-        { path: 'security', element: <Security /> },
-        { path: 'settings', element: <Settings /> },
-        { path: 'users', element: <Users /> },
-        { path: 'logs', element: <Logs /> }
+          path: ':clusterId',
+          children: [
+            {
+              path: '*',
+              element: <Navigate to="home" replace />
+            },
+            { path: 'overview', element: <ClusterOverView /> },
+            { path: 'runtime', element: <ClusterRuntime /> },
+            { path: 'topic', element: <ClusterTopic /> },
+            { path: 'connection', element: <ClusterConnection /> },
+            { path: 'message', element: <ClusterMessage /> },
+            { path: 'security', element: <ClusterSecurity /> }
+          ]
+        }
       ]
-    }
+    },
+    { path: 'settings', element: <Settings /> },
+    { path: 'users', element: <Users /> },
+    { path: 'logs', element: <Logs /> }
   ])
 }
 

eventmesh-dashboard-view/src/routes/cluster/Clusters.tsx

@@ -0,0 +1,12 @@
+import React, { forwardRef } from 'react'
+import { Box, BoxProps } from '@mui/material'
+import RootLayout from '../../components/page/RootLayout'
+
+interface ClustersProps extends BoxProps {}
+
+const Clusters = forwardRef<typeof Box, ClustersProps>(({ ...props }, ref) => {
+  return <RootLayout>Clusters</RootLayout>
+})
+
+Clusters.displayName = 'Clusters'
+export default Clusters

eventmesh-dashboard-view/src/routes/connection/Connection.tsx → eventmesh-dashboard-view/src/routes/cluster/connection/Connection.tsx

@@ -1,7 +1,7 @@
 import React, { forwardRef } from 'react'
 import { Box, BoxProps } from '@mui/material'
-import Page from '../../components/Page'
-import Construction from '../../components/Construction'
+import Page from '../../../components/page/Layout'
+import Construction from '../../../components/Construction'
 
 interface ConnectionProps extends BoxProps {}
 

eventmesh-dashboard-view/src/routes/message/Message.tsx → eventmesh-dashboard-view/src/routes/cluster/message/Message.tsx

@@ -1,7 +1,7 @@
 import React, { forwardRef } from 'react'
 import { Box, BoxProps } from '@mui/material'
-import Page from '../../components/Page'
-import Construction from '../../components/Construction'
+import Page from '../../../components/page/Layout'
+import Construction from '../../../components/Construction'
 
 interface MessageProps extends BoxProps {}
 

eventmesh-dashboard-view/src/routes/cluster/overview/Overview.tsx

@@ -0,0 +1,17 @@
+import React, { forwardRef } from 'react'
+import { Box, BoxProps } from '@mui/material'
+import Construction from '../../../components/Construction'
+import RootLayout from '../../../components/page/RootLayout'
+
+interface HomeProps extends BoxProps {}
+
+const Home = forwardRef<typeof Box, HomeProps>(({ ...props }, ref) => {
+  return (
+    <RootLayout>
+      <Construction />
+    </RootLayout>
+  )
+})
+
+Home.displayName = 'Home'
+export default Home

eventmesh-dashboard-view/src/routes/runtime/Runtime.tsx → eventmesh-dashboard-view/src/routes/cluster/runtime/Runtime.tsx

@@ -1,7 +1,7 @@
 import React, { forwardRef } from 'react'
 import { Box, BoxProps } from '@mui/material'
-import Page from '../../components/Page'
-import Construction from '../../components/Construction'
+import Page from '../../../components/page/Layout'
+import Construction from '../../../components/Construction'
 
 interface RuntimeProps extends BoxProps {}
 

eventmesh-dashboard-view/src/routes/security/Security.tsx → eventmesh-dashboard-view/src/routes/cluster/security/Security.tsx

@@ -1,7 +1,7 @@
 import React, { forwardRef } from 'react'
 import { Box, BoxProps } from '@mui/material'
-import Page from '../../components/Page'
-import Construction from '../../components/Construction'
+import Page from '../../../components/page/Layout'
+import Construction from '../../../components/Construction'
 
 interface SecurityProps extends BoxProps {}
 

eventmesh-dashboard-view/src/routes/topic/Topic.tsx → eventmesh-dashboard-view/src/routes/cluster/topic/Topic.tsx

@@ -1,6 +1,6 @@
-import React, { forwardRef, useState } from 'react'
-import { Box, BoxProps, Paper, Stack } from '@mui/material'
-import Page from '../../components/Page'
+import React, { forwardRef } from 'react'
+import { Box, BoxProps, Stack } from '@mui/material'
+import Page from '../../../components/page/Layout'
 import Stats from './stats/Stats'
 import TopicList from './topic-list/TopicList'
 
@@ -9,7 +9,7 @@ interface TopicProps extends BoxProps {}
 const Topic = forwardRef<typeof Box, TopicProps>(({ ...props }, ref) => {
   return (
     <Page>
-      <Stack sx={{ width: 1, height: 1, p: 2 }} spacing={3}>
+      <Stack sx={{ width: 1, height: 1, p: 2 }} spacing={2}>
         <Stats />
         <TopicList />
       </Stack>

eventmesh-dashboard-view/src/routes/topic/stats/Stats.tsx → eventmesh-dashboard-view/src/routes/cluster/topic/stats/Stats.tsx

@@ -2,12 +2,12 @@ import React, { forwardRef, useState, useEffect } from 'react'
 import { Stack, StackProps, Select, MenuItem, Grid } from '@mui/material'
 import TopicCount from './TopicCount'
 import AbnormalTopicCount from './AbnormalTopicCount'
-import { Icons } from '../../../assets/icons'
+import { Icons } from '../../../../assets/icons'
 import StatsChart from './StatsChart'
 import { grey } from '@mui/material/colors'
 
-import { useAppSelector } from '../../../store'
-import { fetchResourceStats, fetchTopicStats } from '../../../service/topics'
+import { useAppSelector } from '../../../../store'
+import { fetchTopicStats } from '../../../../service/topics'
 import { TopicStats } from './topic-stats.types'
 
 enum TimeOptionEnum {

eventmesh-dashboard-view/src/routes/topic/stats/StatsChart.tsx → eventmesh-dashboard-view/src/routes/cluster/topic/stats/StatsChart.tsx

@@ -1,6 +1,6 @@
 import React, { forwardRef, useRef, useEffect } from 'react'
 import { Box, BoxProps, Paper } from '@mui/material'
-import echarts from '../../../utils/chart'
+import echarts from '../../../../utils/chart'
 import { grey } from '@mui/material/colors'
 
 interface StatsChartProps extends BoxProps {

eventmesh-dashboard-view/src/routes/cluster/topic/stats/stats.types.ts

@@ -0,0 +1,4 @@
+export type ResourceStats = {
+  connectionsNum: number
+  topicsNum: number
+}