Logging in webUI, Archive view refactor (#127)

* test logging * test impl for logging * implemented "live logging", restyle templates dropdown * moved extract audio to downloadDialog, fixed labels * code refactoring * buffering logs
2024-01-09 14:29:18 +01:00
parent de1d9e6a3c
commit 6aa2d41988
25 changed files with 630 additions and 112 deletions
--- a/frontend/src/components/LogTerminal.tsx
+++ b/frontend/src/components/LogTerminal.tsx
@@ -0,0 +1,91 @@
+import { Box, CircularProgress, Container, Paper, Typography } from '@mui/material'
+import { useEffect, useMemo, useRef, useState } from 'react'
+import { useRecoilValue } from 'recoil'
+import { serverURL } from '../atoms/settings'
+import { useI18n } from '../hooks/useI18n'
+
+const token = localStorage.getItem('token')
+
+const LogTerminal: React.FC = () => {
+  const serverAddr = useRecoilValue(serverURL)
+
+  const { i18n } = useI18n()
+
+  const [logBuffer, setLogBuffer] = useState<string[]>([])
+
+  const boxRef = useRef<HTMLDivElement>(null)
+
+  const eventSource = useMemo(
+    () => new EventSource(`${serverAddr}/log/sse?token=${token}`),
+    [serverAddr]
+  )
+
+  useEffect(() => {
+    eventSource.addEventListener('log', event => {
+      const msg: string[] = JSON.parse(event.data)
+      setLogBuffer(buff => [...buff, ...msg].slice(-100))
+
+      boxRef.current?.scrollTo(0, boxRef.current.scrollHeight)
+    })
+
+    // TODO: in dev mode it breaks sse
+    return () => eventSource.close()
+  }, [eventSource])
+
+  const logEntryStyle = (data: string) => {
+    if (data.includes("level=ERROR")) {
+      return { color: 'red' }
+    }
+    if (data.includes("level=WARN")) {
+      return { color: 'orange' }
+    }
+    return {}
+  }
+
+  return (
+    <Container maxWidth="lg" sx={{ mt: 4, mb: 4 }}>
+      <Paper
+        sx={{
+          p: 2.5,
+          display: 'flex',
+          flexDirection: 'column',
+        }}
+      >
+        <Typography py={1} variant="h5" color="primary">
+          {i18n.t('logsTitle')}
+        </Typography>
+        {(logBuffer.length === 0) && <Box sx={{
+          display: 'flex',
+          flexDirection: 'column',
+          justifyItems: 'center',
+          alignItems: 'center',
+          gap: 1
+        }}>
+          <CircularProgress color="primary" size={32} />
+          <Typography py={1} variant="subtitle2" >
+            {i18n.t('awaitingLogs')}
+          </Typography>
+        </Box>
+        }
+        <Box
+          ref={boxRef}
+          sx={{
+            fontFamily: 'Roboto Mono',
+            height: '75.5vh',
+            overflowY: 'auto',
+            overflowX: 'auto',
+            fontSize: '15px'
+          }}
+        >
+          {logBuffer.map((log, idx) => (
+            <Box key={idx} sx={logEntryStyle(log)}>
+              {log}
+            </Box>
+          ))}
+        </Box>
+      </Paper>
+    </Container >
+  )
+}
+
+export default LogTerminal