Improve the height calculation of the ConsoleLogStream component (#371)

Co-authored-by: Tim Jacomb <[email protected]>

Author: stuartrowe

src/main/frontend/pipeline-console-view/pipeline-console/main/ConsoleLine.tsx

@@ -1,38 +1,51 @@
 import React from "react";
-
+import { useEffect, useRef } from "react";
 import { makeReactChildren, tokenizeANSIString } from "./Ansi";
 
 export interface ConsoleLineProps {
   lineNumber: string;
   content: string;
   stepId: string;
   startByte: number;
+  heightCallback: (height: number) => void;
 }
 
 // Console output line
-export const ConsoleLine = (props: ConsoleLineProps) => (
-  <pre
-    className="console-output-line"
-    key={`console-line-pre${props.lineNumber}`}
-  >
-    <div
-      className="console-output-line-anchor"
-      id={`log-${props.lineNumber}`}
-      key={`${props.lineNumber}-anchor`}
-    />
-    <div className="console-output-line" key={`${props.lineNumber}-body`}>
-      <a
-        className="console-line-number"
-        href={`?start-byte=${props.startByte}&selected-node=${props.stepId}#log-${props.lineNumber}`} //`}
+export const ConsoleLine = (props: ConsoleLineProps) => {
+  const ref = useRef<HTMLDivElement>(null);
+  useEffect(() => {
+    const height = ref.current ? ref.current.getBoundingClientRect().height : 0;
+    props.heightCallback(height);
+  }, []);
+
+  return (
+    <pre
+      className="console-output-line"
+      key={`console-line-pre${props.lineNumber}`}
+    >
+      <div
+        className="console-output-line-anchor"
+        id={`log-${props.lineNumber}`}
+        key={`${props.lineNumber}-anchor`}
+      />
+      <div
+        className="console-output-line"
+        key={`${props.lineNumber}-body`}
+        ref={ref}
       >
-        {props.lineNumber}
-      </a>
-      <div className="console-text">
-        {makeReactChildren(
-          tokenizeANSIString(props.content),
-          `${props.stepId}-${props.lineNumber}`
-        )}
+        <a
+          className="console-line-number"
+          href={`?start-byte=${props.startByte}&selected-node=${props.stepId}#log-${props.lineNumber}`} //`}
+        >
+          {props.lineNumber}
+        </a>
+        <div className="console-text">
+          {makeReactChildren(
+            tokenizeANSIString(props.content),
+            `${props.stepId}-${props.lineNumber}`
+          )}
+        </div>
       </div>
-    </div>
-  </pre>
-);
+    </pre>
+  );
+};

src/main/frontend/pipeline-console-view/pipeline-console/main/ConsoleLogCard.tsx

@@ -276,6 +276,7 @@ export class ConsoleLogCard extends React.Component<
           logBuffer={this.props.stepBuffer}
           handleMoreConsoleClick={this.props.handleMoreConsoleClick}
           step={this.props.step}
+          maxHeightScale={0.85}
           open={this.state.open}
           setClose={handleClose}
         />
@@ -295,6 +296,7 @@ export class ConsoleLogCard extends React.Component<
                 logBuffer={this.props.stepBuffer}
                 handleMoreConsoleClick={this.props.handleMoreConsoleClick}
                 step={this.props.step}
+                maxHeightScale={0.65}
               />
             </Suspense>
           </CardContent>

src/main/frontend/pipeline-console-view/pipeline-console/main/ConsoleLogModal.tsx

@@ -7,7 +7,7 @@ export interface ConsoleLogModelProps {
   logBuffer: StepLogBufferInfo;
   handleMoreConsoleClick: (nodeId: string, startByte: number) => void;
   step: StepInfo;
-
+  maxHeightScale: number;
   setClose: () => void;
   open: boolean;
 }

src/main/frontend/pipeline-console-view/pipeline-console/main/ConsoleLogStream.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { Virtuoso, VirtuosoHandle, LogLevel } from "react-virtuoso";
-import { useState, useEffect, useRef } from "react";
+import { useCallback, useState, useEffect, useRef } from "react";
 import { Result, StepInfo, StepLogBufferInfo } from "./PipelineConsoleModel";
 
 import Button from "@mui/material/Button";
@@ -9,6 +9,7 @@ export interface ConsoleLogStreamProps {
   logBuffer: StepLogBufferInfo;
   handleMoreConsoleClick: (nodeId: string, startByte: number) => void;
   step: StepInfo;
+  maxHeightScale: number;
 }
 
 import { ConsoleLine } from "./ConsoleLine";
@@ -20,6 +21,7 @@ export default function ConsoleLogStream(props: ConsoleLogStreamProps) {
   const [moveToBottom, setMoveToBottom] = useState(true);
   const showButtonInterval = useRef<NodeJS.Timeout | null>(null);
   const [showButton, setShowButton] = useState(false);
+  const [maxConsoleLineHeight, setMaxConsoleLineHeight] = useState(1);
 
   useEffect(() => {
     return () => {
@@ -50,6 +52,14 @@ export default function ConsoleLogStream(props: ConsoleLogStreamProps) {
     }
   }, [moveToBottom]);
 
+  const consoleLineHeightCallback = useCallback((height: number) => {
+    if (height > maxConsoleLineHeight) {
+      setMaxConsoleLineHeight(height);
+    } else if (maxConsoleLineHeight == 1) {
+      setMaxConsoleLineHeight(height);
+    }
+  }, []);
+
   const scrollListBottom = () => {
     if (virtuosoRef.current) {
       if (props.logBuffer.lines) {
@@ -70,22 +80,17 @@ export default function ConsoleLogStream(props: ConsoleLogStreamProps) {
     return props.step.state === Result.running || props.logBuffer.startByte < 0;
   };
 
-  const minHeight = () => {
-    const numberOfLines = props.logBuffer.lines.length;
-
-    if (numberOfLines > 200) {
-      return 60;
-    }
-
-    return numberOfLines * 3;
+  const height = () => {
+    const spinnerLines = shouldRequestMoreLogs() ? 2 : 0;
+    return (props.logBuffer.lines.length + spinnerLines) * maxConsoleLineHeight;
   };
 
   return (
     <>
       <Virtuoso
         style={{
-          minHeight: `${minHeight()}vh`,
-          maxHeight: window.innerHeight / 2,
+          height: `${height()}px`,
+          maxHeight: window.innerHeight * props.maxHeightScale,
         }}
         ref={virtuosoRef}
         data={props.logBuffer.lines}
@@ -109,6 +114,7 @@ export default function ConsoleLogStream(props: ConsoleLogStreamProps) {
               content={content}
               stepId={props.step.id}
               startByte={props.logBuffer.startByte}
+              heightCallback={consoleLineHeightCallback}
             />
           );
         }}