Implementation:ArroyoSystems Arroyo Home Page
| Knowledge Sources | |
|---|---|
| Domains | WebUI, React, Dashboard |
| Last Updated | 2026-02-08 08:00 GMT |
Overview
The home dashboard page that displays summary statistics (running, all, finished, failed jobs) and a "Create Pipeline" button with guided tour integration.
Description
Home fetches job data via useJobs and computes four counters:
- Running Jobs -- Jobs in Running, Checkpointing, or Compacting state.
- All Jobs -- Total job count.
- Finished Jobs -- Jobs in Finished state.
- Failed Jobs -- Jobs in Failed state, displayed in red when non-zero.
These are rendered as four Stat cards in a responsive grid. The Stat component (also exported) renders a labeled value inside a shadowed box.
The "Create Pipeline" button is wrapped in a Popover for the guided tour (TourSteps.CreatePipelineButton), and the page renders a WelcomeModal for first-time users. Tour state is managed via TourContext.
Usage
Rendered at the / root route.
Code Reference
Source Location
- Repository: ArroyoSystems_Arroyo
- File: webui/src/routes/home/Home.tsx
Signature
export const Stat: React.FC<{ label: string; value?: string; color?: string }>;
export function Home(): JSX.Element;
Import
import { Home } from './Home';
I/O Contract
Inputs
| Name | Type | Required | Description |
|---|---|---|---|
| (none) | N/A | N/A | Fetches job data internally via useJobs |
Outputs
| Name | Type | Description |
|---|---|---|
| Dashboard | React element | Statistics grid with job counters and create pipeline button |
Usage Examples
<Route path="/" element={<Home />} />
Related Pages
Page Connections
Double-click a node to navigate. Hold to expand connections.
Principle
Implementation
Heuristic
Environment