Merge pull request #1729 from WeBankPartners/1678_enhance_for_plugin

enhance for workflow exec, change hover to single click

wecube-portal/src/locale/i18n/en-US.json

@@ -416,5 +416,6 @@
   "please_paste_here": "Please Paste Here",
   "delete_node": "Delete Node",
   "remove": "Remove",
-  "completely_deleted": "It Will Be Completely Deleted After Clicking Save"
+  "completely_deleted": "It Will Be Completely Deleted After Clicking Save",
+  "show_log": "Show Log"
 }

wecube-portal/src/locale/i18n/zh-CN.json

@@ -415,5 +415,6 @@
   "please_choose": "请选择",
   "please_paste_here": "请在这粘贴",
   "delete_node": "删除此节点",
-  "completely_deleted": "点击保存后将完全删除"
+  "completely_deleted": "点击保存后将完全删除",
+  "show_log": "查看日志"
 }

wecube-portal/src/pages/implementation/workflow-execution.vue

@@ -34,9 +34,9 @@
         </Col>
         <Col span="4" style="text-align: right;margin-bottom:8px;padding-right:40px;float:right;">
           <Button type="info" v-if="!isEnqueryPage" @click="queryHistory">{{ $t('enquery_new_workflow_job') }}</Button>
-          <Button type="success" v-if="isEnqueryPage" @click="createHandler">{{
-            $t('create_new_workflow_job')
-          }}</Button>
+          <Button type="success" v-if="isEnqueryPage" @click="createHandler">
+            {{ $t('create_new_workflow_job') }}
+          </Button>
         </Col>
       </Row>
       <Row>
@@ -53,9 +53,9 @@
                     @on-open-change="getAllFlow"
                     filterable
                   >
-                    <Option v-for="item in allFlows" :value="item.procDefId" :key="item.procDefId">
-                      {{ item.procDefName + ' ' + item.createdTime }}
-                    </Option>
+                    <Option v-for="item in allFlows" :value="item.procDefId" :key="item.procDefId">{{
+                      item.procDefName + ' ' + item.createdTime
+                    }}</Option>
                   </Select>
                 </FormItem>
               </Form>
@@ -90,9 +90,9 @@
         </Row>
       </Row>
       <div style="text-align: right;margin-top: 6px;margin-right:40px">
-        <Button v-if="showExcution" :disabled="isExecuteActive" style="width:120px" type="info" @click="excutionFlow">
-          {{ $t('execute') }}
-        </Button>
+        <Button v-if="showExcution" :disabled="isExecuteActive" style="width:120px" type="info" @click="excutionFlow">{{
+          $t('execute')
+        }}</Button>
       </div>
     </Card>
     <Modal
@@ -105,6 +105,9 @@
       <div class="workflowActionModal-container" style="text-align: center;margin-top: 20px;">
         <Button type="info" @click="workFlowActionHandler('retry')">{{ $t('retry') }}</Button>
         <Button type="info" @click="workFlowActionHandler('skip')" style="margin-left: 20px">{{ $t('skip') }}</Button>
+        <Button type="info" @click="workFlowActionHandler('showlog')" style="margin-left: 20px">{{
+          $t('show_log')
+        }}</Button>
       </div>
     </Modal>
     <Modal
@@ -472,6 +475,8 @@ export default {
           this.initFlowGraph(true)
           removeEvent('.retry', 'click', this.retryHandler)
           addEvent('.retry', 'click', this.retryHandler)
+          removeEvent('.normal', 'click', this.normalHandler)
+          addEvent('.normal', 'click', this.normalHandler)
           d3.selectAll('.retry').attr('cursor', 'pointer')
 
           this.showExcution = false
@@ -665,7 +670,7 @@ export default {
                 excution ? 'filled' : 'none'
               }" color="${excution ? statusColor[_.status] : '#7F8A96'}" shape="circle", id="${_.nodeId}"]`
             } else {
-              const className = _.status === 'Faulted' || _.status === 'Timeouted' ? 'retry' : ''
+              const className = _.status === 'Faulted' || _.status === 'Timeouted' ? 'retry' : 'normal'
               return `${_.nodeId} [fixedsize=false label="${(_.orderedNo ? _.orderedNo + ' ' : '') +
                 _.nodeName}" class="flow ${className}" style="${excution ? 'filled' : 'none'}" color="${
                 excution ? statusColor[_.status] : _.nodeId === this.currentFlowNodeId ? '#5DB400' : '#7F8A96'
@@ -774,6 +779,8 @@ export default {
         this.initFlowGraph(true)
         removeEvent('.retry', 'click', this.retryHandler)
         addEvent('.retry', 'click', this.retryHandler)
+        removeEvent('.normal', 'click', this.normalHandler)
+        addEvent('.normal', 'click', this.normalHandler)
         d3.selectAll('.retry').attr('cursor', 'pointer')
         if (data.status === 'Completed') {
           this.stop()
@@ -789,24 +796,31 @@ export default {
       this.targetModalVisible = false
       this.showNodeDetail = false
     },
+    normalHandler (e) {
+      this.flowGraphMouseenterHandler(e.target.parentNode.getAttribute('id'))
+    },
     async workFlowActionHandler (type) {
       const found = this.flowData.flowNodes.find(_ => _.nodeId === this.currentFailedNodeID)
       if (!found) {
         return
       }
-      const payload = {
-        act: type,
-        nodeInstId: found.id,
-        procInstId: found.procInstId
-      }
-      const { status } = await retryProcessInstance(payload)
-      if (status === 'OK') {
-        this.$Notice.success({
-          title: 'Success',
-          desc: (type === 'retry' ? 'Retry' : 'Skip') + ' action is proceed successfully'
-        })
-        this.workflowActionModalVisible = false
-        this.processInstance()
+      if (type === 'showlog') {
+        this.flowGraphMouseenterHandler(this.currentFailedNodeID)
+      } else {
+        const payload = {
+          act: type,
+          nodeInstId: found.id,
+          procInstId: found.procInstId
+        }
+        const { status } = await retryProcessInstance(payload)
+        if (status === 'OK') {
+          this.$Notice.success({
+            title: 'Success',
+            desc: (type === 'retry' ? 'Retry' : 'Skip') + ' action is proceed successfully'
+          })
+          this.workflowActionModalVisible = false
+          this.processInstance()
+        }
       }
     },
     bindFlowEvent () {
@@ -820,9 +834,9 @@ export default {
         addEvent('.flow', 'click', this.flowNodesClickHandler)
       } else {
         removeEvent('.flow', 'click', this.flowNodesClickHandler)
-        removeEvent('.flow text', 'mouseenter', this.flowGraphMouseenterHandler)
+        // removeEvent('.flow text', 'mouseenter', this.flowGraphMouseenterHandler)
         removeEvent('.flow text', 'mouseleave', this.flowGraphLeaveHandler)
-        addEvent('.flow text', 'mouseenter', this.flowGraphMouseenterHandler)
+        // addEvent('.flow text', 'mouseenter', this.flowGraphMouseenterHandler)
         addEvent('.flow text', 'mouseleave', this.flowGraphLeaveHandler)
       }
     },
@@ -830,13 +844,15 @@ export default {
       clearTimeout(this.flowDetailTimer)
       this.flowDetailLeaveHandler()
     },
-    flowGraphMouseenterHandler (e) {
+    flowGraphMouseenterHandler (id) {
+      // Task_0f9a25l
       clearTimeout(this.flowDetailTimer)
       this.flowDetailTimer = setTimeout(async () => {
-        const found = this.flowData.flowNodes.find(_ => _.nodeId === e.target.parentNode.id)
+        const found = this.flowData.flowNodes.find(_ => _.nodeId === id)
         this.nodeTitle = (found.orderedNo ? found.orderedNo + '、' : '') + found.nodeName
         const { status, data } = await getNodeContext(found.procInstId, found.id)
         if (status === 'OK') {
+          this.workflowActionModalVisible = false
           this.nodeDetailResponseHeader = JSON.parse(JSON.stringify(data))
           delete this.nodeDetailResponseHeader.requestObjects
           this.nodeDetailResponseHeader = JSON.stringify(this.replaceParams(this.nodeDetailResponseHeader))
@@ -883,9 +899,9 @@ export default {
       this.currentNodeTitle = `${currentNode.orderedNo}、${currentNode.nodeName}`
       this.highlightModel(g.id, currentNode.nodeDefId)
       this.renderFlowGraph()
-      this.renderModelGraph()
     },
     async highlightModel (nodeId, nodeDefId) {
+      console.log(this.processSessionId)
       if (nodeDefId && this.processSessionId) {
         let { status, data } = await getDataByNodeDefIdAndProcessSessionId(nodeDefId, this.processSessionId)
         if (status === 'OK') {