fix(ui): Use LogsViewer for container logs

ui/src/app/workflows/components/workflow-logs-viewer/full-height-logs-viewer.tsx

@@ -0,0 +1,21 @@
+import * as React from 'react';
+
+import {LogsViewer} from 'argo-ui';
+import {LogsViewerProps} from 'argo-ui/src/components/logs-viewer/logs-viewer';
+
+export const FullHeightLogsViewer = (props: LogsViewerProps) => {
+    const ref = React.useRef(null);
+    const [height, setHeight] = React.useState<number>(null);
+    const {source} = props;
+
+    React.useEffect(() => {
+        const parentElement = ref.current!.parentElement;
+        setHeight(parentElement.getBoundingClientRect().height);
+    }, [ref]);
+
+    return (
+        <div ref={ref} style={{height}}>
+            {height && <LogsViewer source={source} />}
+        </div>
+    );
+};

ui/src/app/workflows/components/workflow-logs-viewer/workflow-logs-viewer.tsx

@@ -2,6 +2,7 @@ import * as React from 'react';
 
 import * as models from '../../../../models';
 import {services} from '../../../shared/services';
+import {FullHeightLogsViewer} from './full-height-logs-viewer';
 
 require('./workflow-logs-viewer.scss');
 
@@ -18,8 +19,6 @@ interface WorkflowLogsViewerState {
 }
 
 export class WorkflowLogsViewer extends React.Component<WorkflowLogsViewerProps, WorkflowLogsViewerState> {
-    private logCoda: HTMLElement;
-
     constructor(props: WorkflowLogsViewerProps) {
         super(props);
         this.state = {lines: []};
@@ -43,12 +42,6 @@ export class WorkflowLogsViewer extends React.Component<WorkflowLogsViewerProps,
         );
     }
 
-    public componentDidUpdate() {
-        if (this.logCoda) {
-            this.logCoda.scrollIntoView({behavior: 'auto'});
-        }
-    }
-
     public render() {
         return (
             <div className='workflow-logs-viewer'>
@@ -76,14 +69,15 @@ export class WorkflowLogsViewer extends React.Component<WorkflowLogsViewerProps,
                     {!this.state.error && this.state.lines.length === 0 && !this.isCurrentNodeRunningOrPending() && <p>Pod did not output any logs.</p>}
                     {this.state.lines.length > 0 && (
                         <div className='log-box'>
-                            <i className='fa fa-chevron-down' />
-                            <br />
-                            {this.state.lines.join('\n\r')}
-                            <br />
-                            <i
-                                className='fa fa-chevron-up'
-                                ref={el => {
-                                    this.logCoda = el;
+                            <FullHeightLogsViewer
+                                source={{
+                                    key: `${this.props.workflow.metadata.name}-${this.props.container}`,
+                                    loadLogs: () => {
+                                        return services.workflows.getContainerLogs(this.props.workflow, this.props.nodeId, this.props.container, this.props.archived).map(log => {
+                                            return log ? log + '\n' : '';
+                                        });
+                                    },
+                                    shouldRepeat: () => this.isCurrentNodeRunningOrPending()
                                 }}
                             />
                         </div>