Kuadrant / Kuadrant/kuadrant-console-plugin
HTTPRoute View: Metrics Tab with Perses Panels
- Dominant language
- TypeScript
- Stars
- 10
- Forks
- 65
- Avg merge
- 2d 8h
- Merged PRs (30d)
- 44
Description
## Context
Add a Metrics tab to the HTTPRoute details page showing per-route traffic and auth metrics using embedded Perses panels. This is the next level of drill-down from the Gateway Metrics tab — isolate whether the problem is a specific route or the gateway above it.
Depends on the shared Perses infrastructure established in #220.
## Requirements
### New Metrics tab
Add a `console.tab/horizontalNav` on `HTTPRoute` (`gateway.networking.k8s.io/v1`):
- Tab name: "Metrics"
- Tab href: `metrics`
**Panels:**
| Panel | Metric | Panel Type |
|-------|--------|-----------|
| Request Rate | `sum(rate(istio_requests_total{destination_service_name=""}[5m]))` | TimeSeriesChart |
| Latency Percentiles | `histogram_quantile(0.50, rate(istio_request_duration_milliseconds_bucket{destination_service_name=""}[5m]))` (repeat for p95, p99) | TimeSeriesChart (3 lines: p50, p95, p99) |
| Error Rate by Code | `sum(rate(istio_requests_total{destination_service_name="", response_code=~"[45].."}[5m])) by (response_code)` | TimeSeriesChart stacked |
| Auth Decisions | `sum(rate(auth_server_authconfig_response_status{authconfig="", namespace=""}[5m])) by (status)` | TimeSeriesChart stacked (OK / UNAUTHENTICATED / PERMISSION_DENIED) |
**Controls:**
- Time range selector: 15m, 1h, 6h, 24h, 7d (default: 1h)
### Route-to-service mapping
The HTTPRoute's `spec.rules[].backendRefs[].name` provides the backend service name used as the `destination_service_name` label in PromQL. If a route has multiple backend refs, aggregate across all of them.
### Auth panel visibility
The Auth Decisions panel is only shown when an AuthPolicy targets this HTTPRoute. Check via `useK8sWatchResource` for AuthPolicy resources with a matching `spec.targetRef` pointing to this HTTPRoute.
### Empty states
- No traffic data: "No traffic data available for this route. Metrics will appear once traffic flows through this route."
- 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 shared Perses infrastructure established in #220 and the HTTPRoute details page. Trace the route backendRefs mapping and the useK8sWatchResource check for matching AuthPolicy resources. Done means a Metrics tab renders the specified route and conditional auth panels, supports the listed time ranges, and uses EmptyMetricsState when Prometheus is unavailable.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- kubernetes, prometheus, react, typescript
- Domain
- frontend, observability-sre
- Issue type
- Feature
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Quiet
- Clarity
- Mostly clear
- Newbie friendliness
- 52/100