Fix: link the openapi reference doc (#838)

* Fix: link the openapi refrence doc

Signed-off-by: barnettZQG <barnett.zqg@gmail.com>

* Fix: update the sidebar

Signed-off-by: barnettZQG <barnett.zqg@gmail.com>
This commit is contained in:
barnettZQG 2022-07-07 13:18:34 +08:00 committed by GitHub
parent 77ea0450db
commit 4e4f6278c6
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
10 changed files with 42 additions and 72 deletions

View File

@ -1,5 +1,5 @@
--- ---
title: Generating UI Forms title: Generating OpenAPI Schema
--- ---
For any capabilities installed via [Definition Objects](./definition-and-templates), For any capabilities installed via [Definition Objects](./definition-and-templates),
@ -70,20 +70,8 @@ data:
Specifically, this schema is generated based on `parameter` section in capability definition: Specifically, this schema is generated based on `parameter` section in capability definition:
* For CUE based definition: the `parameter` is a keyword in CUE template. * For CUE based definition: the `parameter` is a keyword in CUE template.
* For Helm based definition: the `parameter` is generated from `values.yaml` in Helm chart. * For Terraform based definition: the `variable` is the keyword in TF template.
## Render Form ## Next
You can render above schema into a form by [form-render](https://github.com/alibaba/form-render) or [React JSON Schema form](https://github.com/rjsf-team/react-jsonschema-form) and integrate with your dashboard easily. Refer to [UX of Definition](../reference/ui-schema)
Below is a form rendered with `form-render`:
![](../resources/json-schema-render-example.jpg)
### Helm Based Components
If a Helm based component definition is installed in KubeVela, it will also generate OpenAPI v3 JSON schema based on the [`values.schema.json`](https://helm.sh/docs/topics/charts/#schema-files) in the Helm chart, and store it in the `ConfigMap` following convention above. If `values.schema.json` is not provided by the chart author, KubeVela will automatically generate OpenAPI v3 JSON schema based on its `values.yaml` file automatically.
# What's Next
It's by design that KubeVela supports multiple ways to define the schematic. Hence, we will explain `.schematic` field in detail with following guides.

View File

@ -37,7 +37,7 @@ In the UI we want the user to be able to set the number of replicas via a number
![ui schema](../resources/ui-schema.jpg) ![ui schema](../resources/ui-schema.jpg)
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. Its workflow is in the figure above. The API Schema is [generated through the defined CUE](../platform-engineers/openapi-v3-json-schema), 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: The spec are as follows:
@ -87,15 +87,18 @@ The spec are as follows:
- [x] Ignore: There are subordinate fields, and the current field is not displayed. - [x] Ignore: There are subordinate fields, and the current field is not displayed.
- [x] SecretSelect: Load the secret list to assist user selection - [x] SecretSelect: Load the secret list to assist user selection
- [x] SecretKeySelect: Load the secret key list by secret name of the user selected to assist user selection - [x] SecretKeySelect: Load the secret key list by the secret name of the user selected to assist user selection
- [x] CPUNumber: CPU-style number input form. - [x] CPUNumber: CPU-style number input form.
- [x] MemoryNumber: Memory-style number input form. - [x] MemoryNumber: Memory-style number input form.
- [x] DiskNumber: Disk-style number input form. - [x] DiskNumber: Disk-style number input form.
- [x] K8sObjectsCode: The yaml input form of kubernetes resource. - [x] K8sObjectsCode: The YAML input form of Kubernetes resource.
- [x] HelmRepoSelect: Load the helm repositories from integration configs to assist user selection. - [x] HelmRepoSelect: Load the helm repositories from integration configs to assist user selection.
- [x] HelmChartSelect: Load the helm charts to assist user selection. - [x] HelmChartSelect: Load the helm charts to assist user selection.
- [x] HelmChartVersionSelect: Load the versions of selected helm chart to assist user selection. - [x] HelmChartVersionSelect: Load the versions of the selected helm chart to assist user selection.
- [x] HelmValues: Load the default values of selected helm chart and version to assist user config the custom values. - [x] HelmValues: Load the default values of the selected helm chart and version to assist the user to configure the custom values.
- [x] PolicySelect: Load the policies of the current application to assist user selection.
- [x] ImageInput: Load and show the image info by users input image name.
- [x] 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 #### Combination form

View File

@ -1,5 +1,5 @@
--- ---
title: 从定义中生成表单 title: Definition 生成 OpenAPI 描述
--- ---
对于任何通过[定义对象](./definition-and-templates) 安装的 capability, KubeVela 会自动根据 OpenAPI v3 JSON schema 的参数列表来生成 OpenAPI v3 JSON schema并把它储存到一个和定义对象处于同一个 `namespace``ConfigMap` 中。 对于任何通过[定义对象](./definition-and-templates) 安装的 capability, KubeVela 会自动根据 OpenAPI v3 JSON schema 的参数列表来生成 OpenAPI v3 JSON schema并把它储存到一个和定义对象处于同一个 `namespace``ConfigMap` 中。
@ -49,16 +49,8 @@ data:
具体来说,该 schema 是根据capability 定义中的 `parameter` 部分生成的: 具体来说,该 schema 是根据capability 定义中的 `parameter` 部分生成的:
* 对于基于 CUE 的定义:`parameter` CUE 模板中的关键词。 * 对于基于 CUE 的定义:`parameter` CUE 模板中的关键词。
* 对于基于 Helm 的定义:`parameter` 是从在 Helm Chart 中的 `values.yaml` 生成的 * 对于基于 Terraform 的定义:读取 TF 模块配置中的 `variable` 关键词
## 渲染表单 ## 下一步
你可以通过 [form-render](https://github.com/alibaba/form-render) 或者 [React JSON Schema form](https://github.com/rjsf-team/react-jsonschema-form) 渲染上述 schema 到表单中并轻松地集成到你的仪表盘中。 参考 [UI 扩展](../reference/ui-schema)。
以下是使用 `form-render` 渲染的表单:
![](../resources/json-schema-render-example.jpg)
# 下一步
根据设计KubeVela 支持多种方法来定义 schematic。因此我们将在接下来的文档来详细解释 `.schematic` 字段。

View File

@ -37,7 +37,7 @@ template: {
![ui schema](../resources/ui-schema.jpg) ![ui schema](../resources/ui-schema.jpg)
它的工作流程如上图所示,通过定义的 CUE 生成 API Schema然后再通过 API Schema 生成 默认的 UI Schema如果存在自定义的 UI Schema使用自定义的配置对默认配置进行更新。UI 基于最终的 UI Schema 渲染出前端页面。 它的工作流程如上图所示,通过定义的 [CUE 生成 API Schema](../platform-engineers/openapi-v3-json-schema),然后再通过 API Schema 生成 默认的 UI Schema如果存在自定义的 UI Schema使用自定义的配置对默认配置进行更新。UI 基于最终的 UI Schema 渲染出前端页面。
UI Schema 包含的字段如下: UI Schema 包含的字段如下:
@ -97,6 +97,8 @@ UI Schema 包含的字段如下:
- [x] HelmChartVersionSelect: 从选择的 Chart 加载版本列表辅助用户选择 - [x] HelmChartVersionSelect: 从选择的 Chart 加载版本列表辅助用户选择
- [x] HelmValues: 从用户选择的 Chart 和 版本加载可配置的参数,供用户进行 Values 配置。 - [x] HelmValues: 从用户选择的 Chart 和 版本加载可配置的参数,供用户进行 Values 配置。
- [x] ImageInput: 镜像输入框,针对镜像进行有效性检测并响应其匹配的镜像仓库认证信息。 - [x] ImageInput: 镜像输入框,针对镜像进行有效性检测并响应其匹配的镜像仓库认证信息。
- [x] PolicySelect: 加载当前应用的策略列表,供用户进行选择,支持多选。
- [x] CertBase64: 支持输入或上传文本文件,自动将内容进行 base64 编码后进行提交,适用于证书,密钥等字段需求。(1.5+ 版本有效)
#### 组合表单 #### 组合表单

View File

@ -1,5 +1,5 @@
--- ---
title: 从定义中生成表单 title: Definition 生成 OpenAPI 描述
--- ---
对于任何通过[定义对象](./definition-and-templates) 安装的 capability, KubeVela 会自动根据 OpenAPI v3 JSON schema 的参数列表来生成 OpenAPI v3 JSON schema并把它储存到一个和定义对象处于同一个 `namespace``ConfigMap` 中。 对于任何通过[定义对象](./definition-and-templates) 安装的 capability, KubeVela 会自动根据 OpenAPI v3 JSON schema 的参数列表来生成 OpenAPI v3 JSON schema并把它储存到一个和定义对象处于同一个 `namespace``ConfigMap` 中。
@ -49,16 +49,8 @@ data:
具体来说,该 schema 是根据capability 定义中的 `parameter` 部分生成的: 具体来说,该 schema 是根据capability 定义中的 `parameter` 部分生成的:
* 对于基于 CUE 的定义:`parameter` CUE 模板中的关键词。 * 对于基于 CUE 的定义:`parameter` CUE 模板中的关键词。
* 对于基于 Helm 的定义:`parameter` 是从在 Helm Chart 中的 `values.yaml` 生成的 * 对于基于 Terraform 的定义:读取 TF 模块配置中的 `variable` 关键词
## 渲染表单 ## 下一步
你可以通过 [form-render](https://github.com/alibaba/form-render) 或者 [React JSON Schema form](https://github.com/rjsf-team/react-jsonschema-form) 渲染上述 schema 到表单中并轻松地集成到你的仪表盘中。 参考 [UI 扩展](../reference/ui-schema)。
以下是使用 `form-render` 渲染的表单:
![](../resources/json-schema-render-example.jpg)
# 下一步
根据设计KubeVela 支持多种方法来定义 schematic。因此我们将在接下来的文档来详细解释 `.schematic` 字段。

View File

@ -37,7 +37,7 @@ template: {
![ui schema](../resources/ui-schema.jpg) ![ui schema](../resources/ui-schema.jpg)
它的工作流程如上图所示,通过定义的 CUE 生成 API Schema然后再通过 API Schema 生成 默认的 UI Schema如果存在自定义的 UI Schema使用自定义的配置对默认配置进行更新。UI 基于最终的 UI Schema 渲染出前端页面。 它的工作流程如上图所示,通过定义的 [CUE 生成 API Schema](../platform-engineers/openapi-v3-json-schema),然后再通过 API Schema 生成 默认的 UI Schema如果存在自定义的 UI Schema使用自定义的配置对默认配置进行更新。UI 基于最终的 UI Schema 渲染出前端页面。
UI Schema 包含的字段如下: UI Schema 包含的字段如下:
@ -97,6 +97,7 @@ UI Schema 包含的字段如下:
- [x] HelmChartVersionSelect: 从选择的 Chart 加载版本列表辅助用户选择 - [x] HelmChartVersionSelect: 从选择的 Chart 加载版本列表辅助用户选择
- [x] HelmValues: 从用户选择的 Chart 和 版本加载可配置的参数,供用户进行 Values 配置。 - [x] HelmValues: 从用户选择的 Chart 和 版本加载可配置的参数,供用户进行 Values 配置。
- [x] ImageInput: 镜像输入框,针对镜像进行有效性检测并响应其匹配的镜像仓库认证信息。 - [x] ImageInput: 镜像输入框,针对镜像进行有效性检测并响应其匹配的镜像仓库认证信息。
- [x] PolicySelect: 加载当前应用的策略列表,供用户进行选择,支持多选。
#### 组合表单 #### 组合表单

View File

@ -60,10 +60,10 @@ module.exports = {
'end-user/components/cloud-services/provision-and-consume-database', 'end-user/components/cloud-services/provision-and-consume-database',
'end-user/components/cloud-services/provision-and-initiate-database', 'end-user/components/cloud-services/provision-and-initiate-database',
'end-user/components/cloud-services/secure-your-database-connection', 'end-user/components/cloud-services/secure-your-database-connection',
'end-user/components/cloud-services/provision-an-RDS-instance-with-more-than-one-database' 'end-user/components/cloud-services/provision-an-RDS-instance-with-more-than-one-database',
], ],
}, },
"end-user/components/cloud-services/provision-cloud-resources-by-crossplane", 'end-user/components/cloud-services/provision-cloud-resources-by-crossplane',
], ],
}, },
{ {
@ -163,6 +163,7 @@ module.exports = {
'platform-engineers/workflow/working-mechanism', 'platform-engineers/workflow/working-mechanism',
{ {
'UX Customization': [ 'UX Customization': [
'platform-engineers/openapi-v3-json-schema',
'reference/ui-schema', 'reference/ui-schema',
'reference/topology-rule', 'reference/topology-rule',
], ],
@ -256,10 +257,10 @@ module.exports = {
'reference/addons/rollout', 'reference/addons/rollout',
'reference/addons/fluxcd', 'reference/addons/fluxcd',
{ {
"Cloud Resources": [ 'Cloud Resources': [
'reference/addons/terraform', 'reference/addons/terraform',
'reference/addons/crossplane', 'reference/addons/crossplane',
] ],
}, },
'reference/addons/ai', 'reference/addons/ai',
'reference/addons/traefik', 'reference/addons/traefik',

View File

@ -1,5 +1,5 @@
--- ---
title: Generating UI Forms title: Generating OpenAPI Schema
--- ---
For any capabilities installed via [Definition Objects](./definition-and-templates), For any capabilities installed via [Definition Objects](./definition-and-templates),
@ -70,20 +70,8 @@ data:
Specifically, this schema is generated based on `parameter` section in capability definition: Specifically, this schema is generated based on `parameter` section in capability definition:
* For CUE based definition: the `parameter` is a keyword in CUE template. * For CUE based definition: the `parameter` is a keyword in CUE template.
* For Helm based definition: the `parameter` is generated from `values.yaml` in Helm chart. * For Terraform based definition: the `variable` is the keyword in TF template.
## Render Form ## Next
You can render above schema into a form by [form-render](https://github.com/alibaba/form-render) or [React JSON Schema form](https://github.com/rjsf-team/react-jsonschema-form) and integrate with your dashboard easily. Refer to [UX of Definition](../reference/ui-schema)
Below is a form rendered with `form-render`:
![](../resources/json-schema-render-example.jpg)
### Helm Based Components
If a Helm based component definition is installed in KubeVela, it will also generate OpenAPI v3 JSON schema based on the [`values.schema.json`](https://helm.sh/docs/topics/charts/#schema-files) in the Helm chart, and store it in the `ConfigMap` following convention above. If `values.schema.json` is not provided by the chart author, KubeVela will automatically generate OpenAPI v3 JSON schema based on its `values.yaml` file automatically.
# What's Next
It's by design that KubeVela supports multiple ways to define the schematic. Hence, we will explain `.schematic` field in detail with following guides.

View File

@ -37,7 +37,7 @@ In the UI we want the user to be able to set the number of replicas via a number
![ui schema](../resources/ui-schema.jpg) ![ui schema](../resources/ui-schema.jpg)
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. Its workflow is in the figure above. The API Schema is [generated through the defined CUE](../platform-engineers/openapi-v3-json-schema), 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: The spec are as follows:
@ -87,15 +87,17 @@ The spec are as follows:
- [x] Ignore: There are subordinate fields, and the current field is not displayed. - [x] Ignore: There are subordinate fields, and the current field is not displayed.
- [x] SecretSelect: Load the secret list to assist user selection - [x] SecretSelect: Load the secret list to assist user selection
- [x] SecretKeySelect: Load the secret key list by secret name of the user selected to assist user selection - [x] SecretKeySelect: Load the secret key list by the secret name of the user selected to assist user selection
- [x] CPUNumber: CPU-style number input form. - [x] CPUNumber: CPU-style number input form.
- [x] MemoryNumber: Memory-style number input form. - [x] MemoryNumber: Memory-style number input form.
- [x] DiskNumber: Disk-style number input form. - [x] DiskNumber: Disk-style number input form.
- [x] K8sObjectsCode: The yaml input form of kubernetes resource. - [x] K8sObjectsCode: The YAML input form of Kubernetes resource.
- [x] HelmRepoSelect: Load the helm repositories from integration configs to assist user selection. - [x] HelmRepoSelect: Load the helm repositories from integration configs to assist user selection.
- [x] HelmChartSelect: Load the helm charts to assist user selection. - [x] HelmChartSelect: Load the helm charts to assist user selection.
- [x] HelmChartVersionSelect: Load the versions of selected helm chart to assist user selection. - [x] HelmChartVersionSelect: Load the versions of the selected helm chart to assist user selection.
- [x] HelmValues: Load the default values of selected helm chart and version to assist user config the custom values. - [x] HelmValues: Load the default values of the selected helm chart and version to assist the user to configure the custom values.
- [x] PolicySelect: Load the policies of the current application to assist user selection.
- [x] ImageInput: Load and show the image info by users input image name.
#### Combination form #### Combination form

View File

@ -171,6 +171,7 @@
"platform-engineers/workflow/working-mechanism", "platform-engineers/workflow/working-mechanism",
{ {
"UX Customization": [ "UX Customization": [
"platform-engineers/openapi-v3-json-schema",
"reference/ui-schema", "reference/ui-schema",
"reference/topology-rule" "reference/topology-rule"
] ]