Add hiddenFromView step to reduce console noise (#1118)

Co-authored-by: Tim Jacomb <21194782+timja@users.noreply.github.com>

Author: atorrescogollo

README.md

@@ -18,6 +18,7 @@ This plugin adds a visual representation of Jenkins pipelines, showing each stag
 - View logs in real time without leaving the interface
 - Toggle between graph and stage views; move and resize panes to suit your workflow
 - Quickly access details of each step and its results
+- Hide specific steps from view using the `hideFromView` Pipeline DSL step
 - Designed for better readability and faster troubleshooting
 
 ## Getting started
@@ -26,6 +27,8 @@ This plugin adds a visual representation of Jenkins pipelines, showing each stag
 2. Go to some pipeline build page (not the job page)
 3. Click _Pipeline Overview_
 
+Hidden steps are not displayed by default in the Pipeline Overview, but can be toggled visible using the filter controls.
+
 ## Screenshots
 
 Basic pipeline:
@@ -42,6 +45,31 @@ See a live demonstration from a Jenkins Contributor Summit:
 
 [![Demo of Pipeline Graph View plugin](https://img.youtube.com/vi/MBI3MBY2eJ8/0.jpg)](https://www.youtube.com/watch?v=MBI3MBY2eJ8&t=3295 "Pipeline Graph View plugin")
 
+## Pipeline DSL Extensions
+
+### Hiding Steps from View
+
+You can mark specific pipeline steps as hidden from the view by wrapping them with the `hideFromView` step:
+
+```groovy
+pipeline {
+    agent any
+    stages {
+        stage('Build') {
+            steps {
+                echo "This step is visible"
+
+                hideFromView {
+                    echo "This step is hidden by default"
+                }
+
+                echo "This step is also visible"
+            }
+        }
+    }
+}
+```
+
 ## REST API
 
 The REST API documentation can be found [here](https://editor-next.swagger.io/?url=https://raw.githubusercontent.com/jenkinsci/pipeline-graph-view-plugin/refs/heads/main/openapi.yaml).

src/main/frontend/common/RestClient.tsx

@@ -38,6 +38,7 @@ export interface StepInfo {
   pauseDurationMillis: number;
   startTimeMillis: number;
   totalDurationMillis: number;
+  flags?: Record<string, unknown>;
 }
 
 // Internal representation of console log.

src/main/frontend/common/components/filter.tsx

@@ -12,8 +12,14 @@ import Tooltip from "./tooltip.tsx";
 
 export default function Filter({ disabled }: FilterProps) {
   const [visible, setVisible] = useState(false);
-  const { visibleStatuses, toggleStatus, resetStatuses, allVisible } =
-    useFilter();
+  const {
+    visibleStatuses,
+    toggleStatus,
+    resetStatuses,
+    allVisible,
+    showHiddenSteps,
+    setShowHiddenSteps,
+  } = useFilter();
 
   const statuses = [
     {
@@ -104,6 +110,57 @@ export default function Filter({ disabled }: FilterProps) {
                 {item.text}
               </button>
             ))}
+
+            <div className="jenkins-dropdown__separator" />
+
+            <button
+              className={classNames(
+                "jenkins-dropdown__item",
+                "pgv-filter-button",
+                {
+                  "pgv-filter-button--unchecked": !showHiddenSteps,
+                },
+              )}
+              onClick={() => setShowHiddenSteps(!showHiddenSteps)}
+            >
+              <div className="jenkins-dropdown__item__icon">
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  viewBox="0 0 512 512"
+                  style={{ width: "1.375rem", height: "1.375rem" }}
+                >
+                  <path
+                    fill="none"
+                    stroke="currentColor"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth="32"
+                    d="M255.66 112c-77.94 0-157.89 45.11-220.83 135.33a16 16 0 00-.27 17.77C82.92 340.8 161.8 400 255.66 400c92.84 0 173.34-59.38 221.79-135.25a16.14 16.14 0 000-17.47C428.89 172.28 347.8 112 255.66 112z"
+                  />
+                  <circle
+                    cx="256"
+                    cy="256"
+                    r="80"
+                    fill="none"
+                    stroke="currentColor"
+                    strokeMiterlimit="10"
+                    strokeWidth="32"
+                  />
+                  {!showHiddenSteps && (
+                    <line
+                      x1="64"
+                      y1="64"
+                      x2="448"
+                      y2="448"
+                      stroke="currentColor"
+                      strokeLinecap="round"
+                      strokeWidth="32"
+                    />
+                  )}
+                </svg>
+              </div>
+              Show hidden steps
+            </button>
           </div>
         }
       >

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

@@ -61,7 +61,7 @@ export default function ConsoleLogCard({
   }
 
   return (
-    <div className={"pgv-step-detail-group"} key={`step-card-${step.id}`}>
+    <div className="pgv-step-detail-group" key={`step-card-${step.id}`}>
       <div
         className={classNames("pgv-step-detail-header", "jenkins-button", {
           "jenkins-button--tertiary": !isExpanded,

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

@@ -5,6 +5,7 @@ import { TextEncoder } from "util";
 import { vi } from "vitest";
 
 import { Result, StageInfo, StepInfo } from "./PipelineConsoleModel.tsx";
+import { FilterProvider } from "./providers/filter-provider.tsx";
 import StageView from "./StageView.tsx";
 
 (globalThis as any).TextEncoder = TextEncoder;
@@ -44,18 +45,20 @@ describe("StageView", () => {
   it("renders StageDetails and StageSteps with provided props", async () => {
     await act(async () => {
       render(
-        <StageView
-          tailLogs={false}
-          scrollToTail={() => {}}
-          stopTailingLogs={() => {}}
-          stage={mockStage}
-          steps={mockSteps}
-          stepBuffers={new Map()}
-          expandedSteps={["step-1"]}
-          onStepToggle={vi.fn()}
-          fetchLogText={async () => mockBuffer}
-          fetchExceptionText={async () => mockBuffer}
-        />,
+        <FilterProvider>
+          <StageView
+            tailLogs={false}
+            scrollToTail={() => {}}
+            stopTailingLogs={() => {}}
+            stage={mockStage}
+            steps={mockSteps}
+            stepBuffers={new Map()}
+            expandedSteps={["step-1"]}
+            onStepToggle={vi.fn()}
+            fetchLogText={async () => mockBuffer}
+            fetchExceptionText={async () => mockBuffer}
+          />
+        </FilterProvider>,
       );
     });
 

src/main/frontend/pipeline-console-view/pipeline-console/main/providers/filter-provider.tsx

@@ -9,6 +9,8 @@ interface FilterContextType {
   allVisible: boolean;
   search: string;
   setSearch: (value: string) => void;
+  showHiddenSteps: boolean;
+  setShowHiddenSteps: (show: boolean) => void;
 }
 
 const FilterContext = createContext<FilterContextType | undefined>(undefined);
@@ -26,6 +28,7 @@ const defaultStatuses: Result[] = [
 export const FilterProvider = ({ children }: { children: ReactNode }) => {
   const [visibleStatuses, setVisibleStatuses] = useState<Result[]>([]);
   const [search, setSearch] = useState("");
+  const [showHiddenSteps, setShowHiddenSteps] = useState(false);
 
   const toggleStatus = (key: Result) => {
     if (visibleStatuses.includes(key as Result)) {
@@ -51,6 +54,8 @@ export const FilterProvider = ({ children }: { children: ReactNode }) => {
             .length === defaultStatuses.length,
         search,
         setSearch,
+        showHiddenSteps,
+        setShowHiddenSteps,
       }}
     >
       {children}

src/main/frontend/pipeline-console-view/pipeline-console/main/stage-details.spec.tsx

@@ -7,6 +7,7 @@ import {
   Result,
   StageInfo,
 } from "../../../pipeline-graph-view/pipeline-graph/main/PipelineGraphModel.tsx";
+import { FilterProvider } from "./providers/filter-provider.tsx";
 import StageDetails from "./stage-details.tsx";
 
 (globalThis as any).TextEncoder = TextEncoder;
@@ -19,7 +20,11 @@ describe("StageDetails", () => {
   });
 
   it("renders stage name and status color class", () => {
-    render(<StageDetails stage={mockStage} />);
+    render(
+      <FilterProvider>
+        <StageDetails stage={mockStage} />
+      </FilterProvider>,
+    );
 
     const heading = screen.getByRole("heading", { level: 2 });
     expect(heading).toHaveTextContent("Build");
@@ -30,7 +35,11 @@ describe("StageDetails", () => {
   });
 
   it("shows running bar if stage is running", () => {
-    render(<StageDetails stage={{ ...mockStage, state: Result.running }} />);
+    render(
+      <FilterProvider>
+        <StageDetails stage={{ ...mockStage, state: Result.running }} />
+      </FilterProvider>,
+    );
 
     const runningIndicator = document.querySelector(
       ".pgv-stage-details__running",
@@ -39,19 +48,32 @@ describe("StageDetails", () => {
   });
 
   it("does not show pause time if pauseDurationMillis is 0", () => {
-    render(<StageDetails stage={{ ...mockStage, pauseDurationMillis: 0 }} />);
+    render(
+      <FilterProvider>
+        <StageDetails stage={{ ...mockStage, pauseDurationMillis: 0 }} />
+      </FilterProvider>,
+    );
 
     expect(screen.queryByText("Queued")).not.toBeInTheDocument();
   });
 
   it("disables dropdown if stage is synthetic", () => {
-    render(<StageDetails stage={{ ...mockStage, synthetic: true }} />);
+    render(
+      <FilterProvider>
+        <StageDetails stage={{ ...mockStage, synthetic: true }} />
+      </FilterProvider>,
+    );
 
-    expect(screen.queryByRole("button")).toBeDisabled();
+    const dropdownButton = screen.getByRole("button", { name: "More actions" });
+    expect(dropdownButton).toBeDisabled();
   });
 
   it("displays total duration", () => {
-    render(<StageDetails stage={{ ...mockStage }} />);
+    render(
+      <FilterProvider>
+        <StageDetails stage={{ ...mockStage }} />
+      </FilterProvider>,
+    );
 
     expect(
       screen.queryByLabelText("Total duration")?.nextSibling,
@@ -60,9 +82,11 @@ describe("StageDetails", () => {
 
   it("displays start from stage", () => {
     render(
-      <StageDetails
-        stage={{ ...mockStage, startTimeMillis: Date.now() - 60_000 }}
-      />,
+      <FilterProvider>
+        <StageDetails
+          stage={{ ...mockStage, startTimeMillis: Date.now() - 60_000 }}
+        />
+      </FilterProvider>,
     );
 
     expect(screen.queryByText("Started 1m ago")).toBeInTheDocument();

src/main/frontend/pipeline-console-view/pipeline-console/main/stage-details.tsx

@@ -1,6 +1,7 @@
 import "./stage-details.scss";
 
 import Dropdown from "../../../common/components/dropdown.tsx";
+import Filter from "../../../common/components/filter.tsx";
 import {
   resultToColor,
   StageStatusIcon,
@@ -111,6 +112,9 @@ export default function StageDetails({ stage }: StageDetailsProps) {
           </li>
         )}
         <StageNodeLink agent={stage.agent} />
+        <li>
+          <Filter />
+        </li>
         <li>
           <Dropdown
             className={"jenkins-button--tertiary"}

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

@@ -3,6 +3,7 @@ import "./stage-steps.scss";
 import { StepInfo, StepLogBufferInfo } from "../../../common/RestClient.tsx";
 import ConsoleLogCard from "./ConsoleLogCard.tsx";
 import { StageInfo } from "./PipelineConsoleModel.tsx";
+import { useFilter } from "./providers/filter-provider.tsx";
 
 export default function StageSteps({
   tailLogs,
@@ -16,6 +17,8 @@ export default function StageSteps({
   fetchLogText,
   fetchExceptionText,
 }: StageStepsProps) {
+  const { showHiddenSteps } = useFilter();
+
   if (steps.length === 0) {
     return null;
   }
@@ -25,22 +28,24 @@ export default function StageSteps({
       className={"pgv-stage-steps"}
       key={`stage-steps-container-${stage ? stage.id : "unk"}`}
     >
-      {steps.map((stepItemData) => {
-        return (
-          <ConsoleLogCard
-            tailLogs={tailLogs}
-            scrollToTail={scrollToTail}
-            stopTailingLogs={stopTailingLogs}
-            step={stepItemData}
-            stepBuffers={stepBuffers}
-            onStepToggle={onStepToggle}
-            isExpanded={expandedSteps.includes(stepItemData.id)}
-            fetchLogText={fetchLogText}
-            fetchExceptionText={fetchExceptionText}
-            key={`step-console-card-${stepItemData.id}`}
-          />
-        );
-      })}
+      {steps
+        .filter((step) => showHiddenSteps || !step.flags?.hidden)
+        .map((stepItemData) => {
+          return (
+            <ConsoleLogCard
+              tailLogs={tailLogs}
+              scrollToTail={scrollToTail}
+              stopTailingLogs={stopTailingLogs}
+              step={stepItemData}
+              stepBuffers={stepBuffers}
+              onStepToggle={onStepToggle}
+              isExpanded={expandedSteps.includes(stepItemData.id)}
+              fetchLogText={fetchLogText}
+              fetchExceptionText={fetchExceptionText}
+              key={`step-console-card-${stepItemData.id}`}
+            />
+          );
+        })}
     </div>
   );
 }