A compact status card for a single Kubernetes ingress resource, showing domain, TLS certificate expiry, health status, and request rate. Displays a warning badge when the certificate expires within 30 days. Complements the existing IngressCertificatePostureStrip which shows a grid of multiple ingress entries.
Introduction
Overview
SRE teams need at-a-glance visibility into ingress health for individual services. The existing IngressCertificatePostureStrip renders a grid of multiple entries but lacks request-rate data and single-card focus. This widget provides a detailed single-ingress view with health, certificate status, and traffic metrics.
Goals
Display a single ingress resource’s domain, TLS cert expiry, health, and request rate.
Show a warning badge when the TLS certificate expires within 30 days.
Show an error badge when the certificate is expired.
Include request-rate metric with trend indicator.
Ship Storybook stories for healthy, expiring, expired, and unhealthy states.
Non-Goals
Ingress configuration or editing.
Certificate renewal execution (consumer handles via callback).
Multi-ingress grid view (handled by IngressCertificatePostureStrip).
Detailed request logs or traffic analysis.
Scope
In Scope
Item
Description
IngressStatusCard component
Single-card view of ingress health and cert status
Domain display
Primary hostname
TLS cert expiry
Days until expiration with urgency badge
Health status
Badge showing healthy/degraded/down
Request rate
Current requests/sec with optional trend arrow
Warning badge
Automatically shown when cert expires within configurable threshold
Need quick visibility into individual ingress health during incidents
Definitions
Term
Definition
Ingress
A Kubernetes resource that manages external access to services
TLS certificate
The SSL/TLS certificate securing HTTPS traffic for the domain
Request rate
The number of HTTP requests per second hitting the ingress
Health status
The operational state of the ingress (healthy, degraded, down)
Current State
ingress-certificate-posture-strip.tsx renders a grid of IngressCertificateEntry cards showing host, certificate name, issuer, expiry, routes, and status. It uses IngressCertificateStatus (healthy, expiring, expired, misconfigured). It does not include request-rate data or single-card focus.
Proposed Solution
Create an IngressStatusCard widget at src/components/widgets/sre-devops/ingress-status-card.tsx that:
Accepts an IngressStatus object with domain, cert expiry, health, and request rate.
Renders a compact card with domain as the primary label.
Shows TLS cert expiry as days remaining with automatic urgency badge.
Displays health status as a semantic badge.
Shows request rate with an optional trend indicator (up/down/stable).
Automatically shows a warning when cert expires within certWarningDays (default 30).
Requirements
The card must calculate cert-expiry urgency from the expiry date. It must visually match the existing IngressCertificatePostureStrip styling for consistency.
Functional Requirements
ID
Requirement
Priority
FR-01
Display the ingress domain as the card’s primary label
Must
FR-02
Show TLS certificate expiry as “X days” with urgency badge
Must
FR-03
Show warning badge when cert expires within certWarningDays (default 30)
Must
FR-04
Show error badge when cert is expired
Must
FR-05
Display health status badge (healthy, degraded, down)
Must
FR-06
Display current request rate (e.g., “1.2k req/s”)
Must
FR-07
Show trend indicator (up arrow, down arrow, or dash for stable)
Should
FR-08
Show certificate issuer name
Should
FR-09
Call onRenewCert callback when a renewal action is triggered
Should
FR-10
Call onViewDetails for navigation to a detailed ingress view
Should
FR-11
Support a loading prop with skeleton content
Should
Non-Functional Requirements
ID
Requirement
NFR-01
Bundle size under 2 KB gzipped
NFR-02
Full light/dark theme support
NFR-03
Card renders within one frame
API / Interface Requirements
type IngressHealth ="healthy"|"degraded"|"down";
type RequestTrend ="up"|"down"|"stable";
interface IngressStatus {
domain:string;
certExpiresAt:string; // ISO 8601 date
certIssuer?:string;
health:IngressHealth;
requestsPerSecond:number;
requestTrend?:RequestTrend;
routes?:number;
}
interface IngressStatusCardProps {
ingress:IngressStatus;
certWarningDays?:number; // default 30
loading?:boolean;
onRenewCert?:()=>void;
onViewDetails?:()=>void;
className?:string;
}
Accessibility Requirements
ID
Requirement
A11Y-01
Card uses <article> with aria-label including domain name
A11Y-02
Status badges have accessible text labels
A11Y-03
Cert expiry urgency is conveyed via text, not just color
A11Y-04
Trend arrows have aria-label (e.g., “trending up”)
A11Y-05
Action buttons have descriptive aria-label
Content and Documentation Requirements
Storybook doc page explaining relationship to IngressCertificatePostureStrip.