Kuadrant / Kuadrant/kuadrant-console-plugin

Overview Page: Migrate to Perses Metrics Panels and Add Observability Tab

Open
#220 2 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

Migrate the existing gateway traffic metrics from table-cell aggregate numbers to Perses panels, and add a new Observability tab with namespace-scoped aggregate views. All metrics visualization uses embedded [Perses](https://perses.dev/) panels.

The Overview page already has namespace scoping — both tabs inherit this. The Observability tab is the eagle-eye view showing aggregate metrics across all gateways in the namespace. Per-resource drill-down lives on the individual resource detail pages (Gateway → Metrics, HTTPRoute → Metrics, etc.).

This issue also establishes the shared Perses infrastructure reused by all subsequent metrics views across the plugin.

## Requirements

### Overview tab changes

Replace the current "Gateways - Traffic Analysis" table (which shows Total Requests, Successful Requests, Error Rate, Error Codes as numbers in table cells using `usePrometheusPoll`) with Perses panels showing the same data:

| Panel | Metric | Panel Type |
|-------|--------|-----------|
| Total Requests per Gateway | `sum by (source_workload) (increase(istio_requests_total[24h]))` | Perses StatChart per gateway |
| Successful Requests per Gateway | Total minus error responses | Perses StatChart per gateway |
| Error Rate per Gateway | Error responses as % of total | Perses StatChart with threshold coloring |
| Error Codes per Gateway | `istio_requests_total{response_code=~"[45].."}` by response code | Perses StatChart or table panel |

### New Observability tab

Add a horizontal nav to the Overview page: "Overview" (existing content with Perses panels) and "Observability" (new).

This is the **eagle-eye view** — namespace-scoped aggregates, no per-gateway or per-route filtering.

**Time-series panels (Perses TimeSeriesChart):**

| Panel | Metric |
|-------|--------|
| Request Rate | `sum(rate(istio_requests_total[5m]))` across all gateways in namespace |
| Latency Percentiles | `histogram_quantile(0.50/0.95/0.99)` on `istio_request_duration_milliseconds` across namespace |
| Error Rate by Code | `sum(rate(istio_requests_total{response_code=~"[45].."}[5m])) by (response_code)` across namespace |
| Rate Limiting | `sum(rate(authorized_calls[5m]))` vs `sum(rate(limited_calls[5m]))` across namespace |

**Stat panels (Perses StatChart):**

| Panel | Metric | Thresholds |
|-------|--------|------------|
| Rate Limiting Activity | limited as % of total decisions | Green <10%, Amber 10-25%, Red >25% |
| Policy Enforcement | `kuadrant_policies_enforced` / `kuadrant_policies_total` by kind | Green = 100%, Red < 100% |

**Controls:**
- Time range selector: 15m, 1h, 6h, 24h, 7d (default: 1h)
- Namespace scoping inherited from the page

### Perses foundation

This issue establishes the shared Perses infrastructure used by all subsequent metrics views:

**New packages:**
- `@perses-dev/components`
- `@perses-dev/plugin-system`
- `@perses-dev/timeseries-chart-plugin`
- `@perses-dev/prometheus-plugin`
- `@perses-dev/dashboards`
- `@tanstack/react-query`

**New shared components:**
```
src/components/metrics/
PersesProvider.tsx — shared provider wrapper
MetricsPanel.tsx — reusable panel component
MetricsTab.tsx — reusable tab layout (time range selector + panels grid)
StatPanel.tsx — stat chart wrapper
EmptyMetricsState.tsx — shared empty state
```

**Prometheus datasource:** Configure Perses to use the OCP console Prometheus proxy (`/api/prometheus`) as its datasource URL via `DatasourceStoreProvider`.

### Empty states
- Prometheus unavailable: "Metrics are not available. Ensure Prometheus is configured and the Kuadrant observability stack is enabled."
- No data: "No traffic data available. Metrics will appear once traffic flows through your gateways."

### Lazy loading
Perses + ECharts add significant bundle size. The Observability tab and its dependencies should be lazy-loaded so they only load when the user clicks the tab.

## Notes
- Removes the existing `usePrometheusPoll` + PatternFly table approach for the traffic analysis section
- Replaces the original QueryBrowser approach and mockup from this issue
- Requires React 18 upgrade (OCP 4.22+ only)

Contributor guide

Open the contributing guide

Research direction

Start by reading the Overview page's existing gateway traffic section and its usePrometheusPoll usage, then review the proposed src/components/metrics/ entry points and Perses package requirements. Done means the Overview panels, namespace-scoped Observability tab, shared provider components, time-range controls, empty states, Prometheus proxy configuration, and lazy loading are implemented as specified.

Written by the indexing model from the issue text.

Assessment

Tech stack
prometheus, react, typescript
Domain
frontend, observability
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Quiet
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.