code and layout refactoring

frontend/src/components/LogTerminal.tsx

@@ -1,4 +1,3 @@
-import { Box, Container, Paper, Typography } from '@mui/material'
 import { useEffect, useMemo, useRef, useState } from 'react'
 import { useRecoilValue } from 'recoil'
 import { serverURL } from '../atoms/settings'
@@ -7,14 +6,15 @@ import { useI18n } from '../hooks/useI18n'
 const token = localStorage.getItem('token')
 
 const LogTerminal: React.FC = () => {
+  const [logBuffer, setLogBuffer] = useState<string[]>([])
+  const [isConnecting, setIsConnecting] = useState(true)
+
+  const boxRef = useRef<HTMLDivElement>(null)
+
   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]
@@ -23,7 +23,7 @@ const LogTerminal: React.FC = () => {
   useEffect(() => {
     eventSource.addEventListener('log', event => {
       const msg: string[] = JSON.parse(event.data)
-      setLogBuffer(buff => [...buff, ...msg].slice(-100))
+      setLogBuffer(buff => [...buff, ...msg].slice(-500))
 
       boxRef.current?.scrollTo(0, boxRef.current.scrollHeight)
     })
@@ -32,6 +32,10 @@ const LogTerminal: React.FC = () => {
     return () => eventSource.close()
   }, [eventSource])
 
+  useEffect(() => {
+    eventSource.onopen = () => setIsConnecting(false)
+  }, [eventSource])
+
   const logEntryStyle = (data: string) => {
     const sx = {}
 
@@ -46,41 +50,33 @@ const LogTerminal: React.FC = () => {
   }
 
   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>
-        <Box
-          ref={boxRef}
-          sx={{
-            fontFamily: 'Roboto Mono',
-            height: '70.5vh',
-            overflowY: 'auto',
-            overflowX: 'auto',
-            fontSize: '13.5px',
-            fontWeight: '600',
-            backgroundColor: 'black',
-            color: 'white',
-            padding: '0.5rem',
-            borderRadius: '0.25rem'
-          }}
-        >
-          {logBuffer.length === 0 && <Box >{i18n.t('awaitingLogs')}</Box>}
-          {logBuffer.map((log, idx) => (
-            <Box key={idx} sx={logEntryStyle(log)}>
-              {log}
-            </Box>
-          ))}
-        </Box>
-      </Paper>
-    </Container >
+
+    <div
+      ref={boxRef}
+      style={{
+        fontFamily: 'Roboto Mono',
+        height: '70.5vh',
+        overflowY: 'auto',
+        overflowX: 'auto',
+        fontSize: '13.5px',
+        fontWeight: '600',
+        backgroundColor: 'black',
+        color: 'white',
+        padding: '0.5rem',
+        borderRadius: '0.25rem'
+      }}
+    >
+      {isConnecting ? <div>{'Connecting...'}</div> : <div>{'Connected!'}</div>}
+
+      {logBuffer.length === 0 && <div>{i18n.t('awaitingLogs')}</div>}
+
+      {logBuffer.map((log, idx) => (
+        <div key={idx} style={logEntryStyle(log)}>
+          {log}
+        </div>
+      ))}
+    </div>
+
   )
 }