[DSIP-15][UI][Task] Render task components by JSON.

[Amy0104]

Search before asking

• I had searched in the issues and found no similar feature requirement.

Description

Purpose

Task components can be rendered by a JSON returned from back end so that adding, deleting and changing task components without redeployment.

How

This is a preliminary implementation. If you have ideas or questions, please let us know by leaving a comment.

The operation flow chart is as shown in Chart 1-1.

Chart 1-1: the operation flow chart.

The managers chart is as shown in Chart 1-2.

Chart 1-2: the managers chart.

Here let's briefly introduce the managers.

Parser Manager

parser	issue	status
Form Item
Template
Locales
Options

Form Item

Form Item supports all the props of the FormItemGi component in Naive UI and others keys such as type and field. Here is an example shown as in Json 1-1.

{ 
  "type": "select",
  "field": "processDefinitionCode",
  "span": 24,
  "name": "project.node.child_node"
}

Json 1-1: form item example.

Template

We will parse the template through the template method of lodashjs.

Locales

Locales are configured separately as shown in Json 1-2. To get the specific value from locales, we use dot notation as shown in Json 1-3.

{
  "zh_CN": {
    "task": {
      "name": "名称"
    }
  },
  "en_US": {
    "task": {
      "name": "Name"
    }
  }
}

Json 1-2: the locales configuration example

{
 "label": "task.name"
}

Json 1-3: get the specific value from locales

Options

Options are also configured separately as shown in Json 1-4 because there will be a common situation of different tasks. To the specific value without any cases, we can just set the key of the option shown as in Json 1-5. Sometimes we need to get dropdown options for different cases with an expression shown in Json 1-6.

{
  "options": {
    "status": [
      {
        "value": "SUCCESS",
        "label": "project.node.success"
      },
      {
        "value": "FAILURE",
        "label": "project.node.failed"
      }
    ]
  }
}

Json 1-4: the options configuration example

{
  "type": "select",
  "field": "status",
  "span": 10,
  "options": "status"
}

Json 1-5: options in one case

{
  "type": "select",
  "field": "status",
  "span": 10,
  "options": {
    "${a} === 1" : "status"
  }
}

Json 1-6: options in more than one case

Component Manager

Normal components

Component	issue	status
input
radio
editor
switch
input-number
select
checkbox
tree-select

Business Components

Component	issue	status
custom-parameters
relation
datasource
timeout
environment
executor
failed
task-group

Custom Component

Component	issue	status
custom

Validator Manager

Validators

validator	issue	status
required
condition

Rules

rule	issue	status
integer
value change

Action Manager

action	issue	status
request
url

Request

To get options by http request. Here is an example with a parameter shown as in Json 1-7.

[
  {
    "label": "选项1",
    "type": "select",
    "name": "a",
    "options": "aOptions"
  },
  {
    "label": "选项2",
    "type": "select",
    "name": "b",
    "source": "/ds/api/options/level2?a=${a}",
  }
]

Json 1-7 request action example

Value Change

After the value of one form item changes, other form items will be shown or hidden.

Evaluator Manager

evaluator	issue	status
expression
variable

Formatter Manager

formatter	issue	status
inout

Data Manager

Includes cached data and others.

Adaptor Manager

adaptor	issue	status
error

JSON Struct

{ 
  "locales": {
    "zh_CN": {},
    "en_US": {}
  },
  "options": {},
  "tasks": []
}

Json 1-8: JSON struct.

Are you willing to submit a PR?

• Yes I am willing to submit a PR!

Code of Conduct

• I agree to follow this project's Code of Conduct

[github-actions]

Thank you for your feedback, we have received your issue, Please wait patiently for a reply.

• In order for us to understand your request as soon as possible, please provide detailed information、version or pictures.
• If you haven't received a reply for a long time, you can join our slack and send your question to channel #troubleshooting

[songjianet]

This task has been placed in the community for a while, and there are still no developers willing to contribute. For this reason, I will disassemble the requirements of this part and make a simplified version of the implementation. Please check #12526.