Add Build Flow view for better visualization of Upstream and Downstream Builds

README.md

@@ -20,6 +20,7 @@ This plugin adds a visual representation of Jenkins pipelines, showing each stag
 - [Collapse and expand individual stages](./docs/per-stage-collapse.md) with parallel branches or nested children
 - Quickly access details of each step and its results
 - Hide specific steps from view using the `hideFromView` Pipeline DSL step
+- **Build Flow** - a zoomable, pannable DAG visualization with build history dots, inspired by the YABV plugin
 - Designed for better readability and faster troubleshooting
 
 ## Getting started
@@ -32,14 +33,20 @@ Hidden steps are not displayed by default in the Pipeline Overview, but can be t
 
 ## Screenshots
 
-Basic pipeline:
+### Basic pipeline
 
 ![Different statuses](./docs/images/different-statuses.png)
 
-Semi-complex pipeline:
+### Semi-complex pipeline
 
 ![Semi complex pipeline](./docs/images/semi-complex-pipeline.png)
 
+### Build Flow
+
+The Build Flow view provides a zoomable, pannable DAG visualization of upstream/downstream build relationships. See the [full documentation](./docs/build-flow.md) for details.
+
+![Build Flow Simple](./docs/images/build-flow-simple.png)
+
 ## Video
 
 See a live demonstration from a Jenkins Contributor Summit:

docs/build-flow.md

@@ -0,0 +1,24 @@
+# Build Flow
+
+The Build Flow view provides a zoomable, pannable DAG (directed acyclic graph) visualization of pipeline stages, inspired by the [Yet Another Build Visualizer](https://plugins.jenkins.io/yet-another-build-visualizer/) plugin.
+
+## Accessing Build Flow
+
+- On the build page Overview tab, the Build Flow card appears when upstream/downstream builds exist
+- On the build page Stages tab, the Build Flow pane is embedded in the split view
+- On the job page, the Build Flow widget shows the latest build's graph
+- Users can toggle the job page widget via the gear icon on the Stages card (no admin access needed)
+
+## Capabilities
+
+- Zoom and pan with mouse wheel / trackpad; pinch-to-zoom on touch devices
+- Center / zoom-to-fit controls
+- Toggle between DAG and flat grid layouts
+- Show/hide edge connections, stage labels, duration, and status badges
+- Auto-refresh while the build is in progress
+- Build history dots showing recent build results (click to navigate)
+- Compact summary and widget views embedded in the build/job pages
+
+## Screenshot
+
+![Build Flow Simple](./images/build-flow-simple.png)

src/main/frontend/build-flow-view/app.tsx

@@ -0,0 +1,24 @@
+import { FunctionComponent } from "react";
+
+import {
+  I18NProvider,
+  LocaleProvider,
+  ResourceBundleName,
+} from "../common/i18n/index.ts";
+import { BuildFlow } from "./build-flow/main/BuildFlow.tsx";
+import { getRootElement } from "./build-flow/main/BuildFlowUtils.ts";
+
+const App: FunctionComponent = () => {
+  const rootElement = getRootElement();
+  const locale = rootElement?.dataset.userLocale ?? "en";
+
+  return (
+    <LocaleProvider locale={locale}>
+      <I18NProvider bundles={[ResourceBundleName.messages]}>
+        <BuildFlow />
+      </I18NProvider>
+    </LocaleProvider>
+  );
+};
+
+export default App;