Convert Log Viewer to PF Log Viewer

Co-authored-by: Mike Turley <[email protected]>
opendatahub-io · Jan 16, 2024 · 870e0bb · 870e0bb
1 parent 8c39fac
commit 870e0bb
Show file tree

Hide file tree

Showing 7 changed files with 292 additions and 181 deletions.
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -61,6 +61,7 @@
     "@patternfly/react-code-editor": "^5.1.1",
     "@patternfly/react-core": "^5.1.1",
     "@patternfly/react-icons": "^5.1.1",
+    "@patternfly/react-log-viewer": "^5.0.0",
     "@patternfly/react-styles": "^5.1.1",
     "@patternfly/react-table": "^5.1.1",
     "@patternfly/react-topology": "^5.1.0",

diff --git a/frontend/src/concepts/dashboard/DashboardLogViewer.tsx b/frontend/src/concepts/dashboard/DashboardLogViewer.tsx
@@ -0,0 +1,22 @@
+import { LogViewer } from '@patternfly/react-log-viewer';
+import React from 'react';
+
+const DashboardLogViewer: React.FC<{
+  data: string;
+  logViewerRef: React.MutableRefObject<{ scrollToBottom: () => void } | undefined>;
+  toolbar: JSX.Element;
+  footer: JSX.Element | false;
+  onScroll: React.ComponentProps<typeof LogViewer>['onScroll'];
+}> = ({ data, logViewerRef, toolbar, footer, onScroll }) => (
+  <LogViewer
+    hasLineNumbers={false}
+    data={data}
+    innerRef={logViewerRef}
+    height="100%"
+    toolbar={toolbar}
+    footer={footer}
+    onScroll={onScroll}
+  />
+);
+
+export default DashboardLogViewer;
diff --git a/...concepts/pipelines/content/pipelinesDetails/pipelineRun/PipelineRunDrawerRightContent.tsx b/...concepts/pipelines/content/pipelinesDetails/pipelineRun/PipelineRunDrawerRightContent.tsx
@@ -31,9 +31,13 @@ const PipelineRunDrawerRightContent: React.FC<PipelineRunDrawerRightContentProps
 
   return (
     <DrawerPanelContent
+      // This forces a re-render to solve resize of the Log viewer inside Drawer.
+      onResize={() => {
+        window.dispatchEvent(new Event('resize'));
+      }}
       isResizable
       widths={{ default: 'width_33', lg: 'width_50' }}
-      minSize="400px"
+      minSize="500px"
       data-testid="pipeline-run-drawer-right-content"
     >
       <DrawerHead>
@@ -46,7 +50,7 @@ const PipelineRunDrawerRightContent: React.FC<PipelineRunDrawerRightContentProps
           <DrawerCloseButton onClick={onClose} />
         </DrawerActions>
       </DrawerHead>
-      <DrawerPanelBody style={{ display: 'flex', flexDirection: 'column' }}>
+      <DrawerPanelBody style={{ display: 'flex', flexDirection: 'column', paddingRight: '10px' }}>
         <PipelineRunDrawerRightTabs
           taskReferences={taskReferences}
           task={task}

diff --git a/...rc/concepts/pipelines/content/pipelinesDetails/pipelineRun/PipelineRunDrawerRightTabs.tsx b/...rc/concepts/pipelines/content/pipelinesDetails/pipelineRun/PipelineRunDrawerRightTabs.tsx
@@ -31,13 +31,22 @@ const PipelineRunDrawerRightTabs: React.FC<PipelineRunDrawerRightTabsProps> = ({
 }) => {
   const [selection, setSelection] = React.useState(PipelineRunNodeTabs.INPUT_OUTPUT);
 
-  const tabContentProps = (tab: PipelineRunNodeTabs): React.ComponentProps<typeof TabContent> => ({
-    id: tab,
-    eventKey: tab,
-    activeKey: selection ?? '',
-    hidden: tab !== selection,
-    style: { flex: '1 1 auto' },
-  });
+  const tabContents: Record<PipelineRunNodeTabs, React.ReactNode> = {
+    [PipelineRunNodeTabs.INPUT_OUTPUT]: (
+      <SelectedNodeInputOutputTab
+        taskReferences={taskReferences}
+        task={task}
+        parameters={parameters}
+      />
+    ),
+    // [PipelineRunNodeTabs.VISUALIZATIONS]: <>TBD 2</>,
+    [PipelineRunNodeTabs.DETAILS]: <SelectedNodeDetailsTab task={task} />,
+    [PipelineRunNodeTabs.VOLUMES]: <SelectedNodeVolumeMountsTab task={task} />,
+    [PipelineRunNodeTabs.LOGS]: <LogsTab task={task} />,
+    // [PipelineRunNodeTabs.POD]: <>TBD 6</>,
+    // [PipelineRunNodeTabs.EVENTS]: <>TBD 7</>,
+    // [PipelineRunNodeTabs.ML_METADATA]: <>TBD 8</>,
+  };
 
   return (
     <>
@@ -53,27 +62,15 @@ const PipelineRunDrawerRightTabs: React.FC<PipelineRunDrawerRightTabsProps> = ({
         ))}
       </Tabs>
       {selection && (
-        <DrawerPanelBody style={{ display: 'flex', flexDirection: 'column' }}>
-          <TabContent {...tabContentProps(PipelineRunNodeTabs.INPUT_OUTPUT)}>
-            <SelectedNodeInputOutputTab
-              taskReferences={taskReferences}
-              task={task}
-              parameters={parameters}
-            />
+        <DrawerPanelBody style={{ display: 'flex', flexDirection: 'column', padding: '10px' }}>
+          <TabContent
+            id={selection}
+            eventKey={selection}
+            activeKey={selection ?? ''}
+            style={{ flex: '1 1 auto' }}
+          >
+            {tabContents[selection]}
           </TabContent>
-          {/*<TabContent {...tabContentProps(PipelineRunNodeTabs.VISUALIZATIONS)}>TBD 2</TabContent>*/}
-          <TabContent {...tabContentProps(PipelineRunNodeTabs.DETAILS)}>
-            <SelectedNodeDetailsTab task={task} />
-          </TabContent>
-          <TabContent {...tabContentProps(PipelineRunNodeTabs.VOLUMES)}>
-            <SelectedNodeVolumeMountsTab task={task} />
-          </TabContent>
-          <TabContent {...tabContentProps(PipelineRunNodeTabs.LOGS)}>
-            <LogsTab task={task} />
-          </TabContent>
-          {/*<TabContent {...tabContentProps(PipelineRunNodeTabs.POD)}>TBD 6</TabContent>*/}
-          {/*<TabContent {...tabContentProps(PipelineRunNodeTabs.EVENTS)}>TBD 7</TabContent>*/}
-          {/*<TabContent {...tabContentProps(PipelineRunNodeTabs.ML_METADATA)}>TBD 8</TabContent>*/}
         </DrawerPanelBody>
       )}
     </>

diff --git a/.../src/concepts/pipelines/content/pipelinesDetails/pipelineRun/runLogs/DownloadDropdown.tsx b/.../src/concepts/pipelines/content/pipelinesDetails/pipelineRun/runLogs/DownloadDropdown.tsx
@@ -1,53 +1,32 @@
 import React from 'react';
-import {
-  Dropdown,
-  DropdownItem,
-  DropdownToggle,
-  KebabToggle,
-} from '@patternfly/react-core/deprecated';
-import { Truncate } from '@patternfly/react-core';
+import { Dropdown, DropdownItem, DropdownToggle } from '@patternfly/react-core/deprecated';
+import { DownloadIcon } from '@patternfly/react-icons';
 
 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 ? (
+  return (
     <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
+      position="right"
       toggle={
         <DropdownToggle
+          width="60px"
+          className="pf-v5-u-px-sm"
           id="download-steps-logs-toggle"
           onToggle={() => setIsDownloadDropdownOpen(!isDownloadDropdownOpen)}
         >
-          Download
+          <DownloadIcon />
         </DropdownToggle>
       }
       isOpen={isDownloadDropdownOpen}
@@ -57,10 +36,10 @@ const DownloadDropdown: React.FC<DownloadDropdownProps> = ({
           key="current-container-logs"
           onClick={onDownload}
         >
-          <Truncate content="Current step log" />
+          Download current step log
         </DropdownItem>,
         <DropdownItem key="all-container-logs" onClick={onDownloadAll}>
-          <Truncate content="All step logs" />
+          Download all step logs
         </DropdownItem>,
       ]}
     />