Skip to content

UI Overview (Runs Index & Trends)

Smooth, continuous demo (≈18s) showing filtering, quick search, Trend & History, Timeline in Allure, and a brief Dashboard hover.
Tip: If the GIF appears cached, force refresh or bump the ?v= query.

Prefer a shorter preview? Watch the quick demo here: ui-combo.mp4 (≈30–40s, with brief captions shown right after each click).
A GIF version is also available: ui-combo.gif.

← Home  •  Quick Start  •  CLI  •  UI

The publishing step generates a lightweight Runs Index and companion pages:

Page Purpose Path (per branch)
Runs Index Filterable & sortable historical run table .../<project>/<branch>/runs/index.html
Trend Viewer Canvas chart (passed / failed / broken) .../<project>/<branch>/runs/trend.html
History Insights Aggregated metrics & pass rate streaks .../<project>/<branch>/runs/history.html
Latest Report Full Allure static UI for the most recent run .../<project>/<branch>/latest/

All pages are static HTML + vanilla JS (no external frameworks), designed to load fast behind CloudFront with private S3 storage.

Key UI Features

  1. Progressive Reveal – Loads first 300 runs, then batches (Load more).
  2. Search & Filters – Substring search across IDs, context URLs, dynamic metadata. Optional Only failing toggle.
  3. Column Management – Show/hide columns or apply Minimal/Core/Full presets.
  4. Persistent State – Filter text, failing toggle, loaded row count, and sort order are saved in localStorage.
  5. Tag Chips – Clickable tags (if metadata supplies tags) to focus relevant runs.
  6. Deep Linking – #run=<id> in URL highlights and filters to a specific run.
  7. Dark / Light Theme Toggle – Stored preference (no external CSS framework required).
  8. Trend Viewer – Minimal canvas graph based solely on history-trend.json for long‑term visibility.
  9. History Insights – Pass rate averages (all vs last 10), current healthy streak, latest failure count.
  10. Atomic Latest Promotion – latest/ always points to a completely published run (two‑phase swap + readiness marker).

Screenshots

Below screenshots are illustrative. Paths assume images generated into dev/resources/.

The screenshots below reflect the current UI. Width attributes are used to keep the layout tidy across devices.

Runs Table (Base)

Runs Table

Columns Panel Open

Columns Panel

Search Example

Search Applied

Trend Viewer

Trend Viewer

Dashboard

An at-a-glance overview of recent runs, key KPIs, and quick links into the latest Allure report.

Dashboard Overview

Data Flow Summary

  1. Manifest Update: Each publish merges a new entry into runs/index.json with size, counts, metadata.
  2. Index HTML: Server generates a pre‑rendered table subset (first ≤500 rows) plus JS for client features.
  3. Trend JSON: Allure’s history/history-trend.json is reused for both trend & insights pages.
  4. Caching: Index/Trend/History pages use Cache-Control: no-cache so table & metrics refresh instantly.
  5. Latest Swap: latest_tmp/ → latest/ promotion ensures the latest viewer is never half‑uploaded.

Accessibility Considerations

  • High contrast adjustments in dark theme for pass/fail/broken status colors.
  • Column toggle & help panels use aria-expanded and keyboard focus trapping (close with Esc).
  • Tag chips and link buttons have aria-label hints for assistive tech.

Future Enhancements (Roadmap)

Idea Benefit
Sparkline Mini Charts Quick visual density for recent pass rates.
Column Preset Persistence per Branch Different branch personas (e.g. release vs main)
Dark Mode Screenshot Variants Documentation parity in both themes.
Diff‑Skip Screenshot Task CI noise reduction for unchanged renders.
Metadata Column Grouping Clarity for large custom metadata sets.

Return to CLI or Architecture.