Git Product home page Git Product logo

jenkins.visual.pipeline-editor-plugin's Introduction

(Experimental) Visual pipeline editor for Jenkins Workflow.

NOTE: this plugin is experimental. It is likely to abruptly change course in design or source code. It may set your hair on fire. Consider yourself warned before using.

Visual pipelines

Pipeline Collapsed

The visual pipeline editor supports a stage centric view of Workflow. You expand stages to see the steps within:

Pipeline Expanded

Editing

Clicking on a step will load the editor specific to that plugin:

Command or Ask for approval

You can of course add more steps, from a choice of pre-made types:

Add Step

The steps are implemented in src/main/js/steps and the intention is to make it extensible (by this and other plugins).

Parallelism is supported as first class. As you can guess by the branching and joining lines shown above. Any set of steps can be split up into parallel branches of execution:

Make Parallel

You can then add more steps to each parallel branch, or more branches, as needed (and you can convert back too).

Try it out

This is a regular Jenkins plugin (although using various javascript tools) so you can run it using the usual

mvn hpi:run or build it using mvn install if you want to install it in an existing Jenkins master (note the experimental status, it may blow up in your face!).

Create a new job of the Workflow type, and click "edit" next to the drop down that choses the type of editor you want to use for Workflow:

Open Editor

Then Click save. It will have saved the workflow and you can execute it (it uses a pre-canned test repo just to show it works end to end).

Using a pre-built hpi

You can try a preview release if you are unable to run mvn. To use this, please first install the depndencies mentioned on that url, before installing the hpi into your Jenkins instance. Remember this is experimental/preview status.

Developing the plugin

Run mvn hpi:run as it is a normal plugin.

To work with the JavaScript, you run the following (in another window):

npm install

npm install -g gulp

gulp bundle && gulp rebundle

This will set up the js tooling needed and automatically build the changes to the source js which is stored in main/js to the plugin directory (just reload the browser after that).

How it works

Right now a json DSL is used (see json.js) (and stored in the jenkins config.xml) to keep the state of the UI and pipeline. On change events, a workflow script (via toWorkflow) is emitted and stored in the config.xml for actual execution.

How to I see the generated workflow script

The plugin regularly logs it to the console (in the browser), but it is also stored in the config(xml) of the Workflow Job.

It's a JavaScript plugin

This JavaScript heavy plugin is possible because of https://github.com/tfennelly/jenkins-js-modules and libs made available by: https://github.com/tfennelly/jenkins-js-libs/

This means that namespaced, clean js libraries and css can be made available to any Jenkins plugin that needs it. Ideally, you use the common jQuery, or any library, but if you really need your own, this framework can support it. Using modern js tools like gulp and less make for a smooth development workflow (I like to call it "refresh driven development").

jenkins.visual.pipeline-editor-plugin's People

Contributors

michaelneale avatar tfennelly avatar kohsuke avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.