UX of Definition

VelaUX uses the UI-Schema specification to customize UI elements 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.

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:

  1. scaler: {
  2.     type: "trait"
  3.     annotations: {}
  4.     labels: {}
  5.     description: "Manually scale K8s pod for your workload which follows the pod spec in path 'spec.template'."
  6.     attributes: {
  7.         podDisruptive: false
  8.         appliesToWorkloads: ["*"]
  9.     }
  10. }
  11. template: {
  12.     parameter: {
  13.         // +usage=Specify the number of workload
  14.         replicas: *1 | int
  15.     }
  16.     // +patchStrategy=retainKeys
  17.     patch: spec: replicas: parameter.replicas
  18. }

In the above example, the user input parameter is replicas.

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

ui schema

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         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.
  9.   conditions:             Control whether fields are enabled or disabled by certain conditions.
  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.       action: enable|disable
  14.   validate:               The value validate rule, It must be defined as a whole. 
  15.     defaultValue: any     The default values.
  16.     required: bool
  17.     max: int              The max value for number.
  18.     min: int              The min value for number.
  19.     maxLength: int        The max length for string.
  20.     minLength: int        The min length for string.
  21.     pattern: string
  22.     options:              Optional, for select forms
  23.     - label: string
  24.       value: string
  25.     immutable: bool       Set the immutable is true, indicates that the parameter cannot be changed.
  26.   subParameters:
  27.     - jsonKey: string
  28.       ...
  • Input
  • Number
  • Select
  • Switch
  • Radio

  • Password

  • 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+)

  • KV

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

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

UI-Schema mainly extends front-end react components, refer to https://github.com/kubevela/velaux/tree/main/src/extends

Last updated on Aug 4, 2023 by Daniel Higuero