Web Dashboard

Using the CI Sizer web dashboard for resource analysis and sizing recommendations.

Overview

The receiver serves an embedded web UI at /ui for exploring runner metrics, sizing recommendations, energy consumption, and carbon footprint data. The dashboard is server-rendered with vanilla JavaScript — no build step or external dependencies are required.

The dashboard uses a hierarchical drill-down model with card-based navigation:

  1. Overview — global KPI summary with per-organization breakdown
  2. Organization — per-repository summaries within an org
  3. Repository — per-workflow summaries within a repo
  4. Workflow/Job — charts showing resource usage, sizing, and energy data across runs
  5. Run Details — detailed metrics for a single CI run, including sizing recommendations and energy impact

Each level displays entities as clickable cards. Click a card (or press Enter/Space when focused) to drill down to the next level. Use the Backspace key to navigate up one level.

Keyboard Shortcuts

KeyAction
?Show keyboard shortcuts help
/Focus entity search
BackspaceNavigate up one level
EscClose modal
CToggle compare basket
OOpen compare view (when basket has items)
Cmd+D / Ctrl+DToggle dark mode
Enter / SpaceActivate focused card
Left / Right arrowsNavigate chart data points
Enter (on chart point)View details for selected data point

Charts

At the workflow/job level, the dashboard displays interactive charts for:

  • CPU usage — peak and average CPU cores per run
  • Memory usage — peak and average memory per run
  • Duration — run duration over time
  • Success/failure — pass/fail statistics
  • Energy consumption — estimated energy (Wh) per run
  • Carbon footprint — estimated CO2 emissions (gCO2eq) per run

Charts support a time range selector to filter the displayed period. The x-axis can be toggled between run ID order and chronological time order.

Clicking a data point in any chart navigates to the run details view for that specific execution.

Run Details

The run details view shows comprehensive information for a single CI execution:

  • Per-container CPU and memory metrics (peak, average, percentiles)
  • Top CPU and memory consuming processes
  • Sizing recommendations for each container (request and limit values)
  • Energy consumption estimate with methodology and confidence level
  • Carbon footprint estimate with carbon intensity source

Compare Feature

The compare feature allows side-by-side comparison of multiple entities (organizations, repositories, workflows, or jobs):

  1. Press C to open the compare basket
  2. Add entities to the basket from any navigation level
  3. Press O or click the compare button to view a side-by-side comparison
  4. Compare view shows KPIs, resource usage trends, and sizing recommendations across selected entities

Press / to focus the entity search field. Type to filter the visible cards by name. The search works at any navigation level — overview, org, repo, or workflow/job.