diff options
Diffstat (limited to 'so-monitoring/so-monitoring-ui/src/main/frontend')
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); } }); |