aboutsummaryrefslogtreecommitdiffstats
path: root/so-monitoring/so-monitoring-ui/src
diff options
context:
space:
mode:
authorRonan Kenny <ronan.kenny@ericsson.com>2018-09-17 15:11:43 +0100
committerRonan Kenny <ronan.kenny@ericsson.com>2018-09-18 10:19:10 +0100
commitba64c3daea813b8c1790ef691a58b45897ecff9f (patch)
tree21151bddfeea07cacf69515ecf3ff3dcc7690ac0 /so-monitoring/so-monitoring-ui/src
parent7f14f0c2cb879573709b687697636095e134b231 (diff)
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 <ronan.kenny@ericsson.com>
Diffstat (limited to 'so-monitoring/so-monitoring-ui/src')
-rw-r--r--so-monitoring/so-monitoring-ui/src/main/frontend/package-lock.json8
-rw-r--r--so-monitoring/so-monitoring-ui/src/main/frontend/package.json1
-rw-r--r--so-monitoring/so-monitoring-ui/src/main/frontend/src/app/app.module.ts4
-rw-r--r--so-monitoring/so-monitoring-ui/src/main/frontend/src/app/details/details.component.html2
-rw-r--r--so-monitoring/so-monitoring-ui/src/main/frontend/src/app/details/details.component.ts8
-rw-r--r--so-monitoring/so-monitoring-ui/src/main/frontend/src/app/home/home.component.html122
-rw-r--r--so-monitoring/so-monitoring-ui/src/main/frontend/src/app/home/home.component.scss26
-rw-r--r--so-monitoring/so-monitoring-ui/src/main/frontend/src/app/home/home.component.ts30
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
</mat-tab-group>
</div>
</div>
+
+<ngx-spinner bdColor="rgba(51, 51, 51, 0.8)" size="large" color="#00285f" type="ball-spin-clockwise-fade-rotating"></ngx-spinner>
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
<input matInput #searchValueRI type="text" [(ngModel)]="searchData.requestId" placeholder="Request Id">
</mat-form-field>
- <!-- Angular Start Date Picker -->
- <mat-form-field class="startDate">
- <input matInput #startDate [matDatepicker]="picker" [(ngModel)]="searchData.startDate" placeholder="Choose a start date">
- <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
- <mat-datepicker #picker></mat-datepicker>
- </mat-form-field>
-
- <!-- Dropdown box for Start Hour selection -->
- <mat-form-field class="selectHour">
- <mat-select class="formatBox" [(ngModel)]="searchData.selectedStartHour" name="hourFrom" placeholder="Select Hour">
- <mat-option *ngFor="let option of hourOptions" [value]="option">{{option}}</mat-option>
- </mat-select>
- </mat-form-field>
-
- <!-- Dropdown box for Start Minute selection -->
- <mat-form-field class="selectMinute">
- <mat-select class="formatBox" [(ngModel)]="searchData.selectedStartMinute" name="minuteFrom" placeholder="Select Minute">
- <mat-option *ngFor="let option of minuteOptions" [value]="option">{{option}}</mat-option>
- </mat-select>
- </mat-form-field>
+ <!-- Angular Start Date Picker -->
+ <mat-form-field class="startDate">
+ <input matInput #startDate [matDatepicker]="picker" [(ngModel)]="searchData.startDate" placeholder="Choose a start date">
+ <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
+ <mat-datepicker #picker></mat-datepicker>
+ </mat-form-field>
+
+ <!-- Dropdown box for Start Hour selection -->
+ <mat-form-field class="selectHour">
+ <mat-select class="formatBox" [(ngModel)]="searchData.selectedStartHour" name="hourFrom" placeholder="Select Hour">
+ <mat-option *ngFor="let option of hourOptions" [value]="option">{{option}}</mat-option>
+ </mat-select>
+ </mat-form-field>
+
+ <!-- Dropdown box for Start Minute selection -->
+ <mat-form-field class="selectMinute">
+ <mat-select class="formatBox" [(ngModel)]="searchData.selectedStartMinute" name="minuteFrom" placeholder="Select Minute">
+ <mat-option *ngFor="let option of minuteOptions" [value]="option">{{option}}</mat-option>
+ </mat-select>
+ </mat-form-field>
</div>
<!-- Dropdown Filter and TextBox for Service Name -->
@@ -83,26 +83,26 @@ SPDX-License-Identifier: Apache-2.0
<input matInput #searchValueSN type="text" [(ngModel)]="searchData.serviceInstanceName" placeholder="Service Name">
</mat-form-field>
- <!-- Angular End Date Picker -->
- <mat-form-field class="endDate">
- <input matInput #endDate [matDatepicker]="endpicker" [(ngModel)]="searchData.endDate" placeholder="Choose an end date">
- <mat-datepicker-toggle matSuffix [for]="endpicker"></mat-datepicker-toggle>
- <mat-datepicker #endpicker></mat-datepicker>
- </mat-form-field>
-
- <!-- Dropdown box for End Hour selection -->
- <mat-form-field class="selectHour">
- <mat-select class="formatBox" [(ngModel)]="searchData.selectedEndHour" name="hourTo" placeholder="Select Hour">
- <mat-option *ngFor="let option of hourOptions" [value]="option">{{option}}</mat-option>
- </mat-select>
- </mat-form-field>
-
- <!-- Dropdown box for End Minute selection -->
- <mat-form-field class="selectMinute">
- <mat-select class="formatBox" [(ngModel)]="searchData.selectedEndMinute" name="minuteTo" placeholder="Select Minute">
- <mat-option *ngFor="let option of minuteOptions" [value]="option">{{option}}</mat-option>
- </mat-select>
- </mat-form-field>
+ <!-- Angular End Date Picker -->
+ <mat-form-field class="endDate">
+ <input matInput #endDate [matDatepicker]="endpicker" [(ngModel)]="searchData.endDate" placeholder="Choose an end date">
+ <mat-datepicker-toggle matSuffix [for]="endpicker"></mat-datepicker-toggle>
+ <mat-datepicker #endpicker></mat-datepicker>
+ </mat-form-field>
+
+ <!-- Dropdown box for End Hour selection -->
+ <mat-form-field class="selectHour">
+ <mat-select class="formatBox" [(ngModel)]="searchData.selectedEndHour" name="hourTo" placeholder="Select Hour">
+ <mat-option *ngFor="let option of hourOptions" [value]="option">{{option}}</mat-option>
+ </mat-select>
+ </mat-form-field>
+
+ <!-- Dropdown box for End Minute selection -->
+ <mat-form-field class="selectMinute">
+ <mat-select class="formatBox" [(ngModel)]="searchData.selectedEndMinute" name="minuteTo" placeholder="Select Minute">
+ <mat-option *ngFor="let option of minuteOptions" [value]="option">{{option}}</mat-option>
+ </mat-select>
+ </mat-form-field>
</div>
<!-- Dropdown Filter for Status -->
@@ -165,23 +165,39 @@ SPDX-License-Identifier: Apache-2.0
<mat-tab label="Service Statistics">
<div id="servStats">
- <p>Total: {{ totalVal }}</p>
- <hr/>
- <p>Complete: {{ completeVal }}</p>
- <p><b> {{ percentageComplete }}%</b></p>
- <hr/>
- <p>Failed: {{ failedVal }}</p>
- <p><b> {{ percentageFailed }}%</b></p>
- <hr/>
- <p>In Progress: {{ inProgressVal }}</p>
- <hr/>
- <p>Pending: {{ pendingVal }}</p>
- <hr/>
- <p>Unlocked: {{ unlockedVal }}</p>
+ <table class="statsTable">
+ <tbody>
+ <tr>
+ <td>Total: {{ totalVal }}</td>
+ <td></td>
+ </tr>
+ <tr>
+ <td>Complete: {{ completeVal }}</td>
+ <td> {{ percentageComplete }}%</td>
+ </tr>
+ <tr>
+ <td>Failed: {{ failedVal }}</td>
+ <td> {{ percentageFailed }}%</td>
+ </tr>
+ <tr>
+ <td>In Progress: {{ inProgressVal }}</td>
+ <td> {{ percentageInProg }}%</td>
+ </tr>
+ <tr>
+ <td>Pending: {{ pendingVal }}</td>
+ <td> {{ percentagePending }}%</td>
+ </tr>
+ <tr>
+ <td>Unlocked: {{ unlockedVal }}</td>
+ <td> {{ percentageUnlocked }}%</td>
+ </tr>
+ </tbody>
+ </table>
</div>
</mat-tab>
</mat-tab-group>
</div>
</div>
+<ngx-spinner bdColor="rgba(51, 51, 51, 0.8)" size="large" color="#00285f" type="ball-spin-clockwise-fade-rotating"></ngx-spinner>
<router-outlet></router-outlet>
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);
}
});