Lesson 10 : Advanced Dashboard Platform

Lesson 10 : Advanced Dashboard Platform

What We Are Building

InfraWatch Dashboard — a Grafana-class observability console for infrastructure operators:

1. Composable Grid — Drag-and-drop widgets with persistent layouts and a widget library

2. Advanced Charts — Multi-series, stacked, scatter, heatmap, latency distribution, status timelines

3. Customization — Per-dashboard themes, save/load layouts, tokenized sharing

4. Interactive Analytics — Cross-filtering, drill-down hierarchy, time-range presets

5. Performance Layer — LTTB downsampling, Redis query cache, WebSocket live streams

6. Template Gallery — Semver-versioned marketplace with ratings and one-click deployment

Core Concept

Datadog and Grafana do not render raw million-point time series to the browser. They downsample at query time (LTTB algorithm), cache aggregated buckets in Redis, and push deltas over WebSockets so the UI stays at 60fps. The insight most tutorials miss: the dashboard is a composition engine — widgets are independent data contracts, not hard-coded charts. Layout state (x, y, w, h) persists separately from widget config, enabling template reuse without duplicating query logic.

Where This Fits

Dashboard consumes aggregated metric samples upstream and presents the operator's primary control surface for fleet health.

Component Architecture

Project Layout

Once you open the project folder, here is how the code is organized. Think of it as three layers: the API (backend), the browser UI (frontend), and the scripts that wire everything together.

How the Pieces Work Together

Widget Grid. Dashboards store layout as JSON (x, y, w, h per widget). react-grid-layout handles drag-and-resize on the frontend. Layout saves via PUT /api/v1/dashboards/{id}/layout with optimistic versioning — the server returns HTTP 409 on version conflict.

Chart Pipeline. MetricsService.timeseries() buckets raw MetricSample rows into 5-minute windows, then applies LTTB downsampling when points exceed 1920. Results cache in Redis (60s TTL) before JSON serialization.

Cross-Filter and Drill-Down. Zustand store holds timeRange, services[], regions[], and drillPath[]. Progressive filter options come from /api/v1/filters/available. Drill-down navigates service → endpoint → region → environment via /api/v1/drilldown/navigate.

Template Marketplace. Templates store config: { layout, widgets, theme }. Instantiating creates a new Dashboard and Widget rows. Config changes bump semver (major if widget removed, minor if added, patch otherwise).

Real-Time Stream. WebSocket at /api/v1/performance/stream pushes metrics_batch every 3 seconds. The frontend useMetricsStream hook updates the live point counter in the Performance panel.

Control & Data Flow

1. Operator selects time range and cross-filters (service, region)

2. API checks Redis; cache misses query indexed metric_samples rows

3. LTTB reduces points to ≤1920 before JSON serialization

4. WebSocket pushes metric batches every 3s for live widgets

5. Drag-resize triggers versioned layout save (optimistic locking on conflict)

Widget Lifecycle

Operator Console

The UI follows a Grafana-inspired dark theme (#111217 background, #73BF69 accent). Four alternate themes ship with the project: light, ocean, and sunset.

Widget Types

API Reference

These are the endpoints you will call from the frontend or test with curl.

Dashboards

Charts

Filters, Drill-Down, Templates, and Sharing

Performance and Operations

Quick health check after the stack is running:

Build, Test, and Demo

Everything runs from inside the infrawatch-dashboard folder. Make the scripts executable once, then pick the mode that fits your machine.

Step 1 — Run Tests First

Always start here. If tests pass, your environment is wired correctly before you spin up services.