dashboard-templates

Dashboard Template Components

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.

When to Use This Skill

Use this skill when:

• Generating a list view for a CRD kind (use ResourceTable.tsx)
• Generating a detail/inspect view for a single CR (use ResourceInspect.tsx)
• Defining the TypeScript model for a specific CRD kind (use the matching .ts file)
• Adapting any reference component to a new operator's CRD schema

CRD Model Files (.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.ts

Purpose: 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.ts

Purpose: 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 are filtered by the matching involvedObject kind on the inspect page.