diff options
Diffstat (limited to 'so-monitoring/so-monitoring-ui/src')
5 files changed, 327 insertions, 313 deletions
diff --git a/so-monitoring/so-monitoring-ui/src/main/frontend/src/app/data.service.ts b/so-monitoring/so-monitoring-ui/src/main/frontend/src/app/data.service.ts index 796739077c..2e8f4237f7 100644 --- a/so-monitoring/so-monitoring-ui/src/main/frontend/src/app/data.service.ts +++ b/so-monitoring/so-monitoring-ui/src/main/frontend/src/app/data.service.ts @@ -30,6 +30,7 @@ import { environment } from '../environments/environment'; import { HttpResponse } from '@angular/common/http';
import { PII } from './model/processInstance.model';
import { HttpErrorHandlerService } from './http-error-handler.service';
+import { ACTINST } from './model/activityInstance.model';
@Injectable({
@@ -59,12 +60,12 @@ export class DataService { }
// HTTP GET to return Activity instancs using ProcessInstanceID
- getActivityInstance(processInstanceId) {
+ getActivityInstance(processInstanceId): Promise<ACTINST[]> {
var url = environment.soMonitoringBackendURL + 'activity-instance/' + processInstanceId;
- return this.http.get(url)
+ return this.http.get<ACTINST[]>(url)
.pipe(
catchError(this.httpErrorHandlerService.handleError("GET", url))
- );
+ ).toPromise();
}
// HTTP GET to return Activity Instance using ProcessInstanceID
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 45301c7945..a98095ca00 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 @@ -1,101 +1,101 @@ -<!--
-============LICENSE_START=======================================================
- Copyright (C) 2018 Ericsson. All rights reserved.
-================================================================================
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
- http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
- limitations under the License.
-
-SPDX-License-Identifier: Apache-2.0
-============LICENSE_END=========================================================
-
-@authors: ronan.kenny@ericsson.com, waqas.ikram@ericsson.com
--->
-
-<div class="completeForm">
- <div class="topCanvas">
- <section class="canvas" id="canvas"></section>
- <mat-card class="besideCanvas" id="besideCanvas">
- <mat-card-title>Process Information</mat-card-title>
- <br />
- <mat-card-content>Process Instance Id: </mat-card-content>
- <mat-card-content>{{ processInstanceID }}</mat-card-content>
- <br />
- <mat-card-content>Process Definition Id: </mat-card-content>
- <mat-card-content>{{ processDefinitionID }}</mat-card-content>
- <br />
- <mat-card-content>Process Definition Name: </mat-card-content>
- <mat-card-content>{{ processDefinitionName }}</mat-card-content>
- </mat-card>
- </div>
- <br />
-
- <div class="example-container mat-elevation-z8">
- <mat-tab-group class="tab-group">
- <mat-tab label="Activity Instances">
- <mat-table [dataSource]="activityInstance">
- <ng-container matColumnDef="activityId">
- <mat-header-cell *matHeaderCellDef> Activity Id </mat-header-cell>
- <mat-cell *matCellDef="let activity"> {{ activity.activityId }} </mat-cell>
- </ng-container>
- <ng-container matColumnDef="activityName">
- <mat-header-cell *matHeaderCellDef> Activity Name </mat-header-cell>
- <mat-cell *matCellDef="let activity">
- <div [ngSwitch]="!!activity.calledProcessInstanceId">
- <div *ngSwitchCase="false"><a> {{ activity.activityName }} </a></div>
- <div *ngSwitchCase="true"><a [routerLink]="['/details', activity.calledProcessInstanceId]"> {{ activity.activityName }} </a></div>
- </div>
- </mat-cell>
- </ng-container>
- <ng-container matColumnDef="activityType">
- <mat-header-cell *matHeaderCellDef> Activity Type </mat-header-cell>
- <mat-cell *matCellDef="let activity"> {{ activity.activityType }} </mat-cell>
- </ng-container>
- <ng-container matColumnDef="startTime">
- <mat-header-cell *matHeaderCellDef> Start Time </mat-header-cell>
- <mat-cell *matCellDef="let activity"> {{ activity.startTime }} </mat-cell>
- </ng-container>
- <ng-container matColumnDef="endTime">
- <mat-header-cell *matHeaderCellDef> End Time </mat-header-cell>
- <mat-cell *matCellDef="let activity"> {{ activity.endTime }} </mat-cell>
- </ng-container>
- <ng-container matColumnDef="durationInMillis">
- <mat-header-cell *matHeaderCellDef> Duration (ms) </mat-header-cell>
- <mat-cell *matCellDef="let activity"> {{ activity.durationInMillis }} </mat-cell>
- </ng-container>
- <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
- <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
- </mat-table>
- </mat-tab>
-
- <mat-tab label="Variable Instances">
- <mat-table [dataSource]="variableInstance">
- <ng-container matColumnDef="name">
- <mat-header-cell *matHeaderCellDef> Name </mat-header-cell>
- <mat-cell *matCellDef="let variable"> {{ variable.name }} </mat-cell>
- </ng-container>
- <ng-container matColumnDef="type">
- <mat-header-cell *matHeaderCellDef> Type </mat-header-cell>
- <mat-cell *matCellDef="let variable"> {{ variable.type }} </mat-cell>
- </ng-container>
- <ng-container matColumnDef="value">
- <mat-header-cell *matHeaderCellDef> Value </mat-header-cell>
- <mat-cell *matCellDef="let variable"> {{ variable.value }} </mat-cell>
- </ng-container>
- <mat-header-row *matHeaderRowDef="displayedColumnsVariable"></mat-header-row>
- <mat-row *matRowDef="let row; columns: displayedColumnsVariable;"></mat-row>
- </mat-table>
- </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>
+<!-- +============LICENSE_START======================================================= + Copyright (C) 2018 Ericsson. All rights reserved. +================================================================================ +Licensed under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. +You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software +distributed under the License is distributed on an "AS IS" BASIS, +WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +See the License for the specific language governing permissions and + limitations under the License. + +SPDX-License-Identifier: Apache-2.0 +============LICENSE_END========================================================= + +@authors: ronan.kenny@ericsson.com, waqas.ikram@ericsson.com +--> + +<div class="completeForm"> + <div class="topCanvas"> + <section class="canvas" id="canvas"></section> + <mat-card class="besideCanvas" id="besideCanvas"> + <mat-card-title>Process Information</mat-card-title> + <br /> + <mat-card-content>Process Instance Id: </mat-card-content> + <mat-card-content>{{ processInstanceID }}</mat-card-content> + <br /> + <mat-card-content>Process Definition Id: </mat-card-content> + <mat-card-content>{{ processDefinitionID }}</mat-card-content> + <br /> + <mat-card-content>Process Definition Name: </mat-card-content> + <mat-card-content>{{ processDefinitionName }}</mat-card-content> + </mat-card> + </div> + <br /> + + <div class="example-container mat-elevation-z8"> + <mat-tab-group class="tab-group"> + <mat-tab label="Activity Instances"> + <mat-table [dataSource]="activityInstance"> + <ng-container matColumnDef="activityId"> + <mat-header-cell *matHeaderCellDef> Activity Id </mat-header-cell> + <mat-cell *matCellDef="let activity"> {{ activity.activityId }} </mat-cell> + </ng-container> + <ng-container matColumnDef="activityName"> + <mat-header-cell *matHeaderCellDef> Activity Name </mat-header-cell> + <mat-cell *matCellDef="let activity"> + <div [ngSwitch]="!!activity.calledProcessInstanceId"> + <div *ngSwitchCase="false"><a> {{ activity.activityName }} </a></div> + <div *ngSwitchCase="true"><a [routerLink]="['/details', activity.calledProcessInstanceId]"> {{ activity.activityName }} </a></div> + </div> + </mat-cell> + </ng-container> + <ng-container matColumnDef="activityType"> + <mat-header-cell *matHeaderCellDef> Activity Type </mat-header-cell> + <mat-cell *matCellDef="let activity"> {{ activity.activityType }} </mat-cell> + </ng-container> + <ng-container matColumnDef="startTime"> + <mat-header-cell *matHeaderCellDef> Start Time </mat-header-cell> + <mat-cell *matCellDef="let activity"> {{ (activity.startTime | date:'yyyy-MM-dd HH:mm:sss Z') }} </mat-cell> + </ng-container> + <ng-container matColumnDef="endTime"> + <mat-header-cell *matHeaderCellDef> End Time </mat-header-cell> + <mat-cell *matCellDef="let activity"> {{ (activity.endTime | date:'yyyy-MM-dd HH:mm:sss Z') }} </mat-cell> + </ng-container> + <ng-container matColumnDef="durationInMillis"> + <mat-header-cell *matHeaderCellDef> Duration (ms) </mat-header-cell> + <mat-cell *matCellDef="let activity"> {{ activity.durationInMillis }} </mat-cell> + </ng-container> + <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row> + <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row> + </mat-table> + </mat-tab> + + <mat-tab label="Variable Instances"> + <mat-table [dataSource]="variableInstance"> + <ng-container matColumnDef="name"> + <mat-header-cell *matHeaderCellDef> Name </mat-header-cell> + <mat-cell *matCellDef="let variable"> {{ variable.name }} </mat-cell> + </ng-container> + <ng-container matColumnDef="type"> + <mat-header-cell *matHeaderCellDef> Type </mat-header-cell> + <mat-cell *matCellDef="let variable"> {{ variable.type }} </mat-cell> + </ng-container> + <ng-container matColumnDef="value"> + <mat-header-cell *matHeaderCellDef> Value </mat-header-cell> + <mat-cell *matCellDef="let variable"> {{ variable.value }} </mat-cell> + </ng-container> + <mat-header-row *matHeaderRowDef="displayedColumnsVariable"></mat-header-row> + <mat-row *matRowDef="let row; columns: displayedColumnsVariable;"></mat-row> + </mat-table> + </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> 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 4c19ba1039..97bbbdad02 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 @@ -43,7 +43,6 @@ import { NgxSpinnerService } from 'ngx-spinner'; })
export class DetailsComponent implements OnInit {
-
bpmnViewer: any;
processInstanceID: string;
@@ -67,8 +66,8 @@ export class DetailsComponent implements OnInit { constructor(private route: ActivatedRoute, private data: DataService, private popup: ToastrNotificationService,
private router: Router, private spinner: NgxSpinnerService) { }
- getActInst(procInstId: string) {
- this.data.getActivityInstance(procInstId).subscribe(
+ async getActInst(procInstId: string) {
+ await this.data.getActivityInstance(procInstId).then(
(data: ACTINST[]) => {
this.activityInstance = data;
console.log(data);
@@ -90,7 +89,7 @@ export class DetailsComponent implements OnInit { });
}
- async getProcInstance(procInstId) {
+ async getProcInstance(procInstId) {
await this.data.getProcessInstance(procInstId).then(
async (data: PII) => {
this.processInstance = data;
@@ -139,7 +138,20 @@ export class DetailsComponent implements OnInit { getVarInst(procInstId) {
this.data.getVariableInstance(procInstId).subscribe(
(data: VarInstance[]) => {
- this.variableInstance = data;
+ this.variableInstance = [];
+ for (let i = 0; i < data.length; i++) {
+ var value = data[i]['value'];
+ var type = data[i]['type'];
+ if ((type == 'Object') && !(value == null)) {
+ try {
+ data[i]['value'] = JSON.stringify(value, null, 2);
+ }
+ catch (error) {
+ console.log("Unable to \nError Code: " + error);
+ }
+ }
+ this.variableInstance[i] = data[i];
+ }
console.log(data);
}, error => {
console.log(error);
@@ -160,4 +172,5 @@ export class DetailsComponent implements OnInit { this.getVarInst(this.processInstanceID);
});
}
+
}
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 2b580e26a1..e4556ca840 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 @@ -1,203 +1,203 @@ -<!--
-============LICENSE_START=======================================================
-Copyright (C) 2018 Ericsson. All rights reserved.
-================================================================================
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
- http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-
-SPDX-License-Identifier: Apache-2.0
-============LICENSE_END=========================================================
-
-@authors: ronan.kenny@ericsson.com, waqas.ikram@ericsson.com
--->
-
-<base href="/">
-
-<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
-<link rel="stylesheet" ng-href="./home.component.scss">
-<div class="completeForm">
- <div class="searchArea">
-
- <!-- Dropdown Filter and TextBox for Service Instance Id -->
- <div class="container-home">
- <mat-form-field class="selectFilter">
- <mat-select class="formatBox" [(ngModel)]="searchData.selectedValueSII" name="sel" placeholder="Select Filter">
- <mat-option *ngFor="let option of options" [value]="option.value">{{option.name}}</mat-option>
- </mat-select>
- </mat-form-field>
- <mat-form-field class="valueInput">
- <input matInput #searchValueSII type="text" [(ngModel)]="searchData.serviceInstanceId" placeholder="Service Instance Id">
- </mat-form-field>
- </div>
-
- <!-- Dropdown Filter and TextBox for Request Id -->
- <div class="container-home">
- <mat-form-field class="selectFilter">
- <mat-select class="formatBox" [(ngModel)]="searchData.selectedValueRI" name="sel" placeholder="Select Filter">
- <mat-option *ngFor="let option of options" [value]="option.value">{{option.name}}</mat-option>
- </mat-select>
- </mat-form-field>
- <mat-form-field class="valueInput">
- <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>
- </div>
-
- <!-- Dropdown Filter and TextBox for Service Name -->
- <div class="container-home">
- <mat-form-field class="selectFilter">
- <mat-select class="formatBox" [(ngModel)]="searchData.selectedValueSN" name="sel" placeholder="Select Filter">
- <mat-option *ngFor="let option of options" [value]="option.value">{{option.name}}</mat-option>
- </mat-select>
- </mat-form-field>
- <mat-form-field class="valueInput">
- <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>
- </div>
-
- <!-- Dropdown Filter for Status -->
- <div class="container-home">
- <mat-form-field class="selectFilter">
- <mat-select class="formatBox" [(ngModel)]="searchData.selectedValueSTATUS" name="sel" placeholder="Status">
- <mat-option *ngFor="let statusOption of statusOptions" [value]="statusOption.value">{{ statusOption.name }}</mat-option>
- </mat-select>
- </mat-form-field>
- </div>
- <br />
-
- <!-- Button to call makeCall() function to commence search based on parameters -->
- <button (click)="makeCall()" class="fa fa-search"></button>
- </div>
-
- <br />
-
- <!-- Table to display selected fields if data present -->
- <div class="example-container mat-elevation-z8">
- <mat-tab-group class="tab-group">
- <mat-tab label="Service Instances">
- <mat-table [dataSource]="processData">
- <ng-container matColumnDef="requestId">
- <mat-header-cell *matHeaderCellDef> Request Id </mat-header-cell>
- <mat-cell *matCellDef="let process"><a routerLink="" (click)="getProcessIsntanceId(process.requestId)">{{ process.requestId }}</a></mat-cell>
- </ng-container>
- <ng-container matColumnDef="serviceInstanceId">
- <mat-header-cell *matHeaderCellDef> Instance Id </mat-header-cell>
- <mat-cell *matCellDef="let process"> {{ process.serviceInstanceId }} </mat-cell>
- </ng-container>
- <ng-container matColumnDef="serviceIstanceName">
- <mat-header-cell *matHeaderCellDef> Instance Name </mat-header-cell>
- <mat-cell *matCellDef="let process"> {{ process.serviceIstanceName }} </mat-cell>
- </ng-container>
- <ng-container matColumnDef="networkId">
- <mat-header-cell *matHeaderCellDef> Network Id </mat-header-cell>
- <mat-cell *matCellDef="let process"> {{ process.networkId }} </mat-cell>
- </ng-container>
- <ng-container matColumnDef="requestStatus">
- <mat-header-cell *matHeaderCellDef> Request Status </mat-header-cell>
- <mat-cell *matCellDef="let process"> {{ process.requestStatus }} </mat-cell>
- </ng-container>
- <ng-container matColumnDef="serviceType">
- <mat-header-cell *matHeaderCellDef> Service Type </mat-header-cell>
- <mat-cell *matCellDef="let process"> {{ process.serviceType }} </mat-cell>
- </ng-container>
- <ng-container matColumnDef="startTime">
- <mat-header-cell *matHeaderCellDef> Start Time </mat-header-cell>
- <mat-cell *matCellDef="let process"> {{ process.startTime }} </mat-cell>
- </ng-container>
- <ng-container matColumnDef="endTime">
- <mat-header-cell *matHeaderCellDef> End Time </mat-header-cell>
- <mat-cell *matCellDef="let process"> {{ process.endTime }} </mat-cell>
- </ng-container>
- <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
- <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
- </mat-table>
- </mat-tab>
-
- <mat-tab label="Service Statistics">
- <div id="servStats">
- <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>
+<!-- +============LICENSE_START======================================================= +Copyright (C) 2018 Ericsson. All rights reserved. +================================================================================ +Licensed under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. +You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software +distributed under the License is distributed on an "AS IS" BASIS, +WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +See the License for the specific language governing permissions and +limitations under the License. + +SPDX-License-Identifier: Apache-2.0 +============LICENSE_END========================================================= + +@authors: ronan.kenny@ericsson.com, waqas.ikram@ericsson.com +--> + +<base href="/"> + +<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> +<link rel="stylesheet" ng-href="./home.component.scss"> +<div class="completeForm"> + <div class="searchArea"> + + <!-- Dropdown Filter and TextBox for Service Instance Id --> + <div class="container-home"> + <mat-form-field class="selectFilter"> + <mat-select class="formatBox" [(ngModel)]="searchData.selectedValueSII" name="sel" placeholder="Select Filter"> + <mat-option *ngFor="let option of options" [value]="option.value">{{option.name}}</mat-option> + </mat-select> + </mat-form-field> + <mat-form-field class="valueInput"> + <input matInput #searchValueSII type="text" [(ngModel)]="searchData.serviceInstanceId" placeholder="Service Instance Id"> + </mat-form-field> + </div> + + <!-- Dropdown Filter and TextBox for Request Id --> + <div class="container-home"> + <mat-form-field class="selectFilter"> + <mat-select class="formatBox" [(ngModel)]="searchData.selectedValueRI" name="sel" placeholder="Select Filter"> + <mat-option *ngFor="let option of options" [value]="option.value">{{option.name}}</mat-option> + </mat-select> + </mat-form-field> + <mat-form-field class="valueInput"> + <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> + </div> + + <!-- Dropdown Filter and TextBox for Service Name --> + <div class="container-home"> + <mat-form-field class="selectFilter"> + <mat-select class="formatBox" [(ngModel)]="searchData.selectedValueSN" name="sel" placeholder="Select Filter"> + <mat-option *ngFor="let option of options" [value]="option.value">{{option.name}}</mat-option> + </mat-select> + </mat-form-field> + <mat-form-field class="valueInput"> + <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> + </div> + + <!-- Dropdown Filter for Status --> + <div class="container-home"> + <mat-form-field class="selectFilter"> + <mat-select class="formatBox" [(ngModel)]="searchData.selectedValueSTATUS" name="sel" placeholder="Status"> + <mat-option *ngFor="let statusOption of statusOptions" [value]="statusOption.value">{{ statusOption.name }}</mat-option> + </mat-select> + </mat-form-field> + </div> + <br /> + + <!-- Button to call makeCall() function to commence search based on parameters --> + <button (click)="makeCall()" class="fa fa-search"></button> + </div> + + <br /> + + <!-- Table to display selected fields if data present --> + <div class="example-container mat-elevation-z8"> + <mat-tab-group class="tab-group"> + <mat-tab label="Service Instances"> + <mat-table [dataSource]="processData"> + <ng-container matColumnDef="requestId"> + <mat-header-cell *matHeaderCellDef> Request Id </mat-header-cell> + <mat-cell *matCellDef="let process"><a routerLink="" (click)="getProcessIsntanceId(process.requestId)">{{ process.requestId }}</a></mat-cell> + </ng-container> + <ng-container matColumnDef="serviceInstanceId"> + <mat-header-cell *matHeaderCellDef> Instance Id </mat-header-cell> + <mat-cell *matCellDef="let process"> {{ process.serviceInstanceId }} </mat-cell> + </ng-container> + <ng-container matColumnDef="serviceIstanceName"> + <mat-header-cell *matHeaderCellDef> Instance Name </mat-header-cell> + <mat-cell *matCellDef="let process"> {{ process.serviceIstanceName }} </mat-cell> + </ng-container> + <ng-container matColumnDef="networkId"> + <mat-header-cell *matHeaderCellDef> Network Id </mat-header-cell> + <mat-cell *matCellDef="let process"> {{ process.networkId }} </mat-cell> + </ng-container> + <ng-container matColumnDef="requestStatus"> + <mat-header-cell *matHeaderCellDef> Request Status </mat-header-cell> + <mat-cell *matCellDef="let process"> {{ process.requestStatus }} </mat-cell> + </ng-container> + <ng-container matColumnDef="serviceType"> + <mat-header-cell *matHeaderCellDef> Service Type </mat-header-cell> + <mat-cell *matCellDef="let process"> {{ process.serviceType }} </mat-cell> + </ng-container> + <ng-container matColumnDef="startTime"> + <mat-header-cell *matHeaderCellDef> Start Time </mat-header-cell> + <mat-cell *matCellDef="let process"> {{ (process.startTime | date:'yyyy-MM-dd HH:mm:sss Z') }} </mat-cell> + </ng-container> + <ng-container matColumnDef="endTime"> + <mat-header-cell *matHeaderCellDef> End Time </mat-header-cell> + <mat-cell *matCellDef="let process"> {{ (process.endTime | date:'yyyy-MM-dd HH:mm:sss Z') }} </mat-cell> + </ng-container> + <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row> + <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row> + </mat-table> + </mat-tab> + + <mat-tab label="Service Statistics"> + <div id="servStats"> + <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/environments/environment.ts b/so-monitoring/so-monitoring-ui/src/main/frontend/src/environments/environment.ts index 003abf946f..f0c63fe582 100644 --- a/so-monitoring/so-monitoring-ui/src/main/frontend/src/environments/environment.ts +++ b/so-monitoring/so-monitoring-ui/src/main/frontend/src/environments/environment.ts @@ -24,5 +24,5 @@ SPDX-License-Identifier: Apache-2.0 export const environment = { production: false, - soMonitoringBackendURL: 'http://so-monitoring:9091/so/monitoring/' + soMonitoringBackendURL: 'http://so-monitoring:30224/so/monitoring/' }; |