Revamped Pipeline visualization in Jenkins

Rewritten and redesigned

The plugin has been completely rebuilt with a clean, modern interface using the latest version of React. We’ve put a lot of effort into simplifying the plugin’s structure - switching from Webpack to Rspack, moving to Vite, and replacing class-based components with modern function components. These changes made the codebase easier to maintain and work with, and we removed thousands of lines of code along the way to boost both maintainability and performance.

The interface, with new components from the Jenkins Design Library, has been thoughtfully redesigned to offer a smoother, more intuitive experience. The plugin now supports full-page scrolling - eliminating the need for nested scroll areas - along with sticky headings for better context. The pipeline graph can be panned and zoomed, allowing users to explore complex pipelines with ease. Subtle, delightful animations enhance usability without getting in the way. Stage progress is now clearly visible, and loading skeletons provide immediate visual feedback, resulting in a more stable and responsive experience.

Unified view

The new interface combines the Pipeline graph, stages, and logs into a single, streamlined layout. You can inspect a stage, follow its execution, and read its output - all in one place.

Customization

The Pipeline graph appears on top by default, but you can move it to the left to better suit ultrawide displays. Columns can be resized and hidden, and layout preferences are saved automatically.

Performance improvements

We’ve made significant behind-the-scenes improvements to how stages and logs are fetched and rendered. The new plugin loads faster, scrolls smoother, and handles larger pipelines more gracefully.

The new Pipeline Graph View is available now for users on Jenkins 2.479.3 and later.

If you haven’t installed the plugin already, be sure to download it through the Plugins section of your Jenkins controller to experience the update.

See it in action in the Jenkins core build on ci.jenkins.io.

If you want to get involved in the UI and UX discussions of Jenkins join the User Experience SIG.

Take advantage of new components and patterns in your plugin via the Design Library.

You can watch our monthly meetings on YouTube and you can view in-progress work on GitHub.