Skip to content

Commit

Permalink
fix: Fix pod log viewer scrollbars (#14199)
Browse files Browse the repository at this point in the history
* fix: Fix pod log viewer scrollbars

Signed-off-by: Alex Collins <[email protected]>

* fix scrolling

Signed-off-by: Alex Collins <[email protected]>

---------

Signed-off-by: Alex Collins <[email protected]>
  • Loading branch information
alexec authored Jul 9, 2023
1 parent 85e5b0b commit 1aa6a29
Showing 1 changed file with 19 additions and 9 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -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;
Expand Down Expand Up @@ -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) => {
Expand Down Expand Up @@ -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>
Expand Down

0 comments on commit 1aa6a29

Please sign in to comment.