Improve UX for CRs

[gberche-orange]

Expected behavior

As an headlamp user
In order to list/read/edit/update/delete custom resources
I need headlamp to make it as easy to deal with CR than with built-in K8S resources

See related screenshots of current similar support in lens that leverages the CRDs additionalPrinterColumns to display the CR fields to display in the table view

See related snapshots in k9s

browsing down provides the describe view

or the full yaml view

See related snapshot of structural schema support for creating/updating CRs in openshift

Current behavior

In version 1.25.3, it is hard to discover CRs are indeed listed:

Once one the CRD list

The CRD page displays some details of the CRD

and only after scrolling at the bottom of the page, the CR are displayed in the "Objects" section
but without honoring the additionalPrinterColumn

Suggested enhancements

• Add CRs to the navigation menu (likely as a hiearchical menu prefixed by api group), including related permalinks
• Add display the kubectl describe output to the CR page
• Add support for adding from CRDs as favorites into the navigation menu
• Add ability to display and edit CR as a web form dynamically generated from their CRD structural schema. See available JS form generators at https://json-schema.org/implementations.html#web-ui-generation with for instance https://hamidihamza.com/ajsf/ backed by https://github.com/hamzahamidi/ajsf
  • provides completion, validation messages, and inline documentation

[Guilamb]

Hello, I'm part of @gberche-orange team, and I'm in charge of finding a Webui to consume custom [Crossplane] K8S CR apis.

After looking up to multiple services, we've choosen to use Headlamp.

Our needs are :

• Discover CRDs and associated CRs

• Filter CRDs by CR's namespace and categories

• Differenciates CR with different CRDs version

• Create a CR from a CRD

  • From a form (generated using the json schema)

  • From editor with completion and instant feedback

  • With documentation

• Edit and delete CRDs and CRs

• Get the additional printer columns of a CR

• View CR status

• View secrets generated using the CRD

Ultimately, our objective is to use Headlamp as an interface for our clients to provision themselves with services through Crossplane.

And as a tool to demonstrate service provisionning as service provider.

To develop and integrate the missing parts to fulfill our needs, which would include imo:

• Filter CRDs by CR's namespace and categories
  frontend: Add crd's categories  #1940
  Display categories for CRDs #1991

• Differenciates CR with different CRDs version

• Create a CR from a CRD

  • From a form (generated using the json schema)
    Auto generated UI for CRs #1220
    Generate Forms from Kubernetes Schema to Create and Edit Resources  #2087

  • From editor with completion and instant feedback

  • With documentation

I've created the following mockup on Figma :
https://www.figma.com/proto/qvLeAUXzq6AmSTj6U00e1G/Headlamp?type=design&node-id=14-1629&t=4ks8Wf5TSZBWU2Mw-1&scaling=min-zoom&page-id=0%3A1&starting-point-node-id=14%3A1629&mode=design

For now, I don't know whether I should contribute these changes in the form of a plugin or directly as PR on Headlamp itself.
I've already played a bit with the plugins which are great, and I think it would be sufficient for our needs, but contributing those changes, could benefit Headlamp's UX regarding Custom Resources.

[joaquimrocha]

Hi @Guilamb . I'm happy to see you chose Headlamp.
Regarding the needs you suggest for the CR/CRDs, at first glance I think they are changes that would benefit all users of Headlamp and therefore they could be in Headlamp Base (core, not a plugin).

Let me look in more detail at the mockup you provide and I should check with our design team but I think these are great changes that will improve the CRs UX and I'm looking forward to having them.