Amy0104 opened a new issue, #11198: URL: https://github.com/apache/dolphinscheduler/issues/11198
### Search before asking - [X] I had searched in the [issues](https://github.com/apache/dolphinscheduler/issues?q=is%3Aissue) 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. ```json { "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. ```json { "zh_CN": { "task": { "name": "名称" } }, "en_US": { "task": { "name": "Name" } } } ``` ##### Json 1-2: the locales configuration example ```json { "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. ```json { "options": { "status": [ { "value": "SUCCESS", "label": "project.node.success" }, { "value": "FAILURE", "label": "project.node.failed" } ] } } ``` ##### Json 1-4: the options configuration example ```json { "type": "select", "field": "status", "span": 10, "options": "status" } ``` ##### Json 1-5: options in one case ```json { "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. ```json [ { "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 ```json { "locales": { "zh_CN": {}, "en_US": {} }, "options": {}, "tasks": [] } ``` ##### Json 1-8: JSON struct. ### Are you willing to submit a PR? - [X] Yes I am willing to submit a PR! ### Code of Conduct - [X] I agree to follow this project's [Code of Conduct](https://www.apache.org/foundation/policies/conduct) -- This is an automated message from the Apache Git Service. To respond to the message, please log on to GitHub and use the URL above to go to the specific comment. To unsubscribe, e-mail: [email protected] For queries about this service, please contact Infrastructure at: [email protected]
