final changes2.0.2

Issue-ID: USECASEUI-411

Signed-off-by: phani.y <yellela.nagaphanindra@huawei.com>
Change-Id: I8c295b112af7eef92798ee4615d13db44c5e1795

6 files changed, 338 insertions, 388 deletions

diff --git a/usecaseui-portal/src/app/app.module.ts b/usecaseui-portal/src/app/app.module.ts
index 8868cad6..137d0b6c 100644
--- a/usecaseui-portal/src/app/app.module.ts
+++ b/usecaseui-portal/src/app/app.module.ts
@@ -107,6 +107,7 @@ import { SotnManagementComponent } from './views/services/sotn-management/sotn-m
 import { OrderServiceComponent } from './views/services/sotn-management/order-service/order-service.component';
 import { ManageServiceComponent } from './views/services/sotn-management/manage-service/manage-service.component';
 import { MonitorServiceComponent } from './views/services/sotn-management/monitor-service/monitor-service.component';
+import { fakeBackendProvider } from '../../testBE/FakeBackendInterceptor';
 
 @NgModule({
   providers: [
@@ -119,7 +120,8 @@ import { MonitorServiceComponent } from './views/services/sotn-management/monito
     networkHttpservice,
     ManagemencsService,
     TextService,
-    SlicingTaskServices
+    SlicingTaskServices,
+    // fakeBackendProvider
   ],
   declarations: [
     AppComponent,
diff --git a/usecaseui-portal/src/app/datainterface.ts b/usecaseui-portal/src/app/datainterface.ts
new file mode 100644
index 00000000..2ba1af97
--- /dev/null
+++ b/usecaseui-portal/src/app/datainterface.ts
@@ -0,0 +1,6 @@
+enum baseUrl{
+    baseUrl = 'http://localhost:8082/api/usecaseui/server/v1'  //online
+    //baseUrl = 'http://172.19.44.223/api/usecaseui-server/v1'     //local one
+    //baseUrl = 'http://localhost:8082/api/usecaseui/server/v1'    //local two
+}
+export {baseUrl};
\ No newline at end of file
diff --git a/usecaseui-portal/src/app/views/services/sotn-management/manage-service/manage-service.component.ts b/usecaseui-portal/src/app/views/services/sotn-management/manage-service/manage-service.component.ts
index 130fbe27..098eedd2 100644
--- a/usecaseui-portal/src/app/views/services/sotn-management/manage-service/manage-service.component.ts
+++ b/usecaseui-portal/src/app/views/services/sotn-management/manage-service/manage-service.component.ts
@@ -1,6 +1,6 @@
 import { Component, OnInit, SimpleChanges } from '@angular/core';
 import { HttpClient, HttpHeaders, HttpParams, HttpResponse } from '@angular/common/http';
-
+import { baseUrl } from '../../../../datainterface';
 @Component({
   selector: 'app-manage-service',
   templateUrl: './manage-service.component.html',
@@ -8,21 +8,11 @@ import { HttpClient, HttpHeaders, HttpParams, HttpResponse } from '@angular/comm
 })
 export class ManageServiceComponent implements OnInit {
 
-  selectedSubscriptionType:string = "SOTN";
-  serviceSubscriptionList:any = [{
-    serviceType:"SOTN"
-  }];
-  selectedServiceInstance:string = "";
-  serviceInstanceList:any = [
-    {
-      serviceInstance: "SiteService-5011",
-      serviceInstancename: "SiteService-5011"
-    },
-    {
-      serviceInstance: "ISAAC-IS0333",
-      serviceInstancename: "ISAAC-IS0333"
-    }
-  ];
+  selectedSubscriptionType: string = "";
+  serviceSubscriptionList = [] as Array<any>;
+  selectedServiceInstance: string = "" ;
+  serviceInstanceList = [] as Array<any>;
+
   expandDataSet = [
     { rowIdx: 1, name: 'i18nTextDefine_serviceInformation', expand: true },
     { rowIdx: 2, name: 'i18nTextDefine_vpnInformation', expand: true },
@@ -35,7 +25,7 @@ export class ManageServiceComponent implements OnInit {
   uniInfo = [];
   mapped: any;
   myKeys = [] as Array<any>;
-  baseUrl:string = '/api/usecaseui-server/v1'
+  baseUrl = baseUrl.baseUrl
   constructor(private http: HttpClient) { }
 
   ngOnInit() {
@@ -45,22 +35,11 @@ export class ManageServiceComponent implements OnInit {
    //Get SubscriptionType
    getSubscribeTypes() {
     let url = this.baseUrl + "/uui-lcm/customers/service-subscriptions";
-    // this.http.get<any>(url, {}).subscribe((data) => {
-    //   this.serviceSubscriptionList = data.subscriptions;
-    //   this.selectedSubscriptionType = this.serviceSubscriptionList[0].serviceType;
-    //   this.getServiceInstanceList(this.selectedSubscriptionType);
-    // }, (err) => {
-    //   console.log(err);
-    // });
-    let data = {
-      "subscriptions": [
-        {
-          "serviceType": "SOTN",
-        }]
-     }
-     this.serviceSubscriptionList = data.subscriptions;
-     this.selectedSubscriptionType = this.serviceSubscriptionList[0].serviceType;
-     this.getServiceInstanceList(this.selectedSubscriptionType);
+    this.http.get<any>(url, {}).subscribe((data) => {
+      this.serviceSubscriptionList = data.subscriptions;
+    }, (err) => {
+      console.log(err);
+    });
   }
 
   //Get subscription instanceID by calling With Subscription Type
@@ -68,186 +47,58 @@ export class ManageServiceComponent implements OnInit {
     this.serviceInstanceList = [];
     this.selectedServiceInstance="";
     let url = this.baseUrl + "/uui-lcm/Sotnservices/ServiceInstances/"+subscriptionType;
-    // this.http.get<any>(url,{}).subscribe((data) => {
-    //   this.serviceInstanceList = data.serviceInstanceList; 
-    //   this.selectedServiceInstance = data.serviceInstanceList[0].serviceInstance;
-    //   this.getSubscribedSites(data.serviceInstanceList[0]);
-    // }, (err) => {
-    //   console.log(err);
-    // });    
-    let data = {
-        "serviceInstanceList": [
-            {
-                "serviceInstance": "ISAAC-IS02",
-                "serviceInstancename":"SiteService-5011"
-            },
-            {
-                "serviceInstance": "ISAAC-IS03",
-                "serviceInstancename":"ISAAC-IS0333"
-            }
-        ]
-    }
-    this.serviceInstanceList = data.serviceInstanceList;
-    this.selectedServiceInstance = data.serviceInstanceList[0].serviceInstance;
-    this.getSubscribedSites(data.serviceInstanceList[0]);
-    var datas = {
-      "service":{
-        "name":"CCVPNServiceV2-36",
-        "description":"CCVPNServiceV2",
-        "serviceInvariantUuid":"57c8a933-1364-4f85-b7a9-666d80ecc5b6",
-        "serviceUuid":"0734e398-a427-49f2-9abe-de8eb02542ad",
-        "globalSubscriberId": "{{customer}}",
-        "serviceType": "{{service-subscription}}",
-        "parameters":{
-          "locationConstraints":[],
-          "resources":[],
-          "requestInputs":{                
-            "sotnUnderlay":[
-              {
-                l2vpn:[
-                  {
-                    "l2vpn_COS": "123",         
-                    "l2vpn_dualLink": "Yes",
-                    "l2vpn_description": "VPN Description",                 
-                    "l2vpn_name": "VPN2",
-                    "l2vpn_tenantId": "989933",                  
-                    "l2vpn_vpnType": "SOTN",         
-                    "l2vpn_cbs": "123",                 
-                    "l2vpn_ebs": "23",         
-                    "l2vpn_colorAware": "true",         
-                    "l2vpn_reroute": "Yes",        
-                    "l2vpn_couplingFlag": "true",                 
-                    "l2vpn_cir": "100",
-                    "l2vpn_startTime": "28-02-2020",
-                    "l2vpn_endTime": "21-02-2020",         
-                    "l2vpn_eir": "1000",         
-                    "l2vpn_SLS": "1234"
-                  }
-                ],
-                "sotnUni":[
-                  {
-                    "sotnuni_cVLAN": "Huawei",						
-                    "sotnuni_tpId": "Huawei-112233"
-                  },
-                  {
-                    "sotnuni_cVLAN": "Huawei-1",						
-                    "sotnuni_tpId": "Huawei1-554433"
-                  }
-                ]					  						                 
-              }
-            ]
-          }
-        }
-      }
-    }
-    this.assignData(datas, false);
+    this.http.get<any>(url,{}).subscribe((data) => {
+      this.serviceInstanceList = data.serviceInstanceList; 
+    }, (err) => {
+      console.log(err);
+    });    
   }
 
-  getSubscribedSites(selectedServiceInstance) {}
-
-  deleteSelectedService()
-  {
-
+  deleteSelectedService() {
     let url = this.baseUrl + "/uui-lcm/Sotnservices/servicesubscription/"+this.selectedSubscriptionType+'/serviceinstance/'+this.selectedServiceInstance;
     
-    // this.http.delete<any>(url,{}).subscribe((data) => {
-    //   this.serviceInstanceList = [];
-    //   this.selectedServiceInstance = "";
-    //   this.getServiceInstanceList(this.selectedSubscriptionType);
-    // }, (err) => {
-    //   console.log(err);
-    // });
+    this.http.delete<any>(url,{}).subscribe((data) => {
+      this.serviceInstanceList = [];
+      this.selectedServiceInstance = "";
+      this.getServiceInstanceList(this.selectedSubscriptionType);
+    }, (err) => {
+      console.log(err);
+    });
   }
 
 
-  ngOnChanges(changes: SimpleChanges) {  
+  getSubscribedSites() {  
     console.log("on change");
     if (this.selectedServiceInstance) {
-      // let url = this.baseUrl + "/uui-lcm/Sotnservices/servicesubscription/"+this.selectedSubscriptionType+'/serviceinstance/'+this.selectedServiceInstance;
-      // this.http.get<any>(url, {}).subscribe((data) => {
-      //   this.assignData(data, false);
-      // }, (err) => {
-      //   console.log(err);
-      // });
-      var datas = {
-        "service":{
-          "name":"CCVPNServiceV2-36",
-          "description":"CCVPNServiceV2",
-          "serviceInvariantUuid":"57c8a933-1364-4f85-b7a9-666d80ecc5b6",
-          "serviceUuid":"0734e398-a427-49f2-9abe-de8eb02542ad",
-          "globalSubscriberId": "{{customer}}",
-          "serviceType": "{{service-subscription}}",
-          "parameters":{
-            "locationConstraints":[],
-            "resources":[],
-            "requestInputs":{                
-              "sotnUnderlay":[
-                {
-                  l2vpn:[
-                    {
-                      "l2vpn_COS": "123",         
-                      "l2vpn_dualLink": "Yes",
-                      "l2vpn_description": "VPN Description",                 
-                      "l2vpn_name": "VPN2",
-                      "l2vpn_tenantId": "989933",                  
-                      "l2vpn_vpnType": "SOTN",         
-                      "l2vpn_cbs": "123",                 
-                      "l2vpn_ebs": "23",         
-                      "l2vpn_colorAware": "true",         
-                      "l2vpn_reroute": "Yes",        
-                      "l2vpn_couplingFlag": "true",                 
-                      "l2vpn_cir": "100",
-                      "l2vpn_startTime": "28-02-2020",
-                      "l2vpn_endTime": "21-02-2020",         
-                      "l2vpn_eir": "1000",         
-                      "l2vpn_SLS": "1234"
-                    }
-                  ],
-                  "sotnUni":[
-                    {
-                      "sotnuni_cVLAN": "Huawei",						
-                      "sotnuni_tpId": "Huawei-112233"
-                    },
-                    {
-                      "sotnuni_cVLAN": "Huawei-1",						
-                      "sotnuni_tpId": "Huawei1-554433"
-                    }
-                  ]					  						                 
-                }
-              ]
-            }
-          }
-        }
-      }
-      this.assignData(datas, false);
+      let url = this.baseUrl + "/uui-lcm/Sotnservices/servicesubscription/"+this.selectedSubscriptionType+'/serviceinstance/'+this.selectedServiceInstance;
+      this.http.get<any>(url, {}).subscribe((data) => {
+        this.assignData(data, false);
+      }, (err) => {
+        console.log(err);
+      });
     }
     else {
-    //   const httpOptions = {
-    //     headers: new HttpHeaders({
-    //      'Content-Type': 'application/json',
-    //     })
-    //   };
-    //   let body = JSON.stringify({}); //this.orderServiceData
-    //   let url = this.baseUrl + "/uui-lcm/Sotnservices/cost";
-    // return this.http.post<any>(url,body,httpOptions).subscribe((data) => {
-    //     this.assignData(data, true);
-    //   }, (err) => {
-    //     console.log(err);
-    //   });
+      const httpOptions = {
+        headers: new HttpHeaders({
+         'Content-Type': 'application/json',
+        })
+      };
+      let body = JSON.stringify({}); //this.orderServiceData
+
+      let url = this.baseUrl + "/uui-lcm/Sotnservices/cost";
+    return this.http.post<any>(url,body,httpOptions).subscribe((data) => {
+        this.assignData(data, true);
+      }, (err) => {
+        console.log(err);
+      });
     }
   }
 
   assignData(data,isCost) {
     this.summaryInfo = data.service;
     this.mapped = JSON.parse(JSON.stringify(this.summaryInfo));
-    // delete this.mapped.vpninformations;
-    // delete this.mapped.vpnInformations;
-    // if(isCost)
-    // {
-    //   delete this.mapped.cost;
-    //   this.expandDataSet[0].cost = this.summaryInfo["cost"]["serviceCost"];
-    //   this.expandDataSet[1].cost = this.summaryInfo["cost"]["vpnCost"];
-    // }  
+    delete this.mapped.vpninformations;
+    delete this.mapped.vpnInformations;
     this.myKeys = Object.keys(this.mapped);
     this.vpnInfo = this.summaryInfo["parameters"]["requestInputs"]["sotnUnderlay"][0].l2vpn[0];
     this.uniInfo = this.summaryInfo["parameters"]["requestInputs"]["sotnUnderlay"][0].sotnUni;
diff --git a/usecaseui-portal/src/app/views/services/sotn-management/monitor-service/monitor-service.component.ts b/usecaseui-portal/src/app/views/services/sotn-management/monitor-service/monitor-service.component.ts
index c4f2760f..48c90b63 100644
--- a/usecaseui-portal/src/app/views/services/sotn-management/monitor-service/monitor-service.component.ts
+++ b/usecaseui-portal/src/app/views/services/sotn-management/monitor-service/monitor-service.component.ts
@@ -1,6 +1,8 @@
 import { Component, OnInit } from '@angular/core';
 import { Network, Node, Edge } from 'vis';
-
+import { HttpClient } from '@angular/common/http';
+import { Observable } from 'rxjs/Observable';
+import { baseUrl } from '../../../../datainterface';
 @Component({
   selector: 'app-monitor-service',
   templateUrl: './monitor-service.component.html',
@@ -8,30 +10,21 @@ import { Network, Node, Edge } from 'vis';
 })
 export class MonitorServiceComponent implements OnInit {
 
-  selectedSubscriptionType:string = "SOTN";
-  serviceSubscriptionList:any = [{
-    serviceType:"SOTN"
-  }];
-  selectedServiceInstance:string = "SiteService-5011";
-  serviceInstanceList:any = [
-    {
-      serviceInstance: "SiteService-5011",
-      serviceInstancename: "SiteService-5011"
-    },
-    {
-      serviceInstance: "ISAAC-IS0333",
-      serviceInstancename: "ISAAC-IS0333"
-    }
-  ];
-  selectedTopology:string = 'i18nTextDefine_networkTopology';
+  selectedSubscriptionType: string = "";
+  serviceSubscriptionList = [] as Array<any>;
+  selectedServiceInstance: string = "" ;
+  serviceInstanceList = [] as Array<any>;
+
+  selectedTopology:string = 'i18nTextDefine_serviceTopology';
   serviceTopologyList:any = [
     {
-      topologyType:"i18nTextDefine_networkTopology",
+      topologyType:"i18nTextDefine_serviceTopology",
     },
     {
       topologyType:"i18nTextDefine_resourceTopology",
     }
   ];
+  baseUrl = baseUrl.baseUrl
 
   title = 'Network';
     public nodes: Node;
@@ -71,166 +64,33 @@ export class MonitorServiceComponent implements OnInit {
       },
     };
 
-    node1:any = {
-      "nodes": [
-        {
-          "id": "1",
-          "shape": "circularImage",
-          "image": "./assets/images/edge.png",
-          "label": "Node",
-          "color": "Green",
-          "dataNode": {
-            "ethtSvcName": "sotn-021-VS-monitored",
-            "colorAware": "true",
-            "cbs": "100",
-            "couplingFlag": "true",
-            "ebs": "evpl",
-            "cir": "200000",
-            "eir": "0"
-          }
-        },
-        {
-          "id": "2",
-          "shape": "circularImage",
-          "image": "./assets/images/logicallink.png",
-          "label": "Logical Link",
-          "color": "Green",
-          "dataNode": {
-            "ethtSvcName": "sotn-021-VS-monitored",
-            "colorAware": "true",
-            "cbs": "100",
-            "couplingFlag": "true",
-            "ebs": "evpl",
-            "cir": "200000",
-            "eir": "0"
-          }
-        },
-        {
-          "id": "3",
-          "shape": "circularImage",
-          "image": "./assets/images/edge.png",
-          "label": "Node",
-          "color": "Green",
-          "dataNode": {
-            "zipcode": "100095",
-            "siteName": "hubtravel",
-            "description": "desc",
-            "location": "laptop-5",
-            "cvlan": "100"
-          }
-        }
-      ],
-      "edges": [
-        {
-          "from": "1",
-          "to": "2"
-        },
-        {
-          "from": "2",
-          "to": "3"
-        }
-      ]
-    }
-
-  node2:any = {
-    "nodes": [
-      {
-        "id": "1",
-        "shape": "circularImage",
-        "image": "./assets/images/tpoint.png",
-        "label": "Termination Point",
-        "color": "Green",
-        "dataNode": {}
-      },
-      {
-        "id": "2",
-        "shape": "circularImage",
-        "image": "./assets/images/edge.png",
-        "label": "Node",
-        "color": "Green",
-        "dataNode": {
-          "ethtSvcName": "sotn-021-VS-monitored",
-          "colorAware": "true",
-          "cbs": "100",
-          "couplingFlag": "true",
-          "ebs": "evpl",
-          "cir": "200000",
-          "eir": "0"
-        }
-      },
-      {
-        "id": "3",
-        "shape": "circularImage",
-        "image": "./assets/images/logicallink.png",
-        "label": "Logical Link",
-        "color": "Green",
-        "dataNode": {
-          "ethtSvcName": "sotn-021-VS-monitored",
-          "colorAware": "true",
-          "cbs": "100",
-          "couplingFlag": "true",
-          "ebs": "evpl",
-          "cir": "200000",
-          "eir": "0"
-        }
-      },
-      {
-        "id": "4",
-        "shape": "circularImage",
-        "image": "./assets/images/edge.png",
-        "label": "Node",
-        "color": "Green",
-        "dataNode": {
-          "zipcode": "100095",
-          "siteName": "hubtravel",
-          "description": "desc",
-          "location": "laptop-5",
-          "cvlan": "100"
-        }
-      },
-      {
-        "id": "5",
-        "shape": "circularImage",
-        "image": "./assets/images/tpoint.png",
-        "label": "Termination Point",
-        "color": "Green",
-        "dataNode": {
-          "accessltpid": "155",
-          "siteName": "hubtravel",
-          "description": "desc",
-          "accessnodeid": "10.10.10.10",
-          "cvlan": "100"
-        }
-      }
-    ],
-    "edges": [
-      {
-        "from": "1",
-        "to": "2"
-      },
-      {
-        "from": "2",
-        "to": "3"
-      },
-      {
-        "from": "3",
-        "to": "4"
-      },
-      {
-        "from": "4",
-        "to": "5"
-      }
-    ]
-  }
-
-  constructor() { }
+  constructor(private http: HttpClient) { }
 
   intervalData: any;
   returnResponse: boolean = true;
 
-  //Get SubscriptionType
-  getSubscribeTypes() {
-      this.getTopologyInfo('i18nTextDefine_networkTopology');
+
+
+   //Get SubscriptionType
+   getSubscribeTypes() {
+    let url = this.baseUrl + "/uui-lcm/customers/service-subscriptions";
+    this.http.get<any>(url, {}).subscribe((data) => {
+      this.serviceSubscriptionList = data.subscriptions;
+    }, (err) => {
+      console.log(err);
+    });
+  }
+
+  //Get subscription instanceID by calling With Subscription Type
+  getServiceInstanceList(subscriptionType) {
+    this.serviceInstanceList = [];
+    this.selectedServiceInstance="";
+    let url = this.baseUrl + "/uui-lcm/Sotnservices/ServiceInstances/" + subscriptionType;
+    this.http.get<any>(url,{}).subscribe((data) => {
+      this.serviceInstanceList = data.serviceInstanceList; 
+    }, (err) => {
+      console.log(err);
+    });    
   }
 
   getTopologyInfo (topo) {
@@ -238,26 +98,18 @@ export class MonitorServiceComponent implements OnInit {
     this.getData();
     this.refreshData();
   }
-
   //Get subscription instanceID by calling With Subscription Type
-  getServiceInstanceList(subscriptionType) {
-          this.getSelectedsubscriptionInfo(subscriptionType);
-  }
   ngOnInit() {
       this.container = document.getElementById('mynetwork');
       this.getSubscribeTypes();
   }
 
   refreshData() {
-
       var data1 = {
           nodes: this.serviceList.nodes,
           edges: this.serviceList.edges
       };
-
       var network = new Network(this.container, data1, this.networkOptions);
-
-
       network.on('select', function (selection) {
           this.selectedNodeIds = selection.nodes[0]; // array of selected node's ids
           var filteredNode = data1.nodes.filter(item => (
@@ -295,13 +147,14 @@ export class MonitorServiceComponent implements OnInit {
       });
   }
 
-  getData ()
-  {
-    if (this.selectedTopology == 'i18nTextDefine_networkTopology') {
-      this.serviceList = this.node1;
-    } else {
-      this.serviceList = this.node2;
-    }
+  getData (){
+    var comp = this;
+    this.http.get<any>(this.baseUrl+'/uui-lcm/Sotnservices/resourceTopology/service/service-subscriptions/service-subscription/'+this.selectedSubscriptionType.toLowerCase()+'/service-instances/service-instance/'+this.selectedServiceInstance, {}).subscribe((data) => {
+        this.serviceList = data;
+        comp.refreshData();
+    }, (err) => {
+        console.log(err);
+    });
   }
   // Getting sitedata Based On Type and ID
   getSelectedsubscriptionInfo() {       
diff --git a/usecaseui-portal/src/app/views/services/sotn-management/order-service/order-service.component.ts b/usecaseui-portal/src/app/views/services/sotn-management/order-service/order-service.component.ts
index a945b93e..d770eb06 100644
--- a/usecaseui-portal/src/app/views/services/sotn-management/order-service/order-service.component.ts
+++ b/usecaseui-portal/src/app/views/services/sotn-management/order-service/order-service.component.ts
@@ -6,6 +6,7 @@ import {
 } from '@angular/forms';
 import { HttpClient, HttpHeaders } from '@angular/common/http';
 import { NzMessageService } from 'ng-zorro-antd';
+import { baseUrl } from '../../../../datainterface';
 
 @Component({
   selector: 'app-order-service',
@@ -19,7 +20,8 @@ export class OrderServiceComponent implements OnInit {
   siteData:object = {};
   buttonDisabled:boolean = false;
   intervalData:any;
-  baseUrl:string = '/api/usecaseui-server/v1';
+  // baseUrl:string = '/api/usecaseui-server/v1';
+  baseUrl = baseUrl.baseUrl
   expandDataSet = [
     { rowIdx: 1, name: 'i18nTextDefine_serviceInformation', expand: true },
     { rowIdx: 2, name: 'i18nTextDefine_vpnInformation', expand: true },
@@ -27,6 +29,7 @@ export class OrderServiceComponent implements OnInit {
   ];
   uni = {};
   sotnUni = [];
+  
   @Output() childEvent = new EventEmitter<string>();
 
   constructor(private fb: FormBuilder, private http: HttpClient, private message: NzMessageService) { }
@@ -132,7 +135,7 @@ export class OrderServiceComponent implements OnInit {
        'Content-Type': 'application/json',
       })
     };
-    let url1 = this.baseUrl + '/uui-lcm/Sotnservices';
+    let url1 = this.baseUrl + '/uui-lcm/Sotnservices_unni';
     this.http.post<any>(url1, body, httpOptions).subscribe((data) => { 
       let comp = this;
       this.message.info('Instantiation In Progress');
diff --git a/usecaseui-portal/testBE/FakeBackendInterceptor.ts b/usecaseui-portal/testBE/FakeBackendInterceptor.ts
new file mode 100644
index 00000000..dd1c0d20
--- /dev/null
+++ b/usecaseui-portal/testBE/FakeBackendInterceptor.ts
@@ -0,0 +1,235 @@
+import { Injectable } from '@angular/core';
+import { HttpRequest, HttpResponse, HttpHandler, HttpEvent, HttpInterceptor, HTTP_INTERCEPTORS } from '@angular/common/http';
+import { Observable } from 'rxjs/Observable';
+import 'rxjs/add/observable/of';
+import 'rxjs/add/observable/throw';
+import 'rxjs/add/operator/delay';
+import 'rxjs/add/operator/mergeMap';
+import 'rxjs/add/operator/materialize';
+import 'rxjs/add/operator/dematerialize';
+
+@Injectable()
+export class FakeBackendInterceptor implements HttpInterceptor {
+
+    constructor() { }
+    loopcnt: any = 0;
+    bodyData = [];
+    statusCnt:any =10;
+
+    intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
+        // array in local storage for registered users
+        let sites: any[] = JSON.parse(localStorage.getItem('sites')) || [];
+
+        // wrap in delayed observable to simulate server api call
+        return Observable.of(null).mergeMap(() => {
+
+            // create site
+            if (request.url.endsWith('order/newSiteData') && request.method === 'POST') {
+                // get new user object from post body
+                let newSite = request.body;
+                sites.push(newSite);
+                localStorage.setItem('sites', JSON.stringify(sites));
+                console.log(sites);
+              
+                // respond 200 OK
+                return Observable.of(new HttpResponse({ status: 200 }));
+            }
+            // get data manage service data
+            if (request.url.endsWith('/uui-lcm/Sotnservices/servicesubscription/SOTN/serviceinstance/ISAAC-IS02') || request.url.endsWith('/uui-lcm/Sotnservices/servicesubscription/SOTN/serviceinstance/ISAAC-IS03') && request.method === 'GET') {
+                let body = {
+                    "service":{
+                        "name":"CCVPNServiceV2-36",
+                        "description":"CCVPNServiceV2",
+                        "serviceInvariantUuid":"57c8a933-1364-4f85-b7a9-666d80ecc5b6",
+                        "serviceUuid":"0734e398-a427-49f2-9abe-de8eb02542ad",
+                        "globalSubscriberId": "{{customer}}",
+                        "serviceType": "{{service-subscription}}",
+                        "parameters":{
+                          "locationConstraints":[],
+                          "resources":[],
+                          "requestInputs":{                
+                            "sotnUnderlay":[
+                              {
+                                "l2vpn":[
+                                  {
+                                    "l2vpn_COS": "123",         
+                                    "l2vpn_dualLink": "Yes",
+                                    "l2vpn_description": "VPN Description",                 
+                                    "l2vpn_name": "VPN2",
+                                    "l2vpn_tenantId": "989933",                  
+                                    "l2vpn_vpnType": "SOTN",         
+                                    "l2vpn_cbs": "123",                 
+                                    "l2vpn_ebs": "23",         
+                                    "l2vpn_colorAware": "true",         
+                                    "l2vpn_reroute": "Yes",        
+                                    "l2vpn_couplingFlag": "true",                 
+                                    "l2vpn_cir": "100",
+                                    "l2vpn_startTime": "28-02-2020",
+                                    "l2vpn_endTime": "21-02-2020",         
+                                    "l2vpn_eir": "1000",         
+                                    "l2vpn_SLS": "1234"
+                                  }
+                                ],
+                                "sotnUni":[
+                                  {
+                                    "sotnuni_cVLAN": "Huawei",						
+                                    "sotnuni_tpId": "Huawei-112233"
+                                  },
+                                  {
+                                    "sotnuni_cVLAN": "Huawei-1",						
+                                    "sotnuni_tpId": "Huawei1-554433"
+                                  }
+                                ]					  						                 
+                              }
+                            ]
+                          }
+                        }
+                      }
+                    
+                    };
+                return Observable.of(new HttpResponse({ status: 200, body: body }));
+
+            }
+            // get monotor service data
+            if (request.url.endsWith('/uui-lcm/Sotnservices/resourceTopology/service/service-subscriptions/service-subscription/sotn/service-instances/service-instance/ISAAC-IS02') || request.url.endsWith('/uui-lcm/Sotnservices/resourceTopology/service/service-subscriptions/service-subscription/sotn/service-instances/service-instance/ISAAC-IS03') && request.method === 'GET') {
+                let body = {
+                    "nodes": [
+                      {
+                        "id": "1",
+                        "shape": "circularImage",
+                        "image": "./assets/images/tpoint.png",
+                        "label": "Termination Point",
+                        "color": "Green",
+                        "dataNode": {}
+                      },
+                      {
+                        "id": "2",
+                        "shape": "circularImage",
+                        "image": "./assets/images/edge.png",
+                        "label": "Node",
+                        "color": "Green",
+                        "dataNode": {
+                          "ethtSvcName": "sotn-021-VS-monitored",
+                          "colorAware": "true",
+                          "cbs": "100",
+                          "couplingFlag": "true",
+                          "ebs": "evpl",
+                          "cir": "200000",
+                          "eir": "0"
+                        }
+                      },
+                      {
+                        "id": "3",
+                        "shape": "circularImage",
+                        "image": "./assets/images/logicallink.png",
+                        "label": "Logical Link",
+                        "color": "Green",
+                        "dataNode": {
+                          "ethtSvcName": "sotn-021-VS-monitored",
+                          "colorAware": "true",
+                          "cbs": "100",
+                          "couplingFlag": "true",
+                          "ebs": "evpl",
+                          "cir": "200000",
+                          "eir": "0"
+                        }
+                      },
+                      {
+                        "id": "4",
+                        "shape": "circularImage",
+                        "image": "./assets/images/edge.png",
+                        "label": "Node",
+                        "color": "Green",
+                        "dataNode": {
+                          "zipcode": "100095",
+                          "siteName": "hubtravel",
+                          "description": "desc",
+                          "location": "laptop-5",
+                          "cvlan": "100"
+                        }
+                      },
+                      {
+                        "id": "5",
+                        "shape": "circularImage",
+                        "image": "./assets/images/tpoint.png",
+                        "label": "Termination Point",
+                        "color": "Green",
+                        "dataNode": {
+                          "accessltpid": "155",
+                          "siteName": "hubtravel",
+                          "description": "desc",
+                          "accessnodeid": "10.10.10.10",
+                          "cvlan": "100"
+                        }
+                      }
+                    ],
+                    "edges": [
+                      {
+                        "from": "1",
+                        "to": "2"
+                      },
+                      {
+                        "from": "2",
+                        "to": "3"
+                      },
+                      {
+                        "from": "3",
+                        "to": "4"
+                      },
+                      {
+                        "from": "4",
+                        "to": "5"
+                      }
+                    ]
+                  };
+
+                return Observable.of(new HttpResponse({ status: 200, body: body }));
+
+            }
+         
+            if (request.url.endsWith('/uui-lcm/customers/service-subscriptions') && request.method === 'GET') {
+                let body = {
+                    "subscriptions": [
+                      {
+                        "serviceType": "SOTN"
+                      }]
+                   };
+
+                return Observable.of(new HttpResponse({ status: 200, body: body }));
+
+            }
+            if (request.url.endsWith('/uui-lcm/Sotnservices/ServiceInstances/SOTN') && request.method === 'GET') {
+                let body = {
+                    "serviceInstanceList": [
+                        {
+                            "serviceInstance": "ISAAC-IS02",
+                            "serviceInstancename":"SiteService-5011"
+                        },
+                        {
+                            "serviceInstance": "ISAAC-IS03",
+                            "serviceInstancename":"ISAAC-IS0333"
+                        }
+                    ]
+                };
+
+                return Observable.of(new HttpResponse({ status: 200, body: body }));
+
+            }
+            // pass through any requests not handled above
+            return next.handle(request);
+
+        })
+
+            // call materialize and dematerialize to ensure delay even if an error is thrown (https://github.com/Reactive-Extensions/RxJS/issues/648)
+            .materialize()
+            .delay(500)
+            .dematerialize();
+    }
+}
+
+export let fakeBackendProvider = {
+    // use fake backend in place of Http service for backend-less development
+    provide: HTTP_INTERCEPTORS,
+    useClass: FakeBackendInterceptor,
+    multi: true
+};
\ No newline at end of file