Rework tailing of logs (#1048)

Author: das7pad

src/main/frontend/common/RestClient.tsx

@@ -51,7 +51,7 @@ export interface StepLogBufferInfo {
   lastFetched?: number;
   stopTailing?: boolean;
   exceptionText?: string[];
-  pendingExceptionText?: Promise<string[]>;
+  pendingExceptionText?: Promise<void>;
 }
 
 // Returned from API, gets converted to 'StepLogBufferInfo'.

src/main/frontend/common/components/tail-logs-button.tsx

@@ -0,0 +1,88 @@
+import { LocalizedMessageKey, useMessages } from "../i18n";
+import Tooltip from "./tooltip.tsx";
+
+export interface TailLogsButtonProps {
+  complete: boolean;
+  loading: boolean;
+  tailLogs: boolean;
+  startTailingLogs: () => void;
+  stopTailingLogs: () => void;
+}
+
+export default function TailLogsButton({
+  complete,
+  loading,
+  tailLogs,
+  startTailingLogs,
+  stopTailingLogs,
+}: TailLogsButtonProps) {
+  const messages = useMessages();
+  if (loading || complete) return null;
+
+  return (
+    <Tooltip
+      content={
+        tailLogs
+          ? messages.format(LocalizedMessageKey.tailLogsPause)
+          : messages.format(LocalizedMessageKey.tailLogsResume)
+      }
+    >
+      <button
+        className={"jenkins-button jenkins-!-info-color"}
+        onClick={tailLogs ? stopTailingLogs : startTailingLogs}
+      >
+        {tailLogs ? pauseIcon() : playIcon()}
+      </button>
+    </Tooltip>
+  );
+}
+
+// play-circle-outline.svg
+function playIcon() {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      className="ionicon"
+      viewBox="0 0 512 512"
+    >
+      <path
+        d="M448 256c0-106-86-192-192-192S64 150 64 256s86 192 192 192 192-86 192-192z"
+        fill="none"
+        stroke="currentColor"
+        strokeMiterlimit="10"
+        strokeWidth="32"
+      />
+      <path
+        d="M216.32 334.44l114.45-69.14a10.89 10.89 0 000-18.6l-114.45-69.14a10.78 10.78 0 00-16.32 9.31v138.26a10.78 10.78 0 0016.32 9.31z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}
+
+// pause-circle-outline.svg
+function pauseIcon() {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      className="ionicon"
+      viewBox="0 0 512 512"
+    >
+      <path
+        d="M448 256c0-106-86-192-192-192S64 150 64 256s86 192 192 192 192-86 192-192z"
+        fill="none"
+        stroke="currentColor"
+        strokeMiterlimit="10"
+        strokeWidth="32"
+      />
+      <path
+        fill="none"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeMiterlimit="10"
+        strokeWidth="32"
+        d="M208 192v128M304 192v128"
+      />
+    </svg>
+  );
+}

src/main/frontend/common/i18n/messages.ts

@@ -79,6 +79,8 @@ export enum LocalizedMessageKey {
   showNames = "settings.showStageName",
   showDuration = "settings.showStageDuration",
   consoleNewTab = "console.newTab",
+  tailLogsResume = "tailLogs.resume",
+  tailLogsPause = "tailLogs.pause",
 }
 
 const DEFAULT_MESSAGES: ResourceBundle = {
@@ -92,6 +94,8 @@ const DEFAULT_MESSAGES: ResourceBundle = {
   [LocalizedMessageKey.showNames]: "Show stage names",
   [LocalizedMessageKey.showDuration]: "Show stage duration",
   [LocalizedMessageKey.consoleNewTab]: "View step as plain text",
+  [LocalizedMessageKey.tailLogsResume]: "Resume tailing logs",
+  [LocalizedMessageKey.tailLogsPause]: "Pause tailing logs",
 };
 
 export function defaultMessages(locale: string): Messages {

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

@@ -5,6 +5,7 @@ import { linkifyJsOptions } from "../../../common/utils/linkify-js.ts";
 import { makeReactChildren, tokenizeANSIString } from "./Ansi.tsx";
 
 export interface ConsoleLineProps {
+  stopTailingLogs: () => void;
   lineNumber: string;
   content: string;
   stepId: string;
@@ -26,6 +27,7 @@ export const ConsoleLine = memo(function ConsoleLine(props: ConsoleLineProps) {
           id={id}
           href={`${baseURL}#${id}`}
           onClick={() => {
+            props.stopTailingLogs();
             // Avoid an actual page navigation by swapping the current URL for
             // the baseURL (query without hash) before the default "click"
             // behavior (the browsers page navigation logic) runs. The

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

@@ -1,14 +1,15 @@
 /** * @vitest-environment jsdom */
 
 import { render } from "@testing-library/react";
-import { vi } from "vitest";
+import { beforeEach, Mock, vi } from "vitest";
 
 import ConsoleLogCard, { ConsoleLogCardProps } from "./ConsoleLogCard.tsx";
 import { ConsoleLogStreamProps } from "./ConsoleLogStream.tsx";
 import {
   Result,
   StepInfo,
   StepLogBufferInfo,
+  TAIL_CONSOLE_LOG,
 } from "./PipelineConsoleModel.tsx";
 
 vi.mock("./ConsoleLogStream.tsx", () => {
@@ -41,18 +42,21 @@ describe("ConsoleLogCard", () => {
     endByte: 13,
   };
 
-  const DefaultTestProps = {
+  const DefaultTestProps: ConsoleLogCardProps = {
     step: baseStep,
-    stepBuffer: baseBuffer,
+    stepBuffers: new Map().set(baseStep.id, baseBuffer),
     isExpanded: false,
-    onStepToggle: () => {
-      console.log("onStepToggle triggered");
-    },
-    onMoreConsoleClick: () => {
-      console.log("onMoreConsoleClick triggered");
-    },
-    fetchExceptionText: () => {},
+    onStepToggle: vi.fn(),
+    fetchLogText: vi.fn().mockResolvedValue(baseBuffer),
+    fetchExceptionText: vi.fn().mockResolvedValue(baseBuffer),
+    tailLogs: true,
+    scrollToTail: () => {},
+    stopTailingLogs: () => {},
   } as ConsoleLogCardProps;
+  beforeEach(function () {
+    (DefaultTestProps.fetchLogText as Mock).mockReset();
+    (DefaultTestProps.fetchLogText as Mock).mockResolvedValue(baseBuffer);
+  });
 
   it("renders step header only when not expanded", async () => {
     const { getByText } = render(<ConsoleLogCard {...DefaultTestProps} />);
@@ -67,17 +71,16 @@ describe("ConsoleLogCard", () => {
     expect(findByText(/Hello, world!/));
   });
 
-  it("calls onMoreConsoleClick on load was card isExpanded set", async () => {
-    console.log = vi.fn();
+  it("calls fetchLogText on load was card isExpanded set", async () => {
     render(<ConsoleLogCard {...DefaultTestProps} isExpanded />);
-    expect(console.log).toHaveBeenCalledWith("onMoreConsoleClick triggered");
+    expect(DefaultTestProps.fetchLogText as Mock).toHaveBeenCalledWith(
+      DefaultTestProps.step.id,
+      TAIL_CONSOLE_LOG,
+    );
   });
 
-  it("does not call onMoreConsoleClick on load was card isExpanded set", async () => {
-    console.log = vi.fn();
+  it("does not call fetchLogText on load was card isExpanded set", async () => {
     render(<ConsoleLogCard {...DefaultTestProps} />);
-    expect(console.log).not.toHaveBeenCalledWith(
-      "onMoreConsoleClick triggered",
-    );
+    expect(DefaultTestProps.fetchLogText as Mock).not.toHaveBeenCalled();
   });
 });