aws-samples / aws-samples/sample-edge-to-cloud-digital-ops-workshop

Dashboard panels: ingest-volume, freshness-over-time, latency-over-time time-series

Open
#270 0 comments 0 reactions 0 assignees View on GitHub
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.