Use custom rendering for input step (#866)

Co-authored-by: Jan Faracik <[email protected]>

Author: timja

src/main/frontend/common/RestClient.tsx

@@ -9,6 +9,14 @@ export interface RunStatus {
   complete: boolean;
 }
 
+export interface InputStep {
+  message: string;
+  cancel: string;
+  id: string;
+  ok: string;
+  parameters: boolean;
+}
+
 /**
  * StageInfo is the input, in the form of an Array<StageInfo> of the top-level stages of a pipeline
  */
@@ -17,6 +25,7 @@ export interface StepInfo {
   title: string;
   state: Result;
   completePercent: number;
+  inputStep?: InputStep;
   id: string;
   type: string;
   stageId: string;

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

@@ -11,23 +11,12 @@ export interface ConsoleLineProps {
   heightCallback: (height: number) => void;
 }
 
-declare global {
-  interface Window {
-    Behaviour: any;
-  }
-}
-
 // Console output line
 export const ConsoleLine = memo(function ConsoleLine(props: ConsoleLineProps) {
   const ref = useRef<HTMLDivElement>(null);
   useEffect(() => {
     const height = ref.current ? ref.current.getBoundingClientRect().height : 0;
     props.heightCallback(height);
-
-    // apply any behaviour selectors to the new content, e.g. for input step
-    window.Behaviour.applySubtree(
-      document.getElementById(`${props.stepId}-${props.lineNumber}`),
-    );
   }, []);
 
   return (

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

@@ -18,6 +18,7 @@ import {
   StepInfo,
   StepLogBufferInfo,
 } from "./PipelineConsoleModel.tsx";
+import InputStep from "./steps/InputStep.tsx";
 
 const ConsoleLogStream = lazy(() => import("./ConsoleLogStream.tsx"));
 
@@ -41,41 +42,13 @@ export default function ConsoleLogCard(props: ConsoleLogCardProps) {
     props.onStepToggle(props.step.id);
   };
 
-  const showMoreLogs = () => {
-    let startByte = props.stepBuffer.startByte - LOG_FETCH_SIZE;
-    if (startByte < 0) startByte = 0;
-    props.onMoreConsoleClick(props.step.id, startByte);
-  };
-
-  const getTruncatedLogWarning = () => {
-    if (props.stepBuffer.lines && props.stepBuffer.startByte > 0) {
-      return (
-        <button
-          onClick={showMoreLogs}
-          className={
-            "pgv-show-more-logs jenkins-button jenkins-!-warning-color"
-          }
-        >
-          There’s more to see - {prettySizeString(props.stepBuffer.startByte)}{" "}
-          of logs hidden
-        </button>
-      );
-    }
-    return undefined;
-  };
-
-  const prettySizeString = (size: number) => {
-    const kib = 1024;
-    const mib = 1024 * 1024;
-    const gib = 1024 * 1024 * 1024;
-    if (size < kib) return `${size}B`;
-    if (size < mib) return `${(size / kib).toFixed(2)}KiB`;
-    if (size < gib) return `${(size / mib).toFixed(2)}MiB`;
-    return `${(size / gib).toFixed(2)}GiB`;
-  };
-
   const messages = useMessages();
 
+  const inputStep = props.step.inputStep;
+  if (inputStep && !inputStep.parameters) {
+    return <InputStep {...props} />;
+  }
+
   return (
     <div className={"pgv-step-detail-group"} key={`step-card-${props.step.id}`}>
       <div
@@ -162,22 +135,67 @@ export default function ConsoleLogCard(props: ConsoleLogCardProps) {
       </div>
 
       {props.isExpanded && (
-        <div style={{ paddingTop: "0.5rem" }}>
-          {getTruncatedLogWarning()}
-          <Suspense>
-            <ConsoleLogStream
-              logBuffer={props.stepBuffer}
-              onMoreConsoleClick={props.onMoreConsoleClick}
-              step={props.step}
-              maxHeightScale={0.65}
-            />
-          </Suspense>
-        </div>
+        <ConsoleLogBody
+          step={props.step}
+          stepBuffer={props.stepBuffer}
+          onMoreConsoleClick={props.onMoreConsoleClick}
+          isExpanded={false}
+          onStepToggle={props.onStepToggle}
+        />
       )}
     </div>
   );
 }
 
+function ConsoleLogBody(props: ConsoleLogCardProps) {
+  const prettySizeString = (size: number) => {
+    const kib = 1024;
+    const mib = 1024 * 1024;
+    const gib = 1024 * 1024 * 1024;
+    if (size < kib) return `${size}B`;
+    if (size < mib) return `${(size / kib).toFixed(2)}KiB`;
+    if (size < gib) return `${(size / mib).toFixed(2)}MiB`;
+    return `${(size / gib).toFixed(2)}GiB`;
+  };
+
+  const showMoreLogs = () => {
+    let startByte = props.stepBuffer.startByte - LOG_FETCH_SIZE;
+    if (startByte < 0) startByte = 0;
+    props.onMoreConsoleClick(props.step.id, startByte);
+  };
+
+  const getTruncatedLogWarning = () => {
+    if (props.stepBuffer.lines && props.stepBuffer.startByte > 0) {
+      return (
+        <button
+          onClick={showMoreLogs}
+          className={
+            "pgv-show-more-logs jenkins-button jenkins-!-warning-color"
+          }
+        >
+          There’s more to see - {prettySizeString(props.stepBuffer.startByte)}{" "}
+          of logs hidden
+        </button>
+      );
+    }
+    return undefined;
+  };
+
+  return (
+    <div style={{ paddingTop: "0.5rem" }}>
+      {getTruncatedLogWarning()}
+      <Suspense>
+        <ConsoleLogStream
+          logBuffer={props.stepBuffer}
+          onMoreConsoleClick={props.onMoreConsoleClick}
+          step={props.step}
+          maxHeightScale={0.65}
+        />
+      </Suspense>
+    </div>
+  );
+}
+
 export type ConsoleLogCardProps = {
   step: StepInfo;
   stepBuffer: StepLogBufferInfo;

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

@@ -12,16 +12,6 @@ import {
   StepLogBufferInfo,
 } from "./PipelineConsoleModel.tsx";
 
-beforeAll(() => {
-  window.Behaviour = {
-    applySubtree: vi.fn(),
-  };
-});
-
-afterAll(() => {
-  delete window.Behaviour;
-});
-
 const TestComponent = (props: ConsoleLogStreamProps) => {
   return (
     <div id="test-parent">

src/main/frontend/pipeline-console-view/pipeline-console/main/console-log-card.scss

@@ -138,6 +138,38 @@ a.console-line-number {
   }
 }
 
+.pgv-input-step {
+  position: relative;
+  z-index: 0;
+  padding: 0.875rem;
+  margin-bottom: -0.375rem;
+  margin-left: -0.375rem;
+  margin-right: -0.375rem;
+  // TODO - var fallback can removed after baseline is moved >= 2.496
+  border-top: var(
+    --jenkins-border,
+    2px solid color-mix(in srgb, var(--text-color-secondary) 10%, transparent)
+  );
+  background-color: color-mix(in srgb, var(--accent-color) 2.5%, transparent);
+  border-bottom-left-radius: 0.375rem;
+  border-bottom-right-radius: 0.375rem;
+
+  &:first-of-type {
+    margin-top: -0.375rem;
+    border-top: none;
+    border-radius: 0.375rem;
+  }
+
+  .jenkins-button {
+    min-width: 7.5rem;
+  }
+
+  &__controls {
+    padding-left: 2.275rem;
+    margin-top: 0.75rem;
+  }
+}
+
 div.console-output-line {
   position: relative;
   display: flex;

src/main/frontend/pipeline-console-view/pipeline-console/main/steps/InputStep.tsx

@@ -0,0 +1,66 @@
+import StatusIcon from "../../../../common/components/status-icon.tsx";
+import { ConsoleLogCardProps } from "../ConsoleLogCard.tsx";
+
+declare global {
+  interface Window {
+    crumb: Crumb;
+  }
+
+  interface Crumb {
+    wrap: (headers: Record<string, string>) => Record<string, string>;
+  }
+}
+
+export default function InputStep(props: ConsoleLogCardProps) {
+  const inputStep = props.step.inputStep!;
+  function handler(id: string, action: string) {
+    fetch(`../input/${id}/${action}`, {
+      method: "POST",
+      headers: window.crumb.wrap({}),
+    })
+      .then((res) => {
+        if (!res.ok) {
+          console.error(res);
+        }
+        return true;
+      })
+      .catch((err) => {
+        console.error(err);
+      });
+  }
+
+  const ok = () => {
+    return handler(inputStep.id, "proceedEmpty");
+  };
+
+  const abort = () => {
+    return handler(inputStep.id, "abort");
+  };
+
+  return (
+    <div className="pgv-input-step">
+      <div className="pgv-step-detail-header__content">
+        <StatusIcon
+          status={props.step.state}
+          percentage={props.step.completePercent}
+        />
+        <span>{inputStep.message}</span>
+      </div>
+      <div
+        className={
+          "jenkins-buttons-row jenkins-buttons-row--equal-width pgv-input-step__controls"
+        }
+      >
+        <button
+          onClick={ok}
+          className={"jenkins-button jenkins-button--primary"}
+        >
+          {inputStep.ok}
+        </button>
+        <button onClick={abort} className={"jenkins-button"}>
+          {inputStep.cancel}
+        </button>
+      </div>
+    </div>
+  );
+}

src/main/java/io/jenkins/plugins/pipelinegraphview/treescanner/PipelineNodeTreeScanner.java

@@ -6,21 +6,28 @@
 import io.jenkins.plugins.pipelinegraphview.utils.FlowNodeWrapper;
 import io.jenkins.plugins.pipelinegraphview.utils.NodeRunStatus;
 import io.jenkins.plugins.pipelinegraphview.utils.PipelineNodeUtil;
+import java.io.IOException;
 import java.util.ArrayList;
 import java.util.Collections;
 import java.util.LinkedHashMap;
 import java.util.List;
 import java.util.Map;
 import java.util.Set;
+import java.util.concurrent.TimeoutException;
 import java.util.stream.Collectors;
 import org.jenkinsci.plugins.pipeline.modeldefinition.actions.ExecutionModelAction;
 import org.jenkinsci.plugins.workflow.actions.ErrorAction;
+import org.jenkinsci.plugins.workflow.cps.nodes.StepAtomNode;
 import org.jenkinsci.plugins.workflow.flow.FlowExecution;
+import org.jenkinsci.plugins.workflow.graph.AtomNode;
 import org.jenkinsci.plugins.workflow.graph.BlockEndNode;
 import org.jenkinsci.plugins.workflow.graph.BlockStartNode;
 import org.jenkinsci.plugins.workflow.graph.FlowNode;
 import org.jenkinsci.plugins.workflow.graphanalysis.DepthFirstScanner;
 import org.jenkinsci.plugins.workflow.job.WorkflowRun;
+import org.jenkinsci.plugins.workflow.support.steps.input.InputAction;
+import org.jenkinsci.plugins.workflow.support.steps.input.InputStep;
+import org.jenkinsci.plugins.workflow.support.steps.input.InputStepExecution;
 import org.slf4j.Logger;
 import org.slf4j.LoggerFactory;
 
@@ -167,6 +174,7 @@ private static class GraphBuilder {
         // FlowNodeWrapper rootStage = null;
 
         private final Logger logger = LoggerFactory.getLogger(GraphBuilder.class);
+        private final InputAction inputAction;
         private boolean isDebugEnabled = logger.isDebugEnabled();
 
         /*
@@ -181,6 +189,7 @@ public GraphBuilder(
             this.nodeMap = nodeMap;
             this.relationships = relationships;
             this.run = run;
+            this.inputAction = run.getAction(InputAction.class);
             this.execution = execution;
             buildGraph();
         }
@@ -491,7 +500,24 @@ private void assignParent(@NonNull FlowNodeWrapper wrappedNode, @CheckForNull Fl
                 timing = relationship.getTimingInfo(this.run);
                 status = relationship.getStatus(this.run);
             }
-            return new FlowNodeWrapper(node, status, timing, this.run);
+
+            InputStep inputStep = null;
+            if (node instanceof AtomNode atomNode
+                    && PipelineNodeUtil.isPausedForInputStep((StepAtomNode) atomNode, inputAction)) {
+                try {
+                    for (InputStepExecution execution : inputAction.getExecutions()) {
+                        FlowNode theNode = execution.getContext().get(FlowNode.class);
+                        if (theNode != null && theNode.equals(atomNode)) {
+                            inputStep = execution.getInput();
+                            break;
+                        }
+                    }
+                } catch (IOException | InterruptedException | TimeoutException e) {
+                    logger.error("Error getting FlowNode from execution context: {}", e.getMessage(), e);
+                }
+            }
+
+            return new FlowNodeWrapper(node, status, timing, inputStep, this.run);
         }
     }
 }

src/main/java/io/jenkins/plugins/pipelinegraphview/utils/PipelineInputStep.java

@@ -0,0 +1,3 @@
+package io.jenkins.plugins.pipelinegraphview.utils;
+
+public record PipelineInputStep(String message, String cancel, String id, String ok, boolean parameters) {}