From da3fc68ed1b41d10c3e37628a8e35d96b328b0ce Mon Sep 17 00:00:00 2001
From: SUN <350916525@qq.com>
Date: Fri, 8 Mar 2024 00:18:37 +0800
Subject: [PATCH] add topic statistics ui
---
.../src/assets/icons/eventmesh-topic.svg | 13 ++++
.../src/assets/icons/index.ts | 3 +
.../src/routes/topic/AbnormalTopicCount.tsx | 60 +++++++++++++++++++
.../src/routes/topic/Topic.tsx | 47 +++++++++++++--
.../src/routes/topic/TopicCount.tsx | 48 +++++++++++++++
.../src/routes/users/Users.tsx | 2 +-
6 files changed, 166 insertions(+), 7 deletions(-)
create mode 100644 eventmesh-dashboard-view/src/assets/icons/eventmesh-topic.svg
create mode 100644 eventmesh-dashboard-view/src/routes/topic/AbnormalTopicCount.tsx
create mode 100644 eventmesh-dashboard-view/src/routes/topic/TopicCount.tsx
diff --git a/eventmesh-dashboard-view/src/assets/icons/eventmesh-topic.svg b/eventmesh-dashboard-view/src/assets/icons/eventmesh-topic.svg
new file mode 100644
index 00000000..05e60b0d
--- /dev/null
+++ b/eventmesh-dashboard-view/src/assets/icons/eventmesh-topic.svg
@@ -0,0 +1,13 @@
+
+
\ 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 7c28b8ce..ecf08a63 100644
--- a/eventmesh-dashboard-view/src/assets/icons/index.ts
+++ b/eventmesh-dashboard-view/src/assets/icons/index.ts
@@ -3,6 +3,7 @@ import AddCircleOutlineOutlinedIcon from '@mui/icons-material/AddCircleOutlineOu
import FoundationIcon from '@mui/icons-material/Foundation';
import { ReactComponent as EventMeshLogoIcon } from './eventmesh-logo.svg';
+import { ReactComponent as EventMeshTopicIcon } from './eventmesh-topic.svg';
import { ReactComponent as HomeIcon } from './home.svg';
import { ReactComponent as RuntimeIcon } from './runtime.svg';
import { ReactComponent as TopicIcon } from './topic.svg';
@@ -22,6 +23,8 @@ export const Icons = {
EventMeshLogo: EventMeshLogoIcon,
+ EventMeshTopic: EventMeshTopicIcon,
+
Home: HomeIcon,
Runtime: RuntimeIcon,
Topic: TopicIcon,
diff --git a/eventmesh-dashboard-view/src/routes/topic/AbnormalTopicCount.tsx b/eventmesh-dashboard-view/src/routes/topic/AbnormalTopicCount.tsx
new file mode 100644
index 00000000..0c413cd7
--- /dev/null
+++ b/eventmesh-dashboard-view/src/routes/topic/AbnormalTopicCount.tsx
@@ -0,0 +1,60 @@
+import React, { forwardRef } from 'react'
+import { Paper, PaperProps, Stack, Typography, Button } from '@mui/material'
+import { red } from '@mui/material/colors'
+
+interface AbnormalTopicCountProps extends PaperProps {}
+
+const AbnormalTopicCount = forwardRef(
+ ({ ...props }, ref) => {
+ return (
+
+
+
+
+ 异常状态 Topic 数量
+
+
+
+
+
+ 2
+
+
+
+
+ )
+ }
+)
+
+AbnormalTopicCount.displayName = 'AbnormalTopicCount'
+export default AbnormalTopicCount
diff --git a/eventmesh-dashboard-view/src/routes/topic/Topic.tsx b/eventmesh-dashboard-view/src/routes/topic/Topic.tsx
index 47c10e85..cce861e5 100644
--- a/eventmesh-dashboard-view/src/routes/topic/Topic.tsx
+++ b/eventmesh-dashboard-view/src/routes/topic/Topic.tsx
@@ -1,11 +1,46 @@
-import React, { forwardRef } from "react";
-import { Box, BoxProps } from "@mui/material";
+import React, { forwardRef } from 'react'
+import { Box, BoxProps, Paper, Stack } from '@mui/material'
+import Page from '../../components/Page'
+import TopicCount from './TopicCount'
+import AbnormalTopicCount from './AbnormalTopicCount'
interface TopicProps extends BoxProps {}
const Topic = forwardRef(({ ...props }, ref) => {
- return Topic;
-});
+ return (
+
+
+
+
+
+
+
+
+
+ Filter
+ Refresh
+
+
+ Topic Stats
+ Message Stats
+ Average Message Stats
+
+
+
+
+
+ Search
+ Add
+
+ List
+
+
+
+ )
+})
-Topic.displayName = "Topic";
-export default Topic;
\ No newline at end of file
+Topic.displayName = 'Topic'
+export default Topic
diff --git a/eventmesh-dashboard-view/src/routes/topic/TopicCount.tsx b/eventmesh-dashboard-view/src/routes/topic/TopicCount.tsx
new file mode 100644
index 00000000..22c7b66e
--- /dev/null
+++ b/eventmesh-dashboard-view/src/routes/topic/TopicCount.tsx
@@ -0,0 +1,48 @@
+import React, { forwardRef } from 'react'
+import { Paper, PaperProps, Stack, Typography } from '@mui/material'
+import { Icons } from '../../assets/icons'
+
+interface TopicCountProps extends PaperProps {}
+
+const TopicCount = forwardRef(
+ ({ ...props }, ref) => {
+ return (
+
+
+
+
+
+ Topic 总数量
+
+
+ 5
+
+
+
+
+ )
+ }
+)
+
+TopicCount.displayName = 'TopicCount'
+export default TopicCount
diff --git a/eventmesh-dashboard-view/src/routes/users/Users.tsx b/eventmesh-dashboard-view/src/routes/users/Users.tsx
index 7e2cf2c8..22393bec 100644
--- a/eventmesh-dashboard-view/src/routes/users/Users.tsx
+++ b/eventmesh-dashboard-view/src/routes/users/Users.tsx
@@ -7,7 +7,7 @@ interface UsersProps extends BoxProps {}
const Users = forwardRef(({ ...props }, ref) => {
return (
-
+
)