aws-samples / aws-samples/sample-edge-to-cloud-digital-ops-workshop
Dashboard panels: ingest-volume, freshness-over-time, latency-over-time time-series
- Dominant language
- TypeScript
- Stars
- 3
- Forks
- 1
- Avg merge
- 7h 19m
- Merged PRs (30d)
- 12
Description
> **Part of the 4-issue set (Epic → A → B → C → D), one PR.** Spec: [https://github.com/aws-samples/sample-edge-to-cloud-digital-ops-workshop/blob/feat/frac-load-dashboard-timeseries/docs/superpowers/specs/2026-09-09-frac-load-and-dashboard-timeseries-design.md](https://github.com/aws-samples/sample-edge-to-cloud-digital-ops-workshop/blob/feat/frac-load-dashboard-timeseries/docs/superpowers/specs/2026-09-09-frac-load-and-dashboard-timeseries-design.md).
## C — Dashboard time-series panels (volume, freshness trend, latency trend)
Add three time-over-time panels to the cloud-analytics dashboard. Today every panel is a **current-value bar chart** with no history.
### Deliverables
1. **`useTimeseriesBuffer`** (new hook, `cloud-dashboard/src/hooks/` or colocated in `page.tsx`): a **client-side ring buffer**, bounded to ~600 points (~10 min). On each freshness/latency tick already arriving via the existing SSE/poll paths, append `{ t, rwMs, tsdbMs, athenaMs, influxMs, appsyncMs }` (and the matching latency record); drop the oldest when full. **No server-side history table.**
2. Three new Recharts panels in `cloud-dashboard/src/app/page.tsx` (retain the existing bar panels):
- **Ingest Volume (msg/s) over time** — `AreaChart`, single series, from `GET /api/volume` (issue B), polled every few seconds.
- **Freshness over time** — multi-line `LineChart` from the buffer; reuse the existing `Math.log10` Y-axis tick trick.
- **Query Latency over time** — multi-line from the buffer, same log-scale treatment.
- RW/TSDB/InfluxDB series will move under load; Athena/AppSync stay flat (expected — they are MQTT-only, not on the MSK path). Follow the existing dashboard palette.
### Acceptance (agent, offline)
- `cd cloud-dashboard && pnpm build` passes; the three panels render in the component tree.
- Ring buffer is bounded (does not grow unbounded); a unit or type-level check of the cap.
**Blocked by B.**
Contributor guide
Research direction
Start with the linked design spec and cloud-dashboard/src/app/page.tsx, then trace the existing freshness and latency SSE or polling paths and the GET /api/volume endpoint from issue B. Implement the bounded time-series behavior and panels described in the issue, then run cd cloud-dashboard && pnpm build and verify the buffer cap check and three panels in the component tree.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- frontend
- Issue type
- Feature
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Active
- Clarity
- Clearly specified
- Newbie friendliness
- 64/100