From fd4d8ec763138598ba224d08ac6814f709062deb Mon Sep 17 00:00:00 2001 From: rokenny Date: Wed, 11 Sep 2019 13:14:52 +0100 Subject: Fixing null issue and adding zooming Change-Id: I6a3ff57b6131c10965400beac43c4c8101b24397 Issue-ID: SO-2274 Signed-off-by: rokenny --- .../src/main/frontend/src/app/app.module.ts | 9 +-- .../src/app/details/details.component.html | 15 +++- .../src/app/details/details.component.scss | 24 +++++-- .../frontend/src/app/details/details.component.ts | 82 +++++++++++++++++----- .../frontend/src/app/http-error-handler.service.ts | 8 +-- 5 files changed, 107 insertions(+), 31 deletions(-) diff --git a/so-monitoring/so-monitoring-ui/src/main/frontend/src/app/app.module.ts b/so-monitoring/so-monitoring-ui/src/main/frontend/src/app/app.module.ts index 71294bfffe..5adfc049af 100644 --- a/so-monitoring/so-monitoring-ui/src/main/frontend/src/app/app.module.ts +++ b/so-monitoring/so-monitoring-ui/src/main/frontend/src/app/app.module.ts @@ -19,7 +19,7 @@ See the License for the specific language governing permissions and SPDX-License-Identifier: Apache-2.0 ============LICENSE_END========================================================= -@authors: ronan.kenny@ericsson.com, waqas.ikram@ericsson.com +@authors: ronan.kenny@est.tech, waqas.ikram@est.tech */ import { BrowserModule } from '@angular/platform-browser'; @@ -35,13 +35,13 @@ import { FormsModule, ReactiveFormsModule } from '@angular/forms'; import { DetailsComponent } from './details/details.component'; import { ToastrNotificationService } from './toastr-notification-service.service'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; -import { MatFormFieldModule, MatInputModule, MatTableModule, MatTabsModule, MatSelectModule, MatNativeDateModule, MatDatepickerModule, MatCardModule, MatPaginatorModule, MatSortModule } from '@angular/material'; +import { MatFormFieldModule, MatInputModule, MatTableModule, MatTabsModule, MatSelectModule, MatNativeDateModule, MatDatepickerModule, MatCardModule, MatPaginatorModule, MatSortModule, MatIconModule } from '@angular/material'; import { NgxSpinnerModule } from 'ngx-spinner'; import { RouterModule, Routes } from '@angular/router'; import { APP_BASE_HREF } from '@angular/common'; import { LoginComponent } from './login/login.component'; -import {BasicAuthInterceptor} from "./basic-auth.interceptor"; -import {ErrorInterceptor} from "./error.interceptor"; +import { BasicAuthInterceptor } from "./basic-auth.interceptor"; +import { ErrorInterceptor } from "./error.interceptor"; @NgModule({ declarations: [ @@ -70,6 +70,7 @@ import {ErrorInterceptor} from "./error.interceptor"; RouterModule, MatPaginatorModule, MatSortModule, + MatIconModule, RouterModule.forRoot([]), ReactiveFormsModule ], diff --git a/so-monitoring/so-monitoring-ui/src/main/frontend/src/app/details/details.component.html b/so-monitoring/so-monitoring-ui/src/main/frontend/src/app/details/details.component.html index a98095ca00..8ad955f38e 100644 --- a/so-monitoring/so-monitoring-ui/src/main/frontend/src/app/details/details.component.html +++ b/so-monitoring/so-monitoring-ui/src/main/frontend/src/app/details/details.component.html @@ -17,12 +17,23 @@ See the License for the specific language governing permissions and SPDX-License-Identifier: Apache-2.0 ============LICENSE_END========================================================= -@authors: ronan.kenny@ericsson.com, waqas.ikram@ericsson.com +@authors: ronan.kenny@est.tech, waqas.ikram@est.tech -->
-
+
+ + + +
+
Process Information
diff --git a/so-monitoring/so-monitoring-ui/src/main/frontend/src/app/details/details.component.scss b/so-monitoring/so-monitoring-ui/src/main/frontend/src/app/details/details.component.scss index 2789723964..b96fe4ace2 100644 --- a/so-monitoring/so-monitoring-ui/src/main/frontend/src/app/details/details.component.scss +++ b/so-monitoring/so-monitoring-ui/src/main/frontend/src/app/details/details.component.scss @@ -17,23 +17,39 @@ See the License for the specific language governing permissions and SPDX-License-Identifier: Apache-2.0 ============LICENSE_END========================================================= -@authors: ronan.kenny@ericsson.com, waqas.ikram@ericsson.com +@authors: ronan.kenny@est.tech, waqas.ikram@est.tech */ #canvas { background: white; padding: 0; - margin: 0; + margin-left: -43px; width: 70%; height: 470px; margin-top: 0; - box-shadow: 0 5px 5px -3px rgba(0,0,0,.2), 0 8px 10px 1px rgba(0,0,0,.14), 0 3px 14px 2px rgba(0,0,0,.12); + box-shadow: 0 8px 10px 1px rgba(0,0,0,.2); +} + +.navigation { + background: #e6e6e6; + width: 40px; + box-shadow: -5px 8px 10px 1px rgba(0,0,0,.2); + height: 470px; + border: 1px; + border-color: black; + position: relative; +} + +.zoomButton { + padding-top: 8px; + background: none; + border: none; } #besideCanvas { background: white; padding-left: 20px; margin: 0; - width: 28%; + width: 25%; height: 470px; margin-top: 0; box-shadow: 0 5px 5px -3px rgba(0,0,0,.2), 0 8px 10px 1px rgba(0,0,0,.14), 0 3px 14px 2px rgba(0,0,0,.12); diff --git a/so-monitoring/so-monitoring-ui/src/main/frontend/src/app/details/details.component.ts b/so-monitoring/so-monitoring-ui/src/main/frontend/src/app/details/details.component.ts index 7106a87937..a42fa3f5a6 100644 --- a/so-monitoring/so-monitoring-ui/src/main/frontend/src/app/details/details.component.ts +++ b/so-monitoring/so-monitoring-ui/src/main/frontend/src/app/details/details.component.ts @@ -17,7 +17,7 @@ See the License for the specific language governing permissions and SPDX-License-Identifier: Apache-2.0 ============LICENSE_END========================================================= -@authors: ronan.kenny@ericsson.com, waqas.ikram@ericsson.com +@authors: ronan.kenny@est.tech, waqas.ikram@est.tech */ import { Component, OnInit } from '@angular/core'; @@ -34,6 +34,7 @@ import { MatTabsModule } from '@angular/material/tabs'; import { VariableInstance } from '../model/variableInstance.model'; import { ToastrNotificationService } from '../toastr-notification-service.service'; import { NgxSpinnerService } from 'ngx-spinner'; +import { ElementRef, ViewChild } from '@angular/core'; @Component({ selector: 'app-details', @@ -43,6 +44,9 @@ import { NgxSpinnerService } from 'ngx-spinner'; }) export class DetailsComponent implements OnInit { + + @ViewChild("canvas") elementReference: ElementRef; + bpmnViewer: any; processInstanceID: string; @@ -82,7 +86,8 @@ export class DetailsComponent implements OnInit { async (data: ProcessDefinitionDetail) => { this.processDefinition = data; console.log(data); - await this.displayCamundaflow(this.processDefinition.processDefinitionXml, this.activityInstance, this.router); + await this.displayCamundaflow(this.processDefinition.processDefinitionXml, this.activityInstance, + this.router, this.spinner, this.popup); }, error => { console.log(error); this.popup.error("Unable to get process definition for id: " + procDefId + " Error code:" + error.status); @@ -104,30 +109,53 @@ export class DetailsComponent implements OnInit { }); } - displayCamundaflow(bpmnXml, activities: ActivityInstance[], r: Router) { - this.spinner.show(); + displayCamundaflow(bpmnXml, activities: ActivityInstance[], router: Router, + spinner: NgxSpinnerService, popup: ToastrNotificationService) { + spinner.show(); this.bpmnViewer.importXML(bpmnXml, (error) => { if (error) { console.error('Unable to load BPMN flow ', error); - this.popup.error('Unable to load BPMN flow '); - this.spinner.hide(); + popup.error('Unable to load BPMN flow '); + spinner.hide(); } else { - this.spinner.hide(); - var canvas = this.bpmnViewer.get('canvas'); + spinner.hide(); + let canvas = this.bpmnViewer.get('canvas'); var eventBus = this.bpmnViewer.get('eventBus'); - eventBus.on('element.click', function(e) { + var elementRegistry = this.bpmnViewer.get('elementRegistry'); + var overlays = this.bpmnViewer.get('overlays'); - activities.forEach(a => { - if (a.activityId == e.element.id && a.calledProcessInstanceId !== null) { - console.log("will drill down to : " + a.calledProcessInstanceId); - r.navigate(['/details/' + a.calledProcessInstanceId]); - this.spinner.show(); - } - }); + activities.forEach(a => { + if (a.calledProcessInstanceId !== null) { + var element = elementRegistry.get(a.activityId); + let newNode = document.createElement('div'); + newNode.className = 'highlight-overlay'; + newNode.id = element.id; + newNode.style.width = element.width + "px"; + newNode.style.height = element.height + "px"; + newNode.style.cursor = "pointer"; + + overlays.add(a.activityId, { + position: { + top: -5, + left: -5 + }, + html: newNode + }); + + newNode.addEventListener('click', function(e) { + console.log("clicked on: " + e.srcElement.id) + activities.forEach(a => { + if (a.activityId == e.srcElement.id && a.calledProcessInstanceId !== null) { + console.log("will drill down to : " + a.calledProcessInstanceId); + router.navigate(['/details/' + a.calledProcessInstanceId]); + } + }); + }); + } }); // zoom to fit full viewport - canvas.zoom('fit-viewport'); + canvas.zoom('fit-viewport', 'auto'); activities.forEach(a => { canvas.addMarker(a.activityId, 'highlight'); }); @@ -135,6 +163,26 @@ export class DetailsComponent implements OnInit { }); } + zoomIn() { + this.bpmnViewer.get('zoomScroll').zoom(1, { + x: this.elementReference.nativeElement.offsetWidth / 2, + y: this.elementReference.nativeElement.offsetHeight / 2 + }); + } + + zoomOut() { + this.bpmnViewer.get('zoomScroll').zoom(-1, { + x: this.elementReference.nativeElement.offsetWidth / 2, + y: this.elementReference.nativeElement.offsetHeight / 2 + }); + } + resetZoom() { + let canvas = this.bpmnViewer.get('canvas'); + canvas.resized(); + canvas.zoom('fit-viewport', 'auto'); + + } + getVarInst(procInstId: string) { this.data.getVariableInstance(procInstId).subscribe( (data: VariableInstance[]) => { diff --git a/so-monitoring/so-monitoring-ui/src/main/frontend/src/app/http-error-handler.service.ts b/so-monitoring/so-monitoring-ui/src/main/frontend/src/app/http-error-handler.service.ts index 16d274f16a..b22fa6ee9c 100644 --- a/so-monitoring/so-monitoring-ui/src/main/frontend/src/app/http-error-handler.service.ts +++ b/so-monitoring/so-monitoring-ui/src/main/frontend/src/app/http-error-handler.service.ts @@ -17,7 +17,7 @@ See the License for the specific language governing permissions and SPDX-License-Identifier: Apache-2.0 ============LICENSE_END========================================================= -@authors: ronan.kenny@ericsson.com, waqas.ikram@ericsson.com +@authors: ronan.kenny@est.tech, waqas.ikram@est.tech */ import { Injectable } from '@angular/core'; @@ -44,9 +44,9 @@ export class HttpErrorHandlerService { this.popup.error("Internal Service Error occured for operation: " + operation + " please check backend service log. status code: " + error.status); } console.error( - 'Backend returned code ${error.status}, ' + - 'body was: ${error.error}'); - return throwError(error.error || "Internal Service Error occured for operation: " + operation + " please check backend service log. status code: " + error.status); + 'Backend returned status code: ', error.status + ' from URL ' + url); + return throwError(error.error || "Internal Service Error occured for operation: " + + operation + ". Please check backend service log. Status code: " + error.status); }; } -- cgit 1.2.3-korg