UX of Definition

    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.

    The components, workflow steps, and operation and maintenance feature types with different UI-Schema working principles are defined through CUE, which we call XDefinition, and almost every definition includes the definition of input parameters. for example:

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

    The spec are as follows:

    1. - jsonKey: string         The field name
    2.   label: string           The show name in UI
    3.   description: string     The help info in UI
    4.   uiType: string          The react component type in UI
    5.   sort: int               The sort number
    6.   disabled: bool          Disable this field.
    7.   style:  
    8.     colSpan: int          Defines the number of grids for the form, with 24 representing 100% width.
    10.     - jsonKey: string     Specifies the path of the field, support the peer and subordinate fields.
    11.       op: == | != | in    
    12.       value: any          Specifies the expected value.
    13.   validate:               The value validate rule, It must be defined as a whole. 
    14.     defaultValue: any     The default values.
    15.     required: bool
    16.     max: int              The max value for number.
    18.     maxLength: int        The max length for string.
    19.     minLength: int        The min length for string.
    20.     pattern: string
    21.     options:              Optional, for select forms
    22.     - label: string
    23.       value: string
    24.     immutable: bool       Set the immutable is true, indicates that the parameter cannot be changed.
    25.   subParameters:
    27.       ...

    Basic form

    • Input
    • Number
    • Select
    • Switch
    • Password

    Business form

    • Ignore: There are subordinate fields, and the current field is not displayed.
    • SecretSelect: Load the secret list to assist user selection
    • SecretKeySelect: Load the secret key list by the secret name of the user selected to assist user selection
    • CPUNumber: CPU-style number input form.
    • MemoryNumber: Memory-style number input form.
    • DiskNumber: Disk-style number input form.
    • K8sObjectsCode: The YAML input form of Kubernetes resource.
    • HelmRepoSelect: Load the helm repositories from integration configs to assist user selection.
    • HelmChartSelect: Load the helm charts to assist user selection.
    • HelmChartVersionSelect: Load the versions of the selected helm chart to assist user selection.
    • HelmValues: Load the default values of the selected helm chart and version to assist the user to configure the custom values.
    • PolicySelect: Load the policies of the current application to assist user selection.
    • ImageInput: Load and show the image info by users input image name.
    • CertBase64: Support users upload or input the string, automatically base64 encoded. Suitable the fields such as the certificates and keys. (Added in 1.5+)

    Combination form

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

    Ref：https://github.com/kubevela/catalog/tree/master/addons/velaux/schemas