SRVKP-10035: Preserve whitespace in log viewer with horizontal scrolling

src/components/logs/Logs.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Alert } from '@patternfly/react-core';
+import { Alert, Banner } from '@patternfly/react-core';
 import { LogViewer } from '@patternfly/react-log-viewer';
 import { Base64 } from 'js-base64';
 import { useTranslation } from 'react-i18next';
@@ -10,13 +10,15 @@ import { ContainerSpec, ContainerStatus, PodKind } from '../../types';
 import { PodModel } from '../../models';
 import { resourceURL } from '../utils/k8s-utils';
 import { containerToLogSourceStatus } from '../utils/pipeline-utils';
-import './MultiStreamLogs.scss';
+import { LoadingInline } from '../Loading';
 
 type LogsProps = {
   resource: PodKind;
   containers: ContainerSpec[];
   setCurrentLogsGetter?: (getter: () => string) => void;
   activeStep?: string;
+  taskName?: string;
+  stillFetching?: boolean;
 };
 
 type LogData = {
@@ -51,7 +53,9 @@ const processLogData = (
 };
 
 const Logs: React.FC<LogsProps> = ({
+  stillFetching,
   resource,
+  taskName,
   containers,
   setCurrentLogsGetter,
   activeStep,
@@ -259,7 +263,7 @@ const Logs: React.FC<LogsProps> = ({
   }, [logData, activeStep, findTargetRowForActiveStep]);
 
   return (
-    <div className="odc-logs-logviewer">
+    <div className="pf-v5-u-h-100 pf-v5-u-w-100">
       {error && (
         <Alert
           variant="danger"
@@ -268,9 +272,26 @@ const Logs: React.FC<LogsProps> = ({
         />
       )}
       <LogViewer
+        useAnsiClasses={true}
+        header={
+          <Banner className="pf-v5-l-flex pf-v5-l-gap-md">
+            <span data-test-id="logs-taskName" className="pf-v5-u-font-size-md">
+              {taskName}
+            </span>
+            {stillFetching ? (
+              <span data-test-id="loading-indicator">
+                <LoadingInline />
+              </span>
+            ) : null}
+          </Banner>
+        }
         hasLineNumbers={false}
         isTextWrapped={false}
-        data={formattedLogString}
+        data={
+          error
+            ? t('An error occurred while retrieving the requested logs.')
+            : formattedLogString
+        }
         theme="dark"
         scrollToRow={scrollToRow}
         height="100%"

src/components/logs/LogsWrapperComponent.tsx

@@ -1,13 +1,12 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import * as React from 'react';
 import { useTranslation } from 'react-i18next';
-import { Button, Flex, FlexItem } from '@patternfly/react-core';
+import { Button } from '@patternfly/react-core';
 import {
   CompressIcon,
   DownloadIcon,
   ExpandIcon,
 } from '@patternfly/react-icons/dist/js/icons';
-import classNames from 'classnames';
 import { saveAs } from 'file-saver';
 import {
   WatchK8sResource,
@@ -84,71 +83,67 @@ const LogsWrapperComponent: React.FC<
   };
 
   return (
-    <div ref={fullscreenRef} className="odc-multi-stream-logs">
-      <Flex
-        className={(classNames as any)({
-          'odc-multi-stream-logs--fullscreen': isFullscreen,
-        })}
+    <div
+      ref={fullscreenRef}
+      className="pf-v5-u-pr-xl pf-v5-u-display-flex pf-v5-u-flex-direction-column pf-v5-u-h-100 pf-v5-u-w-100"
+    >
+      <div
+        className={`pf-v5-l-flex pf-m-gap-sm pf-m-align-items-center pf-m-justify-content-flex-end ${
+          isFullscreen ? 'pf-v5-u-background-color-100 pf-v5-u-p-sm' : ''
+        }`}
       >
-        <FlexItem
-          className="odc-multi-stream-logs__button"
-          align={{ default: 'alignRight' }}
-        >
-          <Button variant="link" onClick={downloadLogs} isInline>
-            <DownloadIcon className="odc-multi-stream-logs__icon" />
-            {t('Download')}
-          </Button>
-        </FlexItem>
-        <FlexItem className="odc-multi-stream-logs__divider">|</FlexItem>
+        <Button variant="link" onClick={downloadLogs} isInline>
+          <DownloadIcon className="pf-v5-u-mr-xs" />
+          {t('Download')}
+        </Button>
+        <div>|</div>
         {onDownloadAll && (
           <>
-            <FlexItem className="odc-multi-stream-logs__button">
-              <Button
-                variant="link"
-                onClick={startDownloadAll}
-                isDisabled={downloadAllStatus}
-                isInline
-              >
-                <DownloadIcon className="odc-multi-stream-logs__icon" />
-                {downloadAllLabel || t('Download all')}
-                {downloadAllStatus && <LoadingInline />}
-              </Button>
-            </FlexItem>
-            <FlexItem className="odc-multi-stream-logs__divider">|</FlexItem>
+            <Button
+              variant="link"
+              onClick={startDownloadAll}
+              isDisabled={downloadAllStatus}
+              isInline
+            >
+              <DownloadIcon className="pf-v5-u-mr-xs" />
+              {downloadAllLabel || t('Download all')}
+              {downloadAllStatus && <LoadingInline />}
+            </Button>
+            <div>|</div>
           </>
         )}
         {fullscreenToggle && (
-          <FlexItem className="odc-multi-stream-logs__button">
-            <Button variant="link" onClick={fullscreenToggle} isInline>
-              {isFullscreen ? (
-                <>
-                  <CompressIcon className="odc-multi-stream-logs__icon" />
-                  {t('Collapse')}
-                </>
-              ) : (
-                <>
-                  <ExpandIcon className="odc-multi-stream-logs__icon" />
-                  {t('Expand')}
-                </>
-              )}
-            </Button>
-          </FlexItem>
+          <Button variant="link" onClick={fullscreenToggle} isInline>
+            {isFullscreen ? (
+              <>
+                <CompressIcon className="pf-v5-u-mr-xs" />
+                {t('Collapse')}
+              </>
+            ) : (
+              <>
+                <ExpandIcon className="pf-v5-u-mr-xs" />
+                {t('Expand')}
+              </>
+            )}
+          </Button>
+        )}
+      </div>
+      <div className="pf-v5-u-flex-1">
+        {!error ? (
+          <MultiStreamLogs
+            {...props}
+            taskName={taskName}
+            resource={resourceRef.current}
+            setCurrentLogsGetter={setLogGetter}
+            activeStep={activeStep}
+          />
+        ) : (
+          <TektonTaskRunLog
+            taskRun={taskRun}
+            setCurrentLogsGetter={setLogGetter}
+          />
         )}
-      </Flex>
-      {!error ? (
-        <MultiStreamLogs
-          {...props}
-          taskName={taskName}
-          resource={resourceRef.current}
-          setCurrentLogsGetter={setLogGetter}
-          activeStep={activeStep}
-        />
-      ) : (
-        <TektonTaskRunLog
-          taskRun={taskRun}
-          setCurrentLogsGetter={setLogGetter}
-        />
-      )}
+      </div>
     </div>
   );
 };

src/components/logs/MultiStreamLogs.tsx

@@ -2,8 +2,6 @@ import * as React from 'react';
 import Logs from './Logs';
 import { getRenderContainers } from './logs-utils';
 import { PodKind } from '../../types';
-import { LoadingInline } from '../Loading';
-import './MultiStreamLogs.scss';
 
 type MultiStreamLogsProps = {
   resource: PodKind;
@@ -23,21 +21,12 @@ export const MultiStreamLogs: React.FC<MultiStreamLogsProps> = ({
   return (
     <>
       <div
-        className="odc-multi-stream-logs__taskName"
-        data-test-id="logs-taskName"
-      >
-        {taskName}
-        {stillFetching && (
-          <span className="odc-multi-stream-logs__taskName__loading-indicator">
-            <LoadingInline />
-          </span>
-        )}
-      </div>
-      <div
-        className="odc-multi-stream-logs__logviewer"
         data-test-id="logs-task-container"
+        className="pf-v5-u-h-100 pf-v5-u-w-100"
       >
         <Logs
+          stillFetching={stillFetching}
+          taskName={taskName}
           resource={resource}
           containers={containers}
           setCurrentLogsGetter={setCurrentLogsGetter}

src/components/logs/TektonTaskRunLog.scss

@@ -0,0 +1,7 @@
+.odc-tekton-taskrun-log {
+  overflow: hidden;
+
+  .pf-v5-c-log-viewer__text {
+    white-space: pre;
+  }
+}

src/components/logs/TektonTaskRunLog.tsx

@@ -5,7 +5,8 @@ import { TaskRunKind } from '../../types';
 import { TektonResourceLabel } from '../../consts';
 import { LoadingInline } from '../Loading';
 import { useTRTaskRunLog } from '../hooks/useTektonResult';
-import './MultiStreamLogs.scss';
+import { Banner } from '@patternfly/react-core';
+import './TektonTaskRunLog.scss';
 
 type TektonTaskRunLogProps = {
   taskRun?: TaskRunKind;
@@ -45,41 +46,33 @@ export const TektonTaskRunLog: React.FC<TektonTaskRunLogProps> = ({
   return (
     <>
       <div
-        className="odc-multi-stream-logs__taskName"
-        data-test-id="logs-taskName"
-      >
-        {taskName}
-        {!trLoaded && !errorMessage ? (
-          <span
-            className="odc-multi-stream-logs__taskName__loading-indicator"
-            data-test-id="loading-indicator"
-          >
-            <LoadingInline />
-          </span>
-        ) : null}
-      </div>
-      <div
-        className="odc-multi-stream-logs__logviewer"
         data-test-id="tr-logs-task-container"
+        className="odc-tekton-taskrun-log pf-v5-u-h-100 pf-v5-u-w-100"
       >
-        {errorMessage && (
-          <div
-            className="odc-pipeline-run-logs__logtext"
-            data-testid="tr-logs-error-message"
-          >
-            {errorMessage}
-          </div>
-        )}
-        {!errorMessage && trLoaded ? (
-          <LogViewer
-            hasLineNumbers={false}
-            isTextWrapped={false}
-            data={formattedResults}
-            theme="dark"
-            height="100%"
-            scrollToRow={lastRowIndex}
-          />
-        ) : null}
+        <LogViewer
+          useAnsiClasses={true}
+          header={
+            <Banner className="pf-v5-l-flex pf-v5-l-gap-md">
+              <span
+                data-test-id="logs-taskName"
+                className="pf-v5-u-font-size-md"
+              >
+                {taskName}
+              </span>
+              {!trLoaded && !errorMessage ? (
+                <span data-test-id="loading-indicator">
+                  <LoadingInline />
+                </span>
+              ) : null}
+            </Banner>
+          }
+          hasLineNumbers={false}
+          isTextWrapped={false}
+          data={errorMessage ?? (!trLoaded ? '' : formattedResults)}
+          height="100%"
+          scrollToRow={lastRowIndex}
+          theme="dark"
+        />
       </div>
     </>
   );

src/components/pipelineRuns-details/PipelineRunDetailsPage.tsx

@@ -145,7 +145,7 @@ const PipelineRunDetailsPage: React.FC<PipelineRunDetailsPageProps> = ({
 
   const resourceTitleFunc = React.useMemo((): string | JSX.Element => {
     return (
-      <div className="pipelinerun-details-page">
+      <div className="pipelinerun-details-page pf-v5-u-display-flex pf-v5-u-align-items-center">
         {pipelineRun?.metadata?.name}{' '}
         {pipelineRun?.metadata?.annotations?.[chainsSignedAnnotation] ===
           'true' && (