Kuadrant / Kuadrant/kuadrant-console-plugin
Overview Page: Migrate to Perses Metrics Panels and Add Observability Tab
- 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
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