frontend: logViewer: Add toggle button for word break

frontend/src/components/common/LogViewer.tsx

@@ -46,6 +46,7 @@ export function LogViewer(props: LogViewerProps) {
   const searchAddonRef = React.useRef<any>(null);
   const [terminalContainerRef, setTerminalContainerRef] = React.useState<HTMLElement | null>(null);
   const [showSearch, setShowSearch] = React.useState(false);
+  const [isWordBreakEnabled, setIsWordBreakEnabled] = React.useState(true);
 
   useHotkeys('ctrl+shift+f', () => {
     setShowSearch(true);
@@ -64,6 +65,42 @@ export function LogViewer(props: LogViewerProps) {
     element.click();
   }
 
+  function wordBreakText(logs: string[], terminalWidth: number): string {
+    const wordBreakLogs: string[] = [];
+
+    logs.forEach(originalLine => {
+      const line = originalLine;
+
+      const subLine = line.split('\n');
+
+      subLine.forEach((part, index) => {
+        let newPart = part;
+
+        while (newPart.length > terminalWidth) {
+          let newLineIndex = terminalWidth;
+          while (newPart[newLineIndex] !== ' ') {
+            newLineIndex--;
+          }
+
+          const newPartSlice = newPart.slice(0, newLineIndex) + '\n';
+          wordBreakLogs.push(newPartSlice);
+
+          newPart = newPart.slice(newLineIndex + 1);
+        }
+
+        if (index < subLine.length - 1) {
+          newPart += '\n';
+        }
+
+        wordBreakLogs.push(newPart);
+      });
+    });
+
+    const newLogs = wordBreakLogs;
+
+    return newLogs.join('').replaceAll('\n', '\r\n');
+  }
+
   React.useEffect(() => {
     if (!terminalContainerRef || !!xtermRef.current) {
       return;
@@ -97,6 +134,8 @@ export function LogViewer(props: LogViewerProps) {
     const pageResizeHandler = () => {
       fitAddonRef.current!.fit();
       console.debug('resize');
+      xtermRef.current?.clear();
+      xtermRef.current?.write(getJointLogs());
     };
     window.addEventListener('resize', pageResizeHandler);
 
@@ -106,7 +145,7 @@ export function LogViewer(props: LogViewerProps) {
       searchAddonRef.current?.dispose();
       xtermRef.current = null;
     };
-  }, [terminalContainerRef, xtermRef.current]);
+  }, [terminalContainerRef, xtermRef.current, isWordBreakEnabled]);
 
   React.useEffect(() => {
     if (!xtermRef.current) {
@@ -122,10 +161,25 @@ export function LogViewer(props: LogViewerProps) {
     xtermRef.current?.write(getJointLogs());
 
     return function cleanup() {};
-  }, [logs, xtermRef]);
+  }, [logs, xtermRef, isWordBreakEnabled]);
 
   function getJointLogs() {
-    return logs?.join('').replaceAll('\n', '\r\n');
+    fitAddonRef.current!.fit();
+    const terminalWidth = xtermRef.current?.cols || 80;
+    if (isWordBreakEnabled) {
+      return wordBreakText(logs, terminalWidth);
+    } else {
+      return logs?.join('').replaceAll('\n', '\r\n');
+    }
+  }
+
+  function handleWordBreakText() {
+    setIsWordBreakEnabled(!isWordBreakEnabled);
+    xtermRef.current?.clear();
+    xtermRef.current?.write(getJointLogs());
+    setTimeout(() => {
+      fitAddonRef.current!.fit();
+    }, 1);
   }
 
   return (
@@ -170,6 +224,17 @@ export function LogViewer(props: LogViewerProps) {
               </Grid>
             ))}
           </Grid>
+          <Grid item xs>
+            <ActionButton
+              description={
+                isWordBreakEnabled
+                  ? t('translation|Disable Word Break')
+                  : t('translation|Enable Word Break')
+              }
+              onClick={handleWordBreakText}
+              icon={isWordBreakEnabled ? 'mdi:wrap' : 'mdi:wrap-disabled'}
+            />
+          </Grid>
           <Grid item xs>
             <ActionButton
               description={t('translation|Find')}

frontend/src/i18n/locales/de/translation.json

@@ -160,6 +160,8 @@
   "Head back <1>home</1>.": "Head back <1>home</1>.",
   "Error Details": "",
   "Copy": "",
+  "Disable Word Break": "",
+  "Enable Word Break": "",
   "Find": "Finden",
   "Download": "Herunterladen",
   "No results": "Keine Ergebnisse",

frontend/src/i18n/locales/en/translation.json

@@ -160,6 +160,8 @@
   "Head back <1>home</1>.": "Head back <1>home</1>.",
   "Error Details": "Error Details",
   "Copy": "Copy",
+  "Disable Word Break": "Disable Word Break",
+  "Enable Word Break": "Enable Word Break",
   "Find": "Find",
   "Download": "Download",
   "No results": "No results",

frontend/src/i18n/locales/es/translation.json

@@ -160,6 +160,8 @@
   "Head back <1>home</1>.": "Head back <1>home</1>.",
   "Error Details": "Detalles del error",
   "Copy": "Copiar",
+  "Disable Word Break": "",
+  "Enable Word Break": "",
   "Find": "Buscar",
   "Download": "Descargar",
   "No results": "Sin resultados",

frontend/src/i18n/locales/fr/translation.json

@@ -160,6 +160,8 @@
   "Head back <1>home</1>.": "Head back <1>home</1>.",
   "Error Details": "",
   "Copy": "",
+  "Disable Word Break": "",
+  "Enable Word Break": "",
   "Find": "Trouver",
   "Download": "Télécharger",
   "No results": "Aucun résultat",

frontend/src/i18n/locales/it/translation.json

@@ -160,6 +160,8 @@
   "Head back <1>home</1>.": "Torna alla <1>home</1>.",
   "Error Details": "Dettagli errore",
   "Copy": "Copia",
+  "Disable Word Break": "",
+  "Enable Word Break": "",
   "Find": "Trova",
   "Download": "Scarica",
   "No results": "Nessun risultato",

frontend/src/i18n/locales/pt/translation.json

@@ -160,6 +160,8 @@
   "Head back <1>home</1>.": "Voltar ao <1>início</1>.",
   "Error Details": "Detalhes do erro",
   "Copy": "Copiar",
+  "Disable Word Break": "",
+  "Enable Word Break": "",
   "Find": "Pesquisar",
   "Download": "Descarregar",
   "No results": "Sem resultados",

frontend/src/i18n/locales/zh-tw/translation.json

@@ -160,6 +160,8 @@
   "Head back <1>home</1>.": "返回<1>首頁</1>。",
   "Error Details": "錯誤詳情",
   "Copy": "複製",
+  "Disable Word Break": "",
+  "Enable Word Break": "",
   "Find": "查詢",
   "Download": "下載",
   "No results": "無結果",