forked from apache/eventmesh-dashboard
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
SUN
committed
Mar 9, 2024
1 parent
da3fc68
commit a5339c4
Showing
12 changed files
with
379 additions
and
34 deletions.
There are no files selected for viewing
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Empty file.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
File renamed without changes.
110 changes: 110 additions & 0 deletions
110
eventmesh-dashboard-view/src/routes/topic/stats/Stats.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,110 @@ | ||
| import React, { forwardRef, useState } from 'react' | ||
| import { | ||
| Stack, | ||
| StackProps, | ||
| Box, | ||
| Select, | ||
| MenuItem, | ||
| Paper, | ||
| Grid | ||
| } from '@mui/material' | ||
| import TopicCount from './TopicCount' | ||
| import AbnormalTopicCount from './AbnormalTopicCount' | ||
| import { Icons } from '../../../assets/icons' | ||
| import StatsChart from './StatsChart' | ||
|
|
||
| enum TimeOptionEnum { | ||
| LatestHour = 'LATEST_HOUR' | ||
| } | ||
| type StatsParams = { | ||
| time?: TimeOptionEnum | ||
| runtimeId?: string | ||
| } | ||
|
|
||
| const TimeOptions = [{ value: TimeOptionEnum.LatestHour, label: '最新一小时' }] | ||
|
|
||
| interface StatsProps extends StackProps {} | ||
|
|
||
| const Stats = forwardRef<typeof Stack, StatsProps>(({ ...props }, ref) => { | ||
| const [statsParams, setStatsParams] = useState<StatsParams>({ | ||
| runtimeId: '' | ||
| }) | ||
|
|
||
| return ( | ||
| <Stack direction="row" spacing={1}> | ||
| <Stack sx={{ width: { sm: 180, md: 240, lg: 360 } }} spacing={1}> | ||
| <TopicCount /> | ||
| <AbnormalTopicCount /> | ||
| </Stack> | ||
|
|
||
| <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> | ||
|
|
||
| <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" /> | ||
| </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> | ||
| </Stack> | ||
| </Paper> | ||
| </Stack> | ||
| ) | ||
| }) | ||
|
|
||
| Stats.displayName = 'Stats' | ||
| export default Stats |
79 changes: 79 additions & 0 deletions
79
eventmesh-dashboard-view/src/routes/topic/stats/StatsChart.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,79 @@ | ||
| import React, { forwardRef, useRef, useEffect } from 'react' | ||
| import { Box, BoxProps } from '@mui/material' | ||
| import echarts from '../../../utils/chart' | ||
|
|
||
| interface StatsChartProps extends BoxProps {} | ||
|
|
||
| const StatsChart = forwardRef<typeof Box, StatsChartProps>( | ||
| ({ ...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() | ||
| chartIns.setOption(chartOptions) | ||
| chartInsRef.current = chartIns | ||
| } | ||
| }, []) | ||
|
|
||
| return <Box ref={chartElemRef} sx={{ width: 1, height: 1 }}></Box> | ||
| } | ||
| ) | ||
|
|
||
| StatsChart.displayName = 'StatsChart' | ||
| export default StatsChart | ||
|
|
||
| const getChartOptions = () => { | ||
| return { | ||
| grid: { | ||
| top: 10, | ||
| left: 40, | ||
| right: 10, | ||
| bottom: 20 | ||
| }, | ||
| xAxis: { | ||
| type: 'category', | ||
| splitLine: { | ||
| show: true, | ||
| lineStyle: { | ||
| type: 'dashed' | ||
| } | ||
| }, | ||
| data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] | ||
| }, | ||
| yAxis: { | ||
| type: 'value', | ||
| splitLine: { | ||
| show: true, | ||
| lineStyle: { | ||
| type: 'dashed' | ||
| } | ||
| } | ||
| }, | ||
| series: [ | ||
| { | ||
| data: [820, 932, 901, 934, 1290, 1330, 1320], | ||
| 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)' | ||
| } | ||
| ]) | ||
| } | ||
| } | ||
| ] | ||
| } | ||
| } |
Oops, something went wrong.