Skip to content

Commit

Permalink
Adjust navigation menu (#149)
Browse files Browse the repository at this point in the history
* 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 <[email protected]>
  • Loading branch information
SLSJL and SUN authored Jun 3, 2024
1 parent 8b0e4e5 commit 32fdc70
Show file tree
Hide file tree
Showing 47 changed files with 2,827 additions and 1,579 deletions.
6 changes: 1 addition & 5 deletions eventmesh-dashboard-view/.env.development
Original file line number Diff line number Diff line change
@@ -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=
7 changes: 1 addition & 6 deletions eventmesh-dashboard-view/.env.production
Original file line number Diff line number Diff line change
@@ -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
3 changes: 3 additions & 0 deletions eventmesh-dashboard-view/.eslintrc.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
{
// "extends": ["plugin:react/recommended"]
}
1 change: 1 addition & 0 deletions eventmesh-dashboard-view/.prettierrc.json
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@
"trailingComma": "none",
"tabWidth": 2,
"singleQuote": true,
"printWidth": 80,
"jsxBracketSameLine": true,
"semi": false
}
2,777 changes: 1,433 additions & 1,344 deletions eventmesh-dashboard-view/package-lock.json

Large diffs are not rendered by default.

8 changes: 7 additions & 1 deletion eventmesh-dashboard-view/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand All @@ -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": {
Expand All @@ -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"
}
}
27 changes: 3 additions & 24 deletions eventmesh-dashboard-view/src/App.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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>
)
Expand Down
28 changes: 28 additions & 0 deletions eventmesh-dashboard-view/src/app.const.ts
Original file line number Diff line number Diff line change
@@ -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'
}
}
}
41 changes: 22 additions & 19 deletions eventmesh-dashboard-view/src/assets/icons/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -54,5 +57,5 @@ export const Icons = {

Settings: SettingsIcon,
Users: UsersIcon,
Logs: LogsIcon,
Logs: LogsIcon
}
2 changes: 2 additions & 0 deletions eventmesh-dashboard-view/src/components/Construction.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,8 @@ const Construction = forwardRef<typeof Box, ConstructionProps>(
<Box
ref={ref}
sx={{
width: 1,
height: 1,
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
Expand Down
46 changes: 46 additions & 0 deletions eventmesh-dashboard-view/src/components/page/RootLayout.tsx
Original file line number Diff line number Diff line change
@@ -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
7 changes: 6 additions & 1 deletion eventmesh-dashboard-view/src/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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>
)
Expand Down
55 changes: 33 additions & 22 deletions eventmesh-dashboard-view/src/routes/Routes.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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 /> }
])
}

Expand Down
31 changes: 31 additions & 0 deletions eventmesh-dashboard-view/src/routes/cluster/Clusters.tsx
Original file line number Diff line number Diff line change
@@ -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
Original file line number Diff line number Diff line change
Expand Up @@ -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 {}

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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 {}

Expand Down
Loading

0 comments on commit 32fdc70

Please sign in to comment.