Implementation:ArroyoSystems Arroyo Create Pipeline Page

Knowledge Sources	ArroyoSystems_Arroyo
Domains	WebUI, React, Pipelines
Last Updated	2026-02-08 08:00 GMT

Overview

The main pipeline creation page that provides a full-featured SQL editor, UDF management, query validation, preview execution, and pipeline launch functionality in a resizable panel layout.

Description

CreatePipeline is the primary authoring interface for Arroyo streaming pipelines. It uses react-resizable-panels to create a two-panel layout:

Left sidebar (collapsible) -- Toggles between a CatalogTab showing available tables and a UdfsResourceTab showing UDFs. The sidebar state is controlled via navbar menu items.

Main area (vertical split):

Top panel -- PipelineEditorTabs containing the Monaco SQL editor, UDF editor tabs, and action buttons (Check, Preview, Stop, Launch).
Bottom panel -- A vertical tab group with Pipeline Graph (via PipelineGraphViewer), Results (via PipelineOutputs with SSE streaming), and Errors tabs.

Key behaviors:

Copy from -- Supports ?from=pipelineId query param to copy SQL and UDFs from an existing pipeline.
Query persistence -- Saves the current query to localStorage.
Validation flow -- pipelineIsValid() sequentially validates all UDFs via the API, then validates the SQL query. Errors are shown in the Errors tab with syntax highlighting.
Preview -- Creates a preview pipeline via POST /v1/pipelines/preview, subscribes to job output via SSE, and shows results in the Results tab.
Launch -- Opens StartPipelineModal for naming and parallelism, then creates the pipeline via POST /v1/pipelines.
Tour integration -- Supports guided tour steps (CreatePipelineModal, ExampleQueries, Preview, TourCompleted).

Usage

Rendered at the /pipelines/new route. Accessed from the Home page "Create Pipeline" button or the pipelines list.

Code Reference

Source Location

Repository: ArroyoSystems_Arroyo
File: webui/src/routes/pipelines/CreatePipeline.tsx

Signature

export interface PreviewOptions {
  enableSinks: boolean;
}

export function CreatePipeline(): JSX.Element;

Import

import { CreatePipeline } from './CreatePipeline';

I/O Contract

Inputs

Name	Type	Required	Description
URL query param "from"	string	No	Pipeline ID to copy SQL and UDFs from
LocalUdfsContext	React Context	Yes	Provides local UDF state and operations
TourContext	React Context	No	Provides guided tour state

Outputs

Name	Type	Description
Navigation	Side effect	Navigates to /pipelines/{id} on successful pipeline creation
localStorage	Side effect	Persists query text to localStorage key "query"

Usage Examples

// In router configuration
<Route path="/pipelines/new" element={<CreatePipeline />} />

// Copy from existing pipeline
navigate('/pipelines/new?from=' + existingPipelineId);

Related Pages

Page Connections

Double-click a node to navigate. Hold to expand connections.

Principle

Implementation

Heuristic

Environment