Kuadrant / Kuadrant/kuadrant-console-plugin

TLSPolicy View: Metrics Tab with Perses Panels

Open
#684 0 comments 0 reactions 0 assignees View on GitHub
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 TLSPolicy details page showing TLS certificate lifecycle metrics using embedded Perses panels. This answers: "Are my certificates valid? When do they expire? Are renewals on track?"

Depends on the shared Perses infrastructure established in #220.

## Requirements

### New Metrics tab

Add a `console.tab/horizontalNav` on `TLSPolicy` (`kuadrant.io/v1`):
- Tab name: "Metrics"
- Tab href: `metrics`

**Panels:**

| Panel | Metric | Panel Type |
|-------|--------|-----------|
| Certificate Ready Status | `certmanager_certificate_ready_status{namespace="", condition="True"}` scoped to certificates owned by this policy | StatChart (ready/not ready) |
| Time Until Expiry | `certmanager_certificate_expiration_timestamp_seconds{namespace="", name=""} - time()` | GaugeChart (days remaining) |
| Renewal Timeline | `certmanager_certificate_renewal_timestamp_seconds{namespace="", name=""}` | StatChart (next renewal date) |
| Certificate Validity Window | `certmanager_certificate_not_before_timestamp_seconds` and `certmanager_certificate_expiration_timestamp_seconds` | TimeSeriesChart (validity range) |
| Issuer Ready | `certmanager_issuer_ready_status{namespace="", condition="True"}` or `certmanager_clusterissuer_ready_status{condition="True"}` | StatChart |
| ACME Challenge Status | `certmanager_certificate_challenge_status{namespace=""}` | TimeSeriesChart by status |

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

### Certificate scoping

TLSPolicy creates Certificate resources via cert-manager. The mapping from TLSPolicy to its owned Certificate resources (by `name` and `namespace` labels) needs to be resolved. Cert-manager metrics also include `issuer_name`, `issuer_kind`, and `issuer_group` labels for filtering.

### Empty states
- No TLS data: "No TLS metrics available. Metrics will appear once certificates are managed by this policy."
- Prometheus unavailable: shared `EmptyMetricsState` component from #220

## Notes
- Requires React 18 upgrade (OCP 4.22+ only)
- cert-manager serves metrics on port 9402 `/metrics`; ensure Prometheus is scraping cert-manager

Contributor guide

Open the contributing guide

Research direction

Start at the TLSPolicy details page and inspect the console.tab/horizontalNav entry point, the shared Perses infrastructure from #220, and the EmptyMetricsState component. Trace how TLSPolicy-owned Certificates are identified, then verify the six panels, time-range controls, empty states, and cert-manager Prometheus scraping requirements are covered.

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
38/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.