From 6ed37c6b41ee5bf0dda02f34bf7a10c03b6b36d2 Mon Sep 17 00:00:00 2001
From: SUN <350916525@qq.com>
Date: Thu, 13 Jun 2024 14:28:35 +0800
Subject: [PATCH 1/3] updated navigation and routes
---
.../src/assets/icons/connection.svg | 2 +-
.../src/assets/icons/evetmesh-icon.svg | 8 ++
.../src/assets/icons/index.ts | 10 ++
.../src/assets/icons/k8s.svg | 6 +
.../src/assets/icons/meta.svg | 10 ++
.../src/assets/icons/rocketmq.svg | 8 ++
.../src/components/Construction.tsx | 10 +-
.../src/components/page/RootLayout.tsx | 1 -
.../src/routes/RootLayout.tsx | 6 +-
.../src/routes/Routes.tsx | 47 +++----
.../Logs.tsx => connection/Connection.tsx} | 24 ++--
.../clusters}/Clusters.tsx | 2 +-
.../clusters}/connection/Connection.tsx | 4 +-
.../clusters}/message/Message.tsx | 4 +-
.../clusters}/overview/Overview.tsx | 4 +-
.../clusters}/runtime/Runtime.tsx | 4 +-
.../clusters}/security/Security.tsx | 4 +-
.../clusters}/topic/Topic.tsx | 2 +-
.../topic/stats/AbnormalTopicCount.tsx | 0
.../clusters}/topic/stats/Stats.tsx | 6 +-
.../clusters}/topic/stats/StatsChart.tsx | 2 +-
.../clusters}/topic/stats/TopicCount.tsx | 0
.../clusters}/topic/stats/stats.types.ts | 0
.../topic/stats/topic-stats.types.ts | 0
.../clusters}/topic/topic-list/TopicList.tsx | 6 +-
.../clusters}/topic/topic.const.ts | 0
.../clusters}/topic/topic.types.ts | 0
.../src/routes/home/Home.tsx | 2 +-
.../src/routes/k8s/K8s.tsx | 38 ++++++
.../src/routes/navigation/Navigation.tsx | 92 +++++++-------
.../src/routes/navigation/NavigationItem.tsx | 10 +-
.../src/routes/navigation/navigation.types.ts | 21 ++--
.../src/routes/rocket-mq/RocketMq.tsx | 39 ++++++
.../src/routes/topic/topic-list/TopicList.tsx | 115 ------------------
.../routes/{users/Users.tsx => user/User.tsx} | 6 +-
.../src/service/topics.ts | 6 +-
36 files changed, 248 insertions(+), 251 deletions(-)
create mode 100644 eventmesh-dashboard-view/src/assets/icons/evetmesh-icon.svg
create mode 100644 eventmesh-dashboard-view/src/assets/icons/k8s.svg
create mode 100644 eventmesh-dashboard-view/src/assets/icons/meta.svg
create mode 100644 eventmesh-dashboard-view/src/assets/icons/rocketmq.svg
rename eventmesh-dashboard-view/src/routes/{elogs/Logs.tsx => connection/Connection.tsx} (72%)
rename eventmesh-dashboard-view/src/routes/{cluster => eventmesh/clusters}/Clusters.tsx (94%)
rename eventmesh-dashboard-view/src/routes/{cluster => eventmesh/clusters}/connection/Connection.tsx (90%)
rename eventmesh-dashboard-view/src/routes/{cluster => eventmesh/clusters}/message/Message.tsx (90%)
rename eventmesh-dashboard-view/src/routes/{cluster => eventmesh/clusters}/overview/Overview.tsx (89%)
rename eventmesh-dashboard-view/src/routes/{cluster => eventmesh/clusters}/runtime/Runtime.tsx (90%)
rename eventmesh-dashboard-view/src/routes/{cluster => eventmesh/clusters}/security/Security.tsx (90%)
rename eventmesh-dashboard-view/src/routes/{cluster => eventmesh/clusters}/topic/Topic.tsx (96%)
rename eventmesh-dashboard-view/src/routes/{cluster => eventmesh/clusters}/topic/stats/AbnormalTopicCount.tsx (100%)
rename eventmesh-dashboard-view/src/routes/{cluster => eventmesh/clusters}/topic/stats/Stats.tsx (96%)
rename eventmesh-dashboard-view/src/routes/{cluster => eventmesh/clusters}/topic/stats/StatsChart.tsx (98%)
rename eventmesh-dashboard-view/src/routes/{cluster => eventmesh/clusters}/topic/stats/TopicCount.tsx (100%)
rename eventmesh-dashboard-view/src/routes/{cluster => eventmesh/clusters}/topic/stats/stats.types.ts (100%)
rename eventmesh-dashboard-view/src/routes/{cluster => eventmesh/clusters}/topic/stats/topic-stats.types.ts (100%)
rename eventmesh-dashboard-view/src/routes/{cluster => eventmesh/clusters}/topic/topic-list/TopicList.tsx (96%)
rename eventmesh-dashboard-view/src/routes/{cluster => eventmesh/clusters}/topic/topic.const.ts (100%)
rename eventmesh-dashboard-view/src/routes/{cluster => eventmesh/clusters}/topic/topic.types.ts (100%)
create mode 100644 eventmesh-dashboard-view/src/routes/k8s/K8s.tsx
create mode 100644 eventmesh-dashboard-view/src/routes/rocket-mq/RocketMq.tsx
delete mode 100644 eventmesh-dashboard-view/src/routes/topic/topic-list/TopicList.tsx
rename eventmesh-dashboard-view/src/routes/{users/Users.tsx => user/User.tsx} (90%)
diff --git a/eventmesh-dashboard-view/src/assets/icons/connection.svg b/eventmesh-dashboard-view/src/assets/icons/connection.svg
index eddfad4c..89c8b597 100644
--- a/eventmesh-dashboard-view/src/assets/icons/connection.svg
+++ b/eventmesh-dashboard-view/src/assets/icons/connection.svg
@@ -1,6 +1,6 @@
\ 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 7b959256..c0ecab7f 100644
--- a/eventmesh-dashboard-view/src/assets/icons/index.ts
+++ b/eventmesh-dashboard-view/src/assets/icons/index.ts
@@ -27,15 +27,20 @@ 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 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,
@@ -47,11 +52,16 @@ export const Icons = {
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 00000000..6ff0ba11
--- /dev/null
+++ b/eventmesh-dashboard-view/src/assets/icons/k8s.svg
@@ -0,0 +1,6 @@
+
+
\ 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 00000000..04efa4ee
--- /dev/null
+++ b/eventmesh-dashboard-view/src/assets/icons/meta.svg
@@ -0,0 +1,10 @@
+
+
\ 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 00000000..8fe23d9a
--- /dev/null
+++ b/eventmesh-dashboard-view/src/assets/icons/rocketmq.svg
@@ -0,0 +1,8 @@
+
+
\ 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 fa3631f9..bdbdc2e9 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(
- ({ ...props }, ref) => {
+ ({ title, ...props }, ref) => {
return (
(
color: grey[500]
}}>
- Under constraction
+
+ {title ? `${title} is coming` : 'Coming'} soon
+
)
}
diff --git a/eventmesh-dashboard-view/src/components/page/RootLayout.tsx b/eventmesh-dashboard-view/src/components/page/RootLayout.tsx
index 462b3bb5..0135ee83 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'
diff --git a/eventmesh-dashboard-view/src/routes/RootLayout.tsx b/eventmesh-dashboard-view/src/routes/RootLayout.tsx
index 6e2c5cb9..531a91eb 100644
--- a/eventmesh-dashboard-view/src/routes/RootLayout.tsx
+++ b/eventmesh-dashboard-view/src/routes/RootLayout.tsx
@@ -28,11 +28,7 @@ const RootLayout = () => {
return (
+ sx={{ position: 'relative', height: '100vh', bgcolor: grey[100] }}>
diff --git a/eventmesh-dashboard-view/src/routes/Routes.tsx b/eventmesh-dashboard-view/src/routes/Routes.tsx
index 5cf7f7ad..0ee9082c 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/clusters/overview/Overview'
+import ClusterTopic from './eventmesh/clusters/topic/Topic'
+import ClusterRuntime from './eventmesh/clusters/runtime/Runtime'
+import ClusterConnection from './eventmesh/clusters/connection/Connection'
+import ClusterMessage from './eventmesh/clusters/message/Message'
+import ClusterSecurity from './eventmesh/clusters/security/Security'
+import User from './user/User'
import Settings from './settings/Settings'
-import Clusters from './cluster/Clusters'
+import Clusters from './eventmesh/clusters/Clusters'
+import K8s from './k8s/K8s'
+import RocketMq from './rocket-mq/RocketMq'
+import Connection from './connection/Connection'
+import EventMesh from './eventmesh/Eventmesh'
const AppRoutes = () => {
return useRoutes([
@@ -39,30 +42,32 @@ const AppRoutes = () => {
},
{ path: 'home', element: },
{
- path: 'clusters',
- element: ,
+ path: 'eventmesh',
+ element: ,
children: [
- { path: 'clusters', element: },
{
- path: ':clusterId',
+ path: 'clusters',
+ element: ,
children: [
{
path: '*',
element:
},
- { path: 'overview', element: },
- { path: 'runtime', element: },
- { path: 'topic', element: },
- { path: 'connection', element: },
- { path: 'message', element: },
- { path: 'security', element: }
+ { path: ':clusterId/overview', element: },
+ { path: ':clusterId/runtime', element: },
+ { path: ':clusterId/topic', element: },
+ { path: ':clusterId/connection', element: },
+ { path: ':clusterId/message', element: },
+ { path: ':clusterId/security', element: }
]
}
]
},
+ { path: 'connection', element: },
+ { path: 'rocket-mq', element: },
+ { path: 'k8s', element: },
{ path: 'settings', element: },
- { path: 'users', element: },
- { path: 'logs', element: }
+ { path: 'user', element: },
])
}
diff --git a/eventmesh-dashboard-view/src/routes/elogs/Logs.tsx b/eventmesh-dashboard-view/src/routes/connection/Connection.tsx
similarity index 72%
rename from eventmesh-dashboard-view/src/routes/elogs/Logs.tsx
rename to eventmesh-dashboard-view/src/routes/connection/Connection.tsx
index a7dcf89d..07b53b17 100644
--- a/eventmesh-dashboard-view/src/routes/elogs/Logs.tsx
+++ b/eventmesh-dashboard-view/src/routes/connection/Connection.tsx
@@ -19,18 +19,20 @@
import React, { forwardRef } from 'react'
import { Box, BoxProps } from '@mui/material'
-import Page from '../../components/page/Layout'
import Construction from '../../components/Construction'
+import RootLayout from '../../components/page/RootLayout'
-interface LogsProps extends BoxProps {}
+interface ConnectionProps extends BoxProps {}
-const Logs = forwardRef(({ ...props }, ref) => {
- return (
-
-
-
- )
-})
+const Connection = forwardRef(
+ ({ ...props }, ref) => {
+ return (
+
+
+
+ )
+ }
+)
-Logs.displayName = 'Logs'
-export default Logs
+Connection.displayName = 'Connection'
+export default Connection
diff --git a/eventmesh-dashboard-view/src/routes/cluster/Clusters.tsx b/eventmesh-dashboard-view/src/routes/eventmesh/clusters/Clusters.tsx
similarity index 94%
rename from eventmesh-dashboard-view/src/routes/cluster/Clusters.tsx
rename to eventmesh-dashboard-view/src/routes/eventmesh/clusters/Clusters.tsx
index 060a18d0..e0349878 100644
--- a/eventmesh-dashboard-view/src/routes/cluster/Clusters.tsx
+++ b/eventmesh-dashboard-view/src/routes/eventmesh/clusters/Clusters.tsx
@@ -19,7 +19,7 @@
import React, { forwardRef } from 'react'
import { Box, BoxProps } from '@mui/material'
-import RootLayout from '../../components/page/RootLayout'
+import RootLayout from '../../../components/page/RootLayout'
interface ClustersProps extends BoxProps {}
diff --git a/eventmesh-dashboard-view/src/routes/cluster/connection/Connection.tsx b/eventmesh-dashboard-view/src/routes/eventmesh/clusters/connection/Connection.tsx
similarity index 90%
rename from eventmesh-dashboard-view/src/routes/cluster/connection/Connection.tsx
rename to eventmesh-dashboard-view/src/routes/eventmesh/clusters/connection/Connection.tsx
index 30c32647..894c9260 100644
--- a/eventmesh-dashboard-view/src/routes/cluster/connection/Connection.tsx
+++ b/eventmesh-dashboard-view/src/routes/eventmesh/clusters/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/clusters/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/clusters/message/Message.tsx
index a4114530..465b7bd0 100644
--- a/eventmesh-dashboard-view/src/routes/cluster/message/Message.tsx
+++ b/eventmesh-dashboard-view/src/routes/eventmesh/clusters/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/clusters/overview/Overview.tsx
similarity index 89%
rename from eventmesh-dashboard-view/src/routes/cluster/overview/Overview.tsx
rename to eventmesh-dashboard-view/src/routes/eventmesh/clusters/overview/Overview.tsx
index 61c2c89c..48de4869 100644
--- a/eventmesh-dashboard-view/src/routes/cluster/overview/Overview.tsx
+++ b/eventmesh-dashboard-view/src/routes/eventmesh/clusters/overview/Overview.tsx
@@ -19,8 +19,8 @@
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 {}
diff --git a/eventmesh-dashboard-view/src/routes/cluster/runtime/Runtime.tsx b/eventmesh-dashboard-view/src/routes/eventmesh/clusters/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/clusters/runtime/Runtime.tsx
index 8c135f7e..7156249e 100644
--- a/eventmesh-dashboard-view/src/routes/cluster/runtime/Runtime.tsx
+++ b/eventmesh-dashboard-view/src/routes/eventmesh/clusters/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/clusters/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/clusters/security/Security.tsx
index fa9af071..52f98f4b 100644
--- a/eventmesh-dashboard-view/src/routes/cluster/security/Security.tsx
+++ b/eventmesh-dashboard-view/src/routes/eventmesh/clusters/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/clusters/topic/Topic.tsx
similarity index 96%
rename from eventmesh-dashboard-view/src/routes/cluster/topic/Topic.tsx
rename to eventmesh-dashboard-view/src/routes/eventmesh/clusters/topic/Topic.tsx
index d0ec53c6..30c61163 100644
--- a/eventmesh-dashboard-view/src/routes/cluster/topic/Topic.tsx
+++ b/eventmesh-dashboard-view/src/routes/eventmesh/clusters/topic/Topic.tsx
@@ -19,7 +19,7 @@
import React, { forwardRef } from 'react'
import { Box, BoxProps, Stack } from '@mui/material'
-import Page from '../../../components/page/Layout'
+import Page from '../../../../components/page/Layout'
import Stats from './stats/Stats'
import TopicList from './topic-list/TopicList'
diff --git a/eventmesh-dashboard-view/src/routes/cluster/topic/stats/AbnormalTopicCount.tsx b/eventmesh-dashboard-view/src/routes/eventmesh/clusters/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/clusters/topic/stats/AbnormalTopicCount.tsx
diff --git a/eventmesh-dashboard-view/src/routes/cluster/topic/stats/Stats.tsx b/eventmesh-dashboard-view/src/routes/eventmesh/clusters/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/clusters/topic/stats/Stats.tsx
index 479dcb94..c7506703 100644
--- a/eventmesh-dashboard-view/src/routes/cluster/topic/stats/Stats.tsx
+++ b/eventmesh-dashboard-view/src/routes/eventmesh/clusters/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/clusters/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/clusters/topic/stats/StatsChart.tsx
index 380eafc6..7b2eb163 100644
--- a/eventmesh-dashboard-view/src/routes/cluster/topic/stats/StatsChart.tsx
+++ b/eventmesh-dashboard-view/src/routes/eventmesh/clusters/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/clusters/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/clusters/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/clusters/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/clusters/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/clusters/topic/stats/topic-stats.types.ts
similarity index 100%
rename from eventmesh-dashboard-view/src/routes/cluster/topic/stats/topic-stats.types.ts
rename to eventmesh-dashboard-view/src/routes/eventmesh/clusters/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/clusters/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/clusters/topic/topic-list/TopicList.tsx
index a1a8e6c2..77def6e5 100644
--- a/eventmesh-dashboard-view/src/routes/cluster/topic/topic-list/TopicList.tsx
+++ b/eventmesh-dashboard-view/src/routes/eventmesh/clusters/topic/topic-list/TopicList.tsx
@@ -28,8 +28,8 @@ 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 { useAppSelector } from '../../../../../store'
import {
Topic,
TopicCreationStatusEnum,
@@ -37,7 +37,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
diff --git a/eventmesh-dashboard-view/src/routes/cluster/topic/topic.const.ts b/eventmesh-dashboard-view/src/routes/eventmesh/clusters/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/clusters/topic/topic.const.ts
diff --git a/eventmesh-dashboard-view/src/routes/cluster/topic/topic.types.ts b/eventmesh-dashboard-view/src/routes/eventmesh/clusters/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/clusters/topic/topic.types.ts
diff --git a/eventmesh-dashboard-view/src/routes/home/Home.tsx b/eventmesh-dashboard-view/src/routes/home/Home.tsx
index 2c24a906..5a72bdb5 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(({ ...props }, ref) => {
return (
-
+
)
})
diff --git a/eventmesh-dashboard-view/src/routes/k8s/K8s.tsx b/eventmesh-dashboard-view/src/routes/k8s/K8s.tsx
new file mode 100644
index 00000000..f2d4ae95
--- /dev/null
+++ b/eventmesh-dashboard-view/src/routes/k8s/K8s.tsx
@@ -0,0 +1,38 @@
+/*
+ * 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 } from '@mui/material'
+import Construction from '../../components/Construction'
+import RootLayout from '../../components/page/RootLayout'
+
+interface K8sProps extends StackProps {}
+
+const K8s = forwardRef(
+ ({ children, ...props }, ref) => {
+ return (
+
+
+
+ )
+ }
+)
+
+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 366fc0d2..a61649d0 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,70 @@ const getNavigationMenus = (): NavMenuType[] => {
count: 0
},
{
- id: NavMenuIdEnum.Clusters,
- icon: ,
- text: 'Clusters',
- route: '/clusters',
+ id: NavMenuIdEnum.Eventmesh,
+ icon: ,
+ text: 'Eventmesh',
+ route: '/eventmesh',
count: 0,
subMenus: [
{
- id: NavMenuIdEnum.ClusterOverview,
- icon: ,
- text: 'Overview',
- route: 'overview',
- count: 0
- },
- {
- id: NavMenuIdEnum.ClusterRuntime,
- icon: ,
- text: 'Runtime',
- route: 'runtime',
- count: 0
- },
- {
- id: NavMenuIdEnum.ClusterTopic,
- icon: ,
- text: 'Topic',
- route: 'topic',
+ id: NavMenuIdEnum.EventmeshClusters,
+ icon: ,
+ text: 'Cluster',
+ route: '/eventmesh/cluster',
count: 0
},
{
- id: NavMenuIdEnum.ClusterConnection,
- icon: ,
- text: 'Connection',
- route: 'connection',
+ id: NavMenuIdEnum.EventmeshMeta,
+ icon: ,
+ text: 'Meta',
+ route: '/eventmesh/meta',
count: 0
},
{
- id: NavMenuIdEnum.ClusterMessage,
- icon: ,
- text: 'Message',
- route: 'message',
- count: 0
- },
- {
- id: NavMenuIdEnum.ClusterSecurity,
- icon: ,
- text: 'Security',
- route: 'security',
+ id: NavMenuIdEnum.EventmeshRuntime,
+ icon: ,
+ text: 'Runtime',
+ route: '/eventmesh/runtime',
count: 0
}
]
},
+
{
- id: NavMenuIdEnum.Settings,
- icon: ,
- route: '/settings',
- text: 'Settings'
+ id: NavMenuIdEnum.Connection,
+ icon: ,
+ text: 'Connection',
+ route: '/connection',
+ count: 0
+ },
+ {
+ id: NavMenuIdEnum.ROCKET_MQ,
+ icon: ,
+ route: '/rocket-mq',
+ text: 'Rocket MQ',
+ count: 0
},
{
- id: NavMenuIdEnum.Users,
- icon: ,
+ id: NavMenuIdEnum.K8S,
+ icon: ,
+ route: '/k8s',
+ text: 'K8s',
+ count: 0
+ },
+
+ {
+ id: NavMenuIdEnum.User,
+ icon: ,
route: '/users',
text: 'Users'
},
+
{
- id: NavMenuIdEnum.Logs,
- icon: ,
- route: '/logs',
- text: 'Logs'
+ id: NavMenuIdEnum.Settings,
+ icon: ,
+ route: '/settings',
+ text: 'Settings'
}
]
}
diff --git a/eventmesh-dashboard-view/src/routes/navigation/NavigationItem.tsx b/eventmesh-dashboard-view/src/routes/navigation/NavigationItem.tsx
index a4185073..96d07a00 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 565c3bd5..b69e1cc9 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/rocket-mq/RocketMq.tsx b/eventmesh-dashboard-view/src/routes/rocket-mq/RocketMq.tsx
new file mode 100644
index 00000000..3488f42c
--- /dev/null
+++ b/eventmesh-dashboard-view/src/routes/rocket-mq/RocketMq.tsx
@@ -0,0 +1,39 @@
+/*
+ * 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, StackProps } from '@mui/material'
+
+import Construction from '../../components/Construction'
+import RootLayout from '../../components/page/RootLayout'
+
+interface RocketMqProps extends StackProps {}
+
+const RocketMq = forwardRef(
+ ({ children, ...props }, ref) => {
+ return (
+
+
+
+ )
+ }
+)
+
+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 39c1ab00..00000000
--- 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(
- ({ ...props }, ref) => {
- return (
-
-
-
-
-
-
-
-
-
- )
- }
-)
-
-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 (
-
-
-
-
- )
- }
- }
-]
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 b89e5fce..014b88b3 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(({ ...props }, ref) => {
+const User = forwardRef(({ ...props }, ref) => {
return (
@@ -32,5 +32,5 @@ const Users = forwardRef(({ ...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 a06f52ac..13d1f1d5 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/clusters/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/clusters/topic/topic-list/TopicList'
+import { Topic } from '../routes/eventmesh/clusters/topic/topic.types'
import { InstanceTypeEnum } from '../types/types'
import { FetchRespone, ListApiRespone } from './request.types'
From 75df1c1782097611043a7682d27052b85e6d078a Mon Sep 17 00:00:00 2001
From: SUN <350916525@qq.com>
Date: Thu, 13 Jun 2024 14:28:57 +0800
Subject: [PATCH 2/3] ad new files
---
.../src/assets/icons/clusters.svg | 8 ++++
.../src/routes/eventmesh/Eventmesh.tsx | 41 +++++++++++++++++++
2 files changed, 49 insertions(+)
create mode 100644 eventmesh-dashboard-view/src/assets/icons/clusters.svg
create mode 100644 eventmesh-dashboard-view/src/routes/eventmesh/Eventmesh.tsx
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 00000000..373318b5
--- /dev/null
+++ b/eventmesh-dashboard-view/src/assets/icons/clusters.svg
@@ -0,0 +1,8 @@
+
\ No newline at end of file
diff --git a/eventmesh-dashboard-view/src/routes/eventmesh/Eventmesh.tsx b/eventmesh-dashboard-view/src/routes/eventmesh/Eventmesh.tsx
new file mode 100644
index 00000000..17e1bd95
--- /dev/null
+++ b/eventmesh-dashboard-view/src/routes/eventmesh/Eventmesh.tsx
@@ -0,0 +1,41 @@
+/*
+ * 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 Navigation from '../../routes/navigation/Navigation'
+import { grey } from '@mui/material/colors'
+
+interface EventMeshProps extends StackProps {}
+import { Outlet } from 'react-router-dom'
+import RootLayout from '../../components/page/RootLayout'
+import Construction from '../../components/Construction'
+
+const EventMesh = forwardRef(
+ ({ children, ...props }, ref) => {
+ return (
+
+
+
+ )
+ }
+)
+
+EventMesh.displayName = 'EventMesh'
+export default EventMesh
From bc8f4f3be59206e5a51280e15734a2ed857d58bd Mon Sep 17 00:00:00 2001
From: SUN <350916525@qq.com>
Date: Wed, 17 Jul 2024 10:27:44 +0800
Subject: [PATCH 3/3] adjust project structure to adopt new requirement change
---
eventmesh-dashboard-view/src/app.const.ts | 1 +
.../src/assets/icons/index.ts | 4 +
.../Topic.tsx => components/RounderPaper.tsx} | 27 +--
.../src/components/page/Layout.tsx | 6 +-
.../src/components/page/RootLayout.tsx | 2 +-
.../src/routes/Routes.tsx | 42 ++--
.../src/routes/eventmesh/Eventmesh.tsx | 27 ++-
.../cluster/cluster-menu/ClusterMenu.tsx | 107 ++++++++++
.../connection/Connection.tsx | 0
.../{clusters => cluster}/message/Message.tsx | 0
.../overview/Overview.tsx | 6 +-
.../{clusters => cluster}/runtime/Runtime.tsx | 0
.../security/Security.tsx | 0
.../routes/eventmesh/cluster/topic/Topic.tsx | 64 ++++++
.../topic/stats/AbnormalTopicCount.tsx | 0
.../topic/stats/Stats.tsx | 0
.../topic/stats/StatsChart.tsx | 0
.../topic/stats/TopicCount.tsx | 0
.../topic/stats/stats.types.ts | 0
.../topic/stats/topic-stats.types.ts | 0
.../topic/topic-list/TopicList.tsx | 3 +-
.../topic/topic.const.ts | 0
.../topic/topic.types.ts | 0
.../routes/eventmesh/clusters/ClusterList.tsx | 189 ++++++++++++++++++
.../routes/eventmesh/clusters/ClusterStat.tsx | 44 ++++
.../routes/eventmesh/clusters/Clusters.tsx | 20 +-
.../clusters/cluster.type.ts} | 28 +--
.../src/routes/navigation/Navigation.tsx | 27 +--
.../src/service/topics.ts | 6 +-
29 files changed, 488 insertions(+), 115 deletions(-)
rename eventmesh-dashboard-view/src/{routes/eventmesh/clusters/topic/Topic.tsx => components/RounderPaper.tsx} (62%)
create mode 100644 eventmesh-dashboard-view/src/routes/eventmesh/cluster/cluster-menu/ClusterMenu.tsx
rename eventmesh-dashboard-view/src/routes/eventmesh/{clusters => cluster}/connection/Connection.tsx (100%)
rename eventmesh-dashboard-view/src/routes/eventmesh/{clusters => cluster}/message/Message.tsx (100%)
rename eventmesh-dashboard-view/src/routes/eventmesh/{clusters => cluster}/overview/Overview.tsx (92%)
rename eventmesh-dashboard-view/src/routes/eventmesh/{clusters => cluster}/runtime/Runtime.tsx (100%)
rename eventmesh-dashboard-view/src/routes/eventmesh/{clusters => cluster}/security/Security.tsx (100%)
create mode 100644 eventmesh-dashboard-view/src/routes/eventmesh/cluster/topic/Topic.tsx
rename eventmesh-dashboard-view/src/routes/eventmesh/{clusters => cluster}/topic/stats/AbnormalTopicCount.tsx (100%)
rename eventmesh-dashboard-view/src/routes/eventmesh/{clusters => cluster}/topic/stats/Stats.tsx (100%)
rename eventmesh-dashboard-view/src/routes/eventmesh/{clusters => cluster}/topic/stats/StatsChart.tsx (100%)
rename eventmesh-dashboard-view/src/routes/eventmesh/{clusters => cluster}/topic/stats/TopicCount.tsx (100%)
rename eventmesh-dashboard-view/src/routes/eventmesh/{clusters => cluster}/topic/stats/stats.types.ts (100%)
rename eventmesh-dashboard-view/src/routes/eventmesh/{clusters => cluster}/topic/stats/topic-stats.types.ts (100%)
rename eventmesh-dashboard-view/src/routes/eventmesh/{clusters => cluster}/topic/topic-list/TopicList.tsx (98%)
rename eventmesh-dashboard-view/src/routes/eventmesh/{clusters => cluster}/topic/topic.const.ts (100%)
rename eventmesh-dashboard-view/src/routes/eventmesh/{clusters => cluster}/topic/topic.types.ts (100%)
create mode 100644 eventmesh-dashboard-view/src/routes/eventmesh/clusters/ClusterList.tsx
create mode 100644 eventmesh-dashboard-view/src/routes/eventmesh/clusters/ClusterStat.tsx
rename eventmesh-dashboard-view/src/routes/{RootLayout.tsx => eventmesh/clusters/cluster.type.ts} (61%)
diff --git a/eventmesh-dashboard-view/src/app.const.ts b/eventmesh-dashboard-view/src/app.const.ts
index 229ee9fb..18f3f86b 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/index.ts b/eventmesh-dashboard-view/src/assets/icons/index.ts
index c0ecab7f..f3200237 100644
--- a/eventmesh-dashboard-view/src/assets/icons/index.ts
+++ b/eventmesh-dashboard-view/src/assets/icons/index.ts
@@ -23,6 +23,8 @@ import FoundationIcon from '@mui/icons-material/Foundation'
import RefreshIcon from '@mui/icons-material/Refresh'
import PushPinIcon from '@mui/icons-material/PushPin'
import PushPinOutlinedIcon from '@mui/icons-material/PushPinOutlined'
+import ListIcon from '@mui/icons-material/List';
+import StackedBarChartIcon from '@mui/icons-material/StackedBarChart';
import { ReactComponent as EventMeshLogoIcon } from './eventmesh-logo.svg'
import { ReactComponent as EventMeshTopicIcon } from './eventmesh-topic.svg'
@@ -49,6 +51,8 @@ export const Icons = {
Refresh: RefreshIcon,
PushPin: PushPinIcon,
PushPinOutlined: PushPinOutlinedIcon,
+ List: ListIcon,
+ StackedBarChart: StackedBarChartIcon,
EventMeshLogo: EventMeshLogoIcon,
EventMeshTopic: EventMeshTopicIcon,
diff --git a/eventmesh-dashboard-view/src/routes/eventmesh/clusters/topic/Topic.tsx b/eventmesh-dashboard-view/src/components/RounderPaper.tsx
similarity index 62%
rename from eventmesh-dashboard-view/src/routes/eventmesh/clusters/topic/Topic.tsx
rename to eventmesh-dashboard-view/src/components/RounderPaper.tsx
index 30c61163..a1a30f90 100644
--- a/eventmesh-dashboard-view/src/routes/eventmesh/clusters/topic/Topic.tsx
+++ b/eventmesh-dashboard-view/src/components/RounderPaper.tsx
@@ -18,23 +18,16 @@
*/
import React, { forwardRef } from 'react'
-import { Box, BoxProps, Stack } from '@mui/material'
-import Page from '../../../../components/page/Layout'
-import Stats from './stats/Stats'
-import TopicList from './topic-list/TopicList'
+import { Paper, PaperProps } from '@mui/material'
+import { AppSectionBoxShadow } from '../app.const'
+import styled from '@emotion/styled'
-interface TopicProps extends BoxProps {}
+interface RounderPaperProps extends PaperProps {}
-const Topic = forwardRef(({ ...props }, ref) => {
- return (
-
-
-
-
-
-
- )
-})
+const RounderPaper = styled(Paper)(() => ({
+ borderRadius: 16,
+ boxShadow: AppSectionBoxShadow
+}))
-Topic.displayName = 'Topic'
-export default Topic
+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 267cf7e5..0361f825 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(
- ({ children, ...props }, ref) => {
+ ({ sx, children, ...props }, ref) => {
return (
{children}
diff --git a/eventmesh-dashboard-view/src/components/page/RootLayout.tsx b/eventmesh-dashboard-view/src/components/page/RootLayout.tsx
index 0135ee83..dbfb47ce 100644
--- a/eventmesh-dashboard-view/src/components/page/RootLayout.tsx
+++ b/eventmesh-dashboard-view/src/components/page/RootLayout.tsx
@@ -36,7 +36,7 @@ const RootLayout = forwardRef(
bgcolor: grey[100]
}}>
- {children}
+ {children}
)
}
diff --git a/eventmesh-dashboard-view/src/routes/Routes.tsx b/eventmesh-dashboard-view/src/routes/Routes.tsx
index 0ee9082c..3ad8a27e 100644
--- a/eventmesh-dashboard-view/src/routes/Routes.tsx
+++ b/eventmesh-dashboard-view/src/routes/Routes.tsx
@@ -20,19 +20,19 @@
import React from 'react'
import { useRoutes, Navigate } from 'react-router-dom'
import Home from './home/Home'
-import ClusterOverView from './eventmesh/clusters/overview/Overview'
-import ClusterTopic from './eventmesh/clusters/topic/Topic'
-import ClusterRuntime from './eventmesh/clusters/runtime/Runtime'
-import ClusterConnection from './eventmesh/clusters/connection/Connection'
-import ClusterMessage from './eventmesh/clusters/message/Message'
-import ClusterSecurity from './eventmesh/clusters/security/Security'
+import ClusterOverView from './eventmesh/cluster/overview/Overview'
+import ClusterTopic from './eventmesh/cluster/topic/Topic'
+import ClusterRuntime from './eventmesh/cluster/runtime/Runtime'
+import ClusterConnection from './eventmesh/cluster/connection/Connection'
+import ClusterMessage from './eventmesh/cluster/message/Message'
+import ClusterSecurity from './eventmesh/cluster/security/Security'
import User from './user/User'
import Settings from './settings/Settings'
-import Clusters from './eventmesh/clusters/Clusters'
import K8s from './k8s/K8s'
import RocketMq from './rocket-mq/RocketMq'
import Connection from './connection/Connection'
import EventMesh from './eventmesh/Eventmesh'
+import Clusters from './eventmesh/clusters/Clusters'
const AppRoutes = () => {
return useRoutes([
@@ -40,34 +40,26 @@ const AppRoutes = () => {
path: '*',
element:
},
+ { path: '/', element: },
{ path: 'home', element: },
{
- path: 'eventmesh',
+ path: 'eventmesh-cluster',
element: ,
children: [
- {
- path: 'clusters',
- element: ,
- children: [
- {
- path: '*',
- element:
- },
- { path: ':clusterId/overview', element: },
- { path: ':clusterId/runtime', element: },
- { path: ':clusterId/topic', element: },
- { path: ':clusterId/connection', element: },
- { path: ':clusterId/message', element: },
- { path: ':clusterId/security', element: }
- ]
- }
+ { path: 'list', element: },
+ { path: ':clusterId/overview', element: },
+ { path: ':clusterId/runtime', element: },
+ { path: ':clusterId/topic', element: },
+ { path: ':clusterId/connection', element: },
+ { path: ':clusterId/message', element: },
+ { path: ':clusterId/security', element: }
]
},
{ path: 'connection', element: },
{ path: 'rocket-mq', element: },
{ path: 'k8s', element: },
{ path: 'settings', element: },
- { path: 'user', element: },
+ { path: 'user', element: }
])
}
diff --git a/eventmesh-dashboard-view/src/routes/eventmesh/Eventmesh.tsx b/eventmesh-dashboard-view/src/routes/eventmesh/Eventmesh.tsx
index 17e1bd95..f8d3fb64 100644
--- a/eventmesh-dashboard-view/src/routes/eventmesh/Eventmesh.tsx
+++ b/eventmesh-dashboard-view/src/routes/eventmesh/Eventmesh.tsx
@@ -19,23 +19,34 @@
import React, { forwardRef } from 'react'
import { Box, Stack, StackProps } from '@mui/material'
-import Navigation from '../../routes/navigation/Navigation'
-import { grey } from '@mui/material/colors'
interface EventMeshProps extends StackProps {}
-import { Outlet } from 'react-router-dom'
import RootLayout from '../../components/page/RootLayout'
-import Construction from '../../components/Construction'
+import Page from '../../components/page/Layout'
+import { Outlet, matchPath, useLocation } from 'react-router-dom'
+import ClusterMenu from './cluster/cluster-menu/ClusterMenu'
-const EventMesh = forwardRef(
+const Eventmesh = forwardRef(
({ children, ...props }, ref) => {
+ const { pathname } = useLocation()
+
+ const isEventmeshClusterPath =
+ !!matchPath('/eventmesh-cluster/*', pathname) &&
+ !['/eventmesh-cluster/list', '/eventmesh-cluster/list/'].includes(
+ pathname
+ )
+
return (
-
+
+ {isEventmeshClusterPath && }
+
+
)
}
)
-EventMesh.displayName = 'EventMesh'
-export default EventMesh
+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 00000000..efb17ab1
--- /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(
+ ({ ...props }, ref) => {
+ const navigate = useNavigate()
+ const { clusterId } = useParams()
+
+ return (
+
+
+
+
+
+ Cluster List
+
+
+ 1
+
+
+
+ navigate(`${clusterId}/overview`)}>
+ Overview
+
+ {
+ navigate(`${clusterId}/topic`)
+ }}>
+ Topic
+
+ Message
+ Meta
+ Runtime
+ Storage
+ User
+ Log
+ Setting
+ Config
+
+
+ )
+ }
+)
+
+ClusterMenu.displayName = 'ClusterMenu'
+export default ClusterMenu
diff --git a/eventmesh-dashboard-view/src/routes/eventmesh/clusters/connection/Connection.tsx b/eventmesh-dashboard-view/src/routes/eventmesh/cluster/connection/Connection.tsx
similarity index 100%
rename from eventmesh-dashboard-view/src/routes/eventmesh/clusters/connection/Connection.tsx
rename to eventmesh-dashboard-view/src/routes/eventmesh/cluster/connection/Connection.tsx
diff --git a/eventmesh-dashboard-view/src/routes/eventmesh/clusters/message/Message.tsx b/eventmesh-dashboard-view/src/routes/eventmesh/cluster/message/Message.tsx
similarity index 100%
rename from eventmesh-dashboard-view/src/routes/eventmesh/clusters/message/Message.tsx
rename to eventmesh-dashboard-view/src/routes/eventmesh/cluster/message/Message.tsx
diff --git a/eventmesh-dashboard-view/src/routes/eventmesh/clusters/overview/Overview.tsx b/eventmesh-dashboard-view/src/routes/eventmesh/cluster/overview/Overview.tsx
similarity index 92%
rename from eventmesh-dashboard-view/src/routes/eventmesh/clusters/overview/Overview.tsx
rename to eventmesh-dashboard-view/src/routes/eventmesh/cluster/overview/Overview.tsx
index 48de4869..5cda7403 100644
--- a/eventmesh-dashboard-view/src/routes/eventmesh/clusters/overview/Overview.tsx
+++ b/eventmesh-dashboard-view/src/routes/eventmesh/cluster/overview/Overview.tsx
@@ -26,9 +26,9 @@ interface HomeProps extends BoxProps {}
const Home = forwardRef(({ ...props }, ref) => {
return (
-
-
-
+
+
+
)
})
diff --git a/eventmesh-dashboard-view/src/routes/eventmesh/clusters/runtime/Runtime.tsx b/eventmesh-dashboard-view/src/routes/eventmesh/cluster/runtime/Runtime.tsx
similarity index 100%
rename from eventmesh-dashboard-view/src/routes/eventmesh/clusters/runtime/Runtime.tsx
rename to eventmesh-dashboard-view/src/routes/eventmesh/cluster/runtime/Runtime.tsx
diff --git a/eventmesh-dashboard-view/src/routes/eventmesh/clusters/security/Security.tsx b/eventmesh-dashboard-view/src/routes/eventmesh/cluster/security/Security.tsx
similarity index 100%
rename from eventmesh-dashboard-view/src/routes/eventmesh/clusters/security/Security.tsx
rename to eventmesh-dashboard-view/src/routes/eventmesh/cluster/security/Security.tsx
diff --git a/eventmesh-dashboard-view/src/routes/eventmesh/cluster/topic/Topic.tsx b/eventmesh-dashboard-view/src/routes/eventmesh/cluster/topic/Topic.tsx
new file mode 100644
index 00000000..9626475c
--- /dev/null
+++ b/eventmesh-dashboard-view/src/routes/eventmesh/cluster/topic/Topic.tsx
@@ -0,0 +1,64 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements. See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership. The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import React, { forwardRef } from 'react'
+import { Box, BoxProps, Button, Stack, Tab, Tabs } from '@mui/material'
+import Page from '../../../../components/page/Layout'
+import Stats from './stats/Stats'
+import TopicList from './topic-list/TopicList'
+import { styled } from '@mui/material/styles'
+
+interface TopicProps extends BoxProps {}
+
+const PagSubMenuButton = styled(Button)({
+ paddingLeft: 8,
+ paddingRight: 8,
+ paddingTop: 4,
+ paddingBottom: 4,
+ borderRadius: 8,
+ textTransform: 'none',
+ color: '#43497a',
+ boxShadow: 'none',
+ fontSize: 'small',
+
+ '&.active': {
+ backgroundColor: '#17c8eb',
+ color: '#fff',
+ boxShadow: '2px 2px 20px 5px rgba(0,0,0,0.05)'
+ }
+})
+
+const Topic = forwardRef(({ ...props }, ref) => {
+ return (
+
+
+ Overview
+ Topic List
+
+
+
+
+
+
+
+ )
+})
+
+Topic.displayName = 'Topic'
+export default Topic
diff --git a/eventmesh-dashboard-view/src/routes/eventmesh/clusters/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/eventmesh/clusters/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/eventmesh/clusters/topic/stats/Stats.tsx b/eventmesh-dashboard-view/src/routes/eventmesh/cluster/topic/stats/Stats.tsx
similarity index 100%
rename from eventmesh-dashboard-view/src/routes/eventmesh/clusters/topic/stats/Stats.tsx
rename to eventmesh-dashboard-view/src/routes/eventmesh/cluster/topic/stats/Stats.tsx
diff --git a/eventmesh-dashboard-view/src/routes/eventmesh/clusters/topic/stats/StatsChart.tsx b/eventmesh-dashboard-view/src/routes/eventmesh/cluster/topic/stats/StatsChart.tsx
similarity index 100%
rename from eventmesh-dashboard-view/src/routes/eventmesh/clusters/topic/stats/StatsChart.tsx
rename to eventmesh-dashboard-view/src/routes/eventmesh/cluster/topic/stats/StatsChart.tsx
diff --git a/eventmesh-dashboard-view/src/routes/eventmesh/clusters/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/eventmesh/clusters/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/eventmesh/clusters/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/eventmesh/clusters/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/eventmesh/clusters/topic/stats/topic-stats.types.ts b/eventmesh-dashboard-view/src/routes/eventmesh/cluster/topic/stats/topic-stats.types.ts
similarity index 100%
rename from eventmesh-dashboard-view/src/routes/eventmesh/clusters/topic/stats/topic-stats.types.ts
rename to eventmesh-dashboard-view/src/routes/eventmesh/cluster/topic/stats/topic-stats.types.ts
diff --git a/eventmesh-dashboard-view/src/routes/eventmesh/clusters/topic/topic-list/TopicList.tsx b/eventmesh-dashboard-view/src/routes/eventmesh/cluster/topic/topic-list/TopicList.tsx
similarity index 98%
rename from eventmesh-dashboard-view/src/routes/eventmesh/clusters/topic/topic-list/TopicList.tsx
rename to eventmesh-dashboard-view/src/routes/eventmesh/cluster/topic/topic-list/TopicList.tsx
index 77def6e5..378fa95e 100644
--- a/eventmesh-dashboard-view/src/routes/eventmesh/clusters/topic/topic-list/TopicList.tsx
+++ b/eventmesh-dashboard-view/src/routes/eventmesh/cluster/topic/topic-list/TopicList.tsx
@@ -29,7 +29,6 @@ import {
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 {
Topic,
TopicCreationStatusEnum,
@@ -105,7 +104,7 @@ const TopicList = forwardRef(