so-monitoring/so-monitoring-ui/src/main/frontend/src/app/details/details.component.ts

   1 /**\r
   2 ============LICENSE_START=======================================================\r
   3  Copyright (C) 2018 Ericsson. All rights reserved.\r
   4 ================================================================================\r
   5 Licensed under the Apache License, Version 2.0 (the "License");\r
   6 you may not use this file except in compliance with the License.\r
   7 You may obtain a copy of the License at\r
   8 \r
   9     http://www.apache.org/licenses/LICENSE-2.0\r
  10 \r
  11 Unless required by applicable law or agreed to in writing, software\r
  12 distributed under the License is distributed on an "AS IS" BASIS,\r
  13 WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\r
  14 See the License for the specific language governing permissions and\r
  15  limitations under the License.\r
  16 \r
  17 SPDX-License-Identifier: Apache-2.0\r
  18 ============LICENSE_END=========================================================\r
  19 \r
  20 @authors: ronan.kenny@ericsson.com, waqas.ikram@ericsson.com\r
  21 */\r
  22 \r
  23 import { Component, OnInit } from '@angular/core';\r
  24 import { DataService } from '../data.service';\r
  25 import { ActivatedRoute, Router } from "@angular/router";\r
  26 import { Process } from '../model/process.model';\r
  27 import { ACTINST } from '../model/activityInstance.model';\r
  28 import { PII } from '../model/processInstance.model';\r
  29 import { PDI } from '../model/processDefinition.model';\r
  30 import { CommonModule } from '@angular/common';\r
  31 import Viewer from 'bpmn-js/lib/NavigatedViewer';\r
  32 import { ViewEncapsulation } from '@angular/core';\r
  33 import { MatTabsModule } from '@angular/material/tabs';\r
  34 import { VarInstance } from '../model/variableInstance.model';\r
  35 import { ToastrNotificationService } from '../toastr-notification-service.service';\r
  36 \r
  37 @Component({\r
  38   selector: 'app-details',\r
  39   templateUrl: './details.component.html',\r
  40   styleUrls: ['./details.component.scss'],\r
  41   encapsulation: ViewEncapsulation.None\r
  42 })\r
  43 \r
  44 export class DetailsComponent implements OnInit {\r
  45 \r
  46   bpmnViewer: any;\r
  47 \r
  48   processInstanceID: string;\r
  49 \r
  50   processDefinitionID: string;\r
  51 \r
  52   processDefinitionName: string;\r
  53 \r
  54   activityInstance: ACTINST[];\r
  55 \r
  56   processInstance: PII;\r
  57 \r
  58   processDefinition: PDI;\r
  59 \r
  60   variableInstance: VarInstance[];\r
  61 \r
  62   displayedColumns = ['activityId', 'activityName', 'activityType', 'startTime', 'endTime', 'durationInMillis'];\r
  63 \r
  64   displayedColumnsVariable = ['name', 'type', 'value'];\r
  65 \r
  66   constructor(private route: ActivatedRoute, private data: DataService, private popup: ToastrNotificationService, private router: Router) { }\r
  67 \r
  68   getActInst(procInstId: string) {\r
  69     this.data.getActivityInstance(procInstId).subscribe(\r
  70       (data: ACTINST[]) => {\r
  71         this.activityInstance = data;\r
  72         console.log(data);\r
  73       }, error => {\r
  74         console.log(error);\r
  75         this.popup.error("Unable to get activity instance details for id: " + procInstId + " Error code:" + error.status);\r
  76       });\r
  77   }\r
  78 \r
  79   async getProcessDefinition(procDefId) {\r
  80     await this.data.getProcessDefinition(procDefId).subscribe(\r
  81       async (data: PDI) => {\r
  82         this.processDefinition = data;\r
  83         console.log(data);\r
  84         await this.displayCamundaflow(this.processDefinition.processDefinitionXml, this.activityInstance, this.router);\r
  85       }, error => {\r
  86         console.log(error);\r
  87         this.popup.error("Unable to get process definition for id: " + procDefId + " Error code:" + error.status);\r
  88       });\r
  89   }\r
  90 \r
  91   async  getProcInstance(procInstId) {\r
  92     await this.data.getProcessInstance(procInstId).then(\r
  93       async (data: PII) => {\r
  94         this.processInstance = data;\r
  95         this.processDefinitionID = this.processInstance.processDefinitionId;\r
  96         this.processDefinitionName = this.processInstance.processDefinitionName;\r
  97         console.log("Process definition id: " + this.processDefinitionID);\r
  98         await this.getActInst(this.processInstanceID);\r
  99         await this.getProcessDefinition(this.processDefinitionID);\r
 100       }, error => {\r
 101         console.log(error);\r
 102         this.popup.error("Unable to get process instance for id: " + procInstId + " Error code:" + error.status);\r
 103       });\r
 104   }\r
 105 \r
 106   displayCamundaflow(bpmnXml, activities: ACTINST[], r: Router) {\r
 107 \r
 108     this.bpmnViewer.importXML(bpmnXml, (error) => {\r
 109       if (error) {\r
 110         console.error('Unable to load BPMN flow ', error);\r
 111         this.popup.error('Unable to load BPMN flow ');\r
 112       } else {\r
 113         let canvas = this.bpmnViewer.get('canvas');\r
 114         var eventBus = this.bpmnViewer.get('eventBus');\r
 115         eventBus.on('element.click', function(e) {\r
 116 \r
 117           activities.forEach(a => {\r
 118             if (a.activityId == e.element.id && a.calledProcessInstanceId !== null) {\r
 119               console.log("will drill down to : " + a.calledProcessInstanceId);\r
 120               r.navigate(['/details/' + a.calledProcessInstanceId]);\r
 121             }\r
 122           });\r
 123         });\r
 124         // zoom to fit full viewport\r
 125         canvas.zoom('fit-viewport');\r
 126         activities.forEach(a => {\r
 127           canvas.addMarker(a.activityId, 'highlight');\r
 128         });\r
 129       }\r
 130     });\r
 131   }\r
 132 \r
 133   getVarInst(procInstId) {\r
 134     this.data.getVariableInstance(procInstId).subscribe(\r
 135       (data: VarInstance[]) => {\r
 136         this.variableInstance = data;\r
 137         console.log(data);\r
 138       }, error => {\r
 139         console.log(error);\r
 140         this.popup.error("Unable to get Variable instances for id: " + procInstId + " Error code:" + error.status);\r
 141       });\r
 142   }\r
 143 \r
 144   async ngOnInit() {\r
 145     this.bpmnViewer = new Viewer({\r
 146       container: '.canvas'\r
 147     });\r
 148     this.route.params.subscribe(\r
 149       async params => {\r
 150         this.processInstanceID = params.id as string;\r
 151         console.log("Will GET Process instanc using id: " + this.processInstanceID);\r
 152         await this.getProcInstance(this.processInstanceID);\r
 153 \r
 154         this.getVarInst(this.processInstanceID);\r
 155       });\r
 156   }\r
 157 }\r