Implemented showing timestamp for logs

Author: olgenn

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

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