Kuadrant / Kuadrant/kuadrant-console-plugin

HTTPRoute View: Metrics Tab with Perses Panels

Open
#533 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 Metrics tab to the HTTPRoute details page showing per-route traffic and auth metrics using embedded Perses panels. This is the next level of drill-down from the Gateway Metrics tab — isolate whether the problem is a specific route or the gateway above it.

Depends on the shared Perses infrastructure established in #220.

## Requirements

### New Metrics tab

Add a `console.tab/horizontalNav` on `HTTPRoute` (`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 |
| Auth Decisions | `sum(rate(auth_server_authconfig_response_status{authconfig="", namespace=""}[5m])) by (status)` | TimeSeriesChart stacked (OK / UNAUTHENTICATED / PERMISSION_DENIED) |

**Controls:**
- Time range selector: 15m, 1h, 6h, 24h, 7d (default: 1h)

### Route-to-service mapping

The HTTPRoute's `spec.rules[].backendRefs[].name` provides the backend service name used as the `destination_service_name` label in PromQL. If a route has multiple backend refs, aggregate across all of them.

### Auth panel visibility

The Auth Decisions panel is only shown when an AuthPolicy targets this HTTPRoute. Check via `useK8sWatchResource` for AuthPolicy resources with a matching `spec.targetRef` pointing to this HTTPRoute.

### 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
- Replaces original QueryBrowser approach — now using Perses
- Requires React 18 upgrade (OCP 4.22+ only)

Contributor guide

Open the contributing guide

Research direction

Start by reading the shared Perses infrastructure established in #220 and the HTTPRoute details page. Trace the route backendRefs mapping and the useK8sWatchResource check for matching AuthPolicy resources. Done means a Metrics tab renders the specified route and conditional auth panels, supports the listed time ranges, and uses EmptyMetricsState when Prometheus is unavailable.

Written by the indexing model from the issue text.

Assessment

Tech stack
kubernetes, prometheus, react, typescript
Domain
frontend, observability-sre
Issue type
Feature
Difficulty
4/5
Estimated time
3-5 days
Activity status
Quiet
Clarity
Mostly clear
Newbie friendliness
52/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.