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/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/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..f3200237 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 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/RounderPaper.tsx b/eventmesh-dashboard-view/src/components/RounderPaper.tsx new file mode 100644 index 00000000..a1a30f90 --- /dev/null +++ b/eventmesh-dashboard-view/src/components/RounderPaper.tsx @@ -0,0 +1,33 @@ +/* + * 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 { Paper, PaperProps } from '@mui/material' +import { AppSectionBoxShadow } from '../app.const' +import styled from '@emotion/styled' + +interface RounderPaperProps extends PaperProps {} + +const RounderPaper = styled(Paper)(() => ({ + borderRadius: 16, + boxShadow: AppSectionBoxShadow +})) + +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 462b3bb5..dbfb47ce 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( bgcolor: grey[100] }}> - {children} + {children} ) } diff --git a/eventmesh-dashboard-view/src/routes/Routes.tsx b/eventmesh-dashboard-view/src/routes/Routes.tsx index 5cf7f7ad..3ad8a27e 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: }, + { path: '/', element: }, { path: 'home', element: }, { - path: 'clusters', - element: , + path: 'eventmesh-cluster', + element: , children: [ - { path: 'clusters', element: }, - { - path: ':clusterId', - children: [ - { - path: '*', - element: - }, - { path: 'overview', element: }, - { path: 'runtime', element: }, - { path: 'topic', element: }, - { path: 'connection', element: }, - { path: 'message', element: }, - { path: '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: 'users', element: }, - { path: 'logs', element: } + { path: 'user', element: } ]) } 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 060a18d0..07b53b17 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(({ ...props }, ref) => { - return Clusters -}) +const Connection = forwardRef( + ({ ...props }, ref) => { + return ( + + + + ) + } +) -Clusters.displayName = 'Clusters' -export default Clusters +Connection.displayName = 'Connection' +export default Connection 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..f8d3fb64 --- /dev/null +++ b/eventmesh-dashboard-view/src/routes/eventmesh/Eventmesh.tsx @@ -0,0 +1,52 @@ +/* + * 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' + +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' + +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 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/cluster/connection/Connection.tsx b/eventmesh-dashboard-view/src/routes/eventmesh/cluster/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/cluster/connection/Connection.tsx index 30c32647..894c9260 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 a4114530..465b7bd0 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 61c2c89c..5cda7403 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(({ ...props }, ref) => { return ( - - - + + + ) }) 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 8c135f7e..7156249e 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 fa9af071..52f98f4b 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 d0ec53c6..9626475c 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(({ ...props }, ref) => { return ( - - + + + Overview + Topic List + + + 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 479dcb94..c7506703 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 380eafc6..7b2eb163 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% rename from eventmesh-dashboard-view/src/routes/cluster/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/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 a1a8e6c2..378fa95e 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( + + { + navigate(`/eventmesh-cluster/${clusterId}/overview`) + } + })} + /> + + + ) + } +) + +ClusterList.displayName = 'ClusterList' +export default ClusterList + +const getTopicColumns = ({ + handlerIdClick +}: { + handlerIdClick: (clusterId: string | number) => void +}): GridColDef[] => { + return [ + { + field: 'id', + headerName: '集群 ID', + width: 160, + disableColumnMenu: true, + filterable: false, + sortable: false, + renderCell: (row) => { + return ( + + ) + } + }, + { + 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 ( + + {row.value} + + ) + } + }, + { + field: 'healthStatus', + headerName: '健康状态', + width: 180, + disableColumnMenu: true, + filterable: false, + sortable: false, + renderCell: (row) => { + return ( + + {row.value} + + ) + } + }, + { + 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 ( + + + + ) + } + } + ] +} diff --git a/eventmesh-dashboard-view/src/routes/RootLayout.tsx b/eventmesh-dashboard-view/src/routes/eventmesh/clusters/ClusterStat.tsx similarity index 53% rename from eventmesh-dashboard-view/src/routes/RootLayout.tsx rename to eventmesh-dashboard-view/src/routes/eventmesh/clusters/ClusterStat.tsx index 6e2c5cb9..4b58f42b 100644 --- a/eventmesh-dashboard-view/src/routes/RootLayout.tsx +++ b/eventmesh-dashboard-view/src/routes/eventmesh/clusters/ClusterStat.tsx @@ -17,28 +17,28 @@ * under the License. */ -import React from 'react' -import { Box, Stack } from '@mui/material' - -import { Outlet } from 'react-router-dom' +import React, { forwardRef, useState } from 'react' +import { Box, BoxProps, Button, Paper, Stack, TextField } from '@mui/material' +import Page from '../../../components/page/Layout' import { grey } from '@mui/material/colors' -import Navigation from './navigation/Navigation' -const RootLayout = () => { - return ( - - - - - - - ) -} +import { DataGrid, GridColDef, GridRowsProp } from '@mui/x-data-grid' +import RounderPaper from '../../../components/RounderPaper' + +interface ClusterStatProps extends BoxProps {} + +const ClusterStat = forwardRef( + ({ ...props }, ref) => { + + return ( + + + 已启用且健康的集群数量/集群总量 + + + ) + } +) -export default RootLayout +ClusterStat.displayName = 'ClusterStat' +export default ClusterStat diff --git a/eventmesh-dashboard-view/src/routes/eventmesh/clusters/Clusters.tsx b/eventmesh-dashboard-view/src/routes/eventmesh/clusters/Clusters.tsx new file mode 100644 index 00000000..d5703696 --- /dev/null +++ b/eventmesh-dashboard-view/src/routes/eventmesh/clusters/Clusters.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, Stack, StackProps } from '@mui/material' + +interface ClustersProps extends StackProps {} +import ClusterList from './ClusterList' +import ClusterStat from './ClusterStat' + +const Clusters = forwardRef( + ({ children, ...props }, ref) => { + return ( + + + + + ) + } +) + +Clusters.displayName = 'Clusters' +export default Clusters diff --git a/eventmesh-dashboard-view/src/routes/eventmesh/clusters/cluster.type.ts b/eventmesh-dashboard-view/src/routes/eventmesh/clusters/cluster.type.ts new file mode 100644 index 00000000..7c22087e --- /dev/null +++ b/eventmesh-dashboard-view/src/routes/eventmesh/clusters/cluster.type.ts @@ -0,0 +1,28 @@ +/* + * Licensed to the Apache Software Foundation (ASF) under one + * or more contributor license agreements. See the NOTICE file + * distributed with this work for additional information + * regarding copyright ownership. The ASF licenses this file + * to you under the Apache License, Version 2.0 (the + * "License"); you may not use this file except in compliance + * with the License. You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ + + +export 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 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/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 a7dcf89d..f2d4ae95 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(({ ...props }, ref) => { - return ( - - - - ) -}) +const K8s = forwardRef( + ({ children, ...props }, ref) => { + return ( + + + + ) + } +) -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 366fc0d2..8803b592 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: , - text: 'Clusters', - route: '/clusters', + id: NavMenuIdEnum.Eventmesh, + icon: , + text: 'Eventmesh', + route: '/eventmesh-cluster/list', 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', - count: 0 - }, - { - id: NavMenuIdEnum.ClusterConnection, - icon: , - text: 'Connection', - route: 'connection', - count: 0 - }, - { - id: NavMenuIdEnum.ClusterMessage, - icon: , - text: 'Message', - route: 'message', - count: 0 - }, - { - id: NavMenuIdEnum.ClusterSecurity, - icon: , - text: 'Security', - route: 'security', - 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' } ] } @@ -130,8 +103,6 @@ const Navigation = forwardRef( 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 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..ab665028 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'