[ISSUE #79] Change to the new UI style (#80)
* added view code
* added navigation interaction
* added empty pages
* add topic statistics ui
* complete topic page style
* update the UI style
---------
Co-authored-by: SUN <350916525@qq.com>
diff --git a/eventmesh-dashboard-view/public/index.html b/eventmesh-dashboard-view/public/index.html
index aa069f2..d99ea62 100644
--- a/eventmesh-dashboard-view/public/index.html
+++ b/eventmesh-dashboard-view/public/index.html
@@ -24,7 +24,7 @@
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
- <title>React App</title>
+ <title>Admin | Eventmesh</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
diff --git a/eventmesh-dashboard-view/src/App.tsx b/eventmesh-dashboard-view/src/App.tsx
index b3a6fd0..fa5dc7a 100644
--- a/eventmesh-dashboard-view/src/App.tsx
+++ b/eventmesh-dashboard-view/src/App.tsx
@@ -1,6 +1,15 @@
import React from 'react'
import { createTheme, ThemeProvider, CssBaseline } from '@mui/material'
import AppRoutes from './routes/Routes'
+import GlobalStyles from '@mui/material/GlobalStyles'
+
+const inputGlobalStyles = (
+ <GlobalStyles
+ styles={{
+ backgroundColor: '#f9fafb'
+ }}
+ />
+)
function App() {
const theme = React.useMemo(
@@ -8,12 +17,14 @@
createTheme({
palette: {
primary: {
- main: '#1f95fc'
- }
+ main: '#43497a'
+ },
+ background: {}
},
typography: {
- fontSize: 14
- }
+ fontSize: 12
+ },
+
}),
[]
) // [prefersDarkMode]
@@ -21,6 +32,7 @@
return (
<ThemeProvider theme={theme}>
<CssBaseline />
+ {inputGlobalStyles}
<AppRoutes />
</ThemeProvider>
)
diff --git a/eventmesh-dashboard-view/src/index.tsx b/eventmesh-dashboard-view/src/index.tsx
index efe2c92..362d8c7 100644
--- a/eventmesh-dashboard-view/src/index.tsx
+++ b/eventmesh-dashboard-view/src/index.tsx
@@ -1,6 +1,5 @@
import React from 'react'
import ReactDOM from 'react-dom/client'
-import './index.css'
import App from './App'
import reportWebVitals from './reportWebVitals'
import { BrowserRouter } from 'react-router-dom'
diff --git a/eventmesh-dashboard-view/src/routes/RootLayout.tsx b/eventmesh-dashboard-view/src/routes/RootLayout.tsx
index d7bc0af..11d2093 100644
--- a/eventmesh-dashboard-view/src/routes/RootLayout.tsx
+++ b/eventmesh-dashboard-view/src/routes/RootLayout.tsx
@@ -15,7 +15,7 @@
bgcolor: grey[100]
}}>
<Navigation />
- <Box sx={{ flexGrow: 1, overflow: 'hidden' }}>
+ <Box sx={{ flexGrow: 1, pl: 4, overflow: 'hidden' }}>
<Outlet />
</Box>
</Stack>
diff --git a/eventmesh-dashboard-view/src/routes/navigation/Navigation.tsx b/eventmesh-dashboard-view/src/routes/navigation/Navigation.tsx
index ac38932..b505400 100644
--- a/eventmesh-dashboard-view/src/routes/navigation/Navigation.tsx
+++ b/eventmesh-dashboard-view/src/routes/navigation/Navigation.tsx
@@ -79,15 +79,15 @@
)
return (
- <Stack sx={{ width: 240, boxShadow: 1, bgcolor: 'white' }}>
+ <Stack sx={{ width: 260, px: 3 }}>
<Box
sx={{
- height: 120,
+ height: 80,
display: 'flex',
justifyContent: 'center',
alignItems: 'centers'
}}>
- <Icons.EventMeshLogo style={{ width: '80%' }} />
+ <Icons.EventMeshLogo style={{ width: '60%' }} />
</Box>
<Divider />
<Stack
@@ -95,7 +95,11 @@
justifyContent="space-between"
alignItems="center"
sx={{ pl: 2, pr: 2, mt: 1, mb: 1 }}>
- <Typography variant="overline" fontSize={12} color={grey[600]}>
+ <Typography
+ variant="overline"
+ fontSize={12}
+ fontWeight="bold"
+ color={grey[600]}>
General
</Typography>
@@ -109,7 +113,7 @@
</Typography>
</Stack>
</Stack>
- <Stack sx={{ pl: 2, pr: 2 }} spacing={0.5}>
+ <Stack sx={{ pl: 2, pr: 2 }} spacing={1}>
{generalMenus.map((item) => {
return (
<NavigationItem
@@ -132,11 +136,15 @@
justifyContent="space-between"
alignItems="center"
sx={{ pl: 2, pr: 2, mt: 1, mb: 1 }}>
- <Typography variant="overline" fontSize={12} color={grey[600]}>
+ <Typography
+ variant="overline"
+ fontSize={12}
+ fontWeight="bold"
+ color={grey[600]}>
System
</Typography>
</Stack>
- <Stack sx={{ pl: 2, pr: 2 }} spacing={0.5}>
+ <Stack sx={{ pl: 2, pr: 2 }} spacing={1}>
{DefSystemMenus.map((item) => {
return (
<NavigationItem
diff --git a/eventmesh-dashboard-view/src/routes/navigation/NavigationItem.tsx b/eventmesh-dashboard-view/src/routes/navigation/NavigationItem.tsx
index cde74e4..7807911 100644
--- a/eventmesh-dashboard-view/src/routes/navigation/NavigationItem.tsx
+++ b/eventmesh-dashboard-view/src/routes/navigation/NavigationItem.tsx
@@ -6,16 +6,36 @@
const NavButton = styled(Button)({
boxShadow: 'none',
width: '100%',
+ paddingLeft: 15,
+ paddingRight: 15,
+ paddingTop: 8,
+ paddingBottom: 8,
+ borderRadius: 8,
textTransform: 'none',
- fontSize: 15,
- color: grey[800],
+ color: '#43497a',
justifyContent: 'flex-start',
'& .MuiButton-startIcon': {
+ padding: 10,
marginRight: 15,
- color: 'inherit'
+ color: 'inherit',
+ backgroundColor: 'white',
+ borderRadius: 8,
+ boxShadow: '1px 1px 5px 1px rgba(0,0,0,0.05)'
+ },
+
+ '&.active': {
+ backgroundColor: 'white',
+ boxShadow: '2px 2px 20px 5px rgba(0,0,0,0.05)',
+
+ '& .MuiButton-startIcon': {
+ boxShadow: 'none',
+ color: 'white',
+ backgroundColor: '#17c8eb'
+ }
}
})
+
interface NavigationItemProps extends ButtonProps {
icon: React.ReactNode
text: string
@@ -29,7 +49,8 @@
<NavButton
startIcon={icon}
variant={active ? 'contained' : 'text'}
- sx={{ color: active ? 'white' : 'inherit' }}
+ className={active ? 'active' : ''}
+ // sx={{ color: active ? 'white' : 'inherit' }}
onClick={onClick}>
<Stack
sx={{ width: 1 }}
@@ -42,7 +63,7 @@
sx={{
height: 15,
fontSize: 13,
- bgcolor: active ? 'white' : grey[200]
+ bgcolor: active ? grey[200] : 'white'
}}
size="small"
color="default"
diff --git a/eventmesh-dashboard-view/src/routes/topic/Topic.tsx b/eventmesh-dashboard-view/src/routes/topic/Topic.tsx
index 5566533..e05c0df 100644
--- a/eventmesh-dashboard-view/src/routes/topic/Topic.tsx
+++ b/eventmesh-dashboard-view/src/routes/topic/Topic.tsx
@@ -9,7 +9,7 @@
const Topic = forwardRef<typeof Box, TopicProps>(({ ...props }, ref) => {
return (
<Page>
- <Stack sx={{ width: 1, height: 1, p: 2 }} spacing={1}>
+ <Stack sx={{ width: 1, height: 1, p: 2 }} spacing={3}>
<Stats />
<TopicList />
</Stack>
diff --git a/eventmesh-dashboard-view/src/routes/topic/stats/AbnormalTopicCount.tsx b/eventmesh-dashboard-view/src/routes/topic/stats/AbnormalTopicCount.tsx
index 0c413cd..07cae35 100644
--- a/eventmesh-dashboard-view/src/routes/topic/stats/AbnormalTopicCount.tsx
+++ b/eventmesh-dashboard-view/src/routes/topic/stats/AbnormalTopicCount.tsx
@@ -1,6 +1,6 @@
import React, { forwardRef } from 'react'
import { Paper, PaperProps, Stack, Typography, Button } from '@mui/material'
-import { red } from '@mui/material/colors'
+import { grey } from '@mui/material/colors'
interface AbnormalTopicCountProps extends PaperProps {}
@@ -9,48 +9,35 @@
return (
<Paper
sx={{
- height: 80,
- pt: 1,
- pb: 1,
- pr: {
- sm: 1,
- md: 3
- },
- pl: {
- sm: 1,
- md: 3
- }
+ width: 1,
+ py: 1,
+ px: 2,
+ borderRadius: 4,
+ boxShadow: '2px 2px 40px 2px rgba(0,0,0,.05)',
+ display: 'flex',
+ flexDirection: 'column'
}}>
<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>
+ <Typography
+ paragraph
+ variant="caption"
+ sx={{ m: 0 }}
+ fontWeight="bold"
+ color={grey[600]}>
+ 异常状态 Topic 数量
+ </Typography>
+ <Button size="small">查看详情</Button>
</Stack>
+ <Typography
+ paragraph
+ variant="h6"
+ color="primary"
+ sx={{ m: 0, fontWeight: 'bold', color: '#43497a' }}>
+ 5
+ </Typography>
</Paper>
)
}
diff --git a/eventmesh-dashboard-view/src/routes/topic/stats/Stats.tsx b/eventmesh-dashboard-view/src/routes/topic/stats/Stats.tsx
index ad0e316..57ad720 100644
--- a/eventmesh-dashboard-view/src/routes/topic/stats/Stats.tsx
+++ b/eventmesh-dashboard-view/src/routes/topic/stats/Stats.tsx
@@ -1,17 +1,10 @@
import React, { forwardRef, useState } from 'react'
-import {
- Stack,
- StackProps,
- Box,
- Select,
- MenuItem,
- Paper,
- Grid
-} from '@mui/material'
+import { Stack, StackProps, Select, MenuItem, Grid, Box } from '@mui/material'
import TopicCount from './TopicCount'
import AbnormalTopicCount from './AbnormalTopicCount'
import { Icons } from '../../../assets/icons'
import StatsChart from './StatsChart'
+import { grey } from '@mui/material/colors'
enum TimeOptionEnum {
LatestHour = 'LATEST_HOUR'
@@ -31,77 +24,82 @@
})
return (
- <Stack direction="row" spacing={1}>
- <Stack sx={{ width: { sm: 180, md: 240, lg: 360 } }} spacing={1}>
- <TopicCount />
- <AbnormalTopicCount />
- </Stack>
+ <Stack spacing={2}>
+ <Grid container columnGap={2} wrap="nowrap">
+ <Grid item sm={4}>
+ <TopicCount />
+ </Grid>
+ <Grid item sm={4}>
+ <AbnormalTopicCount />
+ </Grid>
+ <Grid item sm={4}></Grid>
+ </Grid>
- <Paper sx={{ flexGrow: 1, p: 1 }}>
- <Stack sx={{ width: 1, height: 1 }} spacing={2}>
- <Stack
- direction="row"
- justifyContent="space-between"
- alignItems="center">
- <Stack direction="row" spacing={2}>
- <Select
- sx={{
- fontSize: 14
- }}
- disableUnderline
- displayEmpty
- size="small"
- variant="standard"
- value={statsParams.time ?? ''}>
- <MenuItem value={''}>所有时间段</MenuItem>
- {TimeOptions.map((opt) => {
- return (
- <MenuItem
- key={opt.value}
- value={opt.value}
- sx={{ fontSize: 'inherit' }}>
- {opt.label}
- </MenuItem>
- )
- })}
- </Select>
+ <Stack>
+ <Stack
+ direction="row"
+ justifyContent="space-between"
+ alignItems="center">
+ <Stack direction="row" spacing={2}>
+ <Select
+ sx={{ fontSize: 12, color: grey[500] }}
+ disableUnderline
+ displayEmpty
+ size="small"
+ variant="standard"
+ value={statsParams.time ?? ''}>
+ <MenuItem value={''} sx={{ fontSize: 12 }}>
+ 所有时间段
+ </MenuItem>
+ {TimeOptions.map((opt) => {
+ return (
+ <MenuItem
+ key={opt.value}
+ value={opt.value}
+ sx={{ fontSize: 12 }}>
+ {opt.label}
+ </MenuItem>
+ )
+ })}
+ </Select>
- <Select
- sx={{ fontSize: 14 }}
- displayEmpty
- disableUnderline
- size="small"
- variant="standard"
- value={statsParams.time ?? ''}>
- <MenuItem value={''}>所有 Runtime</MenuItem>
- {TimeOptions.map((opt) => {
- return (
- <MenuItem
- key={opt.value}
- value={opt.value}
- sx={{ fontSize: 'inherit' }}>
- {opt.label}
- </MenuItem>
- )
- })}
- </Select>
- </Stack>
-
- <Icons.Refresh fontSize="inherit" />
+ <Select
+ sx={{ fontSize: 12, color: grey[500] }}
+ displayEmpty
+ disableUnderline
+ size="small"
+ variant="standard"
+ value={statsParams.time ?? ''}>
+ <MenuItem value={''} sx={{ fontSize: 12 }}>
+ 所有 Runtime
+ </MenuItem>
+ {TimeOptions.map((opt) => {
+ return (
+ <MenuItem
+ key={opt.value}
+ value={opt.value}
+ sx={{ fontSize: 12 }}>
+ {opt.label}
+ </MenuItem>
+ )
+ })}
+ </Select>
</Stack>
- <Grid container sx={{ flexGrow: 1 }}>
- <Grid item sm={4}>
- <StatsChart />
- </Grid>
- <Grid item sm={4}>
- <StatsChart />
- </Grid>
- <Grid item sm={4}>
- <StatsChart />
- </Grid>
- </Grid>
+
+ <Icons.Refresh fontSize="inherit" />
</Stack>
- </Paper>
+ <Grid container sx={{ height: 300 }} columnGap={2} wrap="nowrap">
+ <Grid item sm={8}>
+ <StatsChart title="Topic 数量" />
+ </Grid>
+ <Grid item sm={4}>
+ <Stack sx={{ width: 1, height: 1 }} spacing={2}>
+ <StatsChart small title="Topic 消息数量" />
+ <StatsChart small title="Topic Message 平均数量" />
+ </Stack>
+ </Grid>
+ </Grid>
+ </Stack>
</Stack>
)
})
diff --git a/eventmesh-dashboard-view/src/routes/topic/stats/StatsChart.tsx b/eventmesh-dashboard-view/src/routes/topic/stats/StatsChart.tsx
index fb89be2..cde2c66 100644
--- a/eventmesh-dashboard-view/src/routes/topic/stats/StatsChart.tsx
+++ b/eventmesh-dashboard-view/src/routes/topic/stats/StatsChart.tsx
@@ -1,44 +1,71 @@
import React, { forwardRef, useRef, useEffect } from 'react'
-import { Box, BoxProps } from '@mui/material'
+import { Box, BoxProps, Paper } from '@mui/material'
import echarts from '../../../utils/chart'
+import { grey } from '@mui/material/colors'
-interface StatsChartProps extends BoxProps {}
+interface StatsChartProps extends BoxProps {
+ title?: string
+ small?: boolean
+}
const StatsChart = forwardRef<typeof Box, StatsChartProps>(
- ({ ...props }, ref) => {
+ ({ title, small = false, sx, ...props }, ref) => {
const chartElemRef = useRef(null)
const chartInsRef = useRef<echarts.ECharts | null>(null)
useEffect(() => {
if (!chartInsRef.current) {
const chartIns = echarts.init(chartElemRef.current)
- const chartOptions = getChartOptions()
+ const chartOptions = small
+ ? getChartOptionsSmall(title)
+ : getChartOptions(title)
chartIns.setOption(chartOptions)
chartInsRef.current = chartIns
}
}, [])
- return <Box ref={chartElemRef} sx={{ width: 1, height: 1 }}></Box>
+ return (
+ <Paper
+ sx={{
+ ...sx,
+ width: 1,
+ height: 1,
+ borderRadius: 4,
+ boxShadow: '2px 2px 40px 2px rgba(0,0,0,.05)'
+ }}>
+ <Box ref={chartElemRef} sx={{ width: 1, height: 1 }}></Box>
+ </Paper>
+ )
}
)
StatsChart.displayName = 'StatsChart'
export default StatsChart
-const getChartOptions = () => {
+const getChartOptionsSmall = (title?: string) => {
return {
- grid: {
+ title: {
+ text: title,
top: 10,
- left: 40,
- right: 10,
- bottom: 20
+ left: 10,
+ textStyle: {
+ fontSize: 12,
+ color: grey[600]
+ }
+ },
+ grid: {
+ top: 50,
+ left: 50,
+ right: 20,
+ bottom: 30
},
xAxis: {
type: 'category',
splitLine: {
show: true,
lineStyle: {
- type: 'dashed'
+ type: 'dashed',
+ color: grey[200]
}
},
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
@@ -48,30 +75,79 @@
splitLine: {
show: true,
lineStyle: {
- type: 'dashed'
+ type: 'dashed',
+ color: grey[200]
}
+ },
+ axisTick: {
+ color: grey[200]
}
},
series: [
{
- data: [820, 932, 901, 934, 1290, 1330, 1320],
+ data: [20, 32, 51, 934, 190, 130, 320],
type: 'line',
smooth: true,
showSymbol: false,
lineStyle: {
- width: 0
- },
- areaStyle: {
- color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
- {
- offset: 0,
- color: 'rgb(92, 216, 244)'
- },
- {
- offset: 1,
- color: 'rgb(115, 189, 255)'
- }
- ])
+ width: 2,
+ color: '#17c8eb'
+ }
+ }
+ ]
+ }
+}
+
+const getChartOptions = (title?: string) => {
+ return {
+ title: {
+ text: title,
+ top: 15,
+ left: 10,
+ textStyle: {
+ fontSize: 12,
+ color: grey[600]
+ }
+ },
+ grid: {
+ top: 60,
+ left: 60,
+ right: 40,
+ bottom: 40
+ },
+ xAxis: {
+ type: 'category',
+ splitLine: {
+ show: true,
+ lineStyle: {
+ type: 'dashed',
+ color: grey[200]
+ }
+ },
+ data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+ },
+ yAxis: {
+ type: 'value',
+ splitLine: {
+ show: true,
+ lineStyle: {
+ type: 'dashed',
+ color: grey[200]
+ }
+ },
+ axisTick: {
+ color: grey[200]
+ }
+ },
+ series: [
+ {
+ data: [20, 32, 51, 934, 190, 130, 320],
+ type: 'line',
+ smooth: true,
+ showSymbol: false,
+ lineStyle: {
+ width: 2,
+ color: '#17c8eb'
}
}
]
diff --git a/eventmesh-dashboard-view/src/routes/topic/stats/TopicCount.tsx b/eventmesh-dashboard-view/src/routes/topic/stats/TopicCount.tsx
index f3dc06e..ed706ba 100644
--- a/eventmesh-dashboard-view/src/routes/topic/stats/TopicCount.tsx
+++ b/eventmesh-dashboard-view/src/routes/topic/stats/TopicCount.tsx
@@ -1,6 +1,6 @@
import React, { forwardRef } from 'react'
-import { Paper, PaperProps, Stack, Typography } from '@mui/material'
-import { Icons } from '../../../assets/icons'
+import { Paper, PaperProps, Stack, Typography, Button } from '@mui/material'
+import { grey } from '@mui/material/colors'
interface TopicCountProps extends PaperProps {}
@@ -9,36 +9,38 @@
return (
<Paper
sx={{
- height: 80,
- pt: 1,
- pb: 1,
- pr: {
- sm: 1,
- md: 3
- },
- pl: {
- sm: 1,
- md: 3
- }
+ width: 1,
+ py: 1,
+ px: 2,
+ borderRadius: 4,
+ boxShadow: '2px 2px 40px 2px rgba(0,0,0,.05)',
+ display: 'flex',
+ flexDirection: 'column'
}}>
<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>
+ <Typography
+ paragraph
+ variant="caption"
+ sx={{ m: 0 }}
+ fontWeight="bold"
+ color={grey[600]}>
+ Topic 总数量
+ </Typography>
+ <Button sx={{ color: grey[400] }} disabled size="small">
+ <span> </span>
+ </Button>
</Stack>
+
+ <Typography
+ paragraph
+ variant="h6"
+ color="primary"
+ sx={{ m: 0, fontWeight: 'bold', color: '#43497a' }}>
+ 5
+ </Typography>
</Paper>
)
}
diff --git a/eventmesh-dashboard-view/src/routes/topic/topic-list/TopicList.tsx b/eventmesh-dashboard-view/src/routes/topic/topic-list/TopicList.tsx
index 77f8e36..5c136e3 100644
--- a/eventmesh-dashboard-view/src/routes/topic/topic-list/TopicList.tsx
+++ b/eventmesh-dashboard-view/src/routes/topic/topic-list/TopicList.tsx
@@ -8,37 +8,43 @@
const TopicList = forwardRef<typeof Stack, TopicListProps>(
({ ...props }, ref) => {
return (
- <Stack sx={{ flexGrow: 1 }} spacing={2}>
+ <Paper
+ sx={{
+ flexGrow: 1,
+ borderRadius: 4,
+ boxShadow: '2px 2px 40px 2px rgba(0,0,0,.05)'
+ }}>
<Stack
+ sx={{ px: 2, py: 3 }}
direction="row"
justifyContent="space-between"
alignItems="center">
- <TextField label="Topic 名称" variant="standard" />
+ <TextField size="small" placeholder="Topic 名称" variant="outlined" />
<Button
- variant="contained"
+ variant="outlined"
size="small"
sx={{ textTransform: 'none' }}>
新增Topic
</Button>
</Stack>
- <Paper sx={{ flexGrow: 1 }}>
- <DataGrid
- sx={{
- '& .MuiDataGrid-columnHeaderTitle': {
- fontWeight: 'normal',
- color: grey[800]
- },
- '& .MuiDataGrid-cell': {
- fontWeight: 'normal',
- fontSize: 14
- }
- }}
- rows={rows}
- columns={columns}
- />
- </Paper>
- </Stack>
+
+ <DataGrid
+ sx={{
+ border: 0,
+ borderRadius: 4,
+ '& .MuiDataGrid-columnHeaderTitle': {
+ color: grey[400]
+ },
+ '& .MuiDataGrid-cell': {
+ fontWeight: 'normal',
+ fontSize: 14
+ }
+ }}
+ rows={rows}
+ columns={columns}
+ />
+ </Paper>
)
}
)
