Metrics dashboard

[trean]

This pull request introduces a new latency heatmap visualization and refactors the metrics charting components to improve user experience while viewing metric data. It adds a new dependency for matrix charts, introduces a reusable overlay for data collection states, and implements two new React components: LatencyHeatmap for visualizing latency distributions and MetricChart for rendering time-series metrics. The most important changes are:

New charting capabilities:

• Added the chartjs-chart-matrix dependency to package.json to support matrix (heatmap) charts.

Reusable UI components:

• Introduced CollectingOverlay (src/components/Metrics/CollectingOverlay.jsx), a centered overlay with a spinner and label, to indicate when metric data is still being collected and not yet ready for display.

New metric visualizations:

• Implemented LatencyHeatmap (src/components/Metrics/LatencyHeatmap.jsx), a React component that renders a latency distribution heatmap using the matrix chart type. It visualizes response time buckets over time, with dynamic color scaling and a legend, and uses the CollectingOverlay when not enough data is available.
• Implemented MetricChart (src/components/Metrics/MetricChart.jsx), a flexible time-series line chart for one or more metric series, supporting aggregation, per-series coloring, legends, and the CollectingOverlay for empty states.

[Copilot]

🟡 Changes recommended

The aggregated request-rate chart can produce incorrect spike artifacts when some constituent series are missing, and there are also smaller correctness/staleness issues in the metrics polling/mocks that should be fixed before approval.

Once you've addressed the issues Copilot identified, you can request another Copilot review.

Pull request overview

This PR adds a new Metrics dashboard page to the Qdrant Web UI, including a Prometheus /metrics text parser, a polling/history hook, and new Chart.js visualizations (time-series + latency heatmap) to improve the UX for observing live metric behavior.

Changes:

• Introduces a /metrics route and sidebar navigation entry for a new Metrics page/dashboard.
• Adds Prometheus text parsing + formatting utilities and a polling/history hook to build client-side time-series from point-in-time metrics.
• Implements new Metrics UI components (request-rate chart, latency heatmap, resource tiles) and updates mock handlers/data to serve /metrics in text format; adds chartjs-chart-matrix dependency.

File summaries

File	Description
src/routes.jsx	Adds the /metrics route to the app router.
src/pages/Metrics.jsx	New page wrapper rendering the MetricsDashboard within the app layout.
src/mocks/handlers/base.js	Adds MSW handler for /metrics returning Prometheus text; expands mock collections list usage.
src/mocks/data.js	Adds multi-collection mock constants and a Prometheus /metrics text generator.
src/lib/tests/metrics-parser.test.js	Adds Vitest coverage for Prometheus parsing, series utilities, and formatting helpers.
src/lib/metrics-parser.js	Implements Prometheus text parsing, series keying, unit detection, and value formatting for charts.
src/hooks/useMetricsHistory.js	Adds polling + in-browser time-series accumulation for /metrics (global vs per-collection buffers).
src/components/Sidebar/Sidebar.jsx	Adds a “Metrics” sidebar entry linking to the new page.
src/components/Metrics/CollectingOverlay.jsx	New reusable overlay for “collecting data” empty/initial chart states.
src/components/Metrics/LatencyHeatmap.jsx	New matrix/heatmap visualization for histogram bucket rates over time.
src/components/Metrics/MetricChart.jsx	New reusable time-series line chart (supports counters-as-rate, aggregation, legend).
src/components/Metrics/MetricsDashboard.jsx	Main dashboard UI: tabs, scope controls, stat tiles, charts, and derived request/resource stats.
src/components/Metrics/MetricsScope.jsx	Scope toggle (global vs per-collection) plus collection selector UI.
src/components/Metrics/PanelCard.jsx	New titled card wrapper used for dashboard panels.
src/components/Metrics/PollIntervalSelect.jsx	Poll cadence selector component + option constants.
src/components/Metrics/StatTile.jsx	Big-number “headline metric” tile used in dashboard summaries.
src/components/Metrics/colors.js	Theme-based series color helper for chart datasets.
package.json	Adds chartjs-chart-matrix dependency for heatmap charts.
package-lock.json	Locks chartjs-chart-matrix and related dependency graph updates.

Review details

• Files reviewed: 18/19 changed files
• Comments generated: 3
• Review effort level: Lite

---

💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.

[Copilot]

🔵 Needs a closer look

The heatmap chart is recreated on every poll due to effect dependencies, which is a significant performance/UX issue for a live-updating dashboard.

Review details

Suppressed comments (1)

Previously missed (1) — in code that hasn't changed since the last review.

src/components/Metrics/LatencyHeatmap.jsx:212

• The heatmap chart is destroyed/recreated on every poll because the chart-creation effect depends on matrix (which changes whenever history changes). This can cause flicker, lose hover/tooltip state, and add significant CPU/memory overhead over long sessions. Consider creating the Chart instance only when bucket structure/theme changes, and updating chart.data.datasets[0].data + scale labels/colors in a separate effect when matrix updates.

• Files reviewed: 18/19 changed files
• Comments generated: 0 new
• Review effort level: Lite