Implementation:ArroyoSystems Arroyo Pipelines Table
| Knowledge Sources | |
|---|---|
| Domains | WebUI, React, Pipelines |
| Last Updated | 2026-02-08 08:00 GMT |
Overview
A paginated table component that lists all pipelines with columns for name, creation date, state, runtime, and tasks, plus a delete confirmation dialog.
Description
PipelinesTable fetches paginated pipeline data via usePipelines and renders them in a Chakra UI Table with columns: Name/ID, Created at, State, Runtime, Tasks, and Actions. Each row is rendered by PipelineRow.
The component manages a delete workflow with an AlertDialog confirmation that warns about job state loss. Upon deletion, it calls deletePipeline and shows success/error messages via an Alert banner. The table supports pagination through PaginatedContent which manages infinite scrolling across pipeline pages.
Usage
Used as the main content area of the pipelines list view, typically within a page-level container.
Code Reference
Source Location
- Repository: ArroyoSystems_Arroyo
- File: webui/src/components/PipelinesTable.tsx
Signature
export interface JobsTableProps {}
const PipelinesTable: React.FC<JobsTableProps>;
export default PipelinesTable;
Import
import PipelinesTable from '../components/PipelinesTable';
I/O Contract
Inputs
| Name | Type | Required | Description |
|---|---|---|---|
| (none) | N/A | N/A | Fetches data internally via usePipelines hook |
Outputs
| Name | Type | Description |
|---|---|---|
| Pipeline table | React element | Paginated table with pipeline rows and delete dialog |
Usage Examples
<PipelinesTable />