Implementation:ArroyoSystems Arroyo Connections Page

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

Overview

The main connections management page that displays a paginated table of connection tables with columns for name, creation date, connector type, table type, format, pipeline count, and action buttons for viewing configuration and deleting.

Description

Connections fetches paginated connection table data via useConnectionTables(100) and renders a Chakra UI table with six columns defined by a ColumnDef array: name, created at, connector, table type, format (from schema or "Built-in"), and pipelines (consumer count).

Each row has action buttons:

Info (FiInfo) -- Opens a Modal displaying the connection's raw JSON configuration in a block with pretty-printed JSON.


Delete (FiXCircle) -- Calls DELETE /v1/connection_tables/{id} with success/error feedback via an Alert banner.

The page includes a "Create Connection" button that navigates to /connections/new and uses PaginatedContent for infinite scroll pagination. The navbar menu items are cleared on mount.

Usage

Rendered at the /connections route.

Code ReferenceSource Location

Repository: ArroyoSystems_Arroyo
File: webui/src/routes/connections/Connections.tsx

Signature

export function Connections(): JSX.Element;

Import

import { Connections } from './Connections';

I/O ContractInputs




Name
Type
Required
Description


(none)
N/A
N/A
Fetches data internally via useConnectionTables

Outputs




Name
Type
Description


Connections page
React element
Paginated table with connection tables, config modal, and CRUD operations

Usage Examples

<Route path="/connections" element={<Connections />} />

Related Pages

Environment:ArroyoSystems_Arroyo_Webui_Runtime
ArroyoSystems_Arroyo_Choose_Connector_Page
ArroyoSystems_Arroyo_Data_Fetching

Page Connections

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

Principle

Implementation

Heuristic

Environment