Service Topology Changes3.0.1

Issue-ID: USECASEUI-419

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

12 files changed, 374 insertions, 140 deletions

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 098eedd2..16aee4e7 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
@@ -34,8 +34,13 @@ export class ManageServiceComponent implements OnInit {
 
    //Get SubscriptionType
    getSubscribeTypes() {
+     let httpOptions = {
+      headers: new HttpHeaders({
+        'Content-Type':  'application/json'
+      })
+    };
     let url = this.baseUrl + "/uui-lcm/customers/service-subscriptions";
-    this.http.get<any>(url, {}).subscribe((data) => {
+    this.http.get<any>(url, httpOptions).subscribe((data) => {
       this.serviceSubscriptionList = data.subscriptions;
     }, (err) => {
       console.log(err);
@@ -44,10 +49,15 @@ export class ManageServiceComponent implements OnInit {
 
   //Get subscription instanceID by calling With Subscription Type
   getServiceInstanceList(subscriptionType) {
+     let httpOptions = {
+      headers: new HttpHeaders({
+        'Content-Type':  'application/json'
+      })
+    };
     this.serviceInstanceList = [];
     this.selectedServiceInstance="";
     let url = this.baseUrl + "/uui-lcm/Sotnservices/ServiceInstances/"+subscriptionType;
-    this.http.get<any>(url,{}).subscribe((data) => {
+    this.http.get<any>(url,httpOptions).subscribe((data) => {
       this.serviceInstanceList = data.serviceInstanceList; 
     }, (err) => {
       console.log(err);
@@ -56,8 +66,12 @@ export class ManageServiceComponent implements OnInit {
 
   deleteSelectedService() {
     let url = this.baseUrl + "/uui-lcm/Sotnservices/servicesubscription/"+this.selectedSubscriptionType+'/serviceinstance/'+this.selectedServiceInstance;
-    
-    this.http.delete<any>(url,{}).subscribe((data) => {
+    let httpOptions = {
+      headers: new HttpHeaders({
+        'Content-Type':  'application/json'
+      })
+    };
+    this.http.delete<any>(url,httpOptions).subscribe((data) => {
       this.serviceInstanceList = [];
       this.selectedServiceInstance = "";
       this.getServiceInstanceList(this.selectedSubscriptionType);
@@ -67,11 +81,17 @@ export class ManageServiceComponent implements OnInit {
   }
 
 
+  
   getSubscribedSites() {  
     console.log("on change");
+     let httpOptions = {
+      headers: new HttpHeaders({
+        'Content-Type':  'application/json'
+      })
+    };
     if (this.selectedServiceInstance) {
       let url = this.baseUrl + "/uui-lcm/Sotnservices/servicesubscription/"+this.selectedSubscriptionType+'/serviceinstance/'+this.selectedServiceInstance;
-      this.http.get<any>(url, {}).subscribe((data) => {
+      this.http.get<any>(url, httpOptions).subscribe((data) => {
         this.assignData(data, false);
       }, (err) => {
         console.log(err);
diff --git a/usecaseui-portal/src/app/views/services/sotn-management/monitor-service/monitor-service.component.html b/usecaseui-portal/src/app/views/services/sotn-management/monitor-service/monitor-service.component.html
index 39bfa1bf..3637d3c9 100644
--- a/usecaseui-portal/src/app/views/services/sotn-management/monitor-service/monitor-service.component.html
+++ b/usecaseui-portal/src/app/views/services/sotn-management/monitor-service/monitor-service.component.html
@@ -29,15 +29,19 @@
         <td>
             <nz-select id="serviceInstance" class= "colm-s-2 " [(ngModel)]="selectedTopology" (ngModelChange)="getTopologyInfo($event)"
             nzAllowClear nzPlaceHolder="Choose">
-            <nz-option *ngFor="let option of serviceTopologyList" [nzValue]="option.topologyType" [nzLabel]="option.topologyType | translate"></nz-option>
+            <nz-option *ngFor="let option of serviceTopologyList" [nzValue]="option.topologyType" [nzLabel]="option.topologyType | translate"    [nzDisabled]="option.topologyType == 'i18nTextDefine_resourceTopology'"></nz-option>
         </nz-select>
         </td>
       </tr>
     </table>
   </div>
-  
-  <div class="flexDiv">   
-    <div id="mynetwork"  class="colm-s-3"></div>
+  <div class="flexDiv">
+    <div class="topocontainer">
+      <div class="back-btn">
+        <button nz-button nzType="primary" (click)="onBack()" [disabled]="isdisabled">Back</button> 
+      </div>
+      <div id="mynetwork"  class="colm-s-3"></div>
+    </div> 
     <div class="colm-s-4"><div id="nodeDetails"></div></div>
   </div>
 </div>
\ No newline at end of file
diff --git a/usecaseui-portal/src/app/views/services/sotn-management/monitor-service/monitor-service.component.less b/usecaseui-portal/src/app/views/services/sotn-management/monitor-service/monitor-service.component.less
index 9ebe3741..bfdcfdeb 100644
--- a/usecaseui-portal/src/app/views/services/sotn-management/monitor-service/monitor-service.component.less
+++ b/usecaseui-portal/src/app/views/services/sotn-management/monitor-service/monitor-service.component.less
@@ -95,4 +95,6 @@
 
    #subscriptionType, #serviceInstance {
        width: 250px;
-   }
\ No newline at end of file
+   }
+
+ 
\ No newline at end of file
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 48c90b63..4903b102 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,8 +1,9 @@
 import { Component, OnInit } from '@angular/core';
 import { Network, Node, Edge } from 'vis';
-import { HttpClient } from '@angular/common/http';
+import { HttpClient, HttpHeaders } from '@angular/common/http';
 import { Observable } from 'rxjs/Observable';
 import { baseUrl } from '../../../../datainterface';
+import { getLocaleDateFormat } from '@angular/common';
 @Component({
   selector: 'app-monitor-service',
   templateUrl: './monitor-service.component.html',
@@ -16,14 +17,6 @@ export class MonitorServiceComponent implements OnInit {
   serviceInstanceList = [] as Array<any>;
 
   selectedTopology:string = 'i18nTextDefine_serviceTopology';
-  serviceTopologyList:any = [
-    {
-      topologyType:"i18nTextDefine_serviceTopology",
-    },
-    {
-      topologyType:"i18nTextDefine_resourceTopology",
-    }
-  ];
   baseUrl = baseUrl.baseUrl
 
   title = 'Network';
@@ -31,6 +24,7 @@ export class MonitorServiceComponent implements OnInit {
     public edges: Edge;
     public network: Network;
     public serviceList: any;
+    public vpnBindingList:any;
     public tempNode: any;
     public tempEdge: any;
     public selectedNode: any;
@@ -38,9 +32,20 @@ export class MonitorServiceComponent implements OnInit {
     public x: any;
     public abc = [];
     container: any;
+    isdisabled:boolean = true;
+    serviceTopologyList:any = [
+      {
+        topologyType:"i18nTextDefine_serviceTopology",
+      },
+      {
+        topologyType:"i18nTextDefine_resourceTopology",
+      }
+    ];
+  
+    
     networkOptions = {
       layout: { 
-          randomSeed: 15 
+          randomSeed: 15
       },
       nodes: {
           borderWidth: 13,
@@ -52,7 +57,7 @@ export class MonitorServiceComponent implements OnInit {
           font: { color: '#eeeeee' }
       },
       edges: {
-          color: 'lightgray'
+          color: 'lightgray',
       },
 
       interaction: {
@@ -69,12 +74,27 @@ export class MonitorServiceComponent implements OnInit {
   intervalData: any;
   returnResponse: boolean = true;
 
-
+  onBack(){
+     if(this.serviceList.length > 0) {
+      this.refreshData("");
+     } else {
+       this.getData("");
+     }
+     this.isdisabled = true;
+  };
 
    //Get SubscriptionType
    getSubscribeTypes() {
+    this.serviceList = [];
+    this.vpnBindingList = [];
+    this.isdisabled = true;
+    let httpOptions = {
+      headers: new HttpHeaders({
+        'Content-Type':  'application/json'
+      })
+    };
     let url = this.baseUrl + "/uui-lcm/customers/service-subscriptions";
-    this.http.get<any>(url, {}).subscribe((data) => {
+    this.http.get<any>(url, httpOptions).subscribe((data) => {
       this.serviceSubscriptionList = data.subscriptions;
     }, (err) => {
       console.log(err);
@@ -83,10 +103,19 @@ export class MonitorServiceComponent implements OnInit {
 
   //Get subscription instanceID by calling With Subscription Type
   getServiceInstanceList(subscriptionType) {
+    debugger
+    this.serviceList = [];
+    this.vpnBindingList = [];
+    this.isdisabled = true;
     this.serviceInstanceList = [];
     this.selectedServiceInstance="";
+    let httpOptions = {
+      headers: new HttpHeaders({
+        'Content-Type':  'application/json'
+      })
+    };
     let url = this.baseUrl + "/uui-lcm/Sotnservices/ServiceInstances/" + subscriptionType;
-    this.http.get<any>(url,{}).subscribe((data) => {
+    this.http.get<any>(url,httpOptions).subscribe((data) => {
       this.serviceInstanceList = data.serviceInstanceList; 
     }, (err) => {
       console.log(err);
@@ -95,8 +124,8 @@ export class MonitorServiceComponent implements OnInit {
 
   getTopologyInfo (topo) {
     this.selectedTopology = topo;
-    this.getData();
-    this.refreshData();
+    this.getData("");
+    this.refreshData("");
   }
   //Get subscription instanceID by calling With Subscription Type
   ngOnInit() {
@@ -104,24 +133,28 @@ export class MonitorServiceComponent implements OnInit {
       this.getSubscribeTypes();
   }
 
-  refreshData() {
+  refreshData(data) {
+      const com = this
+      var id ;
       var data1 = {
-          nodes: this.serviceList.nodes,
-          edges: this.serviceList.edges
+          nodes: data.nodes,
+          edges: data.edges
       };
       var network = new Network(this.container, data1, this.networkOptions);
-      network.on('select', function (selection) {
+      network.on('doubleClick', function (selection) {
+           var selectedvpnid = selection.nodes[0];
+          com.getData(selectedvpnid)
           this.selectedNodeIds = selection.nodes[0]; // array of selected node's ids
           var filteredNode = data1.nodes.filter(item => (
               item.id == this.selectedNodeIds
           ));
           var t1 = '<div class="tblDiv">\
           <nz-form-label class="lblCls">Node Information</nz-form-label>\
-          <table class="table table-striped table-bordered">\
+          <table class="monitor-table">\
               <thead>\
                   <tr>\
-                      <th class="clr-primary padding-2p">Specification</th>\
-                      <th class="clr-primary padding-2p">Value</th>\
+                      <th class="monitor-table-td-th ">Specification</th>\
+                      <th class="monitor-table-td-th ">Value</th>\
                   </tr>\
               </thead>\
               <tbody>\
@@ -130,8 +163,8 @@ export class MonitorServiceComponent implements OnInit {
               if( entry[1] !== "null")
               {
                   t1 += '<tr class="popup-table-row">\
-                      <td class="popup-table-header clr-primary padding-2p">'+ entry[0] + ':</td>\
-                      <td class="popup-table-data  clr-primary padding-2p">'+ entry[1] + '</td>\
+                      <td class="monitor-table-td-th  ">'+ entry[0] + ':</td>\
+                      <td class="monitor-table-td-th   ">'+ entry[1] + '</td>\
                   </tr>\
                   ';
               }    
@@ -147,24 +180,49 @@ export class MonitorServiceComponent implements OnInit {
       });
   }
 
-  getData (){
+  getData (vpnid){
     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) => {
+    let url = "";
+    if(vpnid != "" ) {
+      if(this.vpnBindingList.length > 0) {
+          this.refreshData(this.vpnBindingList)
+        } else {
+        url = this.baseUrl+'/uui-lcm/Sotnservices/vpnbindingTopology/service/service-subscriptions/service-subscription/'+this.selectedSubscriptionType.toLowerCase()+'/service-instances/service-instance/'+this.selectedServiceInstance+'/vpn-informations/vpn-information/'+ vpnid;
+      }
+    } else {
+      if(this.serviceList.length > 0 && vpnid == "") {
+        this.refreshData(this.serviceList);
+      } else {
+        url = this.baseUrl+'/uui-lcm/Sotnservices/serviceTopology/service/service-subscriptions/service-subscription/'+this.selectedSubscriptionType.toLowerCase()+'/service-instances/service-instance/'+this.selectedServiceInstance;
+      }
+    }
+    let httpOptions = {
+      headers: new HttpHeaders({
+        'Content-Type':  'application/json'
+      })
+    };
+    this.http.get<any>(url, httpOptions).subscribe((data) => {
+      if(vpnid == "") {
         this.serviceList = data;
-        comp.refreshData();
-    }, (err) => {
+      } else {
+        this.vpnBindingList = data;
+        this.isdisabled = false;
+    }
+    comp.refreshData(data);
+  }, (err) => {
         console.log(err);
     });
   }
+
   // Getting sitedata Based On Type and ID
   getSelectedsubscriptionInfo() {       
-      this.getData();
-      this.refreshData();
+      this.getData("");
       if (this.intervalData) {
           clearInterval(this.intervalData);
       }        
   }
 
+  
   ngOnDestroy() {
       console.log('clear interval');
       if (this.intervalData) {
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 d770eb06..1cfd00fd 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
@@ -20,7 +20,6 @@ export class OrderServiceComponent implements OnInit {
   siteData:object = {};
   buttonDisabled:boolean = false;
   intervalData:any;
-  // baseUrl:string = '/api/usecaseui-server/v1';
   baseUrl = baseUrl.baseUrl
   expandDataSet = [
     { rowIdx: 1, name: 'i18nTextDefine_serviceInformation', expand: true },
@@ -59,6 +58,7 @@ export class OrderServiceComponent implements OnInit {
     });
   }
 
+  
   numberOnly(event): boolean {
     const charCode = (event.which) ? event.which : event.keyCode;
     if (charCode > 31 && (charCode < 48 || charCode > 57)) {
@@ -121,6 +121,10 @@ export class OrderServiceComponent implements OnInit {
       this.l2vpn["l2vpn_reroute"] == null) {
         return false;
     }
+    // for (const i in this.validateForm.controls) {
+    //   this.validateForm.controls[i].markAsDirty();
+    //   this.validateForm.controls[i].updateValueAndValidity();
+    // }
     return true;
   }
 
@@ -135,13 +139,19 @@ export class OrderServiceComponent implements OnInit {
        'Content-Type': 'application/json',
       })
     };
+    
     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');
       this.intervalData = setInterval(() => {
+        const httpOptions1 = {
+          headers: new HttpHeaders({
+           'Content-Type': 'application/json',
+          })
+        };
         let url2 = this.baseUrl + "/uui-lcm/Sotnservices/serviceStatus/service-instance/" + data.service.serviceId;
-        this.http.get<any>(url2, {}).subscribe((data) => {
+        this.http.get<any>(url2, httpOptions1).subscribe((data) => {
           if (data.status == "1") {
             clearInterval(comp.intervalData);
             comp.message.success('Service Created');
diff --git a/usecaseui-portal/src/assets/i18n/cn.json b/usecaseui-portal/src/assets/i18n/cn.json
index f8ec2481..bcb7851d 100644
--- a/usecaseui-portal/src/assets/i18n/cn.json
+++ b/usecaseui-portal/src/assets/i18n/cn.json
@@ -151,7 +151,7 @@
   "i18nTextDefine_topology": "拓扑结构",
   "i18nTextDefine_colorAware": "色敏感",
   "i18nTextDefine_couplingFlag": "耦合标签",
-  "i18nTextDefine_networkTopology": "网络拓扑",
+  "i18nTextDefine_serviceTopology": "服务拓扑",
   "i18nTextDefine_resourceTopology": "资源拓扑",
   "i18nTextDefine_orderService":"订购服务",
   "i18nTextDefine_monitorService":"监控服务", 
diff --git a/usecaseui-portal/src/assets/i18n/en.json b/usecaseui-portal/src/assets/i18n/en.json
index 41b7c8d8..dd967e94 100644
--- a/usecaseui-portal/src/assets/i18n/en.json
+++ b/usecaseui-portal/src/assets/i18n/en.json
@@ -150,7 +150,7 @@
   "i18nTextDefine_topology": "Topology",
   "i18nTextDefine_colorAware": "Color Aware",
   "i18nTextDefine_couplingFlag": "Coupling Flag",
-  "i18nTextDefine_networkTopology": "Network Topology",
+  "i18nTextDefine_serviceTopology": "Service Topology",
   "i18nTextDefine_resourceTopology": "Resource Topology",
   "i18nTextDefine_orderService":"Order Service",
   "i18nTextDefine_monitorService":"Monitor Service", 
diff --git a/usecaseui-portal/src/assets/images/connectivity.png b/usecaseui-portal/src/assets/images/connectivity.png
new file mode 100644
index 00000000..77c97321
--- /dev/null
+++ b/usecaseui-portal/src/assets/images/connectivity.png
diff --git a/usecaseui-portal/src/assets/images/service.png b/usecaseui-portal/src/assets/images/service.png
new file mode 100644
index 00000000..bcb21d35
--- /dev/null
+++ b/usecaseui-portal/src/assets/images/service.png
diff --git a/usecaseui-portal/src/assets/images/vpnbinding.png b/usecaseui-portal/src/assets/images/vpnbinding.png
new file mode 100644
index 00000000..6401677a
--- /dev/null
+++ b/usecaseui-portal/src/assets/images/vpnbinding.png
diff --git a/usecaseui-portal/src/styles.less b/usecaseui-portal/src/styles.less
index bd3a6b79..e3b06d8e 100644
--- a/usecaseui-portal/src/styles.less
+++ b/usecaseui-portal/src/styles.less
@@ -838,6 +838,14 @@ nz-notification-container .ant-notification{
     }
   }
 }
+.back-btn{
+  text-align: right;
+  padding-bottom: 15px;
+}
+.topocontainer{
+  width: 100%;
+}
+
 .taskmodel_list{
   margin-bottom: 20px;
   nz-table{
@@ -859,4 +867,20 @@ nz-notification-container .ant-notification{
   .ant-table-wrapper {
     padding: 10px;
   }
-}
\ No newline at end of file
+}
+.ant-calendar-picker  {
+  width: 100% !important;
+}
+.monitor-table{
+  border-collapse: collapse;
+  width: 100%;
+  border: 1px solid gainsboro;
+}
+
+.monitor-table-td-th {
+  text-align: left;
+  padding: 8px;
+  border-bottom: 1px solid gainsboro;
+  border-right: 1px solid gainsboro;
+}
+.monitor-table tr:nth-child(even) {background-color:#bfbfbf;}
\ No newline at end of file
diff --git a/usecaseui-portal/testBE/FakeBackendInterceptor.ts b/usecaseui-portal/testBE/FakeBackendInterceptor.ts
index dd1c0d20..9fc0868c 100644
--- a/usecaseui-portal/testBE/FakeBackendInterceptor.ts
+++ b/usecaseui-portal/testBE/FakeBackendInterceptor.ts
@@ -90,102 +90,218 @@ export class FakeBackendInterceptor implements HttpInterceptor {
                 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"
-                      }
-                    ]
-                  };
+            // get monitor service data
+            // VPN binding
+            if (request.url.endsWith('/uui-lcm/Sotnservices/resourceTopology/service/service-subscriptions/service-subscription/sotn/service-instances/service-instance/ISAAC-IS02/vpn-informations/vpn-information/vpn-bind-1') && request.method === 'GET') {
+            
+            let body = {
+               "nodes":[
+                  {
+                     "id":"vpn-bind-1",
+                     "shape":"circularImage",
+                     "image":"./assets/images/vpnbinding.png",
+                     "label":"VPN Binding",
+                     "color":"Green",
+                     "dataNode":{
+                        "vpn-name":"sotn-l2-vpn",
+                        "vpn-type":"l2-eth"
+                     }
+                  },
+                  {
+                     "id":"10.10.10.10",
+                     "shape":"circularImage",
+                     "image":"./assets/images/tpoint.png",
+                     "label":"P-interface",
+                     "color":"Green",
+                     "dataNode":{
+                        "interface-name":"10.10.10.10",
+                        "speed-value":"example-speed-value-val-33014",
+                        "speed-units":"example-speed-units-val-75695",
+                        "port-description":"p-interafce-desc"
+                     }
+                  },
+                  {
+                     "id":"22.22.22.22",
+                     "shape":"circularImage",
+                     "image":"./assets/images/tpoint.png",
+                     "label":"P-interface",
+                     "color":"Green",
+                     "dataNode":{
+                        "interface-name":"22.22.22.22",
+                        "speed-value":"example-speed-value-val-33014",
+                        "speed-units":"example-speed-units-val-75695",
+                        "port-description":"p-interafce-desc"
+                     }
+                  }
+               ],
+               "edges":[
+                  {
+                     "from":"vpn-bind-1",
+                     "to":"10.10.10.10"
+                  },
+                  {
+                     "from":"vpn-bind-1",
+                     "to":"22.22.22.22"
+                  }
+               ]
+            }
 
-                return Observable.of(new HttpResponse({ status: 200, body: body }));
+              return Observable.of(new HttpResponse({ status: 200, body: body }));
+
+          }
+
+          // resource topo
+
+          if  (request.url.endsWith('/uui-lcm/Sotnservices/resourceTopology/service/service-subscriptions/service-subscription/sotn/service-instances/service-instance/ISAAC-IS02')&& request.method === 'GET') {
+
+          let body = {
+            "nodes":[
+               {
+                  "id":"NNI-001",
+                  "shape":"circularImage",
+                  "image":"./assets/images/service.png",
+                  "label":"Service",
+                  "color":"Green",
+                  "dataNode":{
+                     "service-instance-id":"NNI-001",
+                     "service-instance-name":"NNI-001",
+                     "service-type":"example-service-type-val-52265",
+                     "service-role":"example-service-role-val-24156"
+                  }
+               },
+               {
+                  "id":"vnf-instance",
+                  "shape":"circularImage",
+                  "image":"./assets/images/VNF.png",
+                  "label":"Vnf",
+                  "color":"Green",
+                  "dataNode":{
+                     "vnf-id":"nni-vnf-1",
+                     "vnf-instance-id":"vnf-instance",
+                     "vnf-name":"SOTN-NNI-Underlay",
+                     "vnf-type":"some-vnf-type",
+                     "is-closed-loop-disabled":false,
+                     "closedLoopDisabled":false
+                  }
+               },
+               {
+                  "id":"eth-conn-1",
+                  "shape":"circularImage",
+                  "image":"./assets/images/connectivity.png",
+                  "label":"Connectivity",
+                  "color":"Green",
+                  "dataNode":{
+                     "connectivity-id":"eth-conn-1",
+                     "operational-status":"Created",
+                     "vpn-type":"L2-eth"
+                  }
+               },
+               {
+                  "id":"uni-1",
+                  "shape":"circularImage",
+                  "image":"./assets/images/edge.png",
+                  "label":"uni-1",
+                  "color":"Green",
+                  "dataNode":{
+                     "id":"uni-1",
+                     "tpId":"p-interface-1",
+                     "operational-status":"Created"
+                  }
+               },
+               {
+                  "id":"10.10.10.10",
+                  "shape":"circularImage",
+                  "image":"./assets/images/tpoint.png",
+                  "label":"P-interface",
+                  "color":"Green",
+                  "dataNode":{
+                     "interface-name":"10.10.10.10",
+                     "speed-value":"example-speed-value-val-33014",
+                     "speed-units":"example-speed-units-val-75695",
+                     "port-description":"p-interafce-desc"
+                  }
+               },
+               {
+                  "id":"uni-2",
+                  "shape":"circularImage",
+                  "image":"./assets/images/edge.png",
+                  "label":"uni-2",
+                  "color":"Green",
+                  "dataNode":{
+                     "id":"uni-2",
+                     "tpId":"p-interface-2",
+                     "operational-status":"Created"
+                  }
+               },
+               {
+                  "id":"22.22.22.22",
+                  "shape":"circularImage",
+                  "image":"./assets/images/tpoint.png",
+                  "label":"P-interface",
+                  "color":"Green",
+                  "dataNode":{
+                     "interface-name":"22.22.22.22",
+                     "speed-value":"example-speed-value-val-33014",
+                     "speed-units":"example-speed-units-val-75695",
+                     "port-description":"p-interafce-desc"
+                  }
+               },
+               {
+                  "id":"vpn-bind-1",
+                  "shape":"circularImage",
+                  "image":"./assets/images/vpnbinding.png",
+                  "label":"VPN Binding",
+                  "color":"Green",
+                  "dataNode":{
+                     "vpn-name":"sotn-l2-vpn",
+                     "vpn-type":"l2-eth"
+                  }
+               }
+            ],
+            "edges":[
+               {
+                  "from":"NNI-001",
+                  "to":"vnf-instance"
+               },
+               {
+                  "from":"vnf-instance",
+                  "to":"eth-conn-1"
+               },
+               {
+                  "from":"vnf-instance",
+                  "to":"uni-1"
+               },
+               {
+                  "from":"uni-1",
+                  "to":"10.10.10.10"
+               },
+               {
+                  "from":"vnf-instance",
+                  "to":"uni-2"
+               },
+               {
+                  "from":"uni-2",
+                  "to":"22.22.22.22"
+               },
+               {
+                  "from":"eth-conn-1",
+                  "to":"vpn-bind-1"
+               },
+               {
+                  "from":"vpn-bind-1",
+                  "to":"10.10.10.10"
+               },
+               {
+                  "from":"vpn-bind-1",
+                  "to":"22.22.22.22"
+               }
+            ]
+         }
+
+            return Observable.of(new HttpResponse({ status: 200, body: body }));
+
+        }
 
-            }
          
             if (request.url.endsWith('/uui-lcm/customers/service-subscriptions') && request.method === 'GET') {
                 let body = {