Convert Log Viewer to PF Log Viewer

opendatahub-io · Nov 27, 2023 · b5712c9 · b5712c9
1 parent 87936a2
commit b5712c9
Show file tree

Hide file tree

Showing 6 changed files with 201 additions and 126 deletions.
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -50,6 +50,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,23 @@
+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 }) => (
+  <div id="complex-toolbar-demo" style={{ height: '100%' }}>
+    <LogViewer
+      data={data}
+      innerRef={logViewerRef}
+      height={'100%'}
+      toolbar={toolbar}
+      footer={footer}
+      onScroll={onScroll}
+    />
+  </div>
+);
+
+export default DashboardLogViewer;
diff --git a/...concepts/pipelines/content/pipelinesDetails/pipelineRun/PipelineRunDrawerRightContent.tsx b/...concepts/pipelines/content/pipelinesDetails/pipelineRun/PipelineRunDrawerRightContent.tsx
@@ -25,12 +25,17 @@ const PipelineRunDrawerRightContent: React.FC<PipelineRunDrawerRightContentProps
   parameters,
   onClose,
 }) => {
+  const [, setWidth] = React.useState<number>(0);
+
   if (!task) {
     return null;
   }
 
   return (
     <DrawerPanelContent
+      onResize={(_event: MouseEvent | TouchEvent | React.KeyboardEvent, newWidth: number) => {
+        setWidth(newWidth);
+      }}
       isResizable
       widths={{ default: 'width_33', lg: 'width_50' }}
       minSize="400px"

diff --git a/...rc/concepts/pipelines/content/pipelinesDetails/pipelineRun/PipelineRunDrawerRightTabs.tsx b/...rc/concepts/pipelines/content/pipelinesDetails/pipelineRun/PipelineRunDrawerRightTabs.tsx
@@ -29,7 +29,7 @@ const PipelineRunDrawerRightTabs: React.FC<PipelineRunDrawerRightTabsProps> = ({
   taskReferences,
   parameters,
 }) => {
-  const [selection, setSelection] = React.useState(PipelineRunNodeTabs.INPUT_OUTPUT);
+  const [selection, setSelection] = React.useState(PipelineRunNodeTabs.LOGS);
 
   const tabContentProps = (tab: PipelineRunNodeTabs): React.ComponentProps<typeof TabContent> => ({
     id: tab,