From 421bdfdbacf1e7640c0fe7f98fd5deffba64cc70 Mon Sep 17 00:00:00 2001
From: Juntao Wang <juntwang@redhat.com>
Date: Thu, 3 Oct 2024 11:19:24 -0400
Subject: [PATCH] UX updates for pipeline logs

---
 .../concepts/dashboard/DashboardLogViewer.tsx |   2 +-
 .../pipelineRun/runLogs/LogsTab.tsx           | 415 +++++++++---------
 .../pipelineRun/runLogs/LogsTabStatus.tsx     |  27 +-
 3 files changed, 226 insertions(+), 218 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..dfa9b62986 100644
--- a/frontend/src/concepts/pipelines/content/pipelinesDetails/pipelineRun/runLogs/LogsTab.tsx
+++ b/frontend/src/concepts/pipelines/content/pipelinesDetails/pipelineRun/runLogs/LogsTab.tsx
@@ -18,15 +18,14 @@ import {
   Tooltip,
   Truncate,
 } 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 +96,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 +105,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 +205,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,232 +220,207 @@ 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 }}
-          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}
-            toolbar={
-              !error &&
-              !isCached && (
-                <Toolbar className={isFullScreen ? 'pf-v5-u-p-sm' : ''}>
-                  <ToolbarContent>
-                    <ToolbarGroup
-                      align={{ default: 'alignLeft' }}
-                      spacer={{ default: 'spacerNone' }}
-                    >
-                      {!showSearchbar && (
-                        <ToolbarItem spacer={{ default: 'spacerSm' }} style={{ maxWidth: '200px' }}>
-                          <Dropdown
-                            isOpen={open}
-                            onSelect={() => setOpen(false)}
-                            onOpenChange={(isOpen: boolean) => setOpen(isOpen)}
-                            toggle={(toggleRef) => (
-                              <MenuToggle
-                                data-testid="logs-step-select"
-                                ref={toggleRef}
-                                isDisabled={podContainers.length <= 1}
-                                onClick={() => setOpen(!open)}
-                                isExpanded={open}
-                              >
-                                <Truncate
-                                  content={
-                                    podContainers.find((key) => key.name === containerName)?.name ??
-                                    'Select container...'
-                                  }
-                                  className="truncate-no-min-width"
-                                />
-                              </MenuToggle>
-                            )}
-                            shouldFocusToggleOnSelect
-                          >
-                            {defaultContainerName && (
-                              <>
-                                <DropdownGroup label="Task output logs" key="Task output logs">
-                                  <DropdownList>
-                                    <DropdownItem
-                                      key={defaultContainerName}
-                                      onClick={() => onChange(defaultContainerName)}
-                                    >
-                                      {defaultContainerName}
-                                    </DropdownItem>
-                                  </DropdownList>
-                                </DropdownGroup>
-                                <Divider component="li" />
-                              </>
-                            )}
-                            <DropdownGroup
-                              label="Operation output logs"
-                              key="Operation output logs"
-                            >
-                              <DropdownList>
-                                {podContainers
-                                  .filter(
-                                    (podContainer) => podContainer.name !== defaultContainerName,
-                                  )
-                                  .map((container) => (
-                                    <DropdownItem
-                                      data-testid={`dropdown-item ${container.name}`}
-                                      key={container.name}
-                                      onClick={() => {
-                                        onChange(container.name);
-                                      }}
-                                    >
-                                      {container.name}
-                                    </DropdownItem>
-                                  ))}
-                              </DropdownList>
-                            </DropdownGroup>
-                          </Dropdown>
-                        </ToolbarItem>
-                      )}
-                      <ToolbarItem spacer={{ default: 'spacerNone' }} style={{ maxWidth: '300px' }}>
-                        <LogViewerSearch
-                          onFocus={() => {
-                            if (!podStatus?.completed && logsLoaded) {
-                              setIsPaused(true);
-                            }
-                          }}
-                          placeholder="Search"
-                          minSearchChars={0}
-                          expandableInput={{
-                            isExpanded: showSearchbar,
-                            onToggleExpand,
-                            toggleAriaLabel: 'Expandable search input toggle',
-                          }}
-                        />
-                      </ToolbarItem>
-                      {(!podStatus?.completed || isPaused) && (
-                        <ToolbarItem spacer={{ default: 'spacerNone' }}>
-                          <Button
-                            variant={!logsLoaded ? 'plain' : isPaused ? 'plain' : 'link'}
-                            onClick={() => setIsPaused(!isPaused)}
-                            isDisabled={!!error}
-                            data-testid="logs-pause-refresh-button"
-                          >
-                            {isPaused ? (
-                              <Tooltip content="Resume refreshing">
-                                <PlayIcon />
-                              </Tooltip>
-                            ) : !logsLoaded || podStatus?.podInitializing ? (
-                              <Tooltip content="Loading log">
-                                <Spinner size="sm" />
-                              </Tooltip>
-                            ) : (
-                              <Tooltip content="Pause refreshing">
-                                <PauseIcon />
-                              </Tooltip>
-                            )}
-                          </Button>
-                        </ToolbarItem>
-                      )}
-                    </ToolbarGroup>
-                    <ToolbarGroup align={{ default: 'alignRight' }}>
-                      <ToolbarItem alignSelf="center">
-                        <Checkbox
-                          label="Wrap text"
-                          aria-label="wrap text checkbox"
-                          isChecked={isTextWrapped}
-                          id="wrap-text-checkbox"
-                          onChange={(_event, value) => setIsTextWrapped(value)}
-                        />
-                      </ToolbarItem>
-                      <ToolbarItem spacer={{ default: 'spacerNone' }}>
-                        {downloading && <Spinner size="sm" className="pf-v5-u-my-sm" />}
-                        {podContainers.length <= 1 ? (
-                          <Tooltip position="top" content={<div>Download current step log</div>}>
-                            <Button
-                              onClick={onDownload}
-                              variant="link"
-                              aria-label="Download current step log"
-                              icon={<DownloadIcon />}
-                              isDisabled={!canDownload || !logs}
-                            />
-                          </Tooltip>
-                        ) : (
-                          <Tooltip content="Download">
-                            <DownloadDropdown
-                              onDownload={onDownload}
-                              onDownloadAll={onDownloadAll}
-                              isSingleStepLogsEmpty={!logs}
-                            />
-                          </Tooltip>
-                        )}
-                      </ToolbarItem>
-                      <ToolbarItem spacer={{ default: 'spacerNone' }}>
+        <DashboardLogViewer
+          data={data}
+          logViewerRef={logViewerRef}
+          isTextWrapped={isTextWrapped}
+          toolbar={
+            !error &&
+            !isCached && (
+              <Toolbar className={isFullScreen ? 'pf-v5-u-p-sm' : ''}>
+                <ToolbarContent>
+                  <ToolbarGroup align={{ default: 'alignLeft' }} spacer={{ default: 'spacerNone' }}>
+                    {!showSearchbar && (
+                      <ToolbarItem spacer={{ default: 'spacerSm' }} style={{ maxWidth: '200px' }}>
                         <Dropdown
-                          popperProps={{ position: 'right' }}
-                          isOpen={isKebabOpen}
-                          onOpenChange={(isOpen: boolean) => setIsKebabOpen(isOpen)}
+                          isOpen={open}
+                          onSelect={() => setOpen(false)}
+                          onOpenChange={(isOpen: boolean) => setOpen(isOpen)}
                           toggle={(toggleRef) => (
                             <MenuToggle
+                              data-testid="logs-step-select"
                               ref={toggleRef}
-                              variant="plain"
-                              data-testid="logs-kebab-toggle"
-                              onClick={() => {
-                                setIsKebabOpen(!isKebabOpen);
-                              }}
-                              isExpanded={isKebabOpen}
+                              isDisabled={podContainers.length <= 1}
+                              onClick={() => setOpen(!open)}
+                              isExpanded={open}
                             >
-                              <EllipsisVIcon />
+                              <Truncate
+                                content={
+                                  podContainers.find((key) => key.name === containerName)?.name ??
+                                  'Select container...'
+                                }
+                                className="truncate-no-min-width"
+                              />
                             </MenuToggle>
                           )}
                           shouldFocusToggleOnSelect
                         >
-                          <DropdownList>
-                            <DropdownItem
-                              isDisabled={!logs}
-                              to={`${location.origin}/api/k8s/api/v1/namespaces/${namespace}/pods/${podName}/log?container=${containerName}`}
-                              target="_blank"
-                              rel="noopener noreferrer"
-                              icon={<OutlinedWindowRestoreIcon />}
-                              aria-label="View raw logs"
-                              data-testid="raw-logs"
-                            >
-                              View raw logs
-                            </DropdownItem>
-                            <DropdownItem
-                              onClick={onExpandClick}
-                              key="action"
-                              icon={!isFullScreen ? <ExpandIcon /> : <CompressIcon />}
-                            >
-                              {!isFullScreen ? 'Expand' : 'Collapse'}
-                            </DropdownItem>
-                          </DropdownList>
+                          {defaultContainerName && (
+                            <>
+                              <DropdownGroup label="Task output logs" key="Task output logs">
+                                <DropdownList>
+                                  <DropdownItem
+                                    key={defaultContainerName}
+                                    onClick={() => onChange(defaultContainerName)}
+                                  >
+                                    {defaultContainerName}
+                                  </DropdownItem>
+                                </DropdownList>
+                              </DropdownGroup>
+                              <Divider component="li" />
+                            </>
+                          )}
+                          <DropdownGroup label="Operation output logs" key="Operation output logs">
+                            <DropdownList>
+                              {podContainers
+                                .filter(
+                                  (podContainer) => podContainer.name !== defaultContainerName,
+                                )
+                                .map((container) => (
+                                  <DropdownItem
+                                    data-testid={`dropdown-item ${container.name}`}
+                                    key={container.name}
+                                    onClick={() => {
+                                      onChange(container.name);
+                                    }}
+                                  >
+                                    {container.name}
+                                  </DropdownItem>
+                                ))}
+                            </DropdownList>
+                          </DropdownGroup>
                         </Dropdown>
                       </ToolbarItem>
-                    </ToolbarGroup>
-                  </ToolbarContent>
-                </Toolbar>
-              )
-            }
-            footer={
-              logsLoaded &&
-              isPaused &&
-              !podStatus?.completed && (
-                <Button
-                  onClick={() => setIsPaused(false)}
-                  isBlock
-                  icon={<OutlinedPlayCircleIcon />}
-                >
-                  Resume refreshing log
-                </Button>
-              )
-            }
-            onScroll={onScroll}
-          />
-        </div>
+                    )}
+                    <ToolbarItem spacer={{ default: 'spacerNone' }} style={{ maxWidth: '300px' }}>
+                      <LogViewerSearch
+                        onFocus={() => {
+                          if (!podStatus?.completed && logsLoaded) {
+                            setIsPaused(true);
+                          }
+                        }}
+                        placeholder="Search"
+                        minSearchChars={0}
+                        expandableInput={{
+                          isExpanded: showSearchbar,
+                          onToggleExpand,
+                          toggleAriaLabel: 'Expandable search input toggle',
+                        }}
+                      />
+                    </ToolbarItem>
+                    {!podStatus?.completed && (
+                      <ToolbarItem spacer={{ default: 'spacerNone' }}>
+                        <Button
+                          variant={!logsLoaded ? 'plain' : isPaused ? 'plain' : 'link'}
+                          onClick={() => setIsPaused(!isPaused)}
+                          isDisabled={!!error}
+                          data-testid="logs-pause-refresh-button"
+                        >
+                          {isPaused ? (
+                            <Tooltip content="Resume log streaming.">
+                              <OutlinedPlayCircleIcon />
+                            </Tooltip>
+                          ) : !logsLoaded || podStatus?.podInitializing ? (
+                            <Tooltip content="Loading log">
+                              <Spinner size="sm" />
+                            </Tooltip>
+                          ) : (
+                            <Tooltip content="Pause log streaming.">
+                              <OutlinedPauseCircleIcon />
+                            </Tooltip>
+                          )}
+                        </Button>
+                      </ToolbarItem>
+                    )}
+                  </ToolbarGroup>
+                  <ToolbarGroup align={{ default: 'alignRight' }}>
+                    <ToolbarItem alignSelf="center">
+                      <Checkbox
+                        label="Wrap text"
+                        aria-label="wrap text checkbox"
+                        isChecked={isTextWrapped}
+                        id="wrap-text-checkbox"
+                        onChange={(_event, value) => setIsTextWrapped(value)}
+                      />
+                    </ToolbarItem>
+                    <ToolbarItem spacer={{ default: 'spacerNone' }}>
+                      {downloading && <Spinner size="sm" className="pf-v5-u-my-sm" />}
+                      {podContainers.length <= 1 ? (
+                        <Tooltip position="top" content={<div>Download current step log</div>}>
+                          <Button
+                            onClick={onDownload}
+                            variant="link"
+                            aria-label="Download current step log"
+                            icon={<DownloadIcon />}
+                            isDisabled={!canDownload || !logs}
+                          />
+                        </Tooltip>
+                      ) : (
+                        <Tooltip content="Download">
+                          <DownloadDropdown
+                            onDownload={onDownload}
+                            onDownloadAll={onDownloadAll}
+                            isSingleStepLogsEmpty={!logs}
+                          />
+                        </Tooltip>
+                      )}
+                    </ToolbarItem>
+                    <ToolbarItem spacer={{ default: 'spacerNone' }}>
+                      <Dropdown
+                        popperProps={{ position: 'right' }}
+                        isOpen={isKebabOpen}
+                        onOpenChange={(isOpen: boolean) => setIsKebabOpen(isOpen)}
+                        toggle={(toggleRef) => (
+                          <MenuToggle
+                            ref={toggleRef}
+                            variant="plain"
+                            data-testid="logs-kebab-toggle"
+                            onClick={() => {
+                              setIsKebabOpen(!isKebabOpen);
+                            }}
+                            isExpanded={isKebabOpen}
+                          >
+                            <EllipsisVIcon />
+                          </MenuToggle>
+                        )}
+                        shouldFocusToggleOnSelect
+                      >
+                        <DropdownList>
+                          <DropdownItem
+                            isDisabled={!logs}
+                            to={rawLogsLink}
+                            target="_blank"
+                            rel="noopener noreferrer"
+                            icon={<OutlinedWindowRestoreIcon />}
+                            aria-label="View raw logs"
+                            data-testid="raw-logs"
+                          >
+                            View raw logs
+                          </DropdownItem>
+                          <DropdownItem
+                            onClick={onExpandClick}
+                            key="action"
+                            icon={!isFullScreen ? <ExpandIcon /> : <CompressIcon />}
+                          >
+                            {!isFullScreen ? 'Expand' : 'Collapse'}
+                          </DropdownItem>
+                        </DropdownList>
+                      </Dropdown>
+                    </ToolbarItem>
+                  </ToolbarGroup>
+                </ToolbarContent>
+              </Toolbar>
+            )
+          }
+          onScroll={onScroll}
+        />
       </StackItem>
     </Stack>
   );
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>
   );