Changes to UI Time Variables

Change-Id: If1289c7a7addf032b6c8d98fd58fca92ffcd5a7c
Issue-ID: SO-1265
Signed-off-by: Eoin Hanan <eoin.hanan@ericsson.com>

2 files changed, 304 insertions, 304 deletions

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/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>