Kuadrant / Kuadrant/kuadrant-console-plugin
Gateway Backends Tab: Metrics with Perses Panels
- Dominant language
- TypeScript
- Stars
- 10
- Forks
- 65
- Avg merge
- 2d 8h
- Merged PRs (30d)
- 44
Description
## Context
Add per-backend metrics to the Gateway Backends tab showing all backend services behind a specific gateway side by side. This answers: "Which of my backends is slow or erroring?" — a comparison view you can't get from the single-route HTTPRoute Metrics tab.
Depends on #222 (Gateway Backends page) and the shared Perses infrastructure established in #220.
## Requirements
### Panels
| Panel | Metric | Panel Type |
|-------|--------|-----------|
| Request Rate per Backend | `sum(rate(istio_requests_total{destination_service_name=~"\|\|...", source_workload=~""}[5m])) by (destination_service_name)` | TimeSeriesChart with one line per backend |
| Latency per Backend (p95) | `histogram_quantile(0.95, sum(rate(istio_request_duration_milliseconds_bucket{destination_service_name=~"\|\|...", source_workload=~""}[5m])) by (destination_service_name, le))` | TimeSeriesChart with one line per backend |
| Error Rate per Backend | `sum(rate(istio_requests_total{destination_service_name=~"\|\|...", source_workload=~"", response_code=~"[45].."}[5m])) by (destination_service_name) / sum(rate(istio_requests_total{destination_service_name=~"\|\|...", source_workload=~""}[5m])) by (destination_service_name) * 100` | TimeSeriesChart with one line per backend |
**Controls:**
- Time range selector: 15m, 1h, 6h, 24h, 7d (default: 1h)
### Backend discovery
Backends are discovered from the HTTPRoutes attached to this gateway:
1. Watch all HTTPRoutes in the namespace
2. Filter to routes whose `status.parents[].parentRef` matches this gateway
3. Collect unique `spec.rules[].backendRefs[].name` values across all matched routes
4. Build a regex alternation (`service-a|service-b|service-c`) for the `destination_service_name` label
### Scoping to this gateway
All queries include `source_workload=~""` to ensure only traffic flowing through this specific gateway is shown, not traffic to the same backends from other gateways.
### Empty states
- No backends found: "No backends found for this gateway. Backends will appear once HTTPRoutes with backend references are attached."
- No traffic data: "No traffic data available. Metrics will appear once traffic flows through the backends."
- Prometheus unavailable: shared `EmptyMetricsState` component from #220
## Notes
- Replaces original QueryBrowser approach — now using Perses
- Requires React 18 upgrade (OCP 4.22+ only)
Contributor guide
Research direction
Start by reading the Gateway Backends page from #222 and the shared Perses infrastructure and EmptyMetricsState component from #220. Trace how attached HTTPRoutes and backend references are discovered, then verify the three per-backend panels, gateway scoping, time-range control, and empty states against the stated requirements.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- prometheus, react, typescript
- Domain
- frontend, observability
- Issue type
- Feature
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Quiet
- Clarity
- Mostly clear
- Newbie friendliness
- 55/100