fix: Fix pod log viewer scrollbars (#14199) (#14419)

* fix: Fix pod log viewer scrollbars * fix scrolling --------- Signed-off-by: Alex Collins <[email protected]> Co-authored-by: Alex Collins <[email protected]>
argoproj · Jul 11, 2023 · 2b326dc · 2b326dc
1 parent 85e5b0b
commit 2b326dc
Showing 1 changed file with 19 additions and 9 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
@@ -8,7 +8,7 @@ import {LogEntry} from '../../../shared/models';
 import {services, ViewPreferences} from '../../../shared/services';
 
 import AutoSizer from 'react-virtualized/dist/commonjs/AutoSizer';
-import List from 'react-virtualized/dist/commonjs/List';
+import Grid from 'react-virtualized/dist/commonjs/Grid';
 
 import './pod-logs-viewer.scss';
 import {CopyLogsButton} from './copy-logs-button';
@@ -26,6 +26,7 @@ import {TailSelector} from './tail-selector';
 import {PodNamesToggleButton} from './pod-names-toggle-button';
 import Ansi from 'ansi-to-react';
 import {AutoScrollButton} from './auto-scroll-button';
+import {GridCellProps} from 'react-virtualized/dist/es/Grid';
 
 export interface PodLogsProps {
     namespace: string;
@@ -133,14 +134,22 @@ export const PodsLogsViewer = (props: PodLogsProps) => {
         // show the log content, highlight the filter text
         log.content?.replace(highlight, (substring: string) => whiteOnYellow + substring + reset);
 
-    const rowRenderer = ({index, key, style}: {index: number; key: string; style: React.CSSProperties}) => {
+    const cellRenderer = ({rowIndex, key, style}: GridCellProps) => {
         return (
             <pre key={key} style={style} className='noscroll'>
-                <Ansi>{renderLog(logs[index], index)}</Ansi>
+                <Ansi>{renderLog(logs[rowIndex], rowIndex)}</Ansi>
             </pre>
         );
     };
 
+    // calculate the width of the grid based on the longest log line
+    const maxWidth =
+        14 *
+        logs
+            .map(renderLog)
+            .map(v => v.length)
+            .reduce((a, b) => Math.max(a, b), 0);
+
     return (
         <DataLoader load={() => services.viewPreferences.getPreferences()}>
             {(prefs: ViewPreferences) => {
@@ -178,18 +187,19 @@ export const PodsLogsViewer = (props: PodLogsProps) => {
                         <div
                             className={classNames('pod-logs-viewer', {'pod-logs-viewer--inverted': prefs.appDetails.darkMode})}
                             onWheel={e => {
-                                if (e.deltaY !== 0) setScrollToBottom(false);
+                                if (e.deltaY < 0) setScrollToBottom(false);
                             }}>
                             <AutoSizer>
                                 {({width, height}: {width: number; height: number}) => (
-                                    <List
-                                        rowCount={logs.length}
+                                    <Grid
+                                        cellRenderer={cellRenderer}
+                                        columnCount={1}
+                                        columnWidth={maxWidth}
                                         height={height}
+                                        rowCount={logs.length}
                                         rowHeight={18}
-                                        rowRenderer={rowRenderer}
                                         width={width}
-                                        noRowsRenderer={() => <>No logs</>}
-                                        scrollToIndex={scrollToBottom ? logs.length - 1 : undefined}
+                                        scrollToRow={scrollToBottom ? logs.length - 1 : undefined}
                                     />
                                 )}
                             </AutoSizer>