Git Product home page Git Product logo

backstage-kcl's People

Contributors

fossabot avatar peefy avatar

Stargazers

 avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar

Forkers

zong-zhe fossabot

backstage-kcl's Issues

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

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.

image

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

image

Application Page

  • App Dashboard

image

  • New App Page

image

Status Page

image

Environment Page

image

Pipeline Page

image

Cluster Page

  • KUI Integration

UserInfo Page

image

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:

image

image

  • OpenAPIv3 Schema

image

    1. OpenAPIv3 Schema + Info Definitions to UI Schema
    1. UI Schema Render UI Form
    1. Summit Form to get the json config
    1. 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

Plugin Repo

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

Reference

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.