This is an automated email from the ASF dual-hosted git repository.
xiatian pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/eventmesh-dashboard.git
The following commit(s) were added to refs/heads/main by this push:
new 103eb06 [ISSUE #155] Navigation Adjustment (#177)
103eb06 is described below
commit 103eb06e1b949f33c1723244d999680338d8aa6d
Author: SUN <[email protected]>
AuthorDate: Wed Jul 17 20:33:44 2024 +0800
[ISSUE #155] Navigation Adjustment (#177)
* updated navigation and routes
* ad new files
* adjust project structure to adopt new requirement change
---------
Co-authored-by: SUN <[email protected]>
---
eventmesh-dashboard-view/src/app.const.ts | 1 +
.../src/assets/icons/clusters.svg | 8 +
.../src/assets/icons/connection.svg | 2 +-
.../src/assets/icons/evetmesh-icon.svg | 8 +
eventmesh-dashboard-view/src/assets/icons/index.ts | 14 ++
eventmesh-dashboard-view/src/assets/icons/k8s.svg | 6 +
eventmesh-dashboard-view/src/assets/icons/meta.svg | 10 ++
.../src/assets/icons/rocketmq.svg | 8 +
.../src/components/Construction.tsx | 10 +-
.../Clusters.tsx => components/RounderPaper.tsx} | 18 +-
.../src/components/page/Layout.tsx | 6 +-
.../src/components/page/RootLayout.tsx | 3 +-
eventmesh-dashboard-view/src/routes/RootLayout.tsx | 44 -----
eventmesh-dashboard-view/src/routes/Routes.tsx | 55 +++---
.../Clusters.tsx => connection/Connection.tsx} | 19 ++-
.../eventmesh/Eventmesh.tsx} | 42 +++--
.../eventmesh/cluster/cluster-menu/ClusterMenu.tsx | 107 ++++++++++++
.../cluster/connection/Connection.tsx | 4 +-
.../{ => eventmesh}/cluster/message/Message.tsx | 4 +-
.../{ => eventmesh}/cluster/overview/Overview.tsx | 10 +-
.../{ => eventmesh}/cluster/runtime/Runtime.tsx | 4 +-
.../{ => eventmesh}/cluster/security/Security.tsx | 4 +-
.../routes/{ => eventmesh}/cluster/topic/Topic.tsx | 32 +++-
.../cluster/topic/stats/AbnormalTopicCount.tsx | 0
.../{ => eventmesh}/cluster/topic/stats/Stats.tsx | 6 +-
.../cluster/topic/stats/StatsChart.tsx | 2 +-
.../cluster/topic/stats/TopicCount.tsx | 0
.../cluster/topic/stats/stats.types.ts | 0
.../cluster/topic/stats/topic-stats.types.ts | 0
.../cluster/topic/topic-list/TopicList.tsx | 7 +-
.../{ => eventmesh}/cluster/topic/topic.const.ts | 0
.../{ => eventmesh}/cluster/topic/topic.types.ts | 0
.../src/routes/eventmesh/clusters/ClusterList.tsx | 189 +++++++++++++++++++++
.../clusters/ClusterStat.tsx} | 26 +--
.../eventmesh/clusters/Clusters.tsx} | 27 ++-
.../clusters/cluster.type.ts} | 13 +-
eventmesh-dashboard-view/src/routes/home/Home.tsx | 2 +-
.../src/routes/{elogs/Logs.tsx => k8s/K8s.tsx} | 26 +--
.../src/routes/navigation/Navigation.tsx | 93 ++++------
.../src/routes/navigation/NavigationItem.tsx | 10 +-
.../src/routes/navigation/navigation.types.ts | 21 ++-
.../{home/Home.tsx => rocket-mq/RocketMq.tsx} | 25 +--
.../src/routes/topic/topic-list/TopicList.tsx | 115 -------------
.../src/routes/{users/Users.tsx => user/User.tsx} | 6 +-
eventmesh-dashboard-view/src/service/topics.ts | 6 +-
45 files changed, 597 insertions(+), 396 deletions(-)
diff --git a/eventmesh-dashboard-view/src/app.const.ts
b/eventmesh-dashboard-view/src/app.const.ts
index 229ee9f..18f3f86 100644
--- a/eventmesh-dashboard-view/src/app.const.ts
+++ b/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: {
diff --git a/eventmesh-dashboard-view/src/assets/icons/clusters.svg
b/eventmesh-dashboard-view/src/assets/icons/clusters.svg
new file mode 100644
index 0000000..373318b
--- /dev/null
+++ b/eventmesh-dashboard-view/src/assets/icons/clusters.svg
@@ -0,0 +1,8 @@
+<svg width="21.0000072px" height="20.9998417px" viewBox="0 0 21.0000072
20.9998417" version="1.1"
+ xmlns="http://www.w3.org/2000/svg";
xmlns:xlink="http://www.w3.org/1999/xlink";>
+ <g id="Icons" stroke="none" stroke-width="1" fill="none"
fill-rule="evenodd">
+ <path
+ d="M5.3865,10.0356965 L5.5215,10.1031965 L9.162,12.2256965
C9.51231718,12.4313311 9.74563452,12.7896399 9.792,13.1931965 L9.801,13.3461965
L9.801,17.5836965 C9.801,17.9946965 9.6075,18.3786965 9.288,18.6186965
L9.162,18.7026965 L5.5185,20.8281965 C5.17363518,21.0294261
4.75342999,21.0539473 4.3875,20.8941965 L4.2525,20.8266965 L0.6345,18.7041965
C0.285722763,18.4981873 0.0536461775,18.1406339 0.0075,17.7381965 L0,17.5866965
L0,13.3461965 C0,12.9351965 0.192,12.5526965 0.51,12 [...]
+ id="clusters" fill="currentColor" fill-rule="nonzero"></path>
+ </g>
+</svg>
\ No newline at end of file
diff --git a/eventmesh-dashboard-view/src/assets/icons/connection.svg
b/eventmesh-dashboard-view/src/assets/icons/connection.svg
index eddfad4..89c8b59 100644
--- a/eventmesh-dashboard-view/src/assets/icons/connection.svg
+++ b/eventmesh-dashboard-view/src/assets/icons/connection.svg
@@ -1,6 +1,6 @@
<svg width="19px" height="12px" fill="currentColor" viewBox="0 0 20 12"
version="1.1" xmlns="http://www.w3.org/2000/svg";
fill="currentColor" xmlns:xlink="http://www.w3.org/1999/xlink";>
- <g id="Page-1" stroke-width="1" fill-rule="evenodd">
+ <g stroke-width="1" fill-rule="evenodd">
<g id="1080P" transform="translate(-29, -321)" fill-rule="nonzero">
<g id="connection" transform="translate(29, 321)">
<path
diff --git a/eventmesh-dashboard-view/src/assets/icons/evetmesh-icon.svg
b/eventmesh-dashboard-view/src/assets/icons/evetmesh-icon.svg
new file mode 100644
index 0000000..96803ca
--- /dev/null
+++ b/eventmesh-dashboard-view/src/assets/icons/evetmesh-icon.svg
@@ -0,0 +1,8 @@
+<svg width="20.9985px" height="23.634px" viewBox="0 0 20.9985 23.634"
version="1.1" xmlns="http://www.w3.org/2000/svg";
+ xmlns:xlink="http://www.w3.org/1999/xlink";>
+ <g id="Icons" stroke="none" stroke-width="1" fill="none"
fill-rule="evenodd">
+ <path
+ d="M10.554,0 C11.577,0 12.438,0.807 12.438,1.884 C12.438,2.1
12.384,2.2605 12.33,2.424 L17.715,5.439 C18.0375,5.061 18.576,4.7925
19.1145,4.7925 C20.1375,4.7925 20.9985,5.5995 20.9985,6.6765
C20.981901,7.59212025 20.3336357,8.37427324 19.437,8.5605 L19.437,14.8605
C20.3535,15.0225 20.9985,15.7755 20.943,16.7445 C20.943,17.7675 20.136,18.6285
19.059,18.6285 C18.4665,18.6285 17.982,18.3585 17.6055,17.982 L12.1665,20.943
C12.2745,21.2115 12.3285,21.4815 12.3285,21.75 C12.3285,22 [...]
+ id="mesh" fill="currentColor" fill-rule="nonzero"></path>
+ </g>
+</svg>
\ No newline at end of file
diff --git a/eventmesh-dashboard-view/src/assets/icons/index.ts
b/eventmesh-dashboard-view/src/assets/icons/index.ts
index 7b95925..f320023 100644
--- a/eventmesh-dashboard-view/src/assets/icons/index.ts
+++ b/eventmesh-dashboard-view/src/assets/icons/index.ts
@@ -23,19 +23,26 @@ 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'
import { ReactComponent as HomeIcon } from './home.svg'
+import { ReactComponent as MetaIcon } from './meta.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 ClusterIcon } from './clusters.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 EventmeshIcon } from './evetmesh-icon.svg'
+import { ReactComponent as RocketMqIcon } from './rocketmq.svg'
+import { ReactComponent as K8sIcon } from './k8s.svg'
export const Icons = {
HomeOutlined: HomeOutlinedIcon,
@@ -44,14 +51,21 @@ export const Icons = {
Refresh: RefreshIcon,
PushPin: PushPinIcon,
PushPinOutlined: PushPinOutlinedIcon,
+ List: ListIcon,
+ StackedBarChart: StackedBarChartIcon,
EventMeshLogo: EventMeshLogoIcon,
EventMeshTopic: EventMeshTopicIcon,
+ Eventmesh: EventmeshIcon,
+ Cluster: ClusterIcon,
+ Meta: MetaIcon,
Home: HomeIcon,
Runtime: RuntimeIcon,
Topic: TopicIcon,
Connection: ConnectionIcon,
+ RocketMq: RocketMqIcon,
+ K8s: K8sIcon,
Message: MessageIcon,
Security: SecurityIcon,
diff --git a/eventmesh-dashboard-view/src/assets/icons/k8s.svg
b/eventmesh-dashboard-view/src/assets/icons/k8s.svg
new file mode 100644
index 0000000..6ff0ba1
--- /dev/null
+++ b/eventmesh-dashboard-view/src/assets/icons/k8s.svg
@@ -0,0 +1,6 @@
+
+<svg width="20.3483686px" height="19.9360301px" viewBox="0 0 20.3483686
19.9360301" version="1.1" xmlns="http://www.w3.org/2000/svg";
xmlns:xlink="http://www.w3.org/1999/xlink";>
+ <g id="Icons" stroke="none" stroke-width="1" fill="none"
fill-rule="evenodd">
+ <path d="M10.3773828,18.4459078 C10.2419171,18.5061148
10.1064515,18.5061148 9.9709858,18.4459078 L3.35574589,15.2624647
C3.22028023,15.187206 3.1299698,15.074318 3.08481458,14.9238006
L1.45922661,7.76669803 C1.42912312,7.61618063 1.45922661,7.48071496
1.54953706,7.36030104 L6.13279198,1.62558797 C6.22310242,1.50517405
6.34351635,1.44496709 6.49403377,1.44496709 L13.8543348,1.44496709
C14.0048522,1.44496709 14.1252661,1.50517405 14.2155766,1.62558797
L18.7988315,7.36030104 C18.88 [...]
+ </g>
+</svg>
\ No newline at end of file
diff --git a/eventmesh-dashboard-view/src/assets/icons/meta.svg
b/eventmesh-dashboard-view/src/assets/icons/meta.svg
new file mode 100644
index 0000000..04efa4e
--- /dev/null
+++ b/eventmesh-dashboard-view/src/assets/icons/meta.svg
@@ -0,0 +1,10 @@
+
+<svg width="19px" height="21.2106428px" viewBox="0 0 19 21.2106428"
version="1.1" xmlns="http://www.w3.org/2000/svg";
xmlns:xlink="http://www.w3.org/1999/xlink";>
+ <g id="Icons" stroke="none" stroke-width="1" fill="none"
fill-rule="evenodd">
+ <g id="meta" fill="currentColor" fill-rule="nonzero">
+ <path d="M8.43920009,1.46757797 L2.20586681,4.6816982
C1.46378846,5.06449155 0.999772158,5.81552891 0.999999992,6.63346346
L0.999999992,14.7888175 C0.999999992,15.6065538 1.46396831,16.3573301
2.20586681,16.7400307 L8.43920009,19.954151 C9.10274876,20.2964356
9.89725139,20.2964356 10.5608001,19.954151 L16.7941333,16.7400307
C17.5360318,16.3573301 18,15.6065538 18,14.7888175 L18,6.63346346
C18.000228,5.81552891 17.5362117,5.06449155 16.7941333,4.6816982
L10.5608001,1.46757797 [...]
+ <path d="M8.52849998,8.92182139 L5.4855,7.23132139
C5.17258822,7.04907539 4.7856002,7.05023136 4.47378277,7.2343435
C4.16196534,7.41845563 3.97404294,7.75675466 3.98249021,8.11877128
C3.99093749,8.4807879 4.19443447,8.80995357 4.51449998,8.97932139
L7.55749999,10.6703214 C8.76555288,11.3414295 10.2344471,11.3414295
11.4425,10.6703214 L14.4855,8.97932139 C14.8055655,8.80995357
15.0090625,8.4807879 15.0175098,8.11877128 C15.025957,7.75675466
14.8380346,7.41845563 14.5262172,7.2 [...]
+ <path d="M8.5,11.1053214 L8.5,15.1053214 C8.5,15.6576061
8.94771525,16.1053214 9.5,16.1053214 C10.0522847,16.1053214 10.5,15.6576061
10.5,15.1053214 L10.5,11.1053214 C10.5,10.5530366 10.0522847,10.1053214
9.5,10.1053214 C8.94771525,10.1053214 8.5,10.5530366 8.5,11.1053214
L8.5,11.1053214 Z" id="Path"></path>
+ </g>
+ </g>
+</svg>
\ No newline at end of file
diff --git a/eventmesh-dashboard-view/src/assets/icons/rocketmq.svg
b/eventmesh-dashboard-view/src/assets/icons/rocketmq.svg
new file mode 100644
index 0000000..8fe23d9
--- /dev/null
+++ b/eventmesh-dashboard-view/src/assets/icons/rocketmq.svg
@@ -0,0 +1,8 @@
+
+<svg width="17.28px" height="24px" viewBox="0 0 17.28 24" version="1.1"
xmlns="http://www.w3.org/2000/svg"; xmlns:xlink="http://www.w3.org/1999/xlink";>
+ <g id="Page-1" stroke="none" stroke-width="1" fill="none"
fill-rule="evenodd">
+ <g id="1080P" transform="translate(-51, -658)" fill="currentColor"
fill-rule="nonzero">
+ <path d="M59.64,682 C57.75,680.245 57.82725,678.2575
57.82725,678.2575 L61.45275,678.2575 C61.45275,678.2575 61.53,680.245 59.64,682
Z M59.64,659.9875 C58.04475,662.095 54.94725,666.8815 54.94725,672.28
C54.94725,673.8415 55.23975,675.1495 55.536,676.07275 L63.744,676.07275
C64.04025,675.15025 64.33275,673.8415 64.33275,672.28 C64.33275,666.8815
61.23525,662.095 59.64,659.989 L59.64,659.9875 Z M65.58975,672.27925
C65.58975,675.835 64.227,678.18175 64.227,678.18175 L62.769,677 [...]
+ </g>
+ </g>
+</svg>
\ No newline at end of file
diff --git a/eventmesh-dashboard-view/src/components/Construction.tsx
b/eventmesh-dashboard-view/src/components/Construction.tsx
index fa3631f..bdbdc2e 100644
--- a/eventmesh-dashboard-view/src/components/Construction.tsx
+++ b/eventmesh-dashboard-view/src/components/Construction.tsx
@@ -22,10 +22,12 @@ import { Box, BoxProps, Typography } from '@mui/material'
import { Icons } from '../assets/icons'
import { grey } from '@mui/material/colors'
-interface ConstructionProps extends BoxProps {}
+interface ConstructionProps extends BoxProps {
+ title?: string
+}
const Construction = forwardRef<typeof Box, ConstructionProps>(
- ({ ...props }, ref) => {
+ ({ title, ...props }, ref) => {
return (
<Box
ref={ref}
@@ -39,7 +41,9 @@ const Construction = forwardRef<typeof Box,
ConstructionProps>(
color: grey[500]
}}>
<Icons.Foundation fontSize="large" />
- <Typography paragraph>Under constraction</Typography>
+ <Typography paragraph>
+ {title ? `${title} is coming` : 'Coming'} soon
+ </Typography>
</Box>
)
}
diff --git a/eventmesh-dashboard-view/src/routes/cluster/Clusters.tsx
b/eventmesh-dashboard-view/src/components/RounderPaper.tsx
similarity index 70%
copy from eventmesh-dashboard-view/src/routes/cluster/Clusters.tsx
copy to eventmesh-dashboard-view/src/components/RounderPaper.tsx
index 060a18d..a1a30f9 100644
--- a/eventmesh-dashboard-view/src/routes/cluster/Clusters.tsx
+++ b/eventmesh-dashboard-view/src/components/RounderPaper.tsx
@@ -18,14 +18,16 @@
*/
import React, { forwardRef } from 'react'
-import { Box, BoxProps } from '@mui/material'
-import RootLayout from '../../components/page/RootLayout'
+import { Paper, PaperProps } from '@mui/material'
+import { AppSectionBoxShadow } from '../app.const'
+import styled from '@emotion/styled'
-interface ClustersProps extends BoxProps {}
+interface RounderPaperProps extends PaperProps {}
-const Clusters = forwardRef<typeof Box, ClustersProps>(({ ...props }, ref) => {
- return <RootLayout>Clusters</RootLayout>
-})
+const RounderPaper = styled(Paper)(() => ({
+ borderRadius: 16,
+ boxShadow: AppSectionBoxShadow
+}))
-Clusters.displayName = 'Clusters'
-export default Clusters
+RounderPaper.displayName = 'RounderPaper'
+export default RounderPaper
diff --git a/eventmesh-dashboard-view/src/components/page/Layout.tsx
b/eventmesh-dashboard-view/src/components/page/Layout.tsx
index 267cf7e..0361f82 100644
--- a/eventmesh-dashboard-view/src/components/page/Layout.tsx
+++ b/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>
diff --git a/eventmesh-dashboard-view/src/components/page/RootLayout.tsx
b/eventmesh-dashboard-view/src/components/page/RootLayout.tsx
index 462b3bb..dbfb47c 100644
--- a/eventmesh-dashboard-view/src/components/page/RootLayout.tsx
+++ b/eventmesh-dashboard-view/src/components/page/RootLayout.tsx
@@ -20,7 +20,6 @@
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'
@@ -37,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>
)
}
diff --git a/eventmesh-dashboard-view/src/routes/RootLayout.tsx
b/eventmesh-dashboard-view/src/routes/RootLayout.tsx
deleted file mode 100644
index 6e2c5cb..0000000
--- a/eventmesh-dashboard-view/src/routes/RootLayout.tsx
+++ /dev/null
@@ -1,44 +0,0 @@
-/*
- * 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 from 'react'
-import { Box, Stack } from '@mui/material'
-
-import { Outlet } from 'react-router-dom'
-import { grey } from '@mui/material/colors'
-import Navigation from './navigation/Navigation'
-
-const RootLayout = () => {
- return (
- <Stack
- direction="row"
- sx={{
- position: 'relative',
- height: '100vh',
- bgcolor: grey[100]
- }}>
- <Navigation />
- <Box sx={{ flexGrow: 1, pl: 4, overflow: 'hidden' }}>
- <Outlet />
- </Box>
- </Stack>
- )
-}
-
-export default RootLayout
diff --git a/eventmesh-dashboard-view/src/routes/Routes.tsx
b/eventmesh-dashboard-view/src/routes/Routes.tsx
index 5cf7f7a..3ad8a27 100644
--- a/eventmesh-dashboard-view/src/routes/Routes.tsx
+++ b/eventmesh-dashboard-view/src/routes/Routes.tsx
@@ -20,16 +20,19 @@
import React from 'react'
import { useRoutes, Navigate } from 'react-router-dom'
import Home from './home/Home'
-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 './elogs/Logs'
+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 './cluster/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([
@@ -37,32 +40,26 @@ const AppRoutes = () => {
path: '*',
element: <Navigate to="home" replace />
},
+ { path: '/', element: <Home /> },
{ path: 'home', element: <Home /> },
{
- path: 'clusters',
- element: <Clusters />,
+ path: 'eventmesh-cluster',
+ element: <EventMesh />,
children: [
- { path: 'clusters', element: <Clusters /> },
- {
- 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: '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: 'users', element: <Users /> },
- { path: 'logs', element: <Logs /> }
+ { path: 'user', element: <User /> }
])
}
diff --git a/eventmesh-dashboard-view/src/routes/cluster/Clusters.tsx
b/eventmesh-dashboard-view/src/routes/connection/Connection.tsx
similarity index 72%
rename from eventmesh-dashboard-view/src/routes/cluster/Clusters.tsx
rename to eventmesh-dashboard-view/src/routes/connection/Connection.tsx
index 060a18d..07b53b1 100644
--- a/eventmesh-dashboard-view/src/routes/cluster/Clusters.tsx
+++ b/eventmesh-dashboard-view/src/routes/connection/Connection.tsx
@@ -19,13 +19,20 @@
import React, { forwardRef } from 'react'
import { Box, BoxProps } from '@mui/material'
+import Construction from '../../components/Construction'
import RootLayout from '../../components/page/RootLayout'
-interface ClustersProps extends BoxProps {}
+interface ConnectionProps extends BoxProps {}
-const Clusters = forwardRef<typeof Box, ClustersProps>(({ ...props }, ref) => {
- return <RootLayout>Clusters</RootLayout>
-})
+const Connection = forwardRef<typeof Box, ConnectionProps>(
+ ({ ...props }, ref) => {
+ return (
+ <RootLayout>
+ <Construction title="Connection" />
+ </RootLayout>
+ )
+ }
+)
-Clusters.displayName = 'Clusters'
-export default Clusters
+Connection.displayName = 'Connection'
+export default Connection
diff --git a/eventmesh-dashboard-view/src/components/page/RootLayout.tsx
b/eventmesh-dashboard-view/src/routes/eventmesh/Eventmesh.tsx
similarity index 53%
copy from eventmesh-dashboard-view/src/components/page/RootLayout.tsx
copy to eventmesh-dashboard-view/src/routes/eventmesh/Eventmesh.tsx
index 462b3bb..f8d3fb6 100644
--- a/eventmesh-dashboard-view/src/components/page/RootLayout.tsx
+++ b/eventmesh-dashboard-view/src/routes/eventmesh/Eventmesh.tsx
@@ -20,27 +20,33 @@
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 EventMeshProps extends StackProps {}
+import RootLayout from '../../components/page/RootLayout'
+import Page from '../../components/page/Layout'
+import { Outlet, matchPath, useLocation } from 'react-router-dom'
+import ClusterMenu from './cluster/cluster-menu/ClusterMenu'
-interface RootLayoutProps extends StackProps {}
-
-const RootLayout = forwardRef<typeof Box, RootLayoutProps>(
+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 (
- <Stack
- direction="row"
- sx={{
- position: 'relative',
- height: '100vh',
- bgcolor: grey[100]
- }}>
- <Navigation />
- <Box sx={{ flexGrow: 1, pl: 4, overflow: 'hidden' }}>{children}</Box>
- </Stack>
+ <RootLayout>
+ <Page
+ sx={{ height: 1, p: 2, display: 'flex', flexDirection: 'column' }}>
+ {isEventmeshClusterPath && <ClusterMenu />}
+ <Outlet />
+ </Page>
+ </RootLayout>
)
}
)
-RootLayout.displayName = 'RootLayout'
-export default RootLayout
+
+Eventmesh.displayName = 'Eventmesh'
+export default Eventmesh
diff --git
a/eventmesh-dashboard-view/src/routes/eventmesh/cluster/cluster-menu/ClusterMenu.tsx
b/eventmesh-dashboard-view/src/routes/eventmesh/cluster/cluster-menu/ClusterMenu.tsx
new file mode 100644
index 0000000..efb17ab
--- /dev/null
+++
b/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
diff --git
a/eventmesh-dashboard-view/src/routes/cluster/connection/Connection.tsx
b/eventmesh-dashboard-view/src/routes/eventmesh/cluster/connection/Connection.tsx
similarity index 90%
copy from eventmesh-dashboard-view/src/routes/cluster/connection/Connection.tsx
copy to
eventmesh-dashboard-view/src/routes/eventmesh/cluster/connection/Connection.tsx
index 30c3264..894c926 100644
--- a/eventmesh-dashboard-view/src/routes/cluster/connection/Connection.tsx
+++
b/eventmesh-dashboard-view/src/routes/eventmesh/cluster/connection/Connection.tsx
@@ -19,8 +19,8 @@
import React, { forwardRef } from 'react'
import { Box, BoxProps } from '@mui/material'
-import Page from '../../../components/page/Layout'
-import Construction from '../../../components/Construction'
+import Page from '../../../../components/page/Layout'
+import Construction from '../../../../components/Construction'
interface ConnectionProps extends BoxProps {}
diff --git a/eventmesh-dashboard-view/src/routes/cluster/message/Message.tsx
b/eventmesh-dashboard-view/src/routes/eventmesh/cluster/message/Message.tsx
similarity index 90%
rename from eventmesh-dashboard-view/src/routes/cluster/message/Message.tsx
rename to
eventmesh-dashboard-view/src/routes/eventmesh/cluster/message/Message.tsx
index a411453..465b7bd 100644
--- a/eventmesh-dashboard-view/src/routes/cluster/message/Message.tsx
+++ b/eventmesh-dashboard-view/src/routes/eventmesh/cluster/message/Message.tsx
@@ -19,8 +19,8 @@
import React, { forwardRef } from 'react'
import { Box, BoxProps } from '@mui/material'
-import Page from '../../../components/page/Layout'
-import Construction from '../../../components/Construction'
+import Page from '../../../../components/page/Layout'
+import Construction from '../../../../components/Construction'
interface MessageProps extends BoxProps {}
diff --git a/eventmesh-dashboard-view/src/routes/cluster/overview/Overview.tsx
b/eventmesh-dashboard-view/src/routes/eventmesh/cluster/overview/Overview.tsx
similarity index 82%
rename from eventmesh-dashboard-view/src/routes/cluster/overview/Overview.tsx
rename to
eventmesh-dashboard-view/src/routes/eventmesh/cluster/overview/Overview.tsx
index 61c2c89..5cda740 100644
--- a/eventmesh-dashboard-view/src/routes/cluster/overview/Overview.tsx
+++
b/eventmesh-dashboard-view/src/routes/eventmesh/cluster/overview/Overview.tsx
@@ -19,16 +19,16 @@
import React, { forwardRef } from 'react'
import { Box, BoxProps } from '@mui/material'
-import Construction from '../../../components/Construction'
-import RootLayout from '../../../components/page/RootLayout'
+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>
+ <Box sx={{ flexGrow: 1, height: 1 }}>
+ <Construction title="Cluster Overview" />
+ </Box>
)
})
diff --git a/eventmesh-dashboard-view/src/routes/cluster/runtime/Runtime.tsx
b/eventmesh-dashboard-view/src/routes/eventmesh/cluster/runtime/Runtime.tsx
similarity index 90%
rename from eventmesh-dashboard-view/src/routes/cluster/runtime/Runtime.tsx
rename to
eventmesh-dashboard-view/src/routes/eventmesh/cluster/runtime/Runtime.tsx
index 8c135f7..7156249 100644
--- a/eventmesh-dashboard-view/src/routes/cluster/runtime/Runtime.tsx
+++ b/eventmesh-dashboard-view/src/routes/eventmesh/cluster/runtime/Runtime.tsx
@@ -19,8 +19,8 @@
import React, { forwardRef } from 'react'
import { Box, BoxProps } from '@mui/material'
-import Page from '../../../components/page/Layout'
-import Construction from '../../../components/Construction'
+import Page from '../../../../components/page/Layout'
+import Construction from '../../../../components/Construction'
interface RuntimeProps extends BoxProps {}
diff --git a/eventmesh-dashboard-view/src/routes/cluster/security/Security.tsx
b/eventmesh-dashboard-view/src/routes/eventmesh/cluster/security/Security.tsx
similarity index 90%
rename from eventmesh-dashboard-view/src/routes/cluster/security/Security.tsx
rename to
eventmesh-dashboard-view/src/routes/eventmesh/cluster/security/Security.tsx
index fa9af07..52f98f4 100644
--- a/eventmesh-dashboard-view/src/routes/cluster/security/Security.tsx
+++
b/eventmesh-dashboard-view/src/routes/eventmesh/cluster/security/Security.tsx
@@ -19,8 +19,8 @@
import React, { forwardRef } from 'react'
import { Box, BoxProps } from '@mui/material'
-import Page from '../../../components/page/Layout'
-import Construction from '../../../components/Construction'
+import Page from '../../../../components/page/Layout'
+import Construction from '../../../../components/Construction'
interface SecurityProps extends BoxProps {}
diff --git a/eventmesh-dashboard-view/src/routes/cluster/topic/Topic.tsx
b/eventmesh-dashboard-view/src/routes/eventmesh/cluster/topic/Topic.tsx
similarity index 58%
rename from eventmesh-dashboard-view/src/routes/cluster/topic/Topic.tsx
rename to eventmesh-dashboard-view/src/routes/eventmesh/cluster/topic/Topic.tsx
index d0ec53c..9626475 100644
--- a/eventmesh-dashboard-view/src/routes/cluster/topic/Topic.tsx
+++ b/eventmesh-dashboard-view/src/routes/eventmesh/cluster/topic/Topic.tsx
@@ -18,17 +18,41 @@
*/
import React, { forwardRef } from 'react'
-import { Box, BoxProps, Stack } from '@mui/material'
-import Page from '../../../components/page/Layout'
+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>
- <Stack sx={{ width: 1, height: 1, p: 2 }} spacing={2}>
+ <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>
diff --git
a/eventmesh-dashboard-view/src/routes/cluster/topic/stats/AbnormalTopicCount.tsx
b/eventmesh-dashboard-view/src/routes/eventmesh/cluster/topic/stats/AbnormalTopicCount.tsx
similarity index 100%
rename from
eventmesh-dashboard-view/src/routes/cluster/topic/stats/AbnormalTopicCount.tsx
rename to
eventmesh-dashboard-view/src/routes/eventmesh/cluster/topic/stats/AbnormalTopicCount.tsx
diff --git a/eventmesh-dashboard-view/src/routes/cluster/topic/stats/Stats.tsx
b/eventmesh-dashboard-view/src/routes/eventmesh/cluster/topic/stats/Stats.tsx
similarity index 96%
rename from eventmesh-dashboard-view/src/routes/cluster/topic/stats/Stats.tsx
rename to
eventmesh-dashboard-view/src/routes/eventmesh/cluster/topic/stats/Stats.tsx
index 479dcb9..c750670 100644
--- a/eventmesh-dashboard-view/src/routes/cluster/topic/stats/Stats.tsx
+++
b/eventmesh-dashboard-view/src/routes/eventmesh/cluster/topic/stats/Stats.tsx
@@ -21,12 +21,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 { fetchTopicStats } from '../../../../service/topics'
+import { useAppSelector } from '../../../../../store'
+import { fetchTopicStats } from '../../../../../service/topics'
import { TopicStats } from './topic-stats.types'
enum TimeOptionEnum {
diff --git
a/eventmesh-dashboard-view/src/routes/cluster/topic/stats/StatsChart.tsx
b/eventmesh-dashboard-view/src/routes/eventmesh/cluster/topic/stats/StatsChart.tsx
similarity index 98%
rename from
eventmesh-dashboard-view/src/routes/cluster/topic/stats/StatsChart.tsx
rename to
eventmesh-dashboard-view/src/routes/eventmesh/cluster/topic/stats/StatsChart.tsx
index 380eafc..7b2eb16 100644
--- a/eventmesh-dashboard-view/src/routes/cluster/topic/stats/StatsChart.tsx
+++
b/eventmesh-dashboard-view/src/routes/eventmesh/cluster/topic/stats/StatsChart.tsx
@@ -19,7 +19,7 @@
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 {
diff --git
a/eventmesh-dashboard-view/src/routes/cluster/topic/stats/TopicCount.tsx
b/eventmesh-dashboard-view/src/routes/eventmesh/cluster/topic/stats/TopicCount.tsx
similarity index 100%
rename from
eventmesh-dashboard-view/src/routes/cluster/topic/stats/TopicCount.tsx
rename to
eventmesh-dashboard-view/src/routes/eventmesh/cluster/topic/stats/TopicCount.tsx
diff --git
a/eventmesh-dashboard-view/src/routes/cluster/topic/stats/stats.types.ts
b/eventmesh-dashboard-view/src/routes/eventmesh/cluster/topic/stats/stats.types.ts
similarity index 100%
rename from
eventmesh-dashboard-view/src/routes/cluster/topic/stats/stats.types.ts
rename to
eventmesh-dashboard-view/src/routes/eventmesh/cluster/topic/stats/stats.types.ts
diff --git
a/eventmesh-dashboard-view/src/routes/cluster/topic/stats/topic-stats.types.ts
b/eventmesh-dashboard-view/src/routes/eventmesh/cluster/topic/stats/topic-stats.types.ts
similarity index 100%
copy from
eventmesh-dashboard-view/src/routes/cluster/topic/stats/topic-stats.types.ts
copy to
eventmesh-dashboard-view/src/routes/eventmesh/cluster/topic/stats/topic-stats.types.ts
diff --git
a/eventmesh-dashboard-view/src/routes/cluster/topic/topic-list/TopicList.tsx
b/eventmesh-dashboard-view/src/routes/eventmesh/cluster/topic/topic-list/TopicList.tsx
similarity index 96%
rename from
eventmesh-dashboard-view/src/routes/cluster/topic/topic-list/TopicList.tsx
rename to
eventmesh-dashboard-view/src/routes/eventmesh/cluster/topic/topic-list/TopicList.tsx
index a1a8e6c..378fa95 100644
--- a/eventmesh-dashboard-view/src/routes/cluster/topic/topic-list/TopicList.tsx
+++
b/eventmesh-dashboard-view/src/routes/eventmesh/cluster/topic/topic-list/TopicList.tsx
@@ -28,8 +28,7 @@ import {
} from '@mui/material'
import { DataGrid, GridColDef, GridRowsProp } from '@mui/x-data-grid'
import { grey } from '@mui/material/colors'
-import { fetchTopics } from '../../../../service/topics'
-import { useAppSelector } from '../../../../store'
+import { fetchTopics } from '../../../../../service/topics'
import {
Topic,
TopicCreationStatusEnum,
@@ -37,7 +36,7 @@ import {
} from '../topic.types'
import { TopicCreationStatusText, TopicHealthStatusText } from '../topic.const'
import { useParams } from 'react-router-dom'
-import { AppSectionBoxShadow } from '../../../../app.const'
+import { AppSectionBoxShadow } from '../../../../../app.const'
export type TopicListParams = {
page: number
@@ -105,7 +104,7 @@ const TopicList = forwardRef<typeof Stack, TopicListProps>(
<TextField size="small" placeholder="Topic 名称" variant="outlined" />
<Button
- variant="outlined"
+ variant="contained"
size="small"
sx={{ textTransform: 'none' }}>
新增Topic
diff --git a/eventmesh-dashboard-view/src/routes/cluster/topic/topic.const.ts
b/eventmesh-dashboard-view/src/routes/eventmesh/cluster/topic/topic.const.ts
similarity index 100%
rename from eventmesh-dashboard-view/src/routes/cluster/topic/topic.const.ts
rename to
eventmesh-dashboard-view/src/routes/eventmesh/cluster/topic/topic.const.ts
diff --git a/eventmesh-dashboard-view/src/routes/cluster/topic/topic.types.ts
b/eventmesh-dashboard-view/src/routes/eventmesh/cluster/topic/topic.types.ts
similarity index 100%
rename from eventmesh-dashboard-view/src/routes/cluster/topic/topic.types.ts
rename to
eventmesh-dashboard-view/src/routes/eventmesh/cluster/topic/topic.types.ts
diff --git
a/eventmesh-dashboard-view/src/routes/eventmesh/clusters/ClusterList.tsx
b/eventmesh-dashboard-view/src/routes/eventmesh/clusters/ClusterList.tsx
new file mode 100644
index 0000000..1fb94a2
--- /dev/null
+++ b/eventmesh-dashboard-view/src/routes/eventmesh/clusters/ClusterList.tsx
@@ -0,0 +1,189 @@
+/*
+ * 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, useState } from 'react'
+import {
+ Box,
+ BoxProps,
+ Button,
+ Paper,
+ Stack,
+ TextField,
+ Typography
+} from '@mui/material'
+
+import { DataGrid, GridColDef } from '@mui/x-data-grid'
+import { Cluster } from './cluster.type'
+import RounderPaper from '../../../components/RounderPaper'
+import { useNavigate } from 'react-router-dom'
+
+export type ClusterListParams = {
+ page: number
+ pageSize: number
+ clusterId?: number
+}
+
+export type ClusterListDatas = {
+ topics: Cluster[]
+ totalCount: number
+}
+
+interface ClusterListProps extends BoxProps {}
+
+const ClusterList = forwardRef<typeof Box, ClusterListProps>(
+ ({ ...props }, ref) => {
+ const navigate = useNavigate()
+ const [loading, setLoading] = useState(false)
+ const [listParams, setListParams] = useState<ClusterListParams>({
+ page: 1,
+ pageSize: 10
+ })
+
+ const [listDatas, setListDatas] = useState<ClusterListDatas>({
+ topics: [
+ {
+ id: 1,
+ name: 'Demo Cluster',
+ status: '运行中',
+ healthStatus: '健康',
+ numOfRuntime: '2',
+ storage: '123 Gb'
+ }
+ ],
+ totalCount: 0
+ })
+
+ return (
+ <RounderPaper sx={{ flexGrow: 1 }} elevation={8}>
+ <Stack sx={{ height: 1 }} spacing={2}>
+ <Stack
+ direction="row"
+ justifyContent="space-between"
+ sx={{ pt: 2, pl: 2, pr: 2 }}>
+ <TextField size="small" placeholder="集群 ID"></TextField>
+ <Button size="small" variant="contained">
+ 新增集群
+ </Button>
+ </Stack>
+ <DataGrid
+ loading={loading}
+ sx={{ flexGrow: 1, border: 0, borderRadius: 4 }}
+ rows={listDatas.topics}
+ columns={getTopicColumns({
+ handlerIdClick: (clusterId) => {
+ navigate(`/eventmesh-cluster/${clusterId}/overview`)
+ }
+ })}
+ />
+ </Stack>
+ </RounderPaper>
+ )
+ }
+)
+
+ClusterList.displayName = 'ClusterList'
+export default ClusterList
+
+const getTopicColumns = ({
+ handlerIdClick
+}: {
+ handlerIdClick: (clusterId: string | number) => void
+}): GridColDef<Cluster>[] => {
+ return [
+ {
+ field: 'id',
+ headerName: '集群 ID',
+ width: 160,
+ disableColumnMenu: true,
+ filterable: false,
+ sortable: false,
+ renderCell: (row) => {
+ return (
+ <Button onClick={() =>
handlerIdClick(row.value)}>{row.value}</Button>
+ )
+ }
+ },
+ {
+ field: 'name',
+ headerName: '集群名称',
+ flex: 1,
+ disableColumnMenu: true,
+ filterable: false,
+ sortable: false
+ },
+ {
+ field: 'status',
+ headerName: '状态',
+ width: 180,
+ disableColumnMenu: true,
+ filterable: false,
+ sortable: false,
+ renderCell: (row) => {
+ return (
+ <Typography fontSize="inherit" color="'primary.main'">
+ {row.value}
+ </Typography>
+ )
+ }
+ },
+ {
+ field: 'healthStatus',
+ headerName: '健康状态',
+ width: 180,
+ disableColumnMenu: true,
+ filterable: false,
+ sortable: false,
+ renderCell: (row) => {
+ return (
+ <Typography fontSize="inherit" color="success.main">
+ {row.value}
+ </Typography>
+ )
+ }
+ },
+ {
+ field: 'numOfRuntime',
+ headerName: 'Runtime 数量',
+ width: 180,
+ disableColumnMenu: true,
+ filterable: false,
+ sortable: false,
+ renderCell: (row) => {
+ return row.value
+ }
+ },
+ {
+ field: 'actions',
+ headerName: '操作',
+ headerAlign: 'center',
+ width: 120,
+ align: 'center',
+ disableColumnMenu: true,
+ filterable: false,
+ sortable: false,
+ renderCell: () => {
+ return (
+ <Stack direction="row" spacing={1}>
+ <Button size="small">删除</Button>
+ </Stack>
+ )
+ }
+ }
+ ]
+}
diff --git
a/eventmesh-dashboard-view/src/routes/cluster/connection/Connection.tsx
b/eventmesh-dashboard-view/src/routes/eventmesh/clusters/ClusterStat.tsx
similarity index 57%
rename from
eventmesh-dashboard-view/src/routes/cluster/connection/Connection.tsx
rename to eventmesh-dashboard-view/src/routes/eventmesh/clusters/ClusterStat.tsx
index 30c3264..4b58f42 100644
--- a/eventmesh-dashboard-view/src/routes/cluster/connection/Connection.tsx
+++ b/eventmesh-dashboard-view/src/routes/eventmesh/clusters/ClusterStat.tsx
@@ -17,22 +17,28 @@
* under the License.
*/
-import React, { forwardRef } from 'react'
-import { Box, BoxProps } from '@mui/material'
+import React, { forwardRef, useState } from 'react'
+import { Box, BoxProps, Button, Paper, Stack, TextField } from '@mui/material'
import Page from '../../../components/page/Layout'
-import Construction from '../../../components/Construction'
+import { grey } from '@mui/material/colors'
-interface ConnectionProps extends BoxProps {}
+import { DataGrid, GridColDef, GridRowsProp } from '@mui/x-data-grid'
+import RounderPaper from '../../../components/RounderPaper'
-const Connection = forwardRef<typeof Box, ConnectionProps>(
+interface ClusterStatProps extends BoxProps {}
+
+const ClusterStat = forwardRef<typeof Box, ClusterStatProps>(
({ ...props }, ref) => {
+
return (
- <Page>
- <Construction />
- </Page>
+ <RounderPaper sx={{ height: 120 }}>
+ <Stack sx={{ height: 1 }} justifyContent="center">
+ 已启用且健康的集群数量/集群总量
+ </Stack>
+ </RounderPaper>
)
}
)
-Connection.displayName = 'Connection'
-export default Connection
+ClusterStat.displayName = 'ClusterStat'
+export default ClusterStat
diff --git a/eventmesh-dashboard-view/src/components/page/Layout.tsx
b/eventmesh-dashboard-view/src/routes/eventmesh/clusters/Clusters.tsx
similarity index 69%
copy from eventmesh-dashboard-view/src/components/page/Layout.tsx
copy to eventmesh-dashboard-view/src/routes/eventmesh/clusters/Clusters.tsx
index 267cf7e..d570369 100644
--- a/eventmesh-dashboard-view/src/components/page/Layout.tsx
+++ b/eventmesh-dashboard-view/src/routes/eventmesh/clusters/Clusters.tsx
@@ -18,27 +18,22 @@
*/
import React, { forwardRef } from 'react'
-import { Box, BoxProps } from '@mui/material'
+import { Box, Stack, StackProps } from '@mui/material'
-interface PageProps extends BoxProps {}
+interface ClustersProps extends StackProps {}
+import ClusterList from './ClusterList'
+import ClusterStat from './ClusterStat'
-const Page = forwardRef<typeof Box, PageProps>(
+const Clusters = forwardRef<typeof Stack, ClustersProps>(
({ children, ...props }, ref) => {
return (
- <Box
- ref={ref}
- sx={{
- width: 1,
- height: 1,
- display: 'flex',
- alignItems: 'center',
- justifyContent: 'center'
- }}>
- {children}
- </Box>
+ <Stack sx={{ height: 1 }} spacing={2}>
+ <ClusterStat />
+ <ClusterList />
+ </Stack>
)
}
)
-Page.displayName = 'Page'
-export default Page
+Clusters.displayName = 'Clusters'
+export default Clusters
diff --git
a/eventmesh-dashboard-view/src/routes/cluster/topic/stats/topic-stats.types.ts
b/eventmesh-dashboard-view/src/routes/eventmesh/clusters/cluster.type.ts
similarity index 84%
rename from
eventmesh-dashboard-view/src/routes/cluster/topic/stats/topic-stats.types.ts
rename to eventmesh-dashboard-view/src/routes/eventmesh/clusters/cluster.type.ts
index 50c4ff9..7c22087 100644
---
a/eventmesh-dashboard-view/src/routes/cluster/topic/stats/topic-stats.types.ts
+++ b/eventmesh-dashboard-view/src/routes/eventmesh/clusters/cluster.type.ts
@@ -17,7 +17,12 @@
* under the License.
*/
-export type TopicStats = {
- abnormalNum: number
- allNum: number
-}
+
+export type Cluster = {
+ id: number
+ name: string
+ status: string
+ healthStatus: string
+ numOfRuntime: string
+ storage: string
+}
\ No newline at end of file
diff --git a/eventmesh-dashboard-view/src/routes/home/Home.tsx
b/eventmesh-dashboard-view/src/routes/home/Home.tsx
index 2c24a90..5a72bdb 100644
--- a/eventmesh-dashboard-view/src/routes/home/Home.tsx
+++ b/eventmesh-dashboard-view/src/routes/home/Home.tsx
@@ -27,7 +27,7 @@ interface HomeProps extends BoxProps {}
const Home = forwardRef<typeof Box, HomeProps>(({ ...props }, ref) => {
return (
<RootLayout>
- <Construction />
+ <Construction title='home' />
</RootLayout>
)
})
diff --git a/eventmesh-dashboard-view/src/routes/elogs/Logs.tsx
b/eventmesh-dashboard-view/src/routes/k8s/K8s.tsx
similarity index 70%
rename from eventmesh-dashboard-view/src/routes/elogs/Logs.tsx
rename to eventmesh-dashboard-view/src/routes/k8s/K8s.tsx
index a7dcf89..f2d4ae9 100644
--- a/eventmesh-dashboard-view/src/routes/elogs/Logs.tsx
+++ b/eventmesh-dashboard-view/src/routes/k8s/K8s.tsx
@@ -18,19 +18,21 @@
*/
import React, { forwardRef } from 'react'
-import { Box, BoxProps } from '@mui/material'
-import Page from '../../components/page/Layout'
+import { Stack, StackProps } from '@mui/material'
import Construction from '../../components/Construction'
+import RootLayout from '../../components/page/RootLayout'
-interface LogsProps extends BoxProps {}
+interface K8sProps extends StackProps {}
-const Logs = forwardRef<typeof Box, LogsProps>(({ ...props }, ref) => {
- return (
- <Page ref={ref}>
- <Construction />
- </Page>
- )
-})
+const K8s = forwardRef<typeof Stack, K8sProps>(
+ ({ children, ...props }, ref) => {
+ return (
+ <RootLayout>
+ <Construction title="K8s" />
+ </RootLayout>
+ )
+ }
+)
-Logs.displayName = 'Logs'
-export default Logs
+K8s.displayName = 'K8s'
+export default K8s
diff --git a/eventmesh-dashboard-view/src/routes/navigation/Navigation.tsx
b/eventmesh-dashboard-view/src/routes/navigation/Navigation.tsx
index 366fc0d..8803b59 100644
--- a/eventmesh-dashboard-view/src/routes/navigation/Navigation.tsx
+++ b/eventmesh-dashboard-view/src/routes/navigation/Navigation.tsx
@@ -31,7 +31,6 @@ import { grey } from '@mui/material/colors'
import NavigationItem from './NavigationItem'
import { NavMenuIdEnum, NavMenuType } from './navigation.types'
import { useNavigate } from 'react-router-dom'
-import { fetchResourceStats } from '../../service/topics'
import NavigationSubMenu from './NavigationSubMenu'
import { useAppDispatch, useAppSelector } from '../../store'
import { globalSlice } from '../../store/reducers/public/public.slice'
@@ -46,73 +45,47 @@ const getNavigationMenus = (): NavMenuType[] => {
count: 0
},
{
- id: NavMenuIdEnum.Clusters,
- icon: <Icons.Connection />,
- text: 'Clusters',
- route: '/clusters',
+ id: NavMenuIdEnum.Eventmesh,
+ icon: <Icons.Eventmesh />,
+ text: 'Eventmesh',
+ route: '/eventmesh-cluster/list',
count: 0,
- subMenus: [
- {
- id: NavMenuIdEnum.ClusterOverview,
- icon: <Icons.Home style={{ color: 'inherit' }} />,
- text: 'Overview',
- route: 'overview',
- count: 0
- },
- {
- id: NavMenuIdEnum.ClusterRuntime,
- icon: <Icons.Runtime style={{ color: 'inherit' }} />,
- text: 'Runtime',
- route: 'runtime',
- count: 0
- },
- {
- id: NavMenuIdEnum.ClusterTopic,
- icon: <Icons.Topic />,
- text: 'Topic',
- route: 'topic',
- count: 0
- },
- {
- id: NavMenuIdEnum.ClusterConnection,
- icon: <Icons.Connection />,
- text: 'Connection',
- route: 'connection',
- count: 0
- },
- {
- id: NavMenuIdEnum.ClusterMessage,
- icon: <Icons.Message />,
- text: 'Message',
- route: 'message',
- count: 0
- },
- {
- id: NavMenuIdEnum.ClusterSecurity,
- icon: <Icons.Security />,
- text: 'Security',
- route: 'security',
- count: 0
- }
- ]
},
+
{
- id: NavMenuIdEnum.Settings,
- icon: <Icons.Settings />,
- route: '/settings',
- text: 'Settings'
+ id: NavMenuIdEnum.Connection,
+ icon: <Icons.Connection />,
+ text: 'Connection',
+ route: '/connection',
+ count: 0
+ },
+ {
+ id: NavMenuIdEnum.ROCKET_MQ,
+ icon: <Icons.RocketMq />,
+ route: '/rocket-mq',
+ text: 'Rocket MQ',
+ count: 0
},
{
- id: NavMenuIdEnum.Users,
- icon: <Icons.Users style={{ color: 'inherit' }} />,
+ id: NavMenuIdEnum.K8S,
+ icon: <Icons.K8s />,
+ route: '/k8s',
+ text: 'K8s',
+ count: 0
+ },
+
+ {
+ id: NavMenuIdEnum.User,
+ icon: <Icons.Users />,
route: '/users',
text: 'Users'
},
+
{
- id: NavMenuIdEnum.Logs,
- icon: <Icons.Logs />,
- route: '/logs',
- text: 'Logs'
+ id: NavMenuIdEnum.Settings,
+ icon: <Icons.Settings />,
+ route: '/settings',
+ text: 'Settings'
}
]
}
@@ -130,8 +103,6 @@ const Navigation = forwardRef<typeof Stack,
NavigationProps>(
getNavigationMenus()
)
- console.log(pinSubmenuIds)
-
const setActiveMenuId = (menuId: NavMenuIdEnum) => {
dispatch(globalSlice.actions.setNavigationActiveMenuId(menuId))
}
diff --git a/eventmesh-dashboard-view/src/routes/navigation/NavigationItem.tsx
b/eventmesh-dashboard-view/src/routes/navigation/NavigationItem.tsx
index a418507..96d07a0 100644
--- a/eventmesh-dashboard-view/src/routes/navigation/NavigationItem.tsx
+++ b/eventmesh-dashboard-view/src/routes/navigation/NavigationItem.tsx
@@ -18,18 +18,10 @@
*/
import React, { forwardRef } from 'react'
-import {
- Button,
- ButtonProps,
- Stack,
- Typography,
- Chip,
- IconButton
-} from '@mui/material'
+import { Button, ButtonProps, Stack, Typography, Chip } from '@mui/material'
import { styled } from '@mui/material/styles'
import { grey } from '@mui/material/colors'
import { Icons } from '../../assets/icons'
-import { NavMenuType } from './navigation.types'
const NavButton = styled(Button)({
boxShadow: 'none',
diff --git a/eventmesh-dashboard-view/src/routes/navigation/navigation.types.ts
b/eventmesh-dashboard-view/src/routes/navigation/navigation.types.ts
index 565c3bd..b69e1cc 100644
--- a/eventmesh-dashboard-view/src/routes/navigation/navigation.types.ts
+++ b/eventmesh-dashboard-view/src/routes/navigation/navigation.types.ts
@@ -19,22 +19,21 @@
export enum NavMenuIdEnum {
Home = 'HOME',
- Clusters = 'CLUSTERS',
- Settings = 'SETTINGS',
- Users = 'USERS',
- Logs = 'LOGS',
+ Eventmesh = 'EVENTMESH',
+ EventmeshClusters = 'EVENTMESH_CLUSTER',
+ EventmeshMeta = 'EVENTMESH_META',
+ EventmeshRuntime = 'EVENTMESH_RUNTIME',
- ClusterOverview = 'CLUSTER_OVERVIEW',
- ClusterRuntime = 'CLUSTER_RUNTIME',
- ClusterTopic = 'CLUSTER_TOPIC',
- ClusterConnection = 'CLUSTER_CONNECTION',
- ClusterMessage = 'CLUSTER_MESSAGE',
- ClusterSecurity = 'CLUSTER_SECURITY'
+ Connection = 'CONNECTION',
+ K8S = 'K8S',
+ ROCKET_MQ = 'ROCKET_MQ',
+ Settings = 'SETTINGS',
+ User = 'USER',
}
export type NavMenuType = {
id: NavMenuIdEnum
- icon: React.ReactNode
+ icon?: React.ReactNode
text: string
route: string
count?: number
diff --git a/eventmesh-dashboard-view/src/routes/home/Home.tsx
b/eventmesh-dashboard-view/src/routes/rocket-mq/RocketMq.tsx
similarity index 73%
copy from eventmesh-dashboard-view/src/routes/home/Home.tsx
copy to eventmesh-dashboard-view/src/routes/rocket-mq/RocketMq.tsx
index 2c24a90..3488f42 100644
--- a/eventmesh-dashboard-view/src/routes/home/Home.tsx
+++ b/eventmesh-dashboard-view/src/routes/rocket-mq/RocketMq.tsx
@@ -18,19 +18,22 @@
*/
import React, { forwardRef } from 'react'
-import { Box, BoxProps } from '@mui/material'
+import { Box, StackProps } from '@mui/material'
+
import Construction from '../../components/Construction'
import RootLayout from '../../components/page/RootLayout'
-interface HomeProps extends BoxProps {}
+interface RocketMqProps extends StackProps {}
-const Home = forwardRef<typeof Box, HomeProps>(({ ...props }, ref) => {
- return (
- <RootLayout>
- <Construction />
- </RootLayout>
- )
-})
+const RocketMq = forwardRef<typeof Box, RocketMqProps>(
+ ({ children, ...props }, ref) => {
+ return (
+ <RootLayout>
+ <Construction title="RocketMQ" />
+ </RootLayout>
+ )
+ }
+)
-Home.displayName = 'Home'
-export default Home
+RocketMq.displayName = 'RocketMq'
+export default RocketMq
diff --git a/eventmesh-dashboard-view/src/routes/topic/topic-list/TopicList.tsx
b/eventmesh-dashboard-view/src/routes/topic/topic-list/TopicList.tsx
deleted file mode 100644
index 39c1ab0..0000000
--- a/eventmesh-dashboard-view/src/routes/topic/topic-list/TopicList.tsx
+++ /dev/null
@@ -1,115 +0,0 @@
-/*
- * 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, TextField, Paper, Button } from '@mui/material'
-import { DataGrid, GridColDef, GridRowsProp } from '@mui/x-data-grid'
-import { grey } from '@mui/material/colors'
-
-interface TopicListProps extends StackProps {}
-
-const TopicList = forwardRef<typeof Stack, TopicListProps>(
- ({ ...props }, ref) => {
- return (
- <Paper
- sx={{
- flexGrow: 1,
- borderRadius: 4,
- boxShadow: '2px 2px 40px 2px rgba(0,0,0,.05)'
- }}>
- <Stack
- sx={{ px: 2, py: 3 }}
- direction="row"
- justifyContent="space-between"
- alignItems="center">
- <TextField size="small" placeholder="Topic 名称" variant="outlined" />
-
- <Button
- variant="outlined"
- size="small"
- sx={{ textTransform: 'none' }}>
- 新增Topic
- </Button>
- </Stack>
-
- <DataGrid
- sx={{
- border: 0,
- borderRadius: 4,
- '& .MuiDataGrid-columnHeaderTitle': {
- color: grey[400]
- },
- '& .MuiDataGrid-cell': {
- fontWeight: 'normal',
- fontSize: 14
- }
- }}
- rows={rows}
- columns={columns}
- />
- </Paper>
- )
- }
-)
-
-TopicList.displayName = 'TopicList'
-export default TopicList
-
-const rows: GridRowsProp = [
- {
- id: 1,
- topicName: 'Topicname A0012',
- topicStatus: 'NORMAL',
- topicDesc: 'Topicname A0012 is for service A'
- },
- {
- id: 2,
- topicName: 'Topicname C23',
- topicStatus: 'ABNORMAL',
- topicDesc: 'This is for service B'
- },
- {
- id: 3,
- topicName: 'Topicname 40012',
- topicStatus: 'ABNORMAL',
- topicDesc:
- 'Topic description. This could be too long to display completely in the
cell'
- }
-]
-
-const columns: GridColDef[] = [
- { field: 'topicName', headerName: 'Topic 名称', width: 240 },
- { field: 'topicStatus', headerName: '健康状态', width: 150 },
- { field: 'topicDesc', headerName: '描述', flex: 1 },
- {
- field: 'actions',
- headerName: '操作',
- headerAlign: 'center',
- width: 240,
- align: 'center',
- renderCell: () => {
- return (
- <Stack direction="row" spacing={1}>
- <Button size="small">清除数据</Button>
- <Button size="small">删除</Button>
- </Stack>
- )
- }
- }
-]
diff --git a/eventmesh-dashboard-view/src/routes/users/Users.tsx
b/eventmesh-dashboard-view/src/routes/user/User.tsx
similarity index 90%
rename from eventmesh-dashboard-view/src/routes/users/Users.tsx
rename to eventmesh-dashboard-view/src/routes/user/User.tsx
index b89e5fc..014b88b 100644
--- a/eventmesh-dashboard-view/src/routes/users/Users.tsx
+++ b/eventmesh-dashboard-view/src/routes/user/User.tsx
@@ -24,7 +24,7 @@ import Construction from '../../components/Construction'
interface UsersProps extends BoxProps {}
-const Users = forwardRef<typeof Box, UsersProps>(({ ...props }, ref) => {
+const User = forwardRef<typeof Box, UsersProps>(({ ...props }, ref) => {
return (
<Page>
<Construction />
@@ -32,5 +32,5 @@ const Users = forwardRef<typeof Box, UsersProps>(({ ...props
}, ref) => {
)
})
-Users.displayName = 'Users'
-export default Users
+User.displayName = 'User'
+export default User
diff --git a/eventmesh-dashboard-view/src/service/topics.ts
b/eventmesh-dashboard-view/src/service/topics.ts
index a06f52a..ab66502 100644
--- a/eventmesh-dashboard-view/src/service/topics.ts
+++ b/eventmesh-dashboard-view/src/service/topics.ts
@@ -18,12 +18,12 @@
*/
import { ResourceStats } from '../routes/navigation/navigation.types'
-import { TopicStats } from '../routes/cluster/topic/stats/topic-stats.types'
+import { TopicStats } from
'../routes/eventmesh/cluster/topic/stats/topic-stats.types'
import {
TopicListDatas,
TopicListParams
-} from '../routes/cluster/topic/topic-list/TopicList'
-import { Topic } from '../routes/cluster/topic/topic.types'
+} from '../routes/eventmesh/cluster/topic/topic-list/TopicList'
+import { Topic } from '../routes/eventmesh/cluster/topic/topic.types'
import { InstanceTypeEnum } from '../types/types'
import { FetchRespone, ListApiRespone } from './request.types'
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
