[Feature-4423][UI] When the process definition is running, the pop-up box can manually set the global parameters. (#4433)

* [DS-130][feat] pass global param values when starting new process instance
    add optional param for start-process-instance api
    reuse command_param in command table for persistence
    overload curingGlobalParams function in ParameterUtils
    not adapt the UI code yet

* change import order

* support datetime expression

* print start params

* (fix) avoid npe when cmdParam is null

Change-Id: I3b4c4b5fa1df316ff221e27146e45d7d4d3a404e

* [Feature-4423][UI] When the process definition is running, the pop-up box can manually set the global parameters
(frontend) adapt the UI code
(backend-fix) add empty string check for param

Change-Id: I710db55f5059f8bd324c79f4494f2798d58e7b19

* add Startup parameters label

Change-Id: I5ac82031ea1b64abec330ee8cf2991477a28fcaa

* reuse i18n label

Change-Id: I5f322cb1dd8e2cade0c679bd025fc984e31bf3ae

dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/_source/localParams.vue

@@ -59,7 +59,7 @@
         </el-select>
       </template>
       <el-input
-              :disabled="isDetails"
+              :disabled="isDetails && !isStartProcess"
               type="text"
               size="small"
               v-model="localParamsList[$index].value"
@@ -68,18 +68,18 @@
               @blur="_handleValue()"
               :style="inputStyle">
       </el-input>
-      <span class="lt-add">
+      <span class="lt-add" v-show="!isStartProcess">
         <a href="javascript:" style="color:red;" @click="!isDetails && _removeUdp($index)" >
           <em class="el-icon-delete" :class="_isDetails" data-toggle="tooltip" :title="$t('delete')" ></em>
         </a>
       </span>
-      <span class="add" v-if="$index === (localParamsList.length - 1)">
+      <span class="add" v-if="$index === (localParamsList.length - 1)" v-show="!isStartProcess">
         <a href="javascript:" @click="!isDetails && _addUdp()" >
           <em class="el-icon-circle-plus-outline" :class="_isDetails" data-toggle="tooltip" :title="$t('Add')"></em>
         </a>
       </span>
     </div>
-    <span class="add-dp" v-if="!localParamsList.length">
+    <span class="add-dp" v-if="!localParamsList.length" v-show="!isStartProcess">
       <a href="javascript:" @click="!isDetails && _addUdp()" >
         <em class="iconfont el-icon-circle-plus-outline" :class="_isDetails" data-toggle="tooltip" :title="$t('Add')"></em>
       </a>
@@ -112,6 +112,10 @@
       hide: {
         type: Boolean,
         default: true
+      },
+      isStartProcess: {
+        type: Boolean,
+        default: false
       }
     },
     methods: {

dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/definition/pages/list/_source/start.vue

@@ -125,6 +125,22 @@
         </div>
       </div>
     </div>
+    <div class="clearfix list">
+      <div class="text">
+        <span>{{$t('Startup parameter')}}</span>
+      </div>
+      <div class="cont" style="width: 688px;">
+        <div style="padding-top: 6px;">
+          <m-local-params
+                  ref="refLocalParams"
+                  @on-local-params="_onLocalParams"
+                  :udp-list="udpList"
+                  :hide="false"
+                  :isStartProcess="true">
+          </m-local-params>
+        </div>
+      </div>
+    </div>
     <template v-if="execType">
       <div class="clearfix list" style="margin:-6px 0 16px 0">
         <div class="text">
@@ -163,12 +179,16 @@
   </div>
 </template>
 <script>
+  import _ from 'lodash'
   import dayjs from 'dayjs'
   import mEmail from './email.vue'
   import store from '@/conf/home/store'
   import { warningTypeList } from './util'
   import mPriority from '@/module/components/priority/priority'
   import mWorkerGroups from '@/conf/home/pages/dag/_source/formModel/_source/workerGroups'
+  import mLocalParams from '@/conf/home/pages/dag/_source/formModel/tasks/_source/localParams'
+  import disabledState from '@/module/mixin/disabledState'
+  import { mapMutations } from 'vuex'
 
   export default {
     name: 'start-process',
@@ -190,10 +210,13 @@
         receiversCc: [],
         runMode: 'RUN_MODE_SERIAL',
         processInstancePriority: 'MEDIUM',
-        workerGroup: 'default'
+        workerGroup: 'default',
-
+        // Global custom parameters
+        definitionGlobalParams: [],
+        udpList: []
       }
     },
+    mixins: [disabledState],
     props: {
       startData: Object,
       startNodeList: {
@@ -203,11 +226,21 @@
       sourceType: String
     },
     methods: {
+      ...mapMutations('dag', ['setIsDetails', 'resetParams']),
+      _onLocalParams (a) {
+        this.udpList = a
+      },
       _datepicker (val) {
         this.scheduleTime = val
       },
       _start () {
         this.spinnerLoading = true
+        let startParams = {}
+        for (const item of this.udpList) {
+          if (item.value !== '') {
+            startParams[item.prop] = item.value
+          }
+        }
         let param = {
           processDefinitionId: this.startData.id,
           scheduleTime: this.scheduleTime.length && this.scheduleTime.join(',') || '',
@@ -221,7 +254,8 @@
           processInstancePriority: this.processInstancePriority,
           receivers: this.receivers.join(',') || '',
           receiversCc: this.receiversCc.join(',') || '',
-          workerGroup: this.workerGroup
+          workerGroup: this.workerGroup,
+          startParams: !_.isEmpty(startParams) ? JSON.stringify(startParams) : ''
         }
         // Executed from the specified node
         if (this.sourceType === 'contextmenu') {
@@ -230,6 +264,8 @@
         this.store.dispatch('dag/processStart', param).then(res => {
           this.$message.success(res.msg)
           this.$emit('onUpdateStart')
+          // recovery
+          this.udpList = _.cloneDeep(this.definitionGlobalParams)
           setTimeout(() => {
             this.spinnerLoading = false
             this.close()
@@ -253,6 +289,13 @@
           this.receiversCc = res.receiversCc && res.receiversCc.split(',') || []
         })
       },
+      _getGlobalParams () {
+        this.setIsDetails(true)
+        this.store.dispatch('dag/getProcessDetails', this.startData.id).then(res => {
+          this.definitionGlobalParams = _.cloneDeep(this.store.state.dag.globalParams)
+          this.udpList = _.cloneDeep(this.store.state.dag.globalParams)
+        })
+      },
       ok () {
         this._start()
       },
@@ -270,6 +313,7 @@
       this.workflowName = this.startData.name
 
       this._getReceiver()
+      this._getGlobalParams()
       let stateWorkerGroupsList = this.store.state.security.workerGroupsListAll || []
       if (stateWorkerGroupsList.length) {
         this.workerGroup = stateWorkerGroupsList[0].id
@@ -292,7 +336,7 @@
       this.workflowName = this.startData.name
     },
     computed: {},
-    components: { mEmail, mPriority, mWorkerGroups }
+    components: { mEmail, mPriority, mWorkerGroups, mLocalParams }
   }
 </script>