Kuadrant / Kuadrant/kuadrant-console-plugin
API Product View: Traffic Tab with Perses Panels
- Dominant language
- TypeScript
- Stars
- 10
- Forks
- 65
- Avg merge
- 2d 8h
- Merged PRs (30d)
- 44
Description
## Context
Add a Traffic tab to the API Product details page showing consumer-focused metrics using embedded Perses panels. This gives API owners and consumers visibility into how the API is being used.
Depends on the shared Perses infrastructure established in #220.
## Requirements
### New Traffic tab
Add a `console.tab/horizontalNav` on `APIProduct` (`devportal.kuadrant.io/v1alpha1`):
- Tab name: "Traffic"
- Tab href: `traffic`
**Panels:**
| Panel | Metric | Panel Type |
|-------|--------|-----------|
| Traffic (last hour) | `rate(istio_requests_total{destination_service_name=""}[5m])` scoped to target HTTPRoute | TimeSeriesChart (compact) |
| Request Rate | `sum(rate(istio_requests_total{destination_service_name=""}[5m]))` | StatChart (req/s) |
| Success Rate | `1 - (sum(rate(istio_requests_total{destination_service_name="", response_code!~"2..\|3.."}[5m])) / sum(rate(istio_requests_total{destination_service_name=""}[5m]))) * 100` | StatChart with threshold coloring (Green >99%, Amber 95-99%, Red <95%) |
| Rate Limit Usage | `sum(rate(limited_calls[5m])) / (sum(rate(authorized_calls[5m])) + sum(rate(limited_calls[5m]))) * 100` scoped to this route | GaugeChart |
### APIProduct-to-HTTPRoute resolution
The APIProduct's `spec.targetRef` references an HTTPRoute. The component needs to:
1. Read the APIProduct to get the target HTTPRoute name/namespace
2. Read the HTTPRoute to get `spec.rules[].backendRefs[].name` (the destination service)
3. Use the service name to scope the PromQL queries via `destination_service_name` label
### Empty states
- No target HTTPRoute: "This API Product has no target HTTPRoute configured."
- No traffic data: "No traffic data available. Metrics will appear once traffic flows through this API."
- Prometheus unavailable: shared `EmptyMetricsState` component from #220
Contributor guide
Research direction
Start with the shared Perses infrastructure established in #220 and the APIProduct console.tab/horizontalNav configuration. Trace spec.targetRef from the APIProduct to the HTTPRoute backend service, then review the shared EmptyMetricsState for the required empty states. Done means the Traffic tab renders all four scoped panels and handles missing routes, absent traffic, and unavailable Prometheus.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- prometheus, typescript
- Domain
- frontend, observability
- Issue type
- Feature
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Quiet
- Clarity
- Mostly clear
- Newbie friendliness
- 58/100