Pipeline Editor

Pipeline Editor

The visual pipeline editor lets you design CI/CD workflows by dragging and dropping nodes onto a canvas.

Interface Overview

┌─────────────────────────────────────────────────────────────────┐
│  Pipeline Name       │  Description               │  Save  Run │
├──────────────────────┼──────────────────────────────────────────┤
│                      │                                          │
│  TRIGGERS            │                                          │
│  ┌─────────┐         │         ┌──────────────────┐             │
│  │ Manual  │         │         │   Canvas Area    │             │
│  └─────────┘         │         │                  │             │
│  ┌─────────┐         │         │   Drop jobs and  │             │
│  │ On Push │         │         │   triggers here  │             │
│  └─────────┘         │         │                  │             │
│                      │         └──────────────────┘             │
│  BUILD               │                                          │
│  ┌─────────┐         │                                          │
│  │Build iOS│         │                                          │
│  └─────────┘         │                                          │
│  ┌─────────┐         │                                          │
│  │Build Drd│         │                                          │
│  └─────────┘         │                                          │
│                      │                                          │
└──────────────────────┴──────────────────────────────────────────┘

Creating a Pipeline

1. Open the Editor

   • Navigate to your repository
   • Go to the Pipelines tab
   • Click Create Pipeline (or edit an existing one)

2. Add a Trigger

   Drag a trigger from the palette onto the canvas. Every pipeline needs at least one trigger.

3. Add Jobs

   Drag job types onto the canvas. Position them to reflect your desired workflow.

4. Connect Nodes

   Click and drag from a node’s output port to another node’s input port to create connections.

5. Configure Each Node

   Click on a node to open its configuration dialog. Set options specific to that job type.

6. Save the Pipeline

   Click Save to save your changes. The pipeline is now active.

Canvas Controls

Action	Desktop	Mobile
Pan	Click + drag on empty space	Two-finger drag
Zoom	Scroll wheel	Pinch
Select node	Click	Tap
Move node	Drag	Drag
Connect	Drag from port	Drag from port
Delete connection	Click connection, press Delete	Tap connection, tap delete

Working with Nodes

Adding Nodes

• Desktop: Drag from palette onto canvas
• Mobile: Tap a job type to add at center of view

Configuring Nodes

Click/tap a node to open its configuration dialog. Each job type has specific options.

Deleting Nodes

1. Select the node
2. Press Delete key or click the delete icon

Caution

Deleting a node also removes all its connections.

Moving Nodes

Drag nodes to reposition. Nodes snap to a grid for alignment.

Connections

Connections define execution order. A job runs only after all upstream jobs complete successfully.

Creating Connections

1. Hover over a node’s output port (right side)
2. Click and drag to another node’s input port (left side)
3. Release to create the connection

Connection Types

• Sequential: One job after another
• Parallel: Multiple jobs from same source
• Fan-in: Multiple sources to one job

Removing Connections

Click the connection line and press Delete, or right-click and select “Remove”.

Triggers

Adding Triggers

Drag a trigger type onto the canvas. You can have multiple triggers per pipeline.

Trigger Configuration

Trigger	Configuration
Manual	No config needed
On Push	Branch filter (regex)
On Tag	Tag pattern
On PR	Source/target branch
Scheduled	Cron expression

Editing Lock

When pipeline runs are active, editing is locked to prevent conflicts:

⚠️ Editing is locked while 2 pipeline runs are active.
   Wait for all runs to complete before making changes.
                                           [Refresh]

Click Refresh to check if runs have completed.

Keyboard Shortcuts

Shortcut	Action
Delete / Backspace	Delete selected node/connection
Cmd/Ctrl + S	Save pipeline
Cmd/Ctrl + Z	Undo
Escape	Deselect / Close dialog

Best Practices

1. Name descriptively - Use clear pipeline names like “iOS Production Deploy”
2. Add descriptions - Document what the pipeline does
3. Keep it simple - Don’t over-engineer; add complexity as needed
4. Test incrementally - Build up pipelines step by step
5. Use parallel jobs - Run independent jobs in parallel for speed

Troubleshooting

Can’t Connect Nodes

• Ensure you’re dragging from output (right) to input (left)
• Check that you’re not creating a circular dependency

Changes Not Saving

• Check for validation errors (red highlights)
• Ensure you have edit permissions
• Verify no active runs are locking the pipeline

Canvas Not Responding

• Try refreshing the page
• Clear browser cache
• Check browser console for errors