feat: change the project structure and add mock data function

Change-Id: I381845bff5eb37d1fab3eba8cf1ae7838df523b7
Issue-ID: USECASEUI-307
Signed-off-by: cyuamber <xuranyjy@chinamobile.com>

174 files changed, 3205 insertions, 2299 deletions

diff --git a/usecaseui-portal/src/app/alarm/alarm.component.spec.ts b/usecaseui-portal/src/app/alarm/alarm.component.spec.ts
deleted file mode 100644
index f64bcb83..00000000
--- a/usecaseui-portal/src/app/alarm/alarm.component.spec.ts
+++ /dev/null
@@ -1,66 +0,0 @@
-import { async, ComponentFixture, TestBed, inject, fakeAsync } from '@angular/core/testing';
-import { NO_ERRORS_SCHEMA,CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
-import { NgxEchartsModule } from 'ngx-echarts';
-import { NgZorroAntdModule } from 'ng-zorro-antd';
-import { TranslateModule, TranslateLoader, TranslateService, TranslateFakeLoader} from '@ngx-translate/core';
-import { HttpClientModule } from '@angular/common/http';
-import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing';
-import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { NZ_I18N, en_US } from 'ng-zorro-antd';
-
-import { AlarmComponent } from './alarm.component';
-import { DetailsComponent } from '../components/details/details.component';
-import { LineComponent } from '../components/charts/line/line.component';
-import { HomesService } from '../homes.service';
-
-fdescribe('AlarmComponent', () => {
-  let component: AlarmComponent;
-  let fixture: ComponentFixture<AlarmComponent>;
-
-  beforeEach(async(() => {
-    TestBed.configureTestingModule({
-      declarations: [ AlarmComponent, DetailsComponent, LineComponent ],
-      imports: [ TranslateModule.forRoot({loader: { provide: TranslateLoader, useClass: TranslateFakeLoader }}),        
-        NgZorroAntdModule.forRoot(), 
-        NgxEchartsModule, 
-        HttpClientModule,
-        BrowserAnimationsModule,
-        HttpClientTestingModule ],
-      providers: [ TranslateService, HomesService,
-                   { provide: NZ_I18N, useValue: en_US } ],
-      schemas: [
-        CUSTOM_ELEMENTS_SCHEMA,
-        NO_ERRORS_SCHEMA
-      ]
-    })
-    .compileComponents();
-  }));
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(AlarmComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', inject([HttpTestingController, HomesService], 
-    (httpMock: HttpTestingController, service: HomesService) => {
-    expect(component).toBeTruthy();
-  }));
-
-  it('expects service to fetch data with proper sorting',
-  inject([HttpTestingController, HomesService],
-    (httpMock: HttpTestingController, service: HomesService) => {
-      // We call the service
-      service.getqueryAllSourceNames().subscribe(data => {
-        expect(data.pageInfo.totalRecordCount).toBe(21);
-        expect(data.pageInfo.pageNumber).toBe(0);
-        expect(data.data.length).toBe(7);
-      });
-      // We set the expectations for the HttpClient mock
-      const req = httpMock.expectOne('http://.../data/contacts');
-      expect(req.request.method).toEqual('GET');
-      // Then we set the fake data to be returned by the mock
-      req.flush({data: ...});
-    })
-);
-});
diff --git a/usecaseui-portal/src/app/app-routing.module.ts b/usecaseui-portal/src/app/app-routing.module.ts
index 04a6bc80..f47cf11b 100644
--- a/usecaseui-portal/src/app/app-routing.module.ts
+++ b/usecaseui-portal/src/app/app-routing.module.ts
@@ -13,48 +13,52 @@
     See the License for the specific language governing permissions and
     limitations under the License.
 */
-import { NgModule }             from '@angular/core';
+import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
 
 
-import { HomeComponent }        from './home/home.component';
-import { ManagementComponent }    from './management/management.component';
-import { FcapsComponent }    from './fcaps/fcaps.component';
-import { ServicesComponent }    from './services/services.component';
-import { ServicesListComponent }    from './services/services-list/services-list.component';
-import { OnboardVnfVmComponent } from './services/onboard-vnf-vm/onboard-vnf-vm.component';
-import { AlarmComponent }       from './alarm/alarm.component';
-import { PerformanceComponent } from './performance/performance.component';
-import { PerformanceVnfComponent } from './performance/performance-vnf/performance-vnf.component';
-import { PerformanceVmComponent } from './performance/performance-vm/performance-vm.component';
+import { HomeComponent } from './views/home/home.component';
+import { ManagementComponent } from './views/management/management.component';
+import { FcapsComponent } from './views/fcaps/fcaps.component';
+import { ServicesComponent } from './views/services/services.component';
+import { ServicesListComponent } from './views/services/services-list/services-list.component';
+import { OnboardVnfVmComponent } from './views/services/onboard-vnf-vm/onboard-vnf-vm.component';
+import { AlarmComponent } from './views/alarm/alarm.component';
+import { PerformanceComponent } from './views/performance/performance.component';
+import { PerformanceVnfComponent } from './views/performance/performance-vnf/performance-vnf.component';
+import { PerformanceVmComponent } from './views/performance/performance-vm/performance-vm.component';
 
-import { CcvpnNetworkComponent } from './ccvpn-network/ccvpn-network.component';
+import { CcvpnNetworkComponent } from './views/ccvpn-network/ccvpn-network.component';
+
+
+import { TestComponent } from './test/test.component';
 
 // import { DetailsComponent } from './details/details.component';
 
 const ServicesChildRoutes: Routes = [
-  { path: 'services-list', component: ServicesListComponent},
-  { path: 'onboard-vnf-vm', component: OnboardVnfVmComponent},
+  { path: 'services-list', component: ServicesListComponent },
+  { path: 'onboard-vnf-vm', component: OnboardVnfVmComponent },
   { path: '**', redirectTo: 'services-list' }
 ]
 
 const routes: Routes = [
-  { path: 'home', component: HomeComponent},
-  { path: 'management', component: ManagementComponent},
-  { path: 'fcaps', component: FcapsComponent},
+  { path: 'text', component: TestComponent },
+  { path: 'home', component: HomeComponent },
+  { path: 'management', component: ManagementComponent },
+  { path: 'fcaps', component: FcapsComponent },
   // { path: 'services', component: ServicesComponent, children:ServicesChildRoutes}, //Temporarily not a sub-routing structure
-  { path: 'services/services-list', component: ServicesListComponent},
-  { path: 'services/onboard-vnf-vm', component: OnboardVnfVmComponent},
-  { path: 'alarm', component: AlarmComponent},
-  { path: 'performance', component: PerformanceComponent},
-  { path: 'performance/performance-vnf', component: PerformanceVnfComponent},
-  { path: 'performance/performance-vm', component: PerformanceVmComponent},
+  { path: 'services/services-list', component: ServicesListComponent },
+  { path: 'services/onboard-vnf-vm', component: OnboardVnfVmComponent },
+  { path: 'alarm', component: AlarmComponent },
+  { path: 'performance', component: PerformanceComponent },
+  { path: 'performance/performance-vnf', component: PerformanceVnfComponent },
+  { path: 'performance/performance-vm', component: PerformanceVmComponent },
   { path: 'network', component: CcvpnNetworkComponent },
-  { path: '**', redirectTo: 'home', pathMatch: 'full'}
+  { path: '**', redirectTo: 'home', pathMatch: 'full' }
 ];
 
 @NgModule({
-  imports: [ RouterModule.forRoot(routes) ],
-  exports: [ RouterModule ]
+  imports: [RouterModule.forRoot(routes)],
+  exports: [RouterModule]
 })
-export class AppRoutingModule {}
+export class AppRoutingModule { }
diff --git a/usecaseui-portal/src/app/app.component.css b/usecaseui-portal/src/app/app.component.css
index 1e0f7181..7e91ee2b 100644
--- a/usecaseui-portal/src/app/app.component.css
+++ b/usecaseui-portal/src/app/app.component.css
@@ -25,7 +25,7 @@ nz-layout nz-sider ul li i {
   height: 16px;
 }
 nz-layout nz-sider ul li .icon-services {
-  background: url(../assets/images/icon.png) no-repeat 0px -16px;
+  background: url(assets/images/icon.png) no-repeat 0px -16px;
 }
 nz-layout nz-sider ul li ul li {
   font-size: 12px;
diff --git a/usecaseui-portal/src/app/app.component.html b/usecaseui-portal/src/app/app.component.html
index 2bd60670..a0838c3d 100644
--- a/usecaseui-portal/src/app/app.component.html
+++ b/usecaseui-portal/src/app/app.component.html
@@ -23,7 +23,9 @@
         <a routerLink="home">
           <span title>
             <i>
-              <img src="{{activeMenuBar[0] == true ? 'assets/images/home-icon-active.png':'assets/images/home-icon.png'}}" alt="home">
+              <img
+                src="{{activeMenuBar[0] == true ? 'assets/images/home-icon-active.png':'assets/images/home-icon.png'}}"
+                alt="home">
             </i>
             <span> {{"i18nTextDefine_Home" | translate}} </span>
           </span>
@@ -33,8 +35,10 @@
       <li nz-menu-item [ngClass]="{'activeMenuBar':activeMenuBar[1] == true}" (click)="thisActive(1)">
         <a routerLink="management">
           <span title>
-           <i>
-              <img src="{{activeMenuBar[1] == true ? 'assets/images/customer-icon-active.png':'assets/images/customer-icon.png'}}" alt="home">
+            <i>
+              <img
+                src="{{activeMenuBar[1] == true ? 'assets/images/customer-icon-active.png':'assets/images/customer-icon.png'}}"
+                alt="home">
             </i>
             <span> {{"i18nTextDefine_Customer" | translate}} </span>
           </span>
@@ -45,7 +49,9 @@
         <a href="#" onclick="window.open('http://172.30.1.80:5601/app/kibana#/dashboards')">
           <span title>
             <i>
-              <img src="{{activeMenuBar[2] == true ? 'assets/images/monitor-icon-active.png':'assets/images/monitor-icon.png'}}" alt="home">
+              <img
+                src="{{activeMenuBar[2] == true ? 'assets/images/monitor-icon-active.png':'assets/images/monitor-icon.png'}}"
+                alt="home">
             </i>
             <span> {{"i18nTextDefine_Monitor" | translate}} </span>
           </span>
@@ -53,12 +59,16 @@
       </li>
       <hr>
       <li nz-submenu [ngClass]="{'activeMenuBar':activeMenuBar[3] == true}" (click)="thisActive(3)">
-        <span title>  <i>
-              <img src="{{activeMenuBar[3] == true ? 'assets/images/Services-icon-active.png':'assets/images/Services-icon.png'}}" alt="home">
-            </i> {{"i18nTextDefine_Services" | translate}} </span>
+        <span title> <i>
+            <img
+              src="{{activeMenuBar[3] == true ? 'assets/images/Services-icon-active.png':'assets/images/Services-icon.png'}}"
+              alt="home">
+          </i> {{"i18nTextDefine_Services" | translate}} </span>
         <ul>
-          <li nz-menu-item [ngClass]="{'activeMenuList':activeMenuList[0] == true}" (click)="thisListActive(0)"><a routerLink='services/services-list'> {{"i18nTextDefine_ServicesList" | translate}} </a></li>
-          <li nz-menu-item [ngClass]="{'activeMenuList':activeMenuList[1] == true}" (click)="thisListActive(1)"><a routerLink='services/onboard-vnf-vm'> {{"i18nTextDefine_PackageManagement" | translate}} </a></li>
+          <li nz-menu-item [ngClass]="{'activeMenuList':activeMenuList[0] == true}" (click)="thisListActive(0)"><a
+              routerLink='services/services-list'> {{"i18nTextDefine_ServicesList" | translate}} </a></li>
+          <li nz-menu-item [ngClass]="{'activeMenuList':activeMenuList[1] == true}" (click)="thisListActive(1)"><a
+              routerLink='services/onboard-vnf-vm'> {{"i18nTextDefine_PackageManagement" | translate}} </a></li>
         </ul>
       </li>
       <!-- <hr>
@@ -82,8 +92,10 @@
       <li nz-menu-item [ngClass]="{'activeMenuBar':activeMenuBar[4] == true}" (click)="thisActive(4)">
         <a routerLink="network">
           <span title>
-             <i>
-              <img src="{{activeMenuBar[4] == true ? 'assets/images/network-icon-active.png':'assets/images/network-icon.png'}}" alt="home">
+            <i>
+              <img
+                src="{{activeMenuBar[4] == true ? 'assets/images/network-icon-active.png':'assets/images/network-icon.png'}}"
+                alt="home">
             </i>
             <span> {{"i18nTextDefine_NetworkTopology" | translate}} </span>
           </span>
@@ -92,6 +104,6 @@
     </ul>
   </nz-sider>
   <nz-layout class="main">
-      <router-outlet></router-outlet>
+    <router-outlet></router-outlet>
   </nz-layout>
-</nz-layout>
+</nz-layout>
\ No newline at end of file
diff --git a/usecaseui-portal/src/app/app.component.spec.ts b/usecaseui-portal/src/app/app.component.spec.ts
index 653c52ea..32387b41 100644
--- a/usecaseui-portal/src/app/app.component.spec.ts
+++ b/usecaseui-portal/src/app/app.component.spec.ts
@@ -3,7 +3,7 @@ import { RouterTestingModule } from '@angular/router/testing';
 import { NgZorroAntdModule } from 'ng-zorro-antd';
 import { HttpClientTestingModule } from '@angular/common/http/testing';
 import { TranslateModule, TranslateLoader, TranslateService, TranslateFakeLoader} from '@ngx-translate/core';
-import {HomesService} from "./homes.service";
+import {HomesService} from "./core/services/homes.service";
 
 import { AppComponent } from './app.component';
 
diff --git a/usecaseui-portal/src/app/app.component.ts b/usecaseui-portal/src/app/app.component.ts
index 29555943..d654900c 100644
--- a/usecaseui-portal/src/app/app.component.ts
+++ b/usecaseui-portal/src/app/app.component.ts
@@ -15,8 +15,8 @@
 */
 import {Component} from '@angular/core';
 import {TranslateService} from '@ngx-translate/core';
-import {MyhttpService} from "./myhttp.service";
-import {HomesService} from "./homes.service";
+import {MyhttpService} from "./core/services/myhttp.service";
+import {HomesService} from "./core/services/homes.service";
 
 
 @Component({
diff --git a/usecaseui-portal/src/app/app.module.ts b/usecaseui-portal/src/app/app.module.ts
index 9c69124f..fa4b6bfb 100644
--- a/usecaseui-portal/src/app/app.module.ts
+++ b/usecaseui-portal/src/app/app.module.ts
@@ -24,7 +24,7 @@ import { NZ_I18N, en_US } from 'ng-zorro-antd';
 import { NgxEchartsModule } from 'ngx-echarts';
 
 import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
-import {TranslateHttpLoader} from '@ngx-translate/http-loader';
+import { TranslateHttpLoader } from '@ngx-translate/http-loader';
 export function HttpLoaderFactory(httpClient: HttpClient) {
   return new TranslateHttpLoader(httpClient, './assets/i18n/', '.json');
 }
@@ -34,52 +34,55 @@ import { AppRoutingModule } from './app-routing.module';
 //Registered language pack
 import { registerLocaleData } from '@angular/common';
 import en from '@angular/common/locales/en';
-registerLocaleData(en);  
+registerLocaleData(en);
 
 //Custom component
 import { AppComponent } from './app.component';
-import { HomeComponent } from './home/home.component';
-import { ManagementComponent } from './management/management.component';
-import { ServicesComponent } from './services/services.component';
-import { ServicesListComponent } from './services/services-list/services-list.component';
-import { OnboardVnfVmComponent } from './services/onboard-vnf-vm/onboard-vnf-vm.component';
-import { AlarmComponent } from './alarm/alarm.component';
-import { PerformanceComponent } from './performance/performance.component';
-import { PerformanceVnfComponent } from './performance/performance-vnf/performance-vnf.component';
-import { PerformanceVmComponent } from './performance/performance-vm/performance-vm.component';
-import { CcvpnNetworkComponent } from './ccvpn-network/ccvpn-network.component';
-import { CcvpnDetailComponent } from './ccvpn-detail/ccvpn-detail.component';
-import { CcvpnCreationComponent } from './ccvpn-creation/ccvpn-creation.component';
+import { HomeComponent } from './views/home/home.component';
+import { ManagementComponent } from './views/management/management.component';
+import { ServicesComponent } from './views/services/services.component';
+import { ServicesListComponent } from './views/services/services-list/services-list.component';
+import { OnboardVnfVmComponent } from './views/services/onboard-vnf-vm/onboard-vnf-vm.component';
+import { AlarmComponent } from './views/alarm/alarm.component';
+import { PerformanceComponent } from './views/performance/performance.component';
+import { PerformanceVnfComponent } from './views/performance/performance-vnf/performance-vnf.component';
+import { PerformanceVmComponent } from './views/performance/performance-vm/performance-vm.component';
+import { CcvpnNetworkComponent } from './views/ccvpn-network/ccvpn-network.component';
+import { CcvpnDetailComponent } from './views/ccvpn-detail/ccvpn-detail.component';
+import { CcvpnCreationComponent } from './views/ccvpn-creation/ccvpn-creation.component';
 
-import { DetailsComponent } from './components/details/details.component';
-import { GraphiclistComponent } from './components/graphiclist/graphiclist.component';
-import { E2eCreationComponent } from './components/e2e-creation/e2e-creation.component';
+import { DetailsComponent } from './shared/components/details/details.component';
+import { GraphiclistComponent } from './shared/components/graphiclist/graphiclist.component';
+import { E2eCreationComponent } from './shared/components/e2e-creation/e2e-creation.component';
 
-import { BarComponent } from './components/charts/bar/bar.component';
-import { LineComponent } from './components/charts/line/line.component';
-import { PieComponent } from './components/charts/pie/pie.component';
+import { BarComponent } from './shared/components/charts/bar/bar.component';
+import { LineComponent } from './shared/components/charts/line/line.component';
+import { PieComponent } from './shared/components/charts/pie/pie.component';
 
-import {PathLocationStrategy, LocationStrategy, HashLocationStrategy} from '@angular/common';
+import { PathLocationStrategy, LocationStrategy, HashLocationStrategy } from '@angular/common';
 // Custom service
-import { MyhttpService } from './myhttp.service';
-import { HomesService } from './homes.service';
-import { onboardService } from './onboard.service';
-import { networkHttpservice } from './networkHttpservice.service';
-import { PerformanceDetailsComponent } from './components/performance-details/performance-details.component';
-import { E2eDetailComponent } from './components/e2e-detail/e2e-detail.component';
-import { CustomerComponent } from './components/customer/customer.component';
-import { ManagemencsService } from './managemencs.service';
-import { FcapsComponent } from './fcaps/fcaps.component';
+import { MyhttpService } from './core/services/myhttp.service';
+import { HomesService } from './core/services/homes.service';
+import { onboardService } from './core/services/onboard.service';
+import { networkHttpservice } from './core/services/networkHttpservice.service';
+import { PerformanceDetailsComponent } from './shared/components/performance-details/performance-details.component';
+import { E2eDetailComponent } from './shared/components/e2e-detail/e2e-detail.component';
+import { CustomerComponent } from './shared/components/customer/customer.component';
+import { ManagemencsService } from './core/services/managemencs.service';
+import { FcapsComponent } from './views/fcaps/fcaps.component';
+import { TestComponent } from './test/test.component';
+import { TextService } from './core/services/text.service';
 
 @NgModule({
-  providers   : [ 
+  providers: [
     { provide: LocationStrategy, useClass: HashLocationStrategy },
     { provide: NZ_I18N, useValue: en_US },
     MyhttpService,
     HomesService,
     onboardService,
     networkHttpservice,
-    ManagemencsService 
+    ManagemencsService,
+    TextService
   ],
   declarations: [
     AppComponent,
@@ -90,7 +93,7 @@ import { FcapsComponent } from './fcaps/fcaps.component';
     OnboardVnfVmComponent,
 
     AlarmComponent,
-    
+
     PerformanceComponent,
     PerformanceVnfComponent,
     PerformanceVmComponent,
@@ -105,9 +108,10 @@ import { FcapsComponent } from './fcaps/fcaps.component';
     CcvpnDetailComponent,
     CcvpnCreationComponent,
     E2eDetailComponent,
-    CustomerComponent ,
+    CustomerComponent,
     PerformanceDetailsComponent,
-    FcapsComponent   
+    FcapsComponent,
+    TestComponent
   ],
   imports: [
     BrowserModule,
@@ -125,6 +129,6 @@ import { FcapsComponent } from './fcaps/fcaps.component';
     NgxEchartsModule,
     AppRoutingModule
   ],
-  bootstrap: [ AppComponent ]
+  bootstrap: [AppComponent]
 })
 export class AppModule { }
\ No newline at end of file
diff --git a/usecaseui-portal/src/app/ccvpn-creation/ccvpn-creation.component.html b/usecaseui-portal/src/app/ccvpn-creation/ccvpn-creation.component.html
deleted file mode 100644
index 1645325c..00000000
--- a/usecaseui-portal/src/app/ccvpn-creation/ccvpn-creation.component.html
+++ /dev/null
@@ -1,272 +0,0 @@
-<!--
-    Copyright (C) 2019 CMCC, Inc. and others. 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.
--->
-<div class="model creation-model">
-    
-    <div class="top-title">
-        <h3 class="title fl">{{createParams.commonParams.templateType}}  {{"i18nTextDefine_InstanceCreation" | translate}} </h3>
-        <div class="fl" style="width: 20%">
-            <button class="submit" nz-button (click)="submit()"><span> {{"i18nTextDefine_Create" | translate}} </span>
-            </button>
-            <button class="back" nz-button (click)="goback()"></button>
-        </div>
-    </div>
-    <!-- chart -->
-    <div class="chart">
-       <span style="padding: 25px;display: inline-block;">
-            {{"i18nTextDefine_InstanceTopology" | translate}}
-       </span>
-        <div id="createChart">
-            <svg width="100%" height="100%">
-                <image id="domain" xlink:href="assets/images/domain1.png" style="width: 15%"
-                       x="40%" y="0"/>
-            </svg>
-        </div>
-    </div>
-    <!--Template resolution : Three major items-->
-    <div class="creation">
-        <nz-tabset [nzTabPosition]="'top'" [nzShowPagination]=false [nzTabBarGutter]="'2'" [nzTabBarStyle]=tabBarStyle>
-            <nz-tab nzTitle="Service Info">
-                <div class="service-title" style="clear: both">
-                    <span style="color: red;">*</span><span class="lable" style="width: 60px">name:</span>
-                    <input nz-input [(ngModel)]="this.templateParameters.service['name']" required="required">
-                    <span style="color: red;">*</span><span class="lable">description:</span>
-                    <input nz-input [(ngModel)]="this.templateParameters.service['description']">
-                </div>
-            </nz-tab>
-            <nz-tab nzTitle="Sdwanvpnresource List">
-                <div class="sotnvpn clearfix">
-                    <div style="clear: both;height: 10px">
-                        <h3 style="float: left;color: #3C4F8C">sdwanVPN List</h3>
-                        <button nz-button (click)="addSotnvpn()" class="addListBtn"
-                                style="float: right;margin-right: 10px"><i class="anticon anticon-plus"
-                                                                           style="transform: scale(1.2);font-weight: 700"></i> {{"i18nTextDefine_Add" | translate}}
-                        </button>
-                    </div>
-                    <nz-table #sotnVpnTable [nzData]="sotnVpnTableData"
-                              [nzShowPagination]="false"
-                              nzSize="small">
-                        <thead>
-                        <tr>
-                            <th width="30%"> NO.</th>
-                            <th *ngFor="let key of getKeys(this.sotnInfo)">{{key.split("_")[1] || key}}</th>
-                            <th width="10%"> Action</th>
-                        </tr>
-                        </thead>
-                        <tbody>
-                        <tr *ngFor="let item of sotnVpnTable.data; let i = index; ">
-                            <td>{{i+1}}</td>
-                            <td *ngFor="let keys of getKeys(this.sotnInfo);let a = index;">
-                                {{item[keys]}}
-                            </td>
-                            <td>
-                                <span class="action" (click)="editSotnVpn(i+1)"><i class="anticon anticon-edit"></i></span>
-                                &nbsp;
-                                <span class="action" (click)="deleteSotnVpn(i+1)"><i
-                                        class="anticon anticon-delete"></i></span>
-                            </td>
-                        </tr>
-                        </tbody>
-                    </nz-table>
-                </div>
-            </nz-tab>
-            <nz-tab nzTitle="Sdwansiteresource List">
-                <div class="site">
-                    <div style="height: 10px">
-                        <h3 style="float: left;color: #3C4F8C">Site List</h3>
-                        <button nz-button (click)="addSite()" class="addListBtn"
-                                style="float: right;margin-right: 10px"><i class="anticon anticon-plus"
-                                                                           style="transform: scale(1.2);font-weight: 700"></i>{{"i18nTextDefine_Add" | translate}}
-                        </button>
-                    </div>
-                    <nz-table #siteTable [nzData]="siteTableData"
-                              [nzShowPagination]="false"
-                              nzSize="small">
-                        <thead>
-                        <tr>
-                            <th nzWidth="10%"> NO.</th>
-                            <th *ngFor="let key of getKeys(this.siteBaseData)">{{key.split("_")[1] || key}}</th>
-                            <th nzWidth="20%" style="text-align: center"> Action</th>
-                        </tr>
-                        </thead>
-                        <tbody>
-                        <tr *ngFor="let item of siteTable.data; let i = index; ">
-                            <td>{{i+1}}</td>
-                            <td *ngFor="let keys of getKeys(this.siteBaseData);let a = index;">
-                                {{item[keys]}}
-                            </td>
-                            <td style="text-align: center">
-                                <span class="action" (click)="editSite(i+1)"><i class="anticon anticon-edit"></i></span>
-                                &nbsp;
-                                <span class="action" (click)="deleteSite(i+1)"><i
-                                        class="anticon anticon-delete"></i></span>
-                            </td>
-                        </tr>
-                        </tbody>
-                    </nz-table>
-                </div>
-            </nz-tab>
-        </nz-tabset>
-    </div>
-    <!-- sotnVpnmodel -->
-    <div class="sotnnpnmodel" *ngIf="sotnVpnModelShow">
-        <h3> {{"i18nTextDefine_Base" | translate}} </h3>
-        <div class="inputs">
-            <ul>
-                <li *ngFor="let item of this.templateParameters.sotnvpn.sdwanvpnresource_list">
-                    <span *ngIf="item.required" style="color: red;margin: 0;margin-right: -5px;">*</span><span>{{item.lableShow}}:</span>
-                    <input nz-input [(ngModel)]="sotnInfo[item.lable]" title="{{item.description ? item.description:null }}"
-                           required="{{item.required==true ? 'required':null}}"></li>
-            </ul>
-        </div>
-        <div>
-            <h3>Sdwansitelan List</h3>
-            <div>
-                <div style="width: 100%;text-align: right">
-                    <button nz-button (click)="addSotnSdwansitelan()" class="addListBtn"><i class="anticon anticon-plus"
-                                                                                   style="transform: scale(1.2);font-weight: 700;"></i>{{"i18nTextDefine_Add" | translate}}
-                    </button>
-                </div>
-                <table class="siteWanTab">
-                    <thead>
-                    <tr>
-                        <th width="4%"> NO.</th>
-                        <th *ngFor="let key of getKeys(this.sotnSdwansitelanParams)">{{key}}</th>
-                        <th width="7%"> Action</th>
-                    </tr>
-                    </thead>
-                    <tbody>
-                    <tr *ngFor="let item of sotnSdwansitelanData; let i = index;"
-                        [ngClass]="{'tr-border':item.tabInputShowSdwansitelan ==false}">
-                        <td>{{i+1}}</td>
-                        <td *ngFor="let key of getKeys(item);let a = index;">
-                            <span *ngIf="!tabInputShowSdwansitelan[i]"
-                                  title="{{this.templateParameters.sotnvpn.sdwansitelan_list[a]['lable']==getKeys(item)[a] ? this.templateParameters.site.sdwansitewan_list[a].description:null}}">{{item[key]}}</span>
-                            <input nz-input [(ngModel)]="item[key]" *ngIf="tabInputShowSdwansitelan[i] "
-                                   title="{{this.templateParameters.sotnvpn.sdwansitelan_list[a]['lable']==getKeys(item)[a] ? this.templateParameters.site.sdwansitewan_list[a].description:null}}"
-                                   required="{{item.required==true ? 'required':null}}">
-                        </td>
-                        <td>
-                            <span class="action" (click)="editSotnSdwansitelan(i+1,item,sotnSdwansitelanData)"><i
-                                    class="anticon anticon-edit" style="margin: 0 5px;"></i></span>
-                            <span class="action" (click)="deleteSotnSdwansitelan(i+1,item,sotnSdwansitelanData)"><i
-                                    class="anticon anticon-delete"></i></span>
-                        </td>
-                    </tr>
-                    </tbody>
-                </table>
-            </div>
-        </div>
-
-        <div class="action">
-            <button nz-button nzType="primary" (click)="addSotnVpn_cancel()">{{"i18nTextDefine_Cancel" | translate}}</button>
-            <button nz-button nzType="primary" (click)="addSotnVpn_OK()">{{"i18nTextDefine_Add" | translate}}</button>
-        </div>
-    </div>
-    <!-- sitemodel -->
-    <div class="sitemodel" *ngIf="siteModelShow">
-        <h3> {{"i18nTextDefine_Base" | translate}} </h3>
-        <div class="inputs">
-            <ul>
-                <li *ngFor="let item of this.templateParameters.site.sdwansiteresource_list">
-                    <span *ngIf="item.required" style="color: red;margin: 0;margin-right: -5px;">*</span><span>{{item.lableShow}}:</span>
-                    <input nz-input [(ngModel)]="siteBaseData[item.lable]" title="{{item.description}}"
-                           required="{{item.required==true ? 'required':null}}"></li>
-            </ul>
-        </div>
-        <div>
-            <h3>Sdwandevice</h3>
-            <div>
-                <div style="width: 100%;text-align: right">
-                    <button nz-button (click)="addSdwanDevice()" class="addListBtn"><i class="anticon anticon-plus"
-                                                                                   style="transform: scale(1.2);font-weight: 700;"></i>{{"i18nTextDefine_Add" | translate}}
-                    </button>
-                </div>
-                <table class="siteWanTab">
-                    <thead>
-                    <tr>
-                        <th width="4%"> NO.</th>
-                        <th *ngFor="let key of getKeys(this.siteCpeData)">{{key}}</th>
-                        <th width="7%"> Action</th>
-                    </tr>
-                    </thead>
-                    <tbody>                    
-                    <tr *ngFor="let item of siteSdwanDevice; let i = index;"
-                        [ngClass]="{'tr-border':item.tabInputShowDevice ==false}">
-                        <td>{{i+1}}</td>
-                        <td *ngFor="let key of getKeys(item);let a = index;">
-                            <span *ngIf="!tabInputShowDevice[i]"
-                                  title="{{this.templateParameters.site.sdwandevice_list[a]['lable']==getKeys(item)[a] ? this.templateParameters.site.sdwandevice_list[a].description:null}}">{{item[key]}}</span>
-                            <input nz-input [(ngModel)]="item[key]" *ngIf="tabInputShowDevice[i] "
-                                   title="{{this.templateParameters.site.sdwandevice_list[a]['lable']==getKeys(item)[a] ? this.templateParameters.site.sdwandevice_list[a].description:null}}"
-                                   required="{{item.required==true ? 'required':null}}">
-                        </td>
-                        <td>
-                            <span class="action" (click)="editDevicePort(i+1,item,siteSdwanDevice)"><i
-                                    class="anticon anticon-edit" style="margin: 0 5px;"></i></span>
-                            <span class="action" (click)="deleteDevicePort(i+1,item,siteSdwanDevice)"><i
-                                    class="anticon anticon-delete"></i></span>
-                        </td>
-                    </tr>
-                    </tbody>
-                </table>
-            </div>
-
-
-            <h3>Sdwansitewan List</h3>
-            <div>
-                <div style="width: 100%;text-align: right">
-                    <button nz-button (click)="addSiteWan()" class="addListBtn"><i class="anticon anticon-plus"
-                                                                                   style="transform: scale(1.2);font-weight: 700;"></i>{{"i18nTextDefine_Add" | translate}}
-                    </button>
-                </div>
-                <table class="siteWanTab">
-                    <thead>
-                    <tr>
-                        <th width="4%"> NO.</th>
-                        <th *ngFor="let key of getKeys(this.siteWanParams)">{{key}}</th>
-                        <th width="7%"> Action</th>
-                    </tr>
-                    </thead>
-                    <tbody>
-                    <tr *ngFor="let item of siteWanData; let i = index;"
-                        [ngClass]="{'tr-border':item.tabInputShowWanPort ==false}">
-                        <td>{{i+1}}</td>
-                        <td *ngFor="let key of getKeys(item);let a = index;">
-                            <span *ngIf="!tabInputShowWanPort[i]"
-                                  title="{{this.templateParameters.site.sdwansitewan_list[a]['lable']==getKeys(item)[a] ? this.templateParameters.site.sdwansitewan_list[a].description:null}}">{{item[key]}}</span>
-                            <input nz-input [(ngModel)]="item[key]" *ngIf="tabInputShowWanPort[i] "
-                                   title="{{this.templateParameters.site.sdwansitewan_list[a]['lable']==getKeys(item)[a] ? this.templateParameters.site.sdwansitewan_list[a].description:null}}"
-                                   required="{{item.required==true ? 'required':null}}">
-                        </td>
-                        <td>
-                            <span class="action" (click)="editWanPort(i+1,item,siteWanData)"><i
-                                    class="anticon anticon-edit" style="margin: 0 5px;"></i></span>
-                            <span class="action" (click)="deleteWanPort(i+1,item,siteWanData)"><i
-                                    class="anticon anticon-delete"></i></span>
-                        </td>
-                    </tr>
-                    </tbody>
-                </table>
-            </div>
-        </div>
-
-        <div class="action">
-            <button nz-button nzType="primary" (click)="addsite_cancel()">{{"i18nTextDefine_Cancel" | translate}}</button>
-            <button nz-button nzType="primary" (click)="addsite_OK()">{{"i18nTextDefine_Add" | translate}}</button>
-        </div>
-    </div>
-    <div class="mask" *ngIf="siteModelShow || sotnVpnModelShow"></div>
-</div>
diff --git a/usecaseui-portal/src/app/components/e2e-creation/e2e-creation.component.ts b/usecaseui-portal/src/app/components/e2e-creation/e2e-creation.component.ts
deleted file mode 100644
index 5446dc5f..00000000
--- a/usecaseui-portal/src/app/components/e2e-creation/e2e-creation.component.ts
+++ /dev/null
@@ -1,354 +0,0 @@
-/*
-    Copyright (C) 2019 CMCC, Inc. and others. 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.
-*/
-import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
-import { MyhttpService } from '../../myhttp.service';
-import * as d3 from 'd3';
-
-@Component({
-  selector: 'app-e2e-creation',
-  templateUrl: './e2e-creation.component.html',
-  styleUrls: ['./e2e-creation.component.less']
-})
-export class E2eCreationComponent implements OnInit {
-
-  constructor( private myhttp:MyhttpService ) { }
-
-  ngOnInit() {
-        this.gete2eTemParameters(this.e2e_ns_temParametersContent);
-    this.getVimInfo();
-    this.getSdnControllers();
-  }
-
-  @Output() e2eCloseCreate = new EventEmitter();
-  @Output() nsCloseCreate = new EventEmitter();
-  @Input() createParams;
-    @Input() e2e_ns_temParametersContent;
-
-
-  // e2e serviceTemplateParameters
-  templateParameters = {
-    invariantUUID: "",
-    uuid: "",
-    name: "",
-    type: "",
-    version: "",
-    description: "",
-    category: "",
-    subcategory: "",
-    customizationUuid: "",
-    inputs:[],
-    nestedTemplates:[]
-  };
-  // ns serviceTemplateParameters
-  nsTemplateParameters = {
-    inputs:{},
-    inputs2:[],
-    vnfs:[]
-  };
-    roote2e = {
-        "name": "e2e",
-        "type": "e2e",
-        "children": []
-    };
-
-    rootns = {
-        "name": "ns",
-        "type": "ns",
-        "children": []
-    };
-
-    imgmap = {
-        '1': './assets/images/create-e2e.png',
-        '2': './assets/images/create-ns.png',
-        '3': './assets/images/create-vnf.png',
-    };
-    gete2eTemParameters(data) { //Get template parameters
-    let type = this.createParams.commonParams.templateType == "E2E Service" ? "e2e" : "ns";
-        console.log(this.createParams);
-        console.log(data);
-      if(type == "e2e"){
-        this.templateParameters = data;
-        this.templateParameters.nestedTemplates.forEach((item)=>{
-          item.inputs = item.inputs.filter((input)=>{return input.type !== "sdn_controller"});
-        });
-                    this.templateParameters.nestedTemplates.map((item,index) => {
-                        let nsIndex={
-                            "name": "ns",
-                            "type": "ns",
-                            "children": []
-                        };
-                        nsIndex.children=item.nestedTemplates.map((item,index) => {
-                            return {
-                                "name": "vnf",
-                                "type": "vnf",
-                            }
-                        });
-                        this.roote2e.children.push(nsIndex);
-                    });
-                    console.log(this.templateParameters);
-      }else if(type == "ns"){
-        if(data["model"]!=undefined && typeof data["model"]=='string'){
-          this.nsTemplateParameters = JSON.parse(data["model"]);
-        }else{
-          this.nsTemplateParameters = data;
-        }
-        this.nsTemplateParameters["inputs2"] = [];
-        let inputs = this.nsTemplateParameters.inputs;
-        for(let key in inputs){
-          this.nsTemplateParameters["inputs2"].push({name:key,type:inputs[key].type,value:inputs[key].value})
-        }
-   	this.rootns.children=this.nsTemplateParameters.vnfs.map((item,index) => {
-                            return {
-                                "name": "vnf",
-                                "type": "vnf",
-                            }
-                        });
-        console.log(this.nsTemplateParameters);
-      }
-
-      this.drawImage(type)
-
-  }
-  vimInfos=[];
-  getVimInfo() {
-    this.myhttp.getVimInfo()
-    .subscribe((data)=>{
-      this.vimInfos = data.map((item)=>{return {name:item['cloud-owner'],id:item['cloud-region-id']}});
-    })
-  };
-  sdnControllers=[];
-  getSdnControllers(){
-    this.myhttp.getSdnControllers()
-    .subscribe((data)=>{
-      this.sdnControllers = data.map((item)=>{return {name:item['thirdparty-sdnc-id'],id:item['thirdparty-sdnc-id']}});
-    })
-  }
-
-  // e2e requstbody
-  service = {
-    name: "",
-    description: "",
-    COS:"",
-    EBS:"",
-    serviceInvariantUuid: "",
-    serviceUuid: "", // uuid ??
-    globalSubscriberId: "",   // "customer.id",
-    serviceType: "",    // "serviceType.value",
-    parameters: {
-      locationConstraints:[
-
-      ],
-      resources: [],
-      requestInputs: {},
-    }
-
-  }
-
-  // ns requstbody
-  ns_service = {
-    csarId: "",
-    nsName: "",
-    description: "",
-    context: {
-      globalCustomerId: "",
-      serviceType: ""
-    }
-  };
-  ns_service2 = {
-    locationConstraints: [
-
-    ],
-    additionalParamForNs: {
-    }
-  };
-  submit(){
-    let type = this.createParams.commonParams.templateType == "E2E Service" ? "e2e" : "ns";
-    if(type == "e2e"){
-      this.service.serviceInvariantUuid = this.templateParameters.invariantUUID;
-      this.service.serviceUuid = this.templateParameters.uuid;
-      this.service.globalSubscriberId = this.createParams.commonParams.customer.id;
-      this.service.serviceType = this.createParams.commonParams.serviceType.name;
-  
-      this.templateParameters.inputs.forEach((ipnut)=>{
-        this.service.parameters.requestInputs[ipnut.name] = ipnut.value == undefined ? ipnut.defaultValue : ipnut.value; 
-      });
-  
-      this.templateParameters.nestedTemplates.forEach((item)=>{
-        let nsService = {
-          resourceName: item.name,
-          resourceInvariantUuid: item.invariantUUID,
-          resourceUuid: item.uuid,
-          resourceCustomizationUuid: item.customizationUuid,
-          parameters: {
-            locationConstraints:[],
-            resources:[],
-            requestInputs:{}
-          }
-        };
-        item.inputs.forEach((input)=>{
-          if(input.type == "vf_location"){
-            let location = {
-              vnfProfileId: input.name,
-              locationConstraints:{
-                                cloudOwner: input.value.name,
-                                cloudRegionId:input.value.id
-              }
-            };
-            nsService.parameters.locationConstraints.push(location);
-          }else{
-            nsService.parameters.requestInputs[input.name] = input.value == undefined ? input.defaultValue : input.value;
-          }
-        })
-        this.service.parameters.resources.push(nsService);
-      })
-	    console.log(this.service);
-      this.service.parameters.requestInputs['orchestrator'] = this.createParams.orchestrator.name;
-      if(this.createParams.isSol005Interface){
-          this.service.parameters.requestInputs['isSol005Interface'] = this.createParams.isSol005Interface;
-      }
-      this.e2eCloseCreate.emit({service:this.service}); 
-
-    }else if(type == "ns"){
-      //create ns instance
-      this.ns_service.csarId = this.createParams.template.id;
-      this.ns_service.context.globalCustomerId = this.createParams.commonParams.customer.id;
-      this.ns_service.context.serviceType = this.createParams.commonParams.serviceType.name;
-
-      this.nsTemplateParameters.inputs2.forEach((input)=>{
-        this.ns_service2.additionalParamForNs[input.name] = input.value == undefined ? input.defaultValue : input.value; 
-      })
-      this.nsTemplateParameters.vnfs.forEach((vnf)=>{
-        let vnfparams = {
-          vnfProfileId: vnf.properties.id,
-          locationConstraints: {
-                        cloudOwner: vnf.value.name,
-                        cloudRegionId:vnf.value.id
-          }
-        }
-        this.ns_service2.locationConstraints.push(vnfparams);
-      });
-      console.log(this.ns_service2);
-
-      let requstbody = {
-        step1:this.ns_service,
-        step2:this.ns_service2
-      };
-      this.nsCloseCreate.emit(requstbody); 
-    }
-
-  }
-  goback(){
-    this.e2eCloseCreate.emit(); 
-  }
-
-    
-
-    drawImage(type) {
-        if (type == "e2e") {
-            this.render(this.roote2e, this.imgmap)
-        } else if (type == "ns") {
-            this.render(this.rootns, this.imgmap)
-        }
-
-
-    }
-
-    // e2e or NS draw d3 topo
-    render(data, imgmap) {
-        let width = document.getElementById("createChart").clientWidth,
-            height = document.getElementById("createChart").clientHeight;
-        let cluster = d3.layout.tree()
-            .size([width, height]);
-        let diagonal = d3.svg.diagonal()
-            .projection(function (d) {
-                return [d.x-18, d.y+40];
-            });
-        let svg = d3.select("svg");
-
-        //marker
-        let marker =
-            svg.append("marker")
-                .attr("id", "resolved")
-                .attr("markerUnits", "strokeWidth")
-                .attr("markerUnits", "userSpaceOnUse")
-                .attr("viewBox", "0 -5 10 10")
-                .attr("refX", 22)
-                .attr("refY", 0)
-                .attr("markerWidth", 20)
-                .attr("markerHeight", 20)
-                .attr("orient", "auto")
-                .attr("stroke-width", 1)
-                .append("circle")
-                .attr("cx", 5)
-                .attr("cy", 0)
-                .attr("r", 2)
-                .attr("stroke-width", 1)
-                .style("stroke", "#2F8BF7")
-                .attr('fill', 'white');
-        let i = 0;
-        let nodes = cluster.nodes(data).reverse();
-        nodes.forEach(function (d) {
-            d.y = d.depth * 200+100;
-
-        });
-
-        let links = cluster.links(nodes);
-
-        let linkEnter = svg.selectAll("path.link")
-            .data(links);
-
-        linkEnter.enter().append("path")
-            .attr("class", "link")
-            .attr("d", diagonal)
-            .style("stroke", "#2F8BF7")
-            .style('stroke-width', '1px')
-            .attr("marker-end", "url(#resolved)")
-            .style("fill", "none")
-            // .style("fill-opacity", 1)
-            .attr("id", function (d, i) {
-                return "mypath" + i;
-            });
-
-        let node = svg.selectAll(".node")
-            .data(nodes)
-            .enter()
-            .append("g")
-            .attr("class", "node")
-            .attr("transform", function (d) {
-                return "translate(" + (d.x + -50) + "," + (d.y) + ")";
-            });
-
-        node.append('image')
-            .attr('xlink:href', function (d) {
-                if(d.type=="e2e"){
-                    return imgmap[1];
-                }else if(d.type=="ns"){
-                    return imgmap[2];
-                }else if(d.type=="vnf"){
-                    return imgmap[3];
-                }
-
-            })
-            .style('width', '12%')
-            .style("cursor","pointer")
-            .attr("x", 0)
-            .attr("y", 0)
-            .attr("rx", 3);
-
-
-    }
-
-}
diff --git a/usecaseui-portal/src/app/components/e2e-detail/e2e-detail.component.ts b/usecaseui-portal/src/app/components/e2e-detail/e2e-detail.component.ts
deleted file mode 100644
index 5affeb97..00000000
--- a/usecaseui-portal/src/app/components/e2e-detail/e2e-detail.component.ts
+++ /dev/null
@@ -1,243 +0,0 @@
-/*
-    Copyright (C) 2019 CMCC, Inc. and others. 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.
-*/
-
-import {Component, OnInit, Input, Output, EventEmitter} from '@angular/core';
-import {MyhttpService} from '../../myhttp.service';
-import * as d3 from 'd3';
-
-@Component({
-  selector: 'app-e2e-detail',
-  templateUrl: './e2e-detail.component.html',
-  styleUrls: ['./e2e-detail.component.less']
-})
-export class E2eDetailComponent implements OnInit {
-
-  constructor(private myhttp: MyhttpService) {
-  }
-
-    ngOnInit() {
-        this.dataInit();
-    }
-
-    @Input() detailParams;
-
-    @Output() closeDetail = new EventEmitter();
-    serviceInstanceName: any;
-    serviceType: any;
-    input_parameters: any;
-
-    // e2e
-    service = {
-        name: "",
-        description: "",
-    };
-    e2e_nestedTemplates = [];
-    e2e_requestInputs: any;
-
-    ns_service = {
-        name:"",
-        description:""
-    };
-    ns_nestedTemplates = [];
-    ns_requestInputs = {};
-    roote2e = {
-        "name": "e2e",
-        "type": "e2e",
-        "children": []
-    };
-
-    rootns = {
-        "name": "ns",
-        "type": "ns",
-        "children": []
-    };
-
-    imgmap = {
-        '1': './assets/images/create-e2e.png',
-        '2': './assets/images/create-ns.png',
-        '3': './assets/images/create-vnf.png',
-    };
-
-    getKeys(item) {
-        return Object.keys(item);
-    }
-
-    dataInit() {
-        console.log(this.detailParams);
-        this.serviceInstanceName = this.detailParams['service-instance-name'] || this.detailParams["nsName"];
-        if (this.detailParams.serviceDomain == 'E2E Service'){
-            this.input_parameters = JSON.stringify(this.detailParams['input-parameters']);
-            this.input_parameters = JSON.parse(this.input_parameters);
-            console.log(this.input_parameters);
-            this.service = {
-                name:this.input_parameters.service.name,
-                description: this.input_parameters.service.description,
-            };
-            if(this.input_parameters.service.parameters.requestInputs!=undefined && Object.keys(this.input_parameters.service.parameters.requestInputs).length>0){
-              this.e2e_requestInputs = this.input_parameters.service.parameters.requestInputs;
-            }
-            if(this.input_parameters.service.parameters.resources!=undefined && this.input_parameters.service.parameters.resources.length>0){
-                this.input_parameters.service.parameters.resources.map((item,i) => {
-                    let nestedTemplates={
-                        name:null,
-                        vnfs:[]
-                    };
-                    nestedTemplates.name= item.resourceName;
-                    item.parameters.locationConstraints.map((its,k) => {
-                        nestedTemplates.vnfs.push({
-                            "vf_location":its.locationConstraints.cloudOwner
-                        })
-                    });
-                    this.e2e_nestedTemplates.push(nestedTemplates);
-
-                    let nsIndex={
-                        "name": "ns",
-                        "type": "ns",
-                        "children": []
-                    };
-                    nsIndex.children=item.parameters.locationConstraints.map((itemits,index) => {
-                        return {
-                            "name": "vnf",
-                            "type": "vnf",
-                        }
-                    });
-                    this.roote2e.children.push(nsIndex);
-                });
-                console.log(this.e2e_nestedTemplates);
-                console.log(this.e2e_requestInputs);
-            }
-        }else if(this.detailParams.serviceDomain == 'Network Service'){
-            this.ns_service = {
-                name:this.detailParams.name || this.detailParams['service-instance-name'],
-                description: this.detailParams.description || null
-            };
-            if(this.detailParams.requestInputs!=undefined && Object.keys(this.detailParams.requestInputs).length>0){
-                this.ns_requestInputs = this.detailParams.requestInputs;
-            }
-            this.ns_nestedTemplates = this.detailParams.childServiceInstances;
-            this.rootns.children=this.ns_nestedTemplates.map((item,index) => {
-                return {
-                    "name": "vnf",
-                    "type": "vnf"
-                }
-            });
-            console.log(this.ns_nestedTemplates);
-            console.log(this.ns_requestInputs);
-        }
-        this.drawImage(this.detailParams.serviceDomain)
-    }
-
-    goback() {
-        this.closeDetail.emit();
-    }
-
-  drawImage(type) {
-    if (type == "E2E Service") {
-      this.render(this.roote2e, this.imgmap)
-    } else if (type == "Network Service") {
-      this.render(this.rootns, this.imgmap)
-    }
-
-
-  }
-
-  // draw d3 charts
-  render(data, imgmap) {
-    let width = document.getElementById("createChart").clientWidth,
-      height = document.getElementById("createChart").clientHeight;
-    let cluster = d3.layout.tree()
-      .size([width, height]);
-    let diagonal = d3.svg.diagonal()
-      .projection(function (d) {
-        return [d.x-18, d.y+40];
-      });
-    let svg = d3.select("svg");
-
-    //marker
-    let marker =
-      svg.append("marker")
-        .attr("id", "resolved")
-        .attr("markerUnits", "strokeWidth")
-        .attr("markerUnits", "userSpaceOnUse")
-        .attr("viewBox", "0 -5 10 10")
-        .attr("refX", 22)
-        .attr("refY", 0)
-        .attr("markerWidth", 20)
-        .attr("markerHeight", 20)
-        .attr("orient", "auto")
-        .attr("stroke-width", 1)
-        .append("circle")
-        .attr("cx", 5)
-        .attr("cy", 0)
-        .attr("r", 2)
-        .attr("stroke-width", 1)
-        .style("stroke", "#2F8BF7")
-        .attr('fill', 'white');
-    let i = 0;
-    let nodes = cluster.nodes(data).reverse();
-    nodes.forEach(function (d) {
-      d.y = d.depth * 200+100;
-
-    });
-
-    let links = cluster.links(nodes);
-
-    let linkEnter = svg.selectAll("path.link")
-      .data(links);
-
-    linkEnter.enter().append("path")
-      .attr("class", "link")
-      .attr("d", diagonal)
-      .style("stroke", "#2F8BF7")
-      .style('stroke-width', '1px')
-      .attr("marker-end", "url(#resolved)")
-      .style("fill", "none")
-      // .style("fill-opacity", 1)
-      .attr("id", function (d, i) {
-        return "mypath" + i;
-      });
-
-    let node = svg.selectAll(".node")
-      .data(nodes)
-      .enter()
-      .append("g")
-      .attr("class", "node")
-      .attr("transform", function (d) {
-        return "translate(" + (d.x + -50) + "," + (d.y) + ")";
-      });
-
-    node.append('image')
-      .attr('xlink:href', function (d) {
-        if(d.type=="e2e"){
-          return imgmap[1];
-        }else if(d.type=="ns"){
-          return imgmap[2];
-        }else if(d.type=="vnf"){
-          return imgmap[3];
-        }
-
-      })
-      .style('width', '12%')
-      .style("cursor","pointer")
-      .attr("x", 0)
-      .attr("y", 0)
-      .attr("rx", 3);
-
-
-  }
-
-
-}
diff --git a/usecaseui-portal/src/app/dataInterface.ts b/usecaseui-portal/src/app/core/models/dataInterface.ts
index e092bd03..e092bd03 100644
--- a/usecaseui-portal/src/app/dataInterface.ts
+++ b/usecaseui-portal/src/app/core/models/dataInterface.ts
diff --git a/usecaseui-portal/src/app/homes.service.spec.ts b/usecaseui-portal/src/app/core/services/homes.service.spec.ts
index 9c03dcb2..9c03dcb2 100644
--- a/usecaseui-portal/src/app/homes.service.spec.ts
+++ b/usecaseui-portal/src/app/core/services/homes.service.spec.ts
diff --git a/usecaseui-portal/src/app/homes.service.ts b/usecaseui-portal/src/app/core/services/homes.service.ts
index b9b9d5bf..8d3f4684 100644
--- a/usecaseui-portal/src/app/homes.service.ts
+++ b/usecaseui-portal/src/app/core/services/homes.service.ts
@@ -16,7 +16,7 @@
 import { Injectable } from '@angular/core';
 import { HttpClient, HttpHeaders, HttpParams, HttpResponse } from '@angular/common/http';
 import { Observable } from 'rxjs/Observable';
-import { homeData, homeVmLineData, servicesSelectData, servicesTableData, creatensData, onboardTableData, onboardDataVNF, onboardDataPNF , baseUrl} from './dataInterface';
+import { homeData, homeVmLineData, servicesSelectData, servicesTableData, creatensData, onboardTableData, onboardDataVNF, onboardDataPNF, baseUrl } from '../models/dataInterface';
 
 @Injectable()
 export class HomesService {
@@ -29,18 +29,17 @@ export class HomesService {
     home_performanceData: this.baseUrl + "/performance/queryAllSourceNames",
     home_alarmData: this.baseUrl + "/alarm/statusCount",
     home_alarmChartData: this.baseUrl + "/alarm/diagram",
-    home_servicebarData:this.baseUrl + "",
+    home_servicebarData: this.baseUrl + "",
     home_servicebarnsData: this.baseUrlbar + "ns-packages",
     home_servicebarvnfData: this.baseUrlbar + "vnf-packages",
-    home_servicebarpnfData: this.baseUrlbar + "pnf-packages",	
+    home_servicebarpnfData: this.baseUrlbar + "pnf-packages",
     sourceNames: this.baseUrl + "/alarm/getSourceNames",
-    listSortMasters:this.baseUrl+"/listSortMasters",
-    currentLanguage:"/api/portal-auxapi/languageSetting/user/",
-
+    listSortMasters: this.baseUrl + "/listSortMasters",
+    currentLanguage: "/api/portal-auxapi/languageSetting/user/",
   }
 
-   // Time formatting milliseconds to normal
-   dateformater(vmstime) {
+  // Time formatting milliseconds to normal
+  dateformater(vmstime) {
     if (!vmstime) {
       return ''
     }
@@ -71,22 +70,22 @@ export class HomesService {
     let params = new HttpParams({ fromObject: paramsObj });
     return this.http.get<any>(this.url.home_alarmChartData, { params });
   }
-  
-   getHomeServiceBarData(){
+
+  getHomeServiceBarData() {
     return this.http.get<any>(this.url.home_servicebarData);
   }
-  getHomeServiceBarNsData(){
+  getHomeServiceBarNsData() {
     return this.http.get<any>(this.url.home_servicebarnsData);
   }
-  getHomeServiceBarVnfData(){
+  getHomeServiceBarVnfData() {
     return this.http.get<any>(this.url.home_servicebarvnfData);
   }
-  getHomeServiceBarPnfData(){
+  getHomeServiceBarPnfData() {
     return this.http.get<any>(this.url.home_servicebarpnfData);
   }
 
-   // alarm data
-   getAlarmFormData(currentPage: number, pageSize: number, sourceName?: string, priority?: string, startTime?: string, endTime?: string, vfStatus?: string) {
+  // alarm data
+  getAlarmFormData(currentPage: number, pageSize: number, sourceName?: string, priority?: string, startTime?: string, endTime?: string, vfStatus?: string) {
     return this.http.get<any>(this.baseUrl + '/alarm/' + '/' + currentPage + '/' + pageSize + '?sourceName=' + sourceName + '&priority=' + priority + '&startTime=' + startTime + '&endTime=' + endTime + '&vfStatus=' + vfStatus);
   }
 
@@ -121,12 +120,12 @@ export class HomesService {
   }
 
 
-    getListSortMasters(){
-        return this.http.get<any>(this.url.listSortMasters);
-    }
+  getListSortMasters() {
+    return this.http.get<any>(this.url.listSortMasters);
+  }
 
-    getCurrentLanguage(currentloginId){
-      let url=this.url.currentLanguage+currentloginId;
-        return this.http.get<any>(url);
-    }
+  getCurrentLanguage(currentloginId) {
+    let url = this.url.currentLanguage + currentloginId;
+    return this.http.get<any>(url);
+  }
 }
diff --git a/usecaseui-portal/src/app/managemencs.service.ts b/usecaseui-portal/src/app/core/services/managemencs.service.ts
index 03ddb2e2..a28885d8 100644
--- a/usecaseui-portal/src/app/managemencs.service.ts
+++ b/usecaseui-portal/src/app/core/services/managemencs.service.ts
@@ -1,57 +1,57 @@
 import { Injectable } from '@angular/core';
 import { HttpClient, HttpHeaders, HttpParams, HttpResponse } from '@angular/common/http';
 import { Observable } from 'rxjs/Observable';
-import {baseUrl} from './dataInterface';
+import { baseUrl } from '../models/dataInterface';
 
 
 @Injectable()
 export class ManagemencsService {
 
-  constructor(private http: HttpClient) { }
+    constructor(private http: HttpClient) { }
     baseUrl = baseUrl.baseUrl;
 
-    
+
 
 
     /* line up */
     url = {
-        customers:this.baseUrl + "/uui-lcm/customers", /* get */
-        serviceType:this.baseUrl + "/uui-lcm/customers/"+"*_*"+"/service-subscriptions", /* get */
-        CustomersPir:this.baseUrl + "/uui-lcm/serviceNumByCustomer", /* get */
-        CustomersColumn:this.baseUrl + "/uui-lcm/serviceNumByServiceType/"+"*_*", /* get */
-        createCustomer:this.baseUrl+"/uui-lcm/customers/", /* put */
-        createServiceType:this.baseUrl+"/uui-lcm/customers/*_*/service-subscriptions/*+*", /* put */
-        getCustomerresourceVersion:this.baseUrl+"/uui-lcm/customers/*_*", /* put */
-        deleteCustomer:this.baseUrl+"/uui-lcm/customers?customerId=*_*&resourceVersion=*+*",
-        getServiceTypeResourceVersion:this.baseUrl+"/uui-lcm/customers/*_*/service-subscriptions/*+*",
-        deleteServiceType:this.baseUrl+"/uui-lcm/customers/*_*/service-subscriptions/*+*?resourceVersion=*@*  ",
+        customers: this.baseUrl + "/uui-lcm/customers", /* get */
+        serviceType: this.baseUrl + "/uui-lcm/customers/" + "*_*" + "/service-subscriptions", /* get */
+        CustomersPir: this.baseUrl + "/uui-lcm/serviceNumByCustomer", /* get */
+        CustomersColumn: this.baseUrl + "/uui-lcm/serviceNumByServiceType/" + "*_*", /* get */
+        createCustomer: this.baseUrl + "/uui-lcm/customers/", /* put */
+        createServiceType: this.baseUrl + "/uui-lcm/customers/*_*/service-subscriptions/*+*", /* put */
+        getCustomerresourceVersion: this.baseUrl + "/uui-lcm/customers/*_*", /* put */
+        deleteCustomer: this.baseUrl + "/uui-lcm/customers?customerId=*_*&resourceVersion=*+*",
+        getServiceTypeResourceVersion: this.baseUrl + "/uui-lcm/customers/*_*/service-subscriptions/*+*",
+        deleteServiceType: this.baseUrl + "/uui-lcm/customers/*_*/service-subscriptions/*+*?resourceVersion=*@*  ",
     };
 
 
     // Get all customers
     getAllCustomers() {
-      return this.http.get<any>(this.url.customers);
+        return this.http.get<any>(this.url.customers);
     }
     // get all servicetype
     getServiceTypes(customer) {
-      let url = this.url.serviceType.replace("*_*", customer.id);
-      console.log(url)
-      return this.http.get<any>(url);
+        let url = this.url.serviceType.replace("*_*", customer.id);
+        console.log(url)
+        return this.http.get<any>(url);
     }
     // get Customer Pir
-    getCustomersPie(){
-      return this.http.get<any>(this.url.CustomersPir);
+    getCustomersPie() {
+        return this.http.get<any>(this.url.CustomersPir);
     }
     // get Customer ber
-    getCustomersColumn(customer){
-      let url = this.url.CustomersColumn.replace("*_*", customer.id);
-      return this.http.get<any>(url);
+    getCustomersColumn(customer) {
+        let url = this.url.CustomersColumn.replace("*_*", customer.id);
+        return this.http.get<any>(url);
     }
     // create New Customer
     createCustomer(customer, createParams) {
         let url = this.url.createCustomer + customer;
         // return this.http.get(url, createParams);//location
-        return this.http.put(url,createParams);//online
+        return this.http.put(url, createParams);//online
     }
 
     createServiceType(createParams) {
diff --git a/usecaseui-portal/src/app/core/services/myhttp.service.ts b/usecaseui-portal/src/app/core/services/myhttp.service.ts
new file mode 100644
index 00000000..9ed75b00
--- /dev/null
+++ b/usecaseui-portal/src/app/core/services/myhttp.service.ts
@@ -0,0 +1,235 @@
+/*
+    Copyright (C) 2019 CMCC, Inc. and others. 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.
+*/
+import { Injectable } from '@angular/core';
+import { HttpClient, HttpHeaders, HttpParams, HttpResponse } from '@angular/common/http';
+import { Observable } from 'rxjs/Observable';
+import { homeData, homeVmLineData, servicesSelectData, servicesTableData, creatensData, onboardTableData, onboardDataVNF, onboardDataPNF, baseUrl } from '../models/dataInterface';
+
+@Injectable()
+export class MyhttpService {
+
+  constructor(private http: HttpClient) { }
+  baseUrl = baseUrl.baseUrl;
+  url = {
+    listSortMasters: this.baseUrl + "/listSortMasters",
+    customers: this.baseUrl + "/uui-lcm/customers",
+    orchestrators: this.baseUrl + "/uui-lcm/orchestrators",
+    serviceType: this.baseUrl + "/uui-lcm/customers/" + "*_*" + "/service-subscriptions",
+    servicesTableData: this.baseUrl + '/uui-lcm/service-instances',
+    serviceTemplates: this.baseUrl + "/uui-lcm/service-templates",
+    templateParameters: this.baseUrl + "/uui-lcm/fetchCCVPNTemplateData/*_*",
+    e2etemplateParameters: this.baseUrl + "/uui-lcm/service-templates/" + "*_*" + "?toscaModelPath=",
+    nstemplateParameters: this.baseUrl + "/uui-lcm/fetchNsTemplateData",
+    vimInfo: this.baseUrl + "/uui-lcm/locations/",
+    sdnControllers: this.baseUrl + "/uui-lcm/sdnc-controllers/",
+    addressData: this.baseUrl + "/uui-sotn/getOssInvenory",
+    createService: this.baseUrl + "/uui-lcm/services",
+    ns_createService: this.baseUrl + "/uui-lcm/createNetworkServiceInstance",
+    ns_createService2: this.baseUrl + "/uui-lcm/instantiateNetworkServiceInstance",
+    deleteService: this.baseUrl + "/uui-lcm/services/",
+    ns_deleteService: this.baseUrl + "/uui-lcm/deleteNetworkServiceInstance?ns_instance_id=",
+    ns_stopService: this.baseUrl + "/uui-lcm/terminateNetworkServiceInstance?ns_instance_id=",
+    ns_healService: this.baseUrl + "/uui-lcm/healNetworkServiceInstance?ns_instance_id=",
+    vnfInfo: this.baseUrl + "/uui-lcm/VnfInfo/",
+    progress: this.baseUrl + "/uui-lcm/services/" + "*_*" + "/operations/",
+    nsProgress: this.baseUrl + "/uui-lcm/jobs/getNsLcmJobStatus/" + "*_*" + "?responseId=0&serviceInstanceId=",
+    e2eScale: this.baseUrl + "/services/scaleServices/",
+    e2e_nsdata: this.baseUrl + "/getServiceInstanceById/customerId/",
+    updateccvpn: this.baseUrl + "/uui-lcm/services/updateService/",
+
+    allottedResource: this.baseUrl + "/uui-sotn/getAllottedResources",
+    pnfDetail: this.baseUrl + "/uui-sotn/getPnfInfo/",
+    connectivity: this.baseUrl + "/uui-sotn/getConnectivityInfo/",
+    vpnBinding: this.baseUrl + "/uui-sotn/getPinterfaceByVpnId/",
+  }
+
+  // serviceTable list
+  getServicesTableData(paramsObj): Observable<HttpResponse<servicesTableData>> {
+    let params = new HttpParams({ fromObject: paramsObj });
+    return this.http.get<servicesTableData>(this.url.servicesTableData, { observe: 'response', params });
+  }
+
+  //---------------------------------------------------------------------------------
+
+  // Get all customers
+  getAllCustomers() {
+    return this.http.get<any>(this.url.customers);
+  }
+
+  // Get all Orchestrators
+  getAllOrchestrators() {
+    return this.http.get<any>(this.url.orchestrators);
+  }
+
+  // Get relevant serviceType
+  getServiceTypes(customer) {
+    let url = this.url.serviceType.replace("*_*", customer.id);
+    return this.http.get<any>(url);
+  }
+
+
+  // Get all template types
+  getAllServiceTemplates(type) {
+    if (type == "Network Service") {
+      let nsUrl = this.url.serviceTemplates.replace("service-templates", "listNsTemplates").replace("serviceTemplates2", "serviceTemplates-ns");
+      console.log(nsUrl);
+      return this.http.get<any>(nsUrl);
+    }
+    return this.http.get<any>(this.url.serviceTemplates);
+  }
+
+
+  //Get template input parameters
+  getTemplateParameters(type, template) {
+    // let url = this.url.templateParameters.replace("*_*",type) + template.toscaModelURL;  //Local simulation
+    if (type == "ns") {
+      let body = {
+        csarId: template.id,
+        inputs: ""
+      };
+      return this.http.post<any>(this.url.nstemplateParameters, body);
+    } else if (type == "e2e") {
+      let url = this.url.e2etemplateParameters.replace("*_*", template.uuid) + template.toscaModelURL;
+      return this.http.get<any>(url);
+    } else {
+      let body = {
+        csarId: template.uuid,
+        packageType: "Service",
+        inputs: ""
+      };
+      let url = this.url.templateParameters.replace("*_*", template.uuid);
+      return this.http.post<any>(url, body);
+    }
+  }
+
+  getVimInfo() {
+    return this.http.get<any>(this.url.vimInfo);
+  };
+  getSdnControllers() {
+    return this.http.get<any>(this.url.sdnControllers);
+  }
+
+  // Create interface
+  createInstance(requestBody, createParams) {
+    // return this.http.get<any>(this.url.createService + createParams);  //Local simulation
+    return this.http.post<any>(this.url.createService + createParams, requestBody);
+  }
+  nsCreateInstance(requestBody) {
+    // return this.http.get<any>(this.url.ns_createService);  //Local simulation
+    return this.http.post<any>(this.url.ns_createService, requestBody);
+  }
+  nsCreateInstance2(params, requestBody) {
+    // return this.http.get<any>(this.url.ns_createService2 + params);  //Local simulation
+    return this.http.post<any>(this.url.ns_createService2 + params, requestBody);
+  }
+
+  updateccvpn(id, requestBody) {
+    console.log(id);
+    console.log(requestBody);
+    //return this.http.get<any>(this.url.updateccvpn + id);  //local
+    return this.http.put<any>(this.url.updateccvpn + id, requestBody);// online
+  }
+  // Delete interface
+  deleteInstance(obj) {
+    let httpOptions = {
+      headers: new HttpHeaders({
+        'Content-Type': 'application/json',
+        'Accept': 'application/json',
+        'Authorization': 'Basic SW5mcmFQb3J0YWxDbGllbnQ6cGFzc3dvcmQxJA=='
+      }),
+      body: {
+        'globalSubscriberId': obj.globalSubscriberId,
+        'serviceType': obj.serviceType.name
+      }
+    };
+    // return this.http.get<any>(this.url.deleteService);  //Local simulation
+    return this.http.delete<any>(this.url.deleteService + obj.serviceInstanceId, httpOptions);
+  }
+  nsDeleteInstance(id) {
+    // return this.http.get<any>(this.url.ns_deleteService);  //Local simulation
+    return this.http.delete<any>(this.url.ns_deleteService + id);
+  }
+  stopNsService(id, requestBody) {  //You need to terminate before deleting
+    // return this.http.get<any>(this.url.ns_stopService);  //Local simulation
+    return this.http.post<any>(this.url.ns_stopService + id, requestBody);
+  }
+
+  getVnfInfo(id) {
+    return this.http.get<any>(this.url.vnfInfo + id);
+  }
+  healNsService(id, requestBody) {
+    // return this.http.get<any>(this.url.ns_healService);  //Local simulation
+    return this.http.post<any>(this.url.ns_healService + id, requestBody);
+  }
+
+  // scale
+  scaleE2eService(id, requestBody) {
+    // return this.http.get<any>(this.url.e2eScale + id);
+    return this.http.post<any>(this.url.e2eScale + id, requestBody);
+  }
+  getE2e_nsData(paramsObj) {
+    let params = new HttpParams({ fromObject: paramsObj });
+    return this.http.get<any>(this.url.e2e_nsdata, { params });
+  }
+
+  // Query progress interface
+  getProgress(obj) {
+    let url = this.url.progress.replace("*_*", obj.serviceId) + obj.operationId + "?operationType=" + obj.operationType;
+    return this.http.get<any>(url);
+  }
+  getNsProgress(jobid, serviceId, operationType) {
+    let url = this.url.nsProgress.replace("*_*", jobid) + serviceId + "&operationType=" + operationType;
+    return this.http.get<any>(url);
+  }
+
+  // Get allotted-resource to get tp and pnf values
+  getAllottedResource(obj) {
+    let params = new HttpParams({ fromObject: obj });
+    let url = this.url.allottedResource;
+    return this.http.get<any>(url, { params });
+  }
+  //Get the corresponding domain (network-resource) by pnf value
+  getPnfDetail(name) {
+    let url = this.url.pnfDetail + name;
+    return this.http.get<any>(url);
+  }
+  //Get connectivity by sotn, find vpn-id
+  getSotnConnectivity(id) {
+    let url = this.url.connectivity + id;
+    return this.http.get<any>(url);
+  }
+  //Find tp and pnf by vpn-id
+  getVpnBinding(id) {
+    let url = this.url.vpnBinding + id;
+    return this.http.get<any>(url);
+  }
+  // Time formatting milliseconds to normal
+  dateformater(vmstime) {
+    if (!vmstime) {
+      return ''
+    }
+    let mstime = Number((vmstime + '').slice(0, 13));
+    let time = new Date(mstime);
+    let year = time.getFullYear();
+    let month = time.getMonth() + 1;
+    let day = time.getDate();
+    let hours = time.getHours();
+    let minutes = time.getMinutes();
+    let seconds = time.getSeconds();
+    let formattime = year + '-' + month + '-' + day + ' ' + hours + ':' + minutes + ':' + seconds;
+    return formattime;
+  }
+}
diff --git a/usecaseui-portal/src/app/networkHttpservice.service.ts b/usecaseui-portal/src/app/core/services/networkHttpservice.service.ts
index d09f0025..8af6d292 100644
--- a/usecaseui-portal/src/app/networkHttpservice.service.ts
+++ b/usecaseui-portal/src/app/core/services/networkHttpservice.service.ts
@@ -15,13 +15,13 @@
 */
 import { Injectable } from '@angular/core';
 import { HttpClient, HttpHeaders, HttpParams, HttpResponse } from '@angular/common/http';
-import { baseUrl} from './dataInterface';
+import { baseUrl } from '../models/dataInterface';
 
 
 @Injectable()
 export class networkHttpservice {
 
-    constructor(private http:HttpClient) { }
+    constructor(private http: HttpClient) { }
 
     // baseUrl = "./assets/json/";//Local environment
     // url={
@@ -42,81 +42,81 @@ export class networkHttpservice {
     // baseUrl = "http://10.73.242.244:8082/uui-sotn/";//Online environment
     // baseUrl = "http://172.19.44.223/api/usecaseui-server/v1/uui-sotn/";//Online environment
     baseUrl = baseUrl.baseUrl + "/uui-sotn/";//Online environment
-    url={
-        "getNetworkD3Data":this.baseUrl + "getNetWorkResources",
-        "getLogicalLinksData":this.baseUrl + "getLogicalLinks",
-        "getPInterfacesData1":this.baseUrl + "getPinterfaceByPnfName/",
-        "getPInterfacesData2":this.baseUrl + "getPinterfaceByPnfName/",
-        "createLink":this.baseUrl + "createLink/",
-        "querySpecificLinkInfo":this.baseUrl + "getSpecificLogicalLink/",
-        "queryCloudUrl":this.baseUrl + "getHostUrl/",
-        "queryExtAAIIdVersion":this.baseUrl + "getExtAaiId/",
-        "createNetwrok":this.baseUrl + "createTopoNetwork/",
-        "createPnf":this.baseUrl + "createPnf/",
-        "createTp":this.baseUrl + "pnf/",
-        "createCloudLink":this.baseUrl + "createLink/",
-        "createCloudUrl":this.baseUrl + "createHostUrl/",
-        "deleteLink":this.baseUrl + "deleteLink/",
-        "deleteCloud":this.baseUrl+"deleteExtNetWork"
+    url = {
+        "getNetworkD3Data": this.baseUrl + "getNetWorkResources",
+        "getLogicalLinksData": this.baseUrl + "getLogicalLinks",
+        "getPInterfacesData1": this.baseUrl + "getPinterfaceByPnfName/",
+        "getPInterfacesData2": this.baseUrl + "getPinterfaceByPnfName/",
+        "createLink": this.baseUrl + "createLink/",
+        "querySpecificLinkInfo": this.baseUrl + "getSpecificLogicalLink/",
+        "queryCloudUrl": this.baseUrl + "getHostUrl/",
+        "queryExtAAIIdVersion": this.baseUrl + "getExtAaiId/",
+        "createNetwrok": this.baseUrl + "createTopoNetwork/",
+        "createPnf": this.baseUrl + "createPnf/",
+        "createTp": this.baseUrl + "pnf/",
+        "createCloudLink": this.baseUrl + "createLink/",
+        "createCloudUrl": this.baseUrl + "createHostUrl/",
+        "deleteLink": this.baseUrl + "deleteLink/",
+        "deleteCloud": this.baseUrl + "deleteExtNetWork"
     };
     //d3data
-    getNetworkD3Data(){
+    getNetworkD3Data() {
         return this.http.get<any>(this.url["getNetworkD3Data"]);
     }
     //Initialize the connection logical-links
-    getLogicalLinksData(){
+    getLogicalLinksData() {
         return this.http.get<any>(this.url["getLogicalLinksData"]);
     }
     //Query the tp data corresponding to the specified node
-    getPInterfacesData1(paramsObj){
-        return this.http.get<any>(this.url['getPInterfacesData1']+paramsObj["pnfName"]);
+    getPInterfacesData1(paramsObj) {
+        return this.http.get<any>(this.url['getPInterfacesData1'] + paramsObj["pnfName"]);
     }
-    getPInterfacesData2(paramsObj){
-        return this.http.get<any>(this.url["getPInterfacesData2"]+paramsObj["pnfName"]);
+    getPInterfacesData2(paramsObj) {
+        return this.http.get<any>(this.url["getPInterfacesData2"] + paramsObj["pnfName"]);
     }
     //Create a connection interface
-    createLink(paramsObj){
-        return this.http.put<any>(this.url["createLink"]+paramsObj["link-name"],paramsObj);
+    createLink(paramsObj) {
+        return this.http.put<any>(this.url["createLink"] + paramsObj["link-name"], paramsObj);
     }
     //Query the specified single cable interface
-    querySpecificLinkInfo(paramsObj){
-        return this.http.get<any>(this.url["querySpecificLinkInfo"]+paramsObj["link-name"]);
+    querySpecificLinkInfo(paramsObj) {
+        return this.http.get<any>(this.url["querySpecificLinkInfo"] + paramsObj["link-name"]);
     }
     //Query external cloud host this.url address interface
-    queryCloudUrl(aaiId){
-        return this.http.get<any>(this.url["queryCloudUrl"]+aaiId);
+    queryCloudUrl(aaiId) {
+        return this.http.get<any>(this.url["queryCloudUrl"] + aaiId);
     }
-    queryExtAAIIdVersion(aaiId){
-      return this.http.get<any>(this.url["queryExtAAIIdVersion"]+aaiId);
+    queryExtAAIIdVersion(aaiId) {
+        return this.http.get<any>(this.url["queryExtAAIIdVersion"] + aaiId);
     }
     //Create an external cloud newwork interface
-    createNetwrok(paramsObj){
-        return this.http.put<any>(this.url["createNetwrok"]+paramsObj["network-id"],paramsObj);
+    createNetwrok(paramsObj) {
+        return this.http.put<any>(this.url["createNetwrok"] + paramsObj["network-id"], paramsObj);
     }
     //Create an external cloud pnf interface
-    createPnf(paramsObj){
-        return this.http.put<any>(this.url["createPnf"]+paramsObj["pnf-name"],paramsObj);
+    createPnf(paramsObj) {
+        return this.http.put<any>(this.url["createPnf"] + paramsObj["pnf-name"], paramsObj);
     }
     //Create an external cloud Tp interface
-    createTp(paramsObj,cloudNodeName){
-        let str=cloudNodeName+"/p-interfaces/p-interface/"+paramsObj["interface-name"]+"/createTerminationPoint";
-        return this.http.put<any>(this.url["createTp"]+str,paramsObj);
+    createTp(paramsObj, cloudNodeName) {
+        let str = cloudNodeName + "/p-interfaces/p-interface/" + paramsObj["interface-name"] + "/createTerminationPoint";
+        return this.http.put<any>(this.url["createTp"] + str, paramsObj);
     }
     //Create an external cloud link interface
-    createCloudLink(paramsObj){
-        return this.http.put<any>(this.url["createCloudLink"]+paramsObj["link-name"],paramsObj);
+    createCloudLink(paramsObj) {
+        return this.http.put<any>(this.url["createCloudLink"] + paramsObj["link-name"], paramsObj);
     }
     //Create an external cloud host url interface
-    createCloudUrl(paramsObj){
-        return this.http.put<any>(this.url["createCloudUrl"]+paramsObj["aai-id"],paramsObj);
+    createCloudUrl(paramsObj) {
+        return this.http.put<any>(this.url["createCloudUrl"] + paramsObj["aai-id"], paramsObj);
     }
     //Delete connection
-    deleteLink(paramsObj){
-        let str=paramsObj["logical-link"]+"/"+paramsObj["resource-version"];
-        return this.http.delete<any>((this.url["deleteLink"]+str));
+    deleteLink(paramsObj) {
+        let str = paramsObj["logical-link"] + "/" + paramsObj["resource-version"];
+        return this.http.delete<any>((this.url["deleteLink"] + str));
     }
-    deleteCloudLink(paramsObj){
-        let str="?extNetworkId="+paramsObj["aaiId"]+"&resourceVersion="+paramsObj["version"];
-        return this.http.delete<any>((this.url["deleteCloud"]+str));
+    deleteCloudLink(paramsObj) {
+        let str = "?extNetworkId=" + paramsObj["aaiId"] + "&resourceVersion=" + paramsObj["version"];
+        return this.http.delete<any>((this.url["deleteCloud"] + str));
     }
 }
diff --git a/usecaseui-portal/src/app/onboard.service.ts b/usecaseui-portal/src/app/core/services/onboard.service.ts
index 1c3778a4..fb5107b4 100644
--- a/usecaseui-portal/src/app/onboard.service.ts
+++ b/usecaseui-portal/src/app/core/services/onboard.service.ts
@@ -16,7 +16,7 @@
 import { Injectable } from '@angular/core';
 import { HttpClient, HttpHeaders, HttpParams, HttpResponse } from '@angular/common/http';
 import { Observable } from 'rxjs/Observable';
-import { onboardTableData, onboardDataVNF, onboardDataPNF , baseUrl} from './dataInterface';
+import { onboardTableData, onboardDataVNF, onboardDataPNF, baseUrl } from '../models/dataInterface';
 
 @Injectable()
 export class onboardService {
@@ -84,9 +84,9 @@ export class onboardService {
     onboardVNF: this.baseUrl + "vf-packages", //POST
 
     //Delete ns package
-    deleteNspack: this.baseUrl + "deleteNsdPackage?nsdInfoId=",  
+    deleteNspack: this.baseUrl + "deleteNsdPackage?nsdInfoId=",
     // Delete Vnf vfc package 
-    deleteVnfPack: this.baseUrl + "deleteVnfPackage?vnfPkgId=",  
+    deleteVnfPack: this.baseUrl + "deleteVnfPackage?vnfPkgId=",
     // Delete Pnf package
     deletePnfPack: this.baseUrl + "deletePnfPackage?pnfdInfoId=",
 
@@ -109,7 +109,7 @@ export class onboardService {
     return this.http.get<any>(this.url["onboardTableData"]);
   }
   // NS SDC Data
-  getSDC_NSTableData(){
+  getSDC_NSTableData() {
     // return this.http.get<any>(this.url.sdc_nsListData);
     return this.http.get<any>(this.url["sdc_nsListData"]);
   }
@@ -121,7 +121,7 @@ export class onboardService {
   getSDC_VNFTableData() {
     return this.http.get<any>(this.url["sdc_vnfListData"]);
   }
-  
+
   // PNF Data
   getOnboardTablePnfData() {
     return this.http.get<any>(this.url.onboardDataPNF);
@@ -129,8 +129,8 @@ export class onboardService {
   //-------------------------------------------------------------------------------------
 
   //create--Get the id after dragging the file before uploading   //on-line post
-  getCreatensData(url_upId,requestBody) {
-    return this.http.post<any>(this.url.creatensData.replace("_jsonData",url_upId),requestBody);  //on-line
+  getCreatensData(url_upId, requestBody) {
+    return this.http.post<any>(this.url.creatensData.replace("_jsonData", url_upId), requestBody);  //on-line
   }
 
   //create--Get the id after dragging the file before uploading  //local json get
@@ -170,7 +170,7 @@ export class onboardService {
   }
 
   // Delete Pnf package
-  deletePnfIdData(paramsObj){
+  deletePnfIdData(paramsObj) {
     //Local test
     // return this.http.get<any>(this.url.deletePnfPack); 
     //online test
diff --git a/usecaseui-portal/src/app/core/services/text.service.spec.ts b/usecaseui-portal/src/app/core/services/text.service.spec.ts
new file mode 100644
index 00000000..7b4d9efc
--- /dev/null
+++ b/usecaseui-portal/src/app/core/services/text.service.spec.ts
@@ -0,0 +1,15 @@
+import { TestBed, inject } from '@angular/core/testing';
+
+import { TextService } from './text.service';
+
+describe('TextService', () => {
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [TextService]
+    });
+  });
+
+  it('should be created', inject([TextService], (service: TextService) => {
+    expect(service).toBeTruthy();
+  }));
+});
diff --git a/usecaseui-portal/src/app/core/services/text.service.ts b/usecaseui-portal/src/app/core/services/text.service.ts
new file mode 100644
index 00000000..26a2caad
--- /dev/null
+++ b/usecaseui-portal/src/app/core/services/text.service.ts
@@ -0,0 +1,43 @@
+/*
+    Copyright (C) 2019 CMCC, Inc. and others. 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.
+*/
+import { Injectable } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+
+@Injectable()
+export class TextService {
+  constructor(private http: HttpClient) { }
+  //---------------------------------------------------------------------------------------
+  /* line up*/
+  baseUrl = "/api";
+  url = {
+    textInterface: this.baseUrl + "/user/login",
+    singleInterface: this.baseUrl + "/home",
+    doubleInterface: this.baseUrl + "/customer/info",
+    multipleInterface: this.baseUrl + "/alarm/formdata/multiple",
+    jsonInterface: this.baseUrl + "/xuran/test/data",
+  }
+
+  //-----------------------------------Function-local-start------------------------------------------------------
+  /* Query data list */
+  getfakeData() {
+    return this.http.get<any>(this.url["singleInterface"]);
+  }
+  getjsonData() {
+    return this.http.get<any>(this.url["jsonInterface"]);
+  }
+  //-------------------------------------------------------------------------------------
+
+}
diff --git a/usecaseui-portal/src/app/mock/fakedata.js b/usecaseui-portal/src/app/mock/fakedata.js
new file mode 100644
index 00000000..a008c14a
--- /dev/null
+++ b/usecaseui-portal/src/app/mock/fakedata.js
@@ -0,0 +1,24 @@
+const faker = require("faker");
+const _ = require("lodash");
+faker.locale = "en";
+
+module.exports = {
+    customer: _.times(20, function (n) {
+        return {
+            id: n,
+            name: faker.name.findName(),
+            phone: faker.phone.phoneNumber(),
+            address: faker.address.streetAddress(),
+            avatar: faker.internet.avatar()
+        }
+    }),
+    home: _.times(10, function (n) {
+        return {
+            id: n,
+            name: faker.name.findName(),
+            phone: faker.phone.phoneNumber(),
+            address: faker.address.streetAddress(),
+            avatar: faker.internet.avatar()
+        }
+    }),
+}
\ No newline at end of file
diff --git a/usecaseui-portal/src/assets/json/LogicalLinksData.json b/usecaseui-portal/src/app/mock/json/LogicalLinksData.json
index 99487f9d..99487f9d 100644
--- a/usecaseui-portal/src/assets/json/LogicalLinksData.json
+++ b/usecaseui-portal/src/app/mock/json/LogicalLinksData.json
diff --git a/usecaseui-portal/src/assets/json/alarmFormData.json b/usecaseui-portal/src/app/mock/json/alarmFormData.json
index fc97ae0c..fc97ae0c 100644
--- a/usecaseui-portal/src/assets/json/alarmFormData.json
+++ b/usecaseui-portal/src/app/mock/json/alarmFormData.json
diff --git a/usecaseui-portal/src/assets/json/allotted-resources2.json b/usecaseui-portal/src/app/mock/json/allotted-resources2.json
index 29262e5d..29262e5d 100644
--- a/usecaseui-portal/src/assets/json/allotted-resources2.json
+++ b/usecaseui-portal/src/app/mock/json/allotted-resources2.json
diff --git a/usecaseui-portal/src/assets/json/createService.json b/usecaseui-portal/src/app/mock/json/createService.json
index f1d64485..f1d64485 100644
--- a/usecaseui-portal/src/assets/json/createService.json
+++ b/usecaseui-portal/src/app/mock/json/createService.json
diff --git a/usecaseui-portal/src/assets/json/customers.json b/usecaseui-portal/src/app/mock/json/customers.json
index 9c66eff4..9c66eff4 100644
--- a/usecaseui-portal/src/assets/json/customers.json
+++ b/usecaseui-portal/src/app/mock/json/customers.json
diff --git a/usecaseui-portal/src/assets/json/deleteService.json b/usecaseui-portal/src/app/mock/json/deleteService.json
index 19a7ab5e..19a7ab5e 100644
--- a/usecaseui-portal/src/assets/json/deleteService.json
+++ b/usecaseui-portal/src/app/mock/json/deleteService.json
diff --git a/usecaseui-portal/src/assets/json/detailsData.json b/usecaseui-portal/src/app/mock/json/detailsData.json
index 41ee87b8..41ee87b8 100644
--- a/usecaseui-portal/src/assets/json/detailsData.json
+++ b/usecaseui-portal/src/app/mock/json/detailsData.json
diff --git a/usecaseui-portal/src/assets/json/e2eServiceTemplateParameters.json b/usecaseui-portal/src/app/mock/json/e2eServiceTemplateParameters.json
index 5ad5b102..5ad5b102 100644
--- a/usecaseui-portal/src/assets/json/e2eServiceTemplateParameters.json
+++ b/usecaseui-portal/src/app/mock/json/e2eServiceTemplateParameters.json
diff --git a/usecaseui-portal/src/assets/json/homeAllData.json b/usecaseui-portal/src/app/mock/json/homeAllData.json
index ce4e5d6e..ce4e5d6e 100644
--- a/usecaseui-portal/src/assets/json/homeAllData.json
+++ b/usecaseui-portal/src/app/mock/json/homeAllData.json
diff --git a/usecaseui-portal/src/assets/json/homePerformanceChartData.json b/usecaseui-portal/src/app/mock/json/homePerformanceChartData.json
index c3848893..c3848893 100644
--- a/usecaseui-portal/src/assets/json/homePerformanceChartData.json
+++ b/usecaseui-portal/src/app/mock/json/homePerformanceChartData.json
diff --git a/usecaseui-portal/src/assets/json/instanceTableData.json b/usecaseui-portal/src/app/mock/json/instanceTableData.json
index 73f12873..73f12873 100644
--- a/usecaseui-portal/src/assets/json/instanceTableData.json
+++ b/usecaseui-portal/src/app/mock/json/instanceTableData.json
diff --git a/usecaseui-portal/src/assets/json/instanceTableData2.json b/usecaseui-portal/src/app/mock/json/instanceTableData2.json
index d29f5f59..d29f5f59 100644
--- a/usecaseui-portal/src/assets/json/instanceTableData2.json
+++ b/usecaseui-portal/src/app/mock/json/instanceTableData2.json
diff --git a/usecaseui-portal/src/assets/json/instanceTableData3.json b/usecaseui-portal/src/app/mock/json/instanceTableData3.json
index 98777289..98777289 100644
--- a/usecaseui-portal/src/assets/json/instanceTableData3.json
+++ b/usecaseui-portal/src/app/mock/json/instanceTableData3.json
diff --git a/usecaseui-portal/src/app/mock/json/instanceTableData4.json b/usecaseui-portal/src/app/mock/json/instanceTableData4.json
new file mode 100644
index 00000000..d952af97
--- /dev/null
+++ b/usecaseui-portal/src/app/mock/json/instanceTableData4.json
@@ -0,0 +1,656 @@
+{
+    "service-instance": [
+        {
+            "service-instance-id": "8e07f832-3f50-4657-9b44-010049e8b488",
+            "service-instance-name": "SOTNVPNInfra",
+            "service-type": "E2E Service",
+            "service-role": "E2E Service",
+            "model-invariant-id": "bafa365f-4056-4ad3-a039-d6b3e3e0fd35",
+            "model-version-id": "fdbb8ddd-3325-4840-a156-9ad601b9366c",
+            "resource-version": "1537769390960",
+            "input-parameters": "{\n    \"service\":{\n        \"name\":\"SOTNVPNInfra\",\n        \"description\":\"SOTNVPNInfra\",\n        \"serviceInvariantUuid\":\"bafa365f-4056-4ad3-a039-d6b3e3e0fd35\",\n        \"serviceUuid\":\"fdbb8ddd-3325-4840-a156-9ad601b9366c\",\n        \"globalSubscriberId\":\"demo\",\n        \"serviceType\":\"ccvpn\",\n        \"parameters\":{\n            \"locationConstraints\":[\n\n            ],\n            \"resources\":[\n                {\n                    \"resourceName\":\"SOTNConnectivity 0\",\n                    \"resourceInvariantUuid\":\"1b9c677d-fddf-4b70-938b-925a7fa57d43\",\n                    \"resourceUuid\":\"218df3c3-50dd-4c26-9e36-4771387bb771\",\n                    \"resourceCustomizationUuid\":\"b44071c8-04fd-4d6b-b6af-772cbfaa1129\",\n                    \"parameters\":{\n                        \"locationConstraints\":[\n\n                        ],\n                        \"resources\":[\n\n                        ],\n                        \"requestInputs\":{\n\n                        }\n                    }\n                },\n                {\n                    \"resourceName\":\"SPPartnerVF 0\",\n                    \"resourceInvariantUuid\":\"072f9238-15b0-4bc5-a5f5-f18548739470\",\n                    \"resourceUuid\":\"81b9430b-8abe-45d6-8bf9-f41a8f5c735f\",\n                    \"resourceCustomizationUuid\":\"c3612284-6c67-4d8c-8b41-b699cc90e76d\",\n                    \"parameters\":{\n                        \"locationConstraints\":[\n\n                        ],\n                        \"resources\":[\n\n                        ],\n                        \"requestInputs\":{\n\n                        }\n                    }\n                }\n            ],\n            \"requestInputs\":{\n                \"sotnconnectivity0_eir\":\"1000\",\n                \"sotnconnectivity0_cir\":\"1000\",\n                \"sotnconnectivity0_endTime\":\"2018-8-8 10:00\",\n                \"sotnconnectivity0_ebs\":\"1000\",\n                \"sotnconnectivity0_startTime\":\"2018-8-1 10:00\",\n                \"sotnconnectivity0_dualLink\":\"true\",\n                \"sotnconnectivity0_reroute\":\"false\",\n                \"sotnconnectivity0_cbs\":\"1000\",\n                \"sotnconnectivity0_name\":\"SOTN L2\",\n                \"sotnconnectivity0_SLS\":\"\",\n                \"sotnconnectivity0_description\":\"\",\n                \"sotnconnectivity0_couplingFlag\":\"\",\n                \"sotnconnectivity0_colorAware\":\"\",\n                \"sotnconnectivity0_COS\":\"standard\"\n            }\n        }\n    }\n}",
+            "relationship-list": {
+                "relationship": [
+                    {
+                        "related-to": "connectivity",
+                        "relationship-label": "org.onap.relationships.inventory.PartOf",
+                        "related-link": "/aai/v13/network/connectivities/connectivity/2e359c75-2af3-4fea-9550-a893edeab8b5",
+                        "relationship-data": [
+                            {
+                                "relationship-key": "connectivity.connectivity-id",
+                                "relationship-value": "2e359c75-2af3-4fea-9550-a893edeab8b5"
+                            }
+                        ],
+                        "related-to-property": [
+                            {
+                                "property-key": "connectivity.etht-svc-name",
+                                "property-value": "vpn1"
+                            }
+                        ]
+                    },
+                    {
+                        "related-to": "sp-partner",
+                        "relationship-label": "org.onap.relationships.inventory.PartOf",
+                        "related-link": "/aai/v13/business/sp-partners/sp-partner/32cd906f-ee7a-4ecf-b1c3-2fce4d59f8c0",
+                        "relationship-data": [
+                            {
+                                "relationship-key": "sp-partner.sp-partner-id",
+                                "relationship-value": "32cd906f-ee7a-4ecf-b1c3-2fce4d59f8c0"
+                            }
+                        ],
+                        "related-to-property": [
+                            {
+                                "property-key": "sp-partner.sp-partner-id",
+                                "property-value": "32cd906f-ee7a-4ecf-b1c3-2fce4d59f8c0"
+                            }
+                        ]
+                    },
+                    {
+                        "related-to": "allotted-resource",
+                        "relationship-label": "org.onap.relationships.inventory.Uses",
+                        "related-link": "/aai/v13/business/customers/customer/demo/service-subscriptions/service-subscription/ccvpn/service-instances/service-instance/2d55a540-f6d3-4108-9bb4-290574b87a6c/allotted-resources/allotted-resource/666085a7-132e-4a32-b9de-e58ecea3476a",
+                        "relationship-data": [
+                            {
+                                "relationship-key": "customer.global-customer-id",
+                                "relationship-value": "demo"
+                            },
+                            {
+                                "relationship-key": "service-subscription.service-type",
+                                "relationship-value": "ccvpn"
+                            },
+                            {
+                                "relationship-key": "service-instance.service-instance-id",
+                                "relationship-value": "2d55a540-f6d3-4108-9bb4-290574b87a6c"
+                            },
+                            {
+                                "relationship-key": "allotted-resource.id",
+                                "relationship-value": "666085a7-132e-4a32-b9de-e58ecea3476a"
+                            }
+                        ],
+                        "related-to-property": [
+                            {
+                                "property-key": "allotted-resource.description",
+                                "property-value": "sotn-attachment"
+                            },
+                            {
+                                "property-key": "allotted-resource.allotted-resource-name",
+                                "property-value": "sotn ar"
+                            }
+                        ]
+                    },
+                    {
+                        "related-to": "allotted-resource",
+                        "relationship-label": "org.onap.relationships.inventory.Uses",
+                        "related-link": "/aai/v13/business/customers/customer/demo/service-subscriptions/service-subscription/ccvpn/service-instances/service-instance/a6d69c62-75b5-4f04-8cd7-9ca5dfcc4205/allotted-resources/allotted-resource/562adc96-7fbe-435e-bd6d-ff4b8a0a7920",
+                        "relationship-data": [
+                            {
+                                "relationship-key": "customer.global-customer-id",
+                                "relationship-value": "demo"
+                            },
+                            {
+                                "relationship-key": "service-subscription.service-type",
+                                "relationship-value": "ccvpn"
+                            },
+                            {
+                                "relationship-key": "service-instance.service-instance-id",
+                                "relationship-value": "a6d69c62-75b5-4f04-8cd7-9ca5dfcc4205"
+                            },
+                            {
+                                "relationship-key": "allotted-resource.id",
+                                "relationship-value": "562adc96-7fbe-435e-bd6d-ff4b8a0a7920"
+                            }
+                        ],
+                        "related-to-property": [
+                            {
+                                "property-key": "allotted-resource.description",
+                                "property-value": "sotn-attachment"
+                            },
+                            {
+                                "property-key": "allotted-resource.allotted-resource-name",
+                                "property-value": "sotn ar"
+                            }
+                        ]
+                    }
+                ]
+            }
+        },
+        {
+            "service-instance-id": "a6d69c62-75b5-4f04-8cd7-9ca5dfcc4205",
+            "service-instance-name": "DcLondon",
+            "service-type": "E2E Service",
+            "service-role": "E2E Service",
+            "model-invariant-id": "499e5e60-c8b2-4ea6-8c4e-7739420673a9",
+            "model-version-id": "8ec97da1-1e0a-4198-9c9a-3da2c60d7974",
+            "resource-version": "1537866016457",
+            "input-parameters": "{\n    \"service\":{\n        \"name\":\"DcLondon\",\n        \"description\":\"SiteService\",\n        \"serviceInvariantUuid\":\"499e5e60-c8b2-4ea6-8c4e-7739420673a9\",\n        \"serviceUuid\":\"8ec97da1-1e0a-4198-9c9a-3da2c60d7974\",\n        \"globalSubscriberId\":\"demo\",\n        \"serviceType\":\"ccvpn\",\n        \"parameters\":{\n            \"locationConstraints\":[\n\n            ],\n            \"resources\":[\n                {\n                    \"resourceName\":\"SiteVF\",\n                    \"resourceInvariantUuid\":\"0c0e1cbe-6e01-4f9e-8c45-a9700ebc14df\",\n                    \"resourceUuid\":\"4ad2d390-5c51-45f5-9710-b467a4ec7a73\",\n                    \"resourceCustomizationUuid\":\"66590e07-0777-415c-af44-36347cf3ddd3\",\n                    \"parameters\":{\n                        \"locationConstraints\":[\n\n                        ],\n                        \"resources\":[\n\n                        ],\n                        \"requestInputs\":{\n\n                        }\n                    }\n                },\n                {\n                    \"resourceName\":\"mpls\",\n                    \"resourceInvariantUuid\":\"97a3e552-08c4-4697-aeeb-d8d3e09ce58e\",\n                    \"resourceUuid\":\"63d8e1af-32dc-4c71-891d-e3f7b6a976d2\",\n                    \"resourceCustomizationUuid\":\"205456e7-3dc0-40c4-8cb0-28e6c1877042\",\n                    \"parameters\":{\n                        \"locationConstraints\":[\n\n                        ],\n                        \"resources\":[\n\n                        ],\n                        \"requestInputs\":{\n\n                        }\n                    }\n                },\n                {\n                    \"resourceName\":\"deviceVF\",\n                    \"resourceInvariantUuid\":\"c726490a-0ce2-4bc7-abea-dade66bfb13d\",\n                    \"resourceUuid\":\"0e2de9d8-d76b-4134-b5f1-41e79056adbe\",\n                    \"resourceCustomizationUuid\":\"5bc1373e-9a36-4a00-8c62-784e0bc417ad\",\n                    \"parameters\":{\n                        \"locationConstraints\":[\n\n                        ],\n                        \"resources\":[\n\n                        ],\n                        \"requestInputs\":{\n\n                        }\n                    }\n                },\n                {\n                    \"resourceName\":\"sdwanvpnattachmentVF\",\n                    \"resourceInvariantUuid\":\"f714feec-1aef-4890-abba-f8f3a906935f\",\n                    \"resourceUuid\":\"709919b7-75fd-4e49-8398-67853323ff55\",\n                    \"resourceCustomizationUuid\":\"debd988f-fe04-4940-a5cb-37f61d84eab4\",\n                    \"parameters\":{\n                        \"locationConstraints\":[\n\n                        ],\n                        \"resources\":[\n\n                        ],\n                        \"requestInputs\":{\n\n                        }\n                    }\n                },\n                {\n                    \"resourceName\":\"internet\",\n                    \"resourceInvariantUuid\":\"97a3e552-08c4-4697-aeeb-d8d3e09ce58e\",\n                    \"resourceUuid\":\"63d8e1af-32dc-4c71-891d-e3f7b6a976d2\",\n                    \"resourceCustomizationUuid\":\"64b8e8ba-62b9-4db6-b420-1ca7067d63e0\",\n                    \"parameters\":{\n                        \"locationConstraints\":[\n\n                        ],\n                        \"resources\":[\n\n                        ],\n                        \"requestInputs\":{\n\n                        }\n                    }\n                },\n                {\n                    \"resourceName\":\"sotnvpnattachmentvF\",\n                    \"resourceInvariantUuid\":\"97c4a3c6-2943-41af-8717-2f3183f944be\",\n                    \"resourceUuid\":\"44b777ee-9793-465d-8053-d8e86d2e2362\",\n                    \"resourceCustomizationUuid\":\"37aeb073-c75d-4cf6-a7fa-a1af862ef58a\",\n                    \"parameters\":{\n                        \"locationConstraints\":[\n\n                        ],\n                        \"resources\":[\n\n                        ],\n                        \"requestInputs\":{\n\n                        }\n                    }\n                },\n                {\n                    \"resourceName\":\"SPPartnerVF\",\n                    \"resourceInvariantUuid\":\"072f9238-15b0-4bc5-a5f5-f18548739470\",\n                    \"resourceUuid\":\"81b9430b-8abe-45d6-8bf9-f41a8f5c735f\",\n                    \"resourceCustomizationUuid\":\"cd0b4b9c-66c6-49c5-b346-7580e4b6c394\",\n                    \"parameters\":{\n                        \"locationConstraints\":[\n\n                        ],\n                        \"resources\":[\n\n                        ],\n                        \"requestInputs\":{\n\n                        }\n                    }\n                }\n            ],\n            \"requestInputs\":{\n                \"devicevf_device_class\":\"PNF\",\n                \"devicevf_device_esn\":\"2102351BTJ10HB000075\",\n                \"devicevf_device_name\":\"50.47\",\n                \"devicevf_device_systemIp\":\"192.168.1.47\",\n                \"devicevf_device_type\":\"AR161EW\",\n                \"devicevf_device_vendor\":\"huawei\",\n                \"devicevf_device_version\":\"1.0\",\n                \"internet_sitewanport_description\":\"internet\",\n                \"internet_sitewanport_deviceName\":\"50.47\",\n                \"internet_sitewanport_inputBandwidth\":\"100\",\n                \"internet_sitewanport_ipAddress\":\"100.2.30.9\",\n                \"internet_sitewanport_name\":\"internet\",\n                \"internet_sitewanport_outputBandwidth\":\"100\",\n                \"internet_sitewanport_portNumber\":\"0/0/2\",\n                \"internet_sitewanport_portType\":\"GE\",\n                \"internet_sitewanport_providerIpAddress\":\"100.2.30.10\",\n                \"internet_sitewanport_transportNetworkName\":\"internet\",\n                \"mpls_sitewanport_description\":\"mpls\",\n                \"mpls_sitewanport_deviceName\":\"50.47\",\n                \"mpls_sitewanport_inputBandwidth\":\"100\",\n                \"mpls_sitewanport_ipAddress\":\"10.2.30.7\",\n                \"mpls_sitewanport_name\":\"mpls\",\n                \"mpls_sitewanport_outputBandwidth\":\"100\",\n                \"mpls_sitewanport_portNumber\":\"0/0/1\",\n                \"mpls_sitewanport_portType\":\"GE\",\n                \"mpls_sitewanport_providerIpAddress\":\"10.2.30.8\",\n                \"mpls_sitewanport_transportNetworkName\":\"internet\",\n                \"sdwanvpnattachmentvf_sdwancondition_role\":\"spoke\",\n                \"sdwanvpnattachmentvf_sdwancondition_sdwanVpnName\":\"SDWANVPNInfra\",\n                \"sitevf_site_address\":\"University College London,Gower Street,London\",\n                \"sitevf_site_controlPoint\":\"VDF_VCPE\",\n                \"sitevf_site_description\":\"VDF_vGW\",\n                \"sitevf_site_emails\":\"\",\n                \"sitevf_site_latitude\":\"\",\n                \"sitevf_site_longitude\":\"\",\n                \"sitevf_site_name\":\"DcLondon\",\n                \"sitevf_site_postcode\":\"N200095\",\n                \"sitevf_site_role\":\"sd-wan-edge\",\n                \"sitevf_site_type\":\"single-gateway\",\n                \"sotnvpnattachmentvf_sotncondition_clientSignal\":\"\",\n                \"sotnvpnattachmentvf_sotncondition_cVLAN\":\"\",\n                \"sotnvpnattachmentvf_sotncondition_sotnVpnName\":\"SOTN L2\"\n            }\n        }\n    }\n}",
+            "relationship-list": {
+                "relationship": [
+                    {
+                        "related-to": "device",
+                        "relationship-label": "org.onap.relationships.inventory.PartOf",
+                        "related-link": "/aai/v13/network/devices/device/2cacf49c-7c09-4155-b18a-4468dce34083",
+                        "relationship-data": [
+                            {
+                                "relationship-key": "device.device-id",
+                                "relationship-value": "2cacf49c-7c09-4155-b18a-4468dce34083"
+                            }
+                        ],
+                        "related-to-property": [
+                            {
+                                "property-key": "device.device-name",
+                                "property-value": "TravelDevice"
+                            }
+                        ]
+                    },
+                    {
+                        "related-to": "site-resource",
+                        "relationship-label": "org.onap.relationships.inventory.PartOf",
+                        "related-link": "/aai/v13/network/site-resources/site-resource/f288d54e-be09-46d3-bb1f-38729ec74bb5",
+                        "relationship-data": [
+                            {
+                                "relationship-key": "site-resource.site-resource-id",
+                                "relationship-value": "f288d54e-be09-46d3-bb1f-38729ec74bb5"
+                            }
+                        ],
+                        "related-to-property": [
+                            {
+                                "property-key": "site-resource.site-resource-name",
+                                "property-value": "travelSite"
+                            }
+                        ]
+                    },
+                    {
+                        "related-to": "wan-port-config",
+                        "relationship-label": "org.onap.relationships.inventory.PartOf",
+                        "related-link": "/aai/v13/network/wan-port-configs/wan-port-config/99866f05-9749-456e-8909-61eebf08373e",
+                        "relationship-data": [
+                            {
+                                "relationship-key": "wan-port-config.wan-port-config-id",
+                                "relationship-value": "99866f05-9749-456e-8909-61eebf08373e"
+                            }
+                        ],
+                        "related-to-property": [
+                            {
+                                "property-key": "wan-port-config.wan-port-config-name",
+                                "property-value": "intenet"
+                            }
+                        ]
+                    },
+                    {
+                        "related-to": "wan-port-config",
+                        "relationship-label": "org.onap.relationships.inventory.PartOf",
+                        "related-link": "/aai/v13/network/wan-port-configs/wan-port-config/afab2cc0-28c9-4fd3-bf03-01c8034f8191",
+                        "relationship-data": [
+                            {
+                                "relationship-key": "wan-port-config.wan-port-config-id",
+                                "relationship-value": "afab2cc0-28c9-4fd3-bf03-01c8034f8191"
+                            }
+                        ],
+                        "related-to-property": [
+                            {
+                                "property-key": "wan-port-config.wan-port-config-name",
+                                "property-value": "mpls"
+                            }
+                        ]
+                    },
+                    {
+                        "related-to": "sp-partner",
+                        "relationship-label": "org.onap.relationships.inventory.PartOf",
+                        "related-link": "/aai/v13/business/sp-partners/sp-partner/167a285b-0875-41ff-8ed1-1178db6f3133",
+                        "relationship-data": [
+                            {
+                                "relationship-key": "sp-partner.sp-partner-id",
+                                "relationship-value": "167a285b-0875-41ff-8ed1-1178db6f3133"
+                            }
+                        ],
+                        "related-to-property": [
+                            {
+                                "property-key": "sp-partner.sp-partner-id",
+                                "property-value": "167a285b-0875-41ff-8ed1-1178db6f3133"
+                            }
+                        ]
+                    },
+                    {
+                        "related-to": "allotted-resource",
+                        "relationship-label": "org.onap.relationships.inventory.Uses",
+                        "related-link": "/aai/v13/business/customers/customer/demo/service-subscriptions/service-subscription/ccvpn/service-instances/service-instance/0ea94797-3772-40ff-b6fb-69f06c533be3/allotted-resources/allotted-resource/d519761d-c89c-4164-86c7-8f74952eea65",
+                        "relationship-data": [
+                            {
+                                "relationship-key": "customer.global-customer-id",
+                                "relationship-value": "demo"
+                            },
+                            {
+                                "relationship-key": "service-subscription.service-type",
+                                "relationship-value": "ccvpn"
+                            },
+                            {
+                                "relationship-key": "service-instance.service-instance-id",
+                                "relationship-value": "0ea94797-3772-40ff-b6fb-69f06c533be3"
+                            },
+                            {
+                                "relationship-key": "allotted-resource.id",
+                                "relationship-value": "d519761d-c89c-4164-86c7-8f74952eea65"
+                            }
+                        ],
+                        "related-to-property": [
+                            {
+                                "property-key": "allotted-resource.description",
+                                "property-value": "sdwan-attachment"
+                            },
+                            {
+                                "property-key": "allotted-resource.allotted-resource-name",
+                                "property-value": "sdwan ar"
+                            }
+                        ]
+                    },
+                    {
+                        "related-to": "allotted-resource",
+                        "relationship-label": "org.onap.relationships.inventory.Uses",
+                        "related-link": "/aai/v13/business/customers/customer/demo/service-subscriptions/service-subscription/ccvpn/service-instances/service-instance/8e07f832-3f50-4657-9b44-010049e8b488/allotted-resources/allotted-resource/65f21c28-8b19-4769-8f08-174e2afa5488",
+                        "relationship-data": [
+                            {
+                                "relationship-key": "customer.global-customer-id",
+                                "relationship-value": "demo"
+                            },
+                            {
+                                "relationship-key": "service-subscription.service-type",
+                                "relationship-value": "ccvpn"
+                            },
+                            {
+                                "relationship-key": "service-instance.service-instance-id",
+                                "relationship-value": "8e07f832-3f50-4657-9b44-010049e8b488"
+                            },
+                            {
+                                "relationship-key": "allotted-resource.id",
+                                "relationship-value": "65f21c28-8b19-4769-8f08-174e2afa5488"
+                            }
+                        ],
+                        "related-to-property": [
+                            {
+                                "property-key": "allotted-resource.description",
+                                "property-value": "sotn attachment"
+                            },
+                            {
+                                "property-key": "allotted-resource.allotted-resource-name",
+                                "property-value": "ston ar"
+                            }
+                        ]
+                    }
+                ]
+            }
+        },
+        {
+            "service-instance-id": "0ea94797-3772-40ff-b6fb-69f06c533be3",
+            "service-instance-name": "SDWANVPNInfra",
+            "service-type": "E2E Service",
+            "service-role": "E2E Service",
+            "model-invariant-id": "e2b217d6-7cac-4156-9f44-f9b010b350a6",
+            "model-version-id": "20d9e7dc-f030-4230-af79-ba0bde7cbe2e",
+            "resource-version": "1537864894560",
+            "input-parameters": "{\n    \"service\":{\n        \"name\":\"SDWANVPNInfra\",\n        \"description\":\"SDWANVPNInfra\",\n        \"serviceInvariantUuid\":\"e2b217d6-7cac-4156-9f44-f9b010b350a6\",\n        \"serviceUuid\":\"20d9e7dc-f030-4230-af79-ba0bde7cbe2e\",\n        \"globalSubscriberId\":\"demo\",\n        \"serviceType\":\"ccvpn\",\n        \"parameters\":{\n            \"locationConstraints\":[\n\n            ],\n            \"resources\":[\n                {\n                    \"resourceName\":\"SDWANConnectivity 0\",\n                    \"resourceInvariantUuid\":\"f99a9a23-c88e-44ff-a4dc-22b88675d278\",\n                    \"resourceUuid\":\"7baa7742-3a13-4288-8330-868015adc340\",\n                    \"resourceCustomizationUuid\":\"94ec574b-2306-4cbd-8214-09662b040f73\",\n                    \"parameters\":{\n                        \"locationConstraints\":[\n\n                        ],\n                        \"resources\":[\n\n                        ],\n                        \"requestInputs\":{\n\n                        }\n                    }\n                },\n                {\n                    \"resourceName\":\"SPPartnerVF 0\",\n                    \"resourceInvariantUuid\":\"072f9238-15b0-4bc5-a5f5-f18548739470\",\n                    \"resourceUuid\":\"81b9430b-8abe-45d6-8bf9-f41a8f5c735f\",\n                    \"resourceCustomizationUuid\":\"a7baba5d-6ac3-42b5-b47d-070841303ab1\",\n                    \"parameters\":{\n                        \"locationConstraints\":[\n\n                        ],\n                        \"resources\":[\n\n                        ],\n                        \"requestInputs\":{\n\n                        }\n                    }\n                }\n            ],\n            \"requestInputs\":{\n                \"sdwanconnectivity0_name\":\"SDWANVPNInfra\",\n                \"sdwanconnectivity0_topology\":\"hub-spoke\"\n            }\n        }\n    }\n}",
+            "relationship-list": {
+                "relationship": [
+                    {
+                        "related-to": "sdwan-vpn",
+                        "relationship-label": "org.onap.relationships.inventory.PartOf",
+                        "related-link": "/aai/v13/network/sdwan-vpns/sdwan-vpn/0d8707cd-9d27-4503-a0b0-e9b1b1a83b1e",
+                        "relationship-data": [
+                            {
+                                "relationship-key": "sdwan-vpn.sdwan-vpn-id",
+                                "relationship-value": "0d8707cd-9d27-4503-a0b0-e9b1b1a83b1e"
+                            }
+                        ],
+                        "related-to-property": [
+                            {
+                                "property-key": "sdwan-vpn.sdwan-vpn-name"
+                            }
+                        ]
+                    },
+                    {
+                        "related-to": "sp-partner",
+                        "relationship-label": "org.onap.relationships.inventory.PartOf",
+                        "related-link": "/aai/v13/business/sp-partners/sp-partner/15e88f8e-473f-4d88-92f8-6739a42baa2g",
+                        "relationship-data": [
+                            {
+                                "relationship-key": "sp-partner.sp-partner-id",
+                                "relationship-value": "15e88f8e-473f-4d88-92f8-6739a42baa2g"
+                            }
+                        ],
+                        "related-to-property": [
+                            {
+                                "property-key": "sp-partner.sp-partner-id",
+                                "property-value": "15e88f8e-473f-4d88-92f8-6739a42baa2g"
+                            }
+                        ]
+                    },
+                    {
+                        "related-to": "allotted-resource",
+                        "relationship-label": "org.onap.relationships.inventory.Uses",
+                        "related-link": "/aai/v13/business/customers/customer/demo/service-subscriptions/service-subscription/ccvpn/service-instances/service-instance/2d55a540-f6d3-4108-9bb4-290574b87a6c/allotted-resources/allotted-resource/c797bba9-eb90-4825-b1c2-adbd1a31101f",
+                        "relationship-data": [
+                            {
+                                "relationship-key": "customer.global-customer-id",
+                                "relationship-value": "demo"
+                            },
+                            {
+                                "relationship-key": "service-subscription.service-type",
+                                "relationship-value": "ccvpn"
+                            },
+                            {
+                                "relationship-key": "service-instance.service-instance-id",
+                                "relationship-value": "2d55a540-f6d3-4108-9bb4-290574b87a6c"
+                            },
+                            {
+                                "relationship-key": "allotted-resource.id",
+                                "relationship-value": "c797bba9-eb90-4825-b1c2-adbd1a31101f"
+                            }
+                        ],
+                        "related-to-property": [
+                            {
+                                "property-key": "allotted-resource.description",
+                                "property-value": "sdwan-attachment"
+                            },
+                            {
+                                "property-key": "allotted-resource.allotted-resource-name",
+                                "property-value": "sdwan ar"
+                            }
+                        ]
+                    },
+                    {
+                        "related-to": "allotted-resource",
+                        "relationship-label": "org.onap.relationships.inventory.Uses",
+                        "related-link": "/aai/v13/business/customers/customer/demo/service-subscriptions/service-subscription/ccvpn/service-instances/service-instance/a6d69c62-75b5-4f04-8cd7-9ca5dfcc4205/allotted-resources/allotted-resource/9a7329e6-8961-4008-9dbe-adeacfcd20da",
+                        "relationship-data": [
+                            {
+                                "relationship-key": "customer.global-customer-id",
+                                "relationship-value": "demo"
+                            },
+                            {
+                                "relationship-key": "service-subscription.service-type",
+                                "relationship-value": "ccvpn"
+                            },
+                            {
+                                "relationship-key": "service-instance.service-instance-id",
+                                "relationship-value": "a6d69c62-75b5-4f04-8cd7-9ca5dfcc4205"
+                            },
+                            {
+                                "relationship-key": "allotted-resource.id",
+                                "relationship-value": "9a7329e6-8961-4008-9dbe-adeacfcd20da"
+                            }
+                        ],
+                        "related-to-property": [
+                            {
+                                "property-key": "allotted-resource.description",
+                                "property-value": "sdwan-attachment"
+                            },
+                            {
+                                "property-key": "allotted-resource.allotted-resource-name",
+                                "property-value": "sdwan ar"
+                            }
+                        ]
+                    }
+                ]
+            }
+        },
+        {
+            "service-instance-id": "f08067b8-a07b-4c41-b750-5f9b35281e67",
+            "service-instance-name": "siteFangshanQu",
+            "service-type": "E2E Service",
+            "service-role": "E2E Service",
+            "model-invariant-id": "499e5e60-c8b2-4ea6-8c4e-7739420673a9",
+            "model-version-id": "8ec97da1-1e0a-4198-9c9a-3da2c60d7974",
+            "resource-version": "1537867265890",
+            "selflink": "restconf/config/GENERIC-RESOURCE-API:services/service/506b87a5-72fe-4197-a307-6929c3871ab2/service-data/service-topology/",
+            "input-parameters": "{\n    \"service\":{\n        \"name\":\"siteFangshanQu\",\n        \"description\":\"SiteService\",\n        \"serviceInvariantUuid\":\"499e5e60-c8b2-4ea6-8c4e-7739420673a9\",\n        \"serviceUuid\":\"8ec97da1-1e0a-4198-9c9a-3da2c60d7974\",\n        \"globalSubscriberId\":\"demo\",\n        \"serviceType\":\"ccvpn\",\n        \"parameters\":{\n            \"locationConstraints\":[\n\n            ],\n            \"resources\":[\n                {\n                    \"resourceName\":\"SiteVF\",\n                    \"resourceInvariantUuid\":\"0c0e1cbe-6e01-4f9e-8c45-a9700ebc14df\",\n                    \"resourceUuid\":\"4ad2d390-5c51-45f5-9710-b467a4ec7a73\",\n                    \"resourceCustomizationUuid\":\"66590e07-0777-415c-af44-36347cf3ddd3\",\n                    \"parameters\":{\n                        \"locationConstraints\":[\n\n                        ],\n                        \"resources\":[\n\n                        ],\n                        \"requestInputs\":{\n\n                        }\n                    }\n                },\n                {\n                    \"resourceName\":\"mpls\",\n                    \"resourceInvariantUuid\":\"97a3e552-08c4-4697-aeeb-d8d3e09ce58e\",\n                    \"resourceUuid\":\"63d8e1af-32dc-4c71-891d-e3f7b6a976d2\",\n                    \"resourceCustomizationUuid\":\"205456e7-3dc0-40c4-8cb0-28e6c1877042\",\n                    \"parameters\":{\n                        \"locationConstraints\":[\n\n                        ],\n                        \"resources\":[\n\n                        ],\n                        \"requestInputs\":{\n\n                        }\n                    }\n                },\n                {\n                    \"resourceName\":\"deviceVF\",\n                    \"resourceInvariantUuid\":\"c726490a-0ce2-4bc7-abea-dade66bfb13d\",\n                    \"resourceUuid\":\"0e2de9d8-d76b-4134-b5f1-41e79056adbe\",\n                    \"resourceCustomizationUuid\":\"5bc1373e-9a36-4a00-8c62-784e0bc417ad\",\n                    \"parameters\":{\n                        \"locationConstraints\":[\n\n                        ],\n                        \"resources\":[\n\n                        ],\n                        \"requestInputs\":{\n\n                        }\n                    }\n                },\n                {\n                    \"resourceName\":\"sdwanvpnattachmentVF\",\n                    \"resourceInvariantUuid\":\"f714feec-1aef-4890-abba-f8f3a906935f\",\n                    \"resourceUuid\":\"709919b7-75fd-4e49-8398-67853323ff55\",\n                    \"resourceCustomizationUuid\":\"debd988f-fe04-4940-a5cb-37f61d84eab4\",\n                    \"parameters\":{\n                        \"locationConstraints\":[\n\n                        ],\n                        \"resources\":[\n\n                        ],\n                        \"requestInputs\":{\n\n                        }\n                    }\n                },\n                {\n                    \"resourceName\":\"internet\",\n                    \"resourceInvariantUuid\":\"97a3e552-08c4-4697-aeeb-d8d3e09ce58e\",\n                    \"resourceUuid\":\"63d8e1af-32dc-4c71-891d-e3f7b6a976d2\",\n                    \"resourceCustomizationUuid\":\"64b8e8ba-62b9-4db6-b420-1ca7067d63e0\",\n                    \"parameters\":{\n                        \"locationConstraints\":[\n\n                        ],\n                        \"resources\":[\n\n                        ],\n                        \"requestInputs\":{\n\n                        }\n                    }\n                },\n                {\n                    \"resourceName\":\"sotnvpnattachmentvF\",\n                    \"resourceInvariantUuid\":\"97c4a3c6-2943-41af-8717-2f3183f944be\",\n                    \"resourceUuid\":\"44b777ee-9793-465d-8053-d8e86d2e2362\",\n                    \"resourceCustomizationUuid\":\"37aeb073-c75d-4cf6-a7fa-a1af862ef58a\",\n                    \"parameters\":{\n                        \"locationConstraints\":[\n\n                        ],\n                        \"resources\":[\n\n                        ],\n                        \"requestInputs\":{\n\n                        }\n                    }\n                },\n                {\n                    \"resourceName\":\"SPPartnerVF\",\n                    \"resourceInvariantUuid\":\"072f9238-15b0-4bc5-a5f5-f18548739470\",\n                    \"resourceUuid\":\"81b9430b-8abe-45d6-8bf9-f41a8f5c735f\",\n                    \"resourceCustomizationUuid\":\"cd0b4b9c-66c6-49c5-b346-7580e4b6c394\",\n                    \"parameters\":{\n                        \"locationConstraints\":[\n\n                        ],\n                        \"resources\":[\n\n                        ],\n                        \"requestInputs\":{\n\n                        }\n                    }\n                }\n            ],\n            \"requestInputs\":{\n                \"devicevf_device_class\":\"PNF\",\n                \"devicevf_device_esn\":\"2102351BTJ10HB000075\",\n                \"devicevf_device_name\":\"50.47\",\n                \"devicevf_device_systemIp\":\"192.168.1.47\",\n                \"devicevf_device_type\":\"AR161EW\",\n                \"devicevf_device_vendor\":\"huawei\",\n                \"devicevf_device_version\":\"1.0\",\n                \"internet_sitewanport_description\":\"internet\",\n                \"internet_sitewanport_deviceName\":\"50.47\",\n                \"internet_sitewanport_inputBandwidth\":\"100\",\n                \"internet_sitewanport_ipAddress\":\"100.2.30.9\",\n                \"internet_sitewanport_name\":\"internet\",\n                \"internet_sitewanport_outputBandwidth\":\"100\",\n                \"internet_sitewanport_portNumber\":\"0/0/2\",\n                \"internet_sitewanport_portType\":\"GE\",\n                \"internet_sitewanport_providerIpAddress\":\"100.2.30.10\",\n                \"internet_sitewanport_transportNetworkName\":\"internet\",\n                \"mpls_sitewanport_description\":\"mpls\",\n                \"mpls_sitewanport_deviceName\":\"50.47\",\n                \"mpls_sitewanport_inputBandwidth\":\"100\",\n                \"mpls_sitewanport_ipAddress\":\"10.2.30.7\",\n                \"mpls_sitewanport_name\":\"mpls\",\n                \"mpls_sitewanport_outputBandwidth\":\"100\",\n                \"mpls_sitewanport_portNumber\":\"0/0/1\",\n                \"mpls_sitewanport_portType\":\"GE\",\n                \"mpls_sitewanport_providerIpAddress\":\"10.2.30.8\",\n                \"mpls_sitewanport_transportNetworkName\":\"internet\",\n                \"sdwanvpnattachmentvf_sdwancondition_role\":\"spoke\",\n                \"sdwanvpnattachmentvf_sdwancondition_sdwanVpnName\":\"SDWANVPNInfra-2\",\n                \"sitevf_site_address\":\"CMCC International Data Center,Hongkong\",\n                \"sitevf_site_controlPoint\":\"CMCC_VCPE\",\n                \"sitevf_site_description\":\"CMCC_vGW\",\n                \"sitevf_site_emails\":\"\",\n                \"sitevf_site_latitude\":\"\",\n                \"sitevf_site_longitude\":\"\",\n                \"sitevf_site_name\":\"siteFangshanQu\",\n                \"sitevf_site_postcode\":\"999077\",\n                \"sitevf_site_role\":\"sd-wan-edge\",\n                \"sitevf_site_type\":\"single-gateway\",\n                \"sotnvpnattachmentvf_sotncondition_clientSignal\":\"\",\n                \"sotnvpnattachmentvf_sotncondition_cVLAN\":\"\",\n                \"sotnvpnattachmentvf_sotncondition_sotnVpnName\":\"SOTN L2\"\n            }\n        }\n    }\n}",
+            "relationship-list": {
+                "relationship": [
+                    {
+                        "related-to": "sp-partner",
+                        "relationship-label": "org.onap.relationships.inventory.PartOf",
+                        "related-link": "/aai/v13/business/sp-partners/sp-partner/506b87a5-72fe-4197-a307-6929c3871ab2",
+                        "relationship-data": [
+                            {
+                                "relationship-key": "sp-partner.sp-partner-id",
+                                "relationship-value": "506b87a5-72fe-4197-a307-6929c3871ab2"
+                            }
+                        ],
+                        "related-to-property": [
+                            {
+                                "property-key": "sp-partner.sp-partner-id",
+                                "property-value": "506b87a5-72fe-4197-a307-6929c3871ab2"
+                            }
+                        ]
+                    }
+                ]
+            }
+        },
+        {
+            "service-instance-id": "6a6478d1-f62f-439c-8f16-6038a44af8c3",
+            "service-instance-name": "SDWANVPNInfra-2",
+            "service-type": "E2E Service",
+            "service-role": "E2E Service",
+            "model-invariant-id": "e2b217d6-7cac-4156-9f44-f9b010b350a6",
+            "model-version-id": "20d9e7dc-f030-4230-af79-ba0bde7cbe2e",
+            "resource-version": "1537779569094",
+            "input-parameters": "{\n    \"service\":{\n        \"name\":\"SDWANVPNInfra-2\",\n        \"description\":\"SDWANVPNInfra\",\n        \"serviceInvariantUuid\":\"e2b217d6-7cac-4156-9f44-f9b010b350a6\",\n        \"serviceUuid\":\"20d9e7dc-f030-4230-af79-ba0bde7cbe2e\",\n        \"globalSubscriberId\":\"demo\",\n        \"serviceType\":\"ccvpn\",\n        \"parameters\":{\n            \"locationConstraints\":[\n\n            ],\n            \"resources\":[\n                {\n                    \"resourceName\":\"SDWANConnectivity 0\",\n                    \"resourceInvariantUuid\":\"f99a9a23-c88e-44ff-a4dc-22b88675d278\",\n                    \"resourceUuid\":\"7baa7742-3a13-4288-8330-868015adc340\",\n                    \"resourceCustomizationUuid\":\"94ec574b-2306-4cbd-8214-09662b040f73\",\n                    \"parameters\":{\n                        \"locationConstraints\":[\n\n                        ],\n                        \"resources\":[\n\n                        ],\n                        \"requestInputs\":{\n\n                        }\n                    }\n                },\n                {\n                    \"resourceName\":\"SPPartnerVF 0\",\n                    \"resourceInvariantUuid\":\"072f9238-15b0-4bc5-a5f5-f18548739470\",\n                    \"resourceUuid\":\"81b9430b-8abe-45d6-8bf9-f41a8f5c735f\",\n                    \"resourceCustomizationUuid\":\"a7baba5d-6ac3-42b5-b47d-070841303ab1\",\n                    \"parameters\":{\n                        \"locationConstraints\":[\n\n                        ],\n                        \"resources\":[\n\n                        ],\n                        \"requestInputs\":{\n\n                        }\n                    }\n                }\n            ],\n            \"requestInputs\":{\n                \"sdwanconnectivity0_name\":\"CMCCVPN\",\n                \"sdwanconnectivity0_topology\":\"hub-spoke\"\n            }\n        }\n    }\n}",
+            "relationship-list": {
+                "relationship": [
+                    {
+                        "related-to": "sp-partner",
+                        "relationship-label": "org.onap.relationships.inventory.PartOf",
+                        "related-link": "/aai/v13/business/sp-partners/sp-partner/de888731-eac8-454c-bbb2-927a85ba2d1c",
+                        "relationship-data": [
+                            {
+                                "relationship-key": "sp-partner.sp-partner-id",
+                                "relationship-value": "de888731-eac8-454c-bbb2-927a85ba2d1c"
+                            }
+                        ],
+                        "related-to-property": [
+                            {
+                                "property-key": "sp-partner.sp-partner-id",
+                                "property-value": "de888731-eac8-454c-bbb2-927a85ba2d1c"
+                            }
+                        ]
+                    }
+                ]
+            }
+        },
+        {
+            "service-instance-id": "fd0b9f0a-0d5c-4f69-a3dc-fb9cabde9db8",
+            "service-instance-name": "DcXichengQuBeijing",
+            "service-type": "E2E Service",
+            "service-role": "E2E Service",
+            "model-invariant-id": "499e5e60-c8b2-4ea6-8c4e-7739420673a9",
+            "model-version-id": "8ec97da1-1e0a-4198-9c9a-3da2c60d7974",
+            "resource-version": "1537867379064",
+            "selflink": "restconf/config/GENERIC-RESOURCE-API:services/service/289b87a5-72fe-4197-a307-6929c3831f82/service-data/service-topology/",
+            "input-parameters": "{\n    \"service\":{\n        \"name\":\"DcXichengQuBeijing\",\n        \"description\":\"SiteService\",\n        \"serviceInvariantUuid\":\"499e5e60-c8b2-4ea6-8c4e-7739420673a9\",\n        \"serviceUuid\":\"8ec97da1-1e0a-4198-9c9a-3da2c60d7974\",\n        \"globalSubscriberId\":\"demo\",\n        \"serviceType\":\"ccvpn\",\n        \"parameters\":{\n            \"locationConstraints\":[\n\n            ],\n            \"resources\":[\n                {\n                    \"resourceName\":\"SiteVF\",\n                    \"resourceInvariantUuid\":\"0c0e1cbe-6e01-4f9e-8c45-a9700ebc14df\",\n                    \"resourceUuid\":\"4ad2d390-5c51-45f5-9710-b467a4ec7a73\",\n                    \"resourceCustomizationUuid\":\"66590e07-0777-415c-af44-36347cf3ddd3\",\n                    \"parameters\":{\n                        \"locationConstraints\":[\n\n                        ],\n                        \"resources\":[\n\n                        ],\n                        \"requestInputs\":{\n\n                        }\n                    }\n                },\n                {\n                    \"resourceName\":\"mpls\",\n                    \"resourceInvariantUuid\":\"97a3e552-08c4-4697-aeeb-d8d3e09ce58e\",\n                    \"resourceUuid\":\"63d8e1af-32dc-4c71-891d-e3f7b6a976d2\",\n                    \"resourceCustomizationUuid\":\"205456e7-3dc0-40c4-8cb0-28e6c1877042\",\n                    \"parameters\":{\n                        \"locationConstraints\":[\n\n                        ],\n                        \"resources\":[\n\n                        ],\n                        \"requestInputs\":{\n\n                        }\n                    }\n                },\n                {\n                    \"resourceName\":\"deviceVF\",\n                    \"resourceInvariantUuid\":\"c726490a-0ce2-4bc7-abea-dade66bfb13d\",\n                    \"resourceUuid\":\"0e2de9d8-d76b-4134-b5f1-41e79056adbe\",\n                    \"resourceCustomizationUuid\":\"5bc1373e-9a36-4a00-8c62-784e0bc417ad\",\n                    \"parameters\":{\n                        \"locationConstraints\":[\n\n                        ],\n                        \"resources\":[\n\n                        ],\n                        \"requestInputs\":{\n\n                        }\n                    }\n                },\n                {\n                    \"resourceName\":\"sdwanvpnattachmentVF\",\n                    \"resourceInvariantUuid\":\"f714feec-1aef-4890-abba-f8f3a906935f\",\n                    \"resourceUuid\":\"709919b7-75fd-4e49-8398-67853323ff55\",\n                    \"resourceCustomizationUuid\":\"debd988f-fe04-4940-a5cb-37f61d84eab4\",\n                    \"parameters\":{\n                        \"locationConstraints\":[\n\n                        ],\n                        \"resources\":[\n\n                        ],\n                        \"requestInputs\":{\n\n                        }\n                    }\n                },\n                {\n                    \"resourceName\":\"internet\",\n                    \"resourceInvariantUuid\":\"97a3e552-08c4-4697-aeeb-d8d3e09ce58e\",\n                    \"resourceUuid\":\"63d8e1af-32dc-4c71-891d-e3f7b6a976d2\",\n                    \"resourceCustomizationUuid\":\"64b8e8ba-62b9-4db6-b420-1ca7067d63e0\",\n                    \"parameters\":{\n                        \"locationConstraints\":[\n\n                        ],\n                        \"resources\":[\n\n                        ],\n                        \"requestInputs\":{\n\n                        }\n                    }\n                },\n                {\n                    \"resourceName\":\"sotnvpnattachmentvF\",\n                    \"resourceInvariantUuid\":\"97c4a3c6-2943-41af-8717-2f3183f944be\",\n                    \"resourceUuid\":\"44b777ee-9793-465d-8053-d8e86d2e2362\",\n                    \"resourceCustomizationUuid\":\"37aeb073-c75d-4cf6-a7fa-a1af862ef58a\",\n                    \"parameters\":{\n                        \"locationConstraints\":[\n\n                        ],\n                        \"resources\":[\n\n                        ],\n                        \"requestInputs\":{\n\n                        }\n                    }\n                },\n                {\n                    \"resourceName\":\"SPPartnerVF\",\n                    \"resourceInvariantUuid\":\"072f9238-15b0-4bc5-a5f5-f18548739470\",\n                    \"resourceUuid\":\"81b9430b-8abe-45d6-8bf9-f41a8f5c735f\",\n                    \"resourceCustomizationUuid\":\"cd0b4b9c-66c6-49c5-b346-7580e4b6c394\",\n                    \"parameters\":{\n                        \"locationConstraints\":[\n\n                        ],\n                        \"resources\":[\n\n                        ],\n                        \"requestInputs\":{\n\n                        }\n                    }\n                }\n            ],\n            \"requestInputs\":{\n                \"devicevf_device_class\":\"PNF\",\n                \"devicevf_device_esn\":\"2102351BTJ10HB000075\",\n                \"devicevf_device_name\":\"50.47\",\n                \"devicevf_device_systemIp\":\"192.168.1.47\",\n                \"devicevf_device_type\":\"AR161EW\",\n                \"devicevf_device_vendor\":\"huawei\",\n                \"devicevf_device_version\":\"1.0\",\n                \"internet_sitewanport_description\":\"internet\",\n                \"internet_sitewanport_deviceName\":\"50.47\",\n                \"internet_sitewanport_inputBandwidth\":\"100\",\n                \"internet_sitewanport_ipAddress\":\"100.2.30.9\",\n                \"internet_sitewanport_name\":\"internet\",\n                \"internet_sitewanport_outputBandwidth\":\"100\",\n                \"internet_sitewanport_portNumber\":\"0/0/2\",\n                \"internet_sitewanport_portType\":\"GE\",\n                \"internet_sitewanport_providerIpAddress\":\"100.2.30.10\",\n                \"internet_sitewanport_transportNetworkName\":\"internet\",\n                \"mpls_sitewanport_description\":\"mpls\",\n                \"mpls_sitewanport_deviceName\":\"50.47\",\n                \"mpls_sitewanport_inputBandwidth\":\"100\",\n                \"mpls_sitewanport_ipAddress\":\"10.2.30.7\",\n                \"mpls_sitewanport_name\":\"mpls\",\n                \"mpls_sitewanport_outputBandwidth\":\"100\",\n                \"mpls_sitewanport_portNumber\":\"0/0/1\",\n                \"mpls_sitewanport_portType\":\"GE\",\n                \"mpls_sitewanport_providerIpAddress\":\"10.2.30.8\",\n                \"mpls_sitewanport_transportNetworkName\":\"internet\",\n                \"sdwanvpnattachmentvf_sdwancondition_role\":\"spoke\",\n                \"sdwanvpnattachmentvf_sdwancondition_sdwanVpnName\":\"SDWANVPNInfra\",\n                \"sitevf_site_address\":\"Chuangxin Building,Tianningsi,Xicheng,Beijing\",\n                \"sitevf_site_controlPoint\":\"CMCC_VCPE\",\n                \"sitevf_site_description\":\"CMCC_vGW\",\n                \"sitevf_site_emails\":\"\",\n                \"sitevf_site_latitude\":\"\",\n                \"sitevf_site_longitude\":\"\",\n                \"sitevf_site_name\":\"DcXichengQuBeijing\",\n                \"sitevf_site_postcode\":\"100095\",\n                \"sitevf_site_role\":\"sd-wan-edge\",\n                \"sitevf_site_type\":\"single-gateway\",\n                \"sotnvpnattachmentvf_sotncondition_clientSignal\":\"\",\n                \"sotnvpnattachmentvf_sotncondition_cVLAN\":\"\",\n                \"sotnvpnattachmentvf_sotncondition_sotnVpnName\":\"SOTN L2\"\n            }\n        }\n    }\n}",
+            "relationship-list": {
+                "relationship": [
+                    {
+                        "related-to": "sp-partner",
+                        "relationship-label": "org.onap.relationships.inventory.PartOf",
+                        "related-link": "/aai/v13/business/sp-partners/sp-partner/289b87a5-72fe-4197-a307-6929c3831f82",
+                        "relationship-data": [
+                            {
+                                "relationship-key": "sp-partner.sp-partner-id",
+                                "relationship-value": "289b87a5-72fe-4197-a307-6929c3831f82"
+                            }
+                        ],
+                        "related-to-property": [
+                            {
+                                "property-key": "sp-partner.sp-partner-id",
+                                "property-value": "289b87a5-72fe-4197-a307-6929c3831f82"
+                            }
+                        ]
+                    }
+                ]
+            }
+        },
+        {
+            "service-instance-id": "2d55a540-f6d3-4108-9bb4-290574b87a6c",
+            "service-instance-name": "siteLondon",
+            "service-type": "E2E Service",
+            "service-role": "E2E Service",
+            "model-invariant-id": "499e5e60-c8b2-4ea6-8c4e-7739420673a9",
+            "model-version-id": "8ec97da1-1e0a-4198-9c9a-3da2c60d7974",
+            "resource-version": "1537866122803",
+            "input-parameters": "{\n    \"service\":{\n        \"name\":\"siteLondon\",\n        \"description\":\"SiteService\",\n        \"serviceInvariantUuid\":\"499e5e60-c8b2-4ea6-8c4e-7739420673a9\",\n        \"serviceUuid\":\"8ec97da1-1e0a-4198-9c9a-3da2c60d7974\",\n        \"globalSubscriberId\":\"demo\",\n        \"serviceType\":\"ccvpn\",\n        \"parameters\":{\n            \"locationConstraints\":[\n\n            ],\n            \"resources\":[\n                {\n                    \"resourceName\":\"SiteVF\",\n                    \"resourceInvariantUuid\":\"0c0e1cbe-6e01-4f9e-8c45-a9700ebc14df\",\n                    \"resourceUuid\":\"4ad2d390-5c51-45f5-9710-b467a4ec7a73\",\n                    \"resourceCustomizationUuid\":\"66590e07-0777-415c-af44-36347cf3ddd3\",\n                    \"parameters\":{\n                        \"locationConstraints\":[\n\n                        ],\n                        \"resources\":[\n\n                        ],\n                        \"requestInputs\":{\n\n                        }\n                    }\n                },\n                {\n                    \"resourceName\":\"mpls\",\n                    \"resourceInvariantUuid\":\"97a3e552-08c4-4697-aeeb-d8d3e09ce58e\",\n                    \"resourceUuid\":\"63d8e1af-32dc-4c71-891d-e3f7b6a976d2\",\n                    \"resourceCustomizationUuid\":\"205456e7-3dc0-40c4-8cb0-28e6c1877042\",\n                    \"parameters\":{\n                        \"locationConstraints\":[\n\n                        ],\n                        \"resources\":[\n\n                        ],\n                        \"requestInputs\":{\n\n                        }\n                    }\n                },\n                {\n                    \"resourceName\":\"deviceVF\",\n                    \"resourceInvariantUuid\":\"c726490a-0ce2-4bc7-abea-dade66bfb13d\",\n                    \"resourceUuid\":\"0e2de9d8-d76b-4134-b5f1-41e79056adbe\",\n                    \"resourceCustomizationUuid\":\"5bc1373e-9a36-4a00-8c62-784e0bc417ad\",\n                    \"parameters\":{\n                        \"locationConstraints\":[\n\n                        ],\n                        \"resources\":[\n\n                        ],\n                        \"requestInputs\":{\n\n                        }\n                    }\n                },\n                {\n                    \"resourceName\":\"sdwanvpnattachmentVF\",\n                    \"resourceInvariantUuid\":\"f714feec-1aef-4890-abba-f8f3a906935f\",\n                    \"resourceUuid\":\"709919b7-75fd-4e49-8398-67853323ff55\",\n                    \"resourceCustomizationUuid\":\"debd988f-fe04-4940-a5cb-37f61d84eab4\",\n                    \"parameters\":{\n                        \"locationConstraints\":[\n\n                        ],\n                        \"resources\":[\n\n                        ],\n                        \"requestInputs\":{\n\n                        }\n                    }\n                },\n                {\n                    \"resourceName\":\"internet\",\n                    \"resourceInvariantUuid\":\"97a3e552-08c4-4697-aeeb-d8d3e09ce58e\",\n                    \"resourceUuid\":\"63d8e1af-32dc-4c71-891d-e3f7b6a976d2\",\n                    \"resourceCustomizationUuid\":\"64b8e8ba-62b9-4db6-b420-1ca7067d63e0\",\n                    \"parameters\":{\n                        \"locationConstraints\":[\n\n                        ],\n                        \"resources\":[\n\n                        ],\n                        \"requestInputs\":{\n\n                        }\n                    }\n                },\n                {\n                    \"resourceName\":\"sotnvpnattachmentvF\",\n                    \"resourceInvariantUuid\":\"97c4a3c6-2943-41af-8717-2f3183f944be\",\n                    \"resourceUuid\":\"44b777ee-9793-465d-8053-d8e86d2e2362\",\n                    \"resourceCustomizationUuid\":\"37aeb073-c75d-4cf6-a7fa-a1af862ef58a\",\n                    \"parameters\":{\n                        \"locationConstraints\":[\n\n                        ],\n                        \"resources\":[\n\n                        ],\n                        \"requestInputs\":{\n\n                        }\n                    }\n                },\n                {\n                    \"resourceName\":\"SPPartnerVF\",\n                    \"resourceInvariantUuid\":\"072f9238-15b0-4bc5-a5f5-f18548739470\",\n                    \"resourceUuid\":\"81b9430b-8abe-45d6-8bf9-f41a8f5c735f\",\n                    \"resourceCustomizationUuid\":\"cd0b4b9c-66c6-49c5-b346-7580e4b6c394\",\n                    \"parameters\":{\n                        \"locationConstraints\":[\n\n                        ],\n                        \"resources\":[\n\n                        ],\n                        \"requestInputs\":{\n\n                        }\n                    }\n                }\n            ],\n            \"requestInputs\":{\n                \"devicevf_device_class\":\"PNF\",\n                \"devicevf_device_esn\":\"2102351BTJ10HB000075\",\n                \"devicevf_device_name\":\"50.47\",\n                \"devicevf_device_systemIp\":\"192.168.1.47\",\n                \"devicevf_device_type\":\"AR161EW\",\n                \"devicevf_device_vendor\":\"huawei\",\n                \"devicevf_device_version\":\"1.0\",\n                \"internet_sitewanport_description\":\"internet\",\n                \"internet_sitewanport_deviceName\":\"50.47\",\n                \"internet_sitewanport_inputBandwidth\":\"100\",\n                \"internet_sitewanport_ipAddress\":\"100.2.30.9\",\n                \"internet_sitewanport_name\":\"internet\",\n                \"internet_sitewanport_outputBandwidth\":\"100\",\n                \"internet_sitewanport_portNumber\":\"0/0/2\",\n                \"internet_sitewanport_portType\":\"GE\",\n                \"internet_sitewanport_providerIpAddress\":\"100.2.30.10\",\n                \"internet_sitewanport_transportNetworkName\":\"internet\",\n                \"mpls_sitewanport_description\":\"mpls\",\n                \"mpls_sitewanport_deviceName\":\"50.47\",\n                \"mpls_sitewanport_inputBandwidth\":\"100\",\n                \"mpls_sitewanport_ipAddress\":\"10.2.30.7\",\n                \"mpls_sitewanport_name\":\"mpls\",\n                \"mpls_sitewanport_outputBandwidth\":\"100\",\n                \"mpls_sitewanport_portNumber\":\"0/0/1\",\n                \"mpls_sitewanport_portType\":\"GE\",\n                \"mpls_sitewanport_providerIpAddress\":\"10.2.30.8\",\n                \"mpls_sitewanport_transportNetworkName\":\"internet\",\n                \"sdwanvpnattachmentvf_sdwancondition_role\":\"spoke\",\n                \"sdwanvpnattachmentvf_sdwancondition_sdwanVpnName\":\"SDWANVPNInfra-2\",\n                \"sitevf_site_address\":\"VDF International Data Center,Hongkong\",\n                \"sitevf_site_controlPoint\":\"VDF_VCPE\",\n                \"sitevf_site_description\":\"VDF_vGW\",\n                \"sitevf_site_emails\":\"\",\n                \"sitevf_site_latitude\":\"\",\n                \"sitevf_site_longitude\":\"\",\n                \"sitevf_site_name\":\"siteLondon\",\n                \"sitevf_site_postcode\":\"999077\",\n                \"sitevf_site_role\":\"sd-wan-edge\",\n                \"sitevf_site_type\":\"single-gateway\",\n                \"sotnvpnattachmentvf_sotncondition_clientSignal\":\"\",\n                \"sotnvpnattachmentvf_sotncondition_cVLAN\":\"\",\n                \"sotnvpnattachmentvf_sotncondition_sotnVpnName\":\"SOTN L2\"\n            }\n        }\n    }\n}",
+            "relationship-list": {
+                "relationship": [
+                    {
+                        "related-to": "wan-port-config",
+                        "relationship-label": "org.onap.relationships.inventory.PartOf",
+                        "related-link": "/aai/v13/network/wan-port-configs/wan-port-config/52ae7944-12b3-4766-848e-e43088947af9",
+                        "relationship-data": [
+                            {
+                                "relationship-key": "wan-port-config.wan-port-config-id",
+                                "relationship-value": "52ae7944-12b3-4766-848e-e43088947af9"
+                            }
+                        ],
+                        "related-to-property": [
+                            {
+                                "property-key": "wan-port-config.wan-port-config-name",
+                                "property-value": "intenet"
+                            }
+                        ]
+                    },
+                    {
+                        "related-to": "site-resource",
+                        "relationship-label": "org.onap.relationships.inventory.PartOf",
+                        "related-link": "/aai/v13/network/site-resources/site-resource/a22193fc-d1b5-41a7-9033-14339838b0c5",
+                        "relationship-data": [
+                            {
+                                "relationship-key": "site-resource.site-resource-id",
+                                "relationship-value": "a22193fc-d1b5-41a7-9033-14339838b0c5"
+                            }
+                        ],
+                        "related-to-property": [
+                            {
+                                "property-key": "site-resource.site-resource-name",
+                                "property-value": "travelSite"
+                            }
+                        ]
+                    },
+                    {
+                        "related-to": "wan-port-config",
+                        "relationship-label": "org.onap.relationships.inventory.PartOf",
+                        "related-link": "/aai/v13/network/wan-port-configs/wan-port-config/9fc7c231-1b71-49e6-8390-e92b707e7615",
+                        "relationship-data": [
+                            {
+                                "relationship-key": "wan-port-config.wan-port-config-id",
+                                "relationship-value": "9fc7c231-1b71-49e6-8390-e92b707e7615"
+                            }
+                        ],
+                        "related-to-property": [
+                            {
+                                "property-key": "wan-port-config.wan-port-config-name",
+                                "property-value": "mpls"
+                            }
+                        ]
+                    },
+                    {
+                        "related-to": "device",
+                        "relationship-label": "org.onap.relationships.inventory.PartOf",
+                        "related-link": "/aai/v13/network/devices/device/f0cf1e06-7be8-4602-83cb-60d87d8e7ef3",
+                        "relationship-data": [
+                            {
+                                "relationship-key": "device.device-id",
+                                "relationship-value": "f0cf1e06-7be8-4602-83cb-60d87d8e7ef3"
+                            }
+                        ],
+                        "related-to-property": [
+                            {
+                                "property-key": "device.device-name",
+                                "property-value": "CentSpokeDevice"
+                            }
+                        ]
+                    },
+                    {
+                        "related-to": "sp-partner",
+                        "relationship-label": "org.onap.relationships.inventory.PartOf",
+                        "related-link": "/aai/v13/business/sp-partners/sp-partner/3addd6b9-b05f-4841-881c-1ce2c753513f",
+                        "relationship-data": [
+                            {
+                                "relationship-key": "sp-partner.sp-partner-id",
+                                "relationship-value": "3addd6b9-b05f-4841-881c-1ce2c753513f"
+                            }
+                        ],
+                        "related-to-property": [
+                            {
+                                "property-key": "sp-partner.sp-partner-id",
+                                "property-value": "3addd6b9-b05f-4841-881c-1ce2c753513f"
+                            }
+                        ]
+                    },
+                    {
+                        "related-to": "allotted-resource",
+                        "relationship-label": "org.onap.relationships.inventory.Uses",
+                        "related-link": "/aai/v13/business/customers/customer/demo/service-subscriptions/service-subscription/ccvpn/service-instances/service-instance/0ea94797-3772-40ff-b6fb-69f06c533be3/allotted-resources/allotted-resource/f1523ca9-6b56-482e-b3a4-a2f8dcbfba12",
+                        "relationship-data": [
+                            {
+                                "relationship-key": "customer.global-customer-id",
+                                "relationship-value": "demo"
+                            },
+                            {
+                                "relationship-key": "service-subscription.service-type",
+                                "relationship-value": "ccvpn"
+                            },
+                            {
+                                "relationship-key": "service-instance.service-instance-id",
+                                "relationship-value": "0ea94797-3772-40ff-b6fb-69f06c533be3"
+                            },
+                            {
+                                "relationship-key": "allotted-resource.id",
+                                "relationship-value": "f1523ca9-6b56-482e-b3a4-a2f8dcbfba12"
+                            }
+                        ],
+                        "related-to-property": [
+                            {
+                                "property-key": "allotted-resource.description",
+                                "property-value": "sdwan-attachment"
+                            },
+                            {
+                                "property-key": "allotted-resource.allotted-resource-name",
+                                "property-value": "sdwan ar"
+                            }
+                        ]
+                    },
+                    {
+                        "related-to": "allotted-resource",
+                        "relationship-label": "org.onap.relationships.inventory.Uses",
+                        "related-link": "/aai/v13/business/customers/customer/demo/service-subscriptions/service-subscription/ccvpn/service-instances/service-instance/8e07f832-3f50-4657-9b44-010049e8b488/allotted-resources/allotted-resource/d1a6b573-0595-4468-bab9-02465c295618",
+                        "relationship-data": [
+                            {
+                                "relationship-key": "customer.global-customer-id",
+                                "relationship-value": "demo"
+                            },
+                            {
+                                "relationship-key": "service-subscription.service-type",
+                                "relationship-value": "ccvpn"
+                            },
+                            {
+                                "relationship-key": "service-instance.service-instance-id",
+                                "relationship-value": "8e07f832-3f50-4657-9b44-010049e8b488"
+                            },
+                            {
+                                "relationship-key": "allotted-resource.id",
+                                "relationship-value": "d1a6b573-0595-4468-bab9-02465c295618"
+                            }
+                        ],
+                        "related-to-property": [
+                            {
+                                "property-key": "allotted-resource.description",
+                                "property-value": "sotn attachment"
+                            },
+                            {
+                                "property-key": "allotted-resource.allotted-resource-name",
+                                "property-value": "sotn ar"
+                            }
+                        ]
+                    }
+                ]
+            }
+        }
+    ]
+}
\ No newline at end of file
diff --git a/usecaseui-portal/src/assets/json/netWorkD3Data.json b/usecaseui-portal/src/app/mock/json/netWorkD3Data.json
index 0dbfd939..0dbfd939 100644
--- a/usecaseui-portal/src/assets/json/netWorkD3Data.json
+++ b/usecaseui-portal/src/app/mock/json/netWorkD3Data.json
diff --git a/usecaseui-portal/src/assets/json/netWorkD3Data2.json b/usecaseui-portal/src/app/mock/json/netWorkD3Data2.json
index 1ab07822..1ab07822 100644
--- a/usecaseui-portal/src/assets/json/netWorkD3Data2.json
+++ b/usecaseui-portal/src/app/mock/json/netWorkD3Data2.json
diff --git a/usecaseui-portal/src/assets/json/nsServiceTemplateParameters.json b/usecaseui-portal/src/app/mock/json/nsServiceTemplateParameters.json
index b6dfbd86..b6dfbd86 100644
--- a/usecaseui-portal/src/assets/json/nsServiceTemplateParameters.json
+++ b/usecaseui-portal/src/app/mock/json/nsServiceTemplateParameters.json
diff --git a/usecaseui-portal/src/assets/json/onboardTableData.json b/usecaseui-portal/src/app/mock/json/onboardTableData.json
index 56e5b323..56e5b323 100644
--- a/usecaseui-portal/src/assets/json/onboardTableData.json
+++ b/usecaseui-portal/src/app/mock/json/onboardTableData.json
diff --git a/usecaseui-portal/src/assets/json/p_interfaces1.json b/usecaseui-portal/src/app/mock/json/p_interfaces1.json
index 399c21b9..399c21b9 100644
--- a/usecaseui-portal/src/assets/json/p_interfaces1.json
+++ b/usecaseui-portal/src/app/mock/json/p_interfaces1.json
diff --git a/usecaseui-portal/src/assets/json/p_interfaces2.json b/usecaseui-portal/src/app/mock/json/p_interfaces2.json
index 4baf8b85..4baf8b85 100644
--- a/usecaseui-portal/src/assets/json/p_interfaces2.json
+++ b/usecaseui-portal/src/app/mock/json/p_interfaces2.json
diff --git a/usecaseui-portal/src/assets/json/pnfdetail-domain.json b/usecaseui-portal/src/app/mock/json/pnfdetail-domain.json
index c337bd97..c337bd97 100644
--- a/usecaseui-portal/src/assets/json/pnfdetail-domain.json
+++ b/usecaseui-portal/src/app/mock/json/pnfdetail-domain.json
diff --git a/usecaseui-portal/src/assets/json/progress.json b/usecaseui-portal/src/app/mock/json/progress.json
index 1a36c1e2..1a36c1e2 100644
--- a/usecaseui-portal/src/assets/json/progress.json
+++ b/usecaseui-portal/src/app/mock/json/progress.json
diff --git a/usecaseui-portal/src/assets/json/sdwanvpnServiceTemplateParameters.json b/usecaseui-portal/src/app/mock/json/sdwanvpnServiceTemplateParameters.json
index cabf0e12..cabf0e12 100644
--- a/usecaseui-portal/src/assets/json/sdwanvpnServiceTemplateParameters.json
+++ b/usecaseui-portal/src/app/mock/json/sdwanvpnServiceTemplateParameters.json
diff --git a/usecaseui-portal/src/assets/json/serviceTemplates.json b/usecaseui-portal/src/app/mock/json/serviceTemplates.json
index 8de26a7d..8de26a7d 100644
--- a/usecaseui-portal/src/assets/json/serviceTemplates.json
+++ b/usecaseui-portal/src/app/mock/json/serviceTemplates.json
diff --git a/usecaseui-portal/src/assets/json/serviceTemplates2.json b/usecaseui-portal/src/app/mock/json/serviceTemplates2.json
index 93202786..93202786 100644
--- a/usecaseui-portal/src/assets/json/serviceTemplates2.json
+++ b/usecaseui-portal/src/app/mock/json/serviceTemplates2.json
diff --git a/usecaseui-portal/src/assets/json/serviceTypes.json b/usecaseui-portal/src/app/mock/json/serviceTypes.json
index cb1c20a5..cb1c20a5 100644
--- a/usecaseui-portal/src/assets/json/serviceTypes.json
+++ b/usecaseui-portal/src/app/mock/json/serviceTypes.json
diff --git a/usecaseui-portal/src/assets/json/servicesList.json b/usecaseui-portal/src/app/mock/json/servicesList.json
index 61ddb7a5..61ddb7a5 100644
--- a/usecaseui-portal/src/assets/json/servicesList.json
+++ b/usecaseui-portal/src/app/mock/json/servicesList.json
diff --git a/usecaseui-portal/src/assets/json/servicesTableData.json b/usecaseui-portal/src/app/mock/json/servicesTableData.json
index 07d4cbe2..07d4cbe2 100644
--- a/usecaseui-portal/src/assets/json/servicesTableData.json
+++ b/usecaseui-portal/src/app/mock/json/servicesTableData.json
diff --git a/usecaseui-portal/src/assets/json/siteAddressData.json b/usecaseui-portal/src/app/mock/json/siteAddressData.json
index 4b080f50..4b080f50 100644
--- a/usecaseui-portal/src/assets/json/siteAddressData.json
+++ b/usecaseui-portal/src/app/mock/json/siteAddressData.json
diff --git a/usecaseui-portal/src/assets/json/siteServiceTemplateParameters.json b/usecaseui-portal/src/app/mock/json/siteServiceTemplateParameters.json
index 53368e32..53368e32 100644
--- a/usecaseui-portal/src/assets/json/siteServiceTemplateParameters.json
+++ b/usecaseui-portal/src/app/mock/json/siteServiceTemplateParameters.json
diff --git a/usecaseui-portal/src/assets/json/sotn-connectivity.json b/usecaseui-portal/src/app/mock/json/sotn-connectivity.json
index 6ac0a453..6ac0a453 100644
--- a/usecaseui-portal/src/assets/json/sotn-connectivity.json
+++ b/usecaseui-portal/src/app/mock/json/sotn-connectivity.json
diff --git a/usecaseui-portal/src/assets/json/sotn-connectivity2.json b/usecaseui-portal/src/app/mock/json/sotn-connectivity2.json
index 7bd55bf0..7bd55bf0 100644
--- a/usecaseui-portal/src/assets/json/sotn-connectivity2.json
+++ b/usecaseui-portal/src/app/mock/json/sotn-connectivity2.json
diff --git a/usecaseui-portal/src/assets/json/sotnvpnServiceTemplateParameters.json b/usecaseui-portal/src/app/mock/json/sotnvpnServiceTemplateParameters.json
index 21abcda1..21abcda1 100644
--- a/usecaseui-portal/src/assets/json/sotnvpnServiceTemplateParameters.json
+++ b/usecaseui-portal/src/app/mock/json/sotnvpnServiceTemplateParameters.json
diff --git a/usecaseui-portal/src/assets/json/specific_link _nfo.json b/usecaseui-portal/src/app/mock/json/specific_link_nfo.json
index e9911409..e9911409 100644
--- a/usecaseui-portal/src/assets/json/specific_link _nfo.json
+++ b/usecaseui-portal/src/app/mock/json/specific_link_nfo.json
diff --git a/usecaseui-portal/src/assets/json/status.json b/usecaseui-portal/src/app/mock/json/status.json
index eeff6f35..eeff6f35 100644
--- a/usecaseui-portal/src/assets/json/status.json
+++ b/usecaseui-portal/src/app/mock/json/status.json
diff --git a/usecaseui-portal/src/app/mock/json/status2.json b/usecaseui-portal/src/app/mock/json/status2.json
new file mode 100644
index 00000000..2932063e
--- /dev/null
+++ b/usecaseui-portal/src/app/mock/json/status2.json
@@ -0,0 +1,3 @@
+{
+    "status": "fail"
+}
\ No newline at end of file
diff --git a/usecaseui-portal/src/assets/json/url.json b/usecaseui-portal/src/app/mock/json/url.json
index e84b42d8..e84b42d8 100644
--- a/usecaseui-portal/src/assets/json/url.json
+++ b/usecaseui-portal/src/app/mock/json/url.json
diff --git a/usecaseui-portal/src/assets/json/vpnbinding.json b/usecaseui-portal/src/app/mock/json/vpnbinding.json
index 04ff2a6d..04ff2a6d 100644
--- a/usecaseui-portal/src/assets/json/vpnbinding.json
+++ b/usecaseui-portal/src/app/mock/json/vpnbinding.json
diff --git a/usecaseui-portal/src/app/mock/json/xuran_test_data.json b/usecaseui-portal/src/app/mock/json/xuran_test_data.json
new file mode 100644
index 00000000..1e6321b1
--- /dev/null
+++ b/usecaseui-portal/src/app/mock/json/xuran_test_data.json
@@ -0,0 +1,8 @@
+{
+    "esr-system-info-id": "xuran",
+    "service-url": "http://10.10.10.10:8080/",
+    "user-name": "demo",
+    "password": "demo123456!",
+    "system-type": "ONAP",
+    "resource-version": "1536221798873"
+}
\ No newline at end of file
diff --git a/usecaseui-portal/src/app/mock/mock.js b/usecaseui-portal/src/app/mock/mock.js
new file mode 100644
index 00000000..2864d4c5
--- /dev/null
+++ b/usecaseui-portal/src/app/mock/mock.js
@@ -0,0 +1,7 @@
+const fakeData = require('./fakedata.js');
+module.exports = {
+    //Mock json
+    'customer_info': fakeData.customer,
+    'alarm_formdata_multiple': fakeData,
+    'home': fakeData.home,
+}
\ No newline at end of file
diff --git a/usecaseui-portal/src/app/mock/server.js b/usecaseui-portal/src/app/mock/server.js
new file mode 100644
index 00000000..45d6b2b5
--- /dev/null
+++ b/usecaseui-portal/src/app/mock/server.js
@@ -0,0 +1,87 @@
+const jsonServer = require('json-server');
+const server = jsonServer.create();
+const middlewares = jsonServer.defaults();
+
+// Set default middlewares (logger, static, cors and no-cache)
+server.use(middlewares);
+
+// Get mock data
+const fs = require('fs');
+const path = require('path');
+
+let localJsonDb = {};  //import mock datas
+const fakeoriginalData = require('./mock.js');  //import datas created in fakedata.js
+const mockFolder = './src/app/mock/json'; //mock json path folder
+const filePath = path.resolve(mockFolder);
+
+fileDisplay(filePath);
+
+function fileDisplay(filePath) {
+    let fileList = [];
+    let originPath = [];
+    let rewriter = {};
+    // Return filelist on based of filePath
+    const files = fs.readdirSync(filePath);
+    files.forEach((filename) => {
+        // Get filename's absolute path
+        let filedir = path.join(filePath, filename);
+        // Get the file information according to the file path and return an fs.Stats object
+        fs.stat(filedir, (err, stats) => {
+            if (err) {
+                console.warn('Get files failed......');
+            } else {
+                let isFile = stats.isFile(); // files
+                let isDir = stats.isDirectory(); //files folder
+                if (isFile) {
+                    fileList.push(path.basename(filedir, '.json'));
+                    fileList.forEach(item => {
+                        let paser = item.split("_").join("/");
+                        originPath.push({ route: `/${paser}`, origin: `/${item}` })
+                        originPath.map(route => {
+                            rewriter[route.route] = route.origin;
+                        })
+                        localJsonDb[item] = getjsonContent(item);
+                    })
+                }
+                if (isDir) {
+                    console.warn("=====> DO NOT support mock data in folder");
+                    fileDisplay(filedir);
+                }
+                Object.keys(fakeoriginalData).map(item => {
+                    localJsonDb[item] = fakeoriginalData[item];
+                })
+            }
+        })
+    })
+    setTimeout(() => {
+        // console.log(rewriter, "===rewriter", localJsonDb, "===localJsonDb", fileList, "===fileList");
+        // console.log(localJsonDb, "===localJsonDb");
+        serverRewrite(rewriter);
+        runServer(localJsonDb);
+    }, 100)
+}
+function getjsonContent(path) {
+    let newpath = `./src/app/mock/json/${path}.json`;
+    let result = JSON.parse(fs.readFileSync(newpath));
+    return result;
+}
+
+//only multi router data needs jsonServer.rewriter
+function serverRewrite(routerpath) {
+    let routerpathArr = routerpath;
+    //rewrite mock multiple routers here
+    Object.keys(fakeoriginalData).map(item => {
+        let newPath = item.split("_").join("/")
+        routerpathArr[`/${newPath}`] = `/${item}`;
+    })
+    //start to rewrite routers
+    server.use(jsonServer.rewriter(routerpathArr));
+}
+
+function runServer(db) {
+    server.use(jsonServer.router(db));
+}
+
+server.listen(3004, () => {
+    console.log('Mock Server is successfully running on port 3004 �')
+});
diff --git a/usecaseui-portal/src/app/myhttp.service.ts b/usecaseui-portal/src/app/myhttp.service.ts
index 778b739c..d85076fa 100644
--- a/usecaseui-portal/src/app/myhttp.service.ts
+++ b/usecaseui-portal/src/app/myhttp.service.ts
@@ -16,7 +16,7 @@
 import { Injectable } from '@angular/core';
 import { HttpClient, HttpHeaders, HttpParams, HttpResponse } from '@angular/common/http';
 import { Observable } from 'rxjs/Observable';
-import { homeData, homeVmLineData, servicesSelectData, servicesTableData, creatensData, onboardTableData, onboardDataVNF, onboardDataPNF , baseUrl} from './dataInterface';
+import { homeData, homeVmLineData, servicesSelectData, servicesTableData, creatensData, onboardTableData, onboardDataVNF, onboardDataPNF, baseUrl } from './core/models/dataInterface';
 
 @Injectable()
 export class MyhttpService {
@@ -24,7 +24,7 @@ export class MyhttpService {
   constructor(private http: HttpClient) { }
   baseUrl = baseUrl.baseUrl;
   url = {
-    listSortMasters:this.baseUrl+"/listSortMasters",
+    listSortMasters: this.baseUrl + "/listSortMasters",
     customers: this.baseUrl + "/uui-lcm/customers",
     orchestrators: this.baseUrl + "/uui-lcm/orchestrators",
     serviceType: this.baseUrl + "/uui-lcm/customers/" + "*_*" + "/service-subscriptions",
@@ -47,7 +47,7 @@ export class MyhttpService {
     nsProgress: this.baseUrl + "/uui-lcm/jobs/getNsLcmJobStatus/" + "*_*" + "?responseId=0&serviceInstanceId=",
     e2eScale: this.baseUrl + "/services/scaleServices/",
     e2e_nsdata: this.baseUrl + "/getServiceInstanceById/customerId/",
-    updateccvpn:this.baseUrl + "/uui-lcm/services/updateService/",
+    updateccvpn: this.baseUrl + "/uui-lcm/services/updateService/",
 
     //The following api is about ccvpn details topology
     allottedResource: this.baseUrl + "/uui-sotn/getAllottedResources",
@@ -100,17 +100,17 @@ export class MyhttpService {
         inputs: ""
       };
       return this.http.post<any>(this.url.nstemplateParameters, body);
-    }else if(type == "e2e"){
-        let url = this.url.e2etemplateParameters.replace("*_*", template.uuid) + template.toscaModelURL;
-        return this.http.get<any>(url);
-    }else {
-        let body = {
-            csarId: template.uuid,
-            packageType: "Service",
-            inputs: ""
-        };
-        let url = this.url.templateParameters.replace("*_*", template.uuid);
-        return this.http.post<any>(url, body);
+    } else if (type == "e2e") {
+      let url = this.url.e2etemplateParameters.replace("*_*", template.uuid) + template.toscaModelURL;
+      return this.http.get<any>(url);
+    } else {
+      let body = {
+        csarId: template.uuid,
+        packageType: "Service",
+        inputs: ""
+      };
+      let url = this.url.templateParameters.replace("*_*", template.uuid);
+      return this.http.post<any>(url, body);
     }
   }
 
@@ -135,8 +135,8 @@ export class MyhttpService {
     return this.http.post<any>(this.url.ns_createService2 + params, requestBody);
   }
 
-  updateccvpn(id,requestBody){
-       return this.http.put<any>(this.url.updateccvpn + id,requestBody);// online
+  updateccvpn(id, requestBody) {
+    return this.http.put<any>(this.url.updateccvpn + id, requestBody);// online
   }
   // Delete interface
   deleteInstance(obj) {
@@ -178,11 +178,11 @@ export class MyhttpService {
 
   // Query progress interface
   getProgress(obj) {
-    let url = this.url.progress.replace("*_*", obj.serviceId) + obj.operationId + "?operationType="+obj.operationType;
+    let url = this.url.progress.replace("*_*", obj.serviceId) + obj.operationId + "?operationType=" + obj.operationType;
     return this.http.get<any>(url);
   }
-  getNsProgress(jobid,serviceId,operationType){
-    let url = this.url.nsProgress.replace("*_*",jobid) + serviceId + "&operationType="+operationType;
+  getNsProgress(jobid, serviceId, operationType) {
+    let url = this.url.nsProgress.replace("*_*", jobid) + serviceId + "&operationType=" + operationType;
     return this.http.get<any>(url);
   }
 
diff --git a/usecaseui-portal/src/app/components/charts/bar/bar.component.html b/usecaseui-portal/src/app/shared/components/charts/bar/bar.component.html
index 7c1eee6b..7c1eee6b 100644
--- a/usecaseui-portal/src/app/components/charts/bar/bar.component.html
+++ b/usecaseui-portal/src/app/shared/components/charts/bar/bar.component.html
diff --git a/usecaseui-portal/src/app/components/charts/bar/bar.component.less b/usecaseui-portal/src/app/shared/components/charts/bar/bar.component.less
index e69de29b..e69de29b 100644
--- a/usecaseui-portal/src/app/components/charts/bar/bar.component.less
+++ b/usecaseui-portal/src/app/shared/components/charts/bar/bar.component.less
diff --git a/usecaseui-portal/src/app/components/charts/bar/bar.component.spec.ts b/usecaseui-portal/src/app/shared/components/charts/bar/bar.component.spec.ts
index d979ffb6..d979ffb6 100644
--- a/usecaseui-portal/src/app/components/charts/bar/bar.component.spec.ts
+++ b/usecaseui-portal/src/app/shared/components/charts/bar/bar.component.spec.ts
diff --git a/usecaseui-portal/src/app/components/charts/bar/bar.component.ts b/usecaseui-portal/src/app/shared/components/charts/bar/bar.component.ts
index 609ce3ee..609ce3ee 100644
--- a/usecaseui-portal/src/app/components/charts/bar/bar.component.ts
+++ b/usecaseui-portal/src/app/shared/components/charts/bar/bar.component.ts
diff --git a/usecaseui-portal/src/app/components/charts/line/line.component.html b/usecaseui-portal/src/app/shared/components/charts/line/line.component.html
index e032eb27..e032eb27 100644
--- a/usecaseui-portal/src/app/components/charts/line/line.component.html
+++ b/usecaseui-portal/src/app/shared/components/charts/line/line.component.html
diff --git a/usecaseui-portal/src/app/components/charts/line/line.component.less b/usecaseui-portal/src/app/shared/components/charts/line/line.component.less
index e69de29b..e69de29b 100644
--- a/usecaseui-portal/src/app/components/charts/line/line.component.less
+++ b/usecaseui-portal/src/app/shared/components/charts/line/line.component.less
diff --git a/usecaseui-portal/src/app/components/charts/line/line.component.spec.ts b/usecaseui-portal/src/app/shared/components/charts/line/line.component.spec.ts
index afe70654..afe70654 100644
--- a/usecaseui-portal/src/app/components/charts/line/line.component.spec.ts
+++ b/usecaseui-portal/src/app/shared/components/charts/line/line.component.spec.ts
diff --git a/usecaseui-portal/src/app/components/charts/line/line.component.ts b/usecaseui-portal/src/app/shared/components/charts/line/line.component.ts
index 25881699..25881699 100644
--- a/usecaseui-portal/src/app/components/charts/line/line.component.ts
+++ b/usecaseui-portal/src/app/shared/components/charts/line/line.component.ts
diff --git a/usecaseui-portal/src/app/components/charts/pie/pie.component.html b/usecaseui-portal/src/app/shared/components/charts/pie/pie.component.html
index d063f22a..d063f22a 100644
--- a/usecaseui-portal/src/app/components/charts/pie/pie.component.html
+++ b/usecaseui-portal/src/app/shared/components/charts/pie/pie.component.html
diff --git a/usecaseui-portal/src/app/components/charts/pie/pie.component.less b/usecaseui-portal/src/app/shared/components/charts/pie/pie.component.less
index e69de29b..e69de29b 100644
--- a/usecaseui-portal/src/app/components/charts/pie/pie.component.less
+++ b/usecaseui-portal/src/app/shared/components/charts/pie/pie.component.less
diff --git a/usecaseui-portal/src/app/components/charts/pie/pie.component.spec.ts b/usecaseui-portal/src/app/shared/components/charts/pie/pie.component.spec.ts
index 528da25c..528da25c 100644
--- a/usecaseui-portal/src/app/components/charts/pie/pie.component.spec.ts
+++ b/usecaseui-portal/src/app/shared/components/charts/pie/pie.component.spec.ts
diff --git a/usecaseui-portal/src/app/components/charts/pie/pie.component.ts b/usecaseui-portal/src/app/shared/components/charts/pie/pie.component.ts
index dc5c80a0..dc5c80a0 100644
--- a/usecaseui-portal/src/app/components/charts/pie/pie.component.ts
+++ b/usecaseui-portal/src/app/shared/components/charts/pie/pie.component.ts
diff --git a/usecaseui-portal/src/app/components/customer/customer.component.html b/usecaseui-portal/src/app/shared/components/customer/customer.component.html
index 04975e41..08a23935 100644
--- a/usecaseui-portal/src/app/components/customer/customer.component.html
+++ b/usecaseui-portal/src/app/shared/components/customer/customer.component.html
@@ -14,38 +14,45 @@
     limitations under the License.
 -->
 <div class="content">
-    <div class="chearts">
-        <div class="Cu">
-          <p> {{"i18nTextDefine_Instance_Count_of_Customer" | translate}} </p>
-          <app-pie [initData]="CUChartInit" [chartData]="CUChartData" *ngIf="serviceChart"></app-pie>
-          <div *ngIf="!serviceChart"  style="color: #ddd; font-weight: 700;font-size: 19px;height: 200px;text-align: center;line-height: 8;">No Service Instances </div>
-          <!-- <div class="legend"></div><span> {{"i18nTextDefine_users" | translate}} </span> -->
-        </div>
-        <div class="type">
-          <p> {{"i18nTextDefine_Instance_Count_of_ServiceType" | translate}} </p>
-          <app-bar [initData]="serviceInit" [chartData]="serviceData"></app-bar>
-          <div class="footname" style="width: 100%;height: 40px;line-height: 40px;text-align: center;color: #3C4F8C;">
-            <img src="./assets/images/customerBarUser.png" alt="customerName" style="margin-right: 5px;margin-bottom: 3px;">
-            {{this.serviceInit["customer"]}}
-          </div>
-        </div>
+  <div class="chearts">
+    <div class="Cu">
+      <p> {{"i18nTextDefine_Instance_Count_of_Customer" | translate}} </p>
+      <app-pie [initData]="CUChartInit" [chartData]="CUChartData" *ngIf="serviceChart"></app-pie>
+      <div *ngIf="!serviceChart"
+        style="color: #ddd; font-weight: 700;font-size: 19px;height: 200px;text-align: center;line-height: 8;">No
+        Service Instances </div>
+      <!-- <div class="legend"></div><span> {{"i18nTextDefine_users" | translate}} </span> -->
+    </div>
+    <div class="type">
+      <p> {{"i18nTextDefine_Instance_Count_of_ServiceType" | translate}} </p>
+      <app-bar [initData]="serviceInit" [chartData]="serviceData"></app-bar>
+      <div class="footname" style="width: 100%;height: 40px;line-height: 40px;text-align: center;color: #3C4F8C;">
+        <img src="../../../../assets/images/customerBarUser.png" alt="customerName"
+          style="margin-right: 5px;margin-bottom: 3px;">
+        {{this.serviceInit["customer"]}}
       </div>
+    </div>
+  </div>
   <div class="customer">
     <div class="customer_title">
       <div class="customers">
         <span> {{"i18nTextDefine_Customer" | translate}} </span>
-        <img  src="./assets/images/customer04.png" alt="" (click)="this.customeradd  = !this.customeradd" style="cursor: pointer">
+        <img src="../../../../assets/images/customer04.png" alt="" (click)="this.customeradd  = !this.customeradd"
+          style="cursor: pointer">
       </div>
     </div>
     <div class="customer_detail">
       <div class="customer_add" *ngIf="customeradd">
-        <input nz-input placeholder=" {{'i18nTextDefine_Input_customerName' | translate}} " class="customer_name" nzSize="default"  [(ngModel)]="addNewCustomer">
-        <button nz-button nzType="primary" class="customer_addbut" (click) = "createNewCustomer(notificationModel)">{{"i18nTextDefine_Add" | translate}}</button>
+        <input nz-input placeholder=" {{'i18nTextDefine_Input_customerName' | translate}} " class="customer_name"
+          nzSize="default" [(ngModel)]="addNewCustomer">
+        <button nz-button nzType="primary" class="customer_addbut"
+          (click)="createNewCustomer(notificationModel)">{{"i18nTextDefine_Add" | translate}}</button>
       </div>
       <div class="customer_list">
         <ul>
-          <li *ngFor ="let item of AllCustomersdata,let i = index"  [ngClass]="{active: chose ==i}" (click)="choseCustomer(i,item)">
-            <img src="./assets/images/customer05.png" alt="">
+          <li *ngFor="let item of AllCustomersdata,let i = index" [ngClass]="{active: chose ==i}"
+            (click)="choseCustomer(i,item)">
+            <img src="../../../../assets/images/customer05.png" alt="">
             <span>{{item.name}}</span>
             <i class="anticon anticon-delete" nzType="info" (click)="deleteCustomerModel(item)"></i>
           </li>
@@ -57,30 +64,34 @@
     <div class="services_type_title">
       <div class="servicess">
         <span> {{"i18nTextDefine_ServiceType" | translate}} </span>
-        <img src="./assets/images/customer03.png" alt="" (click)="this.servicesadd  = !this.servicesadd " style="cursor: pointer">
+        <img src="../../../../assets/images/customer03.png" alt="" (click)="this.servicesadd  = !this.servicesadd "
+          style="cursor: pointer">
       </div>
     </div>
     <div class="services_type_detail">
       <div class="services_add" *ngIf="servicesadd">
-        <input nz-input placeholder=" {{'i18nTextDefine_Input_ServicesType' | translate}} " class="services_name" nzSize="default" [(ngModel)]="addNewServiceType">
-        <button nz-button nzType="primary" class="services_addbut" (click) = "createNewServiceType(notificationModel)">{{"i18nTextDefine_Add" | translate}}</button>
+        <input nz-input placeholder=" {{'i18nTextDefine_Input_ServicesType' | translate}} " class="services_name"
+          nzSize="default" [(ngModel)]="addNewServiceType">
+        <button nz-button nzType="primary" class="services_addbut"
+          (click)="createNewServiceType(notificationModel)">{{"i18nTextDefine_Add" | translate}}</button>
       </div>
       <div class="services_list">
         <div class="border_size"></div>
         <div style="padding:0 20px;">
-            <ul>
-              <li *ngFor = "let item of AllServiceTypes" >
-                <span>{{item.type}}</span>
-                <i class="anticon anticon-delete" nzType="info" (click)="deleteServiceTypeModel(item)"></i>
-              </li>
-            </ul>
+          <ul>
+            <li *ngFor="let item of AllServiceTypes">
+              <span>{{item.type}}</span>
+              <i class="anticon anticon-delete" nzType="info" (click)="deleteServiceTypeModel(item)"></i>
+            </li>
+          </ul>
         </div>
       </div>
     </div>
   </div>
 
-  <nz-modal nzWidth="428"  [(nzVisible)]="deleteCustomerModelVisible" nzTitle=" {{'i18nTextDefine_delete' | translate}} " (nzOnCancel)="deleteCustomerCancel()"
-            (nzOnOk)="deleteCustomerOk(notificationModel)"  nzClassName="deleteModel"  nzCancelText=" {{'i18nTextDefine_Cancel' | translate}} " nzOkText=" {{'i18nTextDefine_modelOk' | translate}} ">
+  <nz-modal nzWidth="428" [(nzVisible)]="deleteCustomerModelVisible" nzTitle=" {{'i18nTextDefine_delete' | translate}} "
+    (nzOnCancel)="deleteCustomerCancel()" (nzOnOk)="deleteCustomerOk(notificationModel)" nzClassName="deleteModel"
+    nzCancelText=" {{'i18nTextDefine_Cancel' | translate}} " nzOkText=" {{'i18nTextDefine_modelOk' | translate}} ">
     <h3><span style="color: red">*&nbsp;</span> {{"i18nTextDefine_Input_Sure_deleteCustomer" | translate}} </h3>
     <div class="question">
       <h4> {{"i18nTextDefine_CustomerName" | translate}} :</h4>
@@ -91,8 +102,10 @@
       <div class="deleteModelContent">{{thisdeleteCustomer["id"]}}</div>
     </div>
   </nz-modal>
-  <nz-modal nzWidth="428" [(nzVisible)]="deleteServiceTypeModelVisible" nzTitle=" {{'i18nTextDefine_delete' | translate}} " (nzOnCancel)="deleteServiceTypeCancel()"
-            (nzOnOk)="deleteServiceTypeOk(notificationModel)"  nzClassName="deleteModel deleteServiceTypeModel"  nzCancelText=" {{'i18nTextDefine_Cancel' | translate}} " nzOkText=" {{'i18nTextDefine_modelOk' | translate}} ">
+  <nz-modal nzWidth="428" [(nzVisible)]="deleteServiceTypeModelVisible"
+    nzTitle=" {{'i18nTextDefine_delete' | translate}} " (nzOnCancel)="deleteServiceTypeCancel()"
+    (nzOnOk)="deleteServiceTypeOk(notificationModel)" nzClassName="deleteModel deleteServiceTypeModel"
+    nzCancelText=" {{'i18nTextDefine_Cancel' | translate}} " nzOkText=" {{'i18nTextDefine_modelOk' | translate}} ">
     <h3><span style="color: red">*&nbsp;</span> {{"i18nTextDefine_Input_Sure_deleteServiceType" | translate}} </h3>
     <div class="question">
       <h4> {{"i18nTextDefine_CustomerName" | translate}} :</h4>
@@ -108,12 +121,12 @@
     </div>
   </nz-modal>
   <!--2019.08.14 add notification-->
-  <ng-template #notificationModel >
+  <ng-template #notificationModel>
     <div class="ant-notification-notice-content">
       <div class="ant-notification-notice-with-icon">
-                        <span class="ant-notification-notice-icon">
-                            <img src="{{this.notificationAttributes.imgPath}}" alt="{{notificationAttributes.status}}">
-                        </span>
+        <span class="ant-notification-notice-icon">
+          <img src="{{this.notificationAttributes.imgPath}}" alt="{{notificationAttributes.status}}">
+        </span>
         <div class="ant-notification-notice-message" *ngIf="notificationAttributes.title == 'Customer'">
           {{"i18nTextDefine_"+notificationAttributes.title | translate}}&nbsp;
           {{"i18nTextDefine_"+notificationAttributes.action | translate}}&nbsp;&nbsp;{{"i18nTextDefine_"+notificationAttributes.status | translate}}
diff --git a/usecaseui-portal/src/app/components/customer/customer.component.less b/usecaseui-portal/src/app/shared/components/customer/customer.component.less
index 7d329230..7d329230 100644
--- a/usecaseui-portal/src/app/components/customer/customer.component.less
+++ b/usecaseui-portal/src/app/shared/components/customer/customer.component.less
diff --git a/usecaseui-portal/src/app/components/customer/customer.component.spec.ts b/usecaseui-portal/src/app/shared/components/customer/customer.component.spec.ts
index f185e7a7..f185e7a7 100644
--- a/usecaseui-portal/src/app/components/customer/customer.component.spec.ts
+++ b/usecaseui-portal/src/app/shared/components/customer/customer.component.spec.ts
diff --git a/usecaseui-portal/src/app/components/customer/customer.component.ts b/usecaseui-portal/src/app/shared/components/customer/customer.component.ts
index d4d843ff..a0cf8338 100644
--- a/usecaseui-portal/src/app/components/customer/customer.component.ts
+++ b/usecaseui-portal/src/app/shared/components/customer/customer.component.ts
@@ -13,17 +13,17 @@
     See the License for the specific language governing permissions and
     limitations under the License.
 */
-import {Component, OnInit, TemplateRef} from '@angular/core';
-import { ManagemencsService } from '../../managemencs.service';
+import { Component, OnInit, TemplateRef } from '@angular/core';
+import { ManagemencsService } from '../../../core/services/managemencs.service';
 import { NzNotificationService } from 'ng-zorro-antd';
 @Component({
-  selector: 'app-customer',
-  templateUrl: './customer.component.html',
-  styleUrls: ['./customer.component.less']
+    selector: 'app-customer',
+    templateUrl: './customer.component.html',
+    styleUrls: ['./customer.component.less']
 })
 export class CustomerComponent implements OnInit {
-  public chose = '';
- 
+    public chose = '';
+
     constructor(
         private managemencs: ManagemencsService,
         private notification: NzNotificationService
@@ -40,8 +40,8 @@ export class CustomerComponent implements OnInit {
     // Get all customers
     active;
     selectCustomer = {
-        name:null,
-        id:null
+        name: null,
+        id: null
     };
     addNewCustomer = null;
     addNewServiceType = null;
@@ -49,30 +49,30 @@ export class CustomerComponent implements OnInit {
     deleteServiceTypeModelVisible = false;
     //2019.08.14 add
     notificationAttributes = {
-        "title":"Customer",
-        "imgPath":"../../../../assets/images/execute-inproess.png",
-        "action":"Create",
-        "status":"InProgress",
-        "name":""
+        "title": "Customer",
+        "imgPath": "../../../../assets/images/execute-inproess.png",
+        "action": "Create",
+        "status": "InProgress",
+        "name": ""
     };
     notificationModelShow(template: TemplateRef<{}>): void {
-        console.log(this.notificationAttributes,"notificationModelShow show");
+        console.log(this.notificationAttributes, "notificationModelShow show");
         this.notification.template(template);
     }
-    notificationSuccess(notificationModel){
-        this.notificationAttributes.imgPath = "../../../assets/images/execute-success.png";
+    notificationSuccess(notificationModel) {
+        this.notificationAttributes.imgPath = "../../../../assets/images/execute-success.png";
         this.notificationAttributes.status = "Success";
         this.notificationModelShow(notificationModel);
     }
-    notificationFailed(notificationModel){
-        this.notificationAttributes.imgPath = "../../../assets/images/execute-faild.png";
+    notificationFailed(notificationModel) {
+        this.notificationAttributes.imgPath = "../../../../assets/images/execute-faild.png";
         this.notificationAttributes.status = "Failed";
         this.notificationModelShow(notificationModel);
     }
     getAllCustomers() {
         this.managemencs.getAllCustomers().subscribe((data) => {
             this.AllCustomersdata = data.map((item) => {
-                return {name: item["subscriber-name"], id: item["global-customer-id"]}
+                return { name: item["subscriber-name"], id: item["global-customer-id"] }
             });
             this.active = this.selectCustomer = this.AllCustomersdata[0];
             this.serviceInit["customer"] = this.AllCustomersdata[0].name;
@@ -87,7 +87,7 @@ export class CustomerComponent implements OnInit {
     getServiceTypes(item) {
         this.managemencs.getServiceTypes(item).subscribe((data) => {
             this.AllServiceTypes = data.map((item) => {
-                return {type: item["service-type"], id: item["global-customer-id"]}
+                return { type: item["service-type"], id: item["global-customer-id"] }
             });
         })
     }
@@ -139,7 +139,7 @@ export class CustomerComponent implements OnInit {
                 },
                 labelLine: {
                     normal: {
-                      show: false
+                        show: false
                     }
                 },
                 itemStyle: {
@@ -174,19 +174,19 @@ export class CustomerComponent implements OnInit {
     // get customers chart pie
     Pie_name = [];
     Pie_value = [];
-    serviceChart=true;
+    serviceChart = true;
     serviceNumber;
     getCustomersPie() {
         this.managemencs.getCustomersPie().subscribe((data) => {
             this.serviceNumber = data.serviceTotalNum;
-          if (this.serviceNumber>0) {
-              this.serviceChart = true;
-          } else {
-            this.serviceChart = false;
-          }
+            if (this.serviceNumber > 0) {
+                this.serviceChart = true;
+            } else {
+                this.serviceChart = false;
+            }
             this.CUChartData = {
                 series: [{
-                    data:data.customerServiceList
+                    data: data.customerServiceList
                 }]
             }
             console.log(this.CUChartData)
@@ -387,21 +387,21 @@ export class CustomerComponent implements OnInit {
     createNewCustomer(notificationModel) {
         let createParams = {
             customerId: this.addNewCustomer,
-            'global-customer-id':this.addNewCustomer,
-            'subscriber-name':this.addNewCustomer,
-            'subscriber-type':'INFRA'
+            'global-customer-id': this.addNewCustomer,
+            'subscriber-name': this.addNewCustomer,
+            'subscriber-type': 'INFRA'
         };
- 	this.notificationAttributes = {
-            "title":"Customer",
-            "imgPath":"../../../../assets/images/execute-inproess.png",
-            "action":"Create",
-            "status":"InProgress",
-            "name":this.addNewCustomer
+        this.notificationAttributes = {
+            "title": "Customer",
+            "imgPath": "../../../../assets/images/execute-inproess.png",
+            "action": "Create",
+            "status": "InProgress",
+            "name": this.addNewCustomer
         };
         this.notificationModelShow(notificationModel);
         this.managemencs.createCustomer(this.addNewCustomer, createParams).subscribe((data) => {
             if (data["status"] == 'SUCCESS') {
-               this.notificationSuccess(notificationModel);
+                this.notificationSuccess(notificationModel);
                 this.getAllCustomers();
                 console.log(data, "Interface returned success")
             } else {
@@ -412,10 +412,10 @@ export class CustomerComponent implements OnInit {
     }
 
     // Customer delete model
-     thisdeleteCustomer={
-        name:null,
-         id:null
-     };
+    thisdeleteCustomer = {
+        name: null,
+        id: null
+    };
     deleteCustomerModel(itemCustomer) {
         this.thisdeleteCustomer = itemCustomer;
         this.deleteCustomerModelVisible = true;
@@ -425,31 +425,31 @@ export class CustomerComponent implements OnInit {
     }
     deleteCustomerOk(notificationModel) {
         this.deleteCustomerModelVisible = false;
-        this.getCustomerVersion(this.thisdeleteCustomer,notificationModel);
+        this.getCustomerVersion(this.thisdeleteCustomer, notificationModel);
         this.notificationAttributes = {
-            "title":"Customer",
-            "imgPath":"../../../../assets/images/execute-inproess.png",
-            "action":"delete",
-            "status":"InProgress",
-            "name":this.thisdeleteCustomer.name
+            "title": "Customer",
+            "imgPath": "../../../../assets/images/execute-inproess.png",
+            "action": "delete",
+            "status": "InProgress",
+            "name": this.thisdeleteCustomer.name
         };
         this.notificationModelShow(notificationModel);
     }
-    getCustomerVersion(thisdeleteCustomer,notificationModel){
+    getCustomerVersion(thisdeleteCustomer, notificationModel) {
         this.managemencs.getdeleteCustomerVersion(thisdeleteCustomer).subscribe((data) => {
             if (data["status"] == 'SUCCESS') {
                 let params = {
-                    customerId:thisdeleteCustomer.id,
-                    version:data["result"]["resource-version"]
+                    customerId: thisdeleteCustomer.id,
+                    version: data["result"]["resource-version"]
                 };
-                this.deleteCustomer(params,notificationModel);
+                this.deleteCustomer(params, notificationModel);
                 console.log(data, "Interface returned success")
             } else {
                 console.log(data, "Interface returned error")
             }
         })
     }
-    deleteCustomer(params,notificationModel){
+    deleteCustomer(params, notificationModel) {
         this.managemencs.deleteSelectCustomer(params).subscribe((data) => {
             if (data["status"] == 'SUCCESS') {
                 this.notificationSuccess(notificationModel);
@@ -466,17 +466,17 @@ export class CustomerComponent implements OnInit {
         let createParams = {
             customer: this.selectCustomer,
             ServiceType: this.addNewServiceType,
-            "service-type":this.addNewServiceType,
-            "temp-ub-sub-account-id":"sotnaccount"
+            "service-type": this.addNewServiceType,
+            "temp-ub-sub-account-id": "sotnaccount"
         };
-	this.notificationAttributes = {
-            "title":"ServiceType",
-            "imgPath":"../../../../assets/images/execute-inproess.png",
-            "action":"Create",
-            "status":"InProgress",
-            "name":this.addNewServiceType
+        this.notificationAttributes = {
+            "title": "ServiceType",
+            "imgPath": "../../../../assets/images/execute-inproess.png",
+            "action": "Create",
+            "status": "InProgress",
+            "name": this.addNewServiceType
         };
-	this.notificationModelShow(notificationModel);
+        this.notificationModelShow(notificationModel);
         this.managemencs.createServiceType(createParams).subscribe((data) => {
             if (data["status"] == 'SUCCESS') {
                 this.notificationSuccess(notificationModel);
@@ -491,8 +491,8 @@ export class CustomerComponent implements OnInit {
     }
 
     // ServiceType delete model
-    thisdeleteServiceType={
-        type:null
+    thisdeleteServiceType = {
+        type: null
     };
     deleteServiceTypeModel(itemServiceType) {
         this.thisdeleteServiceType = itemServiceType;
@@ -510,39 +510,39 @@ export class CustomerComponent implements OnInit {
             customerId: this.selectCustomer,
             ServiceType: this.thisdeleteServiceType["type"]
         };
-	this.notificationAttributes = {
-            "title":"ServiceType",
-            "imgPath":"../../../../assets/images/execute-inproess.png",
-            "action":"delete",
-            "status":"InProgress",
-            "name":this.thisdeleteServiceType["type"]
+        this.notificationAttributes = {
+            "title": "ServiceType",
+            "imgPath": "../../../../assets/images/execute-inproess.png",
+            "action": "delete",
+            "status": "InProgress",
+            "name": this.thisdeleteServiceType["type"]
         };
         this.notificationModelShow(notificationModel);
         this.managemencs.getdeleteServiceTypeVersion(paramss).subscribe((data) => {
             console.log(data)
             if (data["status"] == 'SUCCESS') {
                 let params = {
-                    customerId:this.selectCustomer,
-                    ServiceType:this.thisdeleteServiceType["type"],
-                    version:data["result"]["resource-version"]
+                    customerId: this.selectCustomer,
+                    ServiceType: this.thisdeleteServiceType["type"],
+                    version: data["result"]["resource-version"]
                 };
-                this.deleteServiceType(params,notificationModel);
+                this.deleteServiceType(params, notificationModel);
                 console.log(data, "Interface returned success")
             } else {
                 console.log(data, "Interface returned error")
             }
         })
     }
-    deleteServiceType(params,notificationModel){
+    deleteServiceType(params, notificationModel) {
         this.managemencs.deleteSelectServiceType(params).subscribe((data) => {
             if (data["status"] == 'SUCCESS') {
-  		this.notificationSuccess(notificationModel);
+                this.notificationSuccess(notificationModel);
                 this.getServiceTypes(params.customerId);
                 this.getCustomersColumn(params.customerId);
                 this.getAllCustomers();
                 console.log(data, "Interface returned success")
             } else {
-		this.notificationFailed(notificationModel);	
+                this.notificationFailed(notificationModel);
                 console.log(data, "Interface returned error")
             }
         })
diff --git a/usecaseui-portal/src/app/components/details/details.component.css b/usecaseui-portal/src/app/shared/components/details/details.component.css
index 0b5493d7..ec6bd37f 100644
--- a/usecaseui-portal/src/app/components/details/details.component.css
+++ b/usecaseui-portal/src/app/shared/components/details/details.component.css
@@ -40,7 +40,7 @@
   width: 60px;
   height: 10px;
   transform: translate(-30px, 0);
-  background: url(../../../assets/images/tildeimg.png) no-repeat center center;
+  background: url(../../../../assets/images/tildeimg.png) no-repeat center center;
   background-color: #fff;
 }
 .content .header .headerlist {
@@ -80,17 +80,17 @@
   outline: none;
   cursor: pointer;
   background-color: #fff;
-  background: url(../../../assets/images/open-close2.png) no-repeat center -22px;
+  background: url(../../../../assets/images/open-close2.png) no-repeat center -22px;
 }
 .content button:hover {
-  background: url(../../../assets/images/open-close2.png) no-repeat center -66px;
+  background: url(../../../../assets/images/open-close2.png) no-repeat center -66px;
 }
 .content .buttonActive {
   transform: translate(-44px, -22px);
-  background: url(../../../assets/images/open-close2.png) no-repeat center 0px;
+  background: url(../../../../assets/images/open-close2.png) no-repeat center 0px;
 }
 .content .buttonActive:hover {
-  background: url(../../../assets/images/open-close2.png) no-repeat center -44px;
+  background: url(../../../../assets/images/open-close2.png) no-repeat center -44px;
 }
 .content h2.detailtitle {
   font: 700 24px/18px 'Times New Roman';
diff --git a/usecaseui-portal/src/app/components/details/details.component.html b/usecaseui-portal/src/app/shared/components/details/details.component.html
index 62770b60..62770b60 100644
--- a/usecaseui-portal/src/app/components/details/details.component.html
+++ b/usecaseui-portal/src/app/shared/components/details/details.component.html
diff --git a/usecaseui-portal/src/app/components/details/details.component.less b/usecaseui-portal/src/app/shared/components/details/details.component.less
index a27357ef..c27bfd01 100644
--- a/usecaseui-portal/src/app/components/details/details.component.less
+++ b/usecaseui-portal/src/app/shared/components/details/details.component.less
@@ -41,7 +41,7 @@
             width: 60px;
             height: 10px;
             transform: translate(-30px,0);
-            background: url(../../../assets/images/tildeimg.png) no-repeat center center;
+            background: url(../../../../assets/images/tildeimg.png) no-repeat center center;
             background-color: #fff;
         }
         .headerlist {
@@ -82,16 +82,16 @@
         outline: none;
         cursor: pointer;
         background-color: #fff;
-        background: url(../../../assets/images/open-close2.png) no-repeat center -22px;
+        background: url(../../../../assets/images/open-close2.png) no-repeat center -22px;
         &:hover {
-            background: url(../../../assets/images/open-close2.png) no-repeat center -66px;
+            background: url(../../../../assets/images/open-close2.png) no-repeat center -66px;
         }
     }
     .buttonActive {
         transform: translate(-44px,-22px);
-        background: url(../../../assets/images/open-close2.png) no-repeat center -0px;
+        background: url(../../../../assets/images/open-close2.png) no-repeat center -0px;
         &:hover {
-            background: url(../../../assets/images/open-close2.png) no-repeat center -44px;
+            background: url(../../../../assets/images/open-close2.png) no-repeat center -44px;
         }
     }
     h2.detailtitle {
@@ -105,7 +105,4 @@
         // transition: all 0.3s linear;
         overflow: hidden;
     }
-    .detailshow {
-
-    }
 }
\ No newline at end of file
diff --git a/usecaseui-portal/src/app/components/details/details.component.spec.ts b/usecaseui-portal/src/app/shared/components/details/details.component.spec.ts
index 1d5cbeb8..1d5cbeb8 100644
--- a/usecaseui-portal/src/app/components/details/details.component.spec.ts
+++ b/usecaseui-portal/src/app/shared/components/details/details.component.spec.ts
diff --git a/usecaseui-portal/src/app/components/details/details.component.ts b/usecaseui-portal/src/app/shared/components/details/details.component.ts
index 5eed3daf..dea6caaa 100644
--- a/usecaseui-portal/src/app/components/details/details.component.ts
+++ b/usecaseui-portal/src/app/shared/components/details/details.component.ts
@@ -14,8 +14,8 @@
     limitations under the License.
 */
 import { Component, OnInit, Input } from '@angular/core';
-import { slideUpDown } from '../../animates';
-import { HomesService } from '../../homes.service';
+import { slideUpDown } from '../../../animates';
+import { HomesService } from '../../../core/services/homes.service';
 
 @Component({
   selector: 'app-details',
diff --git a/usecaseui-portal/src/app/components/e2e-creation/e2e-creation.component.css b/usecaseui-portal/src/app/shared/components/e2e-creation/e2e-creation.component.css
index 5dce6c92..5dce6c92 100644
--- a/usecaseui-portal/src/app/components/e2e-creation/e2e-creation.component.css
+++ b/usecaseui-portal/src/app/shared/components/e2e-creation/e2e-creation.component.css
diff --git a/usecaseui-portal/src/app/components/e2e-creation/e2e-creation.component.html b/usecaseui-portal/src/app/shared/components/e2e-creation/e2e-creation.component.html
index 49cba838..da673bf0 100644
--- a/usecaseui-portal/src/app/components/e2e-creation/e2e-creation.component.html
+++ b/usecaseui-portal/src/app/shared/components/e2e-creation/e2e-creation.component.html
@@ -13,6 +13,7 @@
     See the License for the specific language governing permissions and
     limitations under the License.
 -->
+<!--<h3 class="title"> Services List </h3>-->
 <div class="model creation-model">
     <!-- Create data -->
     <div class="top-title">
diff --git a/usecaseui-portal/src/app/components/e2e-creation/e2e-creation.component.less b/usecaseui-portal/src/app/shared/components/e2e-creation/e2e-creation.component.less
index 35b91799..edbd2db0 100644
--- a/usecaseui-portal/src/app/components/e2e-creation/e2e-creation.component.less
+++ b/usecaseui-portal/src/app/shared/components/e2e-creation/e2e-creation.component.less
@@ -59,14 +59,14 @@ hr {
         display: inline-block;
         width: 35px;
         height: 35px;
-        background:url("../../../assets/images/Return-icon.png") no-repeat!important;
+        background:url("../../../../assets/images/Return-icon.png") no-repeat!important;
         background-size: 100%!important;
         border-radius:4px;
         color: #D7D7D7;
         cursor: pointer;
     }
     .back:hover{
-        background: url("../../../assets/images/Return-icon-active.png")!important;
+        background: url("../../../../assets/images/Return-icon-active.png")!important;
         background-size: 100%!important;
     }
     .top-title h3.title {
diff --git a/usecaseui-portal/src/app/components/e2e-creation/e2e-creation.component.spec.ts b/usecaseui-portal/src/app/shared/components/e2e-creation/e2e-creation.component.spec.ts
index de00c43f..de00c43f 100644
--- a/usecaseui-portal/src/app/components/e2e-creation/e2e-creation.component.spec.ts
+++ b/usecaseui-portal/src/app/shared/components/e2e-creation/e2e-creation.component.spec.ts
diff --git a/usecaseui-portal/src/app/shared/components/e2e-creation/e2e-creation.component.ts b/usecaseui-portal/src/app/shared/components/e2e-creation/e2e-creation.component.ts
new file mode 100644
index 00000000..068fb039
--- /dev/null
+++ b/usecaseui-portal/src/app/shared/components/e2e-creation/e2e-creation.component.ts
@@ -0,0 +1,357 @@
+/*
+    Copyright (C) 2019 CMCC, Inc. and others. 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.
+*/
+import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
+import { MyhttpService } from '../../../core/services/myhttp.service';
+import * as d3 from 'd3';
+
+@Component({
+  selector: 'app-e2e-creation',
+  templateUrl: './e2e-creation.component.html',
+  styleUrls: ['./e2e-creation.component.less']
+})
+export class E2eCreationComponent implements OnInit {
+
+  constructor(private myhttp: MyhttpService) { }
+
+  ngOnInit() {
+    this.gete2eTemParameters(this.e2e_ns_temParametersContent);
+    this.getVimInfo();
+    this.getSdnControllers();
+    console.log(this.createParams);
+  }
+
+  @Output() e2eCloseCreate = new EventEmitter();
+  @Output() nsCloseCreate = new EventEmitter();
+  @Input() createParams;
+  @Input() e2e_ns_temParametersContent;
+
+
+  // e2e serviceTemplateParameters
+  templateParameters = {
+    invariantUUID: "",
+    uuid: "",
+    name: "",
+    type: "",
+    version: "",
+    description: "",
+    category: "",
+    subcategory: "",
+    customizationUuid: "",
+    inputs: [],
+    nestedTemplates: []
+  };
+  // ns serviceTemplateParameters
+  nsTemplateParameters = {
+    inputs: {},
+    inputs2: [],
+    vnfs: []
+  }
+  roote2e = {
+    "name": "e2e",
+    "type": "e2e",
+    "children": []
+  };
+
+  rootns = {
+    "name": "ns",
+    "type": "ns",
+    "children": []
+  };
+
+  imgmap = {
+    '1': '../../../../assets/images/create-e2e.png',
+    '2': '../../../../assets/images/create-ns.png',
+    '3': '../../../../assets/images/create-vnf.png',
+  };
+  gete2eTemParameters(data) { //Get template parameters
+    let type = this.createParams.commonParams.templateType == "E2E Service" ? "e2e" : "ns";
+    console.log(this.createParams);
+    console.log(data);
+    if (type == "e2e") {
+      this.templateParameters = data;
+      this.templateParameters.nestedTemplates.forEach((item) => {
+        item.inputs = item.inputs.filter((input) => { return input.type !== "sdn_controller" });
+      })
+      this.templateParameters.nestedTemplates.map((item, index) => {
+        let nsIndex = {
+          "name": "ns",
+          "type": "ns",
+          "children": []
+        };
+        nsIndex.children = item.nestedTemplates.map((item, index) => {
+          return {
+            "name": "vnf",
+            "type": "vnf",
+          }
+        });
+        this.roote2e.children.push(nsIndex);
+      });
+      console.log(this.templateParameters);
+      console.log(this.roote2e)
+    } else if (type == "ns") {
+      if (data["model"] != undefined && typeof data["model"] == 'string') {
+        this.nsTemplateParameters = JSON.parse(data["model"]);
+        console.log(data["model"]);
+      } else {
+        this.nsTemplateParameters = data;
+      }
+      console.log(this.nsTemplateParameters);
+      this.nsTemplateParameters["inputs2"] = [];
+      let inputs = this.nsTemplateParameters.inputs;
+      for (let key in inputs) {
+        this.nsTemplateParameters["inputs2"].push({ name: key, type: inputs[key].type, value: inputs[key].value })
+      }
+      this.rootns.children = this.nsTemplateParameters.vnfs.map((item, index) => {
+        return {
+          "name": "vnf",
+          "type": "vnf",
+        }
+      });
+      console.log(this.nsTemplateParameters);
+    }
+
+    this.drawImage(type)
+
+  }
+  vimInfos = [];
+  getVimInfo() {
+    this.myhttp.getVimInfo()
+      .subscribe((data) => {
+        this.vimInfos = data.map((item) => { return { name: item['cloud-owner'], id: item['cloud-region-id'] } });
+      })
+  };
+  sdnControllers = [];
+  getSdnControllers() {
+    this.myhttp.getSdnControllers()
+      .subscribe((data) => {
+        this.sdnControllers = data.map((item) => { return { name: item['thirdparty-sdnc-id'], id: item['thirdparty-sdnc-id'] } });
+      })
+  }
+
+  // e2e requstbody
+  service = {
+    name: "",
+    description: "",
+    COS: "",
+    EBS: "",
+    serviceInvariantUuid: "",
+    serviceUuid: "", // uuid ??
+    globalSubscriberId: "",   // "customer.id",
+    serviceType: "",    // "serviceType.value",
+    parameters: {
+      locationConstraints: [
+
+      ],
+      resources: [],
+      requestInputs: {},
+    }
+
+  }
+
+  // ns requstbody
+  ns_service = {
+    csarId: "",
+    nsName: "",
+    description: "",
+    context: {
+      globalCustomerId: "",
+      serviceType: ""
+    }
+  }
+  ns_service2 = {
+    locationConstraints: [
+
+    ],
+    additionalParamForNs: {
+    }
+  }
+  submit() {
+    let type = this.createParams.commonParams.templateType == "E2E Service" ? "e2e" : "ns";
+    if (type == "e2e") {
+      this.service.serviceInvariantUuid = this.templateParameters.invariantUUID;
+      this.service.serviceUuid = this.templateParameters.uuid;
+      this.service.globalSubscriberId = this.createParams.commonParams.customer.id;
+      this.service.serviceType = this.createParams.commonParams.serviceType.name;
+
+      this.templateParameters.inputs.forEach((ipnut) => {
+        this.service.parameters.requestInputs[ipnut.name] = ipnut.value == undefined ? ipnut.defaultValue : ipnut.value;
+      })
+
+      this.templateParameters.nestedTemplates.forEach((item) => {
+        let nsService = {
+          resourceName: item.name,
+          resourceInvariantUuid: item.invariantUUID,
+          resourceUuid: item.uuid,
+          resourceCustomizationUuid: item.customizationUuid,
+          parameters: {
+            locationConstraints: [],
+            resources: [],
+            requestInputs: {}
+          }
+        }
+        item.inputs.forEach((input) => {
+          if (input.type == "vf_location") {
+            let location = {
+              vnfProfileId: input.name,
+              locationConstraints: {
+                cloudOwner: input.value.name,
+                cloudRegionId: input.value.id
+              }
+            }
+            nsService.parameters.locationConstraints.push(location);
+          } else {
+            nsService.parameters.requestInputs[input.name] = input.value == undefined ? input.defaultValue : input.value;
+          }
+        })
+        this.service.parameters.resources.push(nsService);
+      })
+      console.log(this.service)
+      this.service.parameters.requestInputs['orchestrator'] = this.createParams.orchestrator.name;
+      if (this.createParams.isSol005Interface) {
+        this.service.parameters.requestInputs['isSol005Interface'] = this.createParams.isSol005Interface;
+      }
+      this.e2eCloseCreate.emit({ service: this.service });
+
+    } else if (type == "ns") {
+      //create ns instance
+      this.ns_service.csarId = this.createParams.template.id;
+      this.ns_service.context.globalCustomerId = this.createParams.commonParams.customer.id;
+      this.ns_service.context.serviceType = this.createParams.commonParams.serviceType.name;
+
+      this.nsTemplateParameters.inputs2.forEach((input) => {
+        this.ns_service2.additionalParamForNs[input.name] = input.value == undefined ? input.defaultValue : input.value;
+      })
+      this.nsTemplateParameters.vnfs.forEach((vnf) => {
+        let vnfparams = {
+          vnfProfileId: vnf.properties.id,
+          locationConstraints: {
+            cloudOwner: vnf.value.name,
+            cloudRegionId: vnf.value.id
+          }
+        }
+        this.ns_service2.locationConstraints.push(vnfparams);
+      })
+      console.log(this.ns_service2);
+
+      let requstbody = {
+        step1: this.ns_service,
+        step2: this.ns_service2
+      }
+      this.nsCloseCreate.emit(requstbody);
+    }
+
+  }
+  goback() {
+    this.e2eCloseCreate.emit();
+  }
+
+
+
+  drawImage(type) {
+    if (type == "e2e") {
+      this.render(this.roote2e, this.imgmap)
+    } else if (type == "ns") {
+      this.render(this.rootns, this.imgmap)
+    }
+
+
+  }
+
+  render(data, imgmap) {
+    var width = document.getElementById("createChart").clientWidth,
+      height = document.getElementById("createChart").clientHeight;
+    var cluster = d3.layout.tree()
+      .size([width, height]);
+    var diagonal = d3.svg.diagonal()
+      .projection(function (d) {
+        return [d.x - 18, d.y + 40];
+      });
+    var svg = d3.select("svg");
+
+    //marker
+    var marker =
+      svg.append("marker")
+        .attr("id", "resolved")
+        .attr("markerUnits", "strokeWidth")
+        .attr("markerUnits", "userSpaceOnUse")
+        .attr("viewBox", "0 -5 10 10")
+        .attr("refX", 22)
+        .attr("refY", 0)
+        .attr("markerWidth", 20)
+        .attr("markerHeight", 20)
+        .attr("orient", "auto")
+        .attr("stroke-width", 1)
+        .append("circle")
+        .attr("cx", 5)
+        .attr("cy", 0)
+        .attr("r", 2)
+        .attr("stroke-width", 1)
+        .style("stroke", "#2F8BF7")
+        .attr('fill', 'white');
+    var i = 0;
+    var nodes = cluster.nodes(data).reverse();
+    nodes.forEach(function (d) {
+      d.y = d.depth * 200 + 100;
+
+    });
+
+    var links = cluster.links(nodes);
+
+    var linkEnter = svg.selectAll("path.link")
+      .data(links);
+
+    linkEnter.enter().append("path")
+      .attr("class", "link")
+      .attr("d", diagonal)
+      .style("stroke", "#2F8BF7")
+      .style('stroke-width', '1px')
+      .attr("marker-end", "url(#resolved)")
+      .style("fill", "none")
+      // .style("fill-opacity", 1)
+      .attr("id", function (d, i) {
+        return "mypath" + i;
+      });
+
+    var node = svg.selectAll(".node")
+      .data(nodes)
+      .enter()
+      .append("g")
+      .attr("class", "node")
+      .attr("transform", function (d) {
+        return "translate(" + (d.x + -50) + "," + (d.y) + ")";
+      });
+
+    node.append('image')
+      .attr('xlink:href', function (d) {
+        if (d.type == "e2e") {
+          return imgmap[1];
+        } else if (d.type == "ns") {
+          return imgmap[2];
+        } else if (d.type == "vnf") {
+          return imgmap[3];
+        }
+
+      })
+      .style('width', '12%')
+      .style("cursor", "pointer")
+      .attr("x", 0)
+      .attr("y", 0)
+      .attr("rx", 3);
+
+
+  }
+
+}
diff --git a/usecaseui-portal/src/app/components/e2e-detail/e2e-detail.component.html b/usecaseui-portal/src/app/shared/components/e2e-detail/e2e-detail.component.html
index 0a753a30..c0953a90 100644
--- a/usecaseui-portal/src/app/components/e2e-detail/e2e-detail.component.html
+++ b/usecaseui-portal/src/app/shared/components/e2e-detail/e2e-detail.component.html
@@ -13,7 +13,7 @@
     See the License for the specific language governing permissions and
     limitations under the License.
 -->
-
+<!--<h3 class="title"> Services List </h3>-->
 <div class="model creation-model">
 
   <div class="top-title">
@@ -23,7 +23,6 @@
     </div>
   </div>
   <div class="detaildata fl">
-      <!--e2e detail data demonstration-->
     <div *ngIf="detailParams.serviceDomain == 'E2E Service'" class="baseparms clearfix">
       <div class="vnf-box">
         <h3> {{"i18nTextDefine_Base" | translate}} </h3>
@@ -57,7 +56,7 @@
         </ul>
       </div>
     </div>
-      <!--e2e detail data demonstration-->
+
     <div *ngIf="detailParams.serviceDomain=='Network Service'" class="baseparms clearfix">
       <div class="vnf-box">
         <h3> {{"i18nTextDefine_Base" | translate}} </h3>
@@ -94,7 +93,7 @@
     </div>
   </div>
 
-  <!--topo chart -->
+  <!-- chart -->
   <div class="chart fr">
     <div id="createChart">
       <svg width="100%" height="100%">
diff --git a/usecaseui-portal/src/app/components/e2e-detail/e2e-detail.component.less b/usecaseui-portal/src/app/shared/components/e2e-detail/e2e-detail.component.less
index 3f03af34..e560cd9b 100644
--- a/usecaseui-portal/src/app/components/e2e-detail/e2e-detail.component.less
+++ b/usecaseui-portal/src/app/shared/components/e2e-detail/e2e-detail.component.less
@@ -45,14 +45,14 @@ hr {
     display: inline-block;
     width: 35px;
     height: 35px;
-    background:url("../../../assets/images/Return-icon.png") no-repeat!important;
+    background:url("../../../../assets/images/Return-icon.png") no-repeat!important;
     background-size: 100%!important;
     border-radius:4px;
     color: #D7D7D7;
     cursor: pointer;
   }
   .back:hover{
-    background: url("../../../assets/images/Return-icon-active.png")!important;
+    background: url("../../../../assets/images/Return-icon-active.png")!important;
     background-size: 100%!important;
   }
   .top-title h3.title {
diff --git a/usecaseui-portal/src/app/components/e2e-detail/e2e-detail.component.spec.ts b/usecaseui-portal/src/app/shared/components/e2e-detail/e2e-detail.component.spec.ts
index ad24a477..ad24a477 100644
--- a/usecaseui-portal/src/app/components/e2e-detail/e2e-detail.component.spec.ts
+++ b/usecaseui-portal/src/app/shared/components/e2e-detail/e2e-detail.component.spec.ts
diff --git a/usecaseui-portal/src/app/shared/components/e2e-detail/e2e-detail.component.ts b/usecaseui-portal/src/app/shared/components/e2e-detail/e2e-detail.component.ts
new file mode 100644
index 00000000..7618c98c
--- /dev/null
+++ b/usecaseui-portal/src/app/shared/components/e2e-detail/e2e-detail.component.ts
@@ -0,0 +1,246 @@
+/*
+    Copyright (C) 2019 CMCC, Inc. and others. 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.
+*/
+
+import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
+import { MyhttpService } from '../../../core/services/myhttp.service';
+import * as d3 from 'd3';
+
+@Component({
+  selector: 'app-e2e-detail',
+  templateUrl: './e2e-detail.component.html',
+  styleUrls: ['./e2e-detail.component.less']
+})
+export class E2eDetailComponent implements OnInit {
+
+  constructor(private myhttp: MyhttpService) {
+  }
+
+  ngOnInit() {
+    // this.getDetails();
+    this.dataInit();
+  }
+
+  @Input() detailParams;
+
+  @Output() closeDetail = new EventEmitter();
+  serviceInstanceName: any;
+  serviceType: any;
+  input_parameters: any;
+  nsinput_parameters: any;
+
+  // e2e
+  service = {
+    name: "",
+    description: "",
+  };
+  e2e_nestedTemplates = [];
+  e2e_requestInputs: any;
+
+  ns_service = {
+    name: "",
+    description: ""
+  }
+  ns_nestedTemplates = [];
+  ns_requestInputs = {};
+  roote2e = {
+    "name": "e2e",
+    "type": "e2e",
+    "children": []
+  };
+
+  rootns = {
+    "name": "ns",
+    "type": "ns",
+    "children": []
+  };
+
+  imgmap = {
+    '1': '../../../../assets/images/create-e2e.png',
+    '2': '../../../../assets/images/create-ns.png',
+    '3': '../../../../assets/images/create-vnf.png',
+  };
+
+  getKeys(item) {
+    return Object.keys(item);
+  }
+
+  dataInit() {
+    console.log(this.detailParams);
+    this.serviceInstanceName = this.detailParams['service-instance-name'] || this.detailParams["nsName"];
+    if (this.detailParams.serviceDomain == 'E2E Service') {
+      this.input_parameters = JSON.stringify(this.detailParams['input-parameters']);
+      this.input_parameters = JSON.parse(this.input_parameters);
+      console.log(this.input_parameters);
+      this.service = {
+        name: this.input_parameters.service.name,
+        description: this.input_parameters.service.description,
+      };
+      if (this.input_parameters.service.parameters.requestInputs != undefined && Object.keys(this.input_parameters.service.parameters.requestInputs).length > 0) {
+        this.e2e_requestInputs = this.input_parameters.service.parameters.requestInputs;
+      }
+      if (this.input_parameters.service.parameters.resources != undefined && this.input_parameters.service.parameters.resources.length > 0) {
+        this.input_parameters.service.parameters.resources.map((item, i) => {
+          let nestedTemplates = {
+            name: null,
+            vnfs: []
+          };
+          nestedTemplates.name = item.resourceName;
+          item.parameters.locationConstraints.map((its, k) => {
+            nestedTemplates.vnfs.push({
+              "vf_location": its.locationConstraints.cloudOwner
+            })
+          });
+          this.e2e_nestedTemplates.push(nestedTemplates);
+
+          let nsIndex = {
+            "name": "ns",
+            "type": "ns",
+            "children": []
+          };
+          nsIndex.children = item.parameters.locationConstraints.map((itemits, index) => {
+            return {
+              "name": "vnf",
+              "type": "vnf",
+            }
+          });
+          this.roote2e.children.push(nsIndex);
+        });
+        console.log(this.e2e_nestedTemplates);
+        console.log(this.e2e_requestInputs);
+        console.log(this.roote2e)
+      }
+    } else if (this.detailParams.serviceDomain == 'Network Service') {
+      this.ns_service = {
+        name: this.detailParams.name || this.detailParams['service-instance-name'],
+        description: this.detailParams.description || null
+      };
+      if (this.detailParams.requestInputs != undefined && Object.keys(this.detailParams.requestInputs).length > 0) {
+        this.ns_requestInputs = this.detailParams.requestInputs;
+      }
+      this.ns_nestedTemplates = this.detailParams.childServiceInstances;
+      this.rootns.children = this.ns_nestedTemplates.map((item, index) => {
+        return {
+          "name": "vnf",
+          "type": "vnf"
+        }
+      });
+      console.log(this.ns_nestedTemplates);
+      console.log(this.ns_requestInputs);
+      console.log(this.rootns)
+    }
+    this.drawImage(this.detailParams.serviceDomain)
+  }
+
+  goback() {
+    this.closeDetail.emit();
+  }
+
+  drawImage(type) {
+    if (type == "E2E Service") {
+      this.render(this.roote2e, this.imgmap)
+    } else if (type == "Network Service") {
+      this.render(this.rootns, this.imgmap)
+    }
+
+
+  }
+
+  render(data, imgmap) {
+    var width = document.getElementById("createChart").clientWidth,
+      height = document.getElementById("createChart").clientHeight;
+    var cluster = d3.layout.tree()
+      .size([width, height]);
+    var diagonal = d3.svg.diagonal()
+      .projection(function (d) {
+        return [d.x - 18, d.y + 40];
+      });
+    var svg = d3.select("svg");
+
+    //marker
+    var marker =
+      svg.append("marker")
+        .attr("id", "resolved")
+        .attr("markerUnits", "strokeWidth")
+        .attr("markerUnits", "userSpaceOnUse")
+        .attr("viewBox", "0 -5 10 10")
+        .attr("refX", 22)
+        .attr("refY", 0)
+        .attr("markerWidth", 20)
+        .attr("markerHeight", 20)
+        .attr("orient", "auto")
+        .attr("stroke-width", 1)
+        .append("circle")
+        .attr("cx", 5)
+        .attr("cy", 0)
+        .attr("r", 2)
+        .attr("stroke-width", 1)
+        .style("stroke", "#2F8BF7")
+        .attr('fill', 'white');
+    var i = 0;
+    var nodes = cluster.nodes(data).reverse();
+    nodes.forEach(function (d) {
+      d.y = d.depth * 200 + 100;
+
+    });
+
+    var links = cluster.links(nodes);
+
+    var linkEnter = svg.selectAll("path.link")
+      .data(links);
+
+    linkEnter.enter().append("path")
+      .attr("class", "link")
+      .attr("d", diagonal)
+      .style("stroke", "#2F8BF7")
+      .style('stroke-width', '1px')
+      .attr("marker-end", "url(#resolved)")
+      .style("fill", "none")
+      // .style("fill-opacity", 1)
+      .attr("id", function (d, i) {
+        return "mypath" + i;
+      });
+
+    var node = svg.selectAll(".node")
+      .data(nodes)
+      .enter()
+      .append("g")
+      .attr("class", "node")
+      .attr("transform", function (d) {
+        return "translate(" + (d.x + -50) + "," + (d.y) + ")";
+      });
+
+    node.append('image')
+      .attr('xlink:href', function (d) {
+        if (d.type == "e2e") {
+          return imgmap[1];
+        } else if (d.type == "ns") {
+          return imgmap[2];
+        } else if (d.type == "vnf") {
+          return imgmap[3];
+        }
+
+      })
+      .style('width', '12%')
+      .style("cursor", "pointer")
+      .attr("x", 0)
+      .attr("y", 0)
+      .attr("rx", 3);
+
+
+  }
+
+
+}
diff --git a/usecaseui-portal/src/app/components/graphiclist/graphiclist.component.css b/usecaseui-portal/src/app/shared/components/graphiclist/graphiclist.component.css
index 2f6519c4..9830c9e8 100644
--- a/usecaseui-portal/src/app/components/graphiclist/graphiclist.component.css
+++ b/usecaseui-portal/src/app/shared/components/graphiclist/graphiclist.component.css
@@ -84,8 +84,8 @@
   display: inline-block;
   width: 16px;
   height: 16px;
-  background: url(../../../assets/images/icon.png) center -113px;
+  background: url(../../../../assets/images/icon.png) center -113px;
 }
 .content .tablelist .action .details:hover {
-  background: url(../../../assets/images/icon.png) no-repeat center -128px;
+  background: url(../../../../assets/images/icon.png) no-repeat center -128px;
 }
diff --git a/usecaseui-portal/src/app/components/graphiclist/graphiclist.component.html b/usecaseui-portal/src/app/shared/components/graphiclist/graphiclist.component.html
index 317d48b0..317d48b0 100644
--- a/usecaseui-portal/src/app/components/graphiclist/graphiclist.component.html
+++ b/usecaseui-portal/src/app/shared/components/graphiclist/graphiclist.component.html
diff --git a/usecaseui-portal/src/app/components/graphiclist/graphiclist.component.less b/usecaseui-portal/src/app/shared/components/graphiclist/graphiclist.component.less
index 24e92fbd..e302c7fd 100644
--- a/usecaseui-portal/src/app/components/graphiclist/graphiclist.component.less
+++ b/usecaseui-portal/src/app/shared/components/graphiclist/graphiclist.component.less
@@ -127,9 +127,9 @@
                 display: inline-block;
                 width: 16px;
                 height: 16px;
-                background: url(../../../assets/images/icon.png) center -113px;
+                background: url(../../../../assets/images/icon.png) center -113px;
                 &:hover {
-                    background: url(../../../assets/images/icon.png) no-repeat center -128px;
+                    background: url(../../../../assets/images/icon.png) no-repeat center -128px;
                 }
             }
         }
diff --git a/usecaseui-portal/src/app/components/graphiclist/graphiclist.component.spec.ts b/usecaseui-portal/src/app/shared/components/graphiclist/graphiclist.component.spec.ts
index 013db38a..013db38a 100644
--- a/usecaseui-portal/src/app/components/graphiclist/graphiclist.component.spec.ts
+++ b/usecaseui-portal/src/app/shared/components/graphiclist/graphiclist.component.spec.ts
diff --git a/usecaseui-portal/src/app/components/graphiclist/graphiclist.component.ts b/usecaseui-portal/src/app/shared/components/graphiclist/graphiclist.component.ts
index ccffac08..c05d3b7c 100644
--- a/usecaseui-portal/src/app/components/graphiclist/graphiclist.component.ts
+++ b/usecaseui-portal/src/app/shared/components/graphiclist/graphiclist.component.ts
@@ -14,7 +14,7 @@
     limitations under the License.
 */
 import { Component, OnInit, Input, Output, EventEmitter, HostBinding } from '@angular/core';
-import { HomesService } from '../../homes.service';
+import { HomesService } from '../../../core/services/homes.service';
 import * as addDays from 'date-fns/add_days';
 import { DatePipe } from "@angular/common"
 
diff --git a/usecaseui-portal/src/app/components/performance-details/performance-details.component.css b/usecaseui-portal/src/app/shared/components/performance-details/performance-details.component.css
index 0b5493d7..ec6bd37f 100644
--- a/usecaseui-portal/src/app/components/performance-details/performance-details.component.css
+++ b/usecaseui-portal/src/app/shared/components/performance-details/performance-details.component.css
@@ -40,7 +40,7 @@
   width: 60px;
   height: 10px;
   transform: translate(-30px, 0);
-  background: url(../../../assets/images/tildeimg.png) no-repeat center center;
+  background: url(../../../../assets/images/tildeimg.png) no-repeat center center;
   background-color: #fff;
 }
 .content .header .headerlist {
@@ -80,17 +80,17 @@
   outline: none;
   cursor: pointer;
   background-color: #fff;
-  background: url(../../../assets/images/open-close2.png) no-repeat center -22px;
+  background: url(../../../../assets/images/open-close2.png) no-repeat center -22px;
 }
 .content button:hover {
-  background: url(../../../assets/images/open-close2.png) no-repeat center -66px;
+  background: url(../../../../assets/images/open-close2.png) no-repeat center -66px;
 }
 .content .buttonActive {
   transform: translate(-44px, -22px);
-  background: url(../../../assets/images/open-close2.png) no-repeat center 0px;
+  background: url(../../../../assets/images/open-close2.png) no-repeat center 0px;
 }
 .content .buttonActive:hover {
-  background: url(../../../assets/images/open-close2.png) no-repeat center -44px;
+  background: url(../../../../assets/images/open-close2.png) no-repeat center -44px;
 }
 .content h2.detailtitle {
   font: 700 24px/18px 'Times New Roman';
diff --git a/usecaseui-portal/src/app/components/performance-details/performance-details.component.html b/usecaseui-portal/src/app/shared/components/performance-details/performance-details.component.html
index a5d44a7f..a5d44a7f 100644
--- a/usecaseui-portal/src/app/components/performance-details/performance-details.component.html
+++ b/usecaseui-portal/src/app/shared/components/performance-details/performance-details.component.html
diff --git a/usecaseui-portal/src/app/components/performance-details/performance-details.component.less b/usecaseui-portal/src/app/shared/components/performance-details/performance-details.component.less
index c1ca74f5..dd94af84 100644
--- a/usecaseui-portal/src/app/components/performance-details/performance-details.component.less
+++ b/usecaseui-portal/src/app/shared/components/performance-details/performance-details.component.less
@@ -40,7 +40,7 @@
             width: 60px;
             height: 10px;
             transform: translate(-30px,0);
-            background: url(../../../assets/images/tildeimg.png) no-repeat center center;
+            background: url(../../../../assets/images/tildeimg.png) no-repeat center center;
             background-color: #fff;
         }
         .headerlist {
@@ -81,16 +81,16 @@
         outline: none;
         cursor: pointer;
         background-color: #fff;
-        background: url(../../../assets/images/open-close2.png) no-repeat center -22px;
+        background: url(../../../../assets/images/open-close2.png) no-repeat center -22px;
         &:hover {
-            background: url(../../../assets/images/open-close2.png) no-repeat center -66px;
+            background: url(../../../../assets/images/open-close2.png) no-repeat center -66px;
         }
     }
     .buttonActive {
         transform: translate(-44px,-22px);
-        background: url(../../../assets/images/open-close2.png) no-repeat center -0px;
+        background: url(../../../../assets/images/open-close2.png) no-repeat center -0px;
         &:hover {
-            background: url(../../../assets/images/open-close2.png) no-repeat center -44px;
+            background: url(../../../../assets/images/open-close2.png) no-repeat center -44px;
         }
     }
     h2.detailtitle {
diff --git a/usecaseui-portal/src/app/components/performance-details/performance-details.component.spec.ts b/usecaseui-portal/src/app/shared/components/performance-details/performance-details.component.spec.ts
index 11f4abd2..11f4abd2 100644
--- a/usecaseui-portal/src/app/components/performance-details/performance-details.component.spec.ts
+++ b/usecaseui-portal/src/app/shared/components/performance-details/performance-details.component.spec.ts
diff --git a/usecaseui-portal/src/app/components/performance-details/performance-details.component.ts b/usecaseui-portal/src/app/shared/components/performance-details/performance-details.component.ts
index b8835739..9a601485 100644
--- a/usecaseui-portal/src/app/components/performance-details/performance-details.component.ts
+++ b/usecaseui-portal/src/app/shared/components/performance-details/performance-details.component.ts
@@ -14,8 +14,8 @@
     limitations under the License.
 */
 import { Component, OnInit, Input } from '@angular/core';
-import { slideUpDown } from '../../animates';
-import { HomesService } from '../../homes.service';
+import { slideUpDown } from '../../../animates';
+import { HomesService } from '../../../core/services/homes.service';
 
 @Component({
   selector: 'app-performance-details',
diff --git a/usecaseui-portal/src/app/fcaps/fcaps.component.less b/usecaseui-portal/src/app/shared/utils/utils.js
index e69de29b..e69de29b 100644
--- a/usecaseui-portal/src/app/fcaps/fcaps.component.less
+++ b/usecaseui-portal/src/app/shared/utils/utils.js
diff --git a/usecaseui-portal/src/app/test/test.component.html b/usecaseui-portal/src/app/test/test.component.html
new file mode 100644
index 00000000..200be4e6
--- /dev/null
+++ b/usecaseui-portal/src/app/test/test.component.html
@@ -0,0 +1,25 @@
+<div class="test-holder">
+  <h1>Mock data works!</h1>
+  <nz-table #basicTable [nzData]="tableData">
+    <thead>
+      <tr>
+        <th>Name</th>
+        <th>Phone</th>
+        <th>Address</th>
+        <th>Action</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr *ngFor="let data of tableData">
+        <td>{{data.name}}</td>
+        <td>{{data.phone}}</td>
+        <td>{{data.address}}</td>
+        <td>
+          <a>Action 一 {{data.name}}</a>
+          <nz-divider nzType="vertical"></nz-divider>
+          <a>Delete</a>
+        </td>
+      </tr>
+    </tbody>
+  </nz-table>
+</div>
\ No newline at end of file
diff --git a/usecaseui-portal/src/app/test/test.component.less b/usecaseui-portal/src/app/test/test.component.less
new file mode 100644
index 00000000..a44f4e7e
--- /dev/null
+++ b/usecaseui-portal/src/app/test/test.component.less
@@ -0,0 +1,3 @@
+.test-holder{
+    margin:20px;
+}
\ No newline at end of file
diff --git a/usecaseui-portal/src/app/test/test.component.spec.ts b/usecaseui-portal/src/app/test/test.component.spec.ts
new file mode 100644
index 00000000..ef4e38cb
--- /dev/null
+++ b/usecaseui-portal/src/app/test/test.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { TestComponent } from './test.component';
+
+describe('TestComponent', () => {
+  let component: TestComponent;
+  let fixture: ComponentFixture<TestComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ TestComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(TestComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/usecaseui-portal/src/app/test/test.component.ts b/usecaseui-portal/src/app/test/test.component.ts
new file mode 100644
index 00000000..30fdedc7
--- /dev/null
+++ b/usecaseui-portal/src/app/test/test.component.ts
@@ -0,0 +1,34 @@
+import { Component, OnInit } from '@angular/core';
+import { TextService } from '../core/services/text.service';
+
+@Component({
+  selector: 'app-test',
+  templateUrl: './test.component.html',
+  styleUrls: ['./test.component.less']
+})
+export class TestComponent implements OnInit {
+  constructor(
+    private TextService: TextService,
+  ) {
+  }
+
+  ngOnInit() {
+    this.getMockData();
+    this.getjsonData();
+
+  }
+  tableData = []
+  getMockData() {
+    this.TextService.getfakeData().subscribe(res => {
+      console.log(res, "======fake data")
+      this.tableData = res;
+    })
+  }
+  getjsonData() {
+    this.TextService.getjsonData().subscribe(res => {
+      console.log(res, "======json data")
+    })
+  }
+
+
+}
diff --git a/usecaseui-portal/src/app/alarm/alarm.component.css b/usecaseui-portal/src/app/views/alarm/alarm.component.css
index 37c2d936..25bf187e 100644
--- a/usecaseui-portal/src/app/alarm/alarm.component.css
+++ b/usecaseui-portal/src/app/views/alarm/alarm.component.css
@@ -134,16 +134,16 @@ hr {
   outline: none;
   cursor: pointer;
   background-color: #fff;
-  background: url(../../assets/images/open-close.png) no-repeat center -27px;
+  background: url(../../../assets/images/open-close.png) no-repeat center -27px;
 }
 .content .chart .open-close:hover {
-  background: url(../../assets/images/open-close.png) no-repeat center -79px;
+  background: url(../../../assets/images/open-close.png) no-repeat center -79px;
 }
 .content .chart .open-close-active {
-  background: url(../../assets/images/open-close.png) center -1px;
+  background: url(../../../assets/images/open-close.png) center -1px;
 }
 .content .chart .open-close-active:hover {
-  background: url(../../assets/images/open-close.png) no-repeat center -53px;
+  background: url(../../../assets/images/open-close.png) no-repeat center -53px;
 }
 .content .tablelist {
   background-color: #fff;
@@ -157,8 +157,8 @@ hr {
   display: inline-block;
   width: 16px;
   height: 16px;
-  background: url(../../assets/images/icon.png) center -113px;
+  background: url(../../../assets/images/icon.png) center -113px;
 }
 .content .tablelist .action .details:hover {
-  background: url(../../assets/images/icon.png) no-repeat center -128px;
+  background: url(../../../assets/images/icon.png) no-repeat center -128px;
 }
diff --git a/usecaseui-portal/src/app/alarm/alarm.component.html b/usecaseui-portal/src/app/views/alarm/alarm.component.html
index 312ec236..312ec236 100644
--- a/usecaseui-portal/src/app/alarm/alarm.component.html
+++ b/usecaseui-portal/src/app/views/alarm/alarm.component.html
diff --git a/usecaseui-portal/src/app/alarm/alarm.component.less b/usecaseui-portal/src/app/views/alarm/alarm.component.less
index 434470fc..92c9b7a4 100644
--- a/usecaseui-portal/src/app/alarm/alarm.component.less
+++ b/usecaseui-portal/src/app/views/alarm/alarm.component.less
@@ -207,15 +207,15 @@ hr {
             outline: none;
             cursor: pointer;
             background-color: #fff;
-            background: url(../../assets/images/open-close.png) no-repeat center -27px;
+            background: url(../../../assets/images/open-close.png) no-repeat center -27px;
             &:hover {
-                background: url(../../assets/images/open-close.png) no-repeat center -79px;
+                background: url(../../../assets/images/open-close.png) no-repeat center -79px;
             }
         }
         .open-close-active {
-            background: url(../../assets/images/open-close.png) center -1px;
+            background: url(../../../assets/images/open-close.png) center -1px;
             &:hover {
-                background: url(../../assets/images/open-close.png) no-repeat center -53px;
+                background: url(../../../assets/images/open-close.png) no-repeat center -53px;
             }
         }
     }
@@ -229,9 +229,9 @@ hr {
                 display: inline-block;
                 width: 16px;
                 height: 16px;
-                background: url(../../assets/images/icon.png) center -113px;
+                background: url(../../../assets/images/icon.png) center -113px;
                 &:hover {
-                    background: url(../../assets/images/icon.png) no-repeat center -128px;
+                    background: url(../../../assets/images/icon.png) no-repeat center -128px;
                 }
             }
         }
diff --git a/usecaseui-portal/src/app/views/alarm/alarm.component.spec.ts b/usecaseui-portal/src/app/views/alarm/alarm.component.spec.ts
new file mode 100644
index 00000000..9f01597e
--- /dev/null
+++ b/usecaseui-portal/src/app/views/alarm/alarm.component.spec.ts
@@ -0,0 +1,66 @@
+import { async, ComponentFixture, TestBed, inject, fakeAsync } from '@angular/core/testing';
+import { NO_ERRORS_SCHEMA, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { NgxEchartsModule } from 'ngx-echarts';
+import { NgZorroAntdModule } from 'ng-zorro-antd';
+import { TranslateModule, TranslateLoader, TranslateService, TranslateFakeLoader } from '@ngx-translate/core';
+import { HttpClientModule } from '@angular/common/http';
+import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { NZ_I18N, en_US } from 'ng-zorro-antd';
+
+import { AlarmComponent } from './alarm.component';
+import { DetailsComponent } from '../../shared/components/details/details.component';
+import { LineComponent } from '../../shared/components/charts/line/line.component';
+import { HomesService } from '../../core/services/homes.service';
+
+fdescribe('AlarmComponent', () => {
+  let component: AlarmComponent;
+  let fixture: ComponentFixture<AlarmComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [AlarmComponent, DetailsComponent, LineComponent],
+      imports: [TranslateModule.forRoot({ loader: { provide: TranslateLoader, useClass: TranslateFakeLoader } }),
+      NgZorroAntdModule.forRoot(),
+        NgxEchartsModule,
+        HttpClientModule,
+        BrowserAnimationsModule,
+        HttpClientTestingModule],
+      providers: [TranslateService, HomesService,
+        { provide: NZ_I18N, useValue: en_US }],
+      schemas: [
+        CUSTOM_ELEMENTS_SCHEMA,
+        NO_ERRORS_SCHEMA
+      ]
+    })
+      .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(AlarmComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', inject([HttpTestingController, HomesService],
+    (httpMock: HttpTestingController, service: HomesService) => {
+      expect(component).toBeTruthy();
+    }));
+
+  it('expects service to fetch data with proper sorting',
+    inject([HttpTestingController, HomesService],
+      (httpMock: HttpTestingController, service: HomesService) => {
+        // We call the service
+        service.getqueryAllSourceNames().subscribe(data => {
+          expect(data.pageInfo.totalRecordCount).toBe(21);
+          expect(data.pageInfo.pageNumber).toBe(0);
+          expect(data.data.length).toBe(7);
+        });
+        // We set the expectations for the HttpClient mock
+        const req = httpMock.expectOne('http://.../data/contacts');
+        expect(req.request.method).toEqual('GET');
+        // Then we set the fake data to be returned by the mock
+        req.flush({ data: ...});
+      })
+  );
+});
diff --git a/usecaseui-portal/src/app/alarm/alarm.component.ts b/usecaseui-portal/src/app/views/alarm/alarm.component.ts
index 5d479020..32e3456f 100644
--- a/usecaseui-portal/src/app/alarm/alarm.component.ts
+++ b/usecaseui-portal/src/app/views/alarm/alarm.component.ts
@@ -14,8 +14,8 @@
     limitations under the License.
 */
 import { Component, OnInit, Input, Output, EventEmitter, HostBinding, Pipe, PipeTransform } from '@angular/core';
-import { HomesService } from '../homes.service';
-import { showHideAnimate, slideToRight } from '../animates';
+import { HomesService } from '../../core/services/homes.service';
+import { showHideAnimate, slideToRight } from '../../animates';
 import { DatePipe } from '@angular/common';
 @Component({
   selector: 'app-alarm',
@@ -199,12 +199,12 @@ export class AlarmComponent implements OnInit {
   alarmShow = false;
   alarmChartData: Object;
   alarmChartInit: Object = {
-    height:  200,
+    height: 200,
     option: {
       legend: {
-        icon: "circle", 
-        itemWidth:10,
-        itemHeight:10,
+        icon: "circle",
+        itemWidth: 10,
+        itemHeight: 10,
         bottom: '-5px',
         data: ['Active', 'Fixed']
       },
@@ -218,7 +218,7 @@ export class AlarmComponent implements OnInit {
           start: 1,
           height: 10,
           end: 60,
-          bottom:'9%'
+          bottom: '9%'
         }
       ],
       xAxis: {
@@ -241,7 +241,7 @@ export class AlarmComponent implements OnInit {
                 x2: 0,
                 y2: 1,
                 colorStops: [{
-                  offset: 0, color: '#FB7788' 
+                  offset: 0, color: '#FB7788'
                 }, {
                   offset: 1, color: '#FB93C2'
                 }],
@@ -278,7 +278,7 @@ export class AlarmComponent implements OnInit {
       ]
     }
   };
-  sort(e){
+  sort(e) {
 
   }
   //Detail page title display
diff --git a/usecaseui-portal/src/app/ccvpn-creation/ccvpn-creation.component.css b/usecaseui-portal/src/app/views/ccvpn-creation/ccvpn-creation.component.css
index 81b727c8..efeec683 100644
--- a/usecaseui-portal/src/app/ccvpn-creation/ccvpn-creation.component.css
+++ b/usecaseui-portal/src/app/views/ccvpn-creation/ccvpn-creation.component.css
@@ -44,14 +44,14 @@ hr {
     display: inline-block;
     width: 35px;
     height: 35px;
-    background:url("../../assets/images/Return-icon.png") no-repeat!important;
+    background:url("../../../assets/images/Return-icon.png") no-repeat!important;
     background-size: 100%!important;
     border-radius:4px;
     color: #D7D7D7;
     cursor: pointer;    
 }
 .model .back:hover{
-    background: url("../../assets/images/Return-icon-active.png")!important;
+    background: url("../../../assets/images/Return-icon-active.png")!important;
     background-size: 100%!important;
 }
 .top-title h3.title {
diff --git a/usecaseui-portal/src/app/views/ccvpn-creation/ccvpn-creation.component.html b/usecaseui-portal/src/app/views/ccvpn-creation/ccvpn-creation.component.html
new file mode 100644
index 00000000..1fc9a500
--- /dev/null
+++ b/usecaseui-portal/src/app/views/ccvpn-creation/ccvpn-creation.component.html
@@ -0,0 +1,275 @@
+<!--
+    Copyright (C) 2019 CMCC, Inc. and others. 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.
+-->
+<div class="model creation-model">
+
+    <div class="top-title">
+        <h3 class="title fl">{{createParams.commonParams.templateType}}
+            {{"i18nTextDefine_InstanceCreation" | translate}} </h3>
+        <div class="fl" style="width: 20%">
+            <button class="submit" nz-button (click)="submit()"><span> {{"i18nTextDefine_Create" | translate}} </span>
+            </button>
+            <button class="back" nz-button (click)="goback()"></button>
+        </div>
+    </div>
+    <!-- chart -->
+    <div class="chart">
+        <span style="padding: 25px;display: inline-block;">
+            {{"i18nTextDefine_InstanceTopology" | translate}}
+        </span>
+        <div id="createChart">
+            <svg width="100%" height="100%">
+                <image id="domain" xlink:href="assets/images/domain1.png" style="width: 15%" x="40%" y="0" />
+            </svg>
+        </div>
+    </div>
+    <!--Template resolution : Three major items-->
+    <div class="creation">
+        <nz-tabset [nzTabPosition]="'top'" [nzShowPagination]=false [nzTabBarGutter]="'2'" [nzTabBarStyle]=tabBarStyle>
+            <nz-tab nzTitle="Service Info">
+                <div class="service-title" style="clear: both">
+                    <span style="color: red;">*</span><span class="lable" style="width: 60px">name:</span>
+                    <input nz-input [(ngModel)]="this.templateParameters.service['name']" required="required">
+                    <span style="color: red;">*</span><span class="lable">description:</span>
+                    <input nz-input [(ngModel)]="this.templateParameters.service['description']">
+                </div>
+            </nz-tab>
+            <nz-tab nzTitle="Sdwanvpnresource List">
+                <div class="sotnvpn clearfix">
+                    <div style="clear: both;height: 10px">
+                        <h3 style="float: left;color: #3C4F8C">sdwanVPN List</h3>
+                        <button nz-button (click)="addSotnvpn()" class="addListBtn"
+                            style="float: right;margin-right: 10px"><i class="anticon anticon-plus"
+                                style="transform: scale(1.2);font-weight: 700"></i> {{"i18nTextDefine_Add" | translate}}
+                        </button>
+                    </div>
+                    <nz-table #sotnVpnTable [nzData]="sotnVpnTableData" [nzShowPagination]="false" nzSize="small">
+                        <thead>
+                            <tr>
+                                <th width="30%"> NO.</th>
+                                <th *ngFor="let key of getKeys(this.sotnInfo)">{{key.split("_")[1] || key}}</th>
+                                <th width="10%"> Action</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            <tr *ngFor="let item of sotnVpnTable.data; let i = index; ">
+                                <td>{{i+1}}</td>
+                                <td *ngFor="let keys of getKeys(this.sotnInfo);let a = index;">
+                                    {{item[keys]}}
+                                </td>
+                                <td>
+                                    <span class="action" (click)="editSotnVpn(i+1)"><i
+                                            class="anticon anticon-edit"></i></span>
+                                    &nbsp;
+                                    <span class="action" (click)="deleteSotnVpn(i+1)"><i
+                                            class="anticon anticon-delete"></i></span>
+                                </td>
+                            </tr>
+                        </tbody>
+                    </nz-table>
+                </div>
+            </nz-tab>
+            <nz-tab nzTitle="Sdwansiteresource List">
+                <div class="site">
+                    <div style="height: 10px">
+                        <h3 style="float: left;color: #3C4F8C">Site List</h3>
+                        <button nz-button (click)="addSite()" class="addListBtn"
+                            style="float: right;margin-right: 10px"><i class="anticon anticon-plus"
+                                style="transform: scale(1.2);font-weight: 700"></i>{{"i18nTextDefine_Add" | translate}}
+                        </button>
+                    </div>
+                    <nz-table #siteTable [nzData]="siteTableData" [nzShowPagination]="false" nzSize="small">
+                        <thead>
+                            <tr>
+                                <th nzWidth="10%"> NO.</th>
+                                <th *ngFor="let key of getKeys(this.siteBaseData)">{{key.split("_")[1] || key}}</th>
+                                <th nzWidth="20%" style="text-align: center"> Action</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            <tr *ngFor="let item of siteTable.data; let i = index; ">
+                                <td>{{i+1}}</td>
+                                <td *ngFor="let keys of getKeys(this.siteBaseData);let a = index;">
+                                    {{item[keys]}}
+                                </td>
+                                <td style="text-align: center">
+                                    <span class="action" (click)="editSite(i+1)"><i
+                                            class="anticon anticon-edit"></i></span>
+                                    &nbsp;
+                                    <span class="action" (click)="deleteSite(i+1)"><i
+                                            class="anticon anticon-delete"></i></span>
+                                </td>
+                            </tr>
+                        </tbody>
+                    </nz-table>
+                </div>
+            </nz-tab>
+        </nz-tabset>
+    </div>
+    <!-- sotnVpnmodel -->
+    <div class="sotnnpnmodel" *ngIf="sotnVpnModelShow">
+        <h3> {{"i18nTextDefine_Base" | translate}} </h3>
+        <div class="inputs">
+            <ul>
+                <li *ngFor="let item of this.templateParameters.sotnvpn.sdwanvpnresource_list">
+                    <span *ngIf="item.required"
+                        style="color: red;margin: 0;margin-right: -5px;">*</span><span>{{item.lableShow}}:</span>
+                    <input nz-input [(ngModel)]="sotnInfo[item.lable]"
+                        title="{{item.description ? item.description:null }}"
+                        required="{{item.required==true ? 'required':null}}"></li>
+            </ul>
+        </div>
+        <div>
+            <h3>Sdwansitelan List</h3>
+            <div>
+                <div style="width: 100%;text-align: right">
+                    <button nz-button (click)="addSotnSdwansitelan()" class="addListBtn"><i class="anticon anticon-plus"
+                            style="transform: scale(1.2);font-weight: 700;"></i>{{"i18nTextDefine_Add" | translate}}
+                    </button>
+                </div>
+                <table class="siteWanTab">
+                    <thead>
+                        <tr>
+                            <th width="4%"> NO.</th>
+                            <th *ngFor="let key of getKeys(this.sotnSdwansitelanParams)">{{key}}</th>
+                            <th width="7%"> Action</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr *ngFor="let item of sotnSdwansitelanData; let i = index;"
+                            [ngClass]="{'tr-border':item.tabInputShowSdwansitelan ==false}">
+                            <td>{{i+1}}</td>
+                            <td *ngFor="let key of getKeys(item);let a = index;">
+                                <span *ngIf="!tabInputShowSdwansitelan[i]"
+                                    title="{{this.templateParameters.sotnvpn.sdwansitelan_list[a]['lable']==getKeys(item)[a] ? this.templateParameters.site.sdwansitewan_list[a].description:null}}">{{item[key]}}</span>
+                                <input nz-input [(ngModel)]="item[key]" *ngIf="tabInputShowSdwansitelan[i] "
+                                    title="{{this.templateParameters.sotnvpn.sdwansitelan_list[a]['lable']==getKeys(item)[a] ? this.templateParameters.site.sdwansitewan_list[a].description:null}}"
+                                    required="{{item.required==true ? 'required':null}}">
+                            </td>
+                            <td>
+                                <span class="action" (click)="editSotnSdwansitelan(i+1,item,sotnSdwansitelanData)"><i
+                                        class="anticon anticon-edit" style="margin: 0 5px;"></i></span>
+                                <span class="action" (click)="deleteSotnSdwansitelan(i+1,item,sotnSdwansitelanData)"><i
+                                        class="anticon anticon-delete"></i></span>
+                            </td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </div>
+
+        <div class="action">
+            <button nz-button nzType="primary"
+                (click)="addSotnVpn_cancel()">{{"i18nTextDefine_Cancel" | translate}}</button>
+            <button nz-button nzType="primary" (click)="addSotnVpn_OK()">{{"i18nTextDefine_Add" | translate}}</button>
+        </div>
+    </div>
+    <!-- sitemodel -->
+    <div class="sitemodel" *ngIf="siteModelShow">
+        <h3> {{"i18nTextDefine_Base" | translate}} </h3>
+        <div class="inputs">
+            <ul>
+                <li *ngFor="let item of this.templateParameters.site.sdwansiteresource_list">
+                    <span *ngIf="item.required"
+                        style="color: red;margin: 0;margin-right: -5px;">*</span><span>{{item.lableShow}}:</span>
+                    <input nz-input [(ngModel)]="siteBaseData[item.lable]" title="{{item.description}}"
+                        required="{{item.required==true ? 'required':null}}"></li>
+            </ul>
+        </div>
+        <div>
+            <h3>Sdwandevice</h3>
+            <div>
+                <div style="width: 100%;text-align: right">
+                    <button nz-button (click)="addSdwanDevice()" class="addListBtn"><i class="anticon anticon-plus"
+                            style="transform: scale(1.2);font-weight: 700;"></i>{{"i18nTextDefine_Add" | translate}}
+                    </button>
+                </div>
+                <table class="siteWanTab">
+                    <thead>
+                        <tr>
+                            <th width="4%"> NO.</th>
+                            <th *ngFor="let key of getKeys(this.siteCpeData)">{{key}}</th>
+                            <th width="7%"> Action</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr *ngFor="let item of siteSdwanDevice; let i = index;"
+                            [ngClass]="{'tr-border':item.tabInputShowDevice ==false}">
+                            <td>{{i+1}}</td>
+                            <td *ngFor="let key of getKeys(item);let a = index;">
+                                <span *ngIf="!tabInputShowDevice[i]"
+                                    title="{{this.templateParameters.site.sdwandevice_list[a]['lable']==getKeys(item)[a] ? this.templateParameters.site.sdwandevice_list[a].description:null}}">{{item[key]}}</span>
+                                <input nz-input [(ngModel)]="item[key]" *ngIf="tabInputShowDevice[i] "
+                                    title="{{this.templateParameters.site.sdwandevice_list[a]['lable']==getKeys(item)[a] ? this.templateParameters.site.sdwandevice_list[a].description:null}}"
+                                    required="{{item.required==true ? 'required':null}}">
+                            </td>
+                            <td>
+                                <span class="action" (click)="editDevicePort(i+1,item,siteSdwanDevice)"><i
+                                        class="anticon anticon-edit" style="margin: 0 5px;"></i></span>
+                                <span class="action" (click)="deleteDevicePort(i+1,item,siteSdwanDevice)"><i
+                                        class="anticon anticon-delete"></i></span>
+                            </td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+
+
+            <h3>Sdwansitewan List</h3>
+            <div>
+                <div style="width: 100%;text-align: right">
+                    <button nz-button (click)="addSiteWan()" class="addListBtn"><i class="anticon anticon-plus"
+                            style="transform: scale(1.2);font-weight: 700;"></i>{{"i18nTextDefine_Add" | translate}}
+                    </button>
+                </div>
+                <table class="siteWanTab">
+                    <thead>
+                        <tr>
+                            <th width="4%"> NO.</th>
+                            <th *ngFor="let key of getKeys(this.siteWanParams)">{{key}}</th>
+                            <th width="7%"> Action</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr *ngFor="let item of siteWanData; let i = index;"
+                            [ngClass]="{'tr-border':item.tabInputShowWanPort ==false}">
+                            <td>{{i+1}}</td>
+                            <td *ngFor="let key of getKeys(item);let a = index;">
+                                <span *ngIf="!tabInputShowWanPort[i]"
+                                    title="{{this.templateParameters.site.sdwansitewan_list[a]['lable']==getKeys(item)[a] ? this.templateParameters.site.sdwansitewan_list[a].description:null}}">{{item[key]}}</span>
+                                <input nz-input [(ngModel)]="item[key]" *ngIf="tabInputShowWanPort[i] "
+                                    title="{{this.templateParameters.site.sdwansitewan_list[a]['lable']==getKeys(item)[a] ? this.templateParameters.site.sdwansitewan_list[a].description:null}}"
+                                    required="{{item.required==true ? 'required':null}}">
+                            </td>
+                            <td>
+                                <span class="action" (click)="editWanPort(i+1,item,siteWanData)"><i
+                                        class="anticon anticon-edit" style="margin: 0 5px;"></i></span>
+                                <span class="action" (click)="deleteWanPort(i+1,item,siteWanData)"><i
+                                        class="anticon anticon-delete"></i></span>
+                            </td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </div>
+
+        <div class="action">
+            <button nz-button nzType="primary"
+                (click)="addsite_cancel()">{{"i18nTextDefine_Cancel" | translate}}</button>
+            <button nz-button nzType="primary" (click)="addsite_OK()">{{"i18nTextDefine_Add" | translate}}</button>
+        </div>
+    </div>
+    <div class="mask" *ngIf="siteModelShow || sotnVpnModelShow"></div>
+</div>
\ No newline at end of file
diff --git a/usecaseui-portal/src/app/ccvpn-creation/ccvpn-creation.component.spec.ts b/usecaseui-portal/src/app/views/ccvpn-creation/ccvpn-creation.component.spec.ts
index 30402412..30402412 100644
--- a/usecaseui-portal/src/app/ccvpn-creation/ccvpn-creation.component.spec.ts
+++ b/usecaseui-portal/src/app/views/ccvpn-creation/ccvpn-creation.component.spec.ts
diff --git a/usecaseui-portal/src/app/ccvpn-creation/ccvpn-creation.component.ts b/usecaseui-portal/src/app/views/ccvpn-creation/ccvpn-creation.component.ts
index f4c1f94c..214afbb7 100644
--- a/usecaseui-portal/src/app/ccvpn-creation/ccvpn-creation.component.ts
+++ b/usecaseui-portal/src/app/views/ccvpn-creation/ccvpn-creation.component.ts
@@ -16,7 +16,7 @@
 import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
 import * as d3 from 'd3';
 import * as $ from 'jquery';
-import { MyhttpService } from '../myhttp.service';
+import { MyhttpService } from '../../core/services/myhttp.service';
 import { el } from "@angular/platform-browser/testing/src/browser_util";
 
 @Component({
@@ -135,7 +135,7 @@ export class CcvpnCreationComponent implements OnInit {
         });
         this.showTemParametersSotnVpn();
         this.showTemParametersSite();
-        console.log(this.bodyTemplateParameter,this.templateParameters)
+        console.log(this.bodyTemplateParameter, this.templateParameters)
     }
 
     //sotnVpn data, after combining the structure, rendering the template data to the page
@@ -223,7 +223,7 @@ export class CcvpnCreationComponent implements OnInit {
         this.siteSdwanDevice.push(this.siteCpeData);
         this.siteWanData.push(this.siteWanParams);
         this.siteWanData.map((item, index) => {
-        this.tabInputShowDevice[index] = true;
+            this.tabInputShowDevice[index] = true;
         });
         this.siteWanData.map((item, index) => {
             this.tabInputShowWanPort[index] = true;
@@ -519,8 +519,8 @@ export class CcvpnCreationComponent implements OnInit {
     siteImage = [];
     tpImage = [];
     imgmap = {
-        '1': './assets/images/domain1.png',
-        '2': './assets/images/site.png'
+        '1': '../../../assets/images/domain1.png',
+        '2': '../../../assets/images/site.png'
     };
 
     drawImage(sitelist) {
diff --git a/usecaseui-portal/src/app/ccvpn-detail/ccvpn-detail.component.css b/usecaseui-portal/src/app/views/ccvpn-detail/ccvpn-detail.component.css
index 72e59fa5..d5ad960d 100644
--- a/usecaseui-portal/src/app/ccvpn-detail/ccvpn-detail.component.css
+++ b/usecaseui-portal/src/app/views/ccvpn-detail/ccvpn-detail.component.css
@@ -58,14 +58,14 @@ hr {
     display: inline-block;
     width: 35px;
     height: 35px;
-    background:url("../../assets/images/Return-icon.png") no-repeat!important;
+    background:url("../../../assets/images/Return-icon.png") no-repeat!important;
     background-size: 100%!important;
     border-radius:4px;
     color: #D7D7D7;
     cursor: pointer;
 }
 .model .back:hover{
-    background: url("../../assets/images/Return-icon-active.png")!important;
+    background: url("../../../assets/images/Return-icon-active.png")!important;
     background-size: 100%!important;
 }
 .top-title h3.title {
diff --git a/usecaseui-portal/src/app/ccvpn-detail/ccvpn-detail.component.html b/usecaseui-portal/src/app/views/ccvpn-detail/ccvpn-detail.component.html
index ce556687..e2b5159e 100644
--- a/usecaseui-portal/src/app/ccvpn-detail/ccvpn-detail.component.html
+++ b/usecaseui-portal/src/app/views/ccvpn-detail/ccvpn-detail.component.html
@@ -19,7 +19,8 @@
   <div class="top-title">
     <h3 class="title fl">{{detailParams['service-instance-name']}} Instance Detail</h3>
     <div class="fl" style="width: 20%">
-      <button class="submit" nz-button (click)="submitUpdate()" *ngIf="upDateShow"><span> {{"i18nTextDefine_Update" | translate}} </span>
+      <button class="submit" nz-button (click)="submitUpdate()" *ngIf="upDateShow"><span>
+          {{"i18nTextDefine_Update" | translate}} </span>
       </button>
       <button class="back" nz-button (click)="goback()"></button>
     </div>
@@ -31,142 +32,92 @@
       <svg width="100%" height="100%" style="position: relative">
         <!--local domain-->
         <g class="clouds" *ngIf="vpns[0].domain!=''">
-          <image xlink:href="./assets/images/domain1.png"
-                 id="domain1"
-                 width="14%"
-                 x="17%" y="14%"
-          ></image>
+          <image xlink:href="assets/images/domain1.png" id="domain1" width="14%" x="17%" y="14%"></image>
           <text dx="24%" dy="51%" style="font-size: 14px; fill:#ffffff;width: 20px;">
             {{vpns[0].domain}}
           </text>
         </g>
         <g *ngIf="vpns[1]" class="clouds">
-          <image xlink:href="./assets/images/domain1.png"
-                 id="domain2"
-                 width="14%"
-                 x="40%" y="40%"
-          ></image>
+          <image xlink:href="assets/images/domain1.png" id="domain2" width="14%" x="40%" y="40%"></image>
           <text dx="43%" dy="19%" style="font-size: 14px; fill: #ffffff;width: 20px;">
             {{vpns[1].domain}}
           </text>
         </g>
         <!--domain1 tp-->
         <g class="clouds" *ngIf="vpns[0].sitetpname!=''">
-          <image xlink:href="./assets/images/tp.png"
-                 class="tp"
-                 id="tp1"
-                 height="16" width="20"
-                 x="21%" y="37%"
-          ></image>
+          <image xlink:href="assets/images/tp.png" class="tp" id="tp1" height="16" width="20" x="21%" y="37%"></image>
           <text dx="21%" dy="34%" style="font-size: 14px; fill: #666;width: 20px;">
             {{vpns[0].sitetpname}}
           </text>
         </g>
         <g class="clouds" *ngIf="vpns[0].othertpname!=''">
-          <image xlink:href="./assets/images/tp.png"
-                 class="tp"
-                 id="tp2"
-                 height="16" width="20"
-                 x="29%" y="52%"
-          ></image>
+          <image xlink:href="assets/images/tp.png" class="tp" id="tp2" height="16" width="20" x="29%" y="52%"></image>
           <text dx="29%" dy="49%" style="font-size: 14px; fill: #666;width: 20px;">
             {{vpns[0].othertpname}}
           </text>
         </g>
         <!--domain2 tp-->
         <g *ngIf="vpns[1]" class="clouds">
-          <image xlink:href="./assets/images/tp.png"
-                 class="tp"
-                 id="tp3"
-                 height="16" width="20"
-                 x="44%" y="52%"
-          ></image>
+          <image xlink:href="assets/images/tp.png" class="tp" id="tp3" height="16" width="20" x="44%" y="52%"></image>
           <text dx="44%" dy="49%" style="font-size: 14px; fill: #666;width: 20px;">
             {{vpns[1].othertpname}}
           </text>
         </g>
         <g *ngIf="vpns[1]" class="clouds">
-          <image xlink:href="./assets/images/tp.png"
-                 class="tp"
-                 id="tp4"
-                 height="16" width="20"
-                 x="51%" y="78%"
-          ></image>
+          <image xlink:href="assets/images/tp.png" class="tp" id="tp4" height="16" width="20" x="51%" y="78%"></image>
           <text dx="51%" dy="75%" style="font-size: 14px; fill: #666;width: 20px;">
             {{vpns[1].sitetpname}}
           </text>
         </g>
         <!--clouds-->
         <g class="clouds">
-          <image xlink:href="./assets/images/cloud-out.png"
-                 id="extent-cloud"
-                 width="14%"
-                 x="70%" y="11%"
-          ></image>
+          <image xlink:href="assets/images/cloud-out.png" id="extent-cloud" width="14%" x="70%" y="11%"></image>
           <text dx="75%" dy="39%" style="font-size: 14px; fill: #666;width: 20px;">
             SP Partent Network
           </text>
         </g>
         <!--local site-->
         <g class="clouds" *ngIf="localSite.length>0">
-          <image xlink:href="./assets/images/site.png"
-                 id="site1"
-                 height="59" width="100"
-                 x="6%" y="29%"
-          ></image>
+          <image xlink:href="assets/images/site.png" id="site1" height="59" width="100" x="6%" y="29%"></image>
           <text dx="8%" dy="26%" style="font-size: 14px; fill: #666;width: 20px;">
             {{localSite[0] && localSite[0]["service-instance-name"]}}
           </text>
         </g>
         <g *ngIf="!detailSites && localSite.length>0" class="clouds">
-          <image xlink:href="./assets/images/site.png"
-                 id="site2"
-                 height="59" width="100"
-                 x="61%" y="70%"
-                 *ngIf="this.vpns.length == 2"
-          ></image>
-          <text dx="62%" dy="66%" style="font-size: 14px; fill: #666;width: 20px;"  *ngIf="this.vpns.length == 2">
+          <image xlink:href="assets/images/site.png" id="site2" height="59" width="100" x="61%" y="70%"
+            *ngIf="this.vpns.length == 2"></image>
+          <text dx="62%" dy="66%" style="font-size: 14px; fill: #666;width: 20px;" *ngIf="this.vpns.length == 2">
             {{ localSite[1] && localSite[1]["service-instance-name"]}}
           </text>
-          <image xlink:href="./assets/images/site.png"
-                 id="site2"
-                 height="59" width="100"
-                 x="40%" y="44%"
-                 *ngIf="this.vpns.length == 1"
-          ></image>
-          <text dx="41%" dy="40%" style="font-size: 14px; fill: #666;width: 20px;"  *ngIf="this.vpns.length == 1">
+          <image xlink:href="assets/images/site.png" id="site2" height="59" width="100" x="40%" y="44%"
+            *ngIf="this.vpns.length == 1"></image>
+          <text dx="41%" dy="40%" style="font-size: 14px; fill: #666;width: 20px;" *ngIf="this.vpns.length == 1">
             {{ localSite[1] && localSite[1]["service-instance-name"]}}
           </text>
         </g>
         <!--cloud site-->
         <g *ngIf="!detailSites && outerSite.length>0" class="clouds">
-          <image xlink:href="./assets/images/site.png"
-                 id="site3"
-                 height="59" width="100"
-                 x="89%" y="10%"
-          ></image>
+          <image xlink:href="assets/images/site.png" id="site3" height="59" width="100" x="89%" y="10%"></image>
           <text dx="90%" dy="7%" style="font-size: 14px; fill: #666;width: 20px;">
             {{outerSite[1] && outerSite[1]["service-instance-name"]}}
           </text>
         </g>
         <g class="clouds" *ngIf="outerSite.length>0">
-          <image xlink:href="./assets/images/site.png"
-                 id="site4"
-                 height="59" width="100"
-                 x="89%" y="40%"
-          ></image>
+          <image xlink:href="assets/images/site.png" id="site4" height="59" width="100" x="89%" y="40%"></image>
           <text dx="90%" dy="37%" style="font-size: 14px; fill: #666;width: 20px;">
             {{outerSite[0] && outerSite[0]["service-instance-name"]}}
           </text>
         </g>
         <!--tp,site,domain---line -->
-        <line *ngFor="let item of detailLines" [attr.x1]="item.x1" [attr.y1]="item.y1" [attr.x2]="item.x2" [attr.y2]="item.y2" style="stroke:#2F8BF7; stroke-width:2"></line>
+        <line *ngFor="let item of detailLines" [attr.x1]="item.x1" [attr.y1]="item.y1" [attr.x2]="item.x2"
+          [attr.y2]="item.y2" style="stroke:#2F8BF7; stroke-width:2"></line>
         <line *ngIf="detailSites" x1="45%" y1="30%" x2="75%" y2="20%" style="stroke:#FFC000; stroke-width:2"></line>
       </svg>
     </div>
   </div>
   <div class="detaildata">
-    <nz-tabset [nzTabPosition]="'top'" [nzShowPagination]=false [nzTabBarGutter]="'2'" [nzTabBarStyle]=tabBarStyle [nzSelectedIndex]="upDateShow == false?0:1">
+    <nz-tabset [nzTabPosition]="'top'" [nzShowPagination]=false [nzTabBarGutter]="'2'" [nzTabBarStyle]=tabBarStyle
+      [nzSelectedIndex]="upDateShow == false?0:1">
       <nz-tab nzTitle="Service Info">
         <div class="service-title" style="clear: both">
           <span class="lable" style="width: 60px">name:</span>
@@ -180,34 +131,33 @@
           <div style="clear: both;height: 10px">
             <h3 style="float: left;color: #3C4F8C">sdwanVPN List</h3>
             <button nz-button *ngIf="upDateShow" (click)="updateSotnvpn()" class="addListBtn"
-                    style="float: right;margin-right: 10px"><i class="anticon anticon-plus"
-                                                               style="transform: scale(1.2);font-weight: 700"></i> {{"i18nTextDefine_Add" | translate}}
+              style="float: right;margin-right: 10px"><i class="anticon anticon-plus"
+                style="transform: scale(1.2);font-weight: 700"></i> {{"i18nTextDefine_Add" | translate}}
             </button>
           </div>
-          <nz-table #sotnVpnTable [nzData]="sotnVpnTableData"
-                    [nzShowPagination]="false"
-                    nzSize="small">
+          <nz-table #sotnVpnTable [nzData]="sotnVpnTableData" [nzShowPagination]="false" nzSize="small">
             <thead>
-            <tr>
-              <th width="30%"> NO.</th>
-              <th width="30%"> Name</th>
-              <th width="30%"> topology</th>
-              <th nzWidth="10%"> Action </th>
-            </tr>
+              <tr>
+                <th width="30%"> NO.</th>
+                <th width="30%"> Name</th>
+                <th width="30%"> topology</th>
+                <th nzWidth="10%"> Action </th>
+              </tr>
             </thead>
             <tbody>
-            <tr *ngFor="let item of sotnVpnTable.data; let i = index; ">
-              <td>{{i+1}}</td>
-              <td>{{item.sdwanvpn_name}}</td>
-              <td>{{item.sdwanvpn_topology}}</td>
-              <td>
-                <span class="action" (click)="showstonVpnDetail(i+1)"><i class="anticon anticon-bars"></i></span>
-                <span class="action" (click)="editUpdateSotnVpn(i+1)" *ngIf="sotnvpnnum[i]"><i class="anticon anticon-edit"></i></span>
-                &nbsp;
-                <span class="action" (click)="deleteUpdateSotnVpn(i+1)" *ngIf="upDateShow"><i
-                        class="anticon anticon-delete"></i></span>
-              </td>
-            </tr>
+              <tr *ngFor="let item of sotnVpnTable.data; let i = index; ">
+                <td>{{i+1}}</td>
+                <td>{{item.sdwanvpn_name}}</td>
+                <td>{{item.sdwanvpn_topology}}</td>
+                <td>
+                  <span class="action" (click)="showstonVpnDetail(i+1)"><i class="anticon anticon-bars"></i></span>
+                  <span class="action" (click)="editUpdateSotnVpn(i+1)" *ngIf="sotnvpnnum[i]"><i
+                      class="anticon anticon-edit"></i></span>
+                  &nbsp;
+                  <span class="action" (click)="deleteUpdateSotnVpn(i+1)" *ngIf="upDateShow"><i
+                      class="anticon anticon-delete"></i></span>
+                </td>
+              </tr>
             </tbody>
           </nz-table>
         </div>
@@ -217,41 +167,41 @@
           <div style="height: 10px">
             <h3 style="float: left;color: #3C4F8C">Site List</h3>
             <button nz-button *ngIf="upDateShow" (click)="updateSite()" class="addListBtn"
-                    style="float: right;margin-right: 10px"><i class="anticon anticon-plus"
-                                                               style="transform: scale(1.2);font-weight: 700"></i>{{"i18nTextDefine_Add" | translate}}
+              style="float: right;margin-right: 10px"><i class="anticon anticon-plus"
+                style="transform: scale(1.2);font-weight: 700"></i>{{"i18nTextDefine_Add" | translate}}
             </button>
           </div>
-          <nz-table #nzTable [nzData]="siteTableData"
-                    [nzShowPagination]="false"
-                    nzSize="small">
+          <nz-table #nzTable [nzData]="siteTableData" [nzShowPagination]="false" nzSize="small">
             <thead>
-            <tr>
-              <th nzWidth="10%"> NO. </th>
-              <th nzWidth="15%"> Name </th>
-              <th nzWidth="20%"> Description </th>
-              <th nzWidth="15%"> Post Code </th>
-              <th nzWidth="15%"> Address </th>
-              <th nzWidth="15%"> VLAN </th>
-              <th nzWidth="10%"> Action </th>
-            </tr>
+              <tr>
+                <th nzWidth="10%"> NO. </th>
+                <th nzWidth="15%"> Name </th>
+                <th nzWidth="20%"> Description </th>
+                <th nzWidth="15%"> Post Code </th>
+                <th nzWidth="15%"> Address </th>
+                <th nzWidth="15%"> VLAN </th>
+                <th nzWidth="10%"> Action </th>
+              </tr>
             </thead>
             <tbody>
 
-            <tr *ngFor="let item of nzTable.data; let i = index; ">
-              <td>{{i+1}}</td>
-              <td>{{item.sdwandevice_list[0].name}}</td>
-              <td>{{item.sdwansite_description}}</td>
-              <td>{{item.sdwansite_postcode}}</td>
-              <td>{{item.sdwansite_address}}</td>
-              <td>{{item.sdwansite_emails}}</td>
-              <td>
-                <span class="action" (click)="showSiteDetail(i+1)"><i class="anticon anticon-bars"></i></span>
-                &nbsp;
-                <span class="action" (click)="editUpdateSite(i+1)" *ngIf="sitenum[i]"><i class="anticon anticon-edit"></i></span>
-                &nbsp;
-                <span class="action" (click)="deleteUpdateSite(i+1)" *ngIf="upDateShow"><i class="anticon anticon-delete"></i></span>
-              </td>
-            </tr>
+              <tr *ngFor="let item of nzTable.data; let i = index; ">
+                <td>{{i+1}}</td>
+                <td>{{item.sdwandevice_list[0].name}}</td>
+                <td>{{item.sdwansite_description}}</td>
+                <td>{{item.sdwansite_postcode}}</td>
+                <td>{{item.sdwansite_address}}</td>
+                <td>{{item.sdwansite_emails}}</td>
+                <td>
+                  <span class="action" (click)="showSiteDetail(i+1)"><i class="anticon anticon-bars"></i></span>
+                  &nbsp;
+                  <span class="action" (click)="editUpdateSite(i+1)" *ngIf="sitenum[i]"><i
+                      class="anticon anticon-edit"></i></span>
+                  &nbsp;
+                  <span class="action" (click)="deleteUpdateSite(i+1)" *ngIf="upDateShow"><i
+                      class="anticon anticon-delete"></i></span>
+                </td>
+              </tr>
 
             </tbody>
           </nz-table>
@@ -277,24 +227,25 @@
         </div>
         <table class="siteWanTab">
           <thead>
-          <tr>
-            <th width="4%"> NO.</th>
-            <th *ngFor="let key of getKeys(this.sotnSdwansitelanParams)">{{key}}</th>
-          </tr>
+            <tr>
+              <th width="4%"> NO.</th>
+              <th *ngFor="let key of getKeys(this.sotnSdwansitelanParams)">{{key}}</th>
+            </tr>
           </thead>
           <tbody>
-          <tr *ngFor="let item of sotnSdwansitelanData; let i = index;" class="tr-border">
-            <td>{{i+1}}</td>
-            <td *ngFor="let key of getKeys(item);let a = index;">
-                            <span *ngIf="key != 'lable' ">{{item[key]}}</span>
-            </td>
-          </tr>
+            <tr *ngFor="let item of sotnSdwansitelanData; let i = index;" class="tr-border">
+              <td>{{i+1}}</td>
+              <td *ngFor="let key of getKeys(item);let a = index;">
+                <span *ngIf="key != 'lable' ">{{item[key]}}</span>
+              </td>
+            </tr>
           </tbody>
         </table>
       </div>
     </div>
     <div class="action">
-      <button nz-button nzType="primary" (click)="detailSotnVpn_cancel()">{{"i18nTextDefine_Cancel" | translate}}</button>
+      <button nz-button nzType="primary"
+        (click)="detailSotnVpn_cancel()">{{"i18nTextDefine_Cancel" | translate}}</button>
     </div>
   </div>
   <!-- site model -->
@@ -305,7 +256,7 @@
         <li *ngFor="let item of this.templateParameters.site.sdwansiteresource_list">
           <span>{{item.lableShow}}:</span>
           <span class="input-info">{{siteBaseData[item.lable]}}</span>
-          </li>
+        </li>
       </ul>
     </div>
     <div>
@@ -313,18 +264,18 @@
       <div>
         <table class="siteWanTab">
           <thead>
-          <tr>
-            <th width="4%"> NO.</th>
-            <th *ngFor="let key of getKeys(this.siteCpeData)">{{key}}</th>
-          </tr>
+            <tr>
+              <th width="4%"> NO.</th>
+              <th *ngFor="let key of getKeys(this.siteCpeData)">{{key}}</th>
+            </tr>
           </thead>
           <tbody>
-          <tr *ngFor="let item of siteSdwanDevice; let i = index;" class="tr-border">
-            <td>{{i+1}}</td>
-            <td *ngFor="let key of getKeys(item);">
-              <span *ngIf="key != 'lable' ">{{item[key]}}</span>
-            </td>
-          </tr>   
+            <tr *ngFor="let item of siteSdwanDevice; let i = index;" class="tr-border">
+              <td>{{i+1}}</td>
+              <td *ngFor="let key of getKeys(item);">
+                <span *ngIf="key != 'lable' ">{{item[key]}}</span>
+              </td>
+            </tr>
           </tbody>
         </table>
       </div>
@@ -332,18 +283,18 @@
       <div>
         <table class="siteWanTab">
           <thead>
-          <tr>
-            <th width="4%"> NO.</th>
-            <th *ngFor="let key of getKeys(this.siteWanParams)">{{key}}</th>
-          </tr>
+            <tr>
+              <th width="4%"> NO.</th>
+              <th *ngFor="let key of getKeys(this.siteWanParams)">{{key}}</th>
+            </tr>
           </thead>
           <tbody>
-          <tr *ngFor="let item of siteWanData; let i = index;" class="tr-border">
-            <td>{{i+1}}</td>
-            <td *ngFor="let key of getKeys(item);">
-                            <span *ngIf="key != 'lable' ">{{item[key]}}</span>
-            </td>
-          </tr>
+            <tr *ngFor="let item of siteWanData; let i = index;" class="tr-border">
+              <td>{{i+1}}</td>
+              <td *ngFor="let key of getKeys(item);">
+                <span *ngIf="key != 'lable' ">{{item[key]}}</span>
+              </td>
+            </tr>
           </tbody>
         </table>
       </div>
@@ -368,39 +319,40 @@
       <div>
         <div style="width: 100%;text-align: right">
           <button nz-button (click)="updateSotnSdwansitelan()" class="addListBtn"><i class="anticon anticon-plus"
-                                                                                  style="transform: scale(1.2);font-weight: 700;"></i>{{"i18nTextDefine_Add" | translate}}
+              style="transform: scale(1.2);font-weight: 700;"></i>{{"i18nTextDefine_Add" | translate}}
           </button>
         </div>
         <table class="siteWanTab">
           <thead>
-          <tr>
-            <th width="4%"> NO.</th>
-            <th *ngFor="let key of getKeys(this.sotnSdwansitelanParams)">{{key}}</th>
-            <th width="7%"> Action</th>
-          </tr>
+            <tr>
+              <th width="4%"> NO.</th>
+              <th *ngFor="let key of getKeys(this.sotnSdwansitelanParams)">{{key}}</th>
+              <th width="7%"> Action</th>
+            </tr>
           </thead>
           <tbody>
-          <tr *ngFor="let item of sotnSdwansitelanData; let i = index;"
+            <tr *ngFor="let item of sotnSdwansitelanData; let i = index;"
               [ngClass]="{'tr-border':item.tabInputShowSdwansitelan ==false}">
-            <td>{{i+1}}</td>
-            <td *ngFor="let key of getKeys(item);let a = index;">
-                            <span *ngIf="!tabInputShowSdwansitelan[i]">{{item[key]}}</span>
-              <input nz-input [(ngModel)]="item[key]" *ngIf="tabInputShowSdwansitelan[i] ">
-            </td>
-            <td>
-                            <span class="action" (click)="editUpdateSotnSdwansitelan(i+1,item,sotnSdwansitelanData)"><i
-                                    class="anticon anticon-edit" style="margin: 0 5px;"></i></span>
-              <span class="action" (click)="deleteUpdateSotnSdwansitelan(i+1,item,sotnSdwansitelanData)"><i
-                      class="anticon anticon-delete"></i></span>
-            </td>
-          </tr>
+              <td>{{i+1}}</td>
+              <td *ngFor="let key of getKeys(item);let a = index;">
+                <span *ngIf="!tabInputShowSdwansitelan[i]">{{item[key]}}</span>
+                <input nz-input [(ngModel)]="item[key]" *ngIf="tabInputShowSdwansitelan[i] ">
+              </td>
+              <td>
+                <span class="action" (click)="editUpdateSotnSdwansitelan(i+1,item,sotnSdwansitelanData)"><i
+                    class="anticon anticon-edit" style="margin: 0 5px;"></i></span>
+                <span class="action" (click)="deleteUpdateSotnSdwansitelan(i+1,item,sotnSdwansitelanData)"><i
+                    class="anticon anticon-delete"></i></span>
+              </td>
+            </tr>
           </tbody>
         </table>
       </div>
     </div>
 
     <div class="action">
-      <button nz-button nzType="primary" (click)="updateSotnVpn_cancel()">{{"i18nTextDefine_Cancel" | translate}}</button>
+      <button nz-button nzType="primary"
+        (click)="updateSotnVpn_cancel()">{{"i18nTextDefine_Cancel" | translate}}</button>
       <button nz-button nzType="primary" (click)="updateSotnVpn_OK()">{{"i18nTextDefine_Add" | translate}}</button>
     </div>
   </div>
@@ -428,32 +380,32 @@
       <div>
         <div style="width: 100%;text-align: right">
           <button nz-button (click)="updateSiteWan()" class="addListBtn"><i class="anticon anticon-plus"
-                                                                         style="transform: scale(1.2);font-weight: 700;"></i>{{"i18nTextDefine_Add" | translate}}
+              style="transform: scale(1.2);font-weight: 700;"></i>{{"i18nTextDefine_Add" | translate}}
           </button>
         </div>
         <table class="siteWanTab">
           <thead>
-          <tr>
-            <th width="4%"> NO.</th>
-            <th *ngFor="let key of getKeys(this.siteWanParams)">{{key}}</th>
-            <th width="7%"> Action</th>
-          </tr>
+            <tr>
+              <th width="4%"> NO.</th>
+              <th *ngFor="let key of getKeys(this.siteWanParams)">{{key}}</th>
+              <th width="7%"> Action</th>
+            </tr>
           </thead>
           <tbody>
-          <tr *ngFor="let item of siteWanData; let i = index;"
+            <tr *ngFor="let item of siteWanData; let i = index;"
               [ngClass]="{'tr-border':item.tabInputShowWanPort ==false}">
-            <td>{{i+1}}</td>
-            <td *ngFor="let key of getKeys(item);let a = index;">
-                            <span *ngIf="!tabInputShowWanPort[i]">{{item[key]}}</span>
-              <input nz-input [(ngModel)]="item[key]" *ngIf="tabInputShowWanPort[i] ">
-            </td>
-            <td>
-                            <span class="action" (click)="editUpdateWanPort(i+1,item,siteWanData)"><i
-                                    class="anticon anticon-edit" style="margin: 0 5px;"></i></span>
-              <span class="action" (click)="deleteUpdateWanPort(i+1,item,siteWanData)"><i
-                      class="anticon anticon-delete"></i></span>
-            </td>
-          </tr>
+              <td>{{i+1}}</td>
+              <td *ngFor="let key of getKeys(item);let a = index;">
+                <span *ngIf="!tabInputShowWanPort[i]">{{item[key]}}</span>
+                <input nz-input [(ngModel)]="item[key]" *ngIf="tabInputShowWanPort[i] ">
+              </td>
+              <td>
+                <span class="action" (click)="editUpdateWanPort(i+1,item,siteWanData)"><i class="anticon anticon-edit"
+                    style="margin: 0 5px;"></i></span>
+                <span class="action" (click)="deleteUpdateWanPort(i+1,item,siteWanData)"><i
+                    class="anticon anticon-delete"></i></span>
+              </td>
+            </tr>
           </tbody>
         </table>
       </div>
@@ -464,5 +416,6 @@
       <button nz-button nzType="primary" (click)="updatesite_OK()">{{"i18nTextDefine_Add" | translate}}</button>
     </div>
   </div>
-  <div class="mask" *ngIf="sotnVpnDetailShow || siteDetail || sotnVpnAddModelShow || siteAddModelShow" (click)="hiddenModel()"></div>
-</div>
+  <div class="mask" *ngIf="sotnVpnDetailShow || siteDetail || sotnVpnAddModelShow || siteAddModelShow"
+    (click)="hiddenModel()"></div>
+</div>
\ No newline at end of file
diff --git a/usecaseui-portal/src/app/ccvpn-detail/ccvpn-detail.component.spec.ts b/usecaseui-portal/src/app/views/ccvpn-detail/ccvpn-detail.component.spec.ts
index 2d466531..3d112bf8 100644
--- a/usecaseui-portal/src/app/ccvpn-detail/ccvpn-detail.component.spec.ts
+++ b/usecaseui-portal/src/app/views/ccvpn-detail/ccvpn-detail.component.spec.ts
@@ -20,7 +20,7 @@ import { NZ_I18N, en_US } from 'ng-zorro-antd';
 import { TranslateModule, TranslateLoader, TranslateService, TranslateFakeLoader } from '@ngx-translate/core';
 
 import { CcvpnDetailComponent } from './ccvpn-detail.component';
-import { MyhttpService } from '../myhttp.service';
+import { MyhttpService } from '../../core/services/myhttp.service';
 
 describe('CcvpnDetailComponent', () => {
     let component: CcvpnDetailComponent;
diff --git a/usecaseui-portal/src/app/ccvpn-detail/ccvpn-detail.component.ts b/usecaseui-portal/src/app/views/ccvpn-detail/ccvpn-detail.component.ts
index 04931461..109c143b 100644
--- a/usecaseui-portal/src/app/ccvpn-detail/ccvpn-detail.component.ts
+++ b/usecaseui-portal/src/app/views/ccvpn-detail/ccvpn-detail.component.ts
@@ -14,7 +14,7 @@
     limitations under the License.
 */
 import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
-import { MyhttpService } from '../myhttp.service';
+import { MyhttpService } from '../../core/services/myhttp.service';
 import * as d3 from 'd3';
 
 @Component({
@@ -136,7 +136,7 @@ export class CcvpnDetailComponent implements OnInit {
                 let sdwansiteresource_list = inputs[items][0];
                 Object.keys(sdwansiteresource_list).forEach((its) => {
                     let input2 = {};
-                    if(its.search("device") != -1 && sdwansiteresource_list[its] instanceof Array === true){
+                    if (its.search("device") != -1 && sdwansiteresource_list[its] instanceof Array === true) {
                         this.templateParameters["site"]["sdwandevice_list"][0] = sdwansiteresource_list[its][0];
                         let sitelanKey = {};
                         sitelanKey[its] = [];
@@ -461,7 +461,7 @@ export class CcvpnDetailComponent implements OnInit {
             "sdwansitewan_list": []
         };
         inputs = Object.assign(inputs, this.siteBaseData);
-        inputs["sdwandevice_list"]= this.siteSdwanDevice.map((item) => {
+        inputs["sdwandevice_list"] = this.siteSdwanDevice.map((item) => {
             return Object.assign({}, item);
         });
         inputs["sdwansitewan_list"] = this.siteWanData.map((item) => {
diff --git a/usecaseui-portal/src/app/ccvpn-network/ccvpn-network.component.css b/usecaseui-portal/src/app/views/ccvpn-network/ccvpn-network.component.css
index 5055205d..5055205d 100644
--- a/usecaseui-portal/src/app/ccvpn-network/ccvpn-network.component.css
+++ b/usecaseui-portal/src/app/views/ccvpn-network/ccvpn-network.component.css
diff --git a/usecaseui-portal/src/app/ccvpn-network/ccvpn-network.component.html b/usecaseui-portal/src/app/views/ccvpn-network/ccvpn-network.component.html
index 25687f67..25687f67 100644
--- a/usecaseui-portal/src/app/ccvpn-network/ccvpn-network.component.html
+++ b/usecaseui-portal/src/app/views/ccvpn-network/ccvpn-network.component.html
diff --git a/usecaseui-portal/src/app/ccvpn-network/ccvpn-network.component.spec.ts b/usecaseui-portal/src/app/views/ccvpn-network/ccvpn-network.component.spec.ts
index 9ec321c5..9ec321c5 100644
--- a/usecaseui-portal/src/app/ccvpn-network/ccvpn-network.component.spec.ts
+++ b/usecaseui-portal/src/app/views/ccvpn-network/ccvpn-network.component.spec.ts
diff --git a/usecaseui-portal/src/app/ccvpn-network/ccvpn-network.component.ts b/usecaseui-portal/src/app/views/ccvpn-network/ccvpn-network.component.ts
index 3de992fd..8a56d885 100644
--- a/usecaseui-portal/src/app/ccvpn-network/ccvpn-network.component.ts
+++ b/usecaseui-portal/src/app/views/ccvpn-network/ccvpn-network.component.ts
@@ -16,7 +16,7 @@
 import { Component, EventEmitter, OnInit, Output } from '@angular/core';
 import * as d3 from 'd3';
 import * as $ from 'jquery';
-import { networkHttpservice } from '../networkHttpservice.service';
+import { networkHttpservice } from '../../core/services/networkHttpservice.service';
 
 @Component({
     selector: 'app-ccvpn-network',
@@ -131,9 +131,9 @@ export class CcvpnNetworkComponent implements OnInit {
     charge = -300;
 
     imgmap = {
-        '1': './assets/images/cloud-county1.png',
-        '2': './assets/images/tp.png',
-        '3': './assets/images/cloud-out.png',
+        '1': 'assets/images/cloud-county1.png',
+        '2': 'assets/images/tp.png',
+        '3': 'assets/images/cloud-out.png',
     };
     tpoption = {
         container: '#tpContainer',
diff --git a/usecaseui-portal/src/app/fcaps/fcaps.component.html b/usecaseui-portal/src/app/views/fcaps/fcaps.component.html
index edd2111a..edd2111a 100644
--- a/usecaseui-portal/src/app/fcaps/fcaps.component.html
+++ b/usecaseui-portal/src/app/views/fcaps/fcaps.component.html
diff --git a/usecaseui-portal/src/app/services/services.component.less b/usecaseui-portal/src/app/views/fcaps/fcaps.component.less
index e69de29b..e69de29b 100644
--- a/usecaseui-portal/src/app/services/services.component.less
+++ b/usecaseui-portal/src/app/views/fcaps/fcaps.component.less
diff --git a/usecaseui-portal/src/app/fcaps/fcaps.component.spec.ts b/usecaseui-portal/src/app/views/fcaps/fcaps.component.spec.ts
index 42bdbc0f..42bdbc0f 100644
--- a/usecaseui-portal/src/app/fcaps/fcaps.component.spec.ts
+++ b/usecaseui-portal/src/app/views/fcaps/fcaps.component.spec.ts
diff --git a/usecaseui-portal/src/app/fcaps/fcaps.component.ts b/usecaseui-portal/src/app/views/fcaps/fcaps.component.ts
index 7f9ab7f4..7f9ab7f4 100644
--- a/usecaseui-portal/src/app/fcaps/fcaps.component.ts
+++ b/usecaseui-portal/src/app/views/fcaps/fcaps.component.ts
diff --git a/usecaseui-portal/src/app/home/home.component.css b/usecaseui-portal/src/app/views/home/home.component.css
index 41b3f5fe..41b3f5fe 100644
--- a/usecaseui-portal/src/app/home/home.component.css
+++ b/usecaseui-portal/src/app/views/home/home.component.css
diff --git a/usecaseui-portal/src/app/home/home.component.html b/usecaseui-portal/src/app/views/home/home.component.html
index 4126f241..4126f241 100644
--- a/usecaseui-portal/src/app/home/home.component.html
+++ b/usecaseui-portal/src/app/views/home/home.component.html
diff --git a/usecaseui-portal/src/app/home/home.component.less b/usecaseui-portal/src/app/views/home/home.component.less
index 9e768cf7..9e768cf7 100644
--- a/usecaseui-portal/src/app/home/home.component.less
+++ b/usecaseui-portal/src/app/views/home/home.component.less
diff --git a/usecaseui-portal/src/app/home/home.component.spec.ts b/usecaseui-portal/src/app/views/home/home.component.spec.ts
index 9e463e65..5456a323 100644
--- a/usecaseui-portal/src/app/home/home.component.spec.ts
+++ b/usecaseui-portal/src/app/views/home/home.component.spec.ts
@@ -7,10 +7,10 @@ import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { RouterTestingModule } from '@angular/router/testing';
 
 import { HomeComponent } from './home.component';
-import { PieComponent } from '../components/charts/pie/pie.component'; 
-import { BarComponent } from '../components/charts/bar/bar.component'; 
-import { LineComponent } from '../components/charts/line/line.component';
-import { HomesService } from '../homes.service';
+import { PieComponent } from '../../shared/components/charts/pie/pie.component'; 
+import { BarComponent } from '../../shared/components/charts/bar/bar.component'; 
+import { LineComponent } from '../../shared/components/charts/line/line.component';
+import { HomesService } from '../../core/services/homes.service';
 
 describe('HomeComponent', () => {
   let component: HomeComponent;
diff --git a/usecaseui-portal/src/app/home/home.component.ts b/usecaseui-portal/src/app/views/home/home.component.ts
index 2b1f6765..11a0f1a8 100644
--- a/usecaseui-portal/src/app/home/home.component.ts
+++ b/usecaseui-portal/src/app/views/home/home.component.ts
@@ -14,8 +14,8 @@
     limitations under the License.
 */
 import { Component, OnInit, Input, Output, EventEmitter, HostBinding } from '@angular/core';
-import { HomesService } from '../homes.service';
-import { slideToRight } from '../animates';
+import { HomesService } from '../../core/services/homes.service';
+import { slideToRight } from '../../animates';
 import { TranslateService } from "@ngx-translate/core";
 import { Router } from '@angular/router';
 
@@ -99,7 +99,7 @@ export class HomeComponent implements OnInit {
   getHomeServiceData() {
     this.myhttp.getHomeServiceData()
       .subscribe(
-        (data) => {          
+        (data) => {
           this.serviceNumber = data.serviceTotalNum;
           if (this.serviceNumber > 0) {
             this.serviceChart = true;
@@ -108,10 +108,10 @@ export class HomeComponent implements OnInit {
           }
           this.serviceChartData = {
             series: [{ data: data.customerServiceList }]
-          };         
+          };
         },
         (err) => {
-          console.log(err);
+          console.error(err);
         }
       )
   }
@@ -121,134 +121,134 @@ export class HomeComponent implements OnInit {
   VMAlarmChartInit: Object = {
     height: 180,
     option: {
-            tooltip: {
-                trigger: 'item',
-                formatter: '{b}\n{c},{d}%'
-            },
-            color: [
-                {
-                    type: 'linear',
-                    x: 0,
-                    y: 0,
-                    x2: 0,
-                    y2: 1,
-                    colorStops: [{
-                        offset: 0, color: '#FB93C2' // 0% color
-                    }, {
-                        offset: 1, color: '#FB7788' // 100% color
-                    }],
-                    globalCoord: false 
-                }, {
-                    type: 'linear',
-                    x: 0,
-                    y: 0,
-                    x2: 0,
-                    y2: 1,
-                    colorStops: [{
-                        offset: 0, color: '#A6BFE4' // 0% color
-                    }, {
-                        offset: 1, color: '#7A8BAE' // 100% color
-                    }],
-                    globalCoord: false 
-                }],
-            series: [{
-                name: "告警信�",
-                radius: ['50%', '70%'],
-                center: ['50%', '45%'],
-                label: {
-                    normal: {
-                        show: false,
-                    },
-                    emphasis: {
-                        show: true,
-                        formatter: '{b}\n{c},{d}%',
-                        color: "#3C4F8C"
-                    }
-                },
-                 
-            }]
-        }
-    };
+      tooltip: {
+        trigger: 'item',
+        formatter: '{b}\n{c},{d}%'
+      },
+      color: [
+        {
+          type: 'linear',
+          x: 0,
+          y: 0,
+          x2: 0,
+          y2: 1,
+          colorStops: [{
+            offset: 0, color: '#FB93C2' // 0% color
+          }, {
+            offset: 1, color: '#FB7788' // 100% color
+          }],
+          globalCoord: false
+        }, {
+          type: 'linear',
+          x: 0,
+          y: 0,
+          x2: 0,
+          y2: 1,
+          colorStops: [{
+            offset: 0, color: '#A6BFE4' // 0% color
+          }, {
+            offset: 1, color: '#7A8BAE' // 100% color
+          }],
+          globalCoord: false
+        }],
+      series: [{
+        name: "告警信�",
+        radius: ['50%', '70%'],
+        center: ['50%', '45%'],
+        label: {
+          normal: {
+            show: false,
+          },
+          emphasis: {
+            show: true,
+            formatter: '{b}\n{c},{d}%',
+            color: "#3C4F8C"
+          }
+        },
+
+      }]
+    }
+  };
 
   // alarm bar
   alarmChartData: Object;
   alarmChartInit: Object = {
     height: 180,
     option: {
-            tooltip: {
-                trigger: 'item',
-                formatter: '{b}\n{c},{d}%'
-            },
-            legend: {
-                orient: 'vertical',
-                left: '0px',
-                bottom: '0px',
-                itemWidth: 10,
-                itemHeight: 10,
-                textStyle: {
-                    color: "#3C4F8C"
-                },
-                data: ['Active', 'Fixed']
-            },
-            color: [
-                {
-                    type: 'linear',
-                    x: 0,
-                    y: 0,
-                    x2: 0,
-                    y2: 1,
-                    colorStops: [{
-                        offset: 0, color: '#FB93C2' // 0% color
-                    }, {
-                        offset: 1, color: '#FB7788' // 100% color
-                    }],
-                    globalCoord: false 
-                }, {
-                    type: 'linear',
-                    x: 0,
-                    y: 0,
-                    x2: 0,
-                    y2: 1,
-                    colorStops: [{
-                        offset: 0, color: '#A6BFE4' // 0% 
-                    }, {
-                        offset: 1, color: '#7A8BAE' // 100% 
-                    }],
-                    globalCoord: false 
-                }],
-            series: [{
-                name: "告警信�",
-                radius: '55%',
-                center: ['50%', '45%'],
-                label: {
-                    normal: {
-                        show: false,
-                    },
-                    emphasis: {
-                        show: true,
-                        formatter: '{b}\n{c},{d}%',
-                        color: "#3C4F8C"
-                    }
-                }
-            }]
+      tooltip: {
+        trigger: 'item',
+        formatter: '{b}\n{c},{d}%'
+      },
+      legend: {
+        orient: 'vertical',
+        left: '0px',
+        bottom: '0px',
+        itemWidth: 10,
+        itemHeight: 10,
+        textStyle: {
+          color: "#3C4F8C"
+        },
+        data: ['Active', 'Fixed']
+      },
+      color: [
+        {
+          type: 'linear',
+          x: 0,
+          y: 0,
+          x2: 0,
+          y2: 1,
+          colorStops: [{
+            offset: 0, color: '#FB93C2' // 0% color
+          }, {
+            offset: 1, color: '#FB7788' // 100% color
+          }],
+          globalCoord: false
+        }, {
+          type: 'linear',
+          x: 0,
+          y: 0,
+          x2: 0,
+          y2: 1,
+          colorStops: [{
+            offset: 0, color: '#A6BFE4' // 0% 
+          }, {
+            offset: 1, color: '#7A8BAE' // 100% 
+          }],
+          globalCoord: false
+        }],
+      series: [{
+        name: "告警信�",
+        radius: '55%',
+        center: ['50%', '45%'],
+        label: {
+          normal: {
+            show: false,
+          },
+          emphasis: {
+            show: true,
+            formatter: '{b}\n{c},{d}%',
+            color: "#3C4F8C"
+          }
         }
-    };
-
-    getHomeAlarmData() {
-        this.myhttp.getHomeAlarmData()
-            .subscribe((data) => {
-                this.alarmChartData = {
-                    series: [{
-                        data: [{name: "Active", value: data[0]}, {name: "Fixed", value: data[1]}]
-                    }]
-                };
-                this.VMAlarmChartData = {
-                    series: [{
-                        data: [{name: "Active", value: data[0]}, {name: "Fixed", value: data[1]}]
-                    }]
-                };
-            })
+      }]
     }
+  };
+
+  getHomeAlarmData() {
+    this.myhttp.getHomeAlarmData()
+      .subscribe((data) => {
+        this.alarmChartData = {
+          series: [{
+            data: [{ name: "Active", value: data[0] }, { name: "Fixed", value: data[1] }]
+          }]
+        };
+        this.VMAlarmChartData = {
+          series: [{
+            data: [{ name: "Active", value: data[0] }, { name: "Fixed", value: data[1] }]
+          }]
+        };
+      })
+  }
 
   // alarm line
   alarmLineChartData: Object;
@@ -393,7 +393,7 @@ export class HomeComponent implements OnInit {
           ]
         }
       }, (err) => {
-        console.log(err);
+        console.error(err);
       })
   }
 
@@ -427,7 +427,7 @@ export class HomeComponent implements OnInit {
           ]
         }
       }, (err) => {
-        console.log(err);
+        console.error(err);
       })
   }
 
@@ -461,14 +461,14 @@ export class HomeComponent implements OnInit {
           ]
         }
       }, (err) => {
-        console.log(err);
+        console.error(err);
       })
   }
   // sourceName 
   sourceNameList = ['performanceNameOne'];
   sourceNameSelected = null;
 
-  
+
   listSortMasters = null;
 
   getListSortMasters() {
@@ -477,7 +477,7 @@ export class HomeComponent implements OnInit {
     }
     this.myhttp.getListSortMasters()
       .subscribe((data) => {
-        this.listSortMasters = JSON.stringify(data);        
+        this.listSortMasters = JSON.stringify(data);
         sessionStorage.setItem('listSortMasters', this.listSortMasters)
       })
   }
@@ -489,7 +489,7 @@ export class HomeComponent implements OnInit {
       })
   }
   sourceNameSelect(item) {
-    if (this.sourceNameSelected != item) {      
+    if (this.sourceNameSelected != item) {
       this.sourceNameSelected = item;
       this.getHomeAlarmChartData()
     }
@@ -503,7 +503,7 @@ export class HomeComponent implements OnInit {
       endTime: nowTime,
       format: "day"
     }
-   
+
     this.myhttp.getHomeAlarmChartData(obj)
       .subscribe((data) => {
         this.alarmLineChartData = {
@@ -517,7 +517,7 @@ export class HomeComponent implements OnInit {
           ]
         }
       }, (err) => {
-        console.log(err);
+        console.error(err);
       })
   }
 
diff --git a/usecaseui-portal/src/app/management/management.component.html b/usecaseui-portal/src/app/views/management/management.component.html
index 2efa3f8e..c96f0253 100644
--- a/usecaseui-portal/src/app/management/management.component.html
+++ b/usecaseui-portal/src/app/views/management/management.component.html
@@ -14,23 +14,26 @@
     limitations under the License.
 -->
 <div class="content" style="padding: 20px 20px;height: 100vh">
-  <div class="management"  *ngIf="nocuster" >
+  <div class="management" *ngIf="nocuster">
     <div class="title">
       <p> {{"i18nTextDefine_Create_initial_customer" | translate}} </p>
       <span> {{"i18nTextDefine_Customer_not_in_ONAP" | translate}} </span>
       <span> {{"i18nTextDefine_CreateCustomer" | translate}} </span>
-      <img src="./assets/images/customer01.png" alt="">
-      <input nz-input placeholder=" {{'i18nTextDefine_Input_customerName' | translate}} " nzSize="large" style="height: 50px" [(ngModel)]="firstCustomer">
+      <img src="../../../assets/images/customer01.png" alt="">
+      <input nz-input placeholder=" {{'i18nTextDefine_Input_customerName' | translate}} " nzSize="large"
+        style="height: 50px" [(ngModel)]="firstCustomer">
       <div class="action">
-        <button nz-button nzType="primary" class="cancel" (click) = "clearCustomerInput()"> {{"i18nTextDefine_Cancel" | translate}} </button>
-        <button nz-button nzType="primary" class="add" (click) = "createNewCustomer(firstCustomer)"> {{"i18nTextDefine_Add" | translate}} </button>
+        <button nz-button nzType="primary" class="cancel" (click)="clearCustomerInput()">
+          {{"i18nTextDefine_Cancel" | translate}} </button>
+        <button nz-button nzType="primary" class="add" (click)="createNewCustomer(firstCustomer)">
+          {{"i18nTextDefine_Add" | translate}} </button>
       </div>
     </div>
     <div class="image">
-      <img src="./assets/images/customer02.png" alt="">
+      <img src="../../../assets/images/customer02.png" alt="">
     </div>
   </div>
   <div *ngIf="!nocuster" style="height: 100%">
     <app-customer></app-customer>
   </div>
-</div>
+</div>
\ No newline at end of file
diff --git a/usecaseui-portal/src/app/management/management.component.less b/usecaseui-portal/src/app/views/management/management.component.less
index 5a3a0f42..5a3a0f42 100644
--- a/usecaseui-portal/src/app/management/management.component.less
+++ b/usecaseui-portal/src/app/views/management/management.component.less
diff --git a/usecaseui-portal/src/app/management/management.component.spec.ts b/usecaseui-portal/src/app/views/management/management.component.spec.ts
index f6152432..f6152432 100644
--- a/usecaseui-portal/src/app/management/management.component.spec.ts
+++ b/usecaseui-portal/src/app/views/management/management.component.spec.ts
diff --git a/usecaseui-portal/src/app/management/management.component.ts b/usecaseui-portal/src/app/views/management/management.component.ts
index 0a5bfd2e..8b3afea7 100644
--- a/usecaseui-portal/src/app/management/management.component.ts
+++ b/usecaseui-portal/src/app/views/management/management.component.ts
@@ -14,8 +14,8 @@
     limitations under the License.
 */
 import { Component, OnInit , HostBinding} from '@angular/core';
-import { showHideAnimate, slideToRight } from '../animates';
-import { ManagemencsService } from '../managemencs.service';
+import { showHideAnimate, slideToRight } from '../../animates';
+import { ManagemencsService } from '../../core/services/managemencs.service';
 
 @Component({
   selector: 'app-management',
diff --git a/usecaseui-portal/src/app/performance/performance-vm/performance-vm.component.css b/usecaseui-portal/src/app/views/performance/performance-vm/performance-vm.component.css
index e9631957..e9631957 100644
--- a/usecaseui-portal/src/app/performance/performance-vm/performance-vm.component.css
+++ b/usecaseui-portal/src/app/views/performance/performance-vm/performance-vm.component.css
diff --git a/usecaseui-portal/src/app/performance/performance-vm/performance-vm.component.html b/usecaseui-portal/src/app/views/performance/performance-vm/performance-vm.component.html
index 06d84353..06d84353 100644
--- a/usecaseui-portal/src/app/performance/performance-vm/performance-vm.component.html
+++ b/usecaseui-portal/src/app/views/performance/performance-vm/performance-vm.component.html
diff --git a/usecaseui-portal/src/app/performance/performance-vm/performance-vm.component.less b/usecaseui-portal/src/app/views/performance/performance-vm/performance-vm.component.less
index 31623dcf..31623dcf 100644
--- a/usecaseui-portal/src/app/performance/performance-vm/performance-vm.component.less
+++ b/usecaseui-portal/src/app/views/performance/performance-vm/performance-vm.component.less
diff --git a/usecaseui-portal/src/app/performance/performance-vm/performance-vm.component.spec.ts b/usecaseui-portal/src/app/views/performance/performance-vm/performance-vm.component.spec.ts
index b66b2ea0..b66b2ea0 100644
--- a/usecaseui-portal/src/app/performance/performance-vm/performance-vm.component.spec.ts
+++ b/usecaseui-portal/src/app/views/performance/performance-vm/performance-vm.component.spec.ts
diff --git a/usecaseui-portal/src/app/performance/performance-vm/performance-vm.component.ts b/usecaseui-portal/src/app/views/performance/performance-vm/performance-vm.component.ts
index 73e77c52..c179cdbb 100644
--- a/usecaseui-portal/src/app/performance/performance-vm/performance-vm.component.ts
+++ b/usecaseui-portal/src/app/views/performance/performance-vm/performance-vm.component.ts
@@ -1,5 +1,5 @@
 import { Component, OnInit, HostBinding } from '@angular/core';
-import { slideToRight, showHideAnimate } from '../../animates';
+import { slideToRight, showHideAnimate } from '../../../animates';
 
 @Component({
   selector: 'app-performance-vm',
diff --git a/usecaseui-portal/src/app/performance/performance-vnf/performance-vnf.component.css b/usecaseui-portal/src/app/views/performance/performance-vnf/performance-vnf.component.css
index 269af7a9..269af7a9 100644
--- a/usecaseui-portal/src/app/performance/performance-vnf/performance-vnf.component.css
+++ b/usecaseui-portal/src/app/views/performance/performance-vnf/performance-vnf.component.css
diff --git a/usecaseui-portal/src/app/performance/performance-vnf/performance-vnf.component.html b/usecaseui-portal/src/app/views/performance/performance-vnf/performance-vnf.component.html
index f151ef33..9e0e2ed6 100644
--- a/usecaseui-portal/src/app/performance/performance-vnf/performance-vnf.component.html
+++ b/usecaseui-portal/src/app/views/performance/performance-vnf/performance-vnf.component.html
@@ -14,9 +14,9 @@
     limitations under the License.
 -->
 <h3 class="title">
-    <span (click)="performanceShow()" style="cursor:pointer;" *ngIf="graphicshow" >Performance VNF</span> 
-    <span (click)="graphicShow()" *ngIf="graphicshow">/ Graphic list </span> 
-    <span *ngIf="detailshow">/ Details </span> 
+    <span (click)="performanceShow()" style="cursor:pointer;" *ngIf="graphicshow">Performance VNF</span>
+    <span (click)="graphicShow()" *ngIf="graphicshow">/ Graphic list </span>
+    <span *ngIf="detailshow">/ Details </span>
 </h3>
 <div class="select" [@showHideAnimate]="state">
     <span>Source Name: </span>
@@ -28,33 +28,36 @@
             </li>
         </ul>
     </nz-dropdown>
-    <button class="search" nz-button [nzType]="'primary'"><i class="anticon anticon-search"></i><span>Search</span></button>
+    <button class="search" nz-button [nzType]="'primary'"><i
+            class="anticon anticon-search"></i><span>Search</span></button>
     <!-- <button class="search" nz-button [nzType]="'primary'" (click)="getperformanceSsourceNames()"><i class="anticon anticon-search"></i><span>Search</span></button> -->
 </div>
 <div class="content" [@showHideAnimate]="state">
     <div class="vnfs">
         <div class="vnf" *ngFor="let item of totalRecords">
-            <img src="../../../assets/images/vnf01.png" title="VNF" (click)="graphicShow2(item)">
+            <img src="../../../../assets/images/vnf01.png" title="VNF" (click)="graphicShow2(item)">
             <!-- <h3>{{item.name}}</h3> -->
-            <div class="intro"> 
-              {{item.name}}
+            <div class="intro">
+                {{item.name}}
             </div>
         </div>
         <div class="vnf" *ngFor="let item of totalpnfs">
-            <img src="../../../assets/images/pnf01.png" alt="PNF" (click)="graphicShow2(item)">
-            <div class="intro"> 
+            <img src="../../../../assets/images/pnf01.png" alt="PNF" (click)="graphicShow2(item)">
+            <div class="intro">
                 {{item.name}}
             </div>
         </div>
-        <div class="empty" *ngFor="let empty of emptys"></div>   
+        <div class="empty" *ngFor="let empty of emptys"></div>
     </div>
     <div class="pages">
-        <nz-pagination [(nzPageIndex)]="currentPage"  [nzTotal]="vnfsdataTotal"  [nzSize]="'small'" [(nzPageSize)]="pageSize" [nzPageSizeOptions]="[10,15,20,25,30]" nzShowSizeChanger nzShowQuickJumper></nz-pagination>
+        <nz-pagination [(nzPageIndex)]="currentPage" [nzTotal]="vnfsdataTotal" [nzSize]="'small'"
+            [(nzPageSize)]="pageSize" [nzPageSizeOptions]="[10,15,20,25,30]" nzShowSizeChanger nzShowQuickJumper>
+        </nz-pagination>
     </div>
 </div>
 <div [@showHideAnimate]="state2">
-    <app-graphiclist  (detailData)="detailShow($event)" [vnfname] = "vnfname"></app-graphiclist>
+    <app-graphiclist (detailData)="detailShow($event)" [vnfname]="vnfname"></app-graphiclist>
 </div>
 <div [@showHideAnimate]="state3">
     <app-performance-details [detailId]="detailId"></app-performance-details>
-</div>
+</div>
\ No newline at end of file
diff --git a/usecaseui-portal/src/app/performance/performance-vnf/performance-vnf.component.less b/usecaseui-portal/src/app/views/performance/performance-vnf/performance-vnf.component.less
index cc4e1ca5..cc4e1ca5 100644
--- a/usecaseui-portal/src/app/performance/performance-vnf/performance-vnf.component.less
+++ b/usecaseui-portal/src/app/views/performance/performance-vnf/performance-vnf.component.less
diff --git a/usecaseui-portal/src/app/performance/performance-vnf/performance-vnf.component.spec.ts b/usecaseui-portal/src/app/views/performance/performance-vnf/performance-vnf.component.spec.ts
index 18526cdd..25bcfd50 100644
--- a/usecaseui-portal/src/app/performance/performance-vnf/performance-vnf.component.spec.ts
+++ b/usecaseui-portal/src/app/views/performance/performance-vnf/performance-vnf.component.spec.ts
@@ -7,10 +7,10 @@ import { NZ_I18N, en_US } from 'ng-zorro-antd';
 import { HttpClientModule } from '@angular/common/http';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 
-import { PerformanceDetailsComponent } from '../../components/performance-details/performance-details.component';
-import { GraphiclistComponent } from '../../components/graphiclist/graphiclist.component';
+import { PerformanceDetailsComponent } from '../../../shared/components/performance-details/performance-details.component';
+import { GraphiclistComponent } from '../../../shared/components/graphiclist/graphiclist.component';
 import { PerformanceVnfComponent } from './performance-vnf.component';
-import { HomesService } from '../../homes.service';
+import { HomesService } from '../../../core/services/homes.service';
 
 describe('PerformanceVnfComponent', () => {
   let component: PerformanceVnfComponent;
diff --git a/usecaseui-portal/src/app/performance/performance-vnf/performance-vnf.component.ts b/usecaseui-portal/src/app/views/performance/performance-vnf/performance-vnf.component.ts
index 05719155..96b5404c 100644
--- a/usecaseui-portal/src/app/performance/performance-vnf/performance-vnf.component.ts
+++ b/usecaseui-portal/src/app/views/performance/performance-vnf/performance-vnf.component.ts
@@ -14,8 +14,8 @@
     limitations under the License.
 */
 import { Component, OnInit, HostBinding } from '@angular/core';
-import { slideToRight, showHideAnimate } from '../../animates';
-import { HomesService } from '../../homes.service';
+import { slideToRight, showHideAnimate } from '../../../animates';
+import { HomesService } from '../../../core/services/homes.service';
 
 @Component({
   selector: 'app-performance-vnf',
@@ -43,22 +43,22 @@ export class PerformanceVnfComponent implements OnInit {
     let _this = this;
     setTimeout(function(){
       _this.totalRecords = [    
-        {name:"Mfvs_MMEManagedElem entdElementMfvs_MMEM anagedELement¡­",text:"oahgieango"},
-        {name:"Mfvs_MMEManagedElem entdElementMfvs_MMEM anagedELement¡­",text:"oahgieango"},
-        {name:"Mfvs_MMEManagedElem entdElementMfvs_MMEM anagedELement¡­",text:"oahgieango"},
-        {name:"Mfvs_MMEManagedElem entdElementMfvs_MMEM anagedELement¡­",text:"oahgieango"},
-        {name:"Mfvs_MMEManagedElem entdElementMfvs_MMEM anagedELement¡­",text:"oahgieango"},
-        {name:"Mfvs_MMEManagedElem entdElementMfvs_MMEM anagedELement¡­",text:"oahgieango"},
-        {name:"Mfvs_MMEManagedElem entdElementMfvs_MMEM anagedELement¡­",text:"oahgieango"},
-        {name:"Mfvs_MMEManagedElem entdElementMfvs_MMEM anagedELement¡­",text:"oahgieango"},
-        {name:"Mfvs_MMEManagedElem entdElementMfvs_MMEM anagedELement¡­",text:"oahgieango"},
-        {name:"Mfvs_MMEManagedElem entdElementMfvs_MMEM anagedELement¡­",text:"oahgieango"},
-        {name:"Mfvs_MMEManagedElem entdElementMfvs_MMEM anagedELement¡­",text:"oahgieango"}
+        {name:"Mfvs_MMEManagedElem entdElementMfvs_MMEM anagedELement��",text:"oahgieango"},
+        {name:"Mfvs_MMEManagedElem entdElementMfvs_MMEM anagedELement��",text:"oahgieango"},
+        {name:"Mfvs_MMEManagedElem entdElementMfvs_MMEM anagedELement��",text:"oahgieango"},
+        {name:"Mfvs_MMEManagedElem entdElementMfvs_MMEM anagedELement��",text:"oahgieango"},
+        {name:"Mfvs_MMEManagedElem entdElementMfvs_MMEM anagedELement��",text:"oahgieango"},
+        {name:"Mfvs_MMEManagedElem entdElementMfvs_MMEM anagedELement��",text:"oahgieango"},
+        {name:"Mfvs_MMEManagedElem entdElementMfvs_MMEM anagedELement��",text:"oahgieango"},
+        {name:"Mfvs_MMEManagedElem entdElementMfvs_MMEM anagedELement��",text:"oahgieango"},
+        {name:"Mfvs_MMEManagedElem entdElementMfvs_MMEM anagedELement��",text:"oahgieango"},
+        {name:"Mfvs_MMEManagedElem entdElementMfvs_MMEM anagedELement��",text:"oahgieango"},
+        {name:"Mfvs_MMEManagedElem entdElementMfvs_MMEM anagedELement��",text:"oahgieango"}
       ];
       _this.totalpnfs = [
-        {name:"Mfvs_MMEManagedElem entdElementMfvs_MMEM anagedELement¡­",text:"oahgieango"},
-        {name:"Mfvs_MMEManagedElem entdElementMfvs_MMEM anagedELement¡­",text:"oahgieango"},
-        {name:"Mfvs_MMEManagedElem entdElementMfvs_MMEM anagedELement¡­",text:"oahgieango"}
+        {name:"Mfvs_MMEManagedElem entdElementMfvs_MMEM anagedELement��",text:"oahgieango"},
+        {name:"Mfvs_MMEManagedElem entdElementMfvs_MMEM anagedELement��",text:"oahgieango"},
+        {name:"Mfvs_MMEManagedElem entdElementMfvs_MMEM anagedELement��",text:"oahgieango"}
       ]
       _this.emptys = new Array(12-_this.totalRecords.length);
     },300)
diff --git a/usecaseui-portal/src/app/performance/performance.component.css b/usecaseui-portal/src/app/views/performance/performance.component.css
index f2169538..f2169538 100644
--- a/usecaseui-portal/src/app/performance/performance.component.css
+++ b/usecaseui-portal/src/app/views/performance/performance.component.css
diff --git a/usecaseui-portal/src/app/performance/performance.component.html b/usecaseui-portal/src/app/views/performance/performance.component.html
index cd92b659..cd92b659 100644
--- a/usecaseui-portal/src/app/performance/performance.component.html
+++ b/usecaseui-portal/src/app/views/performance/performance.component.html
diff --git a/usecaseui-portal/src/app/performance/performance.component.less b/usecaseui-portal/src/app/views/performance/performance.component.less
index 2b1949a5..2b1949a5 100644
--- a/usecaseui-portal/src/app/performance/performance.component.less
+++ b/usecaseui-portal/src/app/views/performance/performance.component.less
diff --git a/usecaseui-portal/src/app/performance/performance.component.spec.ts b/usecaseui-portal/src/app/views/performance/performance.component.spec.ts
index 1bdc919d..1bdc919d 100644
--- a/usecaseui-portal/src/app/performance/performance.component.spec.ts
+++ b/usecaseui-portal/src/app/views/performance/performance.component.spec.ts
diff --git a/usecaseui-portal/src/app/performance/performance.component.ts b/usecaseui-portal/src/app/views/performance/performance.component.ts
index 12405e9e..12405e9e 100644
--- a/usecaseui-portal/src/app/performance/performance.component.ts
+++ b/usecaseui-portal/src/app/views/performance/performance.component.ts
diff --git a/usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.css b/usecaseui-portal/src/app/views/services/onboard-vnf-vm/onboard-vnf-vm.component.css
index 4e80750c..4e80750c 100644
--- a/usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.css
+++ b/usecaseui-portal/src/app/views/services/onboard-vnf-vm/onboard-vnf-vm.component.css
diff --git a/usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.html b/usecaseui-portal/src/app/views/services/onboard-vnf-vm/onboard-vnf-vm.component.html
index 70ee81c0..70ee81c0 100644
--- a/usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.html
+++ b/usecaseui-portal/src/app/views/services/onboard-vnf-vm/onboard-vnf-vm.component.html
diff --git a/usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.less b/usecaseui-portal/src/app/views/services/onboard-vnf-vm/onboard-vnf-vm.component.less
index c31409c9..c31409c9 100644
--- a/usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.less
+++ b/usecaseui-portal/src/app/views/services/onboard-vnf-vm/onboard-vnf-vm.component.less
diff --git a/usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.spec.ts b/usecaseui-portal/src/app/views/services/onboard-vnf-vm/onboard-vnf-vm.component.spec.ts
index 0e49f656..0e49f656 100644
--- a/usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.spec.ts
+++ b/usecaseui-portal/src/app/views/services/onboard-vnf-vm/onboard-vnf-vm.component.spec.ts
diff --git a/usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.ts b/usecaseui-portal/src/app/views/services/onboard-vnf-vm/onboard-vnf-vm.component.ts
index dd2e7dd7..4899aed8 100644
--- a/usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.ts
+++ b/usecaseui-portal/src/app/views/services/onboard-vnf-vm/onboard-vnf-vm.component.ts
@@ -17,13 +17,11 @@ import { HttpClient, HttpRequest, HttpResponse } from '@angular/common/http';
 import { Component, OnInit, HostBinding, TemplateRef } from '@angular/core';
 import { NzNotificationService } from 'ng-zorro-antd';
 // import { MyhttpService } from '../../myhttp.service';
-import { onboardService } from '../../onboard.service';
-import { slideToRight } from '../../animates';
+import { onboardService } from '../../../core/services/onboard.service';
+import { slideToRight } from '../../../animates';
 import { NzMessageService, UploadFile, NzModalRef, NzModalService } from 'ng-zorro-antd';
 import { filter } from 'rxjs/operators';
 import { Title } from '@angular/platform-browser';
-import * as $ from 'jquery';
-
 
 @Component({
   selector: 'app-onboard-vnf-vm',
@@ -109,12 +107,12 @@ export class OnboardVnfVmComponent implements OnInit {
     this.notification.template(template);
   }
   notificationSuccess(notificationModel) {
-    this.notificationAttributes.imgPath = "../../../assets/images/execute-success.png";
+    this.notificationAttributes.imgPath = "../../../../assets/images/execute-success.png";
     this.notificationAttributes.status = "Success";
     this.notificationModelShow(notificationModel);
   }
   notificationFailed(notificationModel) {
-    this.notificationAttributes.imgPath = "../../../assets/images/execute-faild.png";
+    this.notificationAttributes.imgPath = "../../../../assets/images/execute-faild.png";
     this.notificationAttributes.status = "Failed";
     this.notificationModelShow(notificationModel);
   }
diff --git a/usecaseui-portal/src/app/services/services-list/services-list.component.css b/usecaseui-portal/src/app/views/services/services-list/services-list.component.css
index 0a7f92eb..0a7f92eb 100644
--- a/usecaseui-portal/src/app/services/services-list/services-list.component.css
+++ b/usecaseui-portal/src/app/views/services/services-list/services-list.component.css
diff --git a/usecaseui-portal/src/app/services/services-list/services-list.component.html b/usecaseui-portal/src/app/views/services/services-list/services-list.component.html
index d47b342c..6f6d8f74 100644
--- a/usecaseui-portal/src/app/services/services-list/services-list.component.html
+++ b/usecaseui-portal/src/app/views/services/services-list/services-list.component.html
@@ -15,66 +15,58 @@
 -->
 <div class="action ant-tabs-bar">
 
-    <span>
-        <i class="icon">
-            <img src="../../../assets/images/customer.png" alt="">
-        </i>
-         {{"i18nTextDefine_Customer" | translate}} : 
-    </span>
+    <span><i style="margin-right: 10px"><img src="assets/images/customer.png" alt=""></i>
+        {{"i18nTextDefine_Customer" | translate}} : </span>
     <nz-dropdown [nzTrigger]="'click'" [nzPlacement]="'bottomLeft'">
         <button nz-button nz-dropdown><span>{{customerSelected.name}}</span> <i class="anticon anticon-down"></i>
         </button>
-        <ul nz-menu>
+        <ul nz-menu style="min-height:40px;max-height: 200px; overflow: auto;">
             <li nz-menu-item (click)="choseCustomer(item)" *ngFor="let item of customerList">
-                <a title="{{item.name}}">{{item.name}}</a>
+                <a title="{{item.name}}"
+                    style="max-width: 165px; overflow: hidden; text-overflow: ellipsis;">{{item.name}}</a>
             </li>
         </ul>
     </nz-dropdown>
 
-    <span>
-        <i class="icon">
-            <img src="../../../assets/images/service-type.png"alt="">
-        </i> 
-        {{"i18nTextDefine_ServiceType" | translate}} : 
-    </span>
+    <span style="margin-left:40px"><i style="margin-right: 10px"><img src="assets/images/service-type.png" alt=""></i>
+        {{"i18nTextDefine_ServiceType" | translate}} : </span>
     <nz-dropdown [nzTrigger]="'click'" [nzPlacement]="'bottomLeft'">
         <button nz-button nz-dropdown><span>{{serviceTypeSelected.name}}</span> <i class="anticon anticon-down"></i>
         </button>
-        <ul nz-menu>
+        <ul nz-menu style="min-height:40px;max-height: 200px; overflow: auto;">
             <li nz-menu-item (click)="choseServiceType(item)" *ngFor="let item of serviceTypeList">
-                <a title="{{item.name}}">{{item.name}}</a>
+                <a title="{{item.name}}"
+                    style="max-width: 165px; overflow: hidden; text-overflow: ellipsis;">{{item.name}}</a>
             </li>
         </ul>
     </nz-dropdown>
 
-    <button class="create" nz-button [nzType]="'primary'" (click)="createModal()">
-        <i *ngIf="width>1200" class="anticon anticon-plus"></i>
-        <span> {{"i18nTextDefine_Create" | translate}} </span>
+    <button class="create" nz-button [nzType]="'primary'" (click)="createModal()"><i class="anticon anticon-plus"
+            style="transform: scale(1.5);line-height: 15px;margin-right: 5px;"></i><span>
+            {{"i18nTextDefine_Create" | translate}} </span>
     </button>
     <nz-modal nzWidth="428" [(nzVisible)]="isVisible" nzTitle=" {{'i18nTextDefine_ServiceCreation' | translate}} "
-              (nzOnCancel)="handleCancel()"
-              (nzOnOk)="handleOk()" nzClassName="serviceCreationModel"
-              nzCancelText=" {{'i18nTextDefine_Cancel' | translate}} "
-              nzOkText=" {{'i18nTextDefine_modelOk' | translate}} ">
+        (nzOnCancel)="handleCancel()" (nzOnOk)="handleOk()" nzClassName="serviceCreationModel"
+        nzCancelText=" {{'i18nTextDefine_Cancel' | translate}} " nzOkText=" {{'i18nTextDefine_modelOk' | translate}} ">
         <div class="select-list">
             <span style="display:inline-block;"> {{"i18nTextDefine_Customer" | translate}} : </span>
             <nz-select style="width: 176px;float: right;" [(ngModel)]="customerSelected2.name" nzAllowClear
-                       (ngModelChange)="customerChange()">
+                (ngModelChange)="customerChange()">
                 <nz-option *ngFor="let item of customerList2" [nzValue]="item.name" [nzLabel]="item.name"></nz-option>
             </nz-select>
         </div>
         <div class="select-list">
             <span style="display:inline-block;"> {{"i18nTextDefine_ServiceType" | translate}} : </span>
             <nz-select style="width: 176px;float: right;" [(ngModel)]="serviceTypeSelectedName" nzAllowClear
-                       (ngModelChange)="serviceTypeChange()">
-                <nz-option *ngFor="let item of serviceTypeList2" [nzValue]="item.name"
-                           [nzLabel]="item.name"></nz-option>
+                (ngModelChange)="serviceTypeChange()">
+                <nz-option *ngFor="let item of serviceTypeList2" [nzValue]="item.name" [nzLabel]="item.name">
+                </nz-option>
             </nz-select>
         </div>
         <div class="select-list">
             <span style="display:inline-block;"> {{"i18nTextDefine_UseCase" | translate}} : </span>
             <nz-select style="width: 176px;float: right;" [(ngModel)]="templateTypeSelected" nzAllowClear
-                       (ngModelChange)="choseTemplateType()">
+                (ngModelChange)="choseTemplateType()">
                 <!-- <nz-option *ngFor="let item of templateType" [nzValue]="item" [nzLabel]="item"></nz-option> -->
                 <nz-option nzValue="SOTN" nzLabel="SOTN"></nz-option>
                 <nz-option nzValue="CCVPN" nzLabel="CCVPN"></nz-option>
@@ -100,7 +92,7 @@
         <div *ngIf="templateTypeSelected == 'E2E Service'">
             <div class="check-box" style="margin:30px; height: 50px">
                 <input class="check-box-style" style="zoom: 1.8; width: 70px" type="checkbox"
-                       [(ngModel)]="isSol005Interface" value="true" nzAllowClear>
+                    [(ngModel)]="isSol005Interface" value="true" nzAllowClear>
                 <label class="label" style="font-size: 20px; color: rgb(60,79,140,0.5)">Sol005</label>
             </div>
         </div>
@@ -131,110 +123,101 @@
         </li>
     </ul>
     <div class="list" id="services-list" [ngClass]="{'listdisplay':listDisplay == true}">
-        <nz-table *ngIf="1"
-                  #nzTable [nzData]="tableData"
-                  nzShowSizeChanger
-                  [nzFrontPagination]="false"
-                  [nzShowQuickJumper]="true"
-                  [nzPageSizeOptions]="[5,10,15,20]"
-                  [nzTotal]='total'
-                  [(nzPageSize)]="pageSize"
-                  [(nzPageIndex)]='pageIndex'
-                  [nzLoading]="loading"
-                  [nzSize]="'middle'"
-                  [nzScroll]="{ y: '58vh' }"
-                  (nzPageIndexChange)="searchData()"
-                  (nzPageSizeChange)="searchData(true)">
+        <nz-table *ngIf="1" #nzTable [nzData]="tableData" nzShowSizeChanger [nzFrontPagination]="false"
+            [nzShowQuickJumper]="true" [nzPageSizeOptions]="[5,10,15,20]" [nzTotal]='total' [(nzPageSize)]="pageSize"
+            [(nzPageIndex)]='pageIndex' [nzLoading]="loading" [nzSize]="'middle'" [nzScroll]="{ y: '58vh' }"
+            (nzPageIndexChange)="searchData()" (nzPageSizeChange)="searchData(true)">
             <thead>
-            <tr>
-                <th nzWidth="5%"> {{"i18nTextDefine_NO" | translate}}</th>
-                <th nzWidth="5%"></th>
-                <th nzWidth="20%"> {{"i18nTextDefine_Name" | translate}}</th>
-                <th nzWidth="20%"> {{"i18nTextDefine_InstanceID" | translate}}</th>
-                <th nzWidth="15%"> {{"i18nTextDefine_UseCase" | translate}}</th>
-                <th nzWidth="20%"> {{"i18nTextDefine_Status" | translate}}</th>
-                <th nzWidth="15%"> {{"i18nTextDefine_Action" | translate}}</th>
-            </tr>
+                <tr>
+                    <th nzWidth="5%"> {{"i18nTextDefine_NO" | translate}}</th>
+                    <th nzWidth="5%"></th>
+                    <th nzWidth="20%"> {{"i18nTextDefine_Name" | translate}}</th>
+                    <th nzWidth="20%"> {{"i18nTextDefine_InstanceID" | translate}}</th>
+                    <th nzWidth="15%"> {{"i18nTextDefine_UseCase" | translate}}</th>
+                    <th nzWidth="20%"> {{"i18nTextDefine_Status" | translate}}</th>
+                    <th nzWidth="15%"> {{"i18nTextDefine_Action" | translate}}</th>
+                </tr>
             </thead>
             <tbody>
-            <ng-template ngFor let-data [ngForOf]="nzTable.data" let-i="index">
-                <tr>
-                    <td>{{pageSize*(pageIndex-1) + i+1}}</td>
-                    <td [nzShowExpand]="data.childServiceInstances[0]" [(nzExpand)]="data.expand"></td>
-                    <td>{{data["service-instance-name"] || data.nsName}}</td>
-                    <td>{{data["service-instance-id"] || data.nsInstanceId}}</td>
-                    <td>
-                        <p [ngClass]="{'e2eColor':data.serviceDomain=='E2E Service','nsColor':data.serviceDomain=='Network Service','ccvpnColor':data.serviceDomain=='CCVPN','sotnColor':data.serviceDomain=='SOTN','voLTEColor':data.serviceDomain=='voLTE type'}">
-                            {{data.serviceDomain}}
-                        </p>
-                    </td>
-                    <td>
-              <span [ngClass]="{'active':data.statusClass=='2001','closed':data.statusClass=='Closed','onboarding':data.statusClass=='Onboarding',
+                <ng-template ngFor let-data [ngForOf]="nzTable.data" let-i="index">
+                    <tr>
+                        <td>{{pageSize*(pageIndex-1) + i+1}}</td>
+                        <td [nzShowExpand]="data.childServiceInstances[0]" [(nzExpand)]="data.expand"></td>
+                        <td>{{data["service-instance-name"] || data.nsName}}</td>
+                        <td>{{data["service-instance-id"] || data.nsInstanceId}}</td>
+                        <td>
+                            <p
+                                [ngClass]="{'e2eColor':data.serviceDomain=='E2E Service','nsColor':data.serviceDomain=='Network Service','ccvpnColor':data.serviceDomain=='CCVPN','sotnColor':data.serviceDomain=='SOTN','voLTEColor':data.serviceDomain=='voLTE type'}">
+                                {{data.serviceDomain}}
+                            </p>
+                        </td>
+                        <td>
+                            <span [ngClass]="{'active':data.statusClass=='2001','closed':data.statusClass=='Closed','onboarding':data.statusClass=='Onboarding',
                     'updating':data.statusClass=='Updating','deleting':data.statusClass=='1002','creating':data.statusClass=='1001',
                     'scaling':data.statusClass=='1003','healing':data.statusClass=='1004'}"
-                    *ngIf="data.tips != 'Available' && data.tips != 'Unavailable'">{{data.tips}}</span>
-                        <span *ngIf="data.tips == 'Available' " style="margin-left: 10px">
-                            <img src="assets/images/wancheng-icon.png" alt="Available">
-                        </span>
-                        <span *ngIf="data.tips == 'Unavailable' " style="margin-left: 10px">
-                            <img src="assets/images/shibai-icon.png" alt="Unavailable">
-                        </span>
-                        <nz-progress *ngIf="data.status == 'In Progress'" [nzPercent]="data.rate" [nzShowInfo]="false"
-                                     nzStatus="active"></nz-progress>
-                    </td>
-                    <td>
-                        <i [ngClass]="{'cannotclick':data.status == 'In Progress'||(data.status=='Failed' && data.operationType=='1001')||(data.status=='Failed' && data.operationType=='1002')}"
-                           class="anticon anticon-bars" (click)="serviceDetail(data,1)"></i>
-                        <i [ngClass]="{'cannotclick':data.status == 'In Progress'}" class="anticon anticon-delete"
-                           (click)="deleteModel(data)"></i>
-                        <i [ngClass]="{'cannotclick':data.status == 'In Progress'}" class="anticon anticon-ellipsis"
-                           (click)="iconMoreShow(data,tableData)" style="transform: rotate(90deg);"></i>
+                                *ngIf="data.tips != 'Available' && data.tips != 'Unavailable'">{{data.tips}}</span>
+                            <span *ngIf="data.tips == 'Available' " style="margin-left: 10px">
+                                <img src="assets/images/wancheng-icon.png" alt="Available">
+                            </span>
+                            <span *ngIf="data.tips == 'Unavailable' " style="margin-left: 10px">
+                                <img src="assets/images/shibai-icon.png" alt="Unavailable">
+                            </span>
+                            <nz-progress *ngIf="data.status == 'In Progress'" [nzPercent]="data.rate"
+                                [nzShowInfo]="false" nzStatus="active"></nz-progress>
+                        </td>
+                        <td>
+                            <i [ngClass]="{'cannotclick':data.status == 'In Progress'||(data.status=='Failed' && data.operationType=='1001')||(data.status=='Failed' && data.operationType=='1002')}"
+                                class="anticon anticon-bars" (click)="serviceDetail(data,1)"></i>
+                            <i [ngClass]="{'cannotclick':data.status == 'In Progress'}" class="anticon anticon-delete"
+                                (click)="deleteModel(data)"></i>
+                            <i [ngClass]="{'cannotclick':data.status == 'In Progress'}" class="anticon anticon-ellipsis"
+                                (click)="iconMoreShow(data,tableData)" style="transform: rotate(90deg);"></i>
 
-                        <ul *ngIf="data.iconMore==true " class="icon-more">
-                            <li (click)="scaleService(data)"
-                                [ngClass]="{'cannotclick':data.serviceDomain!='E2E Service' || data.status == 'In Progress'||(data.status=='Failed' && data.operationType=='1001')||(data.status=='Failed' && data.operationType=='1002')}">
-                                <i class="anticon anticon-scale"></i>
-                                <span> {{"i18nTextDefine_Scale" | translate}} </span>
-                            </li>
-                            <li (click)="serviceDetail(data,2)"
-                                [ngClass]="{'cannotclick':data.serviceDomain!='CCVPN' || data.status == 'In Progress'||(data.status=='Failed' && data.operationType=='1001')||(data.status=='Failed' && data.operationType=='1002')}">
-                                <i class="anticon anticon-update"></i>
-                                <span> {{"i18nTextDefine_Update" | translate}} </span>
-                            </li>
-                        </ul>
-                        <!-- <i *ngIf="data.serviceDomain=='E2E Service'||data.serviceDomain=='Network Service' " class="anticon anticon-cloud-upload-o" (click)="updataService(data)"></i> -->
-                        <!-- <i [ngClass]="{'cannotclick':data.status == 'processing'||data.status=='Deleting'||data.status=='Creating'||data.status=='Healing'}"
+                            <ul *ngIf="data.iconMore==true " class="icon-more">
+                                <li (click)="scaleService(data)"
+                                    [ngClass]="{'cannotclick':data.serviceDomain!='E2E Service' || data.status == 'In Progress'||(data.status=='Failed' && data.operationType=='1001')||(data.status=='Failed' && data.operationType=='1002')}">
+                                    <i class="anticon anticon-scale"></i>
+                                    <span> {{"i18nTextDefine_Scale" | translate}} </span>
+                                </li>
+                                <li (click)="serviceDetail(data,2)"
+                                    [ngClass]="{'cannotclick':data.serviceDomain!='CCVPN' || data.status == 'In Progress'||(data.status=='Failed' && data.operationType=='1001')||(data.status=='Failed' && data.operationType=='1002')}">
+                                    <i class="anticon anticon-update"></i>
+                                    <span> {{"i18nTextDefine_Update" | translate}} </span>
+                                </li>
+                            </ul>
+                            <!-- <i *ngIf="data.serviceDomain=='E2E Service'||data.serviceDomain=='Network Service' " class="anticon anticon-cloud-upload-o" (click)="updataService(data)"></i> -->
+                            <!-- <i [ngClass]="{'cannotclick':data.status == 'processing'||data.status=='Deleting'||data.status=='Creating'||data.status=='Healing'}"
                           *ngIf="data.serviceDomain=='Network Service' " class="anticon anticon-reload" (click)="healService(data)"></i> -->
-                    </td>
-                </tr>
-                <tr class="childtr" [nzExpand]="data.expand" *ngFor="let item of data.childServiceInstances">
-                    <td></td>
-                    <td></td>
-                    <td>{{item["service-instance-id"] || item.nsInstanceId || item.vnfInstanceId}}</td>
-                    <td>{{item["service-instance-name"] || item.nsName || item.vnfInstanceName}}</td>
-                    <td>
-                        <p [ngClass]="{'vnfColor':item.serviceDomain=='vnf','siteColor':item.serviceDomain=='SITE','SDWANColor':item.serviceDomain=='SDWAN'}">
-                            {{item.serviceDomain}}
-                        </p>
-                    </td>
-                    <td>
-                        <span [ngClass]="{'healing':data.statusClass=='1004'}">{{item.tips}}</span>
-                        <nz-progress *ngIf=" item.status == 'In Progress' " [nzPercent]="item.rate"></nz-progress>
-                    </td>
-                    <td>
-                        <i [ngClass]="{'cannotclick':data.serviceDomain!='Network Service' || data.status == 'In Progress'||(data.status=='Failed' && data.operationType=='1001')||(data.status=='Failed' && data.operationType=='1002')}"
-                           class="anticon anticon-reload" (click)="healService(item)"></i>
-                    </td>
-                </tr>
-            </ng-template>
+                        </td>
+                    </tr>
+                    <tr class="childtr" [nzExpand]="data.expand" *ngFor="let item of data.childServiceInstances">
+                        <td></td>
+                        <td></td>
+                        <td>{{item["service-instance-id"] || item.nsInstanceId || item.vnfInstanceId}}</td>
+                        <td>{{item["service-instance-name"] || item.nsName || item.vnfInstanceName}}</td>
+                        <td>
+                            <p
+                                [ngClass]="{'vnfColor':item.serviceDomain=='vnf','siteColor':item.serviceDomain=='SITE','SDWANColor':item.serviceDomain=='SDWAN'}">
+                                {{item.serviceDomain}}
+                            </p>
+                        </td>
+                        <td>
+                            <span [ngClass]="{'healing':data.statusClass=='1004'}">{{item.tips}}</span>
+                            <nz-progress *ngIf=" item.status == 'In Progress' " [nzPercent]="item.rate"></nz-progress>
+                        </td>
+                        <td>
+                            <i [ngClass]="{'cannotclick':data.serviceDomain!='Network Service' || data.status == 'In Progress'||(data.status=='Failed' && data.operationType=='1001')||(data.status=='Failed' && data.operationType=='1002')}"
+                                class="anticon anticon-reload" (click)="healService(item)"></i>
+                        </td>
+                    </tr>
+                </ng-template>
             </tbody>
         </nz-table>
 
         <nz-modal nzWidth="428" [nzVisible]="scaleModelVisible" nzTitle=" {{'i18nTextDefine_Scale' | translate}} "
-                  (nzOnCancel)="scaleCancel()"
-                  (nzOnOk)="scaleOk(templatescalestarting,templateScaleSuccessFaild)" nzClassName="scaleModel"
-                  nzCancelText=" {{'i18nTextDefine_Cancel' | translate}} "
-                  nzOkText=" {{'i18nTextDefine_modelOk' | translate}} ">
+            (nzOnCancel)="scaleCancel()" (nzOnOk)="scaleOk(templatescalestarting,templateScaleSuccessFaild)"
+            nzClassName="scaleModel" nzCancelText=" {{'i18nTextDefine_Cancel' | translate}} "
+            nzOkText=" {{'i18nTextDefine_modelOk' | translate}} ">
             <h3><span style="color: red">*&nbsp;</span> {{"i18nTextDefine_SureScale" | translate}} </h3>
             <div class="question">
                 <h4> {{"i18nTextDefine_InstanceID" | translate}} :</h4>
@@ -259,7 +242,7 @@
                 <div class="e2eScaleContent">
                     <span class="e2eScaleLable"> {{"i18nTextDefine_Number_Of_Steps" | translate}} :</span>
                     <nz-input-number style="width: 165px;" [(ngModel)]="item.numberOfSteps" [nzMin]="1" [nzMax]="100"
-                                     nzPrecision=0 [nzStep]="1" nzPlaceHolder="number"></nz-input-number>
+                        nzPrecision=0 [nzStep]="1" nzPlaceHolder="number"></nz-input-number>
                 </div>
                 <div class="e2eScaleContent">
                     <span class="e2eScaleLable"> {{"i18nTextDefine_ScalingDirection" | translate}} :</span>
@@ -302,11 +285,10 @@
         </nz-modal>
 
         <nz-modal nzWidth="428" [(nzVisible)]="deleteModelVisible" nzTitle=" {{'i18nTextDefine_delete' | translate}} "
-                  (nzOnCancel)="deleteCancel()"
-                  (nzOnOk)="deleteOk(templatedeletestarting,templateDeleteSuccessFaild)"
-                  nzClassName="{{thisService['serviceDomain'] == 'Network Service'?'nsdeleteModel':'deleteModel'}}"
-                  nzCancelText=" {{'i18nTextDefine_Cancel' | translate}} "
-                  nzOkText=" {{'i18nTextDefine_modelOk' | translate}} ">
+            (nzOnCancel)="deleteCancel()" (nzOnOk)="deleteOk(templatedeletestarting,templateDeleteSuccessFaild)"
+            nzClassName="{{thisService['serviceDomain'] == 'Network Service'?'nsdeleteModel':'deleteModel'}}"
+            nzCancelText=" {{'i18nTextDefine_Cancel' | translate}} "
+            nzOkText=" {{'i18nTextDefine_modelOk' | translate}} ">
             <h3><span style="color: red">*&nbsp;</span> {{"i18nTextDefine_SureDelete" | translate}} </h3>
             <div class="question">
                 <h4> {{"i18nTextDefine_InstanceName" | translate}} :</h4>
@@ -332,7 +314,7 @@
                     <h4 *ngIf="terminationType=='graceful'"> {{"i18nTextDefine_gracefulTerminationTimeout" | translate}}
                         :</h4>
                     <input *ngIf="terminationType=='graceful'" style="width: 306px;" nz-input
-                           [(ngModel)]="gracefulTerminationTimeout">
+                        [(ngModel)]="gracefulTerminationTimeout">
                 </div>
             </div>
 
@@ -343,16 +325,16 @@
                             <img src="assets/images/execute-inproess.png" alt="instance temination is starting">
                         </span>
                         <div class="ant-notification-notice-message"
-                             *ngIf="thisService['serviceDomain'] == 'CCVPN' || thisService['serviceDomain'] == 'SOTN'">
+                            *ngIf="thisService['serviceDomain'] == 'CCVPN' || thisService['serviceDomain'] == 'SOTN'">
                             {{ thisService['serviceDomain'] }} &nbsp; {{"i18nTextDefine_InstanceTeminationStarting" |
                             translate}}
                         </div>
                         <div class="ant-notification-notice-message"
-                             *ngIf="thisService['serviceDomain'] == 'E2E Service'">E2E &nbsp;
+                            *ngIf="thisService['serviceDomain'] == 'E2E Service'">E2E &nbsp;
                             {{"i18nTextDefine_InstanceTeminationStarting" | translate}}
                         </div>
                         <div class="ant-notification-notice-message"
-                             *ngIf="thisService['serviceDomain'] == 'Network Service'">NS &nbsp;
+                            *ngIf="thisService['serviceDomain'] == 'Network Service'">NS &nbsp;
                             {{"i18nTextDefine_InstanceTeminationStarting" | translate}}
                         </div>
                         <div class="ant-notification-notice-description">
@@ -378,10 +360,9 @@
         </nz-modal>
 
         <nz-modal nzWidth="428" [nzVisible]="healModelVisible" nzTitle=" {{'i18nTextDefine_Heal' | translate}} "
-                  (nzOnCancel)="healCancel()"
-                  (nzOnOk)="healOk(templatehealstarting,templatehealSuccessFaild)" nzClassName="healModel"
-                  nzCancelText=" {{'i18nTextDefine_Cancel' | translate}} "
-                  nzOkText=" {{'i18nTextDefine_modelOk' | translate}} ">
+            (nzOnCancel)="healCancel()" (nzOnOk)="healOk(templatehealstarting,templatehealSuccessFaild)"
+            nzClassName="healModel" nzCancelText=" {{'i18nTextDefine_Cancel' | translate}} "
+            nzOkText=" {{'i18nTextDefine_modelOk' | translate}} ">
             <h3><span style="color: red">*&nbsp;</span> {{"i18nTextDefine_SureHeal" | translate}} </h3>
             <div class="heal-question">
                 <p class="heal-label"> {{"i18nTextDefine_InstanceID" | translate}} : </p>
@@ -396,7 +377,7 @@
                 <div class="question">
                     <p class="heal-label"> {{"i18nTextDefine_degreeHealing" | translate}} :</p>
                     <nz-select style="width: 200px;height:42px;margin-left: 15px;border-radius: 6px"
-                               [(ngModel)]="nsParams.degreeHealing">
+                        [(ngModel)]="nsParams.degreeHealing">
                         <nz-option nzValue="HEAL_RESTORE" nzLabel="HEAL_RESTORE"></nz-option>
                         <nz-option nzValue="HEAL_QOS" nzLabel="HEAL_QOS"></nz-option>
                         <nz-option nzValue="HEAL_RESET" nzLabel="HEAL_RESET"></nz-option>
@@ -443,8 +424,8 @@
                 <div class="heal-question">
                     <p class="heal-label"> {{"i18nTextDefine_actionvminfo" | translate}}:</p>
                     <nz-select
-                            style=" float: right;width: 200px;margin-left: 15px;border-radius: 6px;margin-right: 30px"
-                            [(ngModel)]="vmSelected">
+                        style=" float: right;width: 200px;margin-left: 15px;border-radius: 6px;margin-right: 30px"
+                        [(ngModel)]="vmSelected">
                         <nz-option *ngFor="let item of vnfVms" [nzValue]="item" [nzLabel]="item.vmName"></nz-option>
                     </nz-select>
                 </div>
@@ -485,27 +466,27 @@
         <ng-template #templateCreatestarting>
             <div class="ant-notification-notice-content">
                 <div class="ant-notification-notice-with-icon">
-                        <span class="ant-notification-notice-icon">
-                            <img src="assets/images/execute-inproess.png" alt="instance temination is starting">
-                        </span>
+                    <span class="ant-notification-notice-icon">
+                        <img src="assets/images/execute-inproess.png" alt="instance temination is starting">
+                    </span>
                     <div class="ant-notification-notice-message"
-                         *ngIf="thisCreateService['serviceDomain'] == 'CCVPN' || thisService['serviceDomain'] == 'SOTN'">
+                        *ngIf="thisCreateService['serviceDomain'] == 'CCVPN' || thisService['serviceDomain'] == 'SOTN'">
                         {{ thisService['serviceDomain'] }} &nbsp; {{"i18nTextDefine_InstanceCreationStarting" |
                         translate}}
                     </div>
                     <div class="ant-notification-notice-message"
-                         *ngIf="thisCreateService['serviceDomain'] == 'E2E Service'">E2E &nbsp;
+                        *ngIf="thisCreateService['serviceDomain'] == 'E2E Service'">E2E &nbsp;
                         {{"i18nTextDefine_InstanceCreationStarting" | translate}}
                     </div>
                     <div class="ant-notification-notice-message"
-                         *ngIf="thisCreateService['serviceDomain'] == 'Network Service'">NS &nbsp;
+                        *ngIf="thisCreateService['serviceDomain'] == 'Network Service'">NS &nbsp;
                         {{"i18nTextDefine_InstanceCreationStarting" | translate}}
                     </div>
                     <div class="ant-notification-notice-description">
                         <div class="notificationlist">
                             <p> {{"i18nTextDefine_InstanceName" | translate}} :</p>
                             <span>{{ thisCreateService["service-instance-name"] }}
-                                </span>
+                            </span>
                         </div>
                         <div class="notificationlist">
                             <p> {{"i18nTextDefine_Customer" | translate}} :</p>
@@ -523,36 +504,36 @@
         <ng-template #templateCreateSuccessFaild>
             <div class="ant-notification-notice-content">
                 <div class="ant-notification-notice-with-icon">
-                        <span class="ant-notification-notice-icon">
-                            <img src="assets/images/execute-success.png" alt="instance temination is starting"
-                                 *ngIf="thisCreateService.status == 'Successful'">
-                            <img src="assets/images/execute-faild.png" alt="instance temination is starting"
-                                 *ngIf="thisCreateService.status == 'Failed'">
-                        </span>
+                    <span class="ant-notification-notice-icon">
+                        <img src="assets/images/execute-success.png" alt="instance temination is starting"
+                            *ngIf="thisCreateService.status == 'Successful'">
+                        <img src="assets/images/execute-faild.png" alt="instance temination is starting"
+                            *ngIf="thisCreateService.status == 'Failed'">
+                    </span>
                     <div class="ant-notification-notice-message"
-                         *ngIf="(thisCreateService['serviceDomain'] == 'CCVPN' || thisCreateService['serviceDomain'] == 'SOTN') && thisCreateService.status == 'Successful'">
+                        *ngIf="(thisCreateService['serviceDomain'] == 'CCVPN' || thisCreateService['serviceDomain'] == 'SOTN') && thisCreateService.status == 'Successful'">
                         {{ thisCreateService['serviceDomain'] }} &nbsp; {{"i18nTextDefine_InstanceCreatedSuccessfully" |
                         translate}}
                     </div>
                     <div class="ant-notification-notice-message"
-                         *ngIf="(thisCreateService['serviceDomain'] == 'E2E Service') && thisCreateService.status == 'Successful'">
+                        *ngIf="(thisCreateService['serviceDomain'] == 'E2E Service') && thisCreateService.status == 'Successful'">
                         E2E &nbsp; {{"i18nTextDefine_InstanceCreatedSuccessfully" | translate}}
                     </div>
                     <div class="ant-notification-notice-message"
-                         *ngIf="(thisCreateService['serviceDomain'] == 'Network Service') && thisCreateService.status == 'Successful'">
+                        *ngIf="(thisCreateService['serviceDomain'] == 'Network Service') && thisCreateService.status == 'Successful'">
                         NS &nbsp; {{"i18nTextDefine_InstanceCreatedSuccessfully" | translate}}
                     </div>
                     <div class="ant-notification-notice-message"
-                         *ngIf="(thisCreateService['serviceDomain'] == 'CCVPN' || thisCreateService['serviceDomain'] == 'SOTN') && thisCreateService.status == 'Failed'">
+                        *ngIf="(thisCreateService['serviceDomain'] == 'CCVPN' || thisCreateService['serviceDomain'] == 'SOTN') && thisCreateService.status == 'Failed'">
                         {{ thisCreateService['serviceDomain'] }} &nbsp; {{"i18nTextDefine_InstanceCreationFailed" |
                         translate}}
                     </div>
                     <div class="ant-notification-notice-message"
-                         *ngIf="(thisCreateService['serviceDomain'] == 'E2E Service') && thisCreateService.status == 'Failed'">
+                        *ngIf="(thisCreateService['serviceDomain'] == 'E2E Service') && thisCreateService.status == 'Failed'">
                         E2E &nbsp; {{"i18nTextDefine_InstanceCreationFailed" | translate}}
                     </div>
                     <div class="ant-notification-notice-message"
-                         *ngIf="(thisCreateService['serviceDomain'] == 'Network Service') && thisCreateService.status == 'Failed'">
+                        *ngIf="(thisCreateService['serviceDomain'] == 'Network Service') && thisCreateService.status == 'Failed'">
                         NS &nbsp; {{"i18nTextDefine_InstanceCreationFailed" | translate}}
                     </div>
                     <div class="ant-notification-notice-description">
@@ -560,7 +541,7 @@
                             <p> {{"i18nTextDefine_InstanceName" | translate}} :</p>
                             <span>{{ thisCreateService["service-instance-name"] ||
                                     thisCreateService["nsInstanceName"] }}
-                                </span>
+                            </span>
                         </div>
                         <div class="notificationlist">
                             <p> {{"i18nTextDefine_Customer" | translate}} :</p>
@@ -578,36 +559,36 @@
         <ng-template #templateDeleteSuccessFaild>
             <div class="ant-notification-notice-content">
                 <div class="ant-notification-notice-with-icon">
-                        <span class="ant-notification-notice-icon">
-                            <img src="assets/images/execute-success.png" alt="instance temination is starting"
-                                 *ngIf="thisService.status == 'Successful'">
-                            <img src="assets/images/execute-faild.png" alt="instance temination is starting"
-                                 *ngIf="thisService.status == 'Failed'">
-                        </span>
+                    <span class="ant-notification-notice-icon">
+                        <img src="assets/images/execute-success.png" alt="instance temination is starting"
+                            *ngIf="thisService.status == 'Successful'">
+                        <img src="assets/images/execute-faild.png" alt="instance temination is starting"
+                            *ngIf="thisService.status == 'Failed'">
+                    </span>
                     <div class="ant-notification-notice-message"
-                         *ngIf="(thisService['serviceDomain'] == 'CCVPN' || thisService['serviceDomain'] == 'SOTN') && thisService.status == 'Successful'">
+                        *ngIf="(thisService['serviceDomain'] == 'CCVPN' || thisService['serviceDomain'] == 'SOTN') && thisService.status == 'Successful'">
                         {{ thisService['serviceDomain'] }} &nbsp; {{"i18nTextDefine_InstanceTeminatedSuccessfully" |
                         translate}}
                     </div>
                     <div class="ant-notification-notice-message"
-                         *ngIf="(thisService['serviceDomain'] == 'E2E Service') && thisService.status == 'Successful'">
+                        *ngIf="(thisService['serviceDomain'] == 'E2E Service') && thisService.status == 'Successful'">
                         E2E &nbsp; {{"i18nTextDefine_InstanceTeminatedSuccessfully" | translate}}
                     </div>
                     <div class="ant-notification-notice-message"
-                         *ngIf="(thisService['serviceDomain'] == 'Network Service') && thisService.status == 'Successful'">
+                        *ngIf="(thisService['serviceDomain'] == 'Network Service') && thisService.status == 'Successful'">
                         NS &nbsp; {{"i18nTextDefine_InstanceTeminatedSuccessfully" | translate}}
                     </div>
                     <div class="ant-notification-notice-message"
-                         *ngIf="(thisService['serviceDomain'] == 'CCVPN' || thisService['serviceDomain'] == 'SOTN') && thisService.status == 'Failed'">
+                        *ngIf="(thisService['serviceDomain'] == 'CCVPN' || thisService['serviceDomain'] == 'SOTN') && thisService.status == 'Failed'">
                         {{ thisService['serviceDomain'] }} &nbsp; {{"i18nTextDefine_InstanceTeminationFailed" |
                         translate}}
                     </div>
                     <div class="ant-notification-notice-message"
-                         *ngIf="(thisService['serviceDomain'] == 'E2E Service') && thisService.status == 'Failed'">E2E
+                        *ngIf="(thisService['serviceDomain'] == 'E2E Service') && thisService.status == 'Failed'">E2E
                         &nbsp; {{"i18nTextDefine_InstanceTeminationFailed" | translate}}
                     </div>
                     <div class="ant-notification-notice-message"
-                         *ngIf="(thisService['serviceDomain'] == 'Network Service') && thisService.status == 'Failed'">
+                        *ngIf="(thisService['serviceDomain'] == 'Network Service') && thisService.status == 'Failed'">
                         NS &nbsp; {{"i18nTextDefine_InstanceTeminationFailed" | translate}}
                     </div>
                     <div class="ant-notification-notice-description">
@@ -615,7 +596,7 @@
                             <p> {{"i18nTextDefine_InstanceName" | translate}} :</p>
                             <span>{{ thisService["service-instance-name"] ||
                                     thisService["nsInstanceName"] }}
-                                </span>
+                            </span>
                         </div>
                         <div class="notificationlist">
                             <p> {{"i18nTextDefine_Customer" | translate}} :</p>
@@ -633,12 +614,12 @@
         <ng-template #templateScaleSuccessFaild>
             <div class="ant-notification-notice-content">
                 <div class="ant-notification-notice-with-icon">
-                        <span class="ant-notification-notice-icon">
-                            <img src="assets/images/execute-success.png" alt="instance temination is starting"
-                                 *ngIf="thisService.status == 'Successful'">
-                            <img src="assets/images/execute-faild.png" alt="instance temination is starting"
-                                 *ngIf="thisService.status == 'Failed'">
-                        </span>
+                    <span class="ant-notification-notice-icon">
+                        <img src="assets/images/execute-success.png" alt="instance temination is starting"
+                            *ngIf="thisService.status == 'Successful'">
+                        <img src="assets/images/execute-faild.png" alt="instance temination is starting"
+                            *ngIf="thisService.status == 'Failed'">
+                    </span>
                     <div class="ant-notification-notice-message" *ngIf="thisService.status == 'Successful'">E2E &nbsp;
                         {{"i18nTextDefine_InstanceScaledSuccessfully" | translate}}
                     </div>
@@ -650,7 +631,7 @@
                             <p> {{"i18nTextDefine_InstanceName" | translate}} :</p>
                             <span>{{ thisService["service-instance-name"] ||
                                     thisService["nsInstanceName"] }}
-                                </span>
+                            </span>
                         </div>
                         <div class="notificationlist">
                             <p> {{"i18nTextDefine_Customer" | translate}} :</p>
@@ -668,12 +649,12 @@
         <ng-template #templatehealSuccessFaild>
             <div class="ant-notification-notice-content">
                 <div class="ant-notification-notice-with-icon">
-                          <span class="ant-notification-notice-icon">
-                            <img src="assets/images/execute-success.png" alt="instance temination is starting"
-                                 *ngIf="thisService.status == 'Successful'">
-                            <img src="assets/images/execute-faild.png" alt="instance temination is starting"
-                                 *ngIf="thisService.status == 'Failed'">
-                        </span>
+                    <span class="ant-notification-notice-icon">
+                        <img src="assets/images/execute-success.png" alt="instance temination is starting"
+                            *ngIf="thisService.status == 'Successful'">
+                        <img src="assets/images/execute-faild.png" alt="instance temination is starting"
+                            *ngIf="thisService.status == 'Failed'">
+                    </span>
                     <div class="ant-notification-notice-message" *ngIf="thisService.status == 'Successful'">NS &nbsp;
                         {{"i18nTextDefine_InstanceHealedSuccessfully" | translate}}
                     </div>
@@ -685,7 +666,7 @@
                             <p> {{"i18nTextDefine_InstanceName" | translate}} :</p>
                             <span>{{ thisService["service-instance-name"] ||
                                     thisService["nsInstanceName"] }}
-                                </span>
+                            </span>
                         </div>
                         <div class="notificationlist">
                             <p> {{"i18nTextDefine_Customer" | translate}} :</p>
@@ -704,11 +685,11 @@
             <div class="ant-notification-notice-content">
                 <div class="ant-notification-notice-with-icon">
                     <span class="ant-notification-notice-icon">
-                            <img src="assets/images/execute-success.png" alt="instance temination is starting"
-                                 *ngIf="thisService.status == 'Successful'">
-                            <img src="assets/images/execute-faild.png" alt="instance temination is starting"
-                                 *ngIf="thisService.status == 'Failed'">
-                        </span>
+                        <img src="assets/images/execute-success.png" alt="instance temination is starting"
+                            *ngIf="thisService.status == 'Successful'">
+                        <img src="assets/images/execute-faild.png" alt="instance temination is starting"
+                            *ngIf="thisService.status == 'Failed'">
+                    </span>
                     <div class="ant-notification-notice-message" *ngIf="thisService.status == 'Successful'">CCVPN &nbsp;
                         {{"i18nTextDefine_InstanceUpdatedSuccessfully" | translate}}
                     </div>
@@ -720,7 +701,7 @@
                             <p> {{"i18nTextDefine_InstanceName" | translate}} :</p>
                             <span>{{ thisService["service-instance-name"] ||
                                     thisService["nsInstanceName"] }}
-                                </span>
+                            </span>
                         </div>
                         <div class="notificationlist">
                             <p> {{"i18nTextDefine_Customer" | translate}} :</p>
@@ -737,33 +718,28 @@
         </ng-template>
     </div>
     <div class="detailComponent" *ngIf="detailshow">
-        <app-ccvpn-detail [detailParams]="detailData"
-                          [upDateShow]="upDateShow"
-                          (closeUpdate)="closeCCVPNUpdate($event,templateUpdateSuccessFaild)"
-                          (closeDetail)="detailshow = false;listDisplay = false;"></app-ccvpn-detail>
+        <app-ccvpn-detail [detailParams]="detailData" [upDateShow]="upDateShow"
+            (closeUpdate)="closeCCVPNUpdate($event,templateUpdateSuccessFaild)"
+            (closeDetail)="detailshow = false;listDisplay = false;"></app-ccvpn-detail>
     </div>
     <div class="detailComponent" *ngIf="detailshow2">
-        <app-e2e-detail [detailParams]="detailData"
-                        (closeDetail)="detailshow2 = false;listDisplay = false;"></app-e2e-detail>
+        <app-e2e-detail [detailParams]="detailData" (closeDetail)="detailshow2 = false;listDisplay = false;">
+        </app-e2e-detail>
     </div>
     <div class="createComponent" *ngIf="createshow">
-        <app-ccvpn-creation
-                [createParams]="createData"
-                [ccvpn_temParametersContent]="ccvpn_temParametersContent"
-                (closeCreate)="closeCreate($event,templateCreatestarting,templateCreateSuccessFaild)">
+        <app-ccvpn-creation [createParams]="createData" [ccvpn_temParametersContent]="ccvpn_temParametersContent"
+            (closeCreate)="closeCreate($event,templateCreatestarting,templateCreateSuccessFaild)">
         </app-ccvpn-creation>
     </div>
     <div class="createComponent" *ngIf="createshow2">
-        <app-e2e-creation
-                [createParams]="createData"
-                [e2e_ns_temParametersContent]="e2e_ns_temParametersContent"
-                (nsCloseCreate)="nsCloseCreate($event,templateCreatestarting,templateCreateSuccessFaild)"
-                (e2eCloseCreate)="e2eCloseCreate($event,templateCreatestarting,templateCreateSuccessFaild)">
+        <app-e2e-creation [createParams]="createData" [e2e_ns_temParametersContent]="e2e_ns_temParametersContent"
+            (nsCloseCreate)="nsCloseCreate($event,templateCreatestarting,templateCreateSuccessFaild)"
+            (e2eCloseCreate)="e2eCloseCreate($event,templateCreatestarting,templateCreateSuccessFaild)">
         </app-e2e-creation>
     </div>
     <!--</div>-->
 </nz-layout>
 <div class="loading" *ngIf="loadingAnimateShow">
-    <img src="./assets/images/loading-animate2.gif" alt="loading">
+    <img src="assets/images/loading-animate2.gif" alt="loading">
     <p>Please wating……</p>
-</div>
+</div>
\ No newline at end of file
diff --git a/usecaseui-portal/src/app/services/services-list/services-list.component.less b/usecaseui-portal/src/app/views/services/services-list/services-list.component.less
index 2a19e5bb..392d1b3a 100644
--- a/usecaseui-portal/src/app/services/services-list/services-list.component.less
+++ b/usecaseui-portal/src/app/views/services/services-list/services-list.component.less
@@ -13,52 +13,6 @@
     See the License for the specific language governing permissions and
     limitations under the License.
 */
-@media screen and (min-width: 1050px){
-    .action{
-        span:nth-of-type(2){
-            margin-left: 40px;
-        }
-    }
-    
-}
-@media screen and (max-width: 1050px){
-    .action{
-        span:nth-of-type(2){
-            margin-left: 20px;
-        }
-    }
-    
-}
-@media screen and (max-width: 1300px){
-    .top-list-text{
-        p{
-            width: 200px;
-        }
-    }
-}
-@media screen and (min-width: 1200px){
-    .round{
-        top:45%;
-        left: 50px;
-        margin-top: -40px;
-    }
-    
-}
-
-@media screen and (max-width: 1200px){
-    .round{
-        top:12%;
-        left: 12%;
-    }
-    .top-list-text{
-        p{
-            width: 170px;
-        }
-    }
-    
-}
-
-
 .title {
     font: 700 18px/18px "��黑体";
     color: #4c5e70;
@@ -73,18 +27,6 @@ hr {
 .ant-tabs-bar{
     margin-bottom: 0!important;
 }
-.ant-dropdown-menu{
-    min-height:40px;
-    max-height: 200px;
-    overflow: auto;
-}
-.ant-dropdown-menu-item{
-    a{
-        max-width: 165px;
-        overflow: hidden;
-        text-overflow: ellipsis;
-    }
-}
 .mask{
     width: 100%;
     height: 100%;
@@ -135,20 +77,15 @@ hr {
         font: 700 14px "Arial";
         color: #3C4F8C;
         margin-right: 5px;
-        .icon{
-            margin-right: 10px;
-        }
     }
     nz-dropdown {
-        width: 20%;
         vertical-align: middle;
         background-color:#ffffff;
         :hover{
             border-color: #48C6EF;
         }
         button {
-            width: 100%;
-            max-width:165px;
+            width: 165px;
             height: 42px;
             background-color:#ffffff;
             text-align: left;
@@ -174,15 +111,11 @@ hr {
         position: absolute;
         right: 3%;
         top:50%;
+        width:116px;
         height:42px;
         background:#0DA9E2;
         border-radius:6px;
         margin-top: -15px;
-        i{
-            transform: scale(1.5);
-            line-height: 15px;
-            margin-right: 5px;
-        }
         span {
             color: #fff;
             font-weight: 400;
@@ -200,76 +133,90 @@ hr {
     }
 
 }
-nz-layout{
-    padding: 20px 32px;
-    .top-num{
-
-        width: 100%;
-        display: flex;
-        justify-content: space-around;
-        .top-list{
-            position: relative;
-            width:32%;
-            max-width:400px;
-            height:170px;
-            background:url("../../../assets/images/servicelist-e2e.png") no-repeat;
-            background-size: 100% 100%;
-            border-radius:2px;
-            .round{
-                position: absolute;
-                width: 60px;
-                height: 60px;
-                line-height: 60px;
-                text-align: center;               
-                background:#E0EDFF;
-                border:2px solid rgba(224,237,255,1);
-                border-radius: 50%;
-                font-size:16px;
-                font-family:ArialMT;
-                color:#3C4F8C;
-                transition: .5s;    
-            }
-            .top-list-text{
-                position: absolute;
+.top-num{
+    overflow: auto;
+    width: 100%;
+}
+.top-list{
+    position: relative;
+    width:29%;
+    height:170px;
+    margin: 10px 1%;
+    float: left;
+    background:url("../../../../assets/images/servicelist-e2e.png") no-repeat;
+    background-size: 100% 100%;
+    border-radius:2px;
+}
+.top-num .top-list:nth-child(2){
+    background:url("../../../../assets/images/servicelist-e2e.png") no-repeat;
+    background-size: 100% 100%;
+}
+.top-num .top-list:nth-child(3){
+    background:url("../../../../assets/images/servicelist-e2e.png") no-repeat;
+    background-size: 100% 100%;
+}
+.top-num .top-list:nth-child(4){
+    background:url("../../../../assets/images/servicelist-sotn.png") no-repeat;
+    background-size: 100% 100%;
+}
+.top-list .round{
+    position: absolute;
+    width: 60px;
+    height: 60px;
+    line-height: 60px;
+  text-align: center;
+    top:45%;
+    left: 50px;
+    margin-top: -30px;
+    background:#E0EDFF;
+    border:2px solid rgba(224,237,255,1);
+    border-radius: 50%;
+    font-size:16px;
+    font-family:ArialMT;
+    color:#3C4F8C;
+}
+.top-list {
+    .top-list-text {
+        position: absolute;
+        text-align: right;
+        height: 40px;
+        line-height: 20px;
+        right: 50px;
+        color: #fff;
+        p {
+            font-size: 14px;
+            width: 250px;
+            margin: 15px 0 0 0;
+            height: 13px;
+            clear: both;
+            span {
+                display: inline-block;
+                font-weight: 500;
                 text-align: right;
-                line-height: 20px;
-                right: 12%;
-                color: #fff;
-                p{
-                    height: 28px;
-                    margin-bottom: 0;
-                    padding-left: 5px;
-                    font-size: 14px;
-                    clear: both;
-                    span{
-                        display: inline-block;
-                        float: right;
-                        font-weight: 500;
-                        text-align: right;
-                    }
-                    span:nth-child(1){
-                        font-size: 18px;
-                        margin-left: 15px;
-                    }
-                    span:nth-child(2){
-                        width: 85px;
-                        font-size: 16px;
-                    }
-                }
-                p:nth-child(1){
-                    margin-top: 25px;
-                }
-                .service-description{
-                    
-                    white-space: nowrap;
-                    overflow: hidden;
-                    text-overflow: ellipsis;
-                    color: #3C4F8C;
-
-                }
+                float: right;
+            }
+            span:nth-child(1) {
+                font-size: 18px;
+                width: 40px;
+                min-width: 40px;
+            }
+            span:nth-child(2) {
+                width: 85px;
+                font-size: 16px;
             }
         }
-        
+        p:nth-child(1) {
+            margin-top: 25px;
+        }
+    }
+    .service-description{
+        font-size: 14px;
+        width: 250px;
+        height: 13px;
+        position: absolute;
+        bottom: 30px;
+        left: 50px;
+        color: #3C4F8C;
     }
 }
 .list {
@@ -343,10 +290,10 @@ nz-layout{
                         .anticon{
                             width: 18px;
                             height: 18px;
-                            background: url("../../../assets/images/scale.png") no-repeat;
+                            background: url("../../../../assets/images/scale.png") no-repeat;
                         }
                         .anticon.anticon-update{
-                            background: url("../../../assets/images/update.png") no-repeat;
+                            background: url("../../../../assets/images/update.png") no-repeat;
                         }
                         span{
                             margin-left: 5px;
@@ -355,10 +302,10 @@ nz-layout{
                     li:hover{
                         color: #0DA9E2;
                         .anticon{
-                            background: url("../../../assets/images/scale-active.png") no-repeat;
+                            background: url("../../../../assets/images/scale-active.png") no-repeat;
                         }
                         .anticon.anticon-update{
-                            background: url("../../../assets/images/update-active.png") no-repeat;
+                            background: url("../../../../assets/images/update-active.png") no-repeat;
                         }
                     }
                 }
diff --git a/usecaseui-portal/src/app/services/services-list/services-list.component.spec.ts b/usecaseui-portal/src/app/views/services/services-list/services-list.component.spec.ts
index 61440dc3..61440dc3 100644
--- a/usecaseui-portal/src/app/services/services-list/services-list.component.spec.ts
+++ b/usecaseui-portal/src/app/views/services/services-list/services-list.component.spec.ts
diff --git a/usecaseui-portal/src/app/services/services-list/services-list.component.ts b/usecaseui-portal/src/app/views/services/services-list/services-list.component.ts
index 3a07c1fe..c15e9f11 100644
--- a/usecaseui-portal/src/app/services/services-list/services-list.component.ts
+++ b/usecaseui-portal/src/app/views/services/services-list/services-list.component.ts
@@ -14,11 +14,10 @@
     limitations under the License.
 */
 import { Component, OnInit, HostBinding, TemplateRef } from '@angular/core';
-import { MyhttpService } from '../../myhttp.service';
-import { slideToRight } from '../../animates';
+import { MyhttpService } from '../../../core/services/myhttp.service';
+import { slideToRight } from '../../../animates';
 import { NzModalService } from 'ng-zorro-antd';
 import { NzNotificationService } from 'ng-zorro-antd';
-import { Observable } from 'rxjs/Rx';
 
 @Component({
     selector: 'app-services-list',
@@ -29,16 +28,11 @@ import { Observable } from 'rxjs/Rx';
 export class ServicesListComponent implements OnInit {
     @HostBinding('@routerAnimate') routerAnimateState;
 
-    public width:number = document.documentElement.clientWidth;
-
     constructor(private myhttp: MyhttpService, private modalService: NzModalService, private notification: NzNotificationService) {
     }
 
     ngOnInit() {
         this.getallCustomers();
-        Observable.fromEvent(window, 'resize').subscribe((event) => {
-            this.width = document.documentElement.clientWidth
-        });
     }
 
     // customer servicetype
@@ -1279,6 +1273,19 @@ export class ServicesListComponent implements OnInit {
 
     queryProgress(obj, callback) {
         let mypromise = new Promise((res, rej) => {
+            // let data = {
+            //   operationStatus:{
+            //     "operationId": "XXXXXX",
+            //     "operation": "create|delete|update|scale",
+            //     "result": "finished|error|processing",
+            //     "reason": "",
+            //     "userId": "",
+            //     "operationContent": "Be creating pop.",
+            //     "progress": 0,
+            //     "operateAt": "",
+            //     "finishedAt": ""
+            //   }
+            // }
             let errorNums = 180;
             let requery = () => {
                 this.myhttp.getProgress(obj)
@@ -1312,6 +1319,17 @@ export class ServicesListComponent implements OnInit {
                             res(data.operationStatus);
                         }
                     })
+                // setTimeout(()=>{
+                //   console.log(data.operationStatus.progress)
+                //   data.operationStatus.progress++;
+                //   if(data.operationStatus.progress<100){
+                //     callback(data.operationStatus);
+                //     requery()
+                //   }else{
+                //     callback(data.operationStatus);
+                //     res(data.operationStatus)
+                //   }
+                // },100)
             }
             requery();
         })
@@ -1320,7 +1338,25 @@ export class ServicesListComponent implements OnInit {
 
     queryNsProgress(jobid, id, callback, operationType) {
         let mypromise = new Promise((res, rej) => {
-           
+            // let data = {
+            //   "jobId": "string",
+            //   "responseDescriptor": {
+            //     "status": "string",
+            //     "progress": 0,
+            //     "statusDescription": "string",
+            //     "errorCode": "string",
+            //     "responseId": "string",
+            //     "responseHistoryList": [
+            //       {
+            //         "status": "string",
+            //         "progress": "string",
+            //         "statusDescription": "string",
+            //         "errorCode": "string",
+            //         "responseId": "string"
+            //       }
+            //     ]
+            //   }
+            // }
             let errorNums = 180;
             let requery = () => {
                 this.myhttp.getNsProgress(jobid, id, operationType)
@@ -1330,6 +1366,7 @@ export class ServicesListComponent implements OnInit {
                             return false;
                         }
                         if (data.responseDescriptor == null || data.responseDescriptor.progress == undefined) {
+                            // console.log(data);
                             errorNums--;
                             if (errorNums == 0) {
                                 callback({ progress: 255, status: "time over" });
@@ -1353,7 +1390,17 @@ export class ServicesListComponent implements OnInit {
                             res(data);
                         }
                     })
-              
+                // setTimeout(()=>{
+                //   console.log(data.responseDescriptor.progress)
+                //   data.responseDescriptor.progress++;
+                //   if(data.responseDescriptor.progress<100){
+                //     callback(data.responseDescriptor);
+                //     requery()
+                //   }else{
+                //     callback(data);
+                //     res(data)
+                //   }
+                // },100)
             };
             requery();
         });
diff --git a/usecaseui-portal/src/app/services/services.component.html b/usecaseui-portal/src/app/views/services/services.component.html
index 10142833..10142833 100644
--- a/usecaseui-portal/src/app/services/services.component.html
+++ b/usecaseui-portal/src/app/views/services/services.component.html
diff --git a/usecaseui-portal/src/app/views/services/services.component.less b/usecaseui-portal/src/app/views/services/services.component.less
new file mode 100644
index 00000000..e69de29b
--- /dev/null
+++ b/usecaseui-portal/src/app/views/services/services.component.less
diff --git a/usecaseui-portal/src/app/services/services.component.spec.ts b/usecaseui-portal/src/app/views/services/services.component.spec.ts
index 2e76b9f9..2e76b9f9 100644
--- a/usecaseui-portal/src/app/services/services.component.spec.ts
+++ b/usecaseui-portal/src/app/views/services/services.component.spec.ts
diff --git a/usecaseui-portal/src/app/services/services.component.ts b/usecaseui-portal/src/app/views/services/services.component.ts
index eec235b4..eec235b4 100644
--- a/usecaseui-portal/src/app/services/services.component.ts
+++ b/usecaseui-portal/src/app/views/services/services.component.ts
diff --git a/usecaseui-portal/src/assets/json/allotted-resources.json b/usecaseui-portal/src/assets/json/allotted-resources.json
deleted file mode 100644
index 0b39894c..00000000
--- a/usecaseui-portal/src/assets/json/allotted-resources.json
+++ /dev/null
@@ -1,122 +0,0 @@
-{
-    "allotted-resource": [
-        {
-            "id": "1114feec-1aef-4890-abba-f8f3a906935f",
-            "description": "1114feec-1aef-4890-abba-f8f3a906935f",
-            "selflink": "",
-            "model-invariant-id": "f714feec-1aef-4890-abba-f8f3a906935f",
-            "model-version-id": "709919b7-75fd-4e49-8398-67853323ff55",
-            "resource-version": "1535708424249",
-            "orchestration-status": "",
-            "operational-status": "",
-            "type": "",
-            "role": "spoke",
-            "allotted-resource-name": "sdwan ar",
-            "access-provider-id": "",
-            "access-client-id": "",
-            "access-topology-id": "",
-            "access-node-id": "",
-            "access-ltp-id": "",
-            "cvlan": "",
-            "vpn-name": "SDWANVPNInfra",
-            "relationship-list": {
-                "relationship": [
-                    {
-                        "related-to": "service-instance",
-                        "relationship-label": "org.onap.relationships.inventory.Uses",
-                        "related-link": "/aai/v13/business/customers/customer/Democcy/service-subscriptions/service-subscription/CCVPN/service-instances/service-instance/35e88f8e-473f-4d88-92f8-6739a42baa23",
-                        "relationship-data": [
-                            {
-                                "relationship-key": "customer.global-customer-id",
-                                "relationship-value": "Democcy"
-                            },
-                            {
-                                "relationship-key": "service-subscription.service-type",
-                                "relationship-value": "CCVPN"
-                            },
-                            {
-                                "relationship-key": "service-instance.service-instance-id",
-                                "relationship-value": "35e88f8e-473f-4d88-92f8-6739a42baa23"
-                            }
-                        ],
-                        "related-to-property": [
-                            {
-                                "property-key": "service-instance.service-instance-name",
-                                "property-value": "SDWANVPNInfra1"
-                            }
-                        ]
-                    }
-                ]
-            }
-        },
-        {
-            "id": "aa14feec-1aef-4890-abba-f8f3a906935f",
-            "description": "aa14feec-1aef-4890-abba-f8f3a906935f",
-            "selflink": "",
-            "model-invariant-id": "97c4a3c6-2943-41af-8717-2f3183f944be",
-            "model-version-id": "44b777ee-9793-465d-8053-d8e86d2e2362",
-            "resource-version": "1536135116833",
-            "orchestration-status": "",
-            "operational-status": "",
-            "type": "",
-            "role": "",
-            "allotted-resource-name": "ston ar",
-            "access-provider-id": "1000",
-            "access-client-id": "3333",
-            "access-topology-id": "100",
-            "access-node-id": "10.10.10.10",
-            "access-ltp-id": "1",
-            "cvlan": "",
-            "vpn-name": "SOTNVPNInfra",
-            "relationship-list": {
-                "relationship": [
-                    {
-                        "related-to": "service-instance",
-                        "relationship-label": "org.onap.relationships.inventory.Uses",
-                        "related-link": "/aai/v13/business/customers/customer/Democcy/service-subscriptions/service-subscription/CCVPN/service-instances/service-instance/32cd906f-ee7a-4ecf-b1c3-2fce4d59f8c0",
-                        "relationship-data": [
-                            {
-                                "relationship-key": "customer.global-customer-id",
-                                "relationship-value": "Democcy"
-                            },
-                            {
-                                "relationship-key": "service-subscription.service-type",
-                                "relationship-value": "CCVPN"
-                            },
-                            {
-                                "relationship-key": "service-instance.service-instance-id",
-                                "relationship-value": "32cd906f-ee7a-4ecf-b1c3-2fce4d59f8c0"
-                            }
-                        ],
-                        "related-to-property": [
-                            {
-                                "property-key": "service-instance.service-instance-name",
-                                "property-value": "SOTNVPNInfra"
-                            }
-                        ]
-                    },
-                    {
-                        "related-to": "p-interface",
-                        "relationship-label": "org.onap.relationships.inventory.Uses",
-                        "related-link": "/aai/v13/network/pnfs/pnf/pnf1000/p-interfaces/p-interface/nodeId-79.79.79.79-ltpId-2",
-                        "relationship-data": [
-                            {
-                                "relationship-key": "pnf.pnf-name",
-                                "relationship-value": "pnf1000"
-                            },
-                            {
-                                "relationship-key": "p-interface.interface-name",
-                                "relationship-value": "nodeId-79.79.79.79-ltpId-2"
-                            }
-                        ],
-                        "related-to-property": [
-                            {
-                                "property-key": "p-interface.prov-status"
-                            }
-                        ]
-                    }
-                ]
-            }
-        }
-    ]
-}
\ No newline at end of file
diff --git a/usecaseui-portal/src/assets/json/configuration_files/inputNamesTranslate.json b/usecaseui-portal/src/assets/json/configuration_files/inputNamesTranslate.json
deleted file mode 100644
index 9a91307f..00000000
--- a/usecaseui-portal/src/assets/json/configuration_files/inputNamesTranslate.json
+++ /dev/null
@@ -1,63 +0,0 @@
-{
-    "sotnNameTranslate":{
-        "name":"sotnconnectivity_name",
-        "description":"sotnconnectivity_description",
-        "startTime":"sotnconnectivity_startTime",
-        "endTime":"sotnconnectivity_endTime",
-        "COS":"sotnconnectivity_COS",
-        "reroute":"sotnconnectivity_reroute",
-        "SLS":"sotnconnectivity_SLS",
-        "dualLink":"sotnconnectivity_dualLink",
-        "CIR":"sotnconnectivity_cir",
-        "EIR":"sotnconnectivity_eir",
-        "CBS":"sotnconnectivity_cbs",
-        "EBS":"sotnconnectivity_ebs",
-        "colorAware":"sotnconnectivity_colorAware",
-        "couplingFlag":"sotnconnectivity_couplingFlag"
-    },
-    "siteNameTranslate":{
-        "baseNames":{
-            "name":"site_name",
-            "description":"site_description",
-            "type":"site_type",
-            "role":"site_role",
-            "postcode":"site_postcode",
-            "address":"site_address",
-            "vlan":"sotncondition_cVLAN",
-            "sotnVpnName":"sotncondition_sotnVpnName", 
-            "controlPoint":"site_controlPoint", 
-            "groupRole":"sdwancondition_role", 
-            "groupName":"sdwancondition_sdwanVpnName",
-            "emails":"site_emails",
-            "latitude":"site_latitude",
-            "longitude":"site_longitude",
-            "clientSignal":"sotncondition_clientSignal"
-        },
-        "cpeNames":{
-            "device_name":"device_name",
-            "device_version":"device_version",
-            "device_esn":"device_esn",
-            "device_class":"device_class",
-            "device_systemIp":"device_systemIp",
-            "device_vendor":"device_vendor",
-            "device_type":"device_type"
-        },
-        "wanportNames":{
-            "sitewanport_name":"sitewanport_name",
-            "sitewanport_deviceName":"sitewanport_deviceName",
-            "sitewanport_description":"sitewanport_description",
-            "sitewanport_portType":"sitewanport_portType",
-            "sitewanport_portNumber":"sitewanport_portNumber",
-            "sitewanport_ipAddress":"sitewanport_ipAddress",
-            "sitewanport_providerIpAddress":"sitewanport_providerIpAddress",
-            "sitewanport_transportNetworkName":"sitewanport_transportNetworkName",
-            "sitewanport_inputBandwidth":"sitewanport_inputBandwidth",
-            "sitewanport_outputBandwidth":"sitewanport_outputBandwidth"
-        }
-    },
-    "siteGroupNameTranslate":{
-        "name":"sdwanconnectivity_name",
-        "topology":"sdwanconnectivity_topology"
-    }
-
-}
\ No newline at end of file
diff --git a/usecaseui-portal/src/assets/json/configuration_files/servicesCategory.json b/usecaseui-portal/src/assets/json/configuration_files/servicesCategory.json
deleted file mode 100644
index 574a8bb4..00000000
--- a/usecaseui-portal/src/assets/json/configuration_files/servicesCategory.json
+++ /dev/null
@@ -1,34 +0,0 @@
-
-{
-    "SOTN":{
-        "sotnvpn":[
-            {"model-invariant-id": "21886a96-0664-47a3-beae-766952f2059f","model-version-id": "4ca96a53-2e18-4297-8dc7-5776fdf6871b"}
-        ],
-        "site":[
-            {"model-invariant-id": "342ff5e8-5592-4455-a537-a81172c9d541","model-version-id": "ea8bb4d2-00ea-4aeb-ad76-20ac8cb1c99c"},
-            {"model-invariant-id": "a7029145-4294-4664-b619-00dc959a1ff6","model-version-id": "cb756ffb-8d91-49fb-86f7-12ceb2b13158"}
-        ]
-    },
-    "CCVPN":{
-        "sotnvpn":[
-            {"model-invariant-id": "21886a96-0664-47a3-beae-766952f2059f","model-version-id": "54836196-c411-4690-af98-900c1c3aadd7"},
-            {"model-invariant-id": "21886a96-0664-47a3-beae-766952f2059f","model-version-id": "4ca96a53-2e18-4297-8dc7-5776fdf6871b"},
-            {"model-invariant-id": "35661c6e-4a15-4990-8d8a-d247ddcf0110","model-version-id": "f38e13a7-6ba6-4f06-901d-02206faa2687"},
-            {"model-invariant-id": "bafa365f-4056-4ad3-a039-d6b3e3e0fd35","model-version-id": "fdbb8ddd-3325-4840-a156-9ad601b9366c"}
-        ],
-        "site":[
-            {"model-invariant-id": "5c13f3fb-2744-4635-9f1f-c59c92dc8f70","model-version-id": "3a76b1f5-fb0d-4b6b-82d5-0e8a4ebc3838"},
-            {"model-invariant-id": "5c13f3fb-2744-4635-9f1f-c59c92dc8f70","model-version-id": "4b4b3ef8-6747-4111-b9e0-81cf251c0068"},
-            {"model-invariant-id": "a7029145-4294-4664-b619-00dc959a1ff6","model-version-id": "cb756ffb-8d91-49fb-86f7-12ceb2b13158"},
-            {"model-invariant-id": "313abb16-d454-4a64-a39d-2ed4bb7713a3","model-version-id": "95f9c7aa-8a0e-4568-86f7-ab980a4556a1"},
-            {"model-invariant-id": "499e5e60-c8b2-4ea6-8c4e-7739420673a9","model-version-id": "8ec97da1-1e0a-4198-9c9a-3da2c60d7974"}
-        ],
-        "sdwan":[
-            {"model-invariant-id": "88dcb2f0-085b-4548-8b93-0882e37d25d8","model-version-id": "462f84e5-f0e5-44c5-ab95-38fb4bf77064"},
-            {"model-invariant-id": "88dcb2f0-085b-4548-8b93-0882e37d25d8","model-version-id": "d0a4af63-570c-40b3-a26f-ef11366f0a03"},
-            {"model-invariant-id": "2cefdc20-a29d-4792-a151-3653a6a20d45","model-version-id": "a306b8d6-3873-46fe-921a-623e279d5548"},
-            {"model-invariant-id": "e2b217d6-7cac-4156-9f44-f9b010b350a6","model-version-id": "20d9e7dc-f030-4230-af79-ba0bde7cbe2e"}
-        ]
-    }
-}
-
diff --git a/usecaseui-portal/src/assets/json/configuration_files/templateCategory.json b/usecaseui-portal/src/assets/json/configuration_files/templateCategory.json
deleted file mode 100644
index dca42795..00000000
--- a/usecaseui-portal/src/assets/json/configuration_files/templateCategory.json
+++ /dev/null
@@ -1,6 +0,0 @@
-{
-    "sotnvpntypes":["uuidxxx","uuidxxxx"],
-    "sitetypes":["uuidaaa","uuidaaaa"],
-    "sdwantypes":["uuidbbb","uuidbbbb"]
-}
-
diff --git a/usecaseui-portal/src/assets/json/instanceTableData4.json b/usecaseui-portal/src/assets/json/instanceTableData4.json
deleted file mode 100644
index ad8767e0..00000000
--- a/usecaseui-portal/src/assets/json/instanceTableData4.json
+++ /dev/null
@@ -1 +0,0 @@
-{"service-instance":[{"service-instance-id":"8e07f832-3f50-4657-9b44-010049e8b488","service-instance-name":"SOTNVPNInfra","service-type":"E2E Service","service-role":"E2E Service","model-invariant-id":"bafa365f-4056-4ad3-a039-d6b3e3e0fd35","model-version-id":"fdbb8ddd-3325-4840-a156-9ad601b9366c","resource-version":"1537769390960","input-parameters":"{\n    \"service\":{\n        \"name\":\"SOTNVPNInfra\",\n        \"description\":\"SOTNVPNInfra\",\n        \"serviceInvariantUuid\":\"bafa365f-4056-4ad3-a039-d6b3e3e0fd35\",\n        \"serviceUuid\":\"fdbb8ddd-3325-4840-a156-9ad601b9366c\",\n        \"globalSubscriberId\":\"demo\",\n        \"serviceType\":\"ccvpn\",\n        \"parameters\":{\n            \"locationConstraints\":[\n\n            ],\n            \"resources\":[\n                {\n                    \"resourceName\":\"SOTNConnectivity 0\",\n                    \"resourceInvariantUuid\":\"1b9c677d-fddf-4b70-938b-925a7fa57d43\",\n                    \"resourceUuid\":\"218df3c3-50dd-4c26-9e36-4771387bb771\",\n                    \"resourceCustomizationUuid\":\"b44071c8-04fd-4d6b-b6af-772cbfaa1129\",\n                    \"parameters\":{\n                        \"locationConstraints\":[\n\n                        ],\n                        \"resources\":[\n\n                        ],\n                        \"requestInputs\":{\n\n                        }\n                    }\n                },\n                {\n                    \"resourceName\":\"SPPartnerVF 0\",\n                    \"resourceInvariantUuid\":\"072f9238-15b0-4bc5-a5f5-f18548739470\",\n                    \"resourceUuid\":\"81b9430b-8abe-45d6-8bf9-f41a8f5c735f\",\n                    \"resourceCustomizationUuid\":\"c3612284-6c67-4d8c-8b41-b699cc90e76d\",\n                    \"parameters\":{\n                        \"locationConstraints\":[\n\n                        ],\n                        \"resources\":[\n\n                        ],\n                        \"requestInputs\":{\n\n                        }\n                    }\n                }\n            ],\n            \"requestInputs\":{\n                \"sotnconnectivity0_eir\":\"1000\",\n                \"sotnconnectivity0_cir\":\"1000\",\n                \"sotnconnectivity0_endTime\":\"2018-8-8 10:00\",\n                \"sotnconnectivity0_ebs\":\"1000\",\n                \"sotnconnectivity0_startTime\":\"2018-8-1 10:00\",\n                \"sotnconnectivity0_dualLink\":\"true\",\n                \"sotnconnectivity0_reroute\":\"false\",\n                \"sotnconnectivity0_cbs\":\"1000\",\n                \"sotnconnectivity0_name\":\"SOTN L2\",\n                \"sotnconnectivity0_SLS\":\"\",\n                \"sotnconnectivity0_description\":\"\",\n                \"sotnconnectivity0_couplingFlag\":\"\",\n                \"sotnconnectivity0_colorAware\":\"\",\n                \"sotnconnectivity0_COS\":\"standard\"\n            }\n        }\n    }\n}","relationship-list":{"relationship":[{"related-to":"connectivity","relationship-label":"org.onap.relationships.inventory.PartOf","related-link":"/aai/v13/network/connectivities/connectivity/2e359c75-2af3-4fea-9550-a893edeab8b5","relationship-data":[{"relationship-key":"connectivity.connectivity-id","relationship-value":"2e359c75-2af3-4fea-9550-a893edeab8b5"}],"related-to-property":[{"property-key":"connectivity.etht-svc-name","property-value":"vpn1"}]},{"related-to":"sp-partner","relationship-label":"org.onap.relationships.inventory.PartOf","related-link":"/aai/v13/business/sp-partners/sp-partner/32cd906f-ee7a-4ecf-b1c3-2fce4d59f8c0","relationship-data":[{"relationship-key":"sp-partner.sp-partner-id","relationship-value":"32cd906f-ee7a-4ecf-b1c3-2fce4d59f8c0"}],"related-to-property":[{"property-key":"sp-partner.sp-partner-id","property-value":"32cd906f-ee7a-4ecf-b1c3-2fce4d59f8c0"}]},{"related-to":"allotted-resource","relationship-label":"org.onap.relationships.inventory.Uses","related-link":"/aai/v13/business/customers/customer/demo/service-subscriptions/service-subscription/ccvpn/service-instances/service-instance/2d55a540-f6d3-4108-9bb4-290574b87a6c/allotted-resources/allotted-resource/666085a7-132e-4a32-b9de-e58ecea3476a","relationship-data":[{"relationship-key":"customer.global-customer-id","relationship-value":"demo"},{"relationship-key":"service-subscription.service-type","relationship-value":"ccvpn"},{"relationship-key":"service-instance.service-instance-id","relationship-value":"2d55a540-f6d3-4108-9bb4-290574b87a6c"},{"relationship-key":"allotted-resource.id","relationship-value":"666085a7-132e-4a32-b9de-e58ecea3476a"}],"related-to-property":[{"property-key":"allotted-resource.description","property-value":"sotn-attachment"},{"property-key":"allotted-resource.allotted-resource-name","property-value":"sotn ar"}]},{"related-to":"allotted-resource","relationship-label":"org.onap.relationships.inventory.Uses","related-link":"/aai/v13/business/customers/customer/demo/service-subscriptions/service-subscription/ccvpn/service-instances/service-instance/a6d69c62-75b5-4f04-8cd7-9ca5dfcc4205/allotted-resources/allotted-resource/562adc96-7fbe-435e-bd6d-ff4b8a0a7920","relationship-data":[{"relationship-key":"customer.global-customer-id","relationship-value":"demo"},{"relationship-key":"service-subscription.service-type","relationship-value":"ccvpn"},{"relationship-key":"service-instance.service-instance-id","relationship-value":"a6d69c62-75b5-4f04-8cd7-9ca5dfcc4205"},{"relationship-key":"allotted-resource.id","relationship-value":"562adc96-7fbe-435e-bd6d-ff4b8a0a7920"}],"related-to-property":[{"property-key":"allotted-resource.description","property-value":"sotn-attachment"},{"property-key":"allotted-resource.allotted-resource-name","property-value":"sotn ar"}]}]}},{"service-instance-id":"a6d69c62-75b5-4f04-8cd7-9ca5dfcc4205","service-instance-name":"DcLondon","service-type":"E2E Service","service-role":"E2E Service","model-invariant-id":"499e5e60-c8b2-4ea6-8c4e-7739420673a9","model-version-id":"8ec97da1-1e0a-4198-9c9a-3da2c60d7974","resource-version":"1537866016457","input-parameters":"{\n    \"service\":{\n        \"name\":\"DcLondon\",\n        \"description\":\"SiteService\",\n        \"serviceInvariantUuid\":\"499e5e60-c8b2-4ea6-8c4e-7739420673a9\",\n        \"serviceUuid\":\"8ec97da1-1e0a-4198-9c9a-3da2c60d7974\",\n        \"globalSubscriberId\":\"demo\",\n        \"serviceType\":\"ccvpn\",\n        \"parameters\":{\n            \"locationConstraints\":[\n\n            ],\n            \"resources\":[\n                {\n                    \"resourceName\":\"SiteVF\",\n                    \"resourceInvariantUuid\":\"0c0e1cbe-6e01-4f9e-8c45-a9700ebc14df\",\n                    \"resourceUuid\":\"4ad2d390-5c51-45f5-9710-b467a4ec7a73\",\n                    \"resourceCustomizationUuid\":\"66590e07-0777-415c-af44-36347cf3ddd3\",\n                    \"parameters\":{\n                        \"locationConstraints\":[\n\n                        ],\n                        \"resources\":[\n\n                        ],\n                        \"requestInputs\":{\n\n                        }\n                    }\n                },\n                {\n                    \"resourceName\":\"mpls\",\n                    \"resourceInvariantUuid\":\"97a3e552-08c4-4697-aeeb-d8d3e09ce58e\",\n                    \"resourceUuid\":\"63d8e1af-32dc-4c71-891d-e3f7b6a976d2\",\n                    \"resourceCustomizationUuid\":\"205456e7-3dc0-40c4-8cb0-28e6c1877042\",\n                    \"parameters\":{\n                        \"locationConstraints\":[\n\n                        ],\n                        \"resources\":[\n\n                        ],\n                        \"requestInputs\":{\n\n                        }\n                    }\n                },\n                {\n                    \"resourceName\":\"deviceVF\",\n                    \"resourceInvariantUuid\":\"c726490a-0ce2-4bc7-abea-dade66bfb13d\",\n                    \"resourceUuid\":\"0e2de9d8-d76b-4134-b5f1-41e79056adbe\",\n                    \"resourceCustomizationUuid\":\"5bc1373e-9a36-4a00-8c62-784e0bc417ad\",\n                    \"parameters\":{\n                        \"locationConstraints\":[\n\n                        ],\n                        \"resources\":[\n\n                        ],\n                        \"requestInputs\":{\n\n                        }\n                    }\n                },\n                {\n                    \"resourceName\":\"sdwanvpnattachmentVF\",\n                    \"resourceInvariantUuid\":\"f714feec-1aef-4890-abba-f8f3a906935f\",\n                    \"resourceUuid\":\"709919b7-75fd-4e49-8398-67853323ff55\",\n                    \"resourceCustomizationUuid\":\"debd988f-fe04-4940-a5cb-37f61d84eab4\",\n                    \"parameters\":{\n                        \"locationConstraints\":[\n\n                        ],\n                        \"resources\":[\n\n                        ],\n                        \"requestInputs\":{\n\n                        }\n                    }\n                },\n                {\n                    \"resourceName\":\"internet\",\n                    \"resourceInvariantUuid\":\"97a3e552-08c4-4697-aeeb-d8d3e09ce58e\",\n                    \"resourceUuid\":\"63d8e1af-32dc-4c71-891d-e3f7b6a976d2\",\n                    \"resourceCustomizationUuid\":\"64b8e8ba-62b9-4db6-b420-1ca7067d63e0\",\n                    \"parameters\":{\n                        \"locationConstraints\":[\n\n                        ],\n                        \"resources\":[\n\n                        ],\n                        \"requestInputs\":{\n\n                        }\n                    }\n                },\n                {\n                    \"resourceName\":\"sotnvpnattachmentvF\",\n                    \"resourceInvariantUuid\":\"97c4a3c6-2943-41af-8717-2f3183f944be\",\n                    \"resourceUuid\":\"44b777ee-9793-465d-8053-d8e86d2e2362\",\n                    \"resourceCustomizationUuid\":\"37aeb073-c75d-4cf6-a7fa-a1af862ef58a\",\n                    \"parameters\":{\n                        \"locationConstraints\":[\n\n                        ],\n                        \"resources\":[\n\n                        ],\n                        \"requestInputs\":{\n\n                        }\n                    }\n                },\n                {\n                    \"resourceName\":\"SPPartnerVF\",\n                    \"resourceInvariantUuid\":\"072f9238-15b0-4bc5-a5f5-f18548739470\",\n                    \"resourceUuid\":\"81b9430b-8abe-45d6-8bf9-f41a8f5c735f\",\n                    \"resourceCustomizationUuid\":\"cd0b4b9c-66c6-49c5-b346-7580e4b6c394\",\n                    \"parameters\":{\n                        \"locationConstraints\":[\n\n                        ],\n                        \"resources\":[\n\n                        ],\n                        \"requestInputs\":{\n\n                        }\n                    }\n                }\n            ],\n            \"requestInputs\":{\n                \"devicevf_device_class\":\"PNF\",\n                \"devicevf_device_esn\":\"2102351BTJ10HB000075\",\n                \"devicevf_device_name\":\"50.47\",\n                \"devicevf_device_systemIp\":\"192.168.1.47\",\n                \"devicevf_device_type\":\"AR161EW\",\n                \"devicevf_device_vendor\":\"huawei\",\n                \"devicevf_device_version\":\"1.0\",\n                \"internet_sitewanport_description\":\"internet\",\n                \"internet_sitewanport_deviceName\":\"50.47\",\n                \"internet_sitewanport_inputBandwidth\":\"100\",\n                \"internet_sitewanport_ipAddress\":\"100.2.30.9\",\n                \"internet_sitewanport_name\":\"internet\",\n                \"internet_sitewanport_outputBandwidth\":\"100\",\n                \"internet_sitewanport_portNumber\":\"0/0/2\",\n                \"internet_sitewanport_portType\":\"GE\",\n                \"internet_sitewanport_providerIpAddress\":\"100.2.30.10\",\n                \"internet_sitewanport_transportNetworkName\":\"internet\",\n                \"mpls_sitewanport_description\":\"mpls\",\n                \"mpls_sitewanport_deviceName\":\"50.47\",\n                \"mpls_sitewanport_inputBandwidth\":\"100\",\n                \"mpls_sitewanport_ipAddress\":\"10.2.30.7\",\n                \"mpls_sitewanport_name\":\"mpls\",\n                \"mpls_sitewanport_outputBandwidth\":\"100\",\n                \"mpls_sitewanport_portNumber\":\"0/0/1\",\n                \"mpls_sitewanport_portType\":\"GE\",\n                \"mpls_sitewanport_providerIpAddress\":\"10.2.30.8\",\n                \"mpls_sitewanport_transportNetworkName\":\"internet\",\n                \"sdwanvpnattachmentvf_sdwancondition_role\":\"spoke\",\n                \"sdwanvpnattachmentvf_sdwancondition_sdwanVpnName\":\"SDWANVPNInfra\",\n                \"sitevf_site_address\":\"University College London,Gower Street,London\",\n                \"sitevf_site_controlPoint\":\"VDF_VCPE\",\n                \"sitevf_site_description\":\"VDF_vGW\",\n                \"sitevf_site_emails\":\"\",\n                \"sitevf_site_latitude\":\"\",\n                \"sitevf_site_longitude\":\"\",\n                \"sitevf_site_name\":\"DcLondon\",\n                \"sitevf_site_postcode\":\"N200095\",\n                \"sitevf_site_role\":\"sd-wan-edge\",\n                \"sitevf_site_type\":\"single-gateway\",\n                \"sotnvpnattachmentvf_sotncondition_clientSignal\":\"\",\n                \"sotnvpnattachmentvf_sotncondition_cVLAN\":\"\",\n                \"sotnvpnattachmentvf_sotncondition_sotnVpnName\":\"SOTN L2\"\n            }\n        }\n    }\n}","relationship-list":{"relationship":[{"related-to":"device","relationship-label":"org.onap.relationships.inventory.PartOf","related-link":"/aai/v13/network/devices/device/2cacf49c-7c09-4155-b18a-4468dce34083","relationship-data":[{"relationship-key":"device.device-id","relationship-value":"2cacf49c-7c09-4155-b18a-4468dce34083"}],"related-to-property":[{"property-key":"device.device-name","property-value":"TravelDevice"}]},{"related-to":"site-resource","relationship-label":"org.onap.relationships.inventory.PartOf","related-link":"/aai/v13/network/site-resources/site-resource/f288d54e-be09-46d3-bb1f-38729ec74bb5","relationship-data":[{"relationship-key":"site-resource.site-resource-id","relationship-value":"f288d54e-be09-46d3-bb1f-38729ec74bb5"}],"related-to-property":[{"property-key":"site-resource.site-resource-name","property-value":"travelSite"}]},{"related-to":"wan-port-config","relationship-label":"org.onap.relationships.inventory.PartOf","related-link":"/aai/v13/network/wan-port-configs/wan-port-config/99866f05-9749-456e-8909-61eebf08373e","relationship-data":[{"relationship-key":"wan-port-config.wan-port-config-id","relationship-value":"99866f05-9749-456e-8909-61eebf08373e"}],"related-to-property":[{"property-key":"wan-port-config.wan-port-config-name","property-value":"intenet"}]},{"related-to":"wan-port-config","relationship-label":"org.onap.relationships.inventory.PartOf","related-link":"/aai/v13/network/wan-port-configs/wan-port-config/afab2cc0-28c9-4fd3-bf03-01c8034f8191","relationship-data":[{"relationship-key":"wan-port-config.wan-port-config-id","relationship-value":"afab2cc0-28c9-4fd3-bf03-01c8034f8191"}],"related-to-property":[{"property-key":"wan-port-config.wan-port-config-name","property-value":"mpls"}]},{"related-to":"sp-partner","relationship-label":"org.onap.relationships.inventory.PartOf","related-link":"/aai/v13/business/sp-partners/sp-partner/167a285b-0875-41ff-8ed1-1178db6f3133","relationship-data":[{"relationship-key":"sp-partner.sp-partner-id","relationship-value":"167a285b-0875-41ff-8ed1-1178db6f3133"}],"related-to-property":[{"property-key":"sp-partner.sp-partner-id","property-value":"167a285b-0875-41ff-8ed1-1178db6f3133"}]},{"related-to":"allotted-resource","relationship-label":"org.onap.relationships.inventory.Uses","related-link":"/aai/v13/business/customers/customer/demo/service-subscriptions/service-subscription/ccvpn/service-instances/service-instance/0ea94797-3772-40ff-b6fb-69f06c533be3/allotted-resources/allotted-resource/d519761d-c89c-4164-86c7-8f74952eea65","relationship-data":[{"relationship-key":"customer.global-customer-id","relationship-value":"demo"},{"relationship-key":"service-subscription.service-type","relationship-value":"ccvpn"},{"relationship-key":"service-instance.service-instance-id","relationship-value":"0ea94797-3772-40ff-b6fb-69f06c533be3"},{"relationship-key":"allotted-resource.id","relationship-value":"d519761d-c89c-4164-86c7-8f74952eea65"}],"related-to-property":[{"property-key":"allotted-resource.description","property-value":"sdwan-attachment"},{"property-key":"allotted-resource.allotted-resource-name","property-value":"sdwan ar"}]},{"related-to":"allotted-resource","relationship-label":"org.onap.relationships.inventory.Uses","related-link":"/aai/v13/business/customers/customer/demo/service-subscriptions/service-subscription/ccvpn/service-instances/service-instance/8e07f832-3f50-4657-9b44-010049e8b488/allotted-resources/allotted-resource/65f21c28-8b19-4769-8f08-174e2afa5488","relationship-data":[{"relationship-key":"customer.global-customer-id","relationship-value":"demo"},{"relationship-key":"service-subscription.service-type","relationship-value":"ccvpn"},{"relationship-key":"service-instance.service-instance-id","relationship-value":"8e07f832-3f50-4657-9b44-010049e8b488"},{"relationship-key":"allotted-resource.id","relationship-value":"65f21c28-8b19-4769-8f08-174e2afa5488"}],"related-to-property":[{"property-key":"allotted-resource.description","property-value":"sotn attachment"},{"property-key":"allotted-resource.allotted-resource-name","property-value":"ston ar"}]}]}},{"service-instance-id":"0ea94797-3772-40ff-b6fb-69f06c533be3","service-instance-name":"SDWANVPNInfra","service-type":"E2E Service","service-role":"E2E Service","model-invariant-id":"e2b217d6-7cac-4156-9f44-f9b010b350a6","model-version-id":"20d9e7dc-f030-4230-af79-ba0bde7cbe2e","resource-version":"1537864894560","input-parameters":"{\n    \"service\":{\n        \"name\":\"SDWANVPNInfra\",\n        \"description\":\"SDWANVPNInfra\",\n        \"serviceInvariantUuid\":\"e2b217d6-7cac-4156-9f44-f9b010b350a6\",\n        \"serviceUuid\":\"20d9e7dc-f030-4230-af79-ba0bde7cbe2e\",\n        \"globalSubscriberId\":\"demo\",\n        \"serviceType\":\"ccvpn\",\n        \"parameters\":{\n            \"locationConstraints\":[\n\n            ],\n            \"resources\":[\n                {\n                    \"resourceName\":\"SDWANConnectivity 0\",\n                    \"resourceInvariantUuid\":\"f99a9a23-c88e-44ff-a4dc-22b88675d278\",\n                    \"resourceUuid\":\"7baa7742-3a13-4288-8330-868015adc340\",\n                    \"resourceCustomizationUuid\":\"94ec574b-2306-4cbd-8214-09662b040f73\",\n                    \"parameters\":{\n                        \"locationConstraints\":[\n\n                        ],\n                        \"resources\":[\n\n                        ],\n                        \"requestInputs\":{\n\n                        }\n                    }\n                },\n                {\n                    \"resourceName\":\"SPPartnerVF 0\",\n                    \"resourceInvariantUuid\":\"072f9238-15b0-4bc5-a5f5-f18548739470\",\n                    \"resourceUuid\":\"81b9430b-8abe-45d6-8bf9-f41a8f5c735f\",\n                    \"resourceCustomizationUuid\":\"a7baba5d-6ac3-42b5-b47d-070841303ab1\",\n                    \"parameters\":{\n                        \"locationConstraints\":[\n\n                        ],\n                        \"resources\":[\n\n                        ],\n                        \"requestInputs\":{\n\n                        }\n                    }\n                }\n            ],\n            \"requestInputs\":{\n                \"sdwanconnectivity0_name\":\"SDWANVPNInfra\",\n                \"sdwanconnectivity0_topology\":\"hub-spoke\"\n            }\n        }\n    }\n}","relationship-list":{"relationship":[{"related-to":"sdwan-vpn","relationship-label":"org.onap.relationships.inventory.PartOf","related-link":"/aai/v13/network/sdwan-vpns/sdwan-vpn/0d8707cd-9d27-4503-a0b0-e9b1b1a83b1e","relationship-data":[{"relationship-key":"sdwan-vpn.sdwan-vpn-id","relationship-value":"0d8707cd-9d27-4503-a0b0-e9b1b1a83b1e"}],"related-to-property":[{"property-key":"sdwan-vpn.sdwan-vpn-name"}]},{"related-to":"sp-partner","relationship-label":"org.onap.relationships.inventory.PartOf","related-link":"/aai/v13/business/sp-partners/sp-partner/15e88f8e-473f-4d88-92f8-6739a42baa2g","relationship-data":[{"relationship-key":"sp-partner.sp-partner-id","relationship-value":"15e88f8e-473f-4d88-92f8-6739a42baa2g"}],"related-to-property":[{"property-key":"sp-partner.sp-partner-id","property-value":"15e88f8e-473f-4d88-92f8-6739a42baa2g"}]},{"related-to":"allotted-resource","relationship-label":"org.onap.relationships.inventory.Uses","related-link":"/aai/v13/business/customers/customer/demo/service-subscriptions/service-subscription/ccvpn/service-instances/service-instance/2d55a540-f6d3-4108-9bb4-290574b87a6c/allotted-resources/allotted-resource/c797bba9-eb90-4825-b1c2-adbd1a31101f","relationship-data":[{"relationship-key":"customer.global-customer-id","relationship-value":"demo"},{"relationship-key":"service-subscription.service-type","relationship-value":"ccvpn"},{"relationship-key":"service-instance.service-instance-id","relationship-value":"2d55a540-f6d3-4108-9bb4-290574b87a6c"},{"relationship-key":"allotted-resource.id","relationship-value":"c797bba9-eb90-4825-b1c2-adbd1a31101f"}],"related-to-property":[{"property-key":"allotted-resource.description","property-value":"sdwan-attachment"},{"property-key":"allotted-resource.allotted-resource-name","property-value":"sdwan ar"}]},{"related-to":"allotted-resource","relationship-label":"org.onap.relationships.inventory.Uses","related-link":"/aai/v13/business/customers/customer/demo/service-subscriptions/service-subscription/ccvpn/service-instances/service-instance/a6d69c62-75b5-4f04-8cd7-9ca5dfcc4205/allotted-resources/allotted-resource/9a7329e6-8961-4008-9dbe-adeacfcd20da","relationship-data":[{"relationship-key":"customer.global-customer-id","relationship-value":"demo"},{"relationship-key":"service-subscription.service-type","relationship-value":"ccvpn"},{"relationship-key":"service-instance.service-instance-id","relationship-value":"a6d69c62-75b5-4f04-8cd7-9ca5dfcc4205"},{"relationship-key":"allotted-resource.id","relationship-value":"9a7329e6-8961-4008-9dbe-adeacfcd20da"}],"related-to-property":[{"property-key":"allotted-resource.description","property-value":"sdwan-attachment"},{"property-key":"allotted-resource.allotted-resource-name","property-value":"sdwan ar"}]}]}},{"service-instance-id":"f08067b8-a07b-4c41-b750-5f9b35281e67","service-instance-name":"siteFangshanQu","service-type":"E2E Service","service-role":"E2E Service","model-invariant-id":"499e5e60-c8b2-4ea6-8c4e-7739420673a9","model-version-id":"8ec97da1-1e0a-4198-9c9a-3da2c60d7974","resource-version":"1537867265890","selflink":"restconf/config/GENERIC-RESOURCE-API:services/service/506b87a5-72fe-4197-a307-6929c3871ab2/service-data/service-topology/","input-parameters":"{\n    \"service\":{\n        \"name\":\"siteFangshanQu\",\n        \"description\":\"SiteService\",\n        \"serviceInvariantUuid\":\"499e5e60-c8b2-4ea6-8c4e-7739420673a9\",\n        \"serviceUuid\":\"8ec97da1-1e0a-4198-9c9a-3da2c60d7974\",\n        \"globalSubscriberId\":\"demo\",\n        \"serviceType\":\"ccvpn\",\n        \"parameters\":{\n            \"locationConstraints\":[\n\n            ],\n            \"resources\":[\n                {\n                    \"resourceName\":\"SiteVF\",\n                    \"resourceInvariantUuid\":\"0c0e1cbe-6e01-4f9e-8c45-a9700ebc14df\",\n                    \"resourceUuid\":\"4ad2d390-5c51-45f5-9710-b467a4ec7a73\",\n                    \"resourceCustomizationUuid\":\"66590e07-0777-415c-af44-36347cf3ddd3\",\n                    \"parameters\":{\n                        \"locationConstraints\":[\n\n                        ],\n                        \"resources\":[\n\n                        ],\n                        \"requestInputs\":{\n\n                        }\n                    }\n                },\n                {\n                    \"resourceName\":\"mpls\",\n                    \"resourceInvariantUuid\":\"97a3e552-08c4-4697-aeeb-d8d3e09ce58e\",\n                    \"resourceUuid\":\"63d8e1af-32dc-4c71-891d-e3f7b6a976d2\",\n                    \"resourceCustomizationUuid\":\"205456e7-3dc0-40c4-8cb0-28e6c1877042\",\n                    \"parameters\":{\n                        \"locationConstraints\":[\n\n                        ],\n                        \"resources\":[\n\n                        ],\n                        \"requestInputs\":{\n\n                        }\n                    }\n                },\n                {\n                    \"resourceName\":\"deviceVF\",\n                    \"resourceInvariantUuid\":\"c726490a-0ce2-4bc7-abea-dade66bfb13d\",\n                    \"resourceUuid\":\"0e2de9d8-d76b-4134-b5f1-41e79056adbe\",\n                    \"resourceCustomizationUuid\":\"5bc1373e-9a36-4a00-8c62-784e0bc417ad\",\n                    \"parameters\":{\n                        \"locationConstraints\":[\n\n                        ],\n                        \"resources\":[\n\n                        ],\n                        \"requestInputs\":{\n\n                        }\n                    }\n                },\n                {\n                    \"resourceName\":\"sdwanvpnattachmentVF\",\n                    \"resourceInvariantUuid\":\"f714feec-1aef-4890-abba-f8f3a906935f\",\n                    \"resourceUuid\":\"709919b7-75fd-4e49-8398-67853323ff55\",\n                    \"resourceCustomizationUuid\":\"debd988f-fe04-4940-a5cb-37f61d84eab4\",\n                    \"parameters\":{\n                        \"locationConstraints\":[\n\n                        ],\n                        \"resources\":[\n\n                        ],\n                        \"requestInputs\":{\n\n                        }\n                    }\n                },\n                {\n                    \"resourceName\":\"internet\",\n                    \"resourceInvariantUuid\":\"97a3e552-08c4-4697-aeeb-d8d3e09ce58e\",\n                    \"resourceUuid\":\"63d8e1af-32dc-4c71-891d-e3f7b6a976d2\",\n                    \"resourceCustomizationUuid\":\"64b8e8ba-62b9-4db6-b420-1ca7067d63e0\",\n                    \"parameters\":{\n                        \"locationConstraints\":[\n\n                        ],\n                        \"resources\":[\n\n                        ],\n                        \"requestInputs\":{\n\n                        }\n                    }\n                },\n                {\n                    \"resourceName\":\"sotnvpnattachmentvF\",\n                    \"resourceInvariantUuid\":\"97c4a3c6-2943-41af-8717-2f3183f944be\",\n                    \"resourceUuid\":\"44b777ee-9793-465d-8053-d8e86d2e2362\",\n                    \"resourceCustomizationUuid\":\"37aeb073-c75d-4cf6-a7fa-a1af862ef58a\",\n                    \"parameters\":{\n                        \"locationConstraints\":[\n\n                        ],\n                        \"resources\":[\n\n                        ],\n                        \"requestInputs\":{\n\n                        }\n                    }\n                },\n                {\n                    \"resourceName\":\"SPPartnerVF\",\n                    \"resourceInvariantUuid\":\"072f9238-15b0-4bc5-a5f5-f18548739470\",\n                    \"resourceUuid\":\"81b9430b-8abe-45d6-8bf9-f41a8f5c735f\",\n                    \"resourceCustomizationUuid\":\"cd0b4b9c-66c6-49c5-b346-7580e4b6c394\",\n                    \"parameters\":{\n                        \"locationConstraints\":[\n\n                        ],\n                        \"resources\":[\n\n                        ],\n                        \"requestInputs\":{\n\n                        }\n                    }\n                }\n            ],\n            \"requestInputs\":{\n                \"devicevf_device_class\":\"PNF\",\n                \"devicevf_device_esn\":\"2102351BTJ10HB000075\",\n                \"devicevf_device_name\":\"50.47\",\n                \"devicevf_device_systemIp\":\"192.168.1.47\",\n                \"devicevf_device_type\":\"AR161EW\",\n                \"devicevf_device_vendor\":\"huawei\",\n                \"devicevf_device_version\":\"1.0\",\n                \"internet_sitewanport_description\":\"internet\",\n                \"internet_sitewanport_deviceName\":\"50.47\",\n                \"internet_sitewanport_inputBandwidth\":\"100\",\n                \"internet_sitewanport_ipAddress\":\"100.2.30.9\",\n                \"internet_sitewanport_name\":\"internet\",\n                \"internet_sitewanport_outputBandwidth\":\"100\",\n                \"internet_sitewanport_portNumber\":\"0/0/2\",\n                \"internet_sitewanport_portType\":\"GE\",\n                \"internet_sitewanport_providerIpAddress\":\"100.2.30.10\",\n                \"internet_sitewanport_transportNetworkName\":\"internet\",\n                \"mpls_sitewanport_description\":\"mpls\",\n                \"mpls_sitewanport_deviceName\":\"50.47\",\n                \"mpls_sitewanport_inputBandwidth\":\"100\",\n                \"mpls_sitewanport_ipAddress\":\"10.2.30.7\",\n                \"mpls_sitewanport_name\":\"mpls\",\n                \"mpls_sitewanport_outputBandwidth\":\"100\",\n                \"mpls_sitewanport_portNumber\":\"0/0/1\",\n                \"mpls_sitewanport_portType\":\"GE\",\n                \"mpls_sitewanport_providerIpAddress\":\"10.2.30.8\",\n                \"mpls_sitewanport_transportNetworkName\":\"internet\",\n                \"sdwanvpnattachmentvf_sdwancondition_role\":\"spoke\",\n                \"sdwanvpnattachmentvf_sdwancondition_sdwanVpnName\":\"SDWANVPNInfra-2\",\n                \"sitevf_site_address\":\"CMCC International Data Center,Hongkong\",\n                \"sitevf_site_controlPoint\":\"CMCC_VCPE\",\n                \"sitevf_site_description\":\"CMCC_vGW\",\n                \"sitevf_site_emails\":\"\",\n                \"sitevf_site_latitude\":\"\",\n                \"sitevf_site_longitude\":\"\",\n                \"sitevf_site_name\":\"siteFangshanQu\",\n                \"sitevf_site_postcode\":\"999077\",\n                \"sitevf_site_role\":\"sd-wan-edge\",\n                \"sitevf_site_type\":\"single-gateway\",\n                \"sotnvpnattachmentvf_sotncondition_clientSignal\":\"\",\n                \"sotnvpnattachmentvf_sotncondition_cVLAN\":\"\",\n                \"sotnvpnattachmentvf_sotncondition_sotnVpnName\":\"SOTN L2\"\n            }\n        }\n    }\n}","relationship-list":{"relationship":[{"related-to":"sp-partner","relationship-label":"org.onap.relationships.inventory.PartOf","related-link":"/aai/v13/business/sp-partners/sp-partner/506b87a5-72fe-4197-a307-6929c3871ab2","relationship-data":[{"relationship-key":"sp-partner.sp-partner-id","relationship-value":"506b87a5-72fe-4197-a307-6929c3871ab2"}],"related-to-property":[{"property-key":"sp-partner.sp-partner-id","property-value":"506b87a5-72fe-4197-a307-6929c3871ab2"}]}]}},{"service-instance-id":"6a6478d1-f62f-439c-8f16-6038a44af8c3","service-instance-name":"SDWANVPNInfra-2","service-type":"E2E Service","service-role":"E2E Service","model-invariant-id":"e2b217d6-7cac-4156-9f44-f9b010b350a6","model-version-id":"20d9e7dc-f030-4230-af79-ba0bde7cbe2e","resource-version":"1537779569094","input-parameters":"{\n    \"service\":{\n        \"name\":\"SDWANVPNInfra-2\",\n        \"description\":\"SDWANVPNInfra\",\n        \"serviceInvariantUuid\":\"e2b217d6-7cac-4156-9f44-f9b010b350a6\",\n        \"serviceUuid\":\"20d9e7dc-f030-4230-af79-ba0bde7cbe2e\",\n        \"globalSubscriberId\":\"demo\",\n        \"serviceType\":\"ccvpn\",\n        \"parameters\":{\n            \"locationConstraints\":[\n\n            ],\n            \"resources\":[\n                {\n                    \"resourceName\":\"SDWANConnectivity 0\",\n                    \"resourceInvariantUuid\":\"f99a9a23-c88e-44ff-a4dc-22b88675d278\",\n                    \"resourceUuid\":\"7baa7742-3a13-4288-8330-868015adc340\",\n                    \"resourceCustomizationUuid\":\"94ec574b-2306-4cbd-8214-09662b040f73\",\n                    \"parameters\":{\n                        \"locationConstraints\":[\n\n                        ],\n                        \"resources\":[\n\n                        ],\n                        \"requestInputs\":{\n\n                        }\n                    }\n                },\n                {\n                    \"resourceName\":\"SPPartnerVF 0\",\n                    \"resourceInvariantUuid\":\"072f9238-15b0-4bc5-a5f5-f18548739470\",\n                    \"resourceUuid\":\"81b9430b-8abe-45d6-8bf9-f41a8f5c735f\",\n                    \"resourceCustomizationUuid\":\"a7baba5d-6ac3-42b5-b47d-070841303ab1\",\n                    \"parameters\":{\n                        \"locationConstraints\":[\n\n                        ],\n                        \"resources\":[\n\n                        ],\n                        \"requestInputs\":{\n\n                        }\n                    }\n                }\n            ],\n            \"requestInputs\":{\n                \"sdwanconnectivity0_name\":\"CMCCVPN\",\n                \"sdwanconnectivity0_topology\":\"hub-spoke\"\n            }\n        }\n    }\n}","relationship-list":{"relationship":[{"related-to":"sp-partner","relationship-label":"org.onap.relationships.inventory.PartOf","related-link":"/aai/v13/business/sp-partners/sp-partner/de888731-eac8-454c-bbb2-927a85ba2d1c","relationship-data":[{"relationship-key":"sp-partner.sp-partner-id","relationship-value":"de888731-eac8-454c-bbb2-927a85ba2d1c"}],"related-to-property":[{"property-key":"sp-partner.sp-partner-id","property-value":"de888731-eac8-454c-bbb2-927a85ba2d1c"}]}]}},{"service-instance-id":"fd0b9f0a-0d5c-4f69-a3dc-fb9cabde9db8","service-instance-name":"DcXichengQuBeijing","service-type":"E2E Service","service-role":"E2E Service","model-invariant-id":"499e5e60-c8b2-4ea6-8c4e-7739420673a9","model-version-id":"8ec97da1-1e0a-4198-9c9a-3da2c60d7974","resource-version":"1537867379064","selflink":"restconf/config/GENERIC-RESOURCE-API:services/service/289b87a5-72fe-4197-a307-6929c3831f82/service-data/service-topology/","input-parameters":"{\n    \"service\":{\n        \"name\":\"DcXichengQuBeijing\",\n        \"description\":\"SiteService\",\n        \"serviceInvariantUuid\":\"499e5e60-c8b2-4ea6-8c4e-7739420673a9\",\n        \"serviceUuid\":\"8ec97da1-1e0a-4198-9c9a-3da2c60d7974\",\n        \"globalSubscriberId\":\"demo\",\n        \"serviceType\":\"ccvpn\",\n        \"parameters\":{\n            \"locationConstraints\":[\n\n            ],\n            \"resources\":[\n                {\n                    \"resourceName\":\"SiteVF\",\n                    \"resourceInvariantUuid\":\"0c0e1cbe-6e01-4f9e-8c45-a9700ebc14df\",\n                    \"resourceUuid\":\"4ad2d390-5c51-45f5-9710-b467a4ec7a73\",\n                    \"resourceCustomizationUuid\":\"66590e07-0777-415c-af44-36347cf3ddd3\",\n                    \"parameters\":{\n                        \"locationConstraints\":[\n\n                        ],\n                        \"resources\":[\n\n                        ],\n                        \"requestInputs\":{\n\n                        }\n                    }\n                },\n                {\n                    \"resourceName\":\"mpls\",\n                    \"resourceInvariantUuid\":\"97a3e552-08c4-4697-aeeb-d8d3e09ce58e\",\n                    \"resourceUuid\":\"63d8e1af-32dc-4c71-891d-e3f7b6a976d2\",\n                    \"resourceCustomizationUuid\":\"205456e7-3dc0-40c4-8cb0-28e6c1877042\",\n                    \"parameters\":{\n                        \"locationConstraints\":[\n\n                        ],\n                        \"resources\":[\n\n                        ],\n                        \"requestInputs\":{\n\n                        }\n                    }\n                },\n                {\n                    \"resourceName\":\"deviceVF\",\n                    \"resourceInvariantUuid\":\"c726490a-0ce2-4bc7-abea-dade66bfb13d\",\n                    \"resourceUuid\":\"0e2de9d8-d76b-4134-b5f1-41e79056adbe\",\n                    \"resourceCustomizationUuid\":\"5bc1373e-9a36-4a00-8c62-784e0bc417ad\",\n                    \"parameters\":{\n                        \"locationConstraints\":[\n\n                        ],\n                        \"resources\":[\n\n                        ],\n                        \"requestInputs\":{\n\n                        }\n                    }\n                },\n                {\n                    \"resourceName\":\"sdwanvpnattachmentVF\",\n                    \"resourceInvariantUuid\":\"f714feec-1aef-4890-abba-f8f3a906935f\",\n                    \"resourceUuid\":\"709919b7-75fd-4e49-8398-67853323ff55\",\n                    \"resourceCustomizationUuid\":\"debd988f-fe04-4940-a5cb-37f61d84eab4\",\n                    \"parameters\":{\n                        \"locationConstraints\":[\n\n                        ],\n                        \"resources\":[\n\n                        ],\n                        \"requestInputs\":{\n\n                        }\n                    }\n                },\n                {\n                    \"resourceName\":\"internet\",\n                    \"resourceInvariantUuid\":\"97a3e552-08c4-4697-aeeb-d8d3e09ce58e\",\n                    \"resourceUuid\":\"63d8e1af-32dc-4c71-891d-e3f7b6a976d2\",\n                    \"resourceCustomizationUuid\":\"64b8e8ba-62b9-4db6-b420-1ca7067d63e0\",\n                    \"parameters\":{\n                        \"locationConstraints\":[\n\n                        ],\n                        \"resources\":[\n\n                        ],\n                        \"requestInputs\":{\n\n                        }\n                    }\n                },\n                {\n                    \"resourceName\":\"sotnvpnattachmentvF\",\n                    \"resourceInvariantUuid\":\"97c4a3c6-2943-41af-8717-2f3183f944be\",\n                    \"resourceUuid\":\"44b777ee-9793-465d-8053-d8e86d2e2362\",\n                    \"resourceCustomizationUuid\":\"37aeb073-c75d-4cf6-a7fa-a1af862ef58a\",\n                    \"parameters\":{\n                        \"locationConstraints\":[\n\n                        ],\n                        \"resources\":[\n\n                        ],\n                        \"requestInputs\":{\n\n                        }\n                    }\n                },\n                {\n                    \"resourceName\":\"SPPartnerVF\",\n                    \"resourceInvariantUuid\":\"072f9238-15b0-4bc5-a5f5-f18548739470\",\n                    \"resourceUuid\":\"81b9430b-8abe-45d6-8bf9-f41a8f5c735f\",\n                    \"resourceCustomizationUuid\":\"cd0b4b9c-66c6-49c5-b346-7580e4b6c394\",\n                    \"parameters\":{\n                        \"locationConstraints\":[\n\n                        ],\n                        \"resources\":[\n\n                        ],\n                        \"requestInputs\":{\n\n                        }\n                    }\n                }\n            ],\n            \"requestInputs\":{\n                \"devicevf_device_class\":\"PNF\",\n                \"devicevf_device_esn\":\"2102351BTJ10HB000075\",\n                \"devicevf_device_name\":\"50.47\",\n                \"devicevf_device_systemIp\":\"192.168.1.47\",\n                \"devicevf_device_type\":\"AR161EW\",\n                \"devicevf_device_vendor\":\"huawei\",\n                \"devicevf_device_version\":\"1.0\",\n                \"internet_sitewanport_description\":\"internet\",\n                \"internet_sitewanport_deviceName\":\"50.47\",\n                \"internet_sitewanport_inputBandwidth\":\"100\",\n                \"internet_sitewanport_ipAddress\":\"100.2.30.9\",\n                \"internet_sitewanport_name\":\"internet\",\n                \"internet_sitewanport_outputBandwidth\":\"100\",\n                \"internet_sitewanport_portNumber\":\"0/0/2\",\n                \"internet_sitewanport_portType\":\"GE\",\n                \"internet_sitewanport_providerIpAddress\":\"100.2.30.10\",\n                \"internet_sitewanport_transportNetworkName\":\"internet\",\n                \"mpls_sitewanport_description\":\"mpls\",\n                \"mpls_sitewanport_deviceName\":\"50.47\",\n                \"mpls_sitewanport_inputBandwidth\":\"100\",\n                \"mpls_sitewanport_ipAddress\":\"10.2.30.7\",\n                \"mpls_sitewanport_name\":\"mpls\",\n                \"mpls_sitewanport_outputBandwidth\":\"100\",\n                \"mpls_sitewanport_portNumber\":\"0/0/1\",\n                \"mpls_sitewanport_portType\":\"GE\",\n                \"mpls_sitewanport_providerIpAddress\":\"10.2.30.8\",\n                \"mpls_sitewanport_transportNetworkName\":\"internet\",\n                \"sdwanvpnattachmentvf_sdwancondition_role\":\"spoke\",\n                \"sdwanvpnattachmentvf_sdwancondition_sdwanVpnName\":\"SDWANVPNInfra\",\n                \"sitevf_site_address\":\"Chuangxin Building,Tianningsi,Xicheng,Beijing\",\n                \"sitevf_site_controlPoint\":\"CMCC_VCPE\",\n                \"sitevf_site_description\":\"CMCC_vGW\",\n                \"sitevf_site_emails\":\"\",\n                \"sitevf_site_latitude\":\"\",\n                \"sitevf_site_longitude\":\"\",\n                \"sitevf_site_name\":\"DcXichengQuBeijing\",\n                \"sitevf_site_postcode\":\"100095\",\n                \"sitevf_site_role\":\"sd-wan-edge\",\n                \"sitevf_site_type\":\"single-gateway\",\n                \"sotnvpnattachmentvf_sotncondition_clientSignal\":\"\",\n                \"sotnvpnattachmentvf_sotncondition_cVLAN\":\"\",\n                \"sotnvpnattachmentvf_sotncondition_sotnVpnName\":\"SOTN L2\"\n            }\n        }\n    }\n}","relationship-list":{"relationship":[{"related-to":"sp-partner","relationship-label":"org.onap.relationships.inventory.PartOf","related-link":"/aai/v13/business/sp-partners/sp-partner/289b87a5-72fe-4197-a307-6929c3831f82","relationship-data":[{"relationship-key":"sp-partner.sp-partner-id","relationship-value":"289b87a5-72fe-4197-a307-6929c3831f82"}],"related-to-property":[{"property-key":"sp-partner.sp-partner-id","property-value":"289b87a5-72fe-4197-a307-6929c3831f82"}]}]}},{"service-instance-id":"2d55a540-f6d3-4108-9bb4-290574b87a6c","service-instance-name":"siteLondon","service-type":"E2E Service","service-role":"E2E Service","model-invariant-id":"499e5e60-c8b2-4ea6-8c4e-7739420673a9","model-version-id":"8ec97da1-1e0a-4198-9c9a-3da2c60d7974","resource-version":"1537866122803","input-parameters":"{\n    \"service\":{\n        \"name\":\"siteLondon\",\n        \"description\":\"SiteService\",\n        \"serviceInvariantUuid\":\"499e5e60-c8b2-4ea6-8c4e-7739420673a9\",\n        \"serviceUuid\":\"8ec97da1-1e0a-4198-9c9a-3da2c60d7974\",\n        \"globalSubscriberId\":\"demo\",\n        \"serviceType\":\"ccvpn\",\n        \"parameters\":{\n            \"locationConstraints\":[\n\n            ],\n            \"resources\":[\n                {\n                    \"resourceName\":\"SiteVF\",\n                    \"resourceInvariantUuid\":\"0c0e1cbe-6e01-4f9e-8c45-a9700ebc14df\",\n                    \"resourceUuid\":\"4ad2d390-5c51-45f5-9710-b467a4ec7a73\",\n                    \"resourceCustomizationUuid\":\"66590e07-0777-415c-af44-36347cf3ddd3\",\n                    \"parameters\":{\n                        \"locationConstraints\":[\n\n                        ],\n                        \"resources\":[\n\n                        ],\n                        \"requestInputs\":{\n\n                        }\n                    }\n                },\n                {\n                    \"resourceName\":\"mpls\",\n                    \"resourceInvariantUuid\":\"97a3e552-08c4-4697-aeeb-d8d3e09ce58e\",\n                    \"resourceUuid\":\"63d8e1af-32dc-4c71-891d-e3f7b6a976d2\",\n                    \"resourceCustomizationUuid\":\"205456e7-3dc0-40c4-8cb0-28e6c1877042\",\n                    \"parameters\":{\n                        \"locationConstraints\":[\n\n                        ],\n                        \"resources\":[\n\n                        ],\n                        \"requestInputs\":{\n\n                        }\n                    }\n                },\n                {\n                    \"resourceName\":\"deviceVF\",\n                    \"resourceInvariantUuid\":\"c726490a-0ce2-4bc7-abea-dade66bfb13d\",\n                    \"resourceUuid\":\"0e2de9d8-d76b-4134-b5f1-41e79056adbe\",\n                    \"resourceCustomizationUuid\":\"5bc1373e-9a36-4a00-8c62-784e0bc417ad\",\n                    \"parameters\":{\n                        \"locationConstraints\":[\n\n                        ],\n                        \"resources\":[\n\n                        ],\n                        \"requestInputs\":{\n\n                        }\n                    }\n                },\n                {\n                    \"resourceName\":\"sdwanvpnattachmentVF\",\n                    \"resourceInvariantUuid\":\"f714feec-1aef-4890-abba-f8f3a906935f\",\n                    \"resourceUuid\":\"709919b7-75fd-4e49-8398-67853323ff55\",\n                    \"resourceCustomizationUuid\":\"debd988f-fe04-4940-a5cb-37f61d84eab4\",\n                    \"parameters\":{\n                        \"locationConstraints\":[\n\n                        ],\n                        \"resources\":[\n\n                        ],\n                        \"requestInputs\":{\n\n                        }\n                    }\n                },\n                {\n                    \"resourceName\":\"internet\",\n                    \"resourceInvariantUuid\":\"97a3e552-08c4-4697-aeeb-d8d3e09ce58e\",\n                    \"resourceUuid\":\"63d8e1af-32dc-4c71-891d-e3f7b6a976d2\",\n                    \"resourceCustomizationUuid\":\"64b8e8ba-62b9-4db6-b420-1ca7067d63e0\",\n                    \"parameters\":{\n                        \"locationConstraints\":[\n\n                        ],\n                        \"resources\":[\n\n                        ],\n                        \"requestInputs\":{\n\n                        }\n                    }\n                },\n                {\n                    \"resourceName\":\"sotnvpnattachmentvF\",\n                    \"resourceInvariantUuid\":\"97c4a3c6-2943-41af-8717-2f3183f944be\",\n                    \"resourceUuid\":\"44b777ee-9793-465d-8053-d8e86d2e2362\",\n                    \"resourceCustomizationUuid\":\"37aeb073-c75d-4cf6-a7fa-a1af862ef58a\",\n                    \"parameters\":{\n                        \"locationConstraints\":[\n\n                        ],\n                        \"resources\":[\n\n                        ],\n                        \"requestInputs\":{\n\n                        }\n                    }\n                },\n                {\n                    \"resourceName\":\"SPPartnerVF\",\n                    \"resourceInvariantUuid\":\"072f9238-15b0-4bc5-a5f5-f18548739470\",\n                    \"resourceUuid\":\"81b9430b-8abe-45d6-8bf9-f41a8f5c735f\",\n                    \"resourceCustomizationUuid\":\"cd0b4b9c-66c6-49c5-b346-7580e4b6c394\",\n                    \"parameters\":{\n                        \"locationConstraints\":[\n\n                        ],\n                        \"resources\":[\n\n                        ],\n                        \"requestInputs\":{\n\n                        }\n                    }\n                }\n            ],\n            \"requestInputs\":{\n                \"devicevf_device_class\":\"PNF\",\n                \"devicevf_device_esn\":\"2102351BTJ10HB000075\",\n                \"devicevf_device_name\":\"50.47\",\n                \"devicevf_device_systemIp\":\"192.168.1.47\",\n                \"devicevf_device_type\":\"AR161EW\",\n                \"devicevf_device_vendor\":\"huawei\",\n                \"devicevf_device_version\":\"1.0\",\n                \"internet_sitewanport_description\":\"internet\",\n                \"internet_sitewanport_deviceName\":\"50.47\",\n                \"internet_sitewanport_inputBandwidth\":\"100\",\n                \"internet_sitewanport_ipAddress\":\"100.2.30.9\",\n                \"internet_sitewanport_name\":\"internet\",\n                \"internet_sitewanport_outputBandwidth\":\"100\",\n                \"internet_sitewanport_portNumber\":\"0/0/2\",\n                \"internet_sitewanport_portType\":\"GE\",\n                \"internet_sitewanport_providerIpAddress\":\"100.2.30.10\",\n                \"internet_sitewanport_transportNetworkName\":\"internet\",\n                \"mpls_sitewanport_description\":\"mpls\",\n                \"mpls_sitewanport_deviceName\":\"50.47\",\n                \"mpls_sitewanport_inputBandwidth\":\"100\",\n                \"mpls_sitewanport_ipAddress\":\"10.2.30.7\",\n                \"mpls_sitewanport_name\":\"mpls\",\n                \"mpls_sitewanport_outputBandwidth\":\"100\",\n                \"mpls_sitewanport_portNumber\":\"0/0/1\",\n                \"mpls_sitewanport_portType\":\"GE\",\n                \"mpls_sitewanport_providerIpAddress\":\"10.2.30.8\",\n                \"mpls_sitewanport_transportNetworkName\":\"internet\",\n                \"sdwanvpnattachmentvf_sdwancondition_role\":\"spoke\",\n                \"sdwanvpnattachmentvf_sdwancondition_sdwanVpnName\":\"SDWANVPNInfra-2\",\n                \"sitevf_site_address\":\"VDF International Data Center,Hongkong\",\n                \"sitevf_site_controlPoint\":\"VDF_VCPE\",\n                \"sitevf_site_description\":\"VDF_vGW\",\n                \"sitevf_site_emails\":\"\",\n                \"sitevf_site_latitude\":\"\",\n                \"sitevf_site_longitude\":\"\",\n                \"sitevf_site_name\":\"siteLondon\",\n                \"sitevf_site_postcode\":\"999077\",\n                \"sitevf_site_role\":\"sd-wan-edge\",\n                \"sitevf_site_type\":\"single-gateway\",\n                \"sotnvpnattachmentvf_sotncondition_clientSignal\":\"\",\n                \"sotnvpnattachmentvf_sotncondition_cVLAN\":\"\",\n                \"sotnvpnattachmentvf_sotncondition_sotnVpnName\":\"SOTN L2\"\n            }\n        }\n    }\n}","relationship-list":{"relationship":[{"related-to":"wan-port-config","relationship-label":"org.onap.relationships.inventory.PartOf","related-link":"/aai/v13/network/wan-port-configs/wan-port-config/52ae7944-12b3-4766-848e-e43088947af9","relationship-data":[{"relationship-key":"wan-port-config.wan-port-config-id","relationship-value":"52ae7944-12b3-4766-848e-e43088947af9"}],"related-to-property":[{"property-key":"wan-port-config.wan-port-config-name","property-value":"intenet"}]},{"related-to":"site-resource","relationship-label":"org.onap.relationships.inventory.PartOf","related-link":"/aai/v13/network/site-resources/site-resource/a22193fc-d1b5-41a7-9033-14339838b0c5","relationship-data":[{"relationship-key":"site-resource.site-resource-id","relationship-value":"a22193fc-d1b5-41a7-9033-14339838b0c5"}],"related-to-property":[{"property-key":"site-resource.site-resource-name","property-value":"travelSite"}]},{"related-to":"wan-port-config","relationship-label":"org.onap.relationships.inventory.PartOf","related-link":"/aai/v13/network/wan-port-configs/wan-port-config/9fc7c231-1b71-49e6-8390-e92b707e7615","relationship-data":[{"relationship-key":"wan-port-config.wan-port-config-id","relationship-value":"9fc7c231-1b71-49e6-8390-e92b707e7615"}],"related-to-property":[{"property-key":"wan-port-config.wan-port-config-name","property-value":"mpls"}]},{"related-to":"device","relationship-label":"org.onap.relationships.inventory.PartOf","related-link":"/aai/v13/network/devices/device/f0cf1e06-7be8-4602-83cb-60d87d8e7ef3","relationship-data":[{"relationship-key":"device.device-id","relationship-value":"f0cf1e06-7be8-4602-83cb-60d87d8e7ef3"}],"related-to-property":[{"property-key":"device.device-name","property-value":"CentSpokeDevice"}]},{"related-to":"sp-partner","relationship-label":"org.onap.relationships.inventory.PartOf","related-link":"/aai/v13/business/sp-partners/sp-partner/3addd6b9-b05f-4841-881c-1ce2c753513f","relationship-data":[{"relationship-key":"sp-partner.sp-partner-id","relationship-value":"3addd6b9-b05f-4841-881c-1ce2c753513f"}],"related-to-property":[{"property-key":"sp-partner.sp-partner-id","property-value":"3addd6b9-b05f-4841-881c-1ce2c753513f"}]},{"related-to":"allotted-resource","relationship-label":"org.onap.relationships.inventory.Uses","related-link":"/aai/v13/business/customers/customer/demo/service-subscriptions/service-subscription/ccvpn/service-instances/service-instance/0ea94797-3772-40ff-b6fb-69f06c533be3/allotted-resources/allotted-resource/f1523ca9-6b56-482e-b3a4-a2f8dcbfba12","relationship-data":[{"relationship-key":"customer.global-customer-id","relationship-value":"demo"},{"relationship-key":"service-subscription.service-type","relationship-value":"ccvpn"},{"relationship-key":"service-instance.service-instance-id","relationship-value":"0ea94797-3772-40ff-b6fb-69f06c533be3"},{"relationship-key":"allotted-resource.id","relationship-value":"f1523ca9-6b56-482e-b3a4-a2f8dcbfba12"}],"related-to-property":[{"property-key":"allotted-resource.description","property-value":"sdwan-attachment"},{"property-key":"allotted-resource.allotted-resource-name","property-value":"sdwan ar"}]},{"related-to":"allotted-resource","relationship-label":"org.onap.relationships.inventory.Uses","related-link":"/aai/v13/business/customers/customer/demo/service-subscriptions/service-subscription/ccvpn/service-instances/service-instance/8e07f832-3f50-4657-9b44-010049e8b488/allotted-resources/allotted-resource/d1a6b573-0595-4468-bab9-02465c295618","relationship-data":[{"relationship-key":"customer.global-customer-id","relationship-value":"demo"},{"relationship-key":"service-subscription.service-type","relationship-value":"ccvpn"},{"relationship-key":"service-instance.service-instance-id","relationship-value":"8e07f832-3f50-4657-9b44-010049e8b488"},{"relationship-key":"allotted-resource.id","relationship-value":"d1a6b573-0595-4468-bab9-02465c295618"}],"related-to-property":[{"property-key":"allotted-resource.description","property-value":"sotn attachment"},{"property-key":"allotted-resource.allotted-resource-name","property-value":"sotn ar"}]}]}}]}
\ No newline at end of file
diff --git a/usecaseui-portal/src/assets/json/status2.json b/usecaseui-portal/src/assets/json/status2.json
deleted file mode 100644
index 05e0a4fc..00000000
--- a/usecaseui-portal/src/assets/json/status2.json
+++ /dev/null
@@ -1 +0,0 @@
-"fail"
diff --git a/usecaseui-portal/src/index.html b/usecaseui-portal/src/index.html
index a2d2186f..efc279d1 100644
--- a/usecaseui-portal/src/index.html
+++ b/usecaseui-portal/src/index.html
@@ -15,6 +15,7 @@
 -->
 <!doctype html>
 <html lang="en">
+
 <head>
   <meta charset="utf-8">
   <title>UUI</title>
@@ -23,7 +24,9 @@
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/x-icon" href="favicon.ico">
 </head>
+
 <body>
   <app-root></app-root>
 </body>
-</html>
+
+</html>
\ No newline at end of file
diff --git a/usecaseui-portal/src/styles.less b/usecaseui-portal/src/styles.less
index 4dcc0f3e..63c911e3 100644
--- a/usecaseui-portal/src/styles.less
+++ b/usecaseui-portal/src/styles.less
@@ -465,7 +465,7 @@ nz-modal .serviceCreationModel.ant-modal,nz-modal .deleteModel.ant-modal, nz-mod
           }
           .ant-table-placeholder{
             margin-top: 30px;
-            background:url("./assets/images/noDatalist.png") no-repeat 50% 0;
+            background:url("assets/images/noDatalist.png") no-repeat 50% 0;
             span{
               display: inline-block;
               padding-top: 60px;
@@ -515,7 +515,7 @@ nz-modal .serviceCreationModel.ant-modal,nz-modal .deleteModel.ant-modal, nz-mod
     .ant-table-placeholder{
       margin-top: 30px;
       font-size: 16px;
-      background:url("./assets/images/noDatalist.png") no-repeat 50% 0;
+      background:url("assets/images/noDatalist.png") no-repeat 50% 0;
       span {
         display: inline-block;
         padding-top: 50px;