-<!--\r
-============LICENSE_START=======================================================\r
- Copyright (C) 2018 Ericsson. All rights reserved.\r
-================================================================================\r
-Licensed under the Apache License, Version 2.0 (the "License");\r
-you may not use this file except in compliance with the License.\r
-You may obtain a copy of the License at\r
-\r
- http://www.apache.org/licenses/LICENSE-2.0\r
-\r
-Unless required by applicable law or agreed to in writing, software\r
-distributed under the License is distributed on an "AS IS" BASIS,\r
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\r
-See the License for the specific language governing permissions and\r
- limitations under the License.\r
-\r
-SPDX-License-Identifier: Apache-2.0\r
-============LICENSE_END=========================================================\r
-\r
-@authors: ronan.kenny@ericsson.com, waqas.ikram@ericsson.com\r
--->\r
-\r
-<div class="completeForm">\r
- <div class="topCanvas">\r
- <section class="canvas" id="canvas"></section>\r
- <mat-card class="besideCanvas" id="besideCanvas">\r
- <mat-card-title>Process Information</mat-card-title>\r
- <br />\r
- <mat-card-content>Process Instance Id: </mat-card-content>\r
- <mat-card-content>{{ processInstanceID }}</mat-card-content>\r
- <br />\r
- <mat-card-content>Process Definition Id: </mat-card-content>\r
- <mat-card-content>{{ processDefinitionID }}</mat-card-content>\r
- <br />\r
- <mat-card-content>Process Definition Name: </mat-card-content>\r
- <mat-card-content>{{ processDefinitionName }}</mat-card-content>\r
- </mat-card>\r
- </div>\r
- <br />\r
-\r
- <div class="example-container mat-elevation-z8">\r
- <mat-tab-group class="tab-group">\r
- <mat-tab label="Activity Instances">\r
- <mat-table [dataSource]="activityInstance">\r
- <ng-container matColumnDef="activityId">\r
- <mat-header-cell *matHeaderCellDef> Activity Id </mat-header-cell>\r
- <mat-cell *matCellDef="let activity"> {{ activity.activityId }} </mat-cell>\r
- </ng-container>\r
- <ng-container matColumnDef="activityName">\r
- <mat-header-cell *matHeaderCellDef> Activity Name </mat-header-cell>\r
- <mat-cell *matCellDef="let activity">\r
- <div [ngSwitch]="!!activity.calledProcessInstanceId">\r
- <div *ngSwitchCase="false"><a> {{ activity.activityName }} </a></div>\r
- <div *ngSwitchCase="true"><a [routerLink]="['/details', activity.calledProcessInstanceId]"> {{ activity.activityName }} </a></div>\r
- </div>\r
- </mat-cell>\r
- </ng-container>\r
- <ng-container matColumnDef="activityType">\r
- <mat-header-cell *matHeaderCellDef> Activity Type </mat-header-cell>\r
- <mat-cell *matCellDef="let activity"> {{ activity.activityType }} </mat-cell>\r
- </ng-container>\r
- <ng-container matColumnDef="startTime">\r
- <mat-header-cell *matHeaderCellDef> Start Time </mat-header-cell>\r
- <mat-cell *matCellDef="let activity"> {{ activity.startTime }} </mat-cell>\r
- </ng-container>\r
- <ng-container matColumnDef="endTime">\r
- <mat-header-cell *matHeaderCellDef> End Time </mat-header-cell>\r
- <mat-cell *matCellDef="let activity"> {{ activity.endTime }} </mat-cell>\r
- </ng-container>\r
- <ng-container matColumnDef="durationInMillis">\r
- <mat-header-cell *matHeaderCellDef> Duration (ms) </mat-header-cell>\r
- <mat-cell *matCellDef="let activity"> {{ activity.durationInMillis }} </mat-cell>\r
- </ng-container>\r
- <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>\r
- <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>\r
- </mat-table>\r
- </mat-tab>\r
-\r
- <mat-tab label="Variable Instances">\r
- <mat-table [dataSource]="variableInstance">\r
- <ng-container matColumnDef="name">\r
- <mat-header-cell *matHeaderCellDef> Name </mat-header-cell>\r
- <mat-cell *matCellDef="let variable"> {{ variable.name }} </mat-cell>\r
- </ng-container>\r
- <ng-container matColumnDef="type">\r
- <mat-header-cell *matHeaderCellDef> Type </mat-header-cell>\r
- <mat-cell *matCellDef="let variable"> {{ variable.type }} </mat-cell>\r
- </ng-container>\r
- <ng-container matColumnDef="value">\r
- <mat-header-cell *matHeaderCellDef> Value </mat-header-cell>\r
- <mat-cell *matCellDef="let variable"> {{ variable.value }} </mat-cell>\r
- </ng-container>\r
- <mat-header-row *matHeaderRowDef="displayedColumnsVariable"></mat-header-row>\r
- <mat-row *matRowDef="let row; columns: displayedColumnsVariable;"></mat-row>\r
- </mat-table>\r
- </mat-tab>\r
- </mat-tab-group>\r
- </div>\r
-</div>\r
-\r
-<ngx-spinner bdColor="rgba(51, 51, 51, 0.8)" size="large" color="#00285f" type="ball-spin-clockwise-fade-rotating"></ngx-spinner>\r
+<!--
+============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>
-<!--\r
-============LICENSE_START=======================================================\r
-Copyright (C) 2018 Ericsson. All rights reserved.\r
-================================================================================\r
-Licensed under the Apache License, Version 2.0 (the "License");\r
-you may not use this file except in compliance with the License.\r
-You may obtain a copy of the License at\r
-\r
- http://www.apache.org/licenses/LICENSE-2.0\r
-\r
-Unless required by applicable law or agreed to in writing, software\r
-distributed under the License is distributed on an "AS IS" BASIS,\r
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\r
-See the License for the specific language governing permissions and\r
-limitations under the License.\r
-\r
-SPDX-License-Identifier: Apache-2.0\r
-============LICENSE_END=========================================================\r
-\r
-@authors: ronan.kenny@ericsson.com, waqas.ikram@ericsson.com\r
--->\r
-\r
-<base href="/">\r
-\r
-<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">\r
-<link rel="stylesheet" ng-href="./home.component.scss">\r
-<div class="completeForm">\r
- <div class="searchArea">\r
-\r
- <!-- Dropdown Filter and TextBox for Service Instance Id -->\r
- <div class="container-home">\r
- <mat-form-field class="selectFilter">\r
- <mat-select class="formatBox" [(ngModel)]="searchData.selectedValueSII" name="sel" placeholder="Select Filter">\r
- <mat-option *ngFor="let option of options" [value]="option.value">{{option.name}}</mat-option>\r
- </mat-select>\r
- </mat-form-field>\r
- <mat-form-field class="valueInput">\r
- <input matInput #searchValueSII type="text" [(ngModel)]="searchData.serviceInstanceId" placeholder="Service Instance Id">\r
- </mat-form-field>\r
- </div>\r
-\r
- <!-- Dropdown Filter and TextBox for Request Id -->\r
- <div class="container-home">\r
- <mat-form-field class="selectFilter">\r
- <mat-select class="formatBox" [(ngModel)]="searchData.selectedValueRI" name="sel" placeholder="Select Filter">\r
- <mat-option *ngFor="let option of options" [value]="option.value">{{option.name}}</mat-option>\r
- </mat-select>\r
- </mat-form-field>\r
- <mat-form-field class="valueInput">\r
- <input matInput #searchValueRI type="text" [(ngModel)]="searchData.requestId" placeholder="Request Id">\r
- </mat-form-field>\r
-\r
- <!-- Angular Start Date Picker -->\r
- <mat-form-field class="startDate">\r
- <input matInput #startDate [matDatepicker]="picker" [(ngModel)]="searchData.startDate" placeholder="Choose a start date">\r
- <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>\r
- <mat-datepicker #picker></mat-datepicker>\r
- </mat-form-field>\r
-\r
- <!-- Dropdown box for Start Hour selection -->\r
- <mat-form-field class="selectHour">\r
- <mat-select class="formatBox" [(ngModel)]="searchData.selectedStartHour" name="hourFrom" placeholder="Select Hour">\r
- <mat-option *ngFor="let option of hourOptions" [value]="option">{{option}}</mat-option>\r
- </mat-select>\r
- </mat-form-field>\r
-\r
- <!-- Dropdown box for Start Minute selection -->\r
- <mat-form-field class="selectMinute">\r
- <mat-select class="formatBox" [(ngModel)]="searchData.selectedStartMinute" name="minuteFrom" placeholder="Select Minute">\r
- <mat-option *ngFor="let option of minuteOptions" [value]="option">{{option}}</mat-option>\r
- </mat-select>\r
- </mat-form-field>\r
- </div>\r
-\r
- <!-- Dropdown Filter and TextBox for Service Name -->\r
- <div class="container-home">\r
- <mat-form-field class="selectFilter">\r
- <mat-select class="formatBox" [(ngModel)]="searchData.selectedValueSN" name="sel" placeholder="Select Filter">\r
- <mat-option *ngFor="let option of options" [value]="option.value">{{option.name}}</mat-option>\r
- </mat-select>\r
- </mat-form-field>\r
- <mat-form-field class="valueInput">\r
- <input matInput #searchValueSN type="text" [(ngModel)]="searchData.serviceInstanceName" placeholder="Service Name">\r
- </mat-form-field>\r
-\r
- <!-- Angular End Date Picker -->\r
- <mat-form-field class="endDate">\r
- <input matInput #endDate [matDatepicker]="endpicker" [(ngModel)]="searchData.endDate" placeholder="Choose an end date">\r
- <mat-datepicker-toggle matSuffix [for]="endpicker"></mat-datepicker-toggle>\r
- <mat-datepicker #endpicker></mat-datepicker>\r
- </mat-form-field>\r
-\r
- <!-- Dropdown box for End Hour selection -->\r
- <mat-form-field class="selectHour">\r
- <mat-select class="formatBox" [(ngModel)]="searchData.selectedEndHour" name="hourTo" placeholder="Select Hour">\r
- <mat-option *ngFor="let option of hourOptions" [value]="option">{{option}}</mat-option>\r
- </mat-select>\r
- </mat-form-field>\r
-\r
- <!-- Dropdown box for End Minute selection -->\r
- <mat-form-field class="selectMinute">\r
- <mat-select class="formatBox" [(ngModel)]="searchData.selectedEndMinute" name="minuteTo" placeholder="Select Minute">\r
- <mat-option *ngFor="let option of minuteOptions" [value]="option">{{option}}</mat-option>\r
- </mat-select>\r
- </mat-form-field>\r
- </div>\r
-\r
- <!-- Dropdown Filter for Status -->\r
- <div class="container-home">\r
- <mat-form-field class="selectFilter">\r
- <mat-select class="formatBox" [(ngModel)]="searchData.selectedValueSTATUS" name="sel" placeholder="Status">\r
- <mat-option *ngFor="let statusOption of statusOptions" [value]="statusOption.value">{{ statusOption.name }}</mat-option>\r
- </mat-select>\r
- </mat-form-field>\r
- </div>\r
- <br />\r
-\r
- <!-- Button to call makeCall() function to commence search based on parameters -->\r
- <button (click)="makeCall()" class="fa fa-search"></button>\r
- </div>\r
-\r
- <br />\r
-\r
- <!-- Table to display selected fields if data present -->\r
- <div class="example-container mat-elevation-z8">\r
- <mat-tab-group class="tab-group">\r
- <mat-tab label="Service Instances">\r
- <mat-table [dataSource]="processData">\r
- <ng-container matColumnDef="requestId">\r
- <mat-header-cell *matHeaderCellDef> Request Id </mat-header-cell>\r
- <mat-cell *matCellDef="let process"><a routerLink="" (click)="getProcessIsntanceId(process.requestId)">{{ process.requestId }}</a></mat-cell>\r
- </ng-container>\r
- <ng-container matColumnDef="serviceInstanceId">\r
- <mat-header-cell *matHeaderCellDef> Instance Id </mat-header-cell>\r
- <mat-cell *matCellDef="let process"> {{ process.serviceInstanceId }} </mat-cell>\r
- </ng-container>\r
- <ng-container matColumnDef="serviceIstanceName">\r
- <mat-header-cell *matHeaderCellDef> Instance Name </mat-header-cell>\r
- <mat-cell *matCellDef="let process"> {{ process.serviceIstanceName }} </mat-cell>\r
- </ng-container>\r
- <ng-container matColumnDef="networkId">\r
- <mat-header-cell *matHeaderCellDef> Network Id </mat-header-cell>\r
- <mat-cell *matCellDef="let process"> {{ process.networkId }} </mat-cell>\r
- </ng-container>\r
- <ng-container matColumnDef="requestStatus">\r
- <mat-header-cell *matHeaderCellDef> Request Status </mat-header-cell>\r
- <mat-cell *matCellDef="let process"> {{ process.requestStatus }} </mat-cell>\r
- </ng-container>\r
- <ng-container matColumnDef="serviceType">\r
- <mat-header-cell *matHeaderCellDef> Service Type </mat-header-cell>\r
- <mat-cell *matCellDef="let process"> {{ process.serviceType }} </mat-cell>\r
- </ng-container>\r
- <ng-container matColumnDef="startTime">\r
- <mat-header-cell *matHeaderCellDef> Start Time </mat-header-cell>\r
- <mat-cell *matCellDef="let process"> {{ process.startTime }} </mat-cell>\r
- </ng-container>\r
- <ng-container matColumnDef="endTime">\r
- <mat-header-cell *matHeaderCellDef> End Time </mat-header-cell>\r
- <mat-cell *matCellDef="let process"> {{ process.endTime }} </mat-cell>\r
- </ng-container>\r
- <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>\r
- <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>\r
- </mat-table>\r
- </mat-tab>\r
-\r
- <mat-tab label="Service Statistics">\r
- <div id="servStats">\r
- <table class="statsTable">\r
- <tbody>\r
- <tr>\r
- <td>Total: {{ totalVal }}</td>\r
- <td></td>\r
- </tr>\r
- <tr>\r
- <td>Complete: {{ completeVal }}</td>\r
- <td> {{ percentageComplete }}%</td>\r
- </tr>\r
- <tr>\r
- <td>Failed: {{ failedVal }}</td>\r
- <td> {{ percentageFailed }}%</td>\r
- </tr>\r
- <tr>\r
- <td>In Progress: {{ inProgressVal }}</td>\r
- <td> {{ percentageInProg }}%</td>\r
- </tr>\r
- <tr>\r
- <td>Pending: {{ pendingVal }}</td>\r
- <td> {{ percentagePending }}%</td>\r
- </tr>\r
- <tr>\r
- <td>Unlocked: {{ unlockedVal }}</td>\r
- <td> {{ percentageUnlocked }}%</td>\r
- </tr>\r
- </tbody>\r
- </table>\r
- </div>\r
- </mat-tab>\r
- </mat-tab-group>\r
- </div>\r
-</div>\r
-\r
-<ngx-spinner bdColor="rgba(51, 51, 51, 0.8)" size="large" color="#00285f" type="ball-spin-clockwise-fade-rotating"></ngx-spinner>\r
-<router-outlet></router-outlet>\r
+<!--
+============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>
Code Review / so.git / commitdiff