CONSOLE-2351 Add a "Wrap lines" toggle to log viewers

frontend/public/components/utils/_log-window.scss

@@ -30,3 +30,8 @@ $color-log-window-divider: $color-log-window-header-bg;
   white-space: pre;
   width: 0;
 }
+
+.log-window__lines--wrap {
+  white-space: pre-wrap;
+  width: inherit;
+}

frontend/public/components/utils/log-window.jsx

@@ -1,6 +1,7 @@
 import * as _ from 'lodash-es';
 import * as React from 'react';
 import * as PropTypes from 'prop-types';
+import classnames from 'classnames';
 import { STREAM_EOF, STREAM_PAUSED, STREAM_ACTIVE } from './resource-log';
 import { OutlinedPlayCircleIcon } from '@patternfly/react-icons';
 import { Button } from '@patternfly/react-core';
@@ -114,7 +115,7 @@ class LogWindowWithTranslation extends React.PureComponent {
   }
 
   render() {
-    const { bufferFull, lines, linesBehind, status, t } = this.props;
+    const { bufferFull, lines, linesBehind, status, t, wrapLines } = this.props;
     const { content, height } = this.state;
     // TODO maybe move these variables into state so they are only updated on changes
     const headerText = bufferFull
@@ -131,7 +132,13 @@ class LogWindowWithTranslation extends React.PureComponent {
         <div className="log-window__body">
           <div className="log-window__scroll-pane" ref={this._setScrollPane}>
             <div className="log-window__contents" ref={this._setLogContents} style={{ height }}>
-              <div className="log-window__lines">{content}</div>
+              <div
+                className={classnames('log-window__lines', {
+                  'log-window__lines--wrap': wrapLines,
+                })}
+              >
+                {content}
+              </div>
             </div>
           </div>
         </div>
@@ -154,4 +161,9 @@ LogWindow.propTypes = {
   linesBehind: PropTypes.number.isRequired,
   status: PropTypes.string.isRequired,
   updateStatus: PropTypes.func.isRequired,
+  wrapLines: PropTypes.bool,
+};
+
+LogWindow.defaultProps = {
+  wrapLines: false,
 };

frontend/public/components/utils/resource-log.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { Base64 } from 'js-base64';
-import { Alert, AlertActionLink, Button } from '@patternfly/react-core';
+import { Alert, AlertActionLink, Button, Checkbox } from '@patternfly/react-core';
 import * as _ from 'lodash-es';
 import { Trans, useTranslation } from 'react-i18next';
 import {
@@ -10,7 +10,8 @@ import {
   OutlinedWindowRestoreIcon,
 } from '@patternfly/react-icons';
 import * as classNames from 'classnames';
-import { FLAGS } from '@console/shared/src/constants';
+import { FLAGS, USERSETTINGS_PREFIX } from '@console/shared/src/constants';
+import { useUserSettings } from '@console/shared';
 import { LoadingInline, LogWindow, TogglePlay, ExternalLink } from './';
 import { modelFor, resourceURL } from '../../module/k8s';
 import { WSFactory } from '../../module/ws-factory';
@@ -89,6 +90,8 @@ export const LogControls: React.FC<LogControlsProps> = ({
   containerName,
   podLogLinks,
   namespaceUID,
+  toggleWrapLines,
+  isWrapLines,
 }) => {
   const { t } = useTranslation();
   return (
@@ -142,6 +145,17 @@ export const LogControls: React.FC<LogControlsProps> = ({
               </React.Fragment>
             );
           })}
+        <Checkbox
+          label={t('logs~Wrap lines')}
+          id="wrapLogLines"
+          isChecked={isWrapLines}
+          onChange={(checked: boolean) => {
+            toggleWrapLines(checked);
+          }}
+        />
+        <span aria-hidden="true" className="co-action-divider hidden-xs">
+          |
+        </span>
         <a href={currentLogURL} target="_blank" rel="noopener noreferrer">
           <OutlinedWindowRestoreIcon className="co-icon-space-r" />
           {t('logs~Raw')}
@@ -206,6 +220,11 @@ export const ResourceLog: React.FC<ResourceLogProps> = ({
   const bufferFull = lines.length === bufferSize;
   const linkURL = getResourceLogURL(resource, containerName);
   const watchURL = getResourceLogURL(resource, containerName, bufferSize, true);
+  const [wrapLines, setWrapLines] = useUserSettings<boolean>(
+    `${USERSETTINGS_PREFIX}.log.wrapLines`,
+    false,
+    true,
+  );
 
   // Update lines behind while stream is paused, reset when unpaused
   React.useEffect(() => {
@@ -391,6 +410,8 @@ export const ResourceLog: React.FC<ResourceLogProps> = ({
           containerName={containerName}
           podLogLinks={podLogLinks}
           namespaceUID={namespaceUID}
+          toggleWrapLines={setWrapLines}
+          isWrapLines={wrapLines}
         />
         <LogWindow
           bufferFull={bufferFull}
@@ -399,6 +420,7 @@ export const ResourceLog: React.FC<ResourceLogProps> = ({
           linesBehind={linesBehind}
           status={status}
           updateStatus={setStatus}
+          wrapLines={wrapLines}
         />
       </div>
     </>
@@ -416,6 +438,8 @@ type LogControlsProps = {
   namespaceUID?: string;
   toggleStreaming?: () => void;
   toggleFullscreen: () => void;
+  toggleWrapLines: (wrapLines: boolean) => void;
+  isWrapLines: boolean;
 };
 
 type ResourceLogProps = {

frontend/public/locales/en/logs.json

@@ -3,6 +3,7 @@
   "Loading log...": "Loading log...",
   "Log stream paused.": "Log stream paused.",
   "Log streaming...": "Log streaming...",
+  "Wrap lines": "Wrap lines",
   "Raw": "Raw",
   "Download": "Download",
   "Collapse": "Collapse",