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..4393a493e5 --- /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 ( + + {isShowTimestamp && ( + + + + {' '} + {new Date(logItem.timestamp).toISOString()} + + )} + +
+
+ {logItem.message} +
+
+ + + ); +}; diff --git a/frontend/src/pages/Runs/Details/Logs/index.tsx b/frontend/src/pages/Runs/Details/Logs/index.tsx index f2e81d7b8f..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'; @@ -26,7 +27,7 @@ export const Logs: React.FC = ({ 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 +104,10 @@ export const Logs: React.FC = ({ className, projectName, runName, jobSub setIsEnabledDecoding(!isEnabledDecoding); }; + const toggleShowingTimestamp = () => { + setIsShowTimestamp(!isShowTimestamp); + }; + useEffect(() => { getLogItems(); }, []); @@ -172,11 +177,15 @@ export const Logs: React.FC = ({ className, projectName, runName, jobSub /> - {/**/} - {/* setIsShowTimestamp(detail.checked)} checked={isShowTimestamp}>*/} - {/* Show timestamp*/} - {/* */} - {/**/} + +