Reference components for generating Kubernetes operator CRD dashboards
Read this before generating any dashboard component. It explains which template file to use for each component type and how to adapt it to a new operator's CRDs.
Use this skill when:
.ts files)These files define the TypeScript types and K8sGroupVersionKind models for each CRD kind. Use them as the starting point when modelling a new CRD's API group, version, kind, and optional spec/status interfaces.
Certificate.tsPurpose: Exports the K8sGroupVersionKind model for cert-manager's Certificate CRD. Used for operator detection and for useK8sWatchResource / useK8sModel.
Key interfaces: None (model only).
Model:
export const CertificateModel: K8sGroupVersionKind = {
group: 'cert-manager.io',
version: 'v1',
kind: 'Certificate',
};
Fields to adapt: Replace group, version, and kind with the target operator's values from oc api-resources (APIVERSION and KIND columns).
Events.tsPurpose: Core v1 Event model and a map from resource type (plural) to Kind for event involvedObject lookups; provides getInvolvedObjectKind(resourceType) for filtering events by resource.
Key interfaces:
export interface K8sEvent {
apiVersion?: string;
kind?: string;
metadata?: {
name?: string;
namespace?: string;
creationTimestamp?: string;
[key: string]: unknown;
};
type?: string;
reason?: string;
message?: string;
count?: number;
firstTimestamp?: string;
lastTimestamp?: string;
involvedObject?: {
kind?: string;
name?: string;
namespace?: string;
[key: string]: unknown;
};
}
Fields to adapt: Extend RESOURCE_TYPE_TO_KIND with plural: 'Kind' for each new resource type so events display correctly on the inspect page.
ExternalSecret.tsPurpose: K8sGroupVersionKind models for ExternalSecret and ClusterExternalSecret (external-secrets operator).
Key interfaces: None (models only).
Models: ExternalSecretModel, ClusterExternalSecretModel — group external-secrets.io, version v1beta1.
Fields to adapt: Replace group/version/kind with target operator's CRD. Use two models when the operator has both namespaced and cluster-scoped variants of the same kind.
Issuer.tsPurpose: K8sGroupVersionKind models for Issuer and ClusterIssuer (cert-manager).
Key interfaces: None (models only).
Models: IssuerModel, ClusterIssuerModel — group cert-manager.io, version v1.
Fields to adapt: Same as Certificate.ts; use for any operator that exposes namespaced and cluster-scoped kinds.
PushSecret.tsPurpose: K8sGroupVersionKind models for PushSecret and ClusterPushSecret (external-secrets operator).
Key interfaces: None (models only).
Fields to adapt: Replace group/version/kind with the target operator's API from cluster verification.
SecretProviderClass.tsPurpose: Models for SecretProviderClass and SecretProviderClassPodStatus (CSI secrets store); includes an interface for the pod status subresource used on the inspect page.
Key interfaces:
export interface SecretProviderClassPodStatus {
apiVersion?: string;
kind?: string;
metadata?: {
name?: string;
namespace?: string;
creationTimestamp?: string;
[key: string]: unknown;
};
status?: {
secretProviderClassName?: string;
podName?: string;
mounted?: boolean;
[key: string]: unknown;
};
}
Fields to adapt: Group/version/kind for both models. If the target operator has a similar “status” or pod-binding resource, add a parallel interface and model.
SecretStore.tsPurpose: K8sGroupVersionKind models for SecretStore and ClusterSecretStore (external-secrets operator).
Key interfaces: None (models only).
Fields to adapt: Replace group/version/kind with values from oc api-resources.
.tsx files)ResourceTable.tsxPurpose: Shared table for listing CRs of a given kind. Renders loading (three-dot loader), error Alert, empty EmptyState, or a plain table with thead/tbody. Accepts columns and rows (cells as React nodes).
Use when: Displaying a list of CRs of a given kind in a table on the operator dashboard.
Key patterns:
{ title, width? }; last column is typically Actions.{ cells: React.ReactNode[] }; build from useK8sWatchResource list; Name cell uses <Link to={inspectHref}>, Actions cell uses ResourceTableRowActions (so useDeleteModal is per row).loading is true; error: show Alert; empty: show EmptyState with titleText and EmptyStateBody; selectedProject used for project-aware empty message.Props interface:
interface Column {
title: string;
width?: number;
}
interface Row {
cells: React.ReactNode[];
}
interface ResourceTableProps {
columns: Column[];
rows: Row[];
loading?: boolean;
error?: string;
emptyStateTitle?: string;
emptyStateBody?: string;
selectedProject?: string;
'data-test'?: string;
}
How to adapt:
console-plugin-template__table) and PatternFly variables; do not use co-m-* or inline styles in the consuming plugin.ResourceInspect.tsxPurpose: Shared resource detail (inspect) page: Card + Grid layout with back button, Metadata, Labels, Annotations, Specification, Status, Events (and optional Pod Statuses for SecretProviderClass). Parses URL for resourceType, namespace, name; uses getResourceModel(resourceType) and getPagePath(resourceType); supports optional “Show/Hide sensitive data” for spec/status.
Use when: Displaying the full detail view for a single CR instance at /<operator-short-name>/inspect/<plural>/[namespace/]<name>.
Key patterns:
inspect for resourceType; then either namespace + name (namespaced) or name only (cluster-scoped).Props interface: None (component uses URL and hooks only).
How to adapt:
'/cert-manager').useK8sWatchResource({ groupVersionKind, namespace?, isList: true }); use loaded and loadError for loading/error; build rows from the list.useK8sWatchResource({ groupVersionKind, name, namespace?, isList: false }); same loading/error handling.useK8sModel({ group, version, kind }); returns [model, inFlight]; check if (inFlight) return 'loading'.<Label> with status prop for status/conditions: status="success" (green), status="danger" (red), status="warning" (orange). Do not use variant for status colors.status.conditions (e.g. type=Ready); map to success/danger/warning as appropriate.| What you need | Use this file |
|---|---|
| Type model for a known CRD kind | The matching .ts file (e.g. Certificate.ts) |
| Type model for a new/unknown CRD kind | Use the most structurally similar .ts file as a base (same group/version pattern or namespaced+cluster pair) |
| List view of CRs | ResourceTable.tsx |
| Detail view of a single CR | ResourceInspect.tsx |