generate-dashboard

Name

operator-dashboard:generate-dashboard

Synopsis

/operator-dashboard:generate-dashboard <operator-name> [--namespace <ns>] [--output-dir <dir>]

Description

This command adds a new operator to an OpenShift Console dynamic plugin. It discovers the operator's CRDs via cluster API (e.g. oc api-resources), then generates the dashboard page, one table component per resource kind using the shared ResourceTable pattern, operator CSS, and extends ResourceInspect for the detail view. Optional parameters allow scoping to a namespace and writing output to a custom directory. The template components in skills/dashboard-templates/ define the CRD models (.ts) and list/detail UI components (ResourceTable, ResourceInspect) that are adapted to the target operator's API group, version, kind, and printer columns.

Implementation

Before starting, read the skill at skills/dashboard-templates/SKILL.md. It documents every template component, explains when to use each one, and describes the patterns to follow when adapting them to a new operator's CRDs.

CRITICAL: What NOT to Do

Before implementing, review these common mistakes that break dashboard quality:

Button & Actions:

• ❌ DO NOT create inline ResourceTableRowActions components in table files
• ❌ DO NOT use plain <button> tags — use PatternFly <Button> component
• ❌ DO NOT put className on <Link> wrapper — put it on <Button>
• ❌ DO NOT add custom background-color/border-color CSS for buttons
• ❌ DO NOT call useDeleteModal inside .map() loops
• ❌ DO NOT forget the Delete button — users need to delete resources!
• ✅ DO use <Button variant="primary"> for Inspect (blue)
• ✅ DO use <Button variant="danger"> for Delete (red)
• ✅ DO import and use shared ResourceTableRowActions from ./ResourceTable

PatternFly 6 APIs:

• ❌ DO NOT use old CSS variable format --pf-v6-global--*
• ❌ DO NOT use old EmptyState API with child <Title> component
• ❌ DO NOT use date={new Date(...)} with Timestamp
• ❌ DO NOT use variant prop for Label status colors
• ✅ DO use token variables --pf-t--global--* (PatternFly 6 semantic tokens)
• ✅ DO use EmptyState props: titleText, icon={SearchIcon}, headingLevel
• ✅ DO use timestamp={resource.metadata?.creationTimestamp} with Timestamp
• ✅ DO use Label status prop: status="success|danger|warning"