Dashboards

The Proxima Console frontend provides interactive metric dashboards at three levels: per-host, per-environment, and per-client.

Host Metrics Dashboard

Accessed from the host detail page. Shows all metrics collected from a single host.

Panels

The dashboard automatically discovers available metrics and renders them in organized sections:

Section	Metrics	Chart Type
CPU	cpu_usage_ratio, cpu_iowait_ratio, load averages	Area chart
Memory	memory_used_ratio, memory_used_bytes, memory_available_bytes, swap	Area chart
Disk Usage	disk_used_ratio (per partition)	Multi-series area chart
Disk I/O	disk_read_bytes_total, disk_written_bytes_total (per device, derivative)	Multi-series line chart
Network	network_receive_bytes_total, network_transmit_bytes_total (aggregated, derivative)	Area chart

Features

• Time range picker — Grafana-style popover with searchable quick presets (Last 15 minutes through Last 30 days, Today so far, Yesterday), absolute datetime inputs for custom ranges, and recently used ranges (stored in localStorage). Shift arrows (< / >) move the window by half its duration. The selected range is persisted to the URL (?from=now-1h&to=now) so it survives page refreshes and can be shared via links. A shared MetricsToolbar component renders the picker consistently across host, integration, and aggregate dashboards.
• Crosshair synchronization — Hovering on one chart shows a dashed reference line on all sibling charts at the same timestamp. Uses a shared CrosshairContext with 60ms throttle (Grafana EventBus pattern). Each chart publishes its hover timestamp; other charts render a ReferenceLine at that position.
• Drag-to-zoom — Click and drag on any chart to zoom into a specific time range. A ReferenceArea overlay provides visual feedback during the drag. The zoom is committed to the shared DashboardTimeRangeContext, so all charts on the dashboard zoom together. A "Reset Zoom" button returns to the relative time range. Zoom bounds are persisted to the URL (?from=...&to=...).
• Polling pause on zoom — Auto-refresh is disabled when the dashboard is in a zoomed (absolute time range) state, preventing the zoom from being reset on refetch.
• Series toggle — Click a legend item to isolate (solo) that series. Ctrl/Meta/Shift+click toggles individual series visibility without affecting others. A "Reset View" button restores all series. Toggle state persists in localStorage.
• Auto-refresh — Charts refresh every 60 seconds automatically (paused during zoom)
• Adaptive formatting — Values are formatted contextually:
  • Percentages: 45.2%
  • Bytes: 1.5 GB, 256 MB
  • Throughput: 12.3 MB/s
  • Bit rates: 95.4 Mb/s
• Gap detection — When data points are missing (gap > 2x expected interval), the chart disconnects the line to avoid misleading interpolation
• Docker container labels — Multi-series charts for Docker metrics extract container_name=... from label keys for readable legend entries instead of showing raw label strings

Environment / Client Dashboards

Accessed from the environment or client detail page. Shows averaged metrics across all hosts in the scope.

These dashboards use the same chart components and features as the host dashboard, but metrics are averaged across all hosts in the environment or client using MetricsQL avg() aggregation.

Integration Metrics

When a host has integration collectors configured (e.g., PostgreSQL), an additional Integrations tab appears on the host detail page.

• If multiple collectors of the same type exist, a picker allows selecting which collector's metrics to display
• Integration metrics are identified by the collector=<name> prefix in their labels_key
• Crosshair sync and drag-to-zoom work the same as on the host dashboard (shared DashboardProvider)
• See PostgreSQL Integration, Nginx Integration, and Docker Integration for available metrics

Dashboard Customization Slider

A collapsible right-side panel (280px) for customizing metric dashboards. Toggle it via the gear button in the metrics toolbar. The slider is available on Host, Environment, and Integration metrics pages.

Opening the Slider

• Click the Settings (gear) button in the MetricsToolbar
• The slider appears on the right and the charts area shrinks to accommodate it
• State (open/closed and section expand state) is persisted in localStorage

Configurable Panels

• Toggle visibility of metric chart groups and summary cards
• Reorder panels with up/down buttons
• Preferences are saved per page, keyed by dashboard-prefs:<pageKey>
• Reset to Default restores the original panel configuration

Threshold Lines

• Horizontal dashed lines on charts indicate warning (amber) and critical (red) levels
• Configurable per-metric via number inputs — displayed as percentages, stored internally as 0-1 ratio values
• Defaults: CPU, Memory, and Disk at 70% warning / 90% critical

Host Comparison (Host page only)

• Overlay up to 3 other hosts' metrics as dashed lines on each chart
• URL-shareable via ?compare=host-id-1,host-id-2
• Each comparison host uses a distinct color

Environment View Modes (Environment page only)

Three rendering modes for aggregated environment metrics:

• Averaged (default) — a single aggregated line across all hosts
• Per-Host Overlay — every host drawn as a separate line
• Heatmap — a colored grid where each cell represents one host, colored by metric value (green / amber / red)

Event Markers

• Vertical dashed lines on charts at event timestamps
• Sources include deploys and config changes (from the audit log), file changes (from change detection), and agent status changes
• Toggle individual event types on or off
• Backend endpoint: GET /api/v1/events/timeline

Time Comparison

• Toggle Show previous period with an offset selection: 1h, 6h, 24h, or 7d
• Current period renders as a solid line; the previous period renders as a faded dashed line

Custom Panels

Two modes for adding user-defined panels:

• Metric Picker — search the available metrics for a host or environment and add them as new chart panels
• Expression Editor — enter arbitrary MetricsQL expressions with custom labels

Custom panel queries are proxied through the backend via POST /api/v1/metrics/query, which applies tenant-scoped filtering before forwarding to VictoriaMetrics.

Annotation Notes

• Pin timestamped notes to charts
• Notes are displayed as purple dashed vertical markers
• Annotations are shared across the team
• Backend endpoints: POST /api/v1/annotations, GET /api/v1/annotations, DELETE /api/v1/annotations/{id}

Feature Availability by Page

Feature	Host	Environment	Integration
Panel Toggle/Reorder	✓	✓	✓
Thresholds	✓	✓	✓
Host Comparison	✓	-	-
View Modes	-	✓	-
Event Markers	✓	✓	✓
Time Compare	✓	✓	✓
Custom Panels	✓	✓	✓
Annotations	✓	✓	-

Dashboard Context

HostMetricsPanel, IntegrationMetricsPanel, and AggregateMetricsPanel all wrap their content with a DashboardProvider that provides two shared React contexts:

• DashboardTimeRangeContext — Manages the time range as string expressions (from/to — e.g. "now-3h" / "now" for relative, ISO strings for absolute). Computes rangeHours (for step calculation), startISO/endISO (resolved boundaries), and isZoomed (true when both bounds are absolute). Provides setTimeRange, shiftRange, zoomTo, resetZoom. The time range is persisted to URL search params (?from=...&to=...).
• CrosshairContext — Manages the shared hover timestamp and panel ID. Charts publish their hover position; sibling charts consume it to render synchronized crosshair lines.

All dashboard hooks (useMetricDashboard, useIntegrationMetricDashboard, useAggregateMetricDashboard) accept options.startISO, options.endISO, and options.refetchInterval from the dashboard context. When zoomed, the absolute range overrides the relative expressions and auto-refresh is disabled.

Data Fetching

The useMetricDashboard hook implements a two-phase fetch strategy:

1. Discovery — Call GET /hosts/:id/metrics to find all available metric names, intersect with configured METRIC_GROUPS
2. Parallel fetch — For each metric, discover series (via GET /hosts/:id/metrics/:name/series) and fetch data for each labels_key in parallel

Network metrics skip series discovery and fetch aggregated data directly (backend aggregates across interfaces when labels_key is empty).

API Endpoints Used

Dashboard Level	List Metrics	Query Data	List Series
Host	GET /hosts/:id/metrics	GET /hosts/:id/metrics/:name	GET /hosts/:id/metrics/:name/series
Environment	GET /environments/:id/metrics	GET /environments/:id/metrics/:name	GET /environments/:id/metrics/:name/series
Client	GET /clients/:id/metrics	GET /clients/:id/metrics/:name	GET /clients/:id/metrics/:name/series

All data endpoints accept start, end, labels_key, and derivative query parameters.