refactor so-mon-ui code

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

18 files changed, 702 insertions, 690 deletions

diff --git a/so-monitoring/so-monitoring-ui/src/main/frontend/package-lock.json b/so-monitoring/so-monitoring-ui/src/main/frontend/package-lock.json
index 78642155b4..da937fb46c 100644
--- a/so-monitoring/so-monitoring-ui/src/main/frontend/package-lock.json
+++ b/so-monitoring/so-monitoring-ui/src/main/frontend/package-lock.json
@@ -3839,12 +3839,14 @@
         "balanced-match": {
           "version": "1.0.0",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "brace-expansion": {
           "version": "1.1.11",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "balanced-match": "^1.0.0",
             "concat-map": "0.0.1"
@@ -3859,17 +3861,20 @@
         "code-point-at": {
           "version": "1.1.0",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "concat-map": {
           "version": "0.0.1",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "console-control-strings": {
           "version": "1.1.0",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "core-util-is": {
           "version": "1.0.2",
@@ -3986,7 +3991,8 @@
         "inherits": {
           "version": "2.0.3",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "ini": {
           "version": "1.3.5",
@@ -3998,6 +4004,7 @@
           "version": "1.0.0",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "number-is-nan": "^1.0.0"
           }
@@ -4012,6 +4019,7 @@
           "version": "3.0.4",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "brace-expansion": "^1.1.7"
           }
@@ -4019,12 +4027,14 @@
         "minimist": {
           "version": "0.0.8",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "minipass": {
           "version": "2.2.4",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "safe-buffer": "^5.1.1",
             "yallist": "^3.0.0"
@@ -4043,6 +4053,7 @@
           "version": "0.5.1",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "minimist": "0.0.8"
           }
@@ -4123,7 +4134,8 @@
         "number-is-nan": {
           "version": "1.0.1",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "object-assign": {
           "version": "4.1.1",
@@ -4135,6 +4147,7 @@
           "version": "1.4.0",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "wrappy": "1"
           }
@@ -4256,6 +4269,7 @@
           "version": "1.0.2",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "code-point-at": "^1.0.0",
             "is-fullwidth-code-point": "^1.0.0",
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
index 8a505d9e6b..428998dc62 100644
--- 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
@@ -1,46 +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 { }

+/**
+============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/data.service.spec.ts b/so-monitoring/so-monitoring-ui/src/main/frontend/src/app/data.service.spec.ts
index 0438aa3419..1718678fad 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
@@ -49,10 +49,10 @@ describe('DataService', () => {
       expect(service).toBeTruthy();
     })));
 
-  // Test retrieveInstance function making POST call
-  it('test retrieveInstance POST request', async(inject([HttpTestingController, DataService, ToastrNotificationService],
+  // Test getBpmnInfraRequest function making POST call
+  it('test getBpmnInfraRequest POST request', async(inject([HttpTestingController, DataService, ToastrNotificationService],
     (httpClient: HttpTestingController, service: DataService, toastr: ToastrNotificationService) => {
-      service.retrieveInstance({}, 1, 2).subscribe(data => { });
+      service.getBpmnInfraRequest({}, 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');
diff --git a/so-monitoring/so-monitoring-ui/src/main/frontend/src/app/data.service.ts b/so-monitoring/so-monitoring-ui/src/main/frontend/src/app/data.service.ts
index 2e8f4237f7..b391672728 100644
--- a/so-monitoring/so-monitoring-ui/src/main/frontend/src/app/data.service.ts
+++ b/so-monitoring/so-monitoring-ui/src/main/frontend/src/app/data.service.ts
@@ -1,95 +1,95 @@
-/**

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

-import { ACTINST } from './model/activityInstance.model';

-

-

-@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);

-    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): Promise<ACTINST[]> {

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

-    return this.http.get<ACTINST[]>(url)

-      .pipe(

-        catchError(this.httpErrorHandlerService.handleError("GET", url))

-      ).toPromise();

-  }

-

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

-    );

-  }

-}

+/**
+============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 { BpmnInfraRequest } from './model/bpmnInfraRequest.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 { ProcessInstanceDetail } from './model/processInstance.model';
+import { HttpErrorHandlerService } from './http-error-handler.service';
+import { ActivityInstance } from './model/activityInstance.model';
+
+
+@Injectable({
+  providedIn: 'root'
+})
+export class DataService {
+
+  constructor(private http: HttpClient, private httpErrorHandlerService: HttpErrorHandlerService) { }
+
+  // HTTP POST call to running Spring Boot application
+  getBpmnInfraRequest(servInstId: {}, from: number, to: number): Observable<BpmnInfraRequest[]> {
+    var url = environment.soMonitoringBackendURL + 'v1/search?from=' + from + "&to=" + to;
+    return this.http.post<BpmnInfraRequest[]>(url, servInstId)
+      .pipe(
+        catchError(this.httpErrorHandlerService.handleError("POST", url))
+      );
+  }
+
+  // HTTP GET to return Process Instance using RequestID
+  getProcessInstanceId(requestId: string): Observable<HttpResponse<ProcessInstanceId>> {
+    var url = environment.soMonitoringBackendURL + 'process-instance-id/' + requestId;
+    console.log(requestId);
+    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: string): Promise<ActivityInstance[]> {
+    var url = environment.soMonitoringBackendURL + 'activity-instance/' + processInstanceId;
+    return this.http.get<ActivityInstance[]>(url)
+      .pipe(
+        catchError(this.httpErrorHandlerService.handleError("GET", url))
+      ).toPromise();
+  }
+
+  // HTTP GET to return Activity Instance using ProcessInstanceID
+  async getProcessInstance(processInstanceId: string): Promise<ProcessInstanceDetail> {
+    var url = environment.soMonitoringBackendURL + 'process-instance/' + processInstanceId;
+    return await (this.http.get<ProcessInstanceDetail>(url)
+      .pipe(
+        catchError(this.httpErrorHandlerService.handleError("GET", url))))
+      .toPromise();
+  }
+
+  // HTTP GET to return Process Definition using processDefinitionId
+  getProcessDefinition(processDefinitionId: string): Observable<Object> {
+    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: string): Observable<Object> {
+    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.spec.ts b/so-monitoring/so-monitoring-ui/src/main/frontend/src/app/details/details.component.spec.ts
index 8f2af84b0d..4ffacce782 100644
--- 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
@@ -35,10 +35,10 @@ import { APP_BASE_HREF } from '@angular/common';
 import { ToastrNotificationService } from '../toastr-notification-service.service';
 import { DataService } from '../data.service';
 import { Observable, of, throwError } from 'rxjs';
-import { ACTINST } from '../model/activityInstance.model';
-import { PDI } from '../model/processDefinition.model';
-import { PII } from '../model/processInstance.model';
-import { VarInstance } from '../model/variableInstance.model';
+import { ActivityInstance } from '../model/activityInstance.model';
+import { ProcessDefinitionDetail } from '../model/processDefinition.model';
+import { ProcessInstanceDetail } from '../model/processInstance.model';
+import { VariableInstance } from '../model/variableInstance.model';
 import { ActivatedRoute } from '@angular/router';
 import { Params } from '@angular/router';
 
@@ -49,7 +49,7 @@ class StubbedToastrNotificationService extends ToastrNotificationService {
   error() {}
 }
 
-const startActivity: ACTINST = {
+const startActivity: ActivityInstance = {
   activityId: "StartEvent_1",
   processInstanceId: "processInstanceId-val-1234",
   calledProcessInstanceId: "",
@@ -60,7 +60,7 @@ const startActivity: ACTINST = {
   startTime: ""
 };
 
-const subProcessActivity: ACTINST = {
+const subProcessActivity: ActivityInstance = {
   activityId: "CallActivity_14h26ae",
   processInstanceId: "processInstanceId-val-1234",
   calledProcessInstanceId: "1234",
@@ -71,7 +71,7 @@ const subProcessActivity: ACTINST = {
   startTime: ""
 };
 
-const processDefinition: PDI = {
+const processDefinition: ProcessDefinitionDetail = {
   processDefinitionId: "processDefinitionId-val-1234",
   processDefinitionXml: "<?xml version=\"1.0\" encoding=\"UTF-8\"?>" +
     "<bpmn:definitions xmlns:bpmn=\"http://www.omg.org/spec/BPMN/20100524/MODEL\" xmlns:bpmndi=\"http://www.omg.org/spec/BPMN/20100524/DI\" xmlns:di=\"http://www.omg.org/spec/DD/20100524/DI\" xmlns:dc=\"http://www.omg.org/spec/DD/20100524/DC\" xmlns:camunda=\"http://camunda.org/schema/1.0/bpmn\" id=\"Definitions_01lwydo\" targetNamespace=\"http://bpmn.io/schema/bpmn\" exporter=\"Camunda Modeler\" exporterVersion=\"2.2.4\">" +
@@ -113,25 +113,25 @@ const processDefinition: PDI = {
     "</bpmn:definitions>"
 };
 
-const emptyProcessDefinition: PDI = {
+const emptyProcessDefinition: ProcessDefinitionDetail = {
   processDefinitionId: "processDefinitionId-val",
   processDefinitionXml: ""
 };
 
-const processInstance: PII = {
-  processInstancId: "processInstanceId-val-1234",
+const processInstance: ProcessInstanceDetail = {
+  processInstanceId: "processInstanceId-val-1234",
   processDefinitionId: "1",
   processDefinitionName: "test",
   superProcessInstanceId: "1"
 };
 
-const varInstanceObj: VarInstance = {
+const varInstanceObj: VariableInstance = {
   name: 'ABC',
   type: 'Object',
   value: '{value: 1234}'
 };
 
-const varInstanceStr: VarInstance = {
+const varInstanceStr: VariableInstance = {
   name: 'NameStr',
   type: 'String',
   value: 'valOfStr'
diff --git a/so-monitoring/so-monitoring-ui/src/main/frontend/src/app/details/details.component.ts b/so-monitoring/so-monitoring-ui/src/main/frontend/src/app/details/details.component.ts
index 97bbbdad02..7106a87937 100644
--- a/so-monitoring/so-monitoring-ui/src/main/frontend/src/app/details/details.component.ts
+++ b/so-monitoring/so-monitoring-ui/src/main/frontend/src/app/details/details.component.ts
@@ -1,176 +1,176 @@
-/**

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

-import { NgxSpinnerService } from 'ngx-spinner';

-

-@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, private spinner: NgxSpinnerService) { }

-

-  async getActInst(procInstId: string) {

-    await this.data.getActivityInstance(procInstId).then(

-      (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.spinner.show();

-

-    this.bpmnViewer.importXML(bpmnXml, (error) => {

-      if (error) {

-        console.error('Unable to load BPMN flow ', error);

-        this.popup.error('Unable to load BPMN flow ');

-        this.spinner.hide();

-      } else {

-        this.spinner.hide();

-        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]);

-              this.spinner.show();

-            }

-          });

-        });

-        // 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 = [];

-        for (let i = 0; i < data.length; i++) {

-          var value = data[i]['value'];

-          var type = data[i]['type'];

-          if ((type == 'Object') && !(value == null)) {

-            try {

-              data[i]['value'] = JSON.stringify(value, null, 2);

-            }

-            catch (error) {

-              console.log("Unable to \nError Code: " + error);

-            }

-          }

-          this.variableInstance[i] = data[i];

-        }

-        console.log(data);

-      }, error => {

-        console.log(error);

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

-      });

-  }

-

-}

+/**
+============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 { BpmnInfraRequest } from '../model/bpmnInfraRequest.model';
+import { ActivityInstance } from '../model/activityInstance.model';
+import { ProcessInstanceDetail } from '../model/processInstance.model';
+import { ProcessDefinitionDetail } 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 { VariableInstance } from '../model/variableInstance.model';
+import { ToastrNotificationService } from '../toastr-notification-service.service';
+import { NgxSpinnerService } from 'ngx-spinner';
+
+@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: ActivityInstance[];
+
+  processInstance: ProcessInstanceDetail;
+
+  processDefinition: ProcessDefinitionDetail;
+
+  variableInstance: VariableInstance[];
+
+  displayedColumns = ['activityId', 'activityName', 'activityType', 'startTime', 'endTime', 'durationInMillis'];
+
+  displayedColumnsVariable = ['name', 'type', 'value'];
+
+  constructor(private route: ActivatedRoute, private data: DataService, private popup: ToastrNotificationService,
+    private router: Router, private spinner: NgxSpinnerService) { }
+
+  async getActivityInstance(procInstId: string) {
+    await this.data.getActivityInstance(procInstId).then(
+      (data: ActivityInstance[]) => {
+        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: string) {
+    await this.data.getProcessDefinition(procDefId).subscribe(
+      async (data: ProcessDefinitionDetail) => {
+        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: string) {
+    await this.data.getProcessInstance(procInstId).then(
+      async (data: ProcessInstanceDetail) => {
+        this.processInstance = data;
+        this.processDefinitionID = this.processInstance.processDefinitionId;
+        this.processDefinitionName = this.processInstance.processDefinitionName;
+        console.log("Process definition id: " + this.processDefinitionID);
+        await this.getActivityInstance(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: ActivityInstance[], r: Router) {
+    this.spinner.show();
+
+    this.bpmnViewer.importXML(bpmnXml, (error) => {
+      if (error) {
+        console.error('Unable to load BPMN flow ', error);
+        this.popup.error('Unable to load BPMN flow ');
+        this.spinner.hide();
+      } else {
+        this.spinner.hide();
+        var 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]);
+              this.spinner.show();
+            }
+          });
+        });
+        // zoom to fit full viewport
+        canvas.zoom('fit-viewport');
+        activities.forEach(a => {
+          canvas.addMarker(a.activityId, 'highlight');
+        });
+      }
+    });
+  }
+
+  getVarInst(procInstId: string) {
+    this.data.getVariableInstance(procInstId).subscribe(
+      (data: VariableInstance[]) => {
+        this.variableInstance = [];
+        for (let i = 0; i < data.length; i++) {
+          var value = data[i]['value'];
+          var type = data[i]['type'];
+          if ((type == 'Object') && !(value == null)) {
+            try {
+              data[i]['value'] = JSON.stringify(value, null, 2);
+            }
+            catch (error) {
+              console.log("Unable to \nError Code: " + error);
+            }
+          }
+          this.variableInstance[i] = data[i];
+        }
+        console.log(data);
+      }, error => {
+        console.log(error);
+        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 BpmnInfraRequest instance 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
index 39fcdcb293..4fd8cc4c33 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
@@ -128,15 +128,15 @@ SPDX-License-Identifier: Apache-2.0
         <mat-table [dataSource]="processData" matSort>
           <ng-container matColumnDef="requestId">
             <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>
+            <mat-cell *matCellDef="let process"><a routerLink="" (click)="getProcessInstanceId(process.requestId)">{{ process.requestId }}</a></mat-cell>
           </ng-container>
           <ng-container matColumnDef="serviceInstanceId">
             <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">
+          <ng-container matColumnDef="serviceInstanceName">
             <mat-header-cell *matHeaderCellDef mat-sort-header> Instance Name </mat-header-cell>
-            <mat-cell *matCellDef="let process"> {{ process.serviceIstanceName }} </mat-cell>
+            <mat-cell *matCellDef="let process"> {{ process.serviceInstanceName }} </mat-cell>
           </ng-container>
           <ng-container matColumnDef="networkId">
             <mat-header-cell *matHeaderCellDef mat-sort-header> Network Id </mat-header-cell>
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
index cc11ebc05d..0da24ccf36 100644
--- 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
@@ -38,7 +38,7 @@ import { environment } from '../../environments/environment.prod';
 import { Observable, of, throwError } from 'rxjs';
 import { SearchRequest } from '../model/SearchRequest.model';
 import { DataService } from '../data.service'; // may be able to remove
-import { Process } from '../model/process.model';
+import { BpmnInfraRequest } from '../model/bpmnInfraRequest.model';
 import { By } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { ProcessInstanceId } from '../model/processInstanceId.model';
@@ -64,7 +64,7 @@ describe('HomeComponent', () => {
   let fixture: ComponentFixture<HomeComponent>;
 
   beforeEach(() => {
-    spyDataService = jasmine.createSpyObj('DataService', ['retrieveInstance', 'getProcessInstanceId']);
+    spyDataService = jasmine.createSpyObj('DataService', ['getBpmnInfraRequest', 'getProcessInstanceId']);
 
     TestBed.configureTestingModule({
       providers: [
@@ -102,7 +102,7 @@ describe('HomeComponent', () => {
   it('should should navigate to a process if response status is OK', async(() => {
       spyDataService.getProcessInstanceId.and.returnValue(of(<HttpResponse<ProcessInstanceId>>{body: {processInstanceId: '114e9ae4-4a32-11e9-8646-d663bd873d93'}, status: 200}));
       spyOn(router, 'navigate');
-      component.getProcessIsntanceId('e8a75940-4a32-11e9-8646-d663bd873d93');
+      component.getProcessInstanceId('e8a75940-4a32-11e9-8646-d663bd873d93');
 
       fixture.whenStable().then(() => {
         expect(router.navigate).toHaveBeenCalledWith(['/details/114e9ae4-4a32-11e9-8646-d663bd873d93']);
@@ -111,7 +111,7 @@ describe('HomeComponent', () => {
 
   it('should handle error if no process instance id found', () => {
     spyDataService.getProcessInstanceId.and.returnValue(of(<HttpResponse<ProcessInstanceId>>{body: {processInstanceId: 'getProcessInstanceId error not found'}, status: 404}));
-    component.getProcessIsntanceId('e8a75940-4a32-11e9-8646-d663bd873d93');
+    component.getProcessInstanceId('e8a75940-4a32-11e9-8646-d663bd873d93');
   });
 
   it('should handle error when searchData.getSearchRequest returns an error', () => {
@@ -121,17 +121,17 @@ describe('HomeComponent', () => {
       component.makeCall();
   });
 
-  it('should handle error when dataService.retrieveInstance returns an error', () => {
+  it('should handle error when dataService.getBpmnInfraRequest returns an error', () => {
       spyOn(component.searchData, 'getSearchRequest').and.returnValue(of(getSearchRequest("965d3c92-44e0-11e9-b210-d663bd873d93", "85a7c354-44e0-11e9-b210-d663bd873d93", undefined, undefined, undefined, undefined, undefined, undefined, "ALL")));
-      spyDataService.retrieveInstance.and.callFake(() => {
-        return throwError(new Error('retrieveInstance error'));
+      spyDataService.getBpmnInfraRequest.and.callFake(() => {
+        return throwError(new Error('getBpmnInfraRequest error'));
       });
       component.makeCall();
   });
 
   it('should calculate statistics correctly', async(() => {
     let requestStatusTypes: string[] = ["COMPLETE", "IN_PROGRESS", "FAILED", "PENDING", "UNLOCKED"];
-    let processArr: Process[] = [];
+    let processArr: BpmnInfraRequest[] = [];
 
     // create 5 processes, one of each requestStatusType, with default time.
     requestStatusTypes.forEach((status) => {
@@ -142,7 +142,7 @@ describe('HomeComponent', () => {
 
       // search request has default filter.
       spyOn(component.searchData, 'getSearchRequest').and.returnValue(of(getSearchRequest(undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, "ALL")));
-      spyDataService.retrieveInstance.and.returnValue(of(processArr));
+      spyDataService.getBpmnInfraRequest.and.returnValue(of(processArr));
       component.makeCall();
 
       fixture.whenStable().then(() => {
@@ -172,7 +172,7 @@ describe('HomeComponent', () => {
       return new SearchRequest({ serviceInstanceId: [selectedValueSII, serviceInstanceIdVal], requestId: [selectedValueRI, requestIdVal], serviceInstanceName: [selectedValueSN, serviceInstanceNameVal] }, startTimeInMilliseconds, endTimeInMilliseconds);
   }
 
-  function getProcess(requestIdVal: string, serviceInstanceIdVal: string, serviceIstanceNameVal: string, networkIdVal: string, requestStatusVal: string, serviceTypeVal: string, startTimeVal = "1", endTimeVal = "2"): Process {
-    return <Process>{ requestId: requestIdVal, serviceInstanceId: serviceInstanceIdVal, serviceIstanceName: serviceIstanceNameVal, networkId: networkIdVal, requestStatus: requestStatusVal, serviceType: serviceTypeVal, startTime: startTimeVal, endTime: endTimeVal };
+  function getProcess(requestIdVal: string, serviceInstanceIdVal: string, serviceInstanceNameVal: string, networkIdVal: string, requestStatusVal: string, serviceTypeVal: string, startTimeVal = "1", endTimeVal = "2"): BpmnInfraRequest {
+    return <BpmnInfraRequest>{ requestId: requestIdVal, serviceInstanceId: serviceInstanceIdVal, serviceInstanceName: serviceInstanceNameVal, networkId: networkIdVal, requestStatus: requestStatusVal, serviceType: serviceTypeVal, startTime: startTimeVal, endTime: endTimeVal };
   }
 });
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 25b75d707d..01e6899b44 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
@@ -23,7 +23,7 @@ SPDX-License-Identifier: Apache-2.0
 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 { BpmnInfraRequest } from '../model/bpmnInfraRequest.model';
 import { ProcessInstanceId } from '../model/processInstanceId.model';
 import { ToastrNotificationService } from '../toastr-notification-service.service';
 import { MatSelectModule } from '@angular/material/select';
@@ -42,7 +42,7 @@ import { Constants } from './home.constant';
   encapsulation: ViewEncapsulation.None
 })
 
-export class HomeComponent implements OnInit {
+export class HomeComponent {
 
   totalVal = 0;
   completeVal = 0;
@@ -65,7 +65,7 @@ export class HomeComponent implements OnInit {
 
   searchData: SearchData;
   startingDate: Date;
-  processData: MatTableDataSource<Process>;
+  processData: MatTableDataSource<BpmnInfraRequest>;
 
   @ViewChild(MatPaginator) paginator: MatPaginator;
   @ViewChild(MatSort) sort: MatSort;
@@ -81,11 +81,11 @@ export class HomeComponent implements OnInit {
 
     var search = this.searchData.getSearchRequest().subscribe((result: SearchRequest) => {
 
-      this.data.retrieveInstance(result.getFilters(), result.getStartTimeInMilliseconds(), result.getEndTimeInMilliseconds())
-        .subscribe((data: Process[]) => {
+      this.data.getBpmnInfraRequest(result.getFilters(), result.getStartTimeInMilliseconds(), result.getEndTimeInMilliseconds())
+        .subscribe((data: BpmnInfraRequest[]) => {
           this.spinner.hide();
-          var processData: Process[] = data;
-          this.processData = new MatTableDataSource<Process>(processData);
+          var processData: BpmnInfraRequest[] = data;
+          this.processData = new MatTableDataSource<BpmnInfraRequest>(processData);
           this.processData.sort = this.sort;
           this.processData.paginator = this.paginator;
           this.processData.paginator.firstPage();
@@ -122,7 +122,7 @@ export class HomeComponent implements OnInit {
     });
   }
 
-  getProcessIsntanceId(requestId: string) {
+  getProcessInstanceId(requestId: string) {
     this.spinner.show();
 
     var response = this.data.getProcessInstanceId(requestId).subscribe((data) => {
@@ -137,6 +137,4 @@ export class HomeComponent implements OnInit {
       }
     });
   }
-
-  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
index 23ef63ff1e..72c98af3ce 100644
--- 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
@@ -35,7 +35,7 @@ export class Constants {
     "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 DISPLAYED_COLUMNS = ['requestId', 'serviceInstanceId', 'serviceInstanceName', 'networkId', 'requestStatus', 'serviceType', 'startTime', 'endTime'];
 
   public static DEFAULT_PAGE_SIZE_OPTIONS = [10, 25, 50, 100];
 }
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
index de5e98367f..86831f25a7 100644
--- 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
@@ -1,32 +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;

-}

+/**
+============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 ActivityInstance {
+  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/bpmnInfraRequest.model.ts
index 245981884a..e25b06f4ac 100644
--- 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/bpmnInfraRequest.model.ts
@@ -1,32 +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;

-}

+/**
+============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 BpmnInfraRequest {
+  requestId: string;
+  serviceInstanceId: string;
+  serviceInstanceName: 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
index 73eab7051b..c9ce7feb3b 100644
--- 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
@@ -1,26 +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;

-}

+/**
+============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 ProcessDefinitionDetail {
+  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
index b1338bbeae..2187436ae7 100644
--- 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
@@ -1,28 +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;

-}

+/**
+============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 ProcessInstanceDetail {
+  processInstanceId: string;
+  processDefinitionId: string;
+  processDefinitionName: string;
+  superProcessInstanceId: 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
index 4552590041..a948eb7cfe 100644
--- 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
@@ -1,105 +1,107 @@
-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;

-  }

-

-}

+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";
+import { Input } from "@angular/core";
+
+export class SearchData {
+
+  @Input() selectedValueSII = "EQ";
+  @Input() selectedValueRI = "EQ";
+  @Input() selectedValueSN = "EQ";
+  @Input() selectedValueSTATUS = "ALL";
+
+  private now = Date.now();
+  // Minus 1 hour from current time for start date
+  @Input() startDate = new Date(this.now - (1 * 60 * 60 * 1000));
+  @Input() selectedStartHour = this.getNumberAsString(this.startDate.getHours());
+  @Input() selectedStartMinute = this.getNumberAsString(this.startDate.getMinutes());
+
+  @Input() endDate = new Date(this.now);
+  @Input() selectedEndHour = this.getNumberAsString(this.endDate.getHours());
+  @Input() selectedEndMinute = this.getNumberAsString(this.endDate.getMinutes());
+
+
+  @Input() serviceInstanceId: string;
+  @Input() requestId: string;
+  @Input() 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
index 4b9dec0aa4..a4a3a357ba 100644
--- 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
@@ -1,27 +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;

-}

+/**
+============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 VariableInstance {
+  name: string;
+  value: string;
+  type: string;
+}
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
index 19985e79a3..e032bab637 100644
--- 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
@@ -1,40 +1,39 @@
-/**

-============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() { }

-}

+/**
+============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 {
+
+  currentUrl: string;
+
+  constructor(private router: Router) {
+    router.events.subscribe((_: NavigationEnd) => this.currentUrl = _.url);
+  }
+}
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
index 1fdd258282..2e6c90864d 100644
--- 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
@@ -1,36 +1,35 @@
-/**

-============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() { }

-}

+/**
+============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 {
+
+  constructor() { }
+
+}