Implementation:ArroyoSystems Arroyo Pipeline Row

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

Overview

A table row component that displays a single pipeline's name, creation date, job state with color coding, runtime duration, task count, and action buttons for duplication and deletion.

Description

PipelineRow renders a element for the pipelines table. It fetches the pipeline's jobs via usePipelineJobs and displays the first (most recent) job's data. The row contains:

Name/ID -- Clickable link navigating to /pipelines/{id}, showing pipeline name and ID.
Created at -- Formatted date with relative time label (e.g., "5 minutes ago").
State -- Job state with color coding: green for Running, red for Failed, orange for Stopping, gray for others.
Runtime -- Formatted duration in HH:MM:SS format computed from job start/finish times.
Tasks -- Number of tasks or "n/a".
Actions -- Copy (navigates to /pipelines/new?from={id}) and Delete icon buttons.

The module also exports the Indicator sub-component for displaying labeled values and a formatDuration helper for microsecond-to-human-readable conversion.

Usage

Rendered within PipelinesTable for each pipeline in the paginated list.

Code Reference

Source Location

Repository: ArroyoSystems_Arroyo
File: webui/src/components/PipelineRow.tsx

Signature

export interface PipelineRowProps {
  pipeline: Pipeline;
  setPipelineIdToBeDeleted: (pipelineId: string) => void;
  onOpen: () => void;
}

const PipelineRow: React.FC<PipelineRowProps>;
export default PipelineRow;

Import

import PipelineRow from './PipelineRow';

I/O Contract

Inputs

Name	Type	Required	Description
pipeline	Pipeline	Yes	Pipeline object with id, name, created_at
setPipelineIdToBeDeleted	(id: string) => void	Yes	Callback to stage a pipeline for deletion
onOpen	() => void	Yes	Callback to open the delete confirmation dialog

Outputs

with pipeline info, state, and action buttons

Name	Type	Description
Table row	React element	A

Usage Examples

<PipelineRow
  pipeline={pipeline}
  setPipelineIdToBeDeleted={setPipelineIdToBeDeleted}
  onOpen={deletePipelineModalOnOpen}
/>

Related Pages

Page Connections

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

Principle

Implementation

Heuristic

Environment