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
9 http://www.apache.org/licenses/LICENSE-2.0
\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
17 SPDX-License-Identifier: Apache-2.0
\r
18 ============LICENSE_END=========================================================
\r
20 @authors: ronan.kenny@ericsson.com, waqas.ikram@ericsson.com
\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 import { NgxSpinnerService } from 'ngx-spinner';
\r
39 selector: 'app-details',
\r
40 templateUrl: './details.component.html',
\r
41 styleUrls: ['./details.component.scss'],
\r
42 encapsulation: ViewEncapsulation.None
\r
45 export class DetailsComponent implements OnInit {
\r
49 processInstanceID: string;
\r
51 processDefinitionID: string;
\r
53 processDefinitionName: string;
\r
55 activityInstance: ACTINST[];
\r
57 processInstance: PII;
\r
59 processDefinition: PDI;
\r
61 variableInstance: VarInstance[];
\r
63 displayedColumns = ['activityId', 'activityName', 'activityType', 'startTime', 'endTime', 'durationInMillis'];
\r
65 displayedColumnsVariable = ['name', 'type', 'value'];
\r
67 constructor(private route: ActivatedRoute, private data: DataService, private popup: ToastrNotificationService,
\r
68 private router: Router, private spinner: NgxSpinnerService) { }
\r
70 getActInst(procInstId: string) {
\r
71 this.data.getActivityInstance(procInstId).subscribe(
\r
72 (data: ACTINST[]) => {
\r
73 this.activityInstance = data;
\r
77 this.popup.error("Unable to get activity instance details for id: " + procInstId + " Error code:" + error.status);
\r
81 async getProcessDefinition(procDefId) {
\r
82 await this.data.getProcessDefinition(procDefId).subscribe(
\r
83 async (data: PDI) => {
\r
84 this.processDefinition = data;
\r
86 await this.displayCamundaflow(this.processDefinition.processDefinitionXml, this.activityInstance, this.router);
\r
89 this.popup.error("Unable to get process definition for id: " + procDefId + " Error code:" + error.status);
\r
93 async getProcInstance(procInstId) {
\r
94 await this.data.getProcessInstance(procInstId).then(
\r
95 async (data: PII) => {
\r
96 this.processInstance = data;
\r
97 this.processDefinitionID = this.processInstance.processDefinitionId;
\r
98 this.processDefinitionName = this.processInstance.processDefinitionName;
\r
99 console.log("Process definition id: " + this.processDefinitionID);
\r
100 await this.getActInst(this.processInstanceID);
\r
101 await this.getProcessDefinition(this.processDefinitionID);
\r
103 console.log(error);
\r
104 this.popup.error("Unable to get process instance for id: " + procInstId + " Error code:" + error.status);
\r
108 displayCamundaflow(bpmnXml, activities: ACTINST[], r: Router) {
\r
109 this.spinner.show();
\r
111 this.bpmnViewer.importXML(bpmnXml, (error) => {
\r
113 console.error('Unable to load BPMN flow ', error);
\r
114 this.popup.error('Unable to load BPMN flow ');
\r
115 this.spinner.hide();
\r
117 this.spinner.hide();
\r
118 let canvas = this.bpmnViewer.get('canvas');
\r
119 var eventBus = this.bpmnViewer.get('eventBus');
\r
120 eventBus.on('element.click', function(e) {
\r
122 activities.forEach(a => {
\r
123 if (a.activityId == e.element.id && a.calledProcessInstanceId !== null) {
\r
124 console.log("will drill down to : " + a.calledProcessInstanceId);
\r
125 r.navigate(['/details/' + a.calledProcessInstanceId]);
\r
126 this.spinner.show();
\r
130 // zoom to fit full viewport
\r
131 canvas.zoom('fit-viewport');
\r
132 activities.forEach(a => {
\r
133 canvas.addMarker(a.activityId, 'highlight');
\r
139 getVarInst(procInstId) {
\r
140 this.data.getVariableInstance(procInstId).subscribe(
\r
141 (data: VarInstance[]) => {
\r
142 this.variableInstance = data;
\r
145 console.log(error);
\r
146 this.popup.error("Unable to get Variable instances for id: " + procInstId + " Error code:" + error.status);
\r
151 this.bpmnViewer = new Viewer({
\r
152 container: '.canvas'
\r
154 this.route.params.subscribe(
\r
156 this.processInstanceID = params.id as string;
\r
157 console.log("Will GET Process instanc using id: " + this.processInstanceID);
\r
158 await this.getProcInstance(this.processInstanceID);
\r
160 this.getVarInst(this.processInstanceID);
\r