adjust project structure to adopt new requirement change

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

@@ -18,6 +18,7 @@
  */
 
 export const AppSectionBoxShadow = '2px 2px 40px 2px rgba(0,0,0,.05)'
+export const AppSectionBoxShadow2 = '2px 2px 5px 1px rgba(0,0,0,.05)'
 export const AppBackgroundColor = '#f9fafb'
 export const AppThemeConfig = {
   palette: {

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

@@ -23,6 +23,8 @@ 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 ListIcon from '@mui/icons-material/List';
+import StackedBarChartIcon from '@mui/icons-material/StackedBarChart';
 
 import { ReactComponent as EventMeshLogoIcon } from './eventmesh-logo.svg'
 import { ReactComponent as EventMeshTopicIcon } from './eventmesh-topic.svg'
@@ -49,6 +51,8 @@ export const Icons = {
   Refresh: RefreshIcon,
   PushPin: PushPinIcon,
   PushPinOutlined: PushPinOutlinedIcon,
+  List: ListIcon,
+  StackedBarChart: StackedBarChartIcon,
 
   EventMeshLogo: EventMeshLogoIcon,
   EventMeshTopic: EventMeshTopicIcon,

eventmesh-dashboard-view/src/routes/eventmesh/clusters/topic/Topic.tsx → eventmesh-dashboard-view/src/components/RounderPaper.tsx

@@ -18,23 +18,16 @@
  */
 
 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'
+import { Paper, PaperProps } from '@mui/material'
+import { AppSectionBoxShadow } from '../app.const'
+import styled from '@emotion/styled'
 
-interface TopicProps extends BoxProps {}
+interface RounderPaperProps extends PaperProps {}
 
-const Topic = forwardRef<typeof Box, TopicProps>(({ ...props }, ref) => {
-  return (
-    <Page>
-      <Stack sx={{ width: 1, height: 1, p: 2 }} spacing={2}>
-        <Stats />
-        <TopicList />
-      </Stack>
-    </Page>
-  )
-})
+const RounderPaper = styled(Paper)(() => ({
+  borderRadius: 16,
+  boxShadow: AppSectionBoxShadow
+}))
 
-Topic.displayName = 'Topic'
-export default Topic
+RounderPaper.displayName = 'RounderPaper'
+export default RounderPaper

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

@@ -23,16 +23,14 @@ import { Box, BoxProps } from '@mui/material'
 interface PageProps extends BoxProps {}
 
 const Page = forwardRef<typeof Box, PageProps>(
-  ({ children, ...props }, ref) => {
+  ({ sx, children, ...props }, ref) => {
     return (
       <Box
         ref={ref}
         sx={{
           width: 1,
           height: 1,
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'center'
+          ...sx
         }}>
         {children}
       </Box>

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

@@ -36,7 +36,7 @@ const RootLayout = forwardRef<typeof Box, RootLayoutProps>(
           bgcolor: grey[100]
         }}>
         <Navigation />
-        <Box sx={{ flexGrow: 1, pl: 4, overflow: 'hidden' }}>{children}</Box>
+        <Box sx={{ flexGrow: 1, overflow: 'hidden' }}>{children}</Box>
       </Stack>
     )
   }

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

@@ -20,54 +20,46 @@
 import React from 'react'
 import { useRoutes, Navigate } from 'react-router-dom'
 import Home from './home/Home'
-import ClusterOverView from './eventmesh/clusters/overview/Overview'
-import ClusterTopic from './eventmesh/clusters/topic/Topic'
-import ClusterRuntime from './eventmesh/clusters/runtime/Runtime'
-import ClusterConnection from './eventmesh/clusters/connection/Connection'
-import ClusterMessage from './eventmesh/clusters/message/Message'
-import ClusterSecurity from './eventmesh/clusters/security/Security'
+import ClusterOverView from './eventmesh/cluster/overview/Overview'
+import ClusterTopic from './eventmesh/cluster/topic/Topic'
+import ClusterRuntime from './eventmesh/cluster/runtime/Runtime'
+import ClusterConnection from './eventmesh/cluster/connection/Connection'
+import ClusterMessage from './eventmesh/cluster/message/Message'
+import ClusterSecurity from './eventmesh/cluster/security/Security'
 import User from './user/User'
 import Settings from './settings/Settings'
-import Clusters from './eventmesh/clusters/Clusters'
 import K8s from './k8s/K8s'
 import RocketMq from './rocket-mq/RocketMq'
 import Connection from './connection/Connection'
 import EventMesh from './eventmesh/Eventmesh'
+import Clusters from './eventmesh/clusters/Clusters'
 
 const AppRoutes = () => {
   return useRoutes([
     {
       path: '*',
       element: <Navigate to="home" replace />
     },
+    { path: '/', element: <Home /> },
     { path: 'home', element: <Home /> },
     {
-      path: 'eventmesh',
+      path: 'eventmesh-cluster',
       element: <EventMesh />,
       children: [
-        {
-          path: 'clusters',
-          element: <Clusters />,
-          children: [
-            {
-              path: '*',
-              element: <Navigate to="home" replace />
-            },
-            { path: ':clusterId/overview', element: <ClusterOverView /> },
-            { path: ':clusterId/runtime', element: <ClusterRuntime /> },
-            { path: ':clusterId/topic', element: <ClusterTopic /> },
-            { path: ':clusterId/connection', element: <ClusterConnection /> },
-            { path: ':clusterId/message', element: <ClusterMessage /> },
-            { path: ':clusterId/security', element: <ClusterSecurity /> }
-          ]
-        }
+        { path: 'list', element: <Clusters /> },
+        { path: ':clusterId/overview', element: <ClusterOverView /> },
+        { path: ':clusterId/runtime', element: <ClusterRuntime /> },
+        { path: ':clusterId/topic', element: <ClusterTopic /> },
+        { path: ':clusterId/connection', element: <ClusterConnection /> },
+        { path: ':clusterId/message', element: <ClusterMessage /> },
+        { path: ':clusterId/security', element: <ClusterSecurity /> }
       ]
     },
     { path: 'connection', element: <Connection /> },
     { path: 'rocket-mq', element: <RocketMq /> },
     { path: 'k8s', element: <K8s /> },
     { path: 'settings', element: <Settings /> },
-    { path: 'user', element: <User /> },
+    { path: 'user', element: <User /> }
   ])
 }
 

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

@@ -19,23 +19,34 @@
 
 import React, { forwardRef } from 'react'
 import { Box, Stack, StackProps } from '@mui/material'
-import Navigation from '../../routes/navigation/Navigation'
-import { grey } from '@mui/material/colors'
 
 interface EventMeshProps extends StackProps {}
-import { Outlet } from 'react-router-dom'
 import RootLayout from '../../components/page/RootLayout'
-import Construction from '../../components/Construction'
+import Page from '../../components/page/Layout'
+import { Outlet, matchPath, useLocation } from 'react-router-dom'
+import ClusterMenu from './cluster/cluster-menu/ClusterMenu'
 
-const EventMesh = forwardRef<typeof Stack, EventMeshProps>(
+const Eventmesh = forwardRef<typeof Stack, EventMeshProps>(
   ({ children, ...props }, ref) => {
+    const { pathname } = useLocation()
+
+    const isEventmeshClusterPath =
+      !!matchPath('/eventmesh-cluster/*', pathname) &&
+      !['/eventmesh-cluster/list', '/eventmesh-cluster/list/'].includes(
+        pathname
+      )
+
     return (
       <RootLayout>
-       <Construction title="Eventmesh" />
+        <Page
+          sx={{ height: 1, p: 2, display: 'flex', flexDirection: 'column' }}>
+          {isEventmeshClusterPath && <ClusterMenu />}
+          <Outlet />
+        </Page>
       </RootLayout>
     )
   }
 )
 
-EventMesh.displayName = 'EventMesh'
-export default EventMesh
+Eventmesh.displayName = 'Eventmesh'
+export default Eventmesh

eventmesh-dashboard-view/src/routes/eventmesh/cluster/cluster-menu/ClusterMenu.tsx

@@ -0,0 +1,107 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import React, { forwardRef } from 'react'
+import {
+  Stack,
+  StackProps,
+  Fade,
+  Typography,
+  Button,
+  Breadcrumbs,
+  Link,
+  SxProps
+} from '@mui/material'
+import { Icons } from '../../../../assets/icons'
+import { styled } from '@mui/material/styles'
+import { useNavigate, useParams } from 'react-router-dom'
+
+interface ClusterMenuProps extends StackProps {}
+
+const PageMenuButton = styled(Button)({
+  boxShadow: 'none',
+  width: '100%',
+  paddingLeft: 15,
+  paddingRight: 15,
+  paddingTop: 8,
+  paddingBottom: 8,
+  borderRadius: 8,
+  textTransform: 'none',
+  color: '#43497a',
+
+  '&.active': {
+    boxShadow: 'none',
+    backgroundColor: '#17c8eb',
+    color: '#fff'
+  }
+})
+
+const ClusterMenu = forwardRef<typeof Stack, ClusterMenuProps>(
+  ({ ...props }, ref) => {
+    const navigate = useNavigate()
+    const { clusterId } = useParams()
+
+    return (
+      <Stack
+        spacing={2}
+        direction="row"
+        alignItems="center"
+        justifyContent={'space-between'}
+        sx={{ bgcolor: '#fafafa', pl: 1, pr: 1 }}>
+        <Breadcrumbs>
+          <Link
+            underline="hover"
+            color="inherit"
+            href="/eventmesh-cluster/list">
+            <Stack direction="row" spacing={1} alignItems="center">
+              <Icons.List fontSize="small" color="inherit"></Icons.List>
+              <Typography fontSize="inherit">Cluster List</Typography>
+            </Stack>
+          </Link>
+          <Typography color="text.primary">1</Typography>
+        </Breadcrumbs>
+
+        <Stack direction={'row'} spacing={1}>
+          <PageMenuButton
+            className="active"
+            onClick={() => navigate(`${clusterId}/overview`)}>
+            Overview
+          </PageMenuButton>
+          <PageMenuButton
+            onClick={() => {
+              navigate(`${clusterId}/topic`)
+            }}>
+            Topic
+          </PageMenuButton>
+          <PageMenuButton>Message</PageMenuButton>
+          <PageMenuButton>Meta</PageMenuButton>
+          <PageMenuButton>Runtime</PageMenuButton>
+          <PageMenuButton>Storage</PageMenuButton>
+          <PageMenuButton>User</PageMenuButton>
+          <PageMenuButton>Log</PageMenuButton>
+          <PageMenuButton>Setting</PageMenuButton>
+          <PageMenuButton>Config</PageMenuButton>
+        </Stack>
+      </Stack>
+    )
+  }
+)
+
+ClusterMenu.displayName = 'ClusterMenu'
+export default ClusterMenu

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

@@ -26,9 +26,9 @@ interface HomeProps extends BoxProps {}
 
 const Home = forwardRef<typeof Box, HomeProps>(({ ...props }, ref) => {
   return (
-    <RootLayout>
-      <Construction />
-    </RootLayout>
+    <Box sx={{ flexGrow: 1, height: 1 }}>
+      <Construction title="Cluster Overview" />
+    </Box>
   )
 })
 

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

@@ -0,0 +1,64 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import React, { forwardRef } from 'react'
+import { Box, BoxProps, Button, Stack, Tab, Tabs } from '@mui/material'
+import Page from '../../../../components/page/Layout'
+import Stats from './stats/Stats'
+import TopicList from './topic-list/TopicList'
+import { styled } from '@mui/material/styles'
+
+interface TopicProps extends BoxProps {}
+
+const PagSubMenuButton = styled(Button)({
+  paddingLeft: 8,
+  paddingRight: 8,
+  paddingTop: 4,
+  paddingBottom: 4,
+  borderRadius: 8,
+  textTransform: 'none',
+  color: '#43497a',
+  boxShadow: 'none',
+  fontSize: 'small',
+
+  '&.active': {
+    backgroundColor: '#17c8eb',
+    color: '#fff',
+    boxShadow: '2px 2px 20px 5px rgba(0,0,0,0.05)'
+  }
+})
+
+const Topic = forwardRef<typeof Box, TopicProps>(({ ...props }, ref) => {
+  return (
+    <Page sx={{ height: 1, display: 'flex', flexDirection: 'column' }}>
+      <Stack direction="row" sx={{ pt: 1, pb: 1 }} spacing={2}>
+        <PagSubMenuButton className="active">Overview</PagSubMenuButton>
+        <PagSubMenuButton> Topic List</PagSubMenuButton>
+      </Stack>
+
+      <Stack sx={{ flexGrow: 1 }} spacing={2}>
+        <Stats />
+        <TopicList />
+      </Stack>
+    </Page>
+  )
+})
+
+Topic.displayName = 'Topic'
+export default Topic