Prevent download of empty files and view raw logs in Pipeline Logs

opendatahub-io · Dec 20, 2023 · a4a797e · a4a797e
1 parent 5b8f4c5
commit a4a797e
Show file tree

Hide file tree

Showing 5 changed files with 132 additions and 67 deletions.
diff --git a/frontend/src/__tests__/integration/pages/pipelines/PipelineRunJobDetails.spec.ts b/frontend/src/__tests__/integration/pages/pipelines/PipelineRunJobDetails.spec.ts
@@ -28,4 +28,10 @@ test('Does not show run content', async ({ page }) => {
   // expect nodes dont open drawer on click
   await page.getByText('flip-coin').click();
   await expect(page.getByTestId('pipeline-run-drawer-right-content')).toHaveCount(1);
+
+  //expect drawer to open on clicking node
+  await expect(page.getByText('Input / Output')).toHaveCount(1);
+  await expect(page.getByText('Details')).toHaveCount(2);
+  await expect(page.getByText('Volumes')).toHaveCount(1);
+  await expect(page.getByText('Logs')).toHaveCount(1);
 });
diff --git a/.../src/concepts/pipelines/content/pipelinesDetails/pipelineRun/runLogs/DownloadDropdown.tsx b/.../src/concepts/pipelines/content/pipelinesDetails/pipelineRun/runLogs/DownloadDropdown.tsx
@@ -0,0 +1,69 @@
+import React from 'react';
+import {
+  Dropdown,
+  DropdownItem,
+  DropdownToggle,
+  KebabToggle,
+} from '@patternfly/react-core/deprecated';
+import { Truncate } from '@patternfly/react-core';
+
+type DownloadDropdownProps = {
+  onDownload: () => void;
+  onDownloadAll: () => void;
+  isSmallScreen: boolean;
+  isSingleStepLogsEmpty: boolean;
+};
+
+const DownloadDropdown: React.FC<DownloadDropdownProps> = ({
+  onDownload,
+  onDownloadAll,
+  isSmallScreen,
+  isSingleStepLogsEmpty,
+}) => {
+  const [isDownloadDropdownOpen, setIsDownloadDropdownOpen] = React.useState(false);
+
+  return isSmallScreen ? (
+    <Dropdown
+      toggle={<KebabToggle onToggle={() => setIsDownloadDropdownOpen(!isDownloadDropdownOpen)} />}
+      isOpen={isDownloadDropdownOpen}
+      isPlain
+      dropdownItems={[
+        <DropdownItem
+          isDisabled={isSingleStepLogsEmpty}
+          key="current-container-logs"
+          onClick={onDownload}
+        >
+          <Truncate content="Download current step log" />
+        </DropdownItem>,
+        <DropdownItem key="all-container-logs" onClick={onDownloadAll}>
+          <Truncate content="Download all step logs" />
+        </DropdownItem>,
+      ]}
+    />
+  ) : (
+    <Dropdown
+      toggle={
+        <DropdownToggle
+          id="download-steps-logs-toggle"
+          onToggle={() => setIsDownloadDropdownOpen(!isDownloadDropdownOpen)}
+        >
+          Download
+        </DropdownToggle>
+      }
+      isOpen={isDownloadDropdownOpen}
+      dropdownItems={[
+        <DropdownItem
+          isDisabled={isSingleStepLogsEmpty}
+          key="current-container-logs"
+          onClick={onDownload}
+        >
+          <Truncate content="Current step log" />
+        </DropdownItem>,
+        <DropdownItem key="all-container-logs" onClick={onDownloadAll}>
+          <Truncate content="All step logs" />
+        </DropdownItem>,
+      ]}
+    />
+  );
+};
+export default DownloadDropdown;
diff --git a/frontend/src/concepts/pipelines/content/pipelinesDetails/pipelineRun/runLogs/LogsTab.tsx b/frontend/src/concepts/pipelines/content/pipelinesDetails/pipelineRun/runLogs/LogsTab.tsx
@@ -11,18 +11,12 @@ import {
   Split,
   SplitItem,
   Bullseye,
-  Truncate,
 } from '@patternfly/react-core';
-import {
-  Dropdown,
-  DropdownItem,
-  DropdownToggle,
-  KebabToggle,
-} from '@patternfly/react-core/deprecated';
 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 { OutlinedWindowRestoreIcon } from '@patternfly/react-icons';
 import { PipelineRunTaskDetails } from '~/concepts/pipelines/content/types';
 import SimpleDropdownSelect from '~/components/SimpleDropdownSelect';
 import useFetchLogs from '~/concepts/k8s/pods/useFetchLogs';
@@ -34,6 +28,7 @@ import DashboardCodeEditor from '~/concepts/dashboard/codeEditor/DashboardCodeEd
 import useCodeEditorAsLogs from '~/concepts/dashboard/codeEditor/useCodeEditorAsLogs';
 import { downloadCurrentStepLog, downloadAllStepLogs } from '~/concepts/k8s/pods/utils';
 import { usePipelinesAPI } from '~/concepts/pipelines/context';
+import DownloadDropdown from '~/concepts/pipelines/content/pipelinesDetails/pipelineRun/runLogs/DownloadDropdown';
 
 // TODO: If this gets large enough we should look to make this its own component file
 const LogsTab: React.FC<{ task: PipelineRunTaskDetails }> = ({ task }) => {
@@ -68,8 +63,7 @@ const LogsTabForPodName: React.FC<{ podName: string }> = ({ podName }) => {
   const [downloading, setDownloading] = React.useState(false);
   const [downloadError, setDownloadError] = React.useState<Error | undefined>();
   const { scrollToBottom, onMount, editorOptions } = useCodeEditorAsLogs();
-  const [isDownloadDropdownOpen, setIsDownloadDropdownOpen] = React.useState(false);
-  const { isSmallScreen } = useWindowResize();
+  const isSmallScreen = useWindowResize();
 
   React.useEffect(() => {
     if (!isPaused && logs) {
@@ -111,7 +105,7 @@ const LogsTabForPodName: React.FC<{ podName: string }> = ({ podName }) => {
   } else if (logs) {
     data = logs;
   } else {
-    data = 'No content';
+    data = 'No logs available';
   }
 
   return (
@@ -121,6 +115,7 @@ const LogsTabForPodName: React.FC<{ podName: string }> = ({ podName }) => {
           <LogsTabStatus
             loaded={loaded}
             error={error}
+            isLogsAvailable={podContainers.length !== 1 && logs !== ''}
             refresh={refreshLogs}
             onDownload={onDownloadAll}
           />
@@ -130,18 +125,18 @@ const LogsTabForPodName: React.FC<{ podName: string }> = ({ podName }) => {
         <Split hasGutter isWrappable>
           <SplitItem>
             <Split hasGutter>
-              {isSmallScreen() ? null : (
+              {!isSmallScreen ? (
                 <SplitItem>
                   <Bullseye>
                     <TextContent>
                       <TextListItem component={TextListItemVariants.dt}>Step</TextListItem>
                     </TextContent>
                   </Bullseye>
                 </SplitItem>
-              )}
+              ) : null}
               <SplitItem>
                 <SimpleDropdownSelect
-                  isDisabled={podContainers.length === 0}
+                  isDisabled={podContainers.length <= 1}
                   options={podContainers.map((container) => ({
                     key: container.name,
                     label: container.name,
@@ -163,73 +158,62 @@ const LogsTabForPodName: React.FC<{ podName: string }> = ({ podName }) => {
                 onClick={() => setIsPaused(!isPaused)}
                 isDisabled={!!error}
               >
-                {error ? (
-                  'Error loading logs'
-                ) : !logsLoaded || podStatus?.podInitializing ? (
-                  <>
-                    <Spinner size="sm" /> {isSmallScreen() ? 'Loading' : 'Loading log'}
-                  </>
-                ) : isPaused ? (
-                  <>
-                    <PlayIcon /> {isSmallScreen() ? 'Resume' : 'Resume refreshing'}
-                  </>
-                ) : (
-                  <>
-                    <PauseIcon /> {isSmallScreen() ? 'Pause' : 'Pause refreshing'}
-                  </>
-                )}
+                {!error &&
+                  (!logsLoaded ? (
+                    <>
+                      <Spinner size="sm" /> {isSmallScreen ? 'Loading' : 'Loading log'}
+                    </>
+                  ) : isPaused ? (
+                    <>
+                      <PlayIcon /> {isSmallScreen ? 'Resume' : 'Resume refreshing'}
+                    </>
+                  ) : (
+                    <>
+                      <PauseIcon /> {isSmallScreen ? 'Pause' : 'Pause refreshing'}
+                    </>
+                  ))}
               </Button>
             )}
           </SplitItem>
           <SplitItem isFilled style={{ textAlign: 'right' }}>
+            <Tooltip position="top" content="View raw logs">
+              <Button
+                onClick={() => {
+                  const newTab = window.open();
+                  newTab?.document.write(`<pre>${logs}</pre>`);
+                }}
+                variant="link"
+                aria-label="View raw logs"
+                icon={<OutlinedWindowRestoreIcon />}
+                isDisabled={!logs}
+              >
+                {!isSmallScreen ? 'Raw' : null}
+              </Button>
+            </Tooltip>
             {downloading ? (
               <>
                 <Spinner size="sm" />{' '}
               </>
             ) : null}
-            {podContainers.length !== 0 ? (
-              <Dropdown
-                toggle={
-                  isSmallScreen() ? (
-                    <KebabToggle
-                      onToggle={() => setIsDownloadDropdownOpen(!isDownloadDropdownOpen)}
-                    />
-                  ) : (
-                    <DropdownToggle
-                      id="download-steps-logs-toggle"
-                      onToggle={() => setIsDownloadDropdownOpen(!isDownloadDropdownOpen)}
-                    >
-                      Download
-                    </DropdownToggle>
-                  )
-                }
-                isOpen={isDownloadDropdownOpen}
-                isPlain={isSmallScreen()}
-                dropdownItems={[
-                  <DropdownItem key="current-container-logs" onClick={onDownload}>
-                    <Truncate
-                      content={isSmallScreen() ? 'Download current step log' : 'Current step log'}
-                    />
-                  </DropdownItem>,
-                  <DropdownItem key="all-container-logs" onClick={onDownloadAll}>
-                    <Truncate
-                      content={isSmallScreen() ? 'Download all step logs' : 'All step logs'}
-                    />
-                  </DropdownItem>,
-                ]}
-              />
-            ) : (
+            {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}
+                  isDisabled={!canDownload || !logs}
                 >
-                  Download
+                  {!isSmallScreen ? 'Download' : null}
                 </Button>
               </Tooltip>
+            ) : (
+              <DownloadDropdown
+                onDownload={onDownload}
+                onDownloadAll={onDownloadAll}
+                isSmallScreen={isSmallScreen}
+                isSingleStepLogsEmpty={!logs}
+              />
             )}
           </SplitItem>
         </Split>

diff --git a/...end/src/concepts/pipelines/content/pipelinesDetails/pipelineRun/runLogs/LogsTabStatus.tsx b/...end/src/concepts/pipelines/content/pipelinesDetails/pipelineRun/runLogs/LogsTabStatus.tsx
@@ -7,12 +7,19 @@ import {
 
 type LogsTabStatusProps = {
   error?: Error;
+  isLogsAvailable?: boolean;
   loaded: boolean;
   refresh: () => void;
   onDownload: () => void;
 };
 
-const LogsTabStatus: React.FC<LogsTabStatusProps> = ({ error, loaded, refresh, onDownload }) => {
+const LogsTabStatus: React.FC<LogsTabStatusProps> = ({
+  error,
+  isLogsAvailable,
+  loaded,
+  refresh,
+  onDownload,
+}) => {
   if (error) {
     return (
       <Alert
@@ -38,10 +45,9 @@ const LogsTabStatus: React.FC<LogsTabStatusProps> = ({ error, loaded, refresh, o
         latest {LOG_TAIL_LINES} lines. Exceptionally long lines are abridged. To view the full log
         for this task, you can{' '}
         <Button
-          isDisabled={!onDownload}
+          isDisabled={!onDownload || !isLogsAvailable}
           variant="link"
           isInline
-          component="span"
           onClick={onDownload}
         >
           download all step logs

diff --git a/...nd/src/concepts/pipelines/content/pipelinesDetails/pipelineRun/runLogs/useWindowResize.ts b/...nd/src/concepts/pipelines/content/pipelinesDetails/pipelineRun/runLogs/useWindowResize.ts
@@ -16,6 +16,6 @@ export function useWindowResize() {
     return () => window.removeEventListener('resize', handleResize);
   }, [handleResize]);
 
-  const isSmallScreen = () => width < 576;
-  return { isSmallScreen };
+  const isSmallScreen = width < 576;
+  return isSmallScreen;
 }