Implementation:ArroyoSystems Arroyo Checkpoints Component

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

Overview

A checkpoint browser component that displays a selectable list of checkpoint epochs with summary statistics and a detailed timeline view for the selected checkpoint.

Description

The Checkpoints component renders a two-column layout: a left sidebar with a clickable list of checkpoint epochs (displayed in reverse chronological order), and a right detail area. When a checkpoint epoch is selected, it fetches operator-level checkpoint details via useCheckpointDetails and displays:

Statistics -- Start time, finish time, duration (via formatDuration), and total checkpoint size (via dataFormat) in a StatGroup.
Backend badge -- Shows the checkpoint storage backend type.
CheckpointDetails -- Delegates to the timeline visualization component for per-operator event spans.

Usage

Rendered within the Checkpoints tab of the PipelineDetails page.

Code Reference

Source Location

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

Signature

export interface CheckpointsProps {
  pipeline: Pipeline;
  job: Job;
  checkpoints: Array<Checkpoint>;
}

const Checkpoints: React.FC<CheckpointsProps>;
export default Checkpoints;

Import

import Checkpoints from '../components/Checkpoints';

I/O Contract

Inputs

Name	Type	Required	Description
pipeline	Pipeline	Yes	Pipeline metadata (provides pipeline.id)
job	Job	Yes	Job metadata (provides job.id)
checkpoints	Array<Checkpoint>	Yes	List of checkpoint records with epoch, start_time, finish_time, backend

Outputs

Name	Type	Description
Checkpoint browser	React element	Selectable epoch list with statistics and timeline detail view

Usage Examples

<Checkpoints pipeline={pipeline} job={job} checkpoints={checkpoints} />

Related Pages

Page Connections

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

Principle

Implementation

Heuristic

Environment