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 ( +
- {logsForView.map((log, i) => (
-
- {/*{isShowTimestamp && {log.timestamp}}*/}
- {log.message}
-
- ))}
+
+
+ {logsForView.map((log, i) => (
+
+ ))}
+
+
)}
diff --git a/frontend/src/pages/Runs/Details/Logs/styles.module.scss b/frontend/src/pages/Runs/Details/Logs/styles.module.scss
index ee9dba742a..358247a042 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;
+ }
}
}
@@ -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);
+ }
}
}
}