Kuadrant / Kuadrant/kuadrant-console-plugin

Gateway Backends Tab: Metrics with Perses Panels

Open
#514 0 comments 0 reactions 0 assignees View on GitHub
enhancement triage/accepted
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.