Add step logs to stage view - as expandable sections. (#210)

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

Author: 3 people

package-lock.json

@@ -29,7 +29,8 @@
     "@reacticons/ionicons": "6.0.4",
     "html-react-parser": "1.4.14",
     "react": "18.2.0",
-    "react-dom": "18.2.0"
+    "react-dom": "18.2.0",
+    "react-virtuoso": "^4.1.0"
   },
   "devDependencies": {
     "@babel/preset-env": "7.19.4",

package.json

@@ -64,7 +64,7 @@ export function parseEscapeCode(escapeCode: string): Result {
           result.resetFG = true;
           result.setFG = false;
         }
-        
+
         if (num === 48 || num === 0) {
           result.resetBG = true;
           result.setBG = false;
@@ -123,7 +123,10 @@ export function tokenizeANSIString(input?: string): string[] | Result[] {
     if (commentEndIndex !== -1) {
       commentEndIndex += 3;
     }
-    if (escapeCodeIndex > commentStartIndex && escapeCodeIndex < commentEndIndex) {
+    if (
+      escapeCodeIndex > commentStartIndex &&
+      escapeCodeIndex < commentEndIndex
+    ) {
       // Skip past the comment
       loopCounter = commentEndIndex;
       continue;
@@ -152,7 +155,9 @@ export function tokenizeANSIString(input?: string): string[] | Result[] {
     //  Create token for the escape code
 
     // TODO fix type checking
-    const parsedEscapeCode: any = parseEscapeCode(input.substring(loopCounter, escapeCodeIndex + 1));
+    const parsedEscapeCode: any = parseEscapeCode(
+      input.substring(loopCounter, escapeCodeIndex + 1)
+    );
     result.push(parsedEscapeCode);
 
     //--------------------------------------------------------------------------

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

@@ -0,0 +1,36 @@
+import React from "react";
+
+import { makeReactChildren, tokenizeANSIString } from "./Ansi";
+
+export interface ConsoleLineProps {
+  lineNumber: string;
+  content: string;
+  stepId: string;
+  startByte: number;
+}
+
+// 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}`} //`}
+      >
+        {props.lineNumber}
+      </a>
+      {makeReactChildren(
+        tokenizeANSIString(props.content),
+        `${props.stepId}-${props.lineNumber}`
+      )}
+    </div>
+  </pre>
+);

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

@@ -0,0 +1,80 @@
+/** * @jest-environment jsdom */
+
+import "@testing-library/jest-dom/extend-expect";
+import { waitFor } from "@testing-library/react";
+import React, { ReactElement } from "react";
+import { ConsoleLogCard } from "./ConsoleLogCard";
+import type { ConsoleLogCardProps } from "./ConsoleLogCard";
+import { Result, StepInfo } from "./PipelineConsoleModel";
+import { render } from "@testing-library/react";
+import { VirtuosoMockContext } from "react-virtuoso";
+
+function sleep(ms: number) {
+  return new Promise((resolve) => setTimeout(resolve, ms));
+}
+describe("ConsoleLogCard", () => {
+  const baseStep: StepInfo = {
+    name: "This is a step",
+    title: "This is a title",
+    state: Result.success,
+    completePercent: 50,
+    id: 2,
+    type: "STAGE",
+    pauseDurationMillis: "",
+    startTimeMillis: "",
+    totalDurationMillis: "",
+    stageId: "1",
+    consoleLines: ["Hello, world!"],
+    consoleStartByte: 0,
+    consoleEndByte: 13,
+  };
+
+  const TestComponent = (props: ConsoleLogCardProps) => {
+    return (
+      <div id="test-parent">
+        <ConsoleLogCard {...props} />
+      </div>
+    );
+  };
+
+  const DefaultTestProps = {
+    step: baseStep,
+    isExpanded: false,
+    handleStepToggle: () => {
+      console.log("handleStepToggle triggered");
+    },
+    handleMoreConsoleClick: () => {
+      console.log("handleMoreConsoleClick triggered");
+    },
+    scrollParentId: "test-parent",
+  } as ConsoleLogCardProps;
+
+  function renderInContext(element: ReactElement) {
+    return render(element, {
+      wrapper: ({ children }) => (
+        <VirtuosoMockContext.Provider
+          value={{ viewportHeight: 300, itemHeight: 100 }}
+        >
+          {children}
+        </VirtuosoMockContext.Provider>
+      ),
+    });
+  }
+
+  it("renders step header only when not expanded", async () => {
+    const { getByText } = renderInContext(
+      TestComponent({ ...DefaultTestProps })
+    );
+    expect(getByText(/This is a step/));
+  });
+
+  it("renders step console when expanded", async () => {
+    const { getByText } = renderInContext(
+      TestComponent({ ...DefaultTestProps, isExpanded: true })
+    );
+    expect(getByText(/This is a step/));
+    waitFor(() => {
+      expect(getByText(/Hello, world!/));
+    });
+  });
+});