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>

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);
       }
     });