Kuadrant / Kuadrant/kuadrant-console-plugin

Gateway View: Metrics Tab with Perses Panels

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

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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.