add topic statistics ui

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,

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<typeof Paper, AbnormalTopicCountProps>(
+  ({ ...props }, ref) => {
+    return (
+      <Paper
+        sx={{
+          height: 80,
+          pt: 1,
+          pb: 1,
+          pr: {
+            sm: 1,
+            md: 3
+          },
+          pl: {
+            sm: 1,
+            md: 3
+          }
+        }}>
+        <Stack
+          direction="row"
+          justifyContent="space-between"
+          alignItems="center">
+          <Stack alignItems="flex-start">
+            <Typography paragraph variant="caption" sx={{ m: 0 }}>
+              异常状态 Topic 数量
+            </Typography>
+            <Button sx={{ fontSize: 13, mb: -2 }} size="small">
+              查看详情
+            </Button>
+          </Stack>
+          <Stack sx={{ width: 120 }} alignItems="center">
+            <Typography
+              variant="subtitle1"
+              sx={{
+                width: 32,
+                height: 32,
+                borderRadius: 16,
+                bgcolor: red[400],
+                boxSizing: 'content-box',
+                border: `8px solid ${red[50]}`,
+                textAlign: 'center',
+                fontWeight: 'bolder',
+                color: 'white'
+              }}>
+              2
+            </Typography>
+          </Stack>
+        </Stack>
+      </Paper>
+    )
+  }
+)
+
+AbnormalTopicCount.displayName = 'AbnormalTopicCount'
+export default AbnormalTopicCount

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<typeof Box, TopicProps>(({ ...props }, ref) => {
-  return <Box ref={ref}>Topic</Box>;
-});
+  return (
+    <Page>
+      <Stack sx={{ width: 1, height: 1, p: 2 }} spacing={1}>
+        <Stack direction="row" spacing={1}>
+          <Stack sx={{ width: { sm: 180, md: 240, lg: 360 } }} spacing={1}>
+            <TopicCount />
+            <AbnormalTopicCount />
+          </Stack>
+          <Stack>
+            <Stack direction="row">
+              <Box>Filter</Box>
+              <Box>Refresh</Box>
+            </Stack>
+            <Stack direction="row">
+              <Box sx={{ flexFlow: 1 }}>Topic Stats</Box>
+              <Box>Message Stats</Box>
+              <Box>Average Message Stats</Box>
+            </Stack>
+          </Stack>
+        </Stack>
+        <Stack sx={{ flexGrow: 1 }}>
+          <Stack
+            direction="row"
+            justifyContent="space-between"
+            alignItems="center">
+            <Box> Search</Box>
+            <Box> Add</Box>
+          </Stack>
+          <Paper sx={{ flexGrow: 1 }}>List</Paper>
+        </Stack>
+      </Stack>
+    </Page>
+  )
+})
 
-Topic.displayName = "Topic";
-export default Topic;
+Topic.displayName = 'Topic'
+export default Topic

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<typeof Paper, TopicCountProps>(
+  ({ ...props }, ref) => {
+    return (
+      <Paper
+        sx={{
+          height: 80,
+          pt: 1,
+          pb: 1,
+          pr: {
+            sm: 1,
+            md: 3
+          },
+          pl: {
+            sm: 1,
+            md: 3
+          }
+        }}>
+        <Stack
+          direction="row"
+          justifyContent="space-between"
+          alignItems="center">
+          <Icons.EventMeshTopic />
+          <Stack sx={{ width: 120 }} alignItems="center">
+            <Typography paragraph variant="caption" sx={{ m: 0 }}>
+              Topic 总数量
+            </Typography>
+            <Typography
+              paragraph
+              variant="h6"
+              color="primary"
+              sx={{ m: 0, fontWeight: 'bold' }}>
+              5
+            </Typography>
+          </Stack>
+        </Stack>
+      </Paper>
+    )
+  }
+)
+
+TopicCount.displayName = 'TopicCount'
+export default TopicCount

eventmesh-dashboard-view/src/routes/users/Users.tsx

@@ -7,7 +7,7 @@ interface UsersProps extends BoxProps {}
 
 const Users = forwardRef<typeof Box, UsersProps>(({ ...props }, ref) => {
   return (
-    <Page ref={ref}>
+    <Page>
       <Construction />
     </Page>
   )