UI 扩展 | KubeVela

VelaUX 针对组件、工作流步骤、运维特征资源的可扩展性，在可变输入参数项的情况下，为了实现较为原生的 UI 体验，设计并实现了 UI-Schema 规范。

目前 UI-Schema 规范主要作用于数据输入侧，未来将扩展到数据可视化侧。

UI-Schema 作用原理

不同的组件、工作流步骤、运维特征类型通过 CUE 进行定义，我们称其为 XDefinition, 几乎每一种定义都包括了输入参数的定义。比如：

scaler: {
    type: "trait"
    annotations: {}
    labels: {}
    description: "Manually scale K8s pod for your workload which follows the pod spec in path 'spec.template'."
    attributes: {
        podDisruptive: false
        appliesToWorkloads: ["*"]
    }
}
template: {
    parameter: {
        // +usage=Specify the number of workload
        replicas: *1 | int
    }
    // +patchStrategy=retainKeys
    patch: spec: replicas: parameter.replicas
}

在 UI 中我们希望用户可以通过一个数字输入表单来设置副本数。

它的工作流程如上图所示，通过定义的 CUE 生成 API Schema，然后再通过 API Schema 生成默认的 UI Schema，如果存在自定义的 UI Schema，使用自定义的配置对默认配置进行更新。UI 基于最终的 UI Schema 渲染出前端页面。

- jsonKey: string             字段名称
  label: string UI            显示名称
  description: string         描述信息
  uiType: string              UI 组件类型
  sort: int                   排序
  disabled: bool              是否禁用该字段
  style:                      样式定义
    colSpan: int              表单栅格大小，24 代表 100% 宽度
  conditions:                 表单显示行为的条件
    - jsonKey: string         数据来源字段名称
      op: == | != | in        判断方式
      value: any              预期的值
      action: enable|disable  表单满足条件时是启用还是禁用
  validate:                   数据校验规则，自定义后整体替换默认配置
    defaultValue: any         默认值
    required: bool            是否是必填参数
    max: int                  数字最大值
    min: int                  数字最小值
    maxLength: int            最大字符长度
    minLength: int            最小字符长度
    pattern: string           正则校验规则
    options:                  可选项，适用于选择性表单
    - label: string           可选项显示名称
      value: string           可选项值
    immutable: bool           是否为不可变字段，设为 true 则代表该字段不能在编辑中更改。
  subParameters:              下级参数，结构一致
    - jsonKey: string
      ...

已支持的类型

基础表单

业务表单

组合表单

配置案例

KubeVela 会将自定义 UISchema 配置存储在与定义对象相同的 namespace 下的 ConfigMap 里。

kubectl get configmap -n vela-system | grep uischema

NAME                                                   DATA   AGE
addon-uischema-velaux                                  1      25h
component-uischema-helm                                1      25h
component-uischema-k8s-objects                         1      25h
component-uischema-kustomize                           1      25h
component-uischema-task                                1      25h
config-uischema-helm-repository                        1      25h
config-uischema-image-registry                         1      25h

ConfigMap 命名的格式为 <your-definition-type>-uischema-<your-definition-name>, 数据键为 ui-schema。

举个例子, 我们可以使用下面的命令来获取名为 k8s-objects 的 component 类型组件的自定义 UI Schema 配置:

kubectl get configmap -n vela-system component-uischema-k8s-objects -oyaml

apiVersion: v1
kind: ConfigMap
metadata:
  name: component-uischema-k8s-objects
  namespace: vela-system
data:
  ui-schema: '[{"jsonKey":"objects","uiType":"K8sObjectsCode"}]'

UI-Schema 作用原理​

已支持的类型​

基础表单​

业务表单​

组合表单​

配置案例​

如何扩展​