Implemented showing timestamp for logs (#2937)

* Implemented showing timestamp for logs

* Implemented showing timestamp for logs

* Implemented showing timestamp for logs. Fixes after review

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>{' '}
+                    {new Date(logItem.timestamp).toISOString()}
+                </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';
@@ -27,7 +28,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) {
@@ -105,6 +106,10 @@ export const Logs: React.FC<IProps> = ({ className, projectName, runName, jobSub
         setIsEnabledDecoding(!isEnabledDecoding);
     };
 
+    const toggleShowingTimestamp = () => {
+        setIsShowTimestamp(!isShowTimestamp);
+    };
+
     useEffect(() => {
         getLogItems();
     }, []);
@@ -178,11 +183,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>
                 }
@@ -199,12 +208,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

@@ -14,7 +14,11 @@
     .switchers {
         margin-left: auto;
         display: flex;
-        gap: 24px;
+        gap: 10px;
+
+        button {
+            width: 32px !important;
+        }
     }
 }
 
@@ -81,13 +85,37 @@
                         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;
+                            white-space: nowrap;
+                        }
+
+                        .messageCol {
+                            vertical-align: top;
+                        }
+
+                        .message {
+                            overflow-y: hidden;
+                            &.collapsed {
+                                max-height: calc(awsui.$line-height-body-s * 2);
+                            }
                         }
                     }
                 }