Fork us on GitHub

Blue Ocean

Blue Ocean is a new project that rethinks the user experience of Jenkins. Designed from the ground up for Jenkins Pipeline and compatible with Freestyle jobs, Blue Ocean reduces clutter and increases clarity for every member of your team through the following key features:

  • Sophisticated visualizations of CD pipelines, allowing for fast and intuitive comprehension of software pipeline status.

  • Pipeline editor (In Development) that makes automating CD pipelines approachable by guiding the user through an intuitive and visual process to create a pipeline.

  • Personalization of the Jenkins UI to suit the role-based needs of each member of the DevOps team.

  • Pinpoint precision when intervention is needed and/or issues arise. The Blue Ocean UI shows where in the pipeline attention is needed, facilitating exception handling and increasing productivity.

  • Native integration for branch and pull requests enables maximum developer productivity when collaborating on code with others in GitHub and Bitbucket.

Use the beta

Blue Ocean is available today as a plugin from the update center for Jenkins servers running Jenkins 2.7.x and above.

From Jenkins

To start using Blue Ocean from an existing Jenkins:

  1. Login to your Jenkins server

  2. Click Manage Jenkins in the sidebar then Manage Plugins

  3. Choose the Available tab and use the search bar to find Blue Ocean beta

  4. Click the checkbox in the Install column

  5. Click either Install without restart or Download now and install after restart

  6. When installation is complete click the Use Blue Ocean button in the classic UI

From Docker

The Docker container is continuously updated to contain the latest Blue Ocean and Jenkins LTS releases.

To start a new Jenkins with Blue Ocean installed: . Install Docker . Run docker run -p 8888:8080 jenkinsci/blueocean:latest . Browse to http://localhost:8888/blue

Join the community

There a a few ways you can join the community:

  1. Chat with the community and development team on Gitter blueocean plugin

  2. Request features or report bugs against the blueocean-plugin component in JIRA.

  3. Subscribe and ask questions on the Jenkins Users mailing list.

  4. Developer? We’ve labeled a few issues that are great for anyone wanting to get started developing Blue Ocean. Don’t forget to drop by the Gitter chat and introduce yourself!

Quick tour

Here is a quick tour of Blue Ocean.

Pipeline activity

Pipelines

Blue Ocean is built from the ground up for Pipeline and uses its related concepts as a foundation to enable use cases that Jenkins hasn’t handled before. The visualization makes it easy to follow along the flow of your Pipeline and gives you clarity into your Continuous Delivery processes.

Successful Pipeline

We know many developers spend a lot of time staring at logs in Jenkins. That’s why we’ve broken up the log broken up step by step to make it much simpler to navigate. Gone are the days that we all spend scrolling through log files that are 10s of thousands or 100s of thousands of lines long.

When you open the pipeline visualisation you can immediately identify what problem that are causing the Pipeline to fail.

Successful Pipeline

Personalized Dashboard

The Personalized Dashboard surfaces a single developer the things that they care about so that they can work better with their team. It responds preemptively to your activity showing you the status of Pipelines that you are interested in.

If a developer favorites a Pipeline or one of its branches it will appear on the dashboard. Pipelines needed the developers attention, such as failing Pipelines, appear at the top of the dashboard.

And when the developer creates a branch in Git, Blue Ocean will automatically favourite it for them. When the branch is deleted the Pipeline’s branch is removed from view.

Personalized dashboard

Branches and Pull Requests

Blue Ocean uses Jenkins Pipeline to discover new branches with `Jenkinsfile`s and runs them for you so that you are testing your Pipeline with every new feature branch that you create.

Branches

If a developer opens a Pull Request against your repository, Jenkins will build it using your Pipeline and update Github or Bitbucket with the status of the Pipeline. This is extremely useful for reviewers of Pull Requests as successful Pipelines improve confidence that changes will integrate without causing havoc.

Github Pipeline status

Pipeline Editor (Coming Soon!)

The Pipeline Editor is the simplest way for anyone wanting to get started with creating Pipelines in Jenkins. It’s also great way for advanced Jenkins users to start adopting Pipeline.

It allows developers to break up their Pipeline into different stages and parallelize tasks that can occur at the same time - its all up to you. When you are done authoring your Pipeline, the pipeline definition is saved back to your repository as a Jenkinsfile.

If you ever need to change the Pipeline again, the user interfaces allows you to jump back in into the editor to author the Pipeline at any time or you can do so in code by editing the Jenkinsfile directly.

Pipeline Editor

Design Language

Jenkins is nothing without its ecosystem of 1000+ plugins and we believe it’s important that Blue Ocean brings them along for the ride. Most developers in our community don’t consider themselves hot shot frontend developers or designers, that’s why we are introducing a consistent design language and accompanying JavaScript and CSS framework. If you’re familiar with Google’s Material Design, Twitter Bootstrap, Apple’s Human Interface Guidelines or Microsoft Modern UI you will be right at home here.

For those curious about the technology stack here, we are working with a combination of ES6 and React which we believe will be provide a smooth learning experience for those strong in Java skills but not so confident in CSS/JS. React’s component based way of describing user interfaces also complements the way that Jenkins Extensibility works. We’ve extended the plugin system and toolchain to work with React components.

Jenkins Design Language

Videos

Introducing Blue Ocean

Jenkins World 2016

FAQ

Why does this project exist?

The world has moved on from developer tools that are purely functional to developer tools being part of a "developer experience". That is to say, it’s no longer about a single tool but the many tools developers use throughout the day and how they work together to achieve a workflow that’s beneficial for the developer - this is Developer Experience.

Developer tools companies like Heroku, Atlassian and Github have raised the bar for what is considered good developer experience, and developers are increasingly expecting exceptional design. In recent years developers are becoming more rapidly attracted to tools that are not only functional but are designed to fit into their workflow seamlessly and are a joy to use. This shift represents a higher standard of design and user experience that Jenkins needs to rise to meet.

Creating and visualising continuous delivery pipelines is something valuable for many Jenkins users and this is demonstrated in the 5+ plugins that the community has created to meet their needs. To us this indicates a need to revisit how Jenkins currently expresses these concepts and consider delivery pipelines as a central theme to the Jenkins user experience.

It’s not just continuous delivery concepts but the tools that developers use every day – Github, Bitbucket, Slack, HipChat, Puppet or Docker. It’s about more than Jenkins – it’s the developer workflow that surrounds Jenkins that spans multiple tools.

New teams have little time for learning to assemble their own Jenkins experience – they want to improve their time to market by shipping better software faster. Assembling that ideal Jenkins experience is something we can work together as a community of Jenkins users and contributors to define. As time progresses, developers' expectations of good user experience will change and the mission of Blue Ocean will enable the Jenkins project to respond.

The Jenkins community has poured its sweat and tears into building the most technically capable and extensible software automation tool in existence. Not doing anything to revolutionize the Jenkins developer experience today is just inviting someone else – in closed source – to do it.

Where is the name from?

The name Blue Ocean comes from the book Blue Ocean Strategy where instead of looking at strategic problems within a contested space you look at problems in the larger uncontested space. To put this more simply, consider this quote from ice hockey legend Wayne Gretzky: "skate to where the puck is going to be, not where it has been".

Where can I find the source code?

The source code can be found on Github:

How will Jenkins users consume the Blue Ocean UI?

Blue Ocean is packaged as a plugin and made available for installation via the update center. The aim is to deliver it without modifying your existing Jenkins configuration so you can run it side by side with the classic Jenkins UI and switch between the two whenever you like.

What does this mean for the classic Jenkins UI?

The intention is that as Blue Ocean matures there will be less and less reasons for users to go back to the existing UI.

For example, in the first version we will mainly be targeting Pipeline jobs. You might be able to see your existing non-pipeline jobs in Blue Ocean but it might not be possible to configure them from the new UI for some time. This means users will have to jump back to the classic UI for configuration of non-pipeline jobs.

There are likely going to be more examples of this and that’s why the classic UI will still be important in the long term.

What about my Freestyle jobs?

Blue Ocean aims to deliver a great experience around Pipeline and be compatible with any Freestyle jobs that you have configured in your system. However, they won’t be able to benefit from any of the features built for Pipelines – for example, Pipeline visualization.

As Blue Ocean is designed to be extensible it will be possible for the community to extend it for other job types in the future.

Is this a CloudBees project?

The short answer is "no". The project has been originated and sponsored by CloudBees, but it is a 100% open project (including sources, roadmaps, public discussions, etc.). Everybody is invited to contribute to it.

To quote James Dumay (Blue Ocean Product Manager at CloudBees):

While the project’s inception has happened within CloudBees we see this project being one owned by the community. At CloudBees we recognize the importance of a vibrant and healthy Jenkins community, we see the company and community working in symbiosis: a thriving developer community is good for CloudBees and CloudBees provides time and money back into the community to make it stronger. Blue Ocean is our way of giving back and strengthening. To that effect we’ve put together a new a team of product, UX, frontend and backend developers (some old faces and a lot of new ones!) that will be working on this project with the community full time

What does this mean for my plugins?

Extensibility is a pretty core concept to Jenkins, so being able to extend the Blue Ocean UI is important. Based on some research, we worked out a way to allow "<ExtensionPoint name=..>" to be used in the markup of Blue Ocean, leaving places for plugins to contribute to the UI (plugins can have their own Blue Ocean extension points, just like they do today in Jenkins). Blue Ocean itself (as it is so far) is implemented using these extension points. Extensions are delivered by plugins, as normal, only if they wish to contribute to the Blue Ocean experience they will have some additional javascript that provides extensions.

What technologies are currently in use?

Blue Ocean is built as a collection of Jenkins plugins itself. There is one key difference, however. It provides both its own endpoint for http requests and delivers up html/javascript via a different path, without the existing Jenkins UI markup/scripts. React.js and ES6 are used to deliver the javascript components of Blue Ocean. Inspired by this excellent open source project (react-plugins) an <ExtensionPoint>pattern was established, that allows extensions to come from any Jenkins plugin (only with Javascript) and should they fail to load, have failures isolated.