Skip to content

fix(LogViewer): Adjust parsed data to remove tab character #99

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Jul 28, 2025
Merged

fix(LogViewer): Adjust parsed data to remove tab character #99

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 14 additions & 1 deletion packages/module/src/LogViewer/LogViewer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,6 +64,8 @@ export interface LogViewerProps {
* measured to prevent a bug where one line can overlap another.
*/
fastRowHeightEstimationLimit?: number;
/** Number of spaces used to replace tabs */
numSpaces?: number;
}

let canvas: HTMLCanvasElement | undefined;
Expand Down Expand Up @@ -98,6 +100,7 @@ const LogViewerBase: React.FunctionComponent<LogViewerProps> = memo(
initialIndexWidth,
useAnsiClasses,
fastRowHeightEstimationLimit = 5000,
numSpaces = 8,
Copy link
Member

@logonoff logonoff Jul 8, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

maybe this info can be fetched from the browser: https://www.w3schools.com/jsref/prop_style_tabsize.asp

Copy link
Member Author

@rebeccaalpert rebeccaalpert Jul 8, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm checking with the Core team - I don't think we set this property in PatternFly, but products could definitely do something like this to set numSpaces if they had it set.

Copy link
Member Author

@rebeccaalpert rebeccaalpert Jul 8, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Core says we don't set it, but you should definitely be able to do something like that in OpenShift if you set it there!

...props
}: LogViewerProps) => {
const [searchedInput, setSearchedInput] = useState<string | null>('');
Expand All @@ -112,7 +115,13 @@ const LogViewerBase: React.FunctionComponent<LogViewerProps> = memo(
const [listKey, setListKey] = useState(1);

/* Parse data every time it changes */
const parsedData = useMemo(() => parseConsoleOutput(data), [data]);
const parsedData = useMemo(
() =>
// use of tabs in data can throw off the character count when we estimate height since we see it as \t, so replace them with spaces
// spaces seem to get picked up by height calculations
parseConsoleOutput(data).map((datum) => datum.replace(/\t/g, ' '.repeat(numSpaces))),
[data]
);

const isChrome = useMemo(() => navigator.userAgent.indexOf('Chrome') !== -1, []);

Expand Down Expand Up @@ -183,6 +192,10 @@ const LogViewerBase: React.FunctionComponent<LogViewerProps> = memo(
}, [parsedData, scrollToRow]);

const createDummyElements = () => {
if (!containerRef.current) {
return;
}

// create dummy elements
const dummyIndex = document.createElement('span');
dummyIndex.className = css(styles.logViewerIndex);
Expand Down