eventmesh-dashboard-view/src/routes/topic/stats/Stats.tsx

import React, { forwardRef, useState } from 'react'
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'
}
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 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>

      <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: 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>

          <Icons.Refresh fontSize="inherit" />
        </Stack>
        <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>
  )
})

Stats.displayName = 'Stats'
export default Stats