fix: preserve \n\t\r control characters when displaying logs

kubeshop · Feb 21, 2024 · e098543 · e098543
1 parent cc1919e
commit e098543
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 1 deletion.
diff --git a/src/components/organisms/Dashboard/Disconnected/DebugClusterDrawer.tsx b/src/components/organisms/Dashboard/Disconnected/DebugClusterDrawer.tsx
@@ -8,6 +8,7 @@ import styled from 'styled-components';
 import {Tooltip} from '@components/atoms/Tooltip/Tooltip';
 
 import {useMainPaneDimensions} from '@utils/hooks';
+import {preserveControlCharacters} from '@utils/preserveControlCharacters';
 
 import {ContextId} from '@shared/ipc';
 import {Colors} from '@shared/styles';
@@ -82,7 +83,7 @@ export function DebugClusterDrawer({contextId, open, onClose}: Props) {
                 <LogMeta>
                   [{DateTime.fromMillis(l.timestamp).toFormat('HH:MM:ss')} - {l.type}]
                 </LogMeta>
-                <LogContent $wrap={wordWrap}>{l.content}</LogContent>
+                <LogContent $wrap={wordWrap}>{preserveControlCharacters(l.content)}</LogContent>
               </LogEntry>
             ))}
           </div>

diff --git a/src/utils/preserveControlCharacters.ts b/src/utils/preserveControlCharacters.ts
@@ -0,0 +1,5 @@
+export function preserveControlCharacters(str: string) {
+  return str.replace(/[\n\r\t]/g, cc => {
+    return `\\${cc === '\n' ? 'n' : cc === '\r' ? 'r' : 't'}`;
+  });
+}