Webui for consuming custom [Crossplane] K8S CR apis

[gberche-orange]

Expected behavior

• As a marketplace user
• In order to consume K8S api offering provisionning capabilities such as databases, compute (K8S clusters, namespaces ...)
• I need a webui

Observed behavior

No yet webui is currently offered in paas-templates

Possible alternatives

Backstage

https://backstage.io/

An open platform for building developer portals

4 main fuctionnalities:

• Software catalog
  • Used to keep track of ownership and metadatas of services
• TechDocs
  • Provide a documentation, that we can directly link to our components
• Service templates
  • Provide custom templates for our services
• Search tools
  • We get a search bar and some sorting

an exemple of what it would look like for k8s env : https://backstage.io/blog/2021/01/12/new-backstage-feature-kubernetes-for-service-owners/ https://youtu.be/VivuOxn3VQ8?si=FQchS0nChfQ_C49A

https://github.com/backstage/backstage/issues/5511 https://github.com/backstage/backstage/issues/12455

https://artifacthub.io/packages/helm/backstage/backstage

Headlamp

https://www.headlamp.dev

Headlamp is an easy-to-use and extensible Kubernetes web UI.

https://github.com/headlamp-k8s/headlamp/ https://www.headlamp.dev/docs/latest/development/frontend/

Example of head lamp custom UI for displaying custom CRDs https://github.com/epam/edp-headlamp

Pending feature suggestion to improve CRD support https://github.com/headlamp-k8s/headlamp/issues/955

https://artifacthub.io/packages/helm/headlamp/headlamp

devtron

https://github.com/devtron-labs/devtron https://docs.devtron.ai/usage/resource-browser https://preview.devtron.ai/dashboard/resource-browser/1/all/prometheusrule/monitoring.coreos.com image

portainer

https://docs.portainer.io/user/kubernetes/dashboard

• does not seem to support a CR/CRD view. Suggest the feature https://github.com/portainer/portainer/issues?q=is%3Aopen+is%3Aissue+label%3Aarea%2Fkubernetes+
  • https://github.com/portainer/portainer/issues/5346#issuecomment-885473254

    I guess you guys at Portainer must decide whether you make Portainer working with traefik CRD

    • https://github.com/xware-gmbh/aks-terraform-portainer#create-traefik-specific-resources Traefik specific resources like middlewares must be created with manifests. [...] You can apply these manifests as an administrator in Portainer.

      Kui

https://github.com/kubernetes-sigs/kui

• https://playground.guidebooks.dev/ online demo server
• https://github.com/project-codeflare/codeflare-cli/blob/main/docs/scenarios/README.md#readme recorded wizards demos
• https://github.com/kubernetes-sigs/kui/blob/v13.1.0/docs/presentations/kui-cloudnative-devx-2021.pdf
• https://github.com/kui-shell/KuiClientTemplate
  • https://github.com/kui-shell/KuiClientTemplate/blob/main/plugins/plugin-example/README.md
• [x] test notebook/guidebook authoring
  • https://github.com/guidebooks/madwizard
    • https://madwizard.io/
    • https://github.com/kubernetes-sigs/kui/blob/master/plugins/plugin-madwizard/notebooks/guidebook-intro.md?plain=1
• [ ] set up as a full web ui: https://github.com/kubernetes-sigs/kui/issues/9331
• [ ] deep dive on CR form support
  • https://github.com/kubernetes-sigs/kui/issues/4470

vscode

• [ ] buitin CRD schema completion support https://github.com/vscode-kubernetes-tools/vscode-kubernetes-tools/issues/917
• [ ] enable "vs-kubernetes.enable-snap-flag": true, to get the list of clusters if using snap packages : https://github.com/vscode-kubernetes-tools/vscode-kubernetes-tools/issues/522
• [ ] set up full web version

Theia

• https://theia-ide.org/

• https://github.com/eclipse-theia/theia

• [ ] K8S installation

  • https://artifacthub.io/packages/search?ts_query_web=theia+&sort=relevance&page=1

• [ ] K8S resources support through a plugin https://theia-ide.org/docs/extensions/

  • [ ] VSCode

    Openshift console

• Yaml completion

• Web Form generation

  • https://github.com/openshift/console/issues/8716
  • http://openshift.github.io/openshift-origin-design/designs/developer/4.8/form-based-edit/ similar to form based edits for builting K8S resources

• [ ] Study doc: OLM vs built-in CRD support in console

  • https://github.com/openshift/console/blob/master/frontend/packages/operator-lifecycle-manager/src/components/descriptors/README.md
  • https://github.com/openshift/console/blob/master/frontend/packages/operator-lifecycle-manager/src/components/descriptors/reference/reference.md
    • https://docs.openshift.com/container-platform/4.12/rest_api/operatorhub_apis/clusterserviceversion-operators-coreos-com-v1alpha1.html#spec-apiservicedefinitions-owned-specdescriptors-2

• [ ] deploy as helm chart

  • [ ] https://artifacthub.io/packages/helm/av1o-charts/openshift-console
    • https://gitlab.com/av1o/charts/-/tree/master/charts/openshift-console
  • [ ] https://artifacthub.io/packages/helm/startx/cluster-console
    • https://github.com/startxfr/helm-repository/tree/master/charts/cluster-console

• [ ] further configure openshift console

  • https://suess.wtf/posts/openshift_console/

Lens

• https://docs.k8slens.dev/
• proxy config https://github.com/lensapp/lens/issues/6861
• customization support for focussing on custom CRs ?
  • https://api-docs.k8slens.dev/v6.0.1/
  • https://api-docs.k8slens.dev/v6.0.1/extensions/capabilities/common-capabilities/#deactivate_1
  • https://github.com/lensapp/lens/issues?q=is%3Aissue+is%3Aopen+CRD
  • https://github.com/lensapp/lens/issues/3258
• [ ] understand if web ui is reacheable in the opensource model or whether this is sustaining the creators business model in https://k8slens.dev/
  • https://github.com/lensapp/lens/issues/5109

kubernetes/dashboard

• https://github.com/kubernetes/dashboard
  • https://github.com/kubernetes/dashboard/issues/7633
    • https://github.com/kubernetes/dashboard/pull/8583 closed by lack of reviewer
  • https://github.com/kubernetes/dashboard/issues/2493#issuecomment-509193556
  • https://github.com/kubernetes/dashboard/issues/4123

karpor

https://www.kusionstack.io/karpor/ https://www.kusionstack.io/karpor/user-guide/insight/topology https://karpor-demo.kusionstack.io/

does not display CR as of Sep 2024. Mostly ready-only visualization

Rancher dashboard

• https://github.com/rancher/dashboard
  • https://github.com/rancher/dashboard/graphs/contributors ex stratos contributors
    • https://github.com/rancher/dashboard/issues/5754 Support form validation and more data types in questions.yaml
    • https://github.com/rancher/dashboard/issues/2158 can leverage values.schema.json [Feature request] Support helm3 values.schema.json to display HTML forms to users Example json schema uses this format: https://json-schema.org/learn/examples/calendar.schema.json
    • https://github.com/rancher/dashboard/issues/9013 Extension UX Improvements
      • https://rancher.github.io/dashboard/extensions/introduction

        Add new UI for Kubernetes CRDs

Others

• https://github.com/skooner-k8s/skooner/issues/256
• https://github.com/kubenav/kubenav/issues/388
• https://github.com/vmware-archive/octant/commit/fdb5820a93843c2f7b8d6db852d49358c4db88c8

Wrapping through app installer (helm chart, carvel package, OLM package)

See sample helm chart for wrapping CRDs https://artifacthub.io/packages/search?ts_query_web=crd&sort=stars

• https://kubeapps.dev/
  • Helm
    • https://github.com/vmware-tanzu/kubeapps/issues/5988
  • Carvel package
  • Flux HelmRelease
  • https://github.com/vmware-tanzu/kubeapps/graphs/contributors

Affected releases

• x.y
• earlier versions

[Guilamb]

Kubesphere -> Don't provide only a webui https://github.com/kubesphere/kubesphere?tab=readme-ov-file

kube-web-view -> Seems dead https://codeberg.org/hjacobs/kube-web-view

[Guilamb]

Evaluation report of WebUI for consuming custom [Crossplane] K8S CR apis

Introduction

Context of the evaluation

As a marketplace user of our platform, we needed a web UI in order to consume Kubernetes API offering provisioning capabilities such as databases, compute (Kubernetes clusters, namespaces, etc.). This web UI needed to support various operations, including authentication, namespace selection, CRD (Custom Resource Definition) discovery, creation, modification, and deletion. Additionally, we needed other Features such as a clear list of existing CRs (Custom Resources), grouping of linked CRs, visualization of their status, and the ability to view secrets. We also wanted to mask non-CR related Features for demo purposes.

Objective of the report

The main objective of this report is to share our results with the community and to provide feedback on our experiences with those services.

Overview of WebUI

Rancher: Kubernetes management platform for multi-cluster orchestration.

info

Git Repo: https://github.com/rancher/ui

Number of contributors: 141

Last commit: 3 weeks ago

Business model: Sell an Entreprise Kubernetes Management Platform

GetPort: Cloud-native platform for developing, deploying, and managing applications.

info

Git Repo: https://github.com/port-labs

Number of contributors: /

Last commit: /

Business model: Sell an open internal developer portal

kubernetes/dashboard: Official web-based user interface for Kubernetes clusters.

info

Git Repo: https://github.com/kubernetes/dashboard

Number of contributors: 370

Last commit: 28 march 2024

Business model: Unknown

Lens: Kubernetes IDE for managing and monitoring clusters and workloads.

info

Git Repo: https://github.com/lensapp/lens

Number of contributors: 112

Last commit: 3 months ago

Business model: Sell of Lens

Openshift console: Web console for managing OpenShift clusters and applications.

info


Git Repo: https://github.com/openshift/console

Number of contributors: 196

Last commit: This week

Business model: Sell of Openshift

Theia: Extensible platform for building cloud and desktop IDEs.

info

Git Repo: https://github.com/vscode-kubernetes-tools

Number of contributors: 84

Last commit: last week

Business model: /

Vscode: Lightweight and extensible code editor with rich ecosystem support.

info


Same as theia since the kubernetes plugin is the same

**Kui:** Command-line interface (CLI) with enhanced visualization for Kubernetes.

info

Git Repo: https://github.com/kub

ernetes-sigs/kui

Number of contributors: 25

Last commit: Last year

Business model: /

Portainer: Docker container management tool with a simple web-based interface.

info

Git Repo: https://github.com/portainer/portainer/

Number of contributors: 228

Last commit: Today

Business model: Sell https://www.portainer.io/

Headlamp: Kubernetes dashboard and management tool focused on simplicity and ease of use.

info


Git Repo: https://github.com/headlamp-k8s/headlamp

Number of contributors: 40

Last commit: yesterday

Business model: /

Devtron: Continuous delivery platform for Kubernetes applications.

info


Git Repo: https://github.com/devtron-labs/devtron

Number of contributors: 104

Last commit: yesterday

Business model: Sell Enterprise version

Backstage: Developer portal and infrastructure platform for large-scale software development.

info

Git Repo: https://github.com/backstage/backstage

Number of contributors: 1429

Last commit: Today

Business model: Offered to CNCF by Spotify

Selection criteria

Our selection criteria were the following :

• [ ] Authentication
• [ ] Namespace selection
• [ ] CRDs Discovery
• [ ] Creation/Modification of CRs :
  • [ ] From YAML
  • [ ] With Completion
  • [ ] With templates
  • [ ] From Web Forms
• [ ] List existing CRs
• [ ] Deletion of CRs
• [ ] Grouping of linked CRs
• [ ] CRs status visualization
• [ ] Secrets visualization
• [ ] Easily customizable

Screenshots of ArtifactHub.io security scans have been made the 10/04/2024 and may have evolved since.

Feature evaluation

Rancher

**Features** - [x] Authentication - [x] Namespace selection - [ ] CRDs Discovery - [ ] Creation/Modification of CRs : - [x] From YAML - [x] With Completion - [ ] With templates - [ ] From Web Forms - [x] List existing CRs - [x] Deletion of CRs - [ ] Grouping of linked CRs - [x] CRs status visualization - [x] Secrets visualization - [x] Easily customizable https://ranchermanager.docs.rancher.com/how-to-guides/new-user-guides/authentication-permissions-and-global-configuration/custom-branding **Security** https://artifacthub.io/packages/helm/rancher-stable/rancher  **Strenghts - Weaknesses**

Headlamp

**Features** - [x] Authentication - [ ] Namespace selection - [x] CRDs Discovery - [ ] Creation/Modification of CRs : - [x] From YAML - [ ] With Completion - [ ] With templates - [ ] From Web Forms - [x] List existing CRs - [x] Deletion of CRs - [ ] Grouping of linked CRs - [x] CRs status visualization - [x] Secrets visualization - [x] Easily customizable **Security** https://artifacthub.io/packages/helm/headlamp/headlamp  **Strenghts - Weaknesses** The UI is fully customizable with add-ons, and the community is strongly invested

Openshift console

**Features** Informations are based on documentation, so there are some points that need to be clarified through testing. - [x] Authentication - [ ] Namespace selection - [x] CRDs Discovery - [ ] Creation/Modification of CRs : - [x] From YAML - [ ] With Completion - [ ] With templates - [ ] From Web Forms - [x] List existing CRs - [x] Deletion of CRs - [ ] Grouping of linked CRs - [ ] CRs status visualization - [ ] Secrets visualization - [x] Easily customizable **Security** No security scan on ArtifactHub.io **Strenghts - Weaknesses** The documentation is difficult to understand. For example, on the Git repository, we don't have any screenshots of the UI or a list of functionalities.

GetPort

The solution isn't open source, so we eliminated this option.

kubernetes/dashboard

It seems that there isn't any contribution to the project anymore.

Lens

The open-source web version is deprecated, so this solution was eliminated.

Vscode / Theia

**Features** - [ ] Authentication - [x] Namespace selection - [x] CRDs Discovery - [ ] Creation/Modification of CRs : - [x] From YAML - [x] With Completion - [ ] With templates - [ ] From Web Forms - [x] List existing CRs - [ ] Deletion of CRs - [ ] Grouping of linked CRs - [ ] CRs status visualization - [x] Secrets visualization - [ ] Easily customizable **Security** Theia Security scan : https://artifacthub.io/packages/helm/kubesphere-stable/theia?modal=security-report  **Strenghts - Weaknesses** It comes with Visual Studio, so for modifying CRs, it's great, but the Kubernetes plugin isn't customizable, so we can't get rid of the other sections.

Kui

The project is dead, there have been no contributions since May 2023.

Portainer

The service doesn't seem to support CRs.

Devtron

**Features** - [x] Authentication - [x] Namespace selection - [ ] CRDs Discovery - [ ] Creation/Modification of CRs : - [x] From YAML - [x] With Completion - [ ] With templates - [ ] From Web Forms - [x] List existing CRs - [ ] Deletion of CRs - [ ] Grouping of linked CRs - [x] CRs status visualization - [ ] Secrets visualization - [ ] Easily customizable **Security** https://artifacthub.io/packages/helm/devtron/devtron-operator?modal=security-report  **Strenghts - Weaknesses** There is no possibility of customization of the UI.

Backstage

**Features** - [x] Authentication - [ ] Namespace selection - [ ] CRDs Discovery - [ ] Creation/Modification of CRs : - [x] From YAML - [ ] With Completion - [ ] With templates - [x] From Web Forms - [ ] List existing CRs - [ ] Deletion of CRs - [ ] Grouping of linked CRs - [ ] CRs status visualization - [ ] Secrets visualization - [x] Easily customizable **Security** https://artifacthub.io/packages/helm/backstage/backstage  **Strenghts - Weaknesses** Very versatile service, easy to customize, and provides a lot of options. However, it is not centered on Kubernetes.

Conclusion

After evaluating the WebUI options, Headlamp emerged as the most suitable choice for us, particularly due to its extensive customization capabilities.

We encountered issues running Rancher on our minikube instance, and its broad functionality didn't align with our specific needs for CR and CRD management. We needed the ability to restrict certain functionalities for users, which was not feasible with Rancher.

Openshift console's poor documentation made it challenging to understand how to develop a plugin for our use case or contribute effectively.

In contrast, Headlamp offers an intuitive interface and streamlined functionality that align perfectly with our requirements. Therefore, we've decided to contribute to Headlamp to add missing features and utilize it as our WebUI for consuming Crossplane CRs.

[Guilamb]

Issues and PR to follow

• https://github.com/headlamp-k8s/headlamp/issues/2087
• https://github.com/headlamp-k8s/headlamp/pull/2281
• https://github.com/headlamp-k8s/headlamp/pull/2226

[Guilamb]

Here a model of a json schema using an enum that give the wanted behaviour :

apiVersion: apiextensions.k8s.io/v1
kind: CustomResourceDefinition
metadata:
  name: examples.mygroup.io
spec:
  group: mygroup.io
  versions:
    - name: v1
      served: true
      storage: true
      schema:
        openAPIV3Schema:
          type: object
          properties:
            spec:
              type: object
              properties:
                plan:
                  type: string
                  description: "The plan for the example resource. Allowed values are small, medium, large."
                  enum:
                    - small
                    - medium
                    - large
              required:
                - plan
  scope: Namespaced
  names:
    plural: examples
    singular: example
    kind: Example
    shortNames:
      - ex