Kuadrant / Kuadrant/kuadrant-console-plugin
TokenRateLimitPolicy 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 TokenRateLimitPolicy details page showing token-based rate limiting metrics using embedded Perses panels. This answers: "Are consumers hitting token limits? How many tokens are being consumed?"
Depends on the shared Perses infrastructure established in #220.
## Requirements
### New Metrics tab
Add a `console.tab/horizontalNav` on `TokenRateLimitPolicy` (`kuadrant.io/v1alpha1`):
- Tab name: "Metrics"
- Tab href: `metrics`
**Panels:**
| Panel | Metric | Panel Type |
|-------|--------|-----------|
| Token Consumption Over Time | `sum(rate(authorized_hits{limitador_namespace="/"}[5m]))` | TimeSeriesChart |
| Requests vs Tokens | `sum(rate(authorized_calls{limitador_namespace="/"}[5m]))` and `sum(rate(authorized_hits{limitador_namespace="/"}[5m]))` | TimeSeriesChart (2 series: requests, tokens) |
| Rejected Requests | `sum(rate(limited_calls{limitador_namespace="/"}[5m]))` | TimeSeriesChart |
| Token Reports | `sum(rate(report_calls{limitador_namespace="/"}[5m]))` | StatChart (reports/s) |
| Rejection Rate | `sum(rate(limited_calls[5m])) / (sum(rate(authorized_calls[5m])) + sum(rate(limited_calls[5m]))) * 100` scoped to this policy | GaugeChart |
**Controls:**
- Time range selector: 15m, 1h, 6h, 24h, 7d (default: 1h)
### Token vs counter rate limiting
TokenRateLimitPolicy uses Limitador's `report` RPC instead of `check_rate_limit`. Key differences from RateLimitPolicy (#639):
- `authorized_hits` reflects actual token counts (e.g. LLM `usage.total_tokens`) — much larger than `authorized_calls`
- `report_calls` tracks token reporting operations (unique to token-based limiting)
- The `report` endpoint always returns OK — enforcement happens at the prior `check_rate_limit` call
### Limitador namespace scoping
The `limitador_namespace` label format is `"{k8s_namespace}/{route_name}"`. To scope to a specific TokenRateLimitPolicy, the target HTTPRoute's namespace and name must be resolved from the policy's `targetRef`.
With `telemetry: exhaustive` on the Limitador CR, `limited_calls` includes a `limit_name` label for per-limit breakdown.
### Empty states
- No token data: "No token rate limiting metrics available. Metrics will appear once requests are evaluated against this policy."
- Prometheus unavailable: shared `EmptyMetricsState` component from #220
## Notes
- Requires React 18 upgrade (OCP 4.22+ only)
Contributor guide
Research direction
Start at the TokenRateLimitPolicy details page and review the shared Perses infrastructure established in #220, including the EmptyMetricsState component. Trace the policy targetRef to the HTTPRoute namespace and name, then verify that the Metrics tab, five scoped panels, time-range controls, and both empty states match the requirements.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- frontend, observability
- Issue type
- Feature
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Quiet
- Clarity
- Mostly clear
- Newbie friendliness
- 48/100