UI-Schema

    KubeVela designs and implements the UI-Schema specification for the scalability of components, workflow steps, and operation and maintenance feature resources, in the case of variable input parameters, to achieve a more native UI experience.

    At present, the UI-Schema specification mainly acts on the data input side and will be extended to the data visualization side in the future.

    In the above example, the user input parameter is .

    In the UI we want the user to be able to set the number of replicas via a number input form.

    Its workflow is in the figure above. The API Schema is generated through the defined CUE, and then the default UI Schema is generated through the API Schema. If there is a custom UI Schema, the default configuration is patched with the custom configuration. The UI renders the front-end page based on the final UI Schema.

    The spec are as follows:

    1. - jsonKey: string         field name
    3.   label: string           show name in UI
    5.   description: string     help info
    7.   uiType: string          the react component type in UI
    9.   sort: int               sort number
    11.   validate:               data validate rule.
    13.     required: bool
    14.     max: int
    16.     min: int
    18.     regular: string
    20.     options:              Optional, for select forms
    22.     - label: string
    24.       value: string
    26.   subParameters:
    28.     ...

    Basic form

    • Input
    • Number
    • Select
    • Switch
    • DatePicker
    • Textarea
    • Password

    Business form

    • Ignore: There are subordinate fields, and the current field is not displayed.
    • ClusterSelect
    • EnvSelect
    • SecretSelect
    • SecretKeySelect
    • ComponentSelect
    • ImageInput
    • ClassStorageSelect
    • PVCSelect
    • CPUNumber
    • MemoryNumber
    • K8sObjectsCode

    Combination form

    • KV
    • Strings
    • Structs
    • Group: render as a titled container
    • TabGroup