TimelessMetrics UI — Requirements

Copy Markdown View Source

Separate hex package (timeless_ui) providing a Phoenix LiveView admin panel for TimelessMetrics. Follows the phoenix_live_dashboard pattern — optional, pluggable, zero impact on the core library.

Package Design

  • Name: timeless_ui
  • Depends on: timeless_metrics (core library), phoenix_live_view
  • Install: {:timeless_ui, "~> 0.1"} — people who don't want it, don't add it
  • Mount: pluggable into any Phoenix router
# In your Phoenix router:
import TimelessUI.Router

scope "/" do
  pipe_through [:browser, :admin_auth]
  timeless_dashboard "/timeless", store: :metrics
end

Features

Read-Only (config is infrastructure-as-code)

FeatureDescription
Schema viewerDisplay rollup tiers, resolutions, retention policies, rollup interval
Shard statusPer-shard DB size, segment count, watermarks, last flush time
Store healthSeries count, total points, storage bytes, bytes/point, buffer backlog
Rollup statusLast rollup time, tier watermarks, rows per tier, rollup duration
Retention statusLast cleanup time, rows purged, next scheduled run

Read-Write (operational data)

FeatureDescription
Alert managementCreate/edit/delete alert rules, view current state per series, test webhooks
Annotation managementCreate/delete annotations, view on timeline
Metadata editorRegister/update metric type, unit, description

Interactive

FeatureDescription
Series browserList all metrics, filter by name/labels, view label cardinality
Chart explorerInteractive metric charting with time range picker, aggregate selector, forecast/anomaly toggles
Query builderVisual query constructor → shows equivalent curl/Elixir code
Alert historyTimeline of alert state transitions (firing → resolved)

Pages

  1. Dashboard (/timeless) — overview: store health, active alerts, recent annotations, shard status summary
  2. Metrics (/timeless/metrics) — series browser with search, label filters, cardinality stats
  3. Explorer (/timeless/explorer) — interactive chart with controls for time range, aggregation, forecast, anomalies
  4. Alerts (/timeless/alerts) — alert rule CRUD, current states, firing history, webhook test button
  5. Annotations (/timeless/annotations) — annotation list with create/delete, timeline view
  6. Schema (/timeless/schema) — read-only view of tiers, retention, rollup config
  7. Health (/timeless/health) — per-shard details, DB sizes, watermarks, buffer stats

Authentication

Two modes:

  1. Inherit from core — if TIMELESS_BEARER_TOKEN is set, the UI requires the same token (passed via session cookie after initial auth)
  2. Phoenix auth pipeline — the user's existing auth (Guardian, pow, etc.) via pipe_through in the router

The UI should never bypass the core library's token auth when making API calls internally.

Technical Approach

  • LiveView for real-time updates (alert states, buffer backlog, health stats)
  • Server-rendered — no JS build step beyond LiveView's standard JS hooks
  • Tailwind CSS via CDN or inline styles (no build pipeline)
  • Charts: render using TimelessMetrics.Chart (the existing SVG renderer) embedded in LiveView
  • All data access through the public TimelessMetrics API — no direct DB access

API Surface Required from Core

The UI will need these functions from timeless (most already exist):

FunctionStatusNotes
TimelessMetrics.info/1ExistsStore health stats
TimelessMetrics.list_alerts/1ExistsAlert rules + states
TimelessMetrics.create_alert/2Exists
TimelessMetrics.delete_alert/2Exists
TimelessMetrics.evaluate_alerts/1ExistsManual trigger
TimelessMetrics.annotations/3ExistsQuery annotations
TimelessMetrics.annotate/3ExistsCreate annotation
TimelessMetrics.get_metadata/2Exists
TimelessMetrics.register_metric/4Exists
TimelessMetrics.query_aggregate_multi/4ExistsFor chart explorer
TimelessMetrics.forecast/4Exists
TimelessMetrics.detect_anomalies/4Exists
TimelessMetrics.get_schema/1ExistsRead schema config
TimelessMetrics.list_metrics/1NeededList all metric names
TimelessMetrics.list_series/2NeededList series for a metric with labels
TimelessMetrics.shard_stats/1NeededPer-shard DB size, segment counts, watermarks
TimelessMetrics.rollup_status/1NeededLast rollup time, duration, rows processed
TimelessMetrics.delete_annotation/2ExistsVia HTTP, may need Elixir API

Functions marked Needed would be added to the core library before building the UI.

Non-Goals (v1)

  • User management / RBAC (use reverse proxy or Phoenix auth)
  • Grafana datasource plugin (use the existing Prometheus-compatible endpoint)
  • Log viewer (TimelessMetrics is metrics only)
  • Distributed cluster management (future — see docs/timeless_global_registry.md)

Release Strategy

  • Separate hex package, separate git repo
  • Own version cadence independent of timeless_metrics core
  • Minimum timeless_metrics version pinned (e.g. ~> 0.3 once the needed API functions are added)
  • Phoenix 1.7+ / LiveView 0.20+ required