From 64533dba670a674d5a2ec005040582cead613c61 Mon Sep 17 00:00:00 2001
From: Oleg Vavilov <vavilovolegik@gmail.com>
Date: Fri, 1 Aug 2025 01:12:37 +0300
Subject: [PATCH 1/3] Implemented showing timestamp for logs

---
 .../src/pages/Runs/Details/Logs/index.tsx     | 22 +++++++++++++------
 .../Runs/Details/Logs/styles.module.scss      |  6 ++++-
 2 files changed, 20 insertions(+), 8 deletions(-)

diff --git a/frontend/src/pages/Runs/Details/Logs/index.tsx b/frontend/src/pages/Runs/Details/Logs/index.tsx
index f2e81d7b8f..eabeea64b0 100644
--- a/frontend/src/pages/Runs/Details/Logs/index.tsx
+++ b/frontend/src/pages/Runs/Details/Logs/index.tsx
@@ -26,7 +26,7 @@ export const Logs: React.FC<IProps> = ({ className, projectName, runName, jobSub
     const [isLoading, setIsLoading] = useState(false);
     const [getProjectLogs] = useLazyGetProjectLogsQuery();
     const [isEnabledDecoding, setIsEnabledDecoding] = useLocalStorageState('enable-encode-logs', false);
-    // const [isShowTimestamp, setIsShowTimestamp] = useLocalStorageState('enable-showing-timestamp-logs', false);
+    const [isShowTimestamp, setIsShowTimestamp] = useLocalStorageState('enable-showing-timestamp-logs', false);
 
     const logsForView = useMemo(() => {
         if (isEnabledDecoding) {
@@ -103,6 +103,10 @@ export const Logs: React.FC<IProps> = ({ className, projectName, runName, jobSub
         setIsEnabledDecoding(!isEnabledDecoding);
     };
 
+    const toggleShowingTimestamp = () => {
+        setIsShowTimestamp(!isShowTimestamp);
+    };
+
     useEffect(() => {
         getLogItems();
     }, []);
@@ -172,11 +176,15 @@ export const Logs: React.FC<IProps> = ({ className, projectName, runName, jobSub
                                 />
                             </Box>
 
-                            {/*<Box>*/}
-                            {/*    <Toggle onChange={({ detail }) => setIsShowTimestamp(detail.checked)} checked={isShowTimestamp}>*/}
-                            {/*        Show timestamp*/}
-                            {/*    </Toggle>*/}
-                            {/*</Box>*/}
+                            <Box>
+                                <Button
+                                    ariaLabel="Show timestamp"
+                                    formAction="none"
+                                    iconName="status-pending"
+                                    variant={isShowTimestamp ? 'primary' : 'icon'}
+                                    onClick={toggleShowingTimestamp}
+                                />
+                            </Box>
                         </div>
                     </div>
                 }
@@ -195,7 +203,7 @@ export const Logs: React.FC<IProps> = ({ className, projectName, runName, jobSub
                         <Code className={styles.terminal} ref={codeRef}>
                             {logsForView.map((log, i) => (
                                 <p key={i}>
-                                    {/*{isShowTimestamp && <span className={styles.timestamp}>{log.timestamp}</span>}*/}
+                                    {isShowTimestamp && <span className={styles.timestamp}>{log.timestamp}</span>}
                                     {log.message}
                                 </p>
                             ))}
diff --git a/frontend/src/pages/Runs/Details/Logs/styles.module.scss b/frontend/src/pages/Runs/Details/Logs/styles.module.scss
index ee9dba742a..29f1e09446 100644
--- a/frontend/src/pages/Runs/Details/Logs/styles.module.scss
+++ b/frontend/src/pages/Runs/Details/Logs/styles.module.scss
@@ -14,7 +14,11 @@
     .switchers {
         margin-left: auto;
         display: flex;
-        gap: 24px;
+        gap: 10px;
+
+        button {
+            width: 32px !important;
+        }
     }
 }
 

From 9eefd4d491dd43382e92e37d625001ce5001fa89 Mon Sep 17 00:00:00 2001
From: Oleg Vavilov <vavilovolegik@gmail.com>
Date: Mon, 4 Aug 2025 23:46:14 +0300
Subject: [PATCH 2/3] Implemented showing timestamp for logs

---
 .../Details/Logs/components/LogRow/index.tsx  | 57 +++++++++++++++++++
 .../src/pages/Runs/Details/Logs/index.tsx     | 14 +++--
 .../Runs/Details/Logs/styles.module.scss      | 29 +++++++++-
 3 files changed, 91 insertions(+), 9 deletions(-)
 create mode 100644 frontend/src/pages/Runs/Details/Logs/components/LogRow/index.tsx

diff --git a/frontend/src/pages/Runs/Details/Logs/components/LogRow/index.tsx b/frontend/src/pages/Runs/Details/Logs/components/LogRow/index.tsx
new file mode 100644
index 0000000000..3d1bac4da5
--- /dev/null
+++ b/frontend/src/pages/Runs/Details/Logs/components/LogRow/index.tsx
@@ -0,0 +1,57 @@
+import React, { useEffect, useRef, useState } from 'react';
+import cn from 'classnames';
+
+import { Icon } from 'components';
+
+import styles from '../../styles.module.scss';
+
+export const LogRow: React.FC<{
+    logItem: ILogItem;
+    isShowTimestamp?: boolean;
+}> = ({ logItem, isShowTimestamp }) => {
+    const [collapsed, setCollapsed] = useState(true);
+    const [showChevron, setShowChevron] = useState(true);
+    const messageInnerRef = useRef(null);
+
+    const toggleCollapsed = () => setCollapsed((val) => !val);
+
+    useEffect(() => {
+        const observeTarget = messageInnerRef.current;
+        if (!observeTarget) return;
+
+        const resizeObserver = new ResizeObserver((entries) => {
+            const entry = entries[0];
+            if (entry) {
+                const { height } = entry.contentRect;
+
+                setShowChevron(height > 32);
+            }
+        });
+
+        resizeObserver.observe(observeTarget);
+
+        return () => {
+            resizeObserver.unobserve(observeTarget);
+        };
+    }, []);
+
+    return (
+        <tr className={styles.logItem}>
+            {isShowTimestamp && (
+                <td className={styles.timestamp}>
+                    <span className={cn(styles.toggleCollapse, { [styles.hidden]: !showChevron })} onClick={toggleCollapsed}>
+                        <Icon name={collapsed ? 'caret-right-filled' : 'caret-down-filled'} />
+                    </span>{' '}
+                    {logItem.timestamp}
+                </td>
+            )}
+            <td className={styles.messageCol}>
+                <div className={cn(styles.message, { [styles.collapsed]: collapsed && isShowTimestamp })}>
+                    <div ref={messageInnerRef} className={styles.messageInner}>
+                        {logItem.message}
+                    </div>
+                </div>
+            </td>
+        </tr>
+    );
+};
diff --git a/frontend/src/pages/Runs/Details/Logs/index.tsx b/frontend/src/pages/Runs/Details/Logs/index.tsx
index eabeea64b0..8772882d6b 100644
--- a/frontend/src/pages/Runs/Details/Logs/index.tsx
+++ b/frontend/src/pages/Runs/Details/Logs/index.tsx
@@ -7,6 +7,7 @@ import { Box, Button, Code, Container, Header, ListEmptyMessage, Loader, TextCon
 import { useLocalStorageState } from 'hooks/useLocalStorageState';
 import { useLazyGetProjectLogsQuery } from 'services/project';
 
+import { LogRow } from './components/LogRow';
 import { decodeLogs } from './helpers';
 
 import { IProps } from './types';
@@ -201,12 +202,13 @@ export const Logs: React.FC<IProps> = ({ className, projectName, runName, jobSub
 
                     {Boolean(logsForView.length) && (
                         <Code className={styles.terminal} ref={codeRef}>
-                            {logsForView.map((log, i) => (
-                                <p key={i}>
-                                    {isShowTimestamp && <span className={styles.timestamp}>{log.timestamp}</span>}
-                                    {log.message}
-                                </p>
-                            ))}
+                            <table>
+                                <tbody>
+                                    {logsForView.map((log, i) => (
+                                        <LogRow logItem={log} key={i} isShowTimestamp={isShowTimestamp} />
+                                    ))}
+                                </tbody>
+                            </table>
                         </Code>
                     )}
                 </TextContent>
diff --git a/frontend/src/pages/Runs/Details/Logs/styles.module.scss b/frontend/src/pages/Runs/Details/Logs/styles.module.scss
index 29f1e09446..41030cc970 100644
--- a/frontend/src/pages/Runs/Details/Logs/styles.module.scss
+++ b/frontend/src/pages/Runs/Details/Logs/styles.module.scss
@@ -85,13 +85,36 @@
                         color: awsui.$color-text-body-default !important;
                     }
 
-                    p {
-                        padding: 0 !important;
+                    .logItem {
                         font-size: awsui.$font-size-body-s !important;
                         line-height: awsui.$line-height-body-s !important;
 
+                        .toggleCollapse {
+                            position: relative;
+                            top: -3px;
+                            vertical-align: middle;
+                            cursor: pointer;
+
+                            &.hidden {
+                                opacity: 0;
+                                pointer-events: none;
+                            }
+                        }
+
                         .timestamp {
-                            padding-right: 8px;
+                            vertical-align: top;
+                            padding-right: 16px;
+                        }
+
+                        .messageCol {
+                            vertical-align: top;
+                        }
+
+                        .message {
+                            overflow-y: hidden;
+                            &.collapsed {
+                                max-height: calc(awsui.$line-height-body-s * 2);
+                            }
                         }
                     }
                 }

From c544c589897ab35cba74d69940d0a4b293df0e6f Mon Sep 17 00:00:00 2001
From: Oleg Vavilov <vavilovolegik@gmail.com>
Date: Tue, 5 Aug 2025 21:08:02 +0300
Subject: [PATCH 3/3] Implemented showing timestamp for logs. Fixes after
 review

---
 .../src/pages/Runs/Details/Logs/components/LogRow/index.tsx     | 2 +-
 frontend/src/pages/Runs/Details/Logs/styles.module.scss         | 1 +
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/frontend/src/pages/Runs/Details/Logs/components/LogRow/index.tsx b/frontend/src/pages/Runs/Details/Logs/components/LogRow/index.tsx
index 3d1bac4da5..4393a493e5 100644
--- a/frontend/src/pages/Runs/Details/Logs/components/LogRow/index.tsx
+++ b/frontend/src/pages/Runs/Details/Logs/components/LogRow/index.tsx
@@ -42,7 +42,7 @@ export const LogRow: React.FC<{
                     <span className={cn(styles.toggleCollapse, { [styles.hidden]: !showChevron })} onClick={toggleCollapsed}>
                         <Icon name={collapsed ? 'caret-right-filled' : 'caret-down-filled'} />
                     </span>{' '}
-                    {logItem.timestamp}
+                    {new Date(logItem.timestamp).toISOString()}
                 </td>
             )}
             <td className={styles.messageCol}>
diff --git a/frontend/src/pages/Runs/Details/Logs/styles.module.scss b/frontend/src/pages/Runs/Details/Logs/styles.module.scss
index 41030cc970..358247a042 100644
--- a/frontend/src/pages/Runs/Details/Logs/styles.module.scss
+++ b/frontend/src/pages/Runs/Details/Logs/styles.module.scss
@@ -104,6 +104,7 @@
                         .timestamp {
                             vertical-align: top;
                             padding-right: 16px;
+                            white-space: nowrap;
                         }
 
                         .messageCol {