Kuadrant / Kuadrant/kuadrant-console-plugin
GRPCRoute 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 GRPCRoute details page showing per-route traffic metrics using embedded Perses panels. Same pattern as the HTTPRoute Metrics tab (#533) — `istio_requests_total` covers gRPC traffic.
Depends on the shared Perses infrastructure established in #220.
## Requirements
### New Metrics tab
Add a `console.tab/horizontalNav` on `GRPCRoute` (`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 |
**Controls:**
- Time range selector: 15m, 1h, 6h, 24h, 7d (default: 1h)
### Route-to-service mapping
Same as HTTPRoute — the GRPCRoute's `spec.rules[].backendRefs[].name` provides the backend service name. If multiple backend refs, aggregate across all.
### No auth panel
Unlike HTTPRoute, no Auth Decisions panel — AuthPolicy targets HTTPRoutes not GRPCRoutes.
### 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
- Requires React 18 upgrade (OCP 4.22+ only)
Contributor guide
Research direction
Start by reading the existing HTTPRoute Metrics tab from #533 and the shared Perses infrastructure and EmptyMetricsState from #220, then inspect the GRPCRoute details page. Done means a Metrics tab maps backendRefs to the specified panels and time ranges, handles empty states, and omits the Auth Decisions panel.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- kubernetes, react, typescript
- Domain
- frontend, observability
- Issue type
- Feature
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Quiet
- Clarity
- Mostly clear
- Newbie friendliness
- 52/100