feat(ui): Add button for wrapping lines in pod logs viewer (argoproj#…

…15506) * Add back wrap log line button Signed-off-by: Yi Cai <yicai@redhat.com> * Fixed lint issue Signed-off-by: Yi Cai <yicai@redhat.com> * Updated icon and location of Wrap Lines btn Signed-off-by: Yi Cai <yicai@redhat.com> * Fixed lint issue Signed-off-by: Yi Cai <yicai@redhat.com> * Put back pre tag and Ansi component Signed-off-by: Yi Cai <yicai@redhat.com> --------- Signed-off-by: Yi Cai <yicai@redhat.com>
tesla59 · Dec 16, 2023 · 57c2cc5 · 57c2cc5
1 parent 18ef66b
commit 57c2cc5
Show file tree

Hide file tree

Showing 4 changed files with 38 additions and 36 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,6 @@ import {LogEntry} from '../../../shared/models';
 import {services, ViewPreferences} from '../../../shared/services';
 
 import AutoSizer from 'react-virtualized/dist/commonjs/AutoSizer';
-import Grid from 'react-virtualized/dist/commonjs/Grid';
 
 import './pod-logs-viewer.scss';
 import {CopyLogsButton} from './copy-logs-button';
@@ -24,9 +23,9 @@ import {LogMessageFilter} from './log-message-filter';
 import {SinceSecondsSelector} from './since-seconds-selector';
 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';
+import {WrapLinesButton} from './wrap-lines-button';
+import Ansi from 'ansi-to-react';
 
 export interface PodLogsProps {
     namespace: string;
@@ -133,22 +132,15 @@ export const PodsLogsViewer = (props: PodLogsProps) => {
         (viewTimestamps ? (lineNum === 0 || (logs[lineNum - 1].timeStamp !== log.timeStamp ? log.timeStampStr : '').padEnd(30)) + ' ' : '') +
         // show the log content, highlight the filter text
         log.content?.replace(highlight, (substring: string) => whiteOnYellow + substring + reset);
-
-    const cellRenderer = ({rowIndex, key, style}: GridCellProps) => {
-        return (
-            <pre key={key} style={style} className='noscroll'>
-                <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);
+    const logsContent = (width: number, height: number, isWrapped: boolean) => (
+        <div style={{width, height, overflow: 'scroll'}}>
+            {logs.map((log, lineNum) => (
+                <pre key={lineNum} style={{whiteSpace: isWrapped ? 'normal' : 'pre'}} className='noscroll'>
+                    <Ansi>{renderLog(log, lineNum)}</Ansi>
+                </pre>
+            ))}
+        </div>
+    );
 
     return (
         <DataLoader load={() => services.viewPreferences.getPreferences()}>
@@ -173,6 +165,7 @@ export const PodsLogsViewer = (props: PodLogsProps) => {
                             </span>
                             <Spacer />
                             <span>
+                                <WrapLinesButton prefs={prefs} />
                                 <PodNamesToggleButton viewPodNames={viewPodNames} setViewPodNames={setViewPodNames} />
                                 <TimestampsToggleButton setViewTimestamps={setViewTimestamps} viewTimestamps={viewTimestamps} timestamp={timestamp} />
                                 <DarkModeToggleButton prefs={prefs} />
@@ -189,20 +182,7 @@ export const PodsLogsViewer = (props: PodLogsProps) => {
                             onWheel={e => {
                                 if (e.deltaY < 0) setScrollToBottom(false);
                             }}>
-                            <AutoSizer>
-                                {({width, height}: {width: number; height: number}) => (
-                                    <Grid
-                                        cellRenderer={cellRenderer}
-                                        columnCount={1}
-                                        columnWidth={Math.max(width, maxWidth)}
-                                        height={height}
-                                        rowCount={logs.length}
-                                        rowHeight={18}
-                                        width={width}
-                                        scrollToRow={scrollToBottom ? logs.length - 1 : undefined}
-                                    />
-                                )}
-                            </AutoSizer>
+                            <AutoSizer>{({width, height}: {width: number; height: number}) => logsContent(width, height, prefs.appDetails.wrapLines)}</AutoSizer>
                         </div>
                     </React.Fragment>
                 );

diff --git a/ui/src/app/applications/components/pod-logs-viewer/wrap-lines-button.tsx b/ui/src/app/applications/components/pod-logs-viewer/wrap-lines-button.tsx
@@ -0,0 +1,17 @@
+import {services, ViewPreferences} from '../../../shared/services';
+import * as React from 'react';
+import {ToggleButton} from '../../../shared/components/toggle-button';
+
+// WrapLinesButton is a component that wraps log lines.
+export const WrapLinesButton = ({prefs}: {prefs: ViewPreferences}) => (
+    <ToggleButton
+        title='Wrap Lines'
+        onToggle={() => {
+            const wrap = prefs.appDetails.wrapLines;
+            services.viewPreferences.updatePreferences({...prefs, appDetails: {...prefs.appDetails, wrapLines: !wrap}});
+        }}
+        toggled={prefs.appDetails.wrapLines}
+        icon='share'
+        rotate={true}
+    />
+);
diff --git a/ui/src/app/shared/components/button.tsx b/ui/src/app/shared/components/button.tsx
@@ -12,7 +12,8 @@ export const Button = ({
     className,
     style,
     disabled,
-    beat
+    beat,
+    rotate
 }: {
     onClick?: MouseEventHandler;
     children?: ReactNode;
@@ -23,13 +24,14 @@ export const Button = ({
     style?: CSSProperties;
     disabled?: boolean;
     beat?: boolean;
+    rotate?: boolean;
 }) => (
     <Tooltip content={title}>
         <button
             className={'argo-button ' + (!outline ? 'argo-button--base' : 'argo-button--base-o') + ' ' + (disabled ? 'disabled' : '') + ' ' + (className || '')}
             style={style}
             onClick={onClick}>
-            {icon && <i className={'fa fa-' + icon + ' ' + (beat ? 'fa-beat' : '')} />} {children}
+            {icon && <i className={'fa fa-' + icon + ' ' + (beat ? 'fa-beat' : '') + (rotate ? 'fa-rotate-180' : '')} />} {children}
         </button>
     </Tooltip>
 );
diff --git a/ui/src/app/shared/components/toggle-button.tsx b/ui/src/app/shared/components/toggle-button.tsx
@@ -11,7 +11,8 @@ export const ToggleButton = ({
     toggled,
     beat,
     disabled,
-    icon
+    icon,
+    rotate
 }: {
     toggled: boolean;
     beat?: boolean;
@@ -20,11 +21,13 @@ export const ToggleButton = ({
     title: string;
     disabled?: boolean;
     icon: Icon;
+    rotate?: boolean;
 }) => (
     <Button
         title={title}
         onClick={onToggle}
         icon={icon}
+        rotate={rotate}
         disabled={disabled}
         beat={beat}
         style={{