Kuadrant / Kuadrant/kuadrant-console-plugin

API Product View: Traffic Tab with Perses Panels

Open
#536 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 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

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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.