| | |
| | | const MIN_HEIGHT = 240; |
| | | const EDGE_MARGIN = 16; |
| | | |
| | | const MAX_VISIBLE_LOGS = 300; |
| | | |
| | | const clamp = (value, min, max) => Math.min(Math.max(value, min), max); |
| | | |
| | | const NewsLogDialog = ({ open, onClose }) => { |
| | |
| | | const fetchLogs = useCallback(async () => { |
| | | const data = await Http.fetchNewsLogs(); |
| | | if (Array.isArray(data)) { |
| | | const trimmedLogs = data.length > MAX_VISIBLE_LOGS |
| | | ? data.slice(data.length - MAX_VISIBLE_LOGS) |
| | | : data; |
| | | programmaticScrollRef.current = true; |
| | | setLogs(data); |
| | | setLogs(trimmedLogs); |
| | | setLastUpdated(new Date()); |
| | | } |
| | | }, []); |
| | |
| | | flex: 1, |
| | | minHeight: 0, |
| | | overflowY: 'auto', |
| | | overflowX: 'auto', |
| | | px: 0, |
| | | py: 0, |
| | | backgroundColor: theme.palette.background.default, |
| | |
| | | {translate('page.map.monitor.log.empty', { _: 'No Logs' })} |
| | | </Typography> |
| | | ) : ( |
| | | <Stack spacing={0} divider={<Divider sx={{ borderColor: theme.palette.divider, opacity: 0.8 }} />}> |
| | | <Stack |
| | | spacing={0} |
| | | divider={<Divider sx={{ borderColor: theme.palette.divider, opacity: 0.8 }} />} |
| | | sx={{ minWidth: '100%', width: 'fit-content' }} |
| | | > |
| | | {logs.map((item, index) => { |
| | | const level = item?.l; |
| | | const levelMeta = LOG_LEVEL_META[level] || LOG_LEVEL_META[1]; |
| | |
| | | sx={{ |
| | | px: 2, |
| | | py: 1.25, |
| | | width: '100%', |
| | | backgroundColor: index % 2 === 0 |
| | | ? theme.palette.background.paper |
| | | : theme.palette.background.default, |