SO Monitoring UI

Change-Id: I6f1c13119d18b8731a02c8559bb1484ec84d6041 Issue-ID: SO-726 Signed-off-by: waqas.ikram <waqas.ikram@ericsson.com> Signed-off-by: Ronan Kenny <ronan.kenny@ericsson.com>
author: waqas.ikram <waqas.ikram@ericsson.com> 2018-08-21 17:35:35 +0100
committer: Byung-Woo Jun <byung-woo.jun@ericsson.com> 2018-09-12 19:41:01 +0000
commit: 412309940cfd09a3698feded384340354178f4fe (patch)
tree: 8e390760d1f05300a23ecf2bb92949831f533eb4 /so-monitoring/so-monitoring-ui/src/main/frontend/src/app
parent: dcf0b71f3fd109f2c2e6623ba1d61fffcaa775d2 (diff)
36 files changed, 2057 insertions, 0 deletions
diff --git a/so-monitoring/so-monitoring-ui/src/main/frontend/src/app/app-routing.module.ts b/so-monitoring/so-monitoring-ui/src/main/frontend/src/app/app-routing.module.ts
new file mode 100644
index 0000000000..8a505d9e6b
--- /dev/null
+++ b/so-monitoring/so-monitoring-ui/src/main/frontend/src/app/app-routing.module.ts
@@ -0,0 +1,46 @@
+/**
+============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 { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+import { HomeComponent } from './home/home.component';
+import { DetailsComponent } from './details/details.component';
+
+const routes: Routes = [
+  {
+    // Route to home page
+    path: '',
+    component: HomeComponent
+  },
+  {
+    // Route to page to show individual process based on ID
+    path: 'details/:id',
+    component: DetailsComponent
+  },
+];
+
+@NgModule({
+  imports: [RouterModule.forRoot(routes, { onSameUrlNavigation: 'reload' })],
+  exports: [RouterModule]
+})
+
+export class AppRoutingModule { }
diff --git a/so-monitoring/so-monitoring-ui/src/main/frontend/src/app/app.component.html b/so-monitoring/so-monitoring-ui/src/main/frontend/src/app/app.component.html
new file mode 100644
index 0000000000..ddd274718d
--- /dev/null
+++ b/so-monitoring/so-monitoring-ui/src/main/frontend/src/app/app.component.html
@@ -0,0 +1,29 @@
+<!--
+============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
+-->
+
+<app-topbar></app-topbar>
+<div id="container">
+  <app-sidebar></app-sidebar>
+  <div id="content">
+    <router-outlet></router-outlet>
+  </div>
+</div>
diff --git a/so-monitoring/so-monitoring-ui/src/main/frontend/src/app/app.component.scss b/so-monitoring/so-monitoring-ui/src/main/frontend/src/app/app.component.scss
new file mode 100644
index 0000000000..e69de29bb2
--- /dev/null
+++ b/so-monitoring/so-monitoring-ui/src/main/frontend/src/app/app.component.scss
diff --git a/so-monitoring/so-monitoring-ui/src/main/frontend/src/app/app.component.spec.ts b/so-monitoring/so-monitoring-ui/src/main/frontend/src/app/app.component.spec.ts
new file mode 100644
index 0000000000..076be174fb
--- /dev/null
+++ b/so-monitoring/so-monitoring-ui/src/main/frontend/src/app/app.component.spec.ts
@@ -0,0 +1,53 @@
+/**
+============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, async } from '@angular/core/testing';
+import { RouterTestingModule } from '@angular/router/testing';
+import { AppComponent } from './app.component';
+describe('AppComponent', () => {
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      imports: [
+        RouterTestingModule
+      ],
+      declarations: [
+        AppComponent
+      ],
+    }).compileComponents();
+  }));
+  it('should create the app', async(() => {
+    const fixture = TestBed.createComponent(AppComponent);
+    const app = fixture.debugElement.componentInstance;
+    expect(app).toBeTruthy();
+  }));
+  it(`should have as title 'app'`, async(() => {
+    const fixture = TestBed.createComponent(AppComponent);
+    const app = fixture.debugElement.componentInstance;
+    expect(app.title).toEqual('app');
+  }));
+  it('should render title in a h1 tag', async(() => {
+    const fixture = TestBed.createComponent(AppComponent);
+    fixture.detectChanges();
+    const compiled = fixture.debugElement.nativeElement;
+    expect(compiled.querySelector('h1').textContent).toContain('Welcome to ONAP-SO-Monitor!');
+  }));
+});
diff --git a/so-monitoring/so-monitoring-ui/src/main/frontend/src/app/app.component.ts b/so-monitoring/so-monitoring-ui/src/main/frontend/src/app/app.component.ts
new file mode 100644
index 0000000000..2750e4780f
--- /dev/null
+++ b/so-monitoring/so-monitoring-ui/src/main/frontend/src/app/app.component.ts
@@ -0,0 +1,33 @@
+/**
+============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 { Component } from '@angular/core';
+
+@Component({
+    selector: 'app-root',
+    templateUrl: './app.component.html',
+    styleUrls: ['./app.component.scss']
+})
+
+export class AppComponent {
+    title = 'app';
+}
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
new file mode 100644
index 0000000000..c3a02b90f3
--- /dev/null
+++ b/so-monitoring/so-monitoring-ui/src/main/frontend/src/app/app.module.ts
@@ -0,0 +1,70 @@
+/**
+============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 } 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';
+
+@NgModule({
+  declarations: [
+    AppComponent,
+    SidebarComponent,
+    TopbarComponent,
+    HomeComponent,
+    DetailsComponent
+  ],
+  imports: [
+    BrowserModule,
+    AppRoutingModule,
+    HttpClientModule,
+    FormsModule,
+    MatTableModule,
+    MatTabsModule,
+    BrowserAnimationsModule,
+    MatSelectModule,
+    MatFormFieldModule,
+    MatInputModule,
+    MatDatepickerModule,
+    MatNativeDateModule,
+    MatCardModule
+  ],
+  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
new file mode 100644
index 0000000000..987d29d548
--- /dev/null
+++ b/so-monitoring/so-monitoring-ui/src/main/frontend/src/app/data.service.spec.ts
@@ -0,0 +1,37 @@
+/**
+============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';
+
+describe('DataService', () => {
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [DataService]
+    });
+  });
+
+  it('should be created', inject([DataService], (service: DataService) => {
+    expect(service).toBeTruthy();
+  }));
+});
diff --git a/so-monitoring/so-monitoring-ui/src/main/frontend/src/app/data.service.ts b/so-monitoring/so-monitoring-ui/src/main/frontend/src/app/data.service.ts
new file mode 100644
index 0000000000..8913eaa86f
--- /dev/null
+++ b/so-monitoring/so-monitoring-ui/src/main/frontend/src/app/data.service.ts
@@ -0,0 +1,96 @@
+/**
+============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 { Injectable } from '@angular/core';
+import { HttpClient, HttpErrorResponse } from '@angular/common/http';
+import { Process } from './model/process.model';
+import { catchError } from 'rxjs/operators';
+import { Observable } from 'rxjs';
+import { ProcessInstanceId } from './model/processInstanceId.model';
+import { environment } from '../environments/environment';
+import { HttpResponse } from '@angular/common/http';
+import { PII } from './model/processInstance.model';
+import { HttpErrorHandlerService } from './http-error-handler.service';
+
+
+@Injectable({
+  providedIn: 'root'
+})
+export class DataService {
+
+  constructor(private http: HttpClient, private httpErrorHandlerService: HttpErrorHandlerService) { }
+
+  // HTTP POST call to running Spring Boot application
+  retrieveInstance(servInstId: {}, from: number, to: number) {
+    var url = environment.soMonitoringBackendURL + 'v1/search?from=' + from + "&to=" + to;
+    return this.http.post<Process[]>(url, servInstId)
+      .pipe(
+        catchError(this.httpErrorHandlerService.handleError("POST", url))
+      );
+  }
+
+  // HTTP GET to return Process Instance using RequestID
+  getProcessInstanceId(requestId): Observable<HttpResponse<ProcessInstanceId>> {
+    var url = environment.soMonitoringBackendURL + 'process-instance-id/' + requestId;
+    console.log(requestId);
+    console.log(url);
+    return this.http.get<ProcessInstanceId>(url, { observe: 'response' })
+      .pipe(
+        catchError(this.httpErrorHandlerService.handleError("GET", url))
+      );
+  }
+
+  // HTTP GET to return Activity instancs using ProcessInstanceID
+  getActivityInstance(processInstanceId) {
+    var url = environment.soMonitoringBackendURL + 'activity-instance/' + processInstanceId;
+    return this.http.get(url)
+      .pipe(
+        catchError(this.httpErrorHandlerService.handleError("GET", url))
+      );
+  }
+
+  // HTTP GET to return Activity Instance using ProcessInstanceID
+  async getProcessInstance(processInstanceId): Promise<PII> {
+    var url = environment.soMonitoringBackendURL + 'process-instance/' + processInstanceId;
+    return await (this.http.get<PII>(url)
+      .pipe(
+        catchError(this.httpErrorHandlerService.handleError("GET", url))))
+      .toPromise();
+  }
+
+  // HTTP GET to return Process Definition using processDefinitionId
+  getProcessDefinition(processDefinitionId) {
+    var url = environment.soMonitoringBackendURL + 'process-definition/' + processDefinitionId;
+    return this.http.get(url).pipe(
+      catchError(this.httpErrorHandlerService.handleError("GET", url))
+    );
+  }
+
+  // HTTP GET to return Variable Instance using ProcessInstanceID
+  getVariableInstance(processDefinitionId) {
+    var url = environment.soMonitoringBackendURL + 'variable-instance/' + processDefinitionId;
+    return this.http.get(url).pipe(
+      catchError(this.httpErrorHandlerService.handleError("GET", url))
+    );
+  }
+
+}
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
new file mode 100644
index 0000000000..fc682acb61
--- /dev/null
+++ b/so-monitoring/so-monitoring-ui/src/main/frontend/src/app/details/details.component.html
@@ -0,0 +1,99 @@
+<!--
+============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>
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
new file mode 100644
index 0000000000..52ace2f328
--- /dev/null
+++ b/so-monitoring/so-monitoring-ui/src/main/frontend/src/app/details/details.component.scss
@@ -0,0 +1,68 @@
+/**
+============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 */
+ }
diff --git a/so-monitoring/so-monitoring-ui/src/main/frontend/src/app/details/details.component.spec.ts b/so-monitoring/so-monitoring-ui/src/main/frontend/src/app/details/details.component.spec.ts
new file mode 100644
index 0000000000..690c143b5f
--- /dev/null
+++ b/so-monitoring/so-monitoring-ui/src/main/frontend/src/app/details/details.component.spec.ts
@@ -0,0 +1,47 @@
+/**
+============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 { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DetailsComponent } from './details.component';
+
+describe('DetailsComponent', () => {
+  let component: DetailsComponent;
+  let fixture: ComponentFixture<DetailsComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [DetailsComponent]
+    })
+      .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(DetailsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/so-monitoring/so-monitoring-ui/src/main/frontend/src/app/details/details.component.ts b/so-monitoring/so-monitoring-ui/src/main/frontend/src/app/details/details.component.ts
new file mode 100644
index 0000000000..9561e9abf7
--- /dev/null
+++ b/so-monitoring/so-monitoring-ui/src/main/frontend/src/app/details/details.component.ts
@@ -0,0 +1,157 @@
+/**
+============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 { Component, OnInit } from '@angular/core';
+import { DataService } from '../data.service';
+import { ActivatedRoute, Router } from "@angular/router";
+import { Process } from '../model/process.model';
+import { ACTINST } from '../model/activityInstance.model';
+import { PII } from '../model/processInstance.model';
+import { PDI } from '../model/processDefinition.model';
+import { CommonModule } from '@angular/common';
+import Viewer from 'bpmn-js/lib/NavigatedViewer';
+import { ViewEncapsulation } from '@angular/core';
+import { MatTabsModule } from '@angular/material/tabs';
+import { VarInstance } from '../model/variableInstance.model';
+import { ToastrNotificationService } from '../toastr-notification-service.service';
+
+@Component({
+  selector: 'app-details',
+  templateUrl: './details.component.html',
+  styleUrls: ['./details.component.scss'],
+  encapsulation: ViewEncapsulation.None
+})
+
+export class DetailsComponent implements OnInit {
+
+  bpmnViewer: any;
+
+  processInstanceID: string;
+
+  processDefinitionID: string;
+
+  processDefinitionName: string;
+
+  activityInstance: ACTINST[];
+
+  processInstance: PII;
+
+  processDefinition: PDI;
+
+  variableInstance: VarInstance[];
+
+  displayedColumns = ['activityId', 'activityName', 'activityType', 'startTime', 'endTime', 'durationInMillis'];
+
+  displayedColumnsVariable = ['name', 'type', 'value'];
+
+  constructor(private route: ActivatedRoute, private data: DataService, private popup: ToastrNotificationService, private router: Router) { }
+
+  getActInst(procInstId: string) {
+    this.data.getActivityInstance(procInstId).subscribe(
+      (data: ACTINST[]) => {
+        this.activityInstance = data;
+        console.log(data);
+      }, error => {
+        console.log(error);
+        this.popup.error("Unable to get activity instance details for id: " + procInstId + " Error code:" + error.status);
+      });
+  }
+
+  async getProcessDefinition(procDefId) {
+    await this.data.getProcessDefinition(procDefId).subscribe(
+      async (data: PDI) => {
+        this.processDefinition = data;
+        console.log(data);
+        await this.displayCamundaflow(this.processDefinition.processDefinitionXml, this.activityInstance, this.router);
+      }, error => {
+        console.log(error);
+        this.popup.error("Unable to get process definition for id: " + procDefId + " Error code:" + error.status);
+      });
+  }
+
+  async  getProcInstance(procInstId) {
+    await this.data.getProcessInstance(procInstId).then(
+      async (data: PII) => {
+        this.processInstance = data;
+        this.processDefinitionID = this.processInstance.processDefinitionId;
+        this.processDefinitionName = this.processInstance.processDefinitionName;
+        console.log("Process definition id: " + this.processDefinitionID);
+        await this.getActInst(this.processInstanceID);
+        await this.getProcessDefinition(this.processDefinitionID);
+      }, error => {
+        console.log(error);
+        this.popup.error("Unable to get process instance for id: " + procInstId + " Error code:" + error.status);
+      });
+  }
+
+  displayCamundaflow(bpmnXml, activities: ACTINST[], r: Router) {
+
+    this.bpmnViewer.importXML(bpmnXml, (error) => {
+      if (error) {
+        console.error('Unable to load BPMN flow ', error);
+        this.popup.error('Unable to load BPMN flow ');
+      } else {
+        let canvas = this.bpmnViewer.get('canvas');
+        var eventBus = this.bpmnViewer.get('eventBus');
+        eventBus.on('element.click', function(e) {
+
+          activities.forEach(a => {
+            if (a.activityId == e.element.id && a.calledProcessInstanceId !== null) {
+              console.log("will drill down to : " + a.calledProcessInstanceId);
+              r.navigate(['/details/' + a.calledProcessInstanceId]);
+            }
+          });
+        });
+        // zoom to fit full viewport
+        canvas.zoom('fit-viewport');
+        activities.forEach(a => {
+          canvas.addMarker(a.activityId, 'highlight');
+        });
+      }
+    });
+  }
+
+  getVarInst(procInstId) {
+    this.data.getVariableInstance(procInstId).subscribe(
+      (data: VarInstance[]) => {
+        this.variableInstance = data;
+        console.log(data);
+      }, error => {
+        console.log(error);
+        this.popup.error("Unable to get Variable instances for id: " + procInstId + " Error code:" + error.status);
+      });
+  }
+
+  async ngOnInit() {
+    this.bpmnViewer = new Viewer({
+      container: '.canvas'
+    });
+    this.route.params.subscribe(
+      async params => {
+        this.processInstanceID = params.id as string;
+        console.log("Will GET Process instanc using id: " + this.processInstanceID);
+        await this.getProcInstance(this.processInstanceID);
+
+        this.getVarInst(this.processInstanceID);
+      });
+  }
+}
diff --git a/so-monitoring/so-monitoring-ui/src/main/frontend/src/app/home/home.component.html b/so-monitoring/so-monitoring-ui/src/main/frontend/src/app/home/home.component.html
new file mode 100644
index 0000000000..6adea3b357
--- /dev/null
+++ b/so-monitoring/so-monitoring-ui/src/main/frontend/src/app/home/home.component.html
@@ -0,0 +1,187 @@
+<!--
+============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">
+          <p>Total: {{ totalVal }}</p>
+          <hr/>
+          <p>Complete: {{ completeVal }}</p>
+          <p><b> {{ percentageComplete }}%</b></p>
+          <hr/>
+          <p>Failed: {{ failedVal }}</p>
+          <p><b> {{ percentageFailed }}%</b></p>
+          <hr/>
+          <p>In Progress: {{ inProgressVal }}</p>
+          <hr/>
+          <p>Pending: {{ pendingVal }}</p>
+          <hr/>
+          <p>Unlocked: {{ unlockedVal }}</p>
+        </div>
+      </mat-tab>
+    </mat-tab-group>
+  </div>
+</div>
+
+<router-outlet></router-outlet>
diff --git a/so-monitoring/so-monitoring-ui/src/main/frontend/src/app/home/home.component.scss b/so-monitoring/so-monitoring-ui/src/main/frontend/src/app/home/home.component.scss
new file mode 100644
index 0000000000..d475c52cb8
--- /dev/null
+++ b/so-monitoring/so-monitoring-ui/src/main/frontend/src/app/home/home.component.scss
@@ -0,0 +1,130 @@
+/**
+============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 "~@angular/material/prebuilt-themes/indigo-pink.css";
+
+.searchArea {
+  background-color: white;
+  padding: 10px;
+  height: 345px;
+  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);
+}
+
+.mat-form-field-appearance-legacy .mat-form-field-wrapper {
+  padding-bottom: 1.25em;
+  font-family: 'Montserrat', sans-serif;
+}
+
+.selectFilter {
+  width: 120px;
+}
+
+.valueInput {
+  width: 400px;
+  margin-left: 30px;
+}
+
+.selectFilter.mat-select.ng-tns-c5-1.ng-star-inserted {
+  font-family: 'Montserrat', sans-serif;
+  font-size: 17px;
+}
+
+.mat-form-field-flex .valueInput {
+  font-family: 'Montserrat', sans-serif;
+  font-size: 17px;
+}
+
+.mat-primary .mat-option.mat-selected:not(.mat-option-disabled) {
+  color: #00285F;
+}
+
+.mat-option {
+  font-size: 17px;
+  line-height: 3em;
+  height: 3em;
+  font-family: 'Montserrat', sans-serif;
+}
+
+.mat-select-arrow {
+  color: #00285F;
+}
+
+.mat-form-field.mat-focused.mat-primary .mat-select-arrow {
+  color: #00285F;
+}
+
+.mat-form-field-appearance-legacy .mat-form-field-underline {
+  color: #00285F;
+}
+
+.fa {
+ float: left;
+  width: 120px;
+  padding: 10px;
+  background: #2196F3;
+  color: white;
+  height: 40px;
+  font-size: 17px;
+  border: 1px solid grey;
+  border-left: none;
+  cursor: pointer;
+}
+
+form.example button:hover {
+  background: #0b7dda;
+}
+
+form.example::after {
+  content: "";
+  clear: both;
+  display: table;
+}
+
+.formFields {
+  display: inline-flex;
+}
+
+.startDate, .endDate{
+  margin-left: 90px;
+  width: 140px;
+}
+
+.selectHour, .selectMinute{
+  margin-left: 30px;
+  width: 100px
+}
+
+#servStats{
+  background-color: white;
+  padding: 10px;
+  font-size: 17px;
+  font-family: 'Montserrat', sans-serif;
+}
+
+hr {
+    display: block;
+    height: 1px;
+    border: 0;
+    border-top: 1px solid #ccc;
+    margin: 1em 0;
+    padding: 0;
+}
diff --git a/so-monitoring/so-monitoring-ui/src/main/frontend/src/app/home/home.component.spec.ts b/so-monitoring/so-monitoring-ui/src/main/frontend/src/app/home/home.component.spec.ts
new file mode 100644
index 0000000000..9da8ba93f1
--- /dev/null
+++ b/so-monitoring/so-monitoring-ui/src/main/frontend/src/app/home/home.component.spec.ts
@@ -0,0 +1,47 @@
+/**
+============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 { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { HomeComponent } from './home.component';
+
+describe('HomeComponent', () => {
+  let component: HomeComponent;
+  let fixture: ComponentFixture<HomeComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [HomeComponent]
+    })
+      .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(HomeComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
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
new file mode 100644
index 0000000000..dd08bb4ae5
--- /dev/null
+++ b/so-monitoring/so-monitoring-ui/src/main/frontend/src/app/home/home.component.ts
@@ -0,0 +1,128 @@
+/**
+============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 { Component, OnInit } 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 { SearchData } from '../model/searchData.model';
+import { MatDatepickerModule } from '@angular/material/datepicker';
+import { FormControl } from '@angular/forms';
+import { SearchRequest } from '../model/SearchRequest.model';
+import { ViewChild } from '@angular/core';
+import { ElementRef } from '@angular/core';
+import { Input } from '@angular/core';
+
+@Component({
+  selector: 'app-home',
+  templateUrl: './home.component.html',
+  styleUrls: ['./home.component.scss'],
+  encapsulation: ViewEncapsulation.None
+})
+
+export class HomeComponent implements OnInit {
+
+  totalVal = 0;
+  completeVal = 0;
+  inProgressVal = 0;
+  failedVal = 0;
+  pendingVal = 0;
+  unlockedVal = 0;
+  percentageComplete = 0;
+  percentageFailed = 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"];
+
+  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;
+
+  displayedColumns = ['requestId', 'serviceInstanceId', 'serviceIstanceName', 'networkId', 'requestStatus', 'serviceType', 'startTime', 'endTime'];
+
+  constructor(private route: ActivatedRoute, private data: DataService,
+    private router: Router, private popup: ToastrNotificationService) {
+    this.searchData = new SearchData();
+  }
+
+  makeCall() {
+    var search = this.searchData.getSearchRequest().subscribe((result: SearchRequest) => {
+
+      this.data.retrieveInstance(result.getFilters(), result.getStartTimeInMilliseconds(), result.getEndTimeInMilliseconds())
+        .subscribe((data: Process[]) => {
+          this.processData = data;
+          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.percentageComplete = Math.round(((this.completeVal / this.totalVal) * 100) * 100) / 100;
+          this.percentageFailed = Math.round(((this.failedVal / this.totalVal) * 100) * 100) / 100;
+
+          console.log("COMPLETE: " + this.completeVal);
+          console.log("FAILED: " + this.failedVal);
+        }, error => {
+          console.log(error);
+          this.popup.error("Unable to perform search Error code:" + error.status);
+        });
+    }, error => {
+      console.log("Data validation error " + error);
+      this.popup.error(error);
+    });
+  }
+
+  getProcessIsntanceId(requestId: string) {
+    var response = this.data.getProcessInstanceId(requestId).subscribe((data) => {
+      if (data.status == 200) {
+        var processInstanceId = (data.body as ProcessInstanceId).processInstanceId;
+        this.router.navigate(['/details/' + processInstanceId]);
+      } else {
+        this.popup.error('No process instance id found: ' + requestId);
+        console.log('No process instance id found: ' + requestId);
+      }
+    });
+  }
+
+  ngOnInit() {
+
+  }
+}
diff --git a/so-monitoring/so-monitoring-ui/src/main/frontend/src/app/http-error-handler.service.spec.ts b/so-monitoring/so-monitoring-ui/src/main/frontend/src/app/http-error-handler.service.spec.ts
new file mode 100644
index 0000000000..0ecdf15d9e
--- /dev/null
+++ b/so-monitoring/so-monitoring-ui/src/main/frontend/src/app/http-error-handler.service.spec.ts
@@ -0,0 +1,37 @@
+/**
+============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 { HttpErrorHandlerService } from './http-error-handler.service';
+
+describe('HttpErrorHandlerService', () => {
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [HttpErrorHandlerService]
+    });
+  });
+
+  it('should be created', inject([HttpErrorHandlerService], (service: HttpErrorHandlerService) => {
+    expect(service).toBeTruthy();
+  }));
+});
diff --git a/so-monitoring/so-monitoring-ui/src/main/frontend/src/app/http-error-handler.service.ts b/so-monitoring/so-monitoring-ui/src/main/frontend/src/app/http-error-handler.service.ts
new file mode 100644
index 0000000000..16d274f16a
--- /dev/null
+++ b/so-monitoring/so-monitoring-ui/src/main/frontend/src/app/http-error-handler.service.ts
@@ -0,0 +1,53 @@
+/**
+============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 { Injectable } from '@angular/core';
+import { ToastrNotificationService } from './toastr-notification-service.service';
+import { HttpErrorResponse } from '@angular/common/http';
+import { Observable, of, throwError } from 'rxjs';
+
+@Injectable({
+  providedIn: 'root'
+})
+/** Handles HttpClient errors */
+export class HttpErrorHandlerService {
+
+  constructor(private popup: ToastrNotificationService) { }
+
+  handleError(operation = 'operation', url = 'url') {
+    return (error: HttpErrorResponse) => {
+      if (error.error instanceof ErrorEvent) {
+        console.error('An error occurred:', error.error.message);
+        this.popup.error("An error occurred for operation: " + operation + " using url: " + url + " Detail: " + error.error.message);
+        return throwError("An error occurred for operation: " + operation);
+      }
+      if (error.status == 500 || error.status == 0) {
+        this.popup.error("Internal Service Error occured for operation: " + operation + " please check backend service log. status code: " + error.status);
+      }
+      console.error(
+        'Backend returned code ${error.status}, ' +
+        'body was: ${error.error}');
+      return throwError(error.error || "Internal Service Error occured for operation: " + operation + " please check backend service log. status code: " + error.status);
+    };
+
+  }
+}
diff --git a/so-monitoring/so-monitoring-ui/src/main/frontend/src/app/model/SearchRequest.model.ts b/so-monitoring/so-monitoring-ui/src/main/frontend/src/app/model/SearchRequest.model.ts
new file mode 100644
index 0000000000..f68f164d0e
--- /dev/null
+++ b/so-monitoring/so-monitoring-ui/src/main/frontend/src/app/model/SearchRequest.model.ts
@@ -0,0 +1,42 @@
+
+/**
+============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
+*/
+
+export class SearchRequest {
+
+  constructor(private filter: {}, private startTimeInMilliseconds: number, private endTimeInMilliseconds: number) {
+
+  }
+
+
+  public getFilters(): {} {
+    return this.filter;
+  }
+
+  public getStartTimeInMilliseconds(): number {
+    return this.startTimeInMilliseconds;
+  }
+
+  public getEndTimeInMilliseconds(): number {
+    return this.endTimeInMilliseconds;
+  }
+}
diff --git a/so-monitoring/so-monitoring-ui/src/main/frontend/src/app/model/activityInstance.model.ts b/so-monitoring/so-monitoring-ui/src/main/frontend/src/app/model/activityInstance.model.ts
new file mode 100644
index 0000000000..de5e98367f
--- /dev/null
+++ b/so-monitoring/so-monitoring-ui/src/main/frontend/src/app/model/activityInstance.model.ts
@@ -0,0 +1,32 @@
+/**
+============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
+*/
+
+export interface ACTINST {
+  activityId: string;
+  activityName: string;
+  activityType: string;
+  processInstanceId: string;
+  calledProcessInstanceId: string;
+  startTime: string;
+  endTime: string;
+  durationInMillis: string;
+}
diff --git a/so-monitoring/so-monitoring-ui/src/main/frontend/src/app/model/process.model.ts b/so-monitoring/so-monitoring-ui/src/main/frontend/src/app/model/process.model.ts
new file mode 100644
index 0000000000..245981884a
--- /dev/null
+++ b/so-monitoring/so-monitoring-ui/src/main/frontend/src/app/model/process.model.ts
@@ -0,0 +1,32 @@
+/**
+============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
+*/
+
+export interface Process {
+  requestId: string;
+  serviceInstanceId: string;
+  serviceIstanceName: string;
+  networkId: string;
+  requestStatus: string;
+  serviceType: string;
+  startTime: string;
+  endTime: string;
+}
diff --git a/so-monitoring/so-monitoring-ui/src/main/frontend/src/app/model/processDefinition.model.ts b/so-monitoring/so-monitoring-ui/src/main/frontend/src/app/model/processDefinition.model.ts
new file mode 100644
index 0000000000..73eab7051b
--- /dev/null
+++ b/so-monitoring/so-monitoring-ui/src/main/frontend/src/app/model/processDefinition.model.ts
@@ -0,0 +1,26 @@
+/**
+============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
+*/
+
+export interface PDI {
+  processDefinitionId: string;
+  processDefinitionXml: string;
+}
diff --git a/so-monitoring/so-monitoring-ui/src/main/frontend/src/app/model/processInstance.model.ts b/so-monitoring/so-monitoring-ui/src/main/frontend/src/app/model/processInstance.model.ts
new file mode 100644
index 0000000000..b1338bbeae
--- /dev/null
+++ b/so-monitoring/so-monitoring-ui/src/main/frontend/src/app/model/processInstance.model.ts
@@ -0,0 +1,28 @@
+/**
+============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
+*/
+
+export interface PII {
+  processInstancId: string;
+  processDefinitionId: string;
+  processDefinitionName: string;
+  superProcessInstanceId: string;
+}
diff --git a/so-monitoring/so-monitoring-ui/src/main/frontend/src/app/model/processInstanceId.model.ts b/so-monitoring/so-monitoring-ui/src/main/frontend/src/app/model/processInstanceId.model.ts
new file mode 100644
index 0000000000..662da2c7d6
--- /dev/null
+++ b/so-monitoring/so-monitoring-ui/src/main/frontend/src/app/model/processInstanceId.model.ts
@@ -0,0 +1,25 @@
+/**
+============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
+*/
+
+export interface ProcessInstanceId {
+  processInstanceId: string;
+}
diff --git a/so-monitoring/so-monitoring-ui/src/main/frontend/src/app/model/searchData.model.ts b/so-monitoring/so-monitoring-ui/src/main/frontend/src/app/model/searchData.model.ts
new file mode 100644
index 0000000000..4552590041
--- /dev/null
+++ b/so-monitoring/so-monitoring-ui/src/main/frontend/src/app/model/searchData.model.ts
@@ -0,0 +1,105 @@
+import { ToastrNotificationService } from "../toastr-notification-service.service";
+
+/**
+============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 { Observable, throwError, of } from 'rxjs';
+import { SearchRequest } from "./SearchRequest.model";
+export class SearchData {
+
+  public selectedValueSII = "EQ";
+  public selectedValueRI = "EQ";
+  public selectedValueSN = "EQ";
+  public selectedValueSTATUS = "ALL";
+
+  private now = Date.now();
+  // Minus 1 hour from current time for start date
+  public startDate = new Date(this.now - (1 * 60 * 60 * 1000));
+  public selectedStartHour = this.getNumberAsString(this.startDate.getHours());
+  public selectedStartMinute = this.getNumberAsString(this.startDate.getMinutes());
+
+  public endDate = new Date(this.now);
+  public selectedEndHour = this.getNumberAsString(this.endDate.getHours());
+  public selectedEndMinute = this.getNumberAsString(this.endDate.getMinutes());
+
+
+  public serviceInstanceId: string;
+  public requestId: string;
+  public serviceInstanceName: string;
+
+  private startTimeInMilliseconds: number;
+  private endTimeInMilliseconds: number;
+
+  constructor() {
+  }
+
+  public getSearchRequest(): Observable<SearchRequest> {
+    var searchFields = {};
+    if ((!this.startDate || this.startDate === null) || (!this.endDate || this.endDate === null)) {
+      console.error("Found either start time or end time null or undefined");
+      return throwError("Found end or start date empty, Please enter start and end date");
+    }
+
+    this.startDate.setHours(parseInt(this.selectedStartHour));
+    this.startDate.setMinutes(parseInt(this.selectedStartMinute));
+
+    this.endDate.setHours(parseInt(this.selectedEndHour));
+    this.endDate.setMinutes(parseInt(this.selectedEndMinute));
+
+    this.startTimeInMilliseconds = this.startDate.getTime();
+    this.endTimeInMilliseconds = this.endDate.getTime();
+
+    if (this.startTimeInMilliseconds > this.endTimeInMilliseconds) {
+      console.error("End time: " + this.endDate + " can not be greater then start time: " + this.startDate);
+      return throwError("End time: " + this.endDate + " can not be greater then start time: " + this.startDate);
+    }
+
+
+    if (!this.isEmpty(this.selectedValueSII) && !this.isEmpty(this.serviceInstanceId)) {
+      searchFields["serviceInstanceId"] = [this.selectedValueSII, this.serviceInstanceId]
+    }
+    if (!this.isEmpty(this.selectedValueRI) && !this.isEmpty(this.requestId)) {
+      searchFields["requestId"] = [this.selectedValueRI, this.requestId]
+    }
+    if (!this.isEmpty(this.selectedValueSN) && !this.isEmpty(this.serviceInstanceName)) {
+      searchFields["serviceInstanceName"] = [this.selectedValueSN, this.serviceInstanceName]
+    }
+
+    if (!this.isEmpty(this.selectedValueSTATUS) && this.selectedValueSTATUS !== "ALL") {
+      searchFields["requestStatus"] = ["EQ", this.selectedValueSTATUS]
+    }
+
+    return of(new SearchRequest(searchFields, this.startTimeInMilliseconds, this.endTimeInMilliseconds));
+  }
+
+  private isEmpty(str) {
+    return (!str || 0 === str.length);
+  }
+
+  private getNumberAsString(num: number) {
+    if (num <= 9) {
+      return "0" + num;
+    }
+    return "" + num;
+  }
+
+}
diff --git a/so-monitoring/so-monitoring-ui/src/main/frontend/src/app/model/variableInstance.model.ts b/so-monitoring/so-monitoring-ui/src/main/frontend/src/app/model/variableInstance.model.ts
new file mode 100644
index 0000000000..4b9dec0aa4
--- /dev/null
+++ b/so-monitoring/so-monitoring-ui/src/main/frontend/src/app/model/variableInstance.model.ts
@@ -0,0 +1,27 @@
+/**
+============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
+*/
+
+export interface VarInstance {
+  name: string;
+  value: string;
+  type: string;
+}
diff --git a/so-monitoring/so-monitoring-ui/src/main/frontend/src/app/sidebar/sidebar.component.html b/so-monitoring/so-monitoring-ui/src/main/frontend/src/app/sidebar/sidebar.component.html
new file mode 100644
index 0000000000..e8b54d7ae3
--- /dev/null
+++ b/so-monitoring/so-monitoring-ui/src/main/frontend/src/app/sidebar/sidebar.component.html
@@ -0,0 +1,29 @@
+<!--
+============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
+-->
+
+<nav>
+  <ul>
+    <li>
+      <a routerLink="/">Home</a>
+    </li>
+  </ul>
+</nav>
diff --git a/so-monitoring/so-monitoring-ui/src/main/frontend/src/app/sidebar/sidebar.component.scss b/so-monitoring/so-monitoring-ui/src/main/frontend/src/app/sidebar/sidebar.component.scss
new file mode 100644
index 0000000000..b1a2c654ee
--- /dev/null
+++ b/so-monitoring/so-monitoring-ui/src/main/frontend/src/app/sidebar/sidebar.component.scss
@@ -0,0 +1,44 @@
+/**
+============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
+*/
+nav {
+  background: #00285F;
+  height: 100%;
+  width: 90px;
+
+  ul {
+    list-style-type: none;
+    padding: 0;
+    margin: 0;
+
+    li {
+      a {
+        color: #fff;
+        padding: 20px;
+        display: block;
+      }
+
+      .activated {
+        background-color: #00a8ff;
+      }
+    }
+  }
+}
diff --git a/so-monitoring/so-monitoring-ui/src/main/frontend/src/app/sidebar/sidebar.component.spec.ts b/so-monitoring/so-monitoring-ui/src/main/frontend/src/app/sidebar/sidebar.component.spec.ts
new file mode 100644
index 0000000000..df51723f98
--- /dev/null
+++ b/so-monitoring/so-monitoring-ui/src/main/frontend/src/app/sidebar/sidebar.component.spec.ts
@@ -0,0 +1,47 @@
+/**
+============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 { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SidebarComponent } from './sidebar.component';
+
+describe('SidebarComponent', () => {
+  let component: SidebarComponent;
+  let fixture: ComponentFixture<SidebarComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [SidebarComponent]
+    })
+      .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(SidebarComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/so-monitoring/so-monitoring-ui/src/main/frontend/src/app/sidebar/sidebar.component.ts b/so-monitoring/so-monitoring-ui/src/main/frontend/src/app/sidebar/sidebar.component.ts
new file mode 100644
index 0000000000..19985e79a3
--- /dev/null
+++ b/so-monitoring/so-monitoring-ui/src/main/frontend/src/app/sidebar/sidebar.component.ts
@@ -0,0 +1,40 @@
+/**
+============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 { Component, OnInit } from '@angular/core';
+import { Router, NavigationEnd } from '@angular/router';
+
+@Component({
+  selector: 'app-sidebar',
+  templateUrl: './sidebar.component.html',
+  styleUrls: ['./sidebar.component.scss']
+})
+
+export class SidebarComponent implements OnInit {
+
+  currentUrl: string;
+
+  constructor(private router: Router) {
+    router.events.subscribe((_: NavigationEnd) => this.currentUrl = _.url);
+  }
+  ngOnInit() { }
+}
diff --git a/so-monitoring/so-monitoring-ui/src/main/frontend/src/app/toastr-notification-service.service.spec.ts b/so-monitoring/so-monitoring-ui/src/main/frontend/src/app/toastr-notification-service.service.spec.ts
new file mode 100644
index 0000000000..062cc905a4
--- /dev/null
+++ b/so-monitoring/so-monitoring-ui/src/main/frontend/src/app/toastr-notification-service.service.spec.ts
@@ -0,0 +1,37 @@
+/**
+============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 { ToastrNotificationService } from './toastr-notification-service.service';
+
+describe('ToasterNotificationService', () => {
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [ToastrNotificationService]
+    });
+  });
+
+  it('should be created', inject([ToastrNotificationService], (service: ToastrNotificationService) => {
+    expect(service).toBeTruthy();
+  }));
+});
diff --git a/so-monitoring/so-monitoring-ui/src/main/frontend/src/app/toastr-notification-service.service.ts b/so-monitoring/so-monitoring-ui/src/main/frontend/src/app/toastr-notification-service.service.ts
new file mode 100644
index 0000000000..65870493a4
--- /dev/null
+++ b/so-monitoring/so-monitoring-ui/src/main/frontend/src/app/toastr-notification-service.service.ts
@@ -0,0 +1,59 @@
+/**
+============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 { Injectable } from '@angular/core';
+declare var toastr: any
+@Injectable({
+  providedIn: 'root'
+})
+export class ToastrNotificationService {
+
+  constructor() { this.toastrSettings() }
+
+  error(message: string) {
+    toastr.error(message, "Error");
+  }
+
+  info(message: string) {
+    toastr.info(message, "Info");
+  }
+
+  toastrSettings() {
+    toastr.options = {
+      "closeButton": false,
+      "debug": false,
+      "newestOnTop": false,
+      "progressBar": false,
+      "positionClass": "toast-bottom-full-width",
+      "preventDuplicates": true,
+      "onclick": null,
+      "showDuration": "300",
+      "hideDuration": "1000",
+      "timeOut": "5000",
+      "extendedTimeOut": "1000",
+      "showEasing": "swing",
+      "hideEasing": "linear",
+      "showMethod": "fadeIn",
+      "hideMethod": "fadeOut"
+    }
+  }
+}
diff --git a/so-monitoring/so-monitoring-ui/src/main/frontend/src/app/topbar/topbar.component.html b/so-monitoring/so-monitoring-ui/src/main/frontend/src/app/topbar/topbar.component.html
new file mode 100644
index 0000000000..93d9074df0
--- /dev/null
+++ b/so-monitoring/so-monitoring-ui/src/main/frontend/src/app/topbar/topbar.component.html
@@ -0,0 +1,25 @@
+<!--
+============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
+-->
+
+<nav>
+  <h1><a class="navbar-brand">SO Monitoring</a></h1>
+</nav>
diff --git a/so-monitoring/so-monitoring-ui/src/main/frontend/src/app/topbar/topbar.component.scss b/so-monitoring/so-monitoring-ui/src/main/frontend/src/app/topbar/topbar.component.scss
new file mode 100644
index 0000000000..d7e6d1b3f8
--- /dev/null
+++ b/so-monitoring/so-monitoring-ui/src/main/frontend/src/app/topbar/topbar.component.scss
@@ -0,0 +1,59 @@
+/**
+============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
+*/
+.navbar-brand {
+  display: inline;
+  margin-right: 1rem;
+  font-size: 1.25rem;
+  line-height: inherit;
+  white-space: nowrap;
+}
+
+nav {
+  background: #00285F;
+  height: 40px;
+
+  ul {
+    list-style-type: none;
+    padding: 0;
+    margin: 0;
+
+    li {
+      a {
+        color: #fff;
+        padding: 20px;
+        display: block;
+      }
+
+      .activated {
+        background-color: #00a8ff;
+      }
+    }
+  }
+}
+
+h1 {
+  color: white;
+  text-indent: 90px;
+  padding-top: 0;
+  padding-bottom: 10px;
+  font-size: 1.9rem;
+}
diff --git a/so-monitoring/so-monitoring-ui/src/main/frontend/src/app/topbar/topbar.component.spec.ts b/so-monitoring/so-monitoring-ui/src/main/frontend/src/app/topbar/topbar.component.spec.ts
new file mode 100644
index 0000000000..0bc691ca7e
--- /dev/null
+++ b/so-monitoring/so-monitoring-ui/src/main/frontend/src/app/topbar/topbar.component.spec.ts
@@ -0,0 +1,47 @@
+/**
+============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 { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { TopbarComponent } from './topbar.component';
+
+describe('TopbarComponent', () => {
+  let component: TopbarComponent;
+  let fixture: ComponentFixture<TopbarComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [TopbarComponent]
+    })
+      .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(TopbarComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/so-monitoring/so-monitoring-ui/src/main/frontend/src/app/topbar/topbar.component.ts b/so-monitoring/so-monitoring-ui/src/main/frontend/src/app/topbar/topbar.component.ts
new file mode 100644
index 0000000000..1fdd258282
--- /dev/null
+++ b/so-monitoring/so-monitoring-ui/src/main/frontend/src/app/topbar/topbar.component.ts
@@ -0,0 +1,36 @@
+/**
+============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 { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-topbar',
+  templateUrl: './topbar.component.html',
+  styleUrls: ['./topbar.component.scss']
+})
+
+export class TopbarComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() { }
+}
author	waqas.ikram <waqas.ikram@ericsson.com>	2018-08-21 17:35:35 +0100
committer	Byung-Woo Jun <byung-woo.jun@ericsson.com>	2018-09-12 19:41:01 +0000
commit	412309940cfd09a3698feded384340354178f4fe (patch)
tree	8e390760d1f05300a23ecf2bb92949831f533eb4 /so-monitoring/so-monitoring-ui/src/main/frontend/src/app
parent	dcf0b71f3fd109f2c2e6623ba1d61fffcaa775d2 (diff)