From 8c7fe7646e8c0a08b89ff4c39bd57854af45c80c Mon Sep 17 00:00:00 2001
From: Juntao Wang <37624318+DaoDaoNoCode@users.noreply.github.com>
Date: Thu, 10 Oct 2024 17:54:58 -0400
Subject: [PATCH] UX updates for pipeline logs (#3295)

* UX updates for pipeline logs

* Update icon size
---
 .../concepts/dashboard/DashboardLogViewer.tsx |  2 +-
 .../pipelineRun/runLogs/LogsTab.tsx           | 57 ++++++++++---------
 .../pipelineRun/runLogs/LogsTabStatus.tsx     | 27 ++++++++-
 3 files changed, 55 insertions(+), 31 deletions(-)

diff --git a/frontend/src/concepts/dashboard/DashboardLogViewer.tsx b/frontend/src/concepts/dashboard/DashboardLogViewer.tsx
index d57fdc2428..bccd877da1 100644
--- a/frontend/src/concepts/dashboard/DashboardLogViewer.tsx
+++ b/frontend/src/concepts/dashboard/DashboardLogViewer.tsx
@@ -5,7 +5,7 @@ const DashboardLogViewer: React.FC<{
   data: string;
   logViewerRef: React.MutableRefObject<{ scrollToBottom: () => void } | undefined>;
   toolbar: JSX.Element | boolean;
-  footer: JSX.Element | false;
+  footer?: JSX.Element | false;
   onScroll: React.ComponentProps<typeof LogViewer>['onScroll'];
   height?: number | string;
   isTextWrapped?: boolean;
diff --git a/frontend/src/concepts/pipelines/content/pipelinesDetails/pipelineRun/runLogs/LogsTab.tsx b/frontend/src/concepts/pipelines/content/pipelinesDetails/pipelineRun/runLogs/LogsTab.tsx
index 869395a99c..30ee08b56b 100644
--- a/frontend/src/concepts/pipelines/content/pipelinesDetails/pipelineRun/runLogs/LogsTab.tsx
+++ b/frontend/src/concepts/pipelines/content/pipelinesDetails/pipelineRun/runLogs/LogsTab.tsx
@@ -17,16 +17,16 @@ import {
   ToolbarItem,
   Tooltip,
   Truncate,
+  Icon,
 } from '@patternfly/react-core';
-import { OutlinedPlayCircleIcon } from '@patternfly/react-icons/dist/esm/icons/outlined-play-circle-icon';
-import { PauseIcon } from '@patternfly/react-icons/dist/esm/icons/pause-icon';
-import { PlayIcon } from '@patternfly/react-icons/dist/esm/icons/play-icon';
 import { DownloadIcon } from '@patternfly/react-icons/dist/esm/icons/download-icon';
 import { LogViewer, LogViewerSearch } from '@patternfly/react-log-viewer';
 import {
   CompressIcon,
   EllipsisVIcon,
   ExpandIcon,
+  OutlinedPauseCircleIcon,
+  OutlinedPlayCircleIcon,
   OutlinedWindowRestoreIcon,
 } from '@patternfly/react-icons';
 import DashboardLogViewer from '~/concepts/dashboard/DashboardLogViewer';
@@ -97,6 +97,7 @@ const LogsTab: React.FC<LogsTabProps> = ({ task, isCached }) => {
     };
   }, [dispatchResizeEvent]);
 
+  // Scroll to bottom when log refreshes and streaming
   React.useEffect(() => {
     if (!isPaused && logs) {
       if (logViewerRef.current) {
@@ -105,6 +106,16 @@ const LogsTab: React.FC<LogsTabProps> = ({ task, isCached }) => {
     }
   }, [isPaused, logs]);
 
+  React.useEffect(() => {
+    const logWindowElement = document.querySelector(
+      '#dashboard-logviewer .pf-v5-c-log-viewer__main',
+    );
+    if (logWindowElement) {
+      logWindowElement.addEventListener('mousedown', () => setIsPaused(true));
+    }
+    return logWindowElement?.removeEventListener('mousedown', () => setIsPaused(true));
+  }, []);
+
   const onScroll: React.ComponentProps<typeof LogViewer>['onScroll'] = ({
     scrollOffsetToBottom,
     scrollUpdateWasRequested,
@@ -195,6 +206,8 @@ const LogsTab: React.FC<LogsTabProps> = ({ task, isCached }) => {
     data = 'No logs available';
   }
 
+  const rawLogsLink = `${location.origin}/api/k8s/api/v1/namespaces/${namespace}/pods/${podName}/log?container=${containerName}`;
+
   return (
     <Stack hasGutter>
       <StackItem>
@@ -208,19 +221,18 @@ const LogsTab: React.FC<LogsTabProps> = ({ task, isCached }) => {
             isCached={isCached}
             isFailedPod={isFailedPod}
             isLogsAvailable={podContainers.length !== 1 && !!logs}
-            onDownload={onDownloadAll}
+            onDownload={onDownload}
+            onDownloadAll={onDownloadAll}
+            rawLogsLink={rawLogsLink}
           />
         )}
       </StackItem>
       <StackItem isFilled id="dashboard-logviewer" style={{ position: 'relative' }}>
-        {/* -33 to make room for the footer to pop in*/}
         <div
-          style={{ position: 'absolute', left: 0, right: 0, top: 0, bottom: -33 }}
+          style={{ position: 'absolute', left: 0, right: 0, top: 0, bottom: 0 }}
           ref={logsTabRef}
         >
-          {/* 33 for the toolbar, 33 for the footer, and 1 because browser layout calculations sometimes go over by a fraction of a pixel */}
           <DashboardLogViewer
-            height="calc(100% - 75px)"
             data={data}
             logViewerRef={logViewerRef}
             isTextWrapped={isTextWrapped}
@@ -314,7 +326,7 @@ const LogsTab: React.FC<LogsTabProps> = ({ task, isCached }) => {
                           }}
                         />
                       </ToolbarItem>
-                      {(!podStatus?.completed || isPaused) && (
+                      {!podStatus?.completed && (
                         <ToolbarItem spacer={{ default: 'spacerNone' }}>
                           <Button
                             variant={!logsLoaded ? 'plain' : isPaused ? 'plain' : 'link'}
@@ -323,16 +335,20 @@ const LogsTab: React.FC<LogsTabProps> = ({ task, isCached }) => {
                             data-testid="logs-pause-refresh-button"
                           >
                             {isPaused ? (
-                              <Tooltip content="Resume refreshing">
-                                <PlayIcon />
+                              <Tooltip content="Resume log streaming.">
+                                <Icon iconSize="md">
+                                  <OutlinedPlayCircleIcon />
+                                </Icon>
                               </Tooltip>
                             ) : !logsLoaded || podStatus?.podInitializing ? (
                               <Tooltip content="Loading log">
                                 <Spinner size="sm" />
                               </Tooltip>
                             ) : (
-                              <Tooltip content="Pause refreshing">
-                                <PauseIcon />
+                              <Tooltip content="Pause log streaming.">
+                                <Icon iconSize="md">
+                                  <OutlinedPauseCircleIcon />
+                                </Icon>
                               </Tooltip>
                             )}
                           </Button>
@@ -394,7 +410,7 @@ const LogsTab: React.FC<LogsTabProps> = ({ task, isCached }) => {
                           <DropdownList>
                             <DropdownItem
                               isDisabled={!logs}
-                              to={`${location.origin}/api/k8s/api/v1/namespaces/${namespace}/pods/${podName}/log?container=${containerName}`}
+                              to={rawLogsLink}
                               target="_blank"
                               rel="noopener noreferrer"
                               icon={<OutlinedWindowRestoreIcon />}
@@ -418,19 +434,6 @@ const LogsTab: React.FC<LogsTabProps> = ({ task, isCached }) => {
                 </Toolbar>
               )
             }
-            footer={
-              logsLoaded &&
-              isPaused &&
-              !podStatus?.completed && (
-                <Button
-                  onClick={() => setIsPaused(false)}
-                  isBlock
-                  icon={<OutlinedPlayCircleIcon />}
-                >
-                  Resume refreshing log
-                </Button>
-              )
-            }
             onScroll={onScroll}
           />
         </div>
diff --git a/frontend/src/concepts/pipelines/content/pipelinesDetails/pipelineRun/runLogs/LogsTabStatus.tsx b/frontend/src/concepts/pipelines/content/pipelinesDetails/pipelineRun/runLogs/LogsTabStatus.tsx
index ae3937445b..df43aab686 100644
--- a/frontend/src/concepts/pipelines/content/pipelinesDetails/pipelineRun/runLogs/LogsTabStatus.tsx
+++ b/frontend/src/concepts/pipelines/content/pipelinesDetails/pipelineRun/runLogs/LogsTabStatus.tsx
@@ -16,6 +16,8 @@ type LogsTabStatusProps = {
   isFailedPod?: boolean;
   loaded: boolean;
   onDownload: () => void;
+  onDownloadAll: () => void;
+  rawLogsLink: string;
 };
 
 const LogsTabStatus: React.FC<LogsTabStatusProps> = ({
@@ -28,6 +30,8 @@ const LogsTabStatus: React.FC<LogsTabStatusProps> = ({
   loaded,
   isFailedPod,
   onDownload,
+  onDownloadAll,
+  rawLogsLink,
 }) => {
   if (isCached) {
     return (
@@ -85,11 +89,28 @@ const LogsTabStatus: React.FC<LogsTabStatusProps> = ({
     >
       <p>
         The log refreshes every {Math.floor(LOG_REFRESH_RATE / 1000)} seconds and displays the
-        latest {LOG_TAIL_LINES} lines. To view the full log for this task, you can{' '}
+        latest {LOG_TAIL_LINES} lines, with exceptionally long lines abridged. To view the full log
+        for this step,{' '}
+        <Button
+          isDisabled={!isLogsAvailable}
+          variant="link"
+          component="a"
+          href={rawLogsLink}
+          target="_blank"
+          rel="noopener noreferrer"
+          isInline
+        >
+          view its raw log
+        </Button>{' '}
+        or{' '}
         <Button isDisabled={!isLogsAvailable} variant="link" isInline onClick={onDownload}>
-          download all step logs
+          download
         </Button>{' '}
-        associated with it.
+        it. To view the full log for this task,{' '}
+        <Button isDisabled={!isLogsAvailable} variant="link" isInline onClick={onDownloadAll}>
+          download all of its associated step logs
+        </Button>
+        .
       </p>
     </Alert>
   );