From ba64c3daea813b8c1790ef691a58b45897ecff9f Mon Sep 17 00:00:00 2001 From: Ronan Kenny Date: Mon, 17 Sep 2018 15:11:43 +0100 Subject: Fix issues with load spinner and stats Fixing issues where stats returned Nan and implementation of loading spinner Change-Id: I989efb739ed244de3760476ce2dfff8928f51c86 Issue-ID: SO-727 Signed-off-by: Ronan Kenny --- .../src/main/frontend/package-lock.json | 8 ++ .../src/main/frontend/package.json | 1 + .../src/main/frontend/src/app/app.module.ts | 4 +- .../src/app/details/details.component.html | 2 + .../frontend/src/app/details/details.component.ts | 8 +- .../main/frontend/src/app/home/home.component.html | 122 ++++++++++++--------- .../main/frontend/src/app/home/home.component.scss | 26 ++--- .../main/frontend/src/app/home/home.component.ts | 30 ++++- 8 files changed, 128 insertions(+), 73 deletions(-) diff --git a/so-monitoring/so-monitoring-ui/src/main/frontend/package-lock.json b/so-monitoring/so-monitoring-ui/src/main/frontend/package-lock.json index d9ec649f2e..78642155b4 100644 --- a/so-monitoring/so-monitoring-ui/src/main/frontend/package-lock.json +++ b/so-monitoring/so-monitoring-ui/src/main/frontend/package-lock.json @@ -6717,6 +6717,14 @@ "integrity": "sha1-yobR/ogoFpsBICCOPchCS524NCw=", "dev": true }, + "ngx-spinner": { + "version": "6.1.2", + "resolved": "https://registry.npmjs.org/ngx-spinner/-/ngx-spinner-6.1.2.tgz", + "integrity": "sha512-j/R8T5vKvsLLib1pTxKLYK3GYAFXw5VoUJmaTlcocO6Yi4qIypfhmw9PX9triy7hWVGPu6cUzVs7g9cEG9OYBA==", + "requires": { + "tslib": "^1.9.0" + } + }, "no-case": { "version": "2.3.2", "resolved": "https://registry.npmjs.org/no-case/-/no-case-2.3.2.tgz", diff --git a/so-monitoring/so-monitoring-ui/src/main/frontend/package.json b/so-monitoring/so-monitoring-ui/src/main/frontend/package.json index c6f6f14dea..c793264e99 100644 --- a/so-monitoring/so-monitoring-ui/src/main/frontend/package.json +++ b/so-monitoring/so-monitoring-ui/src/main/frontend/package.json @@ -26,6 +26,7 @@ "bpmn-js": "^2.4.1", "core-js": "^2.5.4", "jquery": "^3.3.1", + "ngx-spinner": "^6.1.2", "rxjs": "^6.0.0", "toastr": "^2.1.4", "zone.js": "^0.8.26" 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 c3a02b90f3..b9437ccb75 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 @@ -40,6 +40,7 @@ import { MatFormFieldModule, MatInputModule } from '@angular/material'; import { MatDatepickerModule } from '@angular/material/datepicker'; import { MatNativeDateModule } from '@angular/material'; import { MatCardModule } from '@angular/material/card'; +import { NgxSpinnerModule } from 'ngx-spinner'; @NgModule({ declarations: [ @@ -62,7 +63,8 @@ import { MatCardModule } from '@angular/material/card'; MatInputModule, MatDatepickerModule, MatNativeDateModule, - MatCardModule + MatCardModule, + NgxSpinnerModule ], providers: [ToastrNotificationService], bootstrap: [AppComponent] 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 fc682acb61..45301c7945 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 @@ -97,3 +97,5 @@ SPDX-License-Identifier: Apache-2.0 + + 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 9561e9abf7..4c19ba1039 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 @@ -33,6 +33,7 @@ import { ViewEncapsulation } from '@angular/core'; import { MatTabsModule } from '@angular/material/tabs'; import { VarInstance } from '../model/variableInstance.model'; import { ToastrNotificationService } from '../toastr-notification-service.service'; +import { NgxSpinnerService } from 'ngx-spinner'; @Component({ selector: 'app-details', @@ -63,7 +64,8 @@ export class DetailsComponent implements OnInit { displayedColumnsVariable = ['name', 'type', 'value']; - constructor(private route: ActivatedRoute, private data: DataService, private popup: ToastrNotificationService, private router: Router) { } + constructor(private route: ActivatedRoute, private data: DataService, private popup: ToastrNotificationService, + private router: Router, private spinner: NgxSpinnerService) { } getActInst(procInstId: string) { this.data.getActivityInstance(procInstId).subscribe( @@ -104,12 +106,15 @@ export class DetailsComponent implements OnInit { } displayCamundaflow(bpmnXml, activities: ACTINST[], r: Router) { + this.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(); } else { + this.spinner.hide(); let canvas = this.bpmnViewer.get('canvas'); var eventBus = this.bpmnViewer.get('eventBus'); eventBus.on('element.click', function(e) { @@ -118,6 +123,7 @@ export class DetailsComponent implements OnInit { 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(); } }); }); diff --git a/so-monitoring/so-monitoring-ui/src/main/frontend/src/app/home/home.component.html b/so-monitoring/so-monitoring-ui/src/main/frontend/src/app/home/home.component.html index 6adea3b357..2b580e26a1 100644 --- a/so-monitoring/so-monitoring-ui/src/main/frontend/src/app/home/home.component.html +++ b/so-monitoring/so-monitoring-ui/src/main/frontend/src/app/home/home.component.html @@ -50,26 +50,26 @@ SPDX-License-Identifier: Apache-2.0 - - - - - - - - - - - {{option}} - - - - - - - {{option}} - - + + + + + + + + + + + {{option}} + + + + + + + {{option}} + + @@ -83,26 +83,26 @@ SPDX-License-Identifier: Apache-2.0 - - - - - - - - - - - {{option}} - - - - - - - {{option}} - - + + + + + + + + + + + {{option}} + + + + + + + {{option}} + + @@ -165,23 +165,39 @@ SPDX-License-Identifier: Apache-2.0
-

Total: {{ totalVal }}

-
-

Complete: {{ completeVal }}

-

{{ percentageComplete }}%

-
-

Failed: {{ failedVal }}

-

{{ percentageFailed }}%

-
-

In Progress: {{ inProgressVal }}

-
-

Pending: {{ pendingVal }}

-
-

Unlocked: {{ unlockedVal }}

+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
Total: {{ totalVal }}
Complete: {{ completeVal }} {{ percentageComplete }}%
Failed: {{ failedVal }} {{ percentageFailed }}%
In Progress: {{ inProgressVal }} {{ percentageInProg }}%
Pending: {{ pendingVal }} {{ percentagePending }}%
Unlocked: {{ unlockedVal }} {{ percentageUnlocked }}%
 + diff --git a/so-monitoring/so-monitoring-ui/src/main/frontend/src/app/home/home.component.scss b/so-monitoring/so-monitoring-ui/src/main/frontend/src/app/home/home.component.scss index d475c52cb8..923066face 100644 --- a/so-monitoring/so-monitoring-ui/src/main/frontend/src/app/home/home.component.scss +++ b/so-monitoring/so-monitoring-ui/src/main/frontend/src/app/home/home.component.scss @@ -19,7 +19,6 @@ SPDX-License-Identifier: Apache-2.0 @authors: ronan.kenny@ericsson.com, waqas.ikram@ericsson.com */ - @import "~@angular/material/prebuilt-themes/indigo-pink.css"; .searchArea { @@ -77,7 +76,7 @@ SPDX-License-Identifier: Apache-2.0 } .fa { - float: left; + float: left; width: 120px; padding: 10px; background: #2196F3; @@ -103,28 +102,29 @@ form.example::after { display: inline-flex; } -.startDate, .endDate{ +.endDate, +.startDate { margin-left: 90px; width: 140px; } -.selectHour, .selectMinute{ +.selectHour, +.selectMinute { margin-left: 30px; - width: 100px + width: 100px; } -#servStats{ +#servStats { background-color: white; padding: 10px; font-size: 17px; font-family: 'Montserrat', sans-serif; } -hr { - display: block; - height: 1px; - border: 0; - border-top: 1px solid #ccc; - margin: 1em 0; - padding: 0; +.statsTable { + td { + padding: 12px 80px 12px 12px; + text-align: left; + border-bottom: 1px solid #ccc; + } } diff --git a/so-monitoring/so-monitoring-ui/src/main/frontend/src/app/home/home.component.ts b/so-monitoring/so-monitoring-ui/src/main/frontend/src/app/home/home.component.ts index dd08bb4ae5..b8fac61adf 100644 --- a/so-monitoring/so-monitoring-ui/src/main/frontend/src/app/home/home.component.ts +++ b/so-monitoring/so-monitoring-ui/src/main/frontend/src/app/home/home.component.ts @@ -35,9 +35,9 @@ import { SearchData } from '../model/searchData.model'; import { MatDatepickerModule } from '@angular/material/datepicker'; import { FormControl } from '@angular/forms'; import { SearchRequest } from '../model/SearchRequest.model'; -import { ViewChild } from '@angular/core'; import { ElementRef } from '@angular/core'; import { Input } from '@angular/core'; +import { NgxSpinnerService } from 'ngx-spinner'; @Component({ selector: 'app-home', @@ -56,6 +56,9 @@ export class HomeComponent implements OnInit { unlockedVal = 0; percentageComplete = 0; percentageFailed = 0; + percentageInProg = 0; + percentagePending = 0; + percentageUnlocked = 0; options = [{ name: "EQUAL", value: "EQ" }, { name: "NOT EQUAL", value: "NEQ" }, { name: "LIKE", value: "LIKE" }]; statusOptions = [{ name: "ALL", value: "ALL" }, { name: "COMPLETE", value: "COMPLETE" }, { name: "IN_PROGRESS", value: "IN_PROGRESS" }, @@ -77,17 +80,22 @@ export class HomeComponent implements OnInit { displayedColumns = ['requestId', 'serviceInstanceId', 'serviceIstanceName', 'networkId', 'requestStatus', 'serviceType', 'startTime', 'endTime']; constructor(private route: ActivatedRoute, private data: DataService, - private router: Router, private popup: ToastrNotificationService) { + private router: Router, private popup: ToastrNotificationService, + private spinner: NgxSpinnerService) { this.searchData = new SearchData(); } makeCall() { + this.spinner.show(); + var search = this.searchData.getSearchRequest().subscribe((result: SearchRequest) => { this.data.retrieveInstance(result.getFilters(), result.getStartTimeInMilliseconds(), result.getEndTimeInMilliseconds()) .subscribe((data: Process[]) => { + this.spinner.hide(); this.processData = data; - this.popup.info("Number of records found: " + data.length); + this.popup.info("Number of records found: " + data.length) + // Calculate Statistics for Service Statistics tab this.completeVal = this.processData.filter(i => i.requestStatus === "COMPLETE").length; this.inProgressVal = this.processData.filter(i => i.requestStatus === "IN_PROGRESS").length; @@ -95,28 +103,40 @@ export class HomeComponent implements OnInit { this.pendingVal = this.processData.filter(i => i.requestStatus === "PENDING").length; this.unlockedVal = this.processData.filter(i => i.requestStatus === "UNLOCKED").length; this.totalVal = this.processData.length; - this.percentageComplete = Math.round(((this.completeVal / this.totalVal) * 100) * 100) / 100; - this.percentageFailed = Math.round(((this.failedVal / this.totalVal) * 100) * 100) / 100; + // Calculate percentages to 2 decimal places and compare to 0 to avoid NaN error + if (this.totalVal != 0) { + this.percentageComplete = Math.round(((this.completeVal / this.totalVal) * 100) * 100) / 100; + this.percentageFailed = Math.round(((this.failedVal / this.totalVal) * 100) * 100) / 100; + this.percentageInProg = Math.round(((this.inProgressVal / this.totalVal) * 100) * 100) / 100; + this.percentagePending = Math.round(((this.pendingVal / this.totalVal) * 100) * 100) / 100; + this.percentageUnlocked = Math.round(((this.unlockedVal / this.totalVal) * 100) * 100) / 100; + } console.log("COMPLETE: " + this.completeVal); console.log("FAILED: " + this.failedVal); }, error => { console.log(error); this.popup.error("Unable to perform search Error code:" + error.status); + this.spinner.hide(); }); }, error => { console.log("Data validation error " + error); this.popup.error(error); + this.spinner.hide(); }); } getProcessIsntanceId(requestId: string) { + this.spinner.show(); + var response = this.data.getProcessInstanceId(requestId).subscribe((data) => { if (data.status == 200) { + this.spinner.hide(); var processInstanceId = (data.body as ProcessInstanceId).processInstanceId; this.router.navigate(['/details/' + processInstanceId]); } else { this.popup.error('No process instance id found: ' + requestId); + this.spinner.hide(); console.log('No process instance id found: ' + requestId); } }); -- cgit 1.2.3-korg