Implementation:ArroyoSystems Arroyo Pipeline Details Page
| Knowledge Sources | |
|---|---|
| Domains | WebUI, React, Pipelines |
| Last Updated | 2026-02-08 08:00 GMT |
Overview
A detailed pipeline view page that displays the operator graph, live outputs, checkpoints, SQL query, UDFs, and error logs for a running or completed pipeline.
Description
PipelineDetails renders a full-screen view for a single pipeline identified by URL parameter :pipelineId. It features:
Header area -- Pipeline name, job state badge, Edit button (opens PipelineConfigModal), and a context-sensitive action button (Stop/Start/Restart). For failed jobs, a Restart button with a hover-triggered "Restart Without State" option is shown with a confirmation dialog warning about data loss.
Tabbed content with six tabs:
- Operators -- Split view with PipelineGraphViewer (interactive DAG with backpressure coloring) and OperatorDetail sidebar showing metrics, parallelism, and events per second graphs.
- Outputs -- PipelineOutputs with SSE-based data tailing (only if pipeline has a preview/web sink node).
- Checkpoints -- Checkpoints component showing checkpoint history and timeline details.
- Query -- Read-only SQL syntax-highlighted view of the pipeline query.
- UDFs -- Syntax-highlighted Rust/Python UDF definitions.
- Errors -- Paginated OperatorErrors with a warning icon when errors exist.
The page auto-refreshes pipeline and job data every 2 seconds and metrics every 1 second.
Usage
Rendered at the /pipelines/:pipelineId route. Accessed by clicking a pipeline row in the pipelines table.
Code Reference
Source Location
- Repository: ArroyoSystems_Arroyo
- File: webui/src/routes/pipelines/PipelineDetails.tsx
Signature
export function PipelineDetails(): JSX.Element;
Import
import { PipelineDetails } from './PipelineDetails';
I/O Contract
Inputs
| Name | Type | Required | Description |
|---|---|---|---|
| URL param :pipelineId | string | Yes | Pipeline ID from route parameters |
Outputs
| Name | Type | Description |
|---|---|---|
| Pipeline view | React element | Full pipeline detail page with tabs for operators, outputs, checkpoints, query, UDFs, and errors |
Usage Examples
// In router configuration
<Route path="/pipelines/:pipelineId" element={<PipelineDetails />} />