[Feature][Design] KCL UI and Backstage Plugin for GitClickOps

[Peefy]

Background

KCL is currently limited in some aspects as a combination of a range of languages and tools

• As language and tools for describing intentions and abstractions, it may be able to solve up to 50% of problems and require corresponding choreographers or engines to consume this intention. We can integrate this with configuration synchronization tools in the community, such as kubectl, argocd and KusionStack on the client side and KCL operators at runtime.
• Domain languages always have a threshold for providing a UI that is easier to spread and use. Note that the UI mentioned here is not limited to a specific form, it can be an IDE interface, dashboard, Notebook, etc.
• When designing the KCL UI, we can also consider integrating with CNCF projects such as Backstage, as Backstage does provide a high degree of freedom for custom plugin mechanisms and most of the configuration related projects in CNCF are integrated with Backstage.
• Considering that platform based products are generally slow to form and KCL's own Registry platform (may integrate with CNCF artifact hub) is currently developing, priority should be given to integrating KCL into other platform based products. Simultaneously conceptualizing and building an overall platform infrastructure based on UI design.

What is Backstage and KCL

Backstage is an open platform for building developer portals. It unifies your infrastructure tooling, services, and documentation to create a streamlined development environment from end to end.

KCL is an open-source, constraint-based record and functional language that enhances the writing of complex configurations, including those for cloud-native scenarios. With its advanced programming language technology and practices, KCL is dedicated to promoting better modularity, scalability, and stability for configurations. It enables simpler logic writing and offers ease of automation APIs and integration with homegrown systems.

Benefits of Backstage KCL UI Plugin

Backstage acts as a "platform of platforms" or marketplace between infra/platform teams and end-users. It sits on top of infrastructure and developer tooling, abstracting infrastructure away. It aims to remove context switching and cognitive overload that drag engineers down.

Goals

• As the basis and guidance for subsequent design of Registry and Registry backend.
• Reduce the cognitive burden of KCL users through KCL UI interaction, and quickly get started with use cases in 5 minutes.
• Using a unified UI to cascade workflows instead of frequent context switching to manually configure various technical products.
• Seamless interaction with cloud native components such as Kubernetes, ArgoCD, CI/CD, Secret management, Auth etc. through the Backstage visualization plugin with Backstage KCL UI and backend plugins.

Design

KCL UI

Note: The design and implementation of KCL UI can not only be used for Backstage plugins, but can also be used separately to connect the entire workflow of users.

Workflow Overview

• Code
  • Auth/Identity
  • Application and Deployment Management
    • Workspace
    • Codify/Low Code
    • Test
    • Realtime validation
    • ...
  • Registry Integration
    • Search
    • Template
    • ...
  • VCS Integration
  • AI Code Generation
• Ship
  • LiveDiff
  • Drift Detection
  • CI/CD Integration
  • ...
• Run
  • Kubernetes Integration: Cluster and Resource
• Monitor
  • Monitoring integration e.g., Prometheus, Grafana
• Other
  • Setting Page
  • Guide Page

Main Page

Application Page

• App Dashboard

• New App Page

Status Page

Environment Page

Pipeline Page

Cluster Page

• KUI Integration

UserInfo Page

Design of Config & Schema UI Automatic form Generation Scheme for GitClickOps

We use KCL Schema and the builtin info decorator to complete form generation for the overall design. The workflow is as follows:

• 1. KCL Schema export OpenAPIv3 Schema + KCL OpenAPI Type + Info Definitions including hidden, disable and group information, span, enable conditions, validate message, label and sort etc. https://github.com/kcl-lang/kcl-go/blob/main/pkg/tools/gen/genopenapi.go

• KCL Schema

• OpenAPIv3 Schema

• 2. OpenAPIv3 Schema + Info Definitions to UI Schema
• 3. UI Schema Render UI Form
• 4. Summit Form to get the json config
• 5. Import the json config to KCL config and use the KCL schema to validate the config.

Backstage KCL UI and Backend Plugin

Using backstage-cli to manage UI plugins and backend plugins and flow Backstage plugin documents.

Dependency

• KCL Backend including KRM-KCL Spec and all KCL components
• KCL Javascript/Typescript SDK: https://github.com/kcl-lang/kcl-js

Plugin Repo

https://github.com/kcl-lang/backstage-kcl

Reference

• Backstage: https://backstage.io/
• Kubernetes Backstage Plugin: https://backstage.io/docs/features/kubernetes/
• KPT Backstage Plugin: https://github.com/GoogleContainerTools/kpt-backstage-plugins
• Kubevela Backstage Plugin: https://github.com/kubevela-contrib/backstage-plugin-kubevela
• Humantec Backstage Plugin: https://github.com/thefrontside/playhouse/tree/main/plugins/humanitec
• KUI: https://github.com/kubernetes-sigs/kui
• Garden: https://github.com/garden-io/garden
• Kubevela VelaUX: https://github.com/kubevela/velaux
• Sealos: https://github.com/labring/sealos
• Laf: https://github.com/labring/laf
• Gaia: https://gaia-app.io/
• Terraform: https://www.terraform.io/
• Getambassador: https://www.getambassador.io
• Figma: https://www.figma.com/
• SEAL Walrus: https://github.com/seal-io/walrus
• Json Schema Form: https://github.com/rjsf-team/react-jsonschema-form
• Rover: https://github.com/im2nguyen/rover