diff --git a/frontend/src/pages/index/LogModal.tsx b/frontend/src/pages/index/LogModal.tsx index 0fd27ea63..7fd803ef6 100644 --- a/frontend/src/pages/index/LogModal.tsx +++ b/frontend/src/pages/index/LogModal.tsx @@ -13,12 +13,15 @@ interface LogModalProps { onClose: () => void; } +const AUTO_UPDATE_INTERVAL = 5000; + export default function LogModal({ open, onClose }: LogModalProps) { const { t } = useTranslation(); const { isMobile } = useMediaQuery(); const [rows, setRows] = useState('20'); const [level, setLevel] = useState('info'); const [syslog, setSyslog] = useState(false); + const [autoUpdate, setAutoUpdate] = useState(false); const [loading, setLoading] = useState(false); const [logs, setLogs] = useState([]); const openRef = useRef(open); @@ -39,6 +42,11 @@ export default function LogModal({ open, onClose }: LogModalProps) { } }, [rows, level, syslog]); + const refreshRef = useRef(refresh); + useEffect(() => { + refreshRef.current = refresh; + }, [refresh]); + useEffect(() => { openRef.current = open; if (open) refresh(); @@ -48,6 +56,12 @@ export default function LogModal({ open, onClose }: LogModalProps) { if (openRef.current) refresh(); }, [rows, level, syslog, refresh]); + useEffect(() => { + if (!open || !autoUpdate) return; + const id = setInterval(() => refreshRef.current(), AUTO_UPDATE_INTERVAL); + return () => clearInterval(id); + }, [open, autoUpdate]); + const parsedLogs = useMemo(() => logs.map(parseLogLine), [logs]); function download() { @@ -106,6 +120,9 @@ export default function LogModal({ open, onClose }: LogModalProps) { setSyslog(e.target.checked)}> SysLog + setAutoUpdate(e.target.checked)}> + {t('pages.index.autoUpdate')} +