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

   1 /**
   2 ============LICENSE_START=======================================================
   3  Copyright (C) 2018 Ericsson. All rights reserved.
   4 ================================================================================
   5 Licensed under the Apache License, Version 2.0 (the "License");
   6 you may not use this file except in compliance with the License.
   7 You may obtain a copy of the License at
   8
   9     http://www.apache.org/licenses/LICENSE-2.0
  10
  11 Unless required by applicable law or agreed to in writing, software
  12 distributed under the License is distributed on an "AS IS" BASIS,
  13 WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  14 See the License for the specific language governing permissions and
  15  limitations under the License.
  16
  17 SPDX-License-Identifier: Apache-2.0
  18 ============LICENSE_END=========================================================
  19
  20 @authors: ronan.kenny@est.tech, waqas.ikram@est.tech
  21 */
  22
  23 import { Component, OnInit } from '@angular/core';
  24 import { DataService } from '../data.service';
  25 import { ActivatedRoute, Router } from "@angular/router";
  26 import { BpmnInfraRequest } from '../model/bpmnInfraRequest.model';
  27 import { ActivityInstance } from '../model/activityInstance.model';
  28 import { ProcessInstanceDetail } from '../model/processInstance.model';
  29 import { ProcessDefinitionDetail } from '../model/processDefinition.model';
  30 import { CommonModule } from '@angular/common';
  31 import Viewer from 'bpmn-js/lib/NavigatedViewer';
  32 import { ViewEncapsulation } from '@angular/core';
  33 import { MatTabsModule } from '@angular/material/tabs';
  34 import { VariableInstance } from '../model/variableInstance.model';
  35 import { ToastrNotificationService } from '../toastr-notification-service.service';
  36 import { NgxSpinnerService } from 'ngx-spinner';
  37 import { ElementRef, ViewChild } from '@angular/core';
  38
  39 @Component({
  40   selector: 'app-details',
  41   templateUrl: './details.component.html',
  42   styleUrls: ['./details.component.scss'],
  43   encapsulation: ViewEncapsulation.None
  44 })
  45
  46 export class DetailsComponent implements OnInit {
  47
  48   @ViewChild("canvas") elementReference: ElementRef;
  49
  50   bpmnViewer: any;
  51
  52   processInstanceID: string;
  53
  54   processDefinitionID: string;
  55
  56   processDefinitionName: string;
  57
  58   activityInstance: ActivityInstance[];
  59
  60   processInstance: ProcessInstanceDetail;
  61
  62   processDefinition: ProcessDefinitionDetail;
  63
  64   variableInstance: VariableInstance[];
  65
  66   displayedColumns = ['activityId', 'activityName', 'activityType', 'startTime', 'endTime', 'durationInMillis'];
  67
  68   displayedColumnsVariable = ['name', 'type', 'value'];
  69
  70   constructor(private route: ActivatedRoute, private data: DataService, private popup: ToastrNotificationService,
  71     private router: Router, private spinner: NgxSpinnerService) { }
  72
  73   async getActivityInstance(procInstId: string) {
  74     await this.data.getActivityInstance(procInstId).then(
  75       (data: ActivityInstance[]) => {
  76         this.activityInstance = data;
  77         console.log(data);
  78       }, error => {
  79         console.log(error);
  80         this.popup.error("Unable to get activity instance details for id: " + procInstId + " Error code:" + error.status);
  81       });
  82   }
  83
  84   async getProcessDefinition(procDefId: string) {
  85     await this.data.getProcessDefinition(procDefId).subscribe(
  86       async (data: ProcessDefinitionDetail) => {
  87         this.processDefinition = data;
  88         console.log(data);
  89         await this.displayCamundaflow(this.processDefinition.processDefinitionXml, this.activityInstance,
  90           this.router, this.spinner, this.popup);
  91       }, error => {
  92         console.log(error);
  93         this.popup.error("Unable to get process definition for id: " + procDefId + " Error code:" + error.status);
  94       });
  95   }
  96
  97   async getProcInstance(procInstId: string) {
  98     await this.data.getProcessInstance(procInstId).then(
  99       async (data: ProcessInstanceDetail) => {
 100         this.processInstance = data;
 101         this.processDefinitionID = this.processInstance.processDefinitionId;
 102         this.processDefinitionName = this.processInstance.processDefinitionName;
 103         console.log("Process definition id: " + this.processDefinitionID);
 104         await this.getActivityInstance(this.processInstanceID);
 105         await this.getProcessDefinition(this.processDefinitionID);
 106       }, error => {
 107         console.log(error);
 108         this.popup.error("Unable to get process instance for id: " + procInstId + " Error code:" + error.status);
 109       });
 110   }
 111
 112   displayCamundaflow(bpmnXml, activities: ActivityInstance[], router: Router,
 113     spinner: NgxSpinnerService, popup: ToastrNotificationService) {
 114     spinner.show();
 115
 116     this.bpmnViewer.importXML(bpmnXml, (error) => {
 117       if (error) {
 118         console.error('Unable to load BPMN flow ', error);
 119         popup.error('Unable to load BPMN flow ');
 120         spinner.hide();
 121       } else {
 122         spinner.hide();
 123         let canvas = this.bpmnViewer.get('canvas');
 124         var eventBus = this.bpmnViewer.get('eventBus');
 125         var elementRegistry = this.bpmnViewer.get('elementRegistry');
 126         var overlays = this.bpmnViewer.get('overlays');
 127
 128         activities.forEach(a => {
 129           if (a.calledProcessInstanceId !== null) {
 130             var element = elementRegistry.get(a.activityId);
 131             let newNode = document.createElement('div');
 132             newNode.className = 'highlight-overlay';
 133             newNode.id = element.id;
 134             newNode.style.width = element.width + "px";
 135             newNode.style.height = element.height + "px";
 136             newNode.style.cursor = "pointer";
 137
 138             overlays.add(a.activityId, {
 139               position: {
 140                 top: -5,
 141                 left: -5
 142               },
 143               html: newNode
 144             });
 145
 146             newNode.addEventListener('click', function(e) {
 147               console.log("clicked on: " + e.srcElement.id)
 148               activities.forEach(a => {
 149                 if (a.activityId == e.srcElement.id && a.calledProcessInstanceId !== null) {
 150                   console.log("will drill down to : " + a.calledProcessInstanceId);
 151                   router.navigate(['/details/' + a.calledProcessInstanceId]);
 152                 }
 153               });
 154             });
 155           }
 156         });
 157         // zoom to fit full viewport
 158         canvas.zoom('fit-viewport', 'auto');
 159         activities.forEach(a => {
 160           canvas.addMarker(a.activityId, 'highlight');
 161         });
 162       }
 163     });
 164   }
 165
 166   zoomIn() {
 167     this.bpmnViewer.get('zoomScroll').zoom(1, {
 168       x: this.elementReference.nativeElement.offsetWidth / 2,
 169       y: this.elementReference.nativeElement.offsetHeight / 2
 170     });
 171   }
 172
 173   zoomOut() {
 174     this.bpmnViewer.get('zoomScroll').zoom(-1, {
 175       x: this.elementReference.nativeElement.offsetWidth / 2,
 176       y: this.elementReference.nativeElement.offsetHeight / 2
 177     });
 178   }
 179   resetZoom() {
 180     let canvas = this.bpmnViewer.get('canvas');
 181     canvas.resized();
 182     canvas.zoom('fit-viewport', 'auto');
 183
 184   }
 185
 186   getVarInst(procInstId: string) {
 187     this.data.getVariableInstance(procInstId).subscribe(
 188       (data: VariableInstance[]) => {
 189         this.variableInstance = [];
 190         for (let i = 0; i < data.length; i++) {
 191           var value = data[i]['value'];
 192           var type = data[i]['type'];
 193           if ((type == 'Object') && !(value == null)) {
 194             try {
 195               data[i]['value'] = JSON.stringify(value, null, 2);
 196             }
 197             catch (error) {
 198               console.log("Unable to \nError Code: " + error);
 199             }
 200           }
 201           this.variableInstance[i] = data[i];
 202         }
 203         console.log(data);
 204       }, error => {
 205         console.log(error);
 206         this.popup.error("Unable to get Variable instances for id: " + procInstId + " Error code:" + error.status);
 207       });
 208   }
 209
 210   async ngOnInit() {
 211     this.bpmnViewer = new Viewer({
 212       container: '.canvas'
 213     });
 214     this.route.params.subscribe(
 215       async params => {
 216         this.processInstanceID = params.id as string;
 217         console.log("Will GET BpmnInfraRequest instance using id: " + this.processInstanceID);
 218         await this.getProcInstance(this.processInstanceID);
 219
 220         this.getVarInst(this.processInstanceID);
 221       });
 222   }
 223
 224 }