Implementation:ArroyoSystems Arroyo Operator Detail

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

Overview

A sidebar detail panel that displays per-operator metrics including backpressure status, parallelism, events per second, and time-series graphs for a selected pipeline operator node.

Description

OperatorDetail fetches pipeline metadata and job metrics via usePipeline and useJobMetrics, then renders a detail panel for the operator identified by nodeId. It shows:

Parallelism badge -- Number of parallel subtasks for the operator.
Backpressure indicator -- Color-coded badge (LOW green / MEDIUM yellow / HIGH red) based on the maximum current backpressure metric across subtasks.
Node description -- Operator type with node ID badge.
Events per second -- Current RX and TX rates displayed as eps values.
Time-series graphs -- Two TimeSeriesGraph components showing messages received and messages sent over a 5-minute window.

Usage

Rendered in the Operators tab of PipelineDetails when a node in the pipeline graph is selected.

Code Reference

Source Location

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

Signature

export interface OperatorDetailProps {
  pipelineId: string;
  jobId: string;
  nodeId: number;
}

const OperatorDetail: React.FC<OperatorDetailProps>;
export default OperatorDetail;

Import

import OperatorDetail from '../components/OperatorDetail';

I/O Contract

Inputs

Name	Type	Required	Description
pipelineId	string	Yes	Pipeline identifier
jobId	string	Yes	Job identifier
nodeId	number	Yes	Operator node ID within the pipeline graph

Outputs

Name	Type	Description
Detail panel	React element	Operator metrics display with backpressure, event rates, and time-series charts

Usage Examples

<OperatorDetail pipelineId={pipeline.id} jobId={job.id} nodeId={activeOperator} />

Related Pages

Page Connections

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

Principle

Implementation

Heuristic

Environment