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/package.json
+++ b/frontend/package.json
@@ -13,6 +13,7 @@
    "@emotion/react": "^11.11.1",
    "@emotion/styled": "^11.11.0",
    "@fontsource/roboto": "^5.0.6",
+    "@fontsource/roboto-mono": "^5.0.16",
    "@mui/icons-material": "^5.11.16",
    "@mui/material": "^5.13.5",
    "fp-ts": "^2.16.1",
--- a/frontend/pnpm-lock.yaml
+++ b/frontend/pnpm-lock.yaml
@@ -14,6 +14,9 @@ dependencies:
  '@fontsource/roboto':
    specifier: ^5.0.6
    version: 5.0.6
+  '@fontsource/roboto-mono':
+    specifier: ^5.0.16
+    version: 5.0.16
  '@mui/icons-material':
    specifier: ^5.11.16
    version: 5.11.16(@mui/material@5.13.5)(@types/react@18.2.29)(react@18.2.0)
@@ -433,6 +436,10 @@ packages:
    dev: true
    optional: true

+  /@fontsource/roboto-mono@5.0.16:
+    resolution: {integrity: sha512-unZYfjXts55DQyODz0I9DzbSrS5DRKPNq9crJpNJe/Vy818bLnijprcJv3fvqwdDqTT0dRm2Fhk09QEIdtAc+Q==}
+    dev: false
+
  /@fontsource/roboto@5.0.6:
    resolution: {integrity: sha512-SksyUGbdqY7a71l/ywdX5fm37fepCakgHZEZ3H4uP5A9wDJewrcSACtIzw6yi9QjJIYoj1xArhDSOz4XJxyWow==}
    dev: false
--- a/frontend/src/Layout.tsx
+++ b/frontend/src/Layout.tsx
@@ -29,6 +29,7 @@ import SocketSubscriber from './components/SocketSubscriber'
 import ThemeToggler from './components/ThemeToggler'
 import { useI18n } from './hooks/useI18n'
 import Toaster from './providers/ToasterProvider'
+import TerminalIcon from '@mui/icons-material/Terminal'

 export default function Layout() {
  const [open, setOpen] = useState(false)
@@ -138,6 +139,19 @@ export default function Layout() {
                <ListItemText primary={i18n.t('archiveButtonLabel')} />
              </ListItemButton>
            </Link>
+            <Link to={'/log'} style={
+              {
+                textDecoration: 'none',
+                color: mode === 'dark' ? '#ffffff' : '#000000DE'
+              }
+            }>
+              <ListItemButton>
+                <ListItemIcon>
+                  <TerminalIcon />
+                </ListItemIcon>
+                <ListItemText primary={i18n.t('logsTitle')} />
+              </ListItemButton>
+            </Link>
            <Link to={'/settings'} style={
              {
                textDecoration: 'none',
--- a/frontend/src/assets/i18n.yaml
+++ b/frontend/src/assets/i18n.yaml
@@ -47,6 +47,8 @@ languages:
    templatesEditor: Templates editor
    templatesEditorNameLabel: Template name
    templatesEditorContentLabel: Template content
+    logsTitle: 'Logs'
+    awaitingLogs: 'Awaiting logs...'
  german:
    urlInput: Video URL
    statusTitle: Status
@@ -94,6 +96,8 @@ languages:
    templatesEditor: Vorlagen Bearbeiter
    templatesEditorNameLabel: Vorlagen Name
    templatesEditorContentLabel: Vorlagen Inhalt
+    logsTitle: 'Logs'
+    awaitingLogs: 'Awaiting logs...'
  french:
    urlInput: URL vidéo de YouTube ou d'un autre service pris en charge
    statusTitle: Statut
@@ -143,6 +147,8 @@ languages:
    templatesEditor: Templates editor
    templatesEditorNameLabel: Template name
    templatesEditorContentLabel: Template content
+    logsTitle: 'Logs'
+    awaitingLogs: 'Awaiting logs...'
  italian:
    urlInput: URL Video
    statusTitle: Stato
@@ -189,6 +195,8 @@ languages:
    templatesEditor: Editor template
    templatesEditorNameLabel: Nome template
    templatesEditorContentLabel: Contentunto template
+    logsTitle: 'Logs'
+    awaitingLogs: 'Awaiting logs...'
  chinese:
    urlInput: YouTube 或其他受支持服务的视频网址
    statusTitle: 状态
@@ -236,6 +244,8 @@ languages:
    templatesEditor: Templates editor
    templatesEditorNameLabel: Template name
    templatesEditorContentLabel: Template content
+    logsTitle: 'Logs'
+    awaitingLogs: 'Awaiting logs...'
  spanish:
    urlInput: URL de YouTube u otro servicio compatible
    statusTitle: Estado
@@ -281,6 +291,8 @@ languages:
    templatesEditor: Templates editor
    templatesEditorNameLabel: Template name
    templatesEditorContentLabel: Template content
+    logsTitle: 'Logs'
+    awaitingLogs: 'Awaiting logs...'
  russian:
    urlInput: URL-адрес YouTube или любого другого поддерживаемого сервиса
    statusTitle: Статус
@@ -326,6 +338,8 @@ languages:
    templatesEditor: Templates editor
    templatesEditorNameLabel: Template name
    templatesEditorContentLabel: Template content
+    logsTitle: 'Logs'
+    awaitingLogs: 'Awaiting logs...'
  korean:
    urlInput: YouTube나 다른 지원되는 사이트의 URL
    statusTitle: 상태
@@ -371,6 +385,8 @@ languages:
    templatesEditor: Templates editor
    templatesEditorNameLabel: Template name
    templatesEditorContentLabel: Template content
+    logsTitle: 'Logs'
+    awaitingLogs: 'Awaiting logs...'
  japanese:
    urlInput: YouTubeまたはサポート済み動画のURL
    statusTitle: 状態
@@ -417,6 +433,8 @@ languages:
    templatesEditor: Templates editor
    templatesEditorNameLabel: Template name
    templatesEditorContentLabel: Template content
+    logsTitle: 'Logs'
+    awaitingLogs: 'Awaiting logs...'
  catalan:
    urlInput: URL de YouTube o d'un altre servei compatible
    statusTitle: Estat
@@ -462,6 +480,8 @@ languages:
    templatesEditor: Templates editor
    templatesEditorNameLabel: Template name
    templatesEditorContentLabel: Template content
+    logsTitle: 'Logs'
+    awaitingLogs: 'Awaiting logs...'
  ukrainian:
    urlInput: URL-адреса YouTube або будь-якого іншого підтримуваного сервісу
    statusTitle: Статус
@@ -507,6 +527,8 @@ languages:
    templatesEditor: Templates editor
    templatesEditorNameLabel: Template name
    templatesEditorContentLabel: Template content
+    logsTitle: 'Logs'
+    awaitingLogs: 'Awaiting logs...'
  polish:
    urlInput: Adres URL YouTube lub innej obsługiwanej usługi
    statusTitle: Status
@@ -552,3 +574,5 @@ languages:
    templatesEditor: Templates editor
    templatesEditorNameLabel: Template name
    templatesEditorContentLabel: Template content
+    logsTitle: 'Logs'
+    awaitingLogs: 'Awaiting logs...'
--- a/frontend/src/components/DownloadDialog.tsx
+++ b/frontend/src/components/DownloadDialog.tsx
@@ -32,8 +32,8 @@ import {
  useTransition
 } from 'react'
 import { useRecoilState, useRecoilValue } from 'recoil'
-import { customArgsState, downloadTemplateState, filenameTemplateState } from '../atoms/downloadTemplate'
-import { settingsState } from '../atoms/settings'
+import { customArgsState, downloadTemplateState, filenameTemplateState, savedTemplatesState } from '../atoms/downloadTemplate'
+import { latestCliArgumentsState, settingsState } from '../atoms/settings'
 import { availableDownloadPathsState, connectedState } from '../atoms/status'
 import FormatsGrid from '../components/FormatsGrid'
 import { useI18n } from '../hooks/useI18n'
@@ -63,6 +63,7 @@ const DownloadDialog: FC<Props> = ({ open, onClose, onDownloadStart }) => {
  const isConnected = useRecoilValue(connectedState)
  const availableDownloadPaths = useRecoilValue(availableDownloadPathsState)
  const downloadTemplate = useRecoilValue(downloadTemplateState)
+  const savedTemplates = useRecoilValue(savedTemplatesState)

  const [downloadFormats, setDownloadFormats] = useState<DLMetadata>()
  const [pickedVideoFormat, setPickedVideoFormat] = useState('')
@@ -70,6 +71,8 @@ const DownloadDialog: FC<Props> = ({ open, onClose, onDownloadStart }) => {
  const [pickedBestFormat, setPickedBestFormat] = useState('')

  const [customArgs, setCustomArgs] = useRecoilState(customArgsState)
+  const [, setCliArgs] = useRecoilState(latestCliArgumentsState)
+
  const [downloadPath, setDownloadPath] = useState('')

  const [filenameTemplate, setFilenameTemplate] = useRecoilState(
@@ -81,7 +84,7 @@ const DownloadDialog: FC<Props> = ({ open, onClose, onDownloadStart }) => {

  const [isPlaylist, setIsPlaylist] = useState(false)

-  const cliArgs = useMemo(() =>
+  const argsBuilder = useMemo(() =>
    new CliArguments().fromString(settings.cliArgs), [settings.cliArgs]
  )

@@ -108,7 +111,7 @@ const DownloadDialog: FC<Props> = ({ open, onClose, onDownloadStart }) => {

    client.download({
      url: immediate || url || workingUrl,
-      args: `${cliArgs.toString()} ${toFormatArgs(codes)} ${downloadTemplate}`,
+      args: `${argsBuilder.toString()} ${toFormatArgs(codes)} ${downloadTemplate}`,
      pathOverride: downloadPath ?? '',
      renameTo: settings.fileRenaming ? filenameTemplate : '',
      playlist: isPlaylist,
@@ -313,9 +316,31 @@ const DownloadDialog: FC<Props> = ({ open, onClose, onDownloadStart }) => {
                  }
                </Grid>
                <Suspense>
-                  <ExtraDownloadOptions />
+                  {savedTemplates.length > 0 && <ExtraDownloadOptions />}
                </Suspense>
                <Grid container spacing={1} pt={2} justifyContent="space-between">
+                  <Grid item>
+                    <Grid item>
+                      <FormControlLabel
+                        control={<Checkbox onChange={() => setIsPlaylist(state => !state)} />}
+                        checked={isPlaylist}
+                        label={i18n.t('playlistCheckbox')}
+                      />
+                    </Grid>
+                    <Grid item>
+                      <FormControlLabel
+                        control={
+                          <Checkbox
+                            onChange={() => setCliArgs(argsBuilder.toggleExtractAudio().toString())}
+                          />
+                        }
+                        checked={argsBuilder.extractAudio}
+                        onChange={() => setCliArgs(argsBuilder.toggleExtractAudio().toString())}
+                        disabled={settings.formatSelection}
+                        label={i18n.t('extractAudioCheckbox')}
+                      />
+                    </Grid>
+                  </Grid>
                  <Grid item>
                    <Button
                      variant="contained"
@@ -332,13 +357,6 @@ const DownloadDialog: FC<Props> = ({ open, onClose, onDownloadStart }) => {
                      }
                    </Button>
                  </Grid>
-                  <Grid item>
-                    <FormControlLabel
-                      control={<Checkbox onChange={() => setIsPlaylist(state => !state)} />}
-                      checked={isPlaylist}
-                      label={i18n.t('playlistCheckbox')}
-                    />
-                  </Grid>
                </Grid>
              </Paper>
            </Grid>
--- a/frontend/src/components/ExtraDownloadOptions.tsx
+++ b/frontend/src/components/ExtraDownloadOptions.tsx
@@ -1,4 +1,4 @@
-import { Autocomplete, Box, TextField } from '@mui/material'
+import { Autocomplete, Box, TextField, Typography } from '@mui/material'
 import { useRecoilState, useRecoilValue } from 'recoil'
 import { customArgsState, savedTemplatesState } from '../atoms/downloadTemplate'
 import { useI18n } from '../hooks/useI18n'
@@ -22,9 +22,23 @@ const ExtraDownloadOptions: React.FC = () => {
        renderOption={(props, option) => (
          <Box
            component="li"
-            sx={{ mr: 2, flexShrink: 0 }}
-            {...props}>
-            {option.label}
+            {...props}
+          >
+            <Box sx={{
+              display: 'flex',
+              flexDirection: 'column',
+              alignContent: 'flex-start',
+              justifyContent: 'flex-start',
+              alignItems: 'flex-start',
+              width: '100%'
+            }}>
+              <Typography>
+                {option.label}
+              </Typography>
+              <Typography variant="subtitle2" color="primary">
+                {option.content}
+              </Typography>
+            </Box>
          </Box>
        )}
        sx={{ width: '100%', mt: 2 }}
--- 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
--- a/frontend/src/index.tsx
+++ b/frontend/src/index.tsx
@@ -6,6 +6,9 @@ import '@fontsource/roboto/300.css'
 import '@fontsource/roboto/400.css'
 import '@fontsource/roboto/500.css'
 import '@fontsource/roboto/700.css'
+import '@fontsource/roboto/700.css'
+
+import '@fontsource/roboto-mono'

 const root = createRoot(document.getElementById('root')!)

--- a/frontend/src/router.tsx
+++ b/frontend/src/router.tsx
@@ -2,6 +2,7 @@ import { CircularProgress } from '@mui/material'
 import { Suspense, lazy } from 'react'
 import { createHashRouter } from 'react-router-dom'
 import Layout from './Layout'
+import Terminal from './views/Terminal'

 const Home = lazy(() => import('./views/Home'))
 const Login = lazy(() => import('./views/Login'))
@@ -36,6 +37,14 @@ export const router = createHashRouter([
          </Suspense >
        )
      },
+      {
+        path: '/log',
+        element: (
+          <Suspense fallback={<CircularProgress />}>
+            <Terminal />
+          </Suspense >
+        )
+      },
      {
        path: '/archive',
        element: (
--- a/frontend/src/views/Archive.tsx
+++ b/frontend/src/views/Archive.tsx
@@ -9,12 +9,13 @@ import {
  DialogContent,
  DialogContentText,
  DialogTitle,
-  IconButton,
  List,
  ListItem,
  ListItemButton,
  ListItemIcon,
  ListItemText,
+  MenuItem,
+  MenuList,
  Paper,
  SpeedDial,
  SpeedDialAction,
@@ -27,6 +28,7 @@ import FolderIcon from '@mui/icons-material/Folder'
 import InsertDriveFileIcon from '@mui/icons-material/InsertDriveFile'
 import VideoFileIcon from '@mui/icons-material/VideoFile'

+import DownloadIcon from '@mui/icons-material/Download'
 import { matchW } from 'fp-ts/lib/TaskEither'
 import { pipe } from 'fp-ts/lib/function'
 import { useEffect, useMemo, useState, useTransition } from 'react'
@@ -38,12 +40,14 @@ import { useObservable } from '../hooks/observable'
 import { useToast } from '../hooks/toast'
 import { useI18n } from '../hooks/useI18n'
 import { ffetch } from '../lib/httpClient'
-import { DeleteRequest, DirectoryEntry } from '../types'
+import { DirectoryEntry } from '../types'
 import { base64URLEncode, roundMiB } from '../utils'
-import DownloadIcon from '@mui/icons-material/Download'
-

 export default function Downloaded() {
+  const [menuPos, setMenuPos] = useState({ x: 0, y: 0 })
+  const [showMenu, setShowMenu] = useState(false)
+  const [currentFile, setCurrentFile] = useState<DirectoryEntry>()
+
  const serverAddr = useRecoilValue(serverURL)
  const navigate = useNavigate()

@@ -135,19 +139,24 @@ export default function Downloaded() {
      : selected$.next([...selected$.value, name])
  }

+  const deleteFile = (entry: DirectoryEntry) => pipe(
+    ffetch(`${serverAddr}/archive/delete`, {
+      method: 'POST',
+      body: JSON.stringify({
+        path: entry.path,
+        shaSum: entry.shaSum,
+      })
+    }),
+    matchW(
+      (l) => pushMessage(l, 'error'),
+      (_) => fetcher()
+    )
+  )()
+
  const deleteSelected = () => {
    Promise.all(selectable
      .filter(entry => entry.selected)
-      .map(entry => fetch(`${serverAddr}/archive/delete`, {
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-        },
-        body: JSON.stringify({
-          path: entry.path,
-          shaSum: entry.shaSum,
-        } as DeleteRequest)
-      }))
+      .map(deleteFile)
    ).then(fetcher)
  }

@@ -172,18 +181,42 @@ export default function Downloaded() {
  })

  return (
-    <Container maxWidth="lg" sx={{ mt: 4, mb: 4 }}>
+    <Container
+      maxWidth="lg"
+      sx={{ mt: 4, mb: 4, height: '100%' }}
+      onClick={() => setShowMenu(false)}
+    >
+      <IconMenu
+        posX={menuPos.x}
+        posY={menuPos.y}
+        hide={!showMenu}
+        onDownload={() => {
+          if (currentFile) {
+            downloadFile(currentFile?.path)
+            setCurrentFile(undefined)
+          }
+        }}
+        onDelete={() => {
+          if (currentFile) {
+            deleteFile(currentFile)
+            setCurrentFile(undefined)
+          }
+        }}
+      />
      <Backdrop
        sx={{ color: '#fff', zIndex: (theme) => theme.zIndex.drawer + 1 }}
        open={!(files$.observed) || isPending}
      >
        <CircularProgress color="primary" />
      </Backdrop>
-      <Paper sx={{
-        p: 2,
-        display: 'flex',
-        flexDirection: 'column',
-      }}>
+      <Paper
+        sx={{
+          p: 2,
+          display: 'flex',
+          flexDirection: 'column',
+        }}
+        onClick={() => setShowMenu(false)}
+      >
        <Typography py={1} variant="h5" color="primary">
          {i18n.t('archiveTitle')}
        </Typography>
@@ -191,6 +224,12 @@ export default function Downloaded() {
          {selectable.length === 0 && 'No files found'}
          {selectable.map((file, idx) => (
            <ListItem
+              onContextMenu={(e) => {
+                e.preventDefault()
+                setCurrentFile(file)
+                setMenuPos({ x: e.clientX, y: e.clientY })
+                setShowMenu(true)
+              }}
              key={idx}
              secondaryAction={
                <div>
@@ -202,13 +241,6 @@ export default function Downloaded() {
                  </Typography>
                  }
                  {!file.isDirectory && <>
-                    <IconButton
-                      size='small'
-                      onClick={() => downloadFile(file.path)}
-                      sx={{ marginLeft: 1.5 }}
-                    >
-                      <DownloadIcon />
-                    </IconButton>
                    <Checkbox
                      edge="end"
                      checked={file.selected}
@@ -275,11 +307,15 @@ export default function Downloaded() {
          </ul>
        </DialogContent>
        <DialogActions>
-          <Button onClick={() => setOpenDialog(false)}>Cancel</Button>
-          <Button onClick={() => {
-            deleteSelected()
-            setOpenDialog(false)
-          }} autoFocus
+          <Button onClick={() => setOpenDialog(false)}>
+            Cancel
+          </Button>
+          <Button
+            onClick={() => {
+              deleteSelected()
+              setOpenDialog(false)
+            }}
+            autoFocus
          >
            Ok
          </Button>
@@ -287,4 +323,43 @@ export default function Downloaded() {
      </Dialog>
    </Container>
  )
+}
+
+const IconMenu: React.FC<{
+  posX: number
+  posY: number
+  hide: boolean
+  onDownload: () => void
+  onDelete: () => void
+}> = ({ posX, posY, hide, onDelete, onDownload }) => {
+  return (
+    <Paper sx={{
+      width: 320,
+      maxWidth: '100%',
+      position: 'absolute',
+      top: posY,
+      left: posX,
+      display: hide ? 'none' : 'block',
+      zIndex: (theme) => theme.zIndex.drawer + 1,
+    }}>
+      <MenuList>
+        <MenuItem onClick={onDownload}>
+          <ListItemIcon>
+            <DownloadIcon fontSize="small" />
+          </ListItemIcon>
+          <ListItemText>
+            Download
+          </ListItemText>
+        </MenuItem>
+        <MenuItem onClick={onDelete}>
+          <ListItemIcon>
+            <DeleteForeverIcon fontSize="small" />
+          </ListItemIcon>
+          <ListItemText>
+            Delete
+          </ListItemText>
+        </MenuItem>
+      </MenuList>
+    </Paper>
+  )
 }
--- a/frontend/src/views/Terminal.tsx
+++ b/frontend/src/views/Terminal.tsx
@@ -0,0 +1,9 @@
+import LogTerminal from '../components/LogTerminal'
+
+const Terminal: React.FC = () => {
+  return (
+    <LogTerminal />
+  )
+}
+
+export default Terminal