fix(ui): log button behaviors (#15848) (#16098) (#16111)

* Fixed log button behaviors * Fixed lint-ui issues --------- Signed-off-by: Yi Cai <[email protected]> Co-authored-by: Yi Cai <[email protected]>
argoproj · Oct 25, 2023 · 8218510 · 8218510
1 parent b14837e
commit 8218510
Showing 1 changed file with 17 additions and 7 deletions.
diff --git a/ui/src/app/applications/components/pod-logs-viewer/pod-logs-viewer.tsx b/ui/src/app/applications/components/pod-logs-viewer/pod-logs-viewer.tsx
@@ -1,7 +1,7 @@
 import {DataLoader} from 'argo-ui';
 import * as classNames from 'classnames';
 import * as React from 'react';
-import {useEffect, useState} from 'react';
+import {useEffect, useState, useRef} from 'react';
 import {bufferTime, delay, retryWhen} from 'rxjs/operators';
 
 import {LogEntry} from '../../../shared/models';
@@ -83,6 +83,7 @@ export const PodsLogsViewer = (props: PodLogsProps) => {
     const [highlight, setHighlight] = useState<RegExp>(matchNothing);
     const [scrollToBottom, setScrollToBottom] = useState(true);
     const [logs, setLogs] = useState<LogEntry[]>([]);
+    const logsContainerRef = useRef(null);
 
     useEffect(() => {
         if (viewPodNames) {
@@ -102,6 +103,15 @@ export const PodsLogsViewer = (props: PodLogsProps) => {
 
     useEffect(() => setScrollToBottom(true), [follow]);
 
+    useEffect(() => {
+        if (scrollToBottom) {
+            const element = logsContainerRef.current;
+            if (element) {
+                element.scrollTop = element.scrollHeight;
+            }
+        }
+    }, [logs, scrollToBottom]);
+
     useEffect(() => {
         setLogs([]);
         const logsSource = services.applications
@@ -125,6 +135,10 @@ export const PodsLogsViewer = (props: PodLogsProps) => {
         return () => logsSource.unsubscribe();
     }, [applicationName, applicationNamespace, namespace, podName, group, kind, name, containerName, tail, follow, sinceSeconds, filter, previous]);
 
+    const handleScroll = (event: React.WheelEvent<HTMLDivElement>) => {
+        if (event.deltaY < 0) setScrollToBottom(false);
+    };
+
     const renderLog = (log: LogEntry, lineNum: number) =>
         // show the pod name if there are multiple pods, pad with spaces to align
         (viewPodNames ? (lineNum === 0 || logs[lineNum - 1].podName !== log.podName ? podColor(podName) + log.podName + reset : ' '.repeat(log.podName.length)) + ' ' : '') +
@@ -133,7 +147,7 @@ export const PodsLogsViewer = (props: PodLogsProps) => {
         // show the log content, highlight the filter text
         log.content?.replace(highlight, (substring: string) => whiteOnYellow + substring + reset);
     const logsContent = (width: number, height: number, isWrapped: boolean) => (
-        <div style={{width, height, overflow: 'scroll'}}>
+        <div ref={logsContainerRef} onScroll={handleScroll} style={{width, height, overflow: 'scroll'}}>
             {logs.map((log, lineNum) => (
                 <pre key={lineNum} style={{whiteSpace: isWrapped ? 'normal' : 'pre'}} className='noscroll'>
                     <Ansi>{renderLog(log, lineNum)}</Ansi>
@@ -177,11 +191,7 @@ export const PodsLogsViewer = (props: PodLogsProps) => {
                                 <FullscreenButton {...props} />
                             </span>
                         </div>
-                        <div
-                            className={classNames('pod-logs-viewer', {'pod-logs-viewer--inverted': prefs.appDetails.darkMode})}
-                            onWheel={e => {
-                                if (e.deltaY < 0) setScrollToBottom(false);
-                            }}>
+                        <div className={classNames('pod-logs-viewer', {'pod-logs-viewer--inverted': prefs.appDetails.darkMode})} onWheel={handleScroll}>
                             <AutoSizer>{({width, height}: {width: number; height: number}) => logsContent(width, height, prefs.appDetails.wrapLines)}</AutoSizer>
                         </div>
                     </React.Fragment>