Adjust navigation menu (apache#149)

* added view code

* added navigation interaction

* added empty pages

* add topic statistics ui

* complete topic page style

* update the UI style

* complete basic features in topic list

* 1. adjust the navigation menu
2. optimized the layout

* added license header

---------

Co-authored-by: SUN <350916525@qq.com>

eventmesh-dashboard-view/.env.development

@@ -1,5 +1 @@
-REACT_APP_BASE_ROUTE=tree
-
-REACT_APP_SERVICE_HOST=http://127.0.0.1:9101
-REACT_APP_VIDEO_PATH=http://127.0.0.1:3000/tree/videos
-REACT_APP_PUBLIC_KEY=-----BEGIN PUBLIC KEY-----MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEAwuCSbiRvH2FAMKoC/3ETvbLdDkDSDpkjL/h40YEMsTyacvurcAZ/EPpjGR2rTgGDiOQbItuciMoKpq7jRkg5WS4xs2VxAAEBdWgB4Cp4/LAjuN4LF6qAbCxINIKS7TiyWSu9jCIH4C5nmeptZLrrUUwICIFjRikWktFWGTN2QsXA0MTOnCql2gL/kxKSLFpq/BHyD2mpdIMtEGfiHAJs8R02KmgyQSwCje3m3oNM4GXodqt5dQtO7EI3KcITmnWKFY4RZFLutbG4GZQ0F8XwbpKlQCzu7QFn4hQHjbi7ivRagJWGwRr3ZiROpWhm450diiYbqgFS5IHb6KJDUlR2LwIDAQAB-----END PUBLIC KEY-----
+REACT_APP_SERVICE_HOST=

eventmesh-dashboard-view/.env.production

@@ -1,6 +1 @@
-REACT_APP_BASE_ROUTE=tree
-
-REACT_APP_SERVICE_HOST=http://beta.leafiot.tech/service
-
-REACT_APP_PUBLIC_KEY=-----BEGIN PUBLIC KEY-----MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEAwuCSbiRvH2FAMKoC/3ETvbLdDkDSDpkjL/h40YEMsTyacvurcAZ/EPpjGR2rTgGDiOQbItuciMoKpq7jRkg5WS4xs2VxAAEBdWgB4Cp4/LAjuN4LF6qAbCxINIKS7TiyWSu9jCIH4C5nmeptZLrrUUwICIFjRikWktFWGTN2QsXA0MTOnCql2gL/kxKSLFpq/BHyD2mpdIMtEGfiHAJs8R02KmgyQSwCje3m3oNM4GXodqt5dQtO7EI3KcITmnWKFY4RZFLutbG4GZQ0F8XwbpKlQCzu7QFn4hQHjbi7ivRagJWGwRr3ZiROpWhm450diiYbqgFS5IHb6KJDUlR2LwIDAQAB-----END PUBLIC KEY-----
-˜
+REACT_APP_SERVICE_HOST=http://az1.pil0txia.com:9898

eventmesh-dashboard-view/.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  // "extends": ["plugin:react/recommended"] 
+}

eventmesh-dashboard-view/.prettierrc.json

@@ -2,6 +2,7 @@
   "trailingComma": "none",
   "tabWidth": 2,
   "singleQuote": true,
+  "printWidth": 80,
   "jsxBracketSameLine": true,
   "semi": false
 }

eventmesh-dashboard-view/package.json

@@ -8,6 +8,7 @@
     "@mui/icons-material": "^5.15.12",
     "@mui/material": "^5.15.12",
     "@mui/x-data-grid": "^6.19.6",
+    "@reduxjs/toolkit": "^2.2.3",
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
@@ -20,10 +21,11 @@
     "match-sorter": "^6.3.4",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-redux": "^9.1.0",
     "react-router-dom": "^6.22.2",
     "react-scripts": "5.0.1",
     "sort-by": "^1.2.0",
-    "typescript": "^4.9.5",
+    "typescript": "^5.4.5",
     "web-vitals": "^2.1.4"
   },
   "scripts": {
@@ -49,5 +51,9 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "proxy": "http://az1.pil0txia.com:9898",
+  "devDependencies": {
+    "@babel/plugin-proposal-private-property-in-object": "^7.21.11"
   }
 }

eventmesh-dashboard-view/src/App.tsx

@@ -21,37 +21,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,28 @@
+/*
+ * 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.
+ */
+
+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

@@ -17,30 +17,33 @@
  * under the License.
  */
 
-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 { 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 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'
 
 export const Icons = {
   HomeOutlined: HomeOutlinedIcon,
   AddCircleOutlineOutlined: AddCircleOutlineOutlinedIcon,
   Foundation: FoundationIcon,
   Refresh: RefreshIcon,
+  PushPin: PushPinIcon,
+  PushPinOutlined: PushPinOutlinedIcon,
 
   EventMeshLogo: EventMeshLogoIcon,
   EventMeshTopic: EventMeshTopicIcon,
@@ -54,5 +57,5 @@ export const Icons = {
 
   Settings: SettingsIcon,
   Users: UsersIcon,
-  Logs: LogsIcon,
+  Logs: LogsIcon
 }

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

@@ -30,6 +30,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,46 @@
+/*
+ * 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, 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

@@ -19,15 +19,20 @@
 
 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'
+import { store } from './store'
+import { Provider } from 'react-redux'
 
 const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement)
 root.render(
   <React.StrictMode>
     <BrowserRouter>
-      <App />
+      <Provider store={store}>
+        <App />
+      </Provider>
     </BrowserRouter>
   </React.StrictMode>
 )

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

@@ -19,39 +19,50 @@
 
 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,31 @@
+/*
+ * 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 } 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

@@ -19,8 +19,8 @@
 
 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

@@ -19,8 +19,8 @@
 
 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 {}