Implemented showing timestamp for logs

Author: olgenn

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>
+    );
+};

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>

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);
+                            }
                         }
                     }
                 }