Add Pagination and sorting

Change-Id: I1374472395a5a2af712c5f06c756c013de08bd27
Issue-ID: SO-1406
Signed-off-by: Andrei_Barcovschi <andrei.barcovschi@ericsson.com>

6 files changed, 377 insertions, 340 deletions

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 3d736edb95..23308639b6 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
@@ -1,79 +1,75 @@
-/**

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

-*/

-

-import { BrowserModule } from '@angular/platform-browser';

-import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';

-

-import { AppRoutingModule } from './app-routing.module';

-import { AppComponent } from './app.component';

-import { SidebarComponent } from './sidebar/sidebar.component';

-import { TopbarComponent } from './topbar/topbar.component';

-import { HomeComponent } from './home/home.component';

-import { HttpClientModule } from '@angular/common/http';

-import { FormsModule, ReactiveFormsModule } from '@angular/forms';

-import { MatTableModule } from '@angular/material';

-import { DetailsComponent } from './details/details.component';

-import { ToastrNotificationService } from './toastr-notification-service.service';

-import { MatTabsModule } from '@angular/material/tabs';

-import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

-import { MatSelectModule } from '@angular/material/select';

-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';

-import { RouterModule, Routes } from '@angular/router';

-import { APP_BASE_HREF } from '@angular/common';

-

-@NgModule({

-  declarations: [

-    AppComponent,

-    SidebarComponent,

-    TopbarComponent,

-    HomeComponent,

-    DetailsComponent

-  ],

-  imports: [

-    BrowserModule,

-    AppRoutingModule,

-    HttpClientModule,

-    FormsModule,

-    MatTableModule,

-    MatTabsModule,

-    BrowserAnimationsModule,

-    MatSelectModule,

-    MatFormFieldModule,

-    MatInputModule,

-    MatDatepickerModule,

-    MatNativeDateModule,

-    MatCardModule,

-    NgxSpinnerModule,

-    RouterModule,

-    RouterModule.forRoot([])

-  ],

-  schemas: [

-    CUSTOM_ELEMENTS_SCHEMA

-  ],

-  providers: [ToastrNotificationService],

-  bootstrap: [AppComponent]

-})

-export class AppModule { }

+/**
+============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
+*/
+
+import { BrowserModule } from '@angular/platform-browser';
+import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+
+import { AppRoutingModule } from './app-routing.module';
+import { AppComponent } from './app.component';
+import { SidebarComponent } from './sidebar/sidebar.component';
+import { TopbarComponent } from './topbar/topbar.component';
+import { HomeComponent } from './home/home.component';
+import { HttpClientModule } from '@angular/common/http';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { DetailsComponent } from './details/details.component';
+import { ToastrNotificationService } from './toastr-notification-service.service';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { MatFormFieldModule, MatInputModule, MatTableModule, MatTabsModule, MatSelectModule, MatNativeDateModule, MatDatepickerModule, MatCardModule, MatPaginatorModule, MatSortModule } from '@angular/material';
+import { NgxSpinnerModule } from 'ngx-spinner';
+import { RouterModule, Routes } from '@angular/router';
+import { APP_BASE_HREF } from '@angular/common';
+
+@NgModule({
+  declarations: [
+    AppComponent,
+    SidebarComponent,
+    TopbarComponent,
+    HomeComponent,
+    DetailsComponent
+  ],
+  imports: [
+    BrowserModule,
+    AppRoutingModule,
+    HttpClientModule,
+    FormsModule,
+    MatTableModule,
+    MatTabsModule,
+    BrowserAnimationsModule,
+    MatSelectModule,
+    MatFormFieldModule,
+    MatInputModule,
+    MatDatepickerModule,
+    MatNativeDateModule,
+    MatCardModule,
+    NgxSpinnerModule,
+    RouterModule,
+    MatPaginatorModule,
+    MatSortModule,
+    RouterModule.forRoot([])
+  ],
+  schemas: [
+    CUSTOM_ELEMENTS_SCHEMA
+  ],
+  providers: [ToastrNotificationService],
+  bootstrap: [AppComponent]
+})
+export class AppModule { }
diff --git a/so-monitoring/so-monitoring-ui/src/main/frontend/src/app/data.service.spec.ts b/so-monitoring/so-monitoring-ui/src/main/frontend/src/app/data.service.spec.ts
index 834b8c34ea..0438aa3419 100644
--- a/so-monitoring/so-monitoring-ui/src/main/frontend/src/app/data.service.spec.ts
+++ b/so-monitoring/so-monitoring-ui/src/main/frontend/src/app/data.service.spec.ts
@@ -1,110 +1,110 @@
-/**

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

-*/

-

-import { TestBed, inject } from '@angular/core/testing';

-

-import { DataService } from './data.service';

-import { HttpClient } from '@angular/common/http';

-import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing';

-import { async } from '@angular/core/testing';

-import { HttpClientModule } from '@angular/common/http';

-import { ToastrNotificationService } from './toastr-notification-service.service';

-import { environment } from '../environments/environment';

-

-class StubbedToastrNotificationService extends ToastrNotificationService {

-  toastrSettings() {

-  }

-}

-

-describe('DataService', () => {

-  beforeEach(() => {

-    TestBed.configureTestingModule({

-      providers: [DataService, { provide: ToastrNotificationService, useClass: StubbedToastrNotificationService }],

-      imports: [HttpClientTestingModule]

-    });

-  });

-

-  // Ensure creation of DataService component

-  it('component should be created', async(inject([HttpTestingController, DataService, ToastrNotificationService],

-    (httpClient: HttpTestingController, service: DataService, toastr: ToastrNotificationService) => {

-      expect(service).toBeTruthy();

-    })));

-

-  // Test retrieveInstance function making POST call

-  it('test retrieveInstance POST request', async(inject([HttpTestingController, DataService, ToastrNotificationService],

-    (httpClient: HttpTestingController, service: DataService, toastr: ToastrNotificationService) => {

-      service.retrieveInstance({}, 1, 2).subscribe(data => { });

-      var url = environment.soMonitoringBackendURL + 'v1/search?from=1&to=2';

-      const mockReq = httpClient.expectOne(url);

-      expect(mockReq.request.method).toEqual('POST');

-      mockReq.flush({});

-    })));

-

-  // Test getProcessInstanceId function making GET request to retrieve processInstanceID

-  it('test getProcessInstanceId GET request', async(inject([HttpTestingController, DataService, ToastrNotificationService],

-    (httpClient: HttpTestingController, service: DataService, toastr: ToastrNotificationService) => {

-      service.getProcessInstanceId("").subscribe(data => { });

-      var url = environment.soMonitoringBackendURL + 'process-instance-id/' + "";

-      const mockReq = httpClient.expectOne(url);

-      expect(mockReq.request.method).toEqual('GET');

-      mockReq.flush({});

-    })));

-

-  // Test getActivityInstance function making GET request to retrieve activityInstance

-  it('test getActivityInstance GET request', async(inject([HttpTestingController, DataService, ToastrNotificationService],

-    (httpClient: HttpTestingController, service: DataService, toastr: ToastrNotificationService) => {

-      service.getActivityInstance("").subscribe(data => { });

-      var url = environment.soMonitoringBackendURL + 'activity-instance/' + "";

-      const mockReq = httpClient.expectOne(url);

-      expect(mockReq.request.method).toEqual('GET');

-      mockReq.flush({});

-    })));

-

-  // Test getProcessInstance function making GET request to retrieve processInstance

-  it('test getProcessInstance GET request', async(inject([HttpTestingController, DataService, ToastrNotificationService],

-    (httpClient: HttpTestingController, service: DataService, toastr: ToastrNotificationService) => {

-      service.getProcessInstance("");

-      var url = environment.soMonitoringBackendURL + 'process-instance/' + "";

-      const mockReq = httpClient.expectOne(url);

-      expect(mockReq.request.method).toEqual('GET');

-    })));

-

-  // Test getProcessDefinition function making GET request to retrieve processDefinition

-  it('test getProcessDefinition GET request', async(inject([HttpTestingController, DataService, ToastrNotificationService],

-    (httpClient: HttpTestingController, service: DataService, toastr: ToastrNotificationService) => {

-      service.getProcessDefinition("").subscribe(data => { });

-      var url = environment.soMonitoringBackendURL + 'process-definition/' + "";

-      const mockReq = httpClient.expectOne(url);

-      expect(mockReq.request.method).toEqual('GET');

-      mockReq.flush({});

-    })));

-

-  // Test getVariableInstance function making GET request to retrieve variableInstance

-  it('test getVariableInstance GET request', async(inject([HttpTestingController, DataService, ToastrNotificationService],

-    (httpClient: HttpTestingController, service: DataService, toastr: ToastrNotificationService) => {

-      service.getVariableInstance("").subscribe(data => { });

-      var url = environment.soMonitoringBackendURL + 'variable-instance/' + "";

-      const mockReq = httpClient.expectOne(url);

-      expect(mockReq.request.method).toEqual('GET');

-      mockReq.flush({});

-    })));

-});

+/**
+============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
+*/
+
+import { TestBed, inject } from '@angular/core/testing';
+
+import { DataService } from './data.service';
+import { HttpClient } from '@angular/common/http';
+import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing';
+import { async } from '@angular/core/testing';
+import { HttpClientModule } from '@angular/common/http';
+import { ToastrNotificationService } from './toastr-notification-service.service';
+import { environment } from '../environments/environment';
+
+class StubbedToastrNotificationService extends ToastrNotificationService {
+  toastrSettings() {
+  }
+}
+
+describe('DataService', () => {
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [DataService, { provide: ToastrNotificationService, useClass: StubbedToastrNotificationService }],
+      imports: [HttpClientTestingModule]
+    });
+  });
+
+  // Ensure creation of DataService component
+  it('component should be created', async(inject([HttpTestingController, DataService, ToastrNotificationService],
+    (httpClient: HttpTestingController, service: DataService, toastr: ToastrNotificationService) => {
+      expect(service).toBeTruthy();
+    })));
+
+  // Test retrieveInstance function making POST call
+  it('test retrieveInstance POST request', async(inject([HttpTestingController, DataService, ToastrNotificationService],
+    (httpClient: HttpTestingController, service: DataService, toastr: ToastrNotificationService) => {
+      service.retrieveInstance({}, 1, 2).subscribe(data => { });
+      var url = environment.soMonitoringBackendURL + 'v1/search?from=1&to=2';
+      const mockReq = httpClient.expectOne(url);
+      expect(mockReq.request.method).toEqual('POST');
+      mockReq.flush({});
+    })));
+
+  // Test getProcessInstanceId function making GET request to retrieve processInstanceID
+  it('test getProcessInstanceId GET request', async(inject([HttpTestingController, DataService, ToastrNotificationService],
+    (httpClient: HttpTestingController, service: DataService, toastr: ToastrNotificationService) => {
+      service.getProcessInstanceId("").subscribe(data => { });
+      var url = environment.soMonitoringBackendURL + 'process-instance-id/' + "";
+      const mockReq = httpClient.expectOne(url);
+      expect(mockReq.request.method).toEqual('GET');
+      mockReq.flush({});
+    })));
+
+  // Test getActivityInstance function making GET request to retrieve activityInstance
+  it('test getActivityInstance GET request', async(inject([HttpTestingController, DataService, ToastrNotificationService],
+    (httpClient: HttpTestingController, service: DataService, toastr: ToastrNotificationService) => {
+      service.getActivityInstance("").then(data => { });
+      var url = environment.soMonitoringBackendURL + 'activity-instance/' + "";
+      const mockReq = httpClient.expectOne(url);
+      expect(mockReq.request.method).toEqual('GET');
+      mockReq.flush({});
+    })));
+
+  // Test getProcessInstance function making GET request to retrieve processInstance
+  it('test getProcessInstance GET request', async(inject([HttpTestingController, DataService, ToastrNotificationService],
+    (httpClient: HttpTestingController, service: DataService, toastr: ToastrNotificationService) => {
+      service.getProcessInstance("");
+      var url = environment.soMonitoringBackendURL + 'process-instance/' + "";
+      const mockReq = httpClient.expectOne(url);
+      expect(mockReq.request.method).toEqual('GET');
+    })));
+
+  // Test getProcessDefinition function making GET request to retrieve processDefinition
+  it('test getProcessDefinition GET request', async(inject([HttpTestingController, DataService, ToastrNotificationService],
+    (httpClient: HttpTestingController, service: DataService, toastr: ToastrNotificationService) => {
+      service.getProcessDefinition("").subscribe(data => { });
+      var url = environment.soMonitoringBackendURL + 'process-definition/' + "";
+      const mockReq = httpClient.expectOne(url);
+      expect(mockReq.request.method).toEqual('GET');
+      mockReq.flush({});
+    })));
+
+  // Test getVariableInstance function making GET request to retrieve variableInstance
+  it('test getVariableInstance GET request', async(inject([HttpTestingController, DataService, ToastrNotificationService],
+    (httpClient: HttpTestingController, service: DataService, toastr: ToastrNotificationService) => {
+      service.getVariableInstance("").subscribe(data => { });
+      var url = environment.soMonitoringBackendURL + 'variable-instance/' + "";
+      const mockReq = httpClient.expectOne(url);
+      expect(mockReq.request.method).toEqual('GET');
+      mockReq.flush({});
+    })));
+});
diff --git a/so-monitoring/so-monitoring-ui/src/main/frontend/src/app/details/details.component.scss b/so-monitoring/so-monitoring-ui/src/main/frontend/src/app/details/details.component.scss
index 52ace2f328..2789723964 100644
--- a/so-monitoring/so-monitoring-ui/src/main/frontend/src/app/details/details.component.scss
+++ b/so-monitoring/so-monitoring-ui/src/main/frontend/src/app/details/details.component.scss
@@ -1,68 +1,72 @@
-/**

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

-*/

-

-#canvas {

-  background: white;

-  padding: 0;

-  margin: 0;

-  width: 70%;

-  height: 470px;

-  margin-top: 0;

-  box-shadow: 0 5px 5px -3px rgba(0,0,0,.2), 0 8px 10px 1px rgba(0,0,0,.14), 0 3px 14px 2px rgba(0,0,0,.12);

-}

-

-#besideCanvas {

-  background: white;

-  padding-left: 20px;

-  margin: 0;

-  width: 28%;

-  height: 470px;

-  margin-top: 0;

-  box-shadow: 0 5px 5px -3px rgba(0,0,0,.2), 0 8px 10px 1px rgba(0,0,0,.14), 0 3px 14px 2px rgba(0,0,0,.12);

-  font-family: 'Montserrat', sans-serif;

-  font-size: 17px;

-}

-

-.topCanvas {

-  display: flex;

-  justify-content: space-between;

-}

-

-.mat-column-durationInMillis {

-  flex: 0 0 8%;

-}

-

-.mat-column-name {

-  flex: 0 0 40%;

-}

-

-.mat-column-type {

-  flex: 0 0 8%;

-}

-

-.mat-column-value {

-  flex: 0 0 52%;

-}

-

-.highlight:not(.djs-connection) .djs-visual > :nth-child(1) {

-   fill: cyan !important; /* color elements as green */

- }

+/**
+============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
+*/
+#canvas {
+  background: white;
+  padding: 0;
+  margin: 0;
+  width: 70%;
+  height: 470px;
+  margin-top: 0;
+  box-shadow: 0 5px 5px -3px rgba(0,0,0,.2), 0 8px 10px 1px rgba(0,0,0,.14), 0 3px 14px 2px rgba(0,0,0,.12);
+}
+
+#besideCanvas {
+  background: white;
+  padding-left: 20px;
+  margin: 0;
+  width: 28%;
+  height: 470px;
+  margin-top: 0;
+  box-shadow: 0 5px 5px -3px rgba(0,0,0,.2), 0 8px 10px 1px rgba(0,0,0,.14), 0 3px 14px 2px rgba(0,0,0,.12);
+  font-family: 'Montserrat', sans-serif;
+  font-size: 17px;
+}
+
+.topCanvas {
+  display: flex;
+  justify-content: space-between;
+}
+
+.mat-column-durationInMillis {
+  flex: 0 0 8%;
+}
+
+.mat-column-name {
+  flex: 0 0 40%;
+}
+
+.mat-column-type {
+  flex: 0 0 8%;
+}
+
+.mat-column-value {
+  flex: 0 0 52%;
+}
+
+.highlight:not(.djs-connection) .djs-visual > :nth-child(1) {
+  fill: cyan !important;
+  /* color elements as green */
+}
+
+.tab-group {
+  word-break: break-all;
+}
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 e4556ca840..0c0e1c04c3 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
@@ -17,7 +17,7 @@ limitations under the License.
 SPDX-License-Identifier: Apache-2.0
 ============LICENSE_END=========================================================
 
-@authors: ronan.kenny@ericsson.com, waqas.ikram@ericsson.com
+@authors: ronan.kenny@ericsson.com, waqas.ikram@ericsson.com, andrei.barcovschi@ericsson.com
 -->
 
 <base href="/">
@@ -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 -->
@@ -125,42 +125,44 @@ SPDX-License-Identifier: Apache-2.0
   <div class="example-container mat-elevation-z8">
     <mat-tab-group class="tab-group">
       <mat-tab label="Service Instances">
-        <mat-table [dataSource]="processData">
+        <mat-table [dataSource]="processData" matSort>
           <ng-container matColumnDef="requestId">
-            <mat-header-cell *matHeaderCellDef> Request Id </mat-header-cell>
+            <mat-header-cell *matHeaderCellDef mat-sort-header> 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-header-cell *matHeaderCellDef mat-sort-header> 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-header-cell *matHeaderCellDef mat-sort-header> 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-header-cell *matHeaderCellDef mat-sort-header> 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-header-cell *matHeaderCellDef mat-sort-header> 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-header-cell *matHeaderCellDef mat-sort-header> 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-header-cell *matHeaderCellDef mat-sort-header> 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-header-cell *matHeaderCellDef mat-sort-header> 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-paginator [pageSizeOptions]="pageSizeOptions" showFirstLastButtons>
+        </mat-paginator>
       </mat-tab>
 
       <mat-tab label="Service Statistics">
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 b8fac61adf..25b75d707d 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
@@ -17,27 +17,23 @@ See the License for the specific language governing permissions and
 SPDX-License-Identifier: Apache-2.0
 ============LICENSE_END=========================================================
 
-@authors: ronan.kenny@ericsson.com, waqas.ikram@ericsson.com
+@authors: ronan.kenny@ericsson.com, waqas.ikram@ericsson.com, andrei.barcovschi@ericsson.com
 */
 
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, ViewChild, ElementRef, Input, ViewEncapsulation } from '@angular/core';
 import { DataService } from '../data.service';
 import { ActivatedRoute, Router } from "@angular/router";
 import { Process } from '../model/process.model';
-
 import { ProcessInstanceId } from '../model/processInstanceId.model';
 import { ToastrNotificationService } from '../toastr-notification-service.service';
 import { MatSelectModule } from '@angular/material/select';
-import { ViewEncapsulation } from '@angular/core';
-import { FormsModule } from '@angular/forms';
-import { MatFormFieldModule, MatInputModule } from '@angular/material';
+import { FormsModule, FormControl } from '@angular/forms';
 import { SearchData } from '../model/searchData.model';
 import { MatDatepickerModule } from '@angular/material/datepicker';
-import { FormControl } from '@angular/forms';
 import { SearchRequest } from '../model/SearchRequest.model';
-import { ElementRef } from '@angular/core';
-import { Input } from '@angular/core';
 import { NgxSpinnerService } from 'ngx-spinner';
+import { MatFormFieldModule, MatInputModule, MatPaginator, MatSort, MatTableDataSource } from '@angular/material';
+import { Constants } from './home.constant';
 
 @Component({
   selector: 'app-home',
@@ -60,24 +56,19 @@ export class HomeComponent implements OnInit {
   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" },
-  { name: "FAILED", value: "FAILED" }, { name: "PENDING", value: "PENDING" }, { name: "UNLOCKED", value: "UNLOCKED" }];
-
-  hourOptions = ["00", "01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11",
-    "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23"];
+  options = Constants.OPTIONS;
+  statusOptions = Constants.STATUS_OPTIONS;
+  hourOptions = Constants.HOUR_OPTIONS;
+  minuteOptions = Constants.MINUTE_OPTIONS;
+  displayedColumns = Constants.DISPLAYED_COLUMNS;
+  pageSizeOptions = Constants.DEFAULT_PAGE_SIZE_OPTIONS;
 
-  minuteOptions = ["00", "01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12", "13", "14", "15",
-    "16", "17", "18", "19", "20", "21", "22", "23", "24", "25", "26", "27", "28", "29", "30", "31", "32", "33", "34", "35",
-    "36", "37", "38", "39", "40", "41", "42", "43", "44", "45", "46", "47", "48", "49", "50", "51", "52", "53", "54", "55",
-    "56", "57", "58", "59"];
-
-  processData: Process[];
   searchData: SearchData;
-
   startingDate: Date;
+  processData: MatTableDataSource<Process>;
 
-  displayedColumns = ['requestId', 'serviceInstanceId', 'serviceIstanceName', 'networkId', 'requestStatus', 'serviceType', 'startTime', 'endTime'];
+  @ViewChild(MatPaginator) paginator: MatPaginator;
+  @ViewChild(MatSort) sort: MatSort;
 
   constructor(private route: ActivatedRoute, private data: DataService,
     private router: Router, private popup: ToastrNotificationService,
@@ -93,16 +84,21 @@ export class HomeComponent implements OnInit {
       this.data.retrieveInstance(result.getFilters(), result.getStartTimeInMilliseconds(), result.getEndTimeInMilliseconds())
         .subscribe((data: Process[]) => {
           this.spinner.hide();
-          this.processData = data;
+          var processData: Process[] = data;
+          this.processData = new MatTableDataSource<Process>(processData);
+          this.processData.sort = this.sort;
+          this.processData.paginator = this.paginator;
+          this.processData.paginator.firstPage();
+
           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;
-          this.failedVal = this.processData.filter(i => i.requestStatus === "FAILED").length;
-          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.completeVal = processData.filter(i => i.requestStatus === "COMPLETE").length;
+          this.inProgressVal = processData.filter(i => i.requestStatus === "IN_PROGRESS").length;
+          this.failedVal = processData.filter(i => i.requestStatus === "FAILED").length;
+          this.pendingVal = processData.filter(i => i.requestStatus === "PENDING").length;
+          this.unlockedVal = processData.filter(i => i.requestStatus === "UNLOCKED").length;
+          this.totalVal = processData.length;
 
           // Calculate percentages to 2 decimal places and compare to 0 to avoid NaN error
           if (this.totalVal != 0) {
@@ -142,7 +138,5 @@ export class HomeComponent implements OnInit {
     });
   }
 
-  ngOnInit() {
-
-  }
+  ngOnInit() { }
 }
diff --git a/so-monitoring/so-monitoring-ui/src/main/frontend/src/app/home/home.constant.ts b/so-monitoring/so-monitoring-ui/src/main/frontend/src/app/home/home.constant.ts
new file mode 100644
index 0000000000..23ef63ff1e
--- /dev/null
+++ b/so-monitoring/so-monitoring-ui/src/main/frontend/src/app/home/home.constant.ts
@@ -0,0 +1,41 @@
+
+/**
+============LICENSE_START=======================================================
+ Copyright (C) 2019 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: andrei.barcovschi@ericsson.com, waqas.ikram@ericsson.com
+*/
+
+export class Constants {
+  public static OPTIONS = [{ name: "EQUAL", value: "EQ" }, { name: "NOT EQUAL", value: "NEQ" }, { name: "LIKE", value: "LIKE" }];
+
+  public static STATUS_OPTIONS = [{ name: "ALL", value: "ALL" }, { name: "COMPLETE", value: "COMPLETE" }, { name: "IN_PROGRESS", value: "IN_PROGRESS" },
+  { name: "FAILED", value: "FAILED" }, { name: "PENDING", value: "PENDING" }, { name: "UNLOCKED", value: "UNLOCKED" }];
+
+  public static HOUR_OPTIONS = ["00", "01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11",
+    "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23"];
+
+  public static MINUTE_OPTIONS = ["00", "01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12", "13", "14", "15",
+    "16", "17", "18", "19", "20", "21", "22", "23", "24", "25", "26", "27", "28", "29", "30", "31", "32", "33", "34", "35",
+    "36", "37", "38", "39", "40", "41", "42", "43", "44", "45", "46", "47", "48", "49", "50", "51", "52", "53", "54", "55",
+    "56", "57", "58", "59"];
+
+  public static DISPLAYED_COLUMNS = ['requestId', 'serviceInstanceId', 'serviceIstanceName', 'networkId', 'requestStatus', 'serviceType', 'startTime', 'endTime'];
+
+  public static DEFAULT_PAGE_SIZE_OPTIONS = [10, 25, 50, 100];
+}