Kuadrant / Kuadrant/kuadrant-console-plugin
Gateway 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 Gateway details page showing per-gateway traffic metrics using embedded Perses panels. This is the drill-down from the Overview Observability tab — when the eagle-eye view shows something is wrong, you click into a specific gateway to investigate.
Depends on the shared Perses infrastructure established in #220.
## Requirements
### New Metrics tab
Add a `console.tab/horizontalNav` on `Gateway` (`gateway.networking.k8s.io/v1`):
- Tab name: "Metrics"
- Tab href: `metrics`
**Panels:**
| Panel | Metric | Panel Type |
|-------|--------|-----------|
| Request Rate | `sum(rate(istio_requests_total{source_workload=~""}[5m]))` | TimeSeriesChart |
| Latency Percentiles | `histogram_quantile(0.50, rate(istio_request_duration_milliseconds_bucket{source_workload=~""}[5m]))` (repeat for p95, p99) | TimeSeriesChart (3 lines: p50, p95, p99) |
| Error Rate by Code | `sum(rate(istio_requests_total{source_workload=~"", response_code=~"[45].."}[5m])) by (response_code)` | TimeSeriesChart stacked |
| Rate Limiting | `sum(rate(authorized_calls[5m]))` vs `sum(rate(limited_calls[5m]))` scoped to gateway | TimeSeriesChart (2 series) |
**Controls:**
- Time range selector: 15m, 1h, 6h, 24h, 7d (default: 1h)
### Gateway identification
Uses `buildGatewayKey(namespace, name, workloadSuffix)` from existing `metricsQueries.ts` to match the `source_workload` label in Prometheus. The workload suffix is configurable via `METRICS_WORKLOAD_SUFFIX` (default: `-openshift-default`).
### Empty states
- No traffic data: "No traffic data available for this gateway. Metrics will appear once traffic flows through this gateway."
- 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 reviewing the shared Perses infrastructure and EmptyMetricsState from #220, then inspect metricsQueries.ts and the Gateway console.tab/horizontalNav entry point. Implement the Metrics tab with the specified panels, controls, gateway key, and empty states, and verify that each panel is scoped to the gateway and displays the required traffic metrics.
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
- 52/100