create e2eService and nsService

Change-Id: I67da05aeb62b24e13446c439b9ef6b9fc1494920
Issue-ID: USECASEUI-160
Signed-off-by: guochuyicmri <guochuyi@chinamobile.com>

12 files changed, 1005 insertions, 441 deletions

diff --git a/usecaseui-portal/src/app/app.module.ts b/usecaseui-portal/src/app/app.module.ts
index 7c24f110..3032a37c 100644
--- a/usecaseui-portal/src/app/app.module.ts
+++ b/usecaseui-portal/src/app/app.module.ts
@@ -37,6 +37,7 @@ import { CcvpnCreationComponent } from './ccvpn-creation/ccvpn-creation.componen
 
 import { DetailsComponent } from './components/details/details.component';
 import { GraphiclistComponent } from './components/graphiclist/graphiclist.component';
+import { E2eCreationComponent } from './components/e2e-creation/e2e-creation.component';
 
 import { BarComponent } from './components/charts/bar/bar.component';
 import { LineComponent } from './components/charts/line/line.component';
@@ -72,6 +73,7 @@ import { networkHttpservice } from './networkHttpservice.service';
     LineComponent,
     BarComponent,
     GraphiclistComponent,
+    E2eCreationComponent,
 
     CcvpnNetworkComponent,
     CcvpnDetailComponent,
diff --git a/usecaseui-portal/src/app/components/e2e-creation/e2e-creation.component.css b/usecaseui-portal/src/app/components/e2e-creation/e2e-creation.component.css
new file mode 100644
index 00000000..f1d359f0
--- /dev/null
+++ b/usecaseui-portal/src/app/components/e2e-creation/e2e-creation.component.css
@@ -0,0 +1,77 @@
+/*
+    Copyright (C) 2018 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.
+*/
+.title {
+  font: 700 18px/18px "思源黑体";
+  color: #4c5e70;
+  margin-bottom: 18px;
+}
+hr {
+  border: none;
+  height: 2px;
+  background-color: #dce1e7;
+  margin-bottom: 10px;
+}
+.model {
+  background-color: #fff;
+  height: 90%;
+  overflow-y: auto;
+}
+.model .back {
+  position: absolute;
+  top: 10px;
+  right: 20px;
+}
+.model .creation {
+  position: relative;
+  width: 60%;
+  height: 100%;
+  overflow-y: auto;
+  border-radius: 5px;
+  padding: 20px;
+}
+.model .creation .baseparms h3 {
+  color: #3fa8eb;
+  font: 700 16px "Arial";
+}
+.model .creation .baseparms h4 {
+  font: 700 16px "Arial";
+}
+.model .creation .baseparms ul li {
+  margin: 3px 0;
+}
+.model .creation .baseparms ul li span {
+  display: inline-block;
+  width: 40%;
+  font: 700 14px "Arial";
+  vertical-align: middle;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  text-align: right;
+}
+.model .creation .baseparms ul li input {
+  width: 165px;
+}
+.model .creation .submit {
+  position: absolute;
+  top: 10px;
+  right: 20px;
+}
+.model .chart {
+  width: 40%;
+  padding: 10px;
+  height: 100%;
+  border-left: 10px solid #f3f3f3;
+}
diff --git a/usecaseui-portal/src/app/components/e2e-creation/e2e-creation.component.html b/usecaseui-portal/src/app/components/e2e-creation/e2e-creation.component.html
new file mode 100644
index 00000000..0ada7dd1
--- /dev/null
+++ b/usecaseui-portal/src/app/components/e2e-creation/e2e-creation.component.html
@@ -0,0 +1,123 @@
+<!--
+    Copyright (C) 2018 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.
+-->
+<h3 class="title"> Services List </h3>
+<hr>
+<div class="model">
+  <!-- 创建数据 -->
+  <button class="back" nz-button (click)="goback()"><span><i class="anticon anticon-rollback"></i></span></button>
+  <div class="creation fl">
+    <div *ngIf="createParams.commonParams.templateType=='E2E Service'" class="baseparms clearfix">
+      <h3>Base</h3>
+      <ul>
+        <li><span>Name*</span> <input nz-input [(ngModel)]="service.name"></li>
+        <li><span>Description*</span> <input nz-input [(ngModel)]="service.description"></li>
+      </ul>
+      <br>
+      <h3>Template Parameters</h3>
+      <h4>template Inputs</h4>
+      <ul>
+        <li *ngFor="let parameter of templateParameters.inputs; let i = index;">
+          <span *ngIf="parameter.type !== 'vf_location' && parameter.type !== 'sdn_controller'">{{parameter.name}}:</span> 
+          <input *ngIf="parameter.type !== 'vf_location' && parameter.type !== 'sdn_controller'" nz-input [(ngModel)]="parameter.value">
+
+          <h5 *ngIf="parameter.type === 'vf_location'" style="padding-left:10px;">id: {{parameter.name}}</h5>
+          <span *ngIf="parameter.type === 'vf_location'"> vf_location: </span>
+          <nz-select *ngIf="parameter.type === 'vf_location'" style="width: 165px;" [(ngModel)]="parameter.value" nzAllowClear >
+            <nz-option *ngFor="let vim of vimInfos" [nzValue]="vim" [nzLabel]="vim.name"></nz-option>
+          </nz-select>
+          <!-- <nz-select *ngIf="parameter.type === 'sdn_controller'" style="width: 165px;" [(ngModel)]="parameter.value" nzAllowClear >
+            <nz-option *ngFor="let control of sdnControllers" [nzValue]="control" [nzLabel]="control.name"></nz-option>
+          </nz-select> -->
+        </li>
+      </ul>
+      <h4>nestedTemplate Inputs</h4>
+      <div *ngFor="let template of templateParameters.nestedTemplates;">
+          <h4 style="font:400 14px 'Arial';color:#aaa;">templateName: {{template.name}}</h4>
+          <ul>
+            <li *ngFor="let input of template.inputs; let i = index;">
+              <span *ngIf="input.type !== 'vf_location' && input.type !== 'sdn_controller'" > {{input.name}}: </span>
+              <input *ngIf="input.type !== 'vf_location' && input.type !== 'sdn_controller'" nz-input [(ngModel)]="input.value">
+
+              <h5 *ngIf="input.type === 'vf_location'" style="padding-left:10px;">id: {{input.name}}</h5>
+              <span *ngIf="input.type === 'vf_location'"> vf_location: </span>
+              <nz-select *ngIf="input.type === 'vf_location'" style="width: 165px;" [(ngModel)]="input.value" nzAllowClear >
+                <nz-option *ngFor="let vim of vimInfos" [nzValue]="vim" [nzLabel]="vim.name"></nz-option>
+              </nz-select>
+              <!-- <nz-select *ngIf="input.type === 'sdn_controller'" style="width: 165px;" [(ngModel)]="input.value" nzAllowClear >
+                <nz-option *ngFor="let control of sdnControllers" [nzValue]="control" [nzLabel]="control.name"></nz-option>
+              </nz-select> -->
+            </li>
+          </ul>
+      </div>
+
+    </div>
+
+    <div *ngIf="createParams.commonParams.templateType=='Network Service'" class="baseparms clearfix">
+      <h3>Base</h3>
+      <ul>
+        <li><span>Name*</span> <input nz-input [(ngModel)]="ns_service.nsName"></li>
+        <li><span>Description*</span> <input nz-input [(ngModel)]="ns_service.description"></li>
+      </ul>
+      <h3>Template Parameters</h3>
+      <h4>template Inputs</h4>
+      <ul>
+        <li *ngFor="let parameter of nsTemplateParameters.inputs2; let i = index;">
+          <span *ngIf="parameter.type !== 'vf_location' && parameter.type !== 'sdn_controller'">{{parameter.name}}:</span> 
+          <input *ngIf="parameter.type !== 'vf_location' && parameter.type !== 'sdn_controller'" nz-input [(ngModel)]="parameter.value">
+
+          <h5 *ngIf="parameter.type === 'vf_location'" style="padding-left:10px;">id: {{parameter.name}}</h5>
+          <span *ngIf="parameter.type === 'vf_location'"> vf_location: </span>
+          <nz-select *ngIf="parameter.type === 'vf_location'" style="width: 165px;" [(ngModel)]="parameter.value" nzAllowClear >
+            <nz-option *ngFor="let vim of vimInfos" [nzValue]="vim" [nzLabel]="vim.name"></nz-option>
+          </nz-select>
+          <!-- <nz-select *ngIf="parameter.type === 'sdn_controller'" style="width: 165px;" [(ngModel)]="parameter.value" nzAllowClear >
+            <nz-option *ngFor="let control of sdnControllers" [nzValue]="control" [nzLabel]="control.name"></nz-option>
+          </nz-select> -->
+        </li>
+      </ul>
+
+      <h4>vnfs Inputs</h4>
+
+      <ul>
+        <li *ngFor="let vnf of nsTemplateParameters.vnfs;">
+          <h5 style="padding-left:10px;">id: {{vnf.vnf_id}}</h5>
+          <span> vf_location: </span>
+          <nz-select style="width: 165px;" [(ngModel)]="vnf.value" nzAllowClear >
+            <nz-option *ngFor="let vim of vimInfos" [nzValue]="vim" [nzLabel]="vim.name"></nz-option>
+          </nz-select>
+        </li>
+      </ul>
+
+    </div>
+    <button class="submit" nz-button [nzType]="'primary'" (click)="submit()"><span>Create</span></button>
+  </div>
+
+  <!-- 图 -->
+  <div class="chart fr">
+      Create Service
+      <div id="createChart">
+        <svg width="100%" height="100%">
+         
+          <image xlink:href="./assets/images/cloud-site.png"
+                  x="25%" y="30%"  width="50%"/> 
+
+        </svg>
+
+      </div>
+  </div>
+
+</div>
+
diff --git a/usecaseui-portal/src/app/components/e2e-creation/e2e-creation.component.less b/usecaseui-portal/src/app/components/e2e-creation/e2e-creation.component.less
new file mode 100644
index 00000000..b8c41877
--- /dev/null
+++ b/usecaseui-portal/src/app/components/e2e-creation/e2e-creation.component.less
@@ -0,0 +1,80 @@
+/*
+    Copyright (C) 2018 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.
+*/
+.title {
+    font: 700 18px/18px "思源黑体";
+    color: #4c5e70;
+    margin-bottom: 18px;
+}
+hr {
+    border: none;
+    height: 2px;
+    background-color: #dce1e7;
+    margin-bottom: 10px;
+}
+.model {
+    background-color: #fff;
+    height: 90%;
+    overflow-y: auto;
+    .back {
+        position: absolute;
+        top: 10px;
+        right: 20px;
+    }
+    .creation{
+        position: relative;
+        width: 60%;
+        height: 100%;
+        overflow-y: auto;
+        border-radius: 5px;
+        padding: 20px;
+        .baseparms {
+            h3 {
+                color: #3fa8eb;
+                font: 700 16px "Arial";
+            }
+            h4 {
+                font: 700 16px "Arial";
+            }
+            ul li {
+                // display: inline-block;
+                margin: 3px 0;
+                span {
+                    display: inline-block;
+                    width: 40%;
+                    font: 700 14px "Arial";
+                    vertical-align: middle;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                    text-align: right;
+                }
+                input {
+                    width: 165px;
+                }
+            }
+        }
+        .submit {
+            position: absolute;
+            top: 10px;
+            right: 20px;
+        }
+    }
+    .chart {
+        width: 40%;
+        padding: 10px;
+        height: 100%;
+        border-left: 10px solid #f3f3f3;
+    }
+}
diff --git a/usecaseui-portal/src/app/components/e2e-creation/e2e-creation.component.spec.ts b/usecaseui-portal/src/app/components/e2e-creation/e2e-creation.component.spec.ts
new file mode 100644
index 00000000..de00c43f
--- /dev/null
+++ b/usecaseui-portal/src/app/components/e2e-creation/e2e-creation.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { E2eCreationComponent } from './e2e-creation.component';
+
+describe('E2eCreationComponent', () => {
+  let component: E2eCreationComponent;
+  let fixture: ComponentFixture<E2eCreationComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ E2eCreationComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(E2eCreationComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
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
new file mode 100644
index 00000000..f478c699
--- /dev/null
+++ b/usecaseui-portal/src/app/components/e2e-creation/e2e-creation.component.ts
@@ -0,0 +1,212 @@
+/*
+    Copyright (C) 2018 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';
+
+@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.getTemParameters();
+    this.getVimInfo();
+    this.getSdnControllers();
+    console.log(this.createParams);
+  }
+
+  @Output() e2eCloseCreate = new EventEmitter();
+  @Output() nsCloseCreate = new EventEmitter();
+  @Input() createParams;
+
+
+  // e2e serviceTemplateParameters
+  templateParameters = {
+    invariantUUID: "",
+    uuid: "",
+    name: "",
+    type: "",
+    version: "",
+    description: "",
+    category: "",
+    subcategory: "",
+    customizationUuid: "",
+    inputs:[],
+    nestedTemplates:[]
+  };
+  // ns serviceTemplateParameters
+  nsTemplateParameters = {
+    inputs:{},
+    inputs2:[],
+    vnfs:[]
+  }
+  getTemParameters(){ //获取模板参数
+    let type = this.createParams.commonParams.templateType == "E2E Service" ? "e2e" : "ns";
+    this.myhttp.getTemplateParameters(type,this.createParams.template)
+    .subscribe((data)=>{
+      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"});
+        })
+      }else if(type == "ns"){
+        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})
+        }
+        console.log(this.nsTemplateParameters);
+      }
+
+
+    })
+  }
+  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: "",
+    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((item)=>{
+        this.service.parameters.requestInputs[item.name] = item.value == undefined ? item.defaultValue : item.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:{
+                vimId:input.value.id
+              }
+            }
+            nsService.parameters.locationConstraints.push(location);
+          }
+        })
+        this.service.parameters.resources.push(nsService);
+      })
+
+      this.e2eCloseCreate.emit(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.vnf_id,
+          locationConstraints: {
+            vimid: vnf.value.id,
+            accessinfo: {
+              tenant: ""
+            },
+            accessInfo: {
+              tenant: ""
+            }
+          }
+        }
+        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(); 
+  }
+
+}
diff --git a/usecaseui-portal/src/app/myhttp.service.ts b/usecaseui-portal/src/app/myhttp.service.ts
index 8b872e64..958bc741 100644
--- a/usecaseui-portal/src/app/myhttp.service.ts
+++ b/usecaseui-portal/src/app/myhttp.service.ts
@@ -21,15 +21,19 @@ export class MyhttpService {
   //   customers:this.baseUrl + "/customers.json?",
   //   serviceType:this.baseUrl + "/serviceTypes.json?*_*",
   //   servicesCategory:this.baseUrl + "/configuration_files/servicesCategory.json?",
-  //   serviceInstanceList:this.baseUrl + "/instanceTableData4.json?",
+  //   serviceInstanceList:this.baseUrl + "/instanceTableData.json?",
   //   serviceTemplates:this.baseUrl + "/serviceTemplates2.json?",
-  //   templateCategory:this.baseUrl + "/configuration_files/templateCategory.json?",
   //   templateParameters:this.baseUrl + "/*_*" + "ServiceTemplateParameters.json?",
+  //   vimInfo:this.baseUrl + "/vimInfo.json?",
+  //   sdnControllers:this.baseUrl + "/sdnControllers.json?",
   //   addressData: this.baseUrl + "/siteAddressData.json?",
-  //   createService:this.baseUrl + "/createService.json?",
+  //   createService:this.baseUrl + "/createService.json",
+  //   ns_createService: this.baseUrl + "/createNsService.json?",
+  //   ns_createService2: this.baseUrl + "/createNsService2.json",
   //   inputNamesTransform: this.baseUrl + "/configuration_files/inputNamesTranslate.json?",
   //   deleteService: this.baseUrl + "/deleteService.json?",
   //   progress:this.baseUrl + "/progress.json?",
+  //   nsProgress:this.baseUrl + "nsProgress.json?",
 
   //   allottedResource:this.baseUrl + "/allotted-resources2.json?",
   //   pnfDetail:this.baseUrl + "/pnfdetail-domain.json?",
@@ -54,13 +58,18 @@ export class MyhttpService {
     servicesCategory: "./assets/json/configuration_files/servicesCategory.json",
     serviceInstanceList:this.baseUrl + '/uui-sotn/getServiceInstanceList',
     serviceTemplates:this.baseUrl + "/uui-lcm/service-templates",
-    templateCategory: "./assets/json/configuration_files/templateCategory.json",
     templateParameters: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",
     inputNamesTransform: "./assets/json/configuration_files/inputNamesTranslate.json?",
     deleteService: this.baseUrl + "/uui-lcm/services/",
     progress:this.baseUrl + "/uui-lcm/services/" + "*_*" + "/operations/",
+    nsProgress:this.baseUrl + "/uui-lcm/jobs/getNsLcmJobStatus/"+ "*_*" + "?responseId=",
 
     allottedResource:this.baseUrl + "/uui-sotn/getAllottedResources",
     pnfDetail:this.baseUrl + "/uui-sotn/getPnfInfo/",
@@ -98,44 +107,11 @@ export class MyhttpService {
 
 
 
-
-
-  testObservable(){
-    let myObservable = new Observable((observer)=>{
-      observer.next(1);
-      observer.next((n)=>{
-        console.log(3+n);
-      })
-      setTimeout(()=>{
-        observer.next(66666)
-      },100)
-      observer.next(()=>{
-        setTimeout((n)=>{
-          console.log("9999---" + n);
-        },10)        
-      })
-      // observer.error(2);
-      // observer.complete();
-    });
-
-    myObservable.subscribe((e)=>{
-      if(typeof e == "function"){
-        e(5)
-      }
-      console.log(e);
-    },(err)=>{
-      console.log(err);
-    },()=>{
-      console.log(555);
-    })
-  }
-
   //---------------------------------------------------------------------------------
 
   // Get all customers
   getAllCustomers(){
     return this.http.get<any>(this.url.customers);
-    // return this.http.jsonp<Object[]>('http://127.0.0.1:5500/customers.json',"callback");// 
   }
 
   // Get relevant serviceType
@@ -144,9 +120,9 @@ export class MyhttpService {
     return this.http.get<any>(url);
   }
   // Get service classification information, local configuration file
-  getServicesCategory(){
-    return this.http.get<any>(this.url.servicesCategory);
-  }
+  // getServicesCategory(){
+  //   return this.http.get<any>(this.url.servicesCategory);
+  // }
   // list Tabular data
   getInstanceTableData(paramsObj){
     let params = new HttpParams({fromObject:paramsObj});
@@ -160,18 +136,27 @@ export class MyhttpService {
   // }
 
   // Get all template types
-  getAllServiceTemplates(){
+  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 classification information, local configuration file
-  getTemplateCategory(){
-    return this.http.get<any>(this.url.servicesCategory);
-  }
+
   //Get template input parameters
   getTemplateParameters(type,template){
-    let url = this.url.templateParameters.replace("*_*",type) + template.toscaModelURL;  //本地模拟
-    // let url = this.url.templateParameters.replace("*_*",template.uuid) + template.toscaModelURL;
+    // 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);
+    }
+    let url = this.url.templateParameters.replace("*_*",template.uuid) + template.toscaModelURL;
     return this.http.get<any>(url);
   }
   // siteAddress address
@@ -179,10 +164,25 @@ export class MyhttpService {
     return this.http.get<any>(this.url.addressData);
   }
 
+  getVimInfo() {
+    return this.http.get<any>(this.url.vimInfo);
+  };
+  getSdnControllers(){
+    return this.http.get<any>(this.url.sdnControllers);
+  }
+
   // Create interface
-  createInstance(requestBody){
-    return this.http.get<any>(this.url.createService);  //本地模拟
-    // return this.http.post<any>(this.url.createService,requestBody);
+  createInstance(requestBody,createParams){
+    // return this.http.get<any>(this.url.createService + createParams);  //Local simulation
+    return this.http.post<any>(this.url.createService,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_createService + params,requestBody);
   }
 
   // Input parameter name conversion
@@ -203,8 +203,8 @@ export class MyhttpService {
         'serviceType': obj.serviceType
       }
     };
-    return this.http.get<any>(this.url.deleteService);  //Local simulation
-    // return this.http.delete<any>(this.url.deleteService + obj.serviceInstanceId, httpOptions);
+    // return this.http.get<any>(this.url.deleteService);  //Local simulation
+    return this.http.delete<any>(this.url.deleteService + obj.serviceInstanceId, httpOptions);
   }
 
   // Query progress interface
@@ -212,6 +212,10 @@ export class MyhttpService {
     let url = this.url.progress.replace("*_*",obj.serviceId) + obj.operationId;
     return this.http.get<any>(url);
   }
+  getNsProgress(jobid,responseId){
+    let url = this.url.nsProgress.replace("*_*",jobid) + responseId;
+    return this.http.get<any>(url);
+  }
 
   // Get allotted-resource to get tp and pnf values
   getAllottedResource(obj){
diff --git a/usecaseui-portal/src/app/networkHttpservice.service1.ts b/usecaseui-portal/src/app/networkHttpservice.service1.ts
deleted file mode 100644
index edb4df7c..00000000
--- a/usecaseui-portal/src/app/networkHttpservice.service1.ts
+++ /dev/null
@@ -1,97 +0,0 @@
-import { Injectable } from '@angular/core';
-import { HttpClient, HttpHeaders, HttpParams, HttpResponse } from '@angular/common/http';
-
-
-@Injectable()
-export class networkHttpservice {
-
-  constructor(private http:HttpClient) { }
-
-  // baseUrl = "./assets/json/";//本地环境
-  // url={
-  //   "getNetworkD3Data":this.baseUrl + "netWorkD3Data.json",
-  //   "getLogicalLinksData":this.baseUrl + "LogicalLinksData.json",
-  //   "getPInterfacesData1":this.baseUrl + "netWorkD3Data.json",
-  //   "getPInterfacesData2":this.baseUrl + "p_interfaces1.json",
-  //   "createLink":this.baseUrl + "status.json",
-  //   "querySpecificLinkInfo":this.baseUrl + "specific_link _nfo.json",
-  //   "queryCloudUrl":this.baseUrl + "url.json",
-  //   "createNetwrok":this.baseUrl + "status.json",
-  //   "createPnf":this.baseUrl + "status.json",
-  //   "createTp":this.baseUrl + "status.json",
-  //   "createCloudLink":this.baseUrl + "status.json",
-  //   "createCloudUrl":this.baseUrl + "status.json",
-  //   "deleteLink":this.baseUrl + "status.json",
-  // };
-  // baseUrl = "http://10.73.242.244:8082/uui-sotn/";//线上环境
-  // baseUrl = "http://172.19.44.223/api/usecaseui-server/v1/uui-sotn/";//线上环境
-  baseUrl = "/api/usecaseui-server/v1/uui-sotn/";//线上环境
-  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/",
-    "createNetwrok":this.baseUrl + "createTopoNetwork/",
-    "createPnf":this.baseUrl + "createPnf/",
-    "createTp":this.baseUrl + "pnf/",
-    "createCloudLink":this.baseUrl + "createLink/",
-    "createCloudUrl":this.baseUrl + "createHostUrl/",
-    "deleteLink":this.baseUrl + "deleteLink/",
-  };
-  //d3数据
-  getNetworkD3Data(){
-    return this.http.get<any>(this.url["getNetworkD3Data"]);
-  }
-  //初始化连线 logical-links
-  getLogicalLinksData(){
-    return this.http.get<any>(this.url["getLogicalLinksData"]);
-  }
-  //查询指定的node对应的tp数据
-  getPInterfacesData1(paramsObj){
-    return this.http.get<any>(this.url['getPInterfacesData1']+paramsObj["pnfName"]);
-  }
-  getPInterfacesData2(paramsObj){
-    return this.http.get<any>(this.url["getPInterfacesData2"]+paramsObj["pnfName"]);
-  }
-  //创建连线接口
-  createLink(paramsObj){
-    return this.http.put<any>(this.url["createLink"]+paramsObj["link-name"],paramsObj);
-  }
-  //查询指定的单个连接线 接口
-  querySpecificLinkInfo(paramsObj){
-    return this.http.get<any>(this.url["querySpecificLinkInfo"]+paramsObj["link-name"]);
-  }
-  //查询 外部云host this.url地址 接口
-  queryCloudUrl(aaiId){
-    return this.http.get<any>(this.url["queryCloudUrl"]+aaiId);
-  }
-  //创建外部云newwork接口
-  createNetwrok(paramsObj){
-    return this.http.put<any>(this.url["createNetwrok"]+paramsObj["network-id"],paramsObj);
-  }
-  //创建外部云pnf接口
-  createPnf(paramsObj){
-    return this.http.put<any>(this.url["createPnf"]+paramsObj["pnf-name"],paramsObj);
-  }
-  //创建外部云Tp接口
-  createTp(paramsObj,cloudNodeName){
-    let str=cloudNodeName+"/p-interfaces/p-interface/"+paramsObj["interface-name"]+"/createTerminationPoint";
-    return this.http.put<any>(this.url["createTp"]+str,paramsObj);
-  }
-  //创建外部云link接口
-  createCloudLink(paramsObj){
-    return this.http.put<any>(this.url["createCloudLink"]+paramsObj["link-name"],paramsObj);
-  }
-  //创建外部云host url接口
-  createCloudUrl(paramsObj){
-    return this.http.put<any>(this.url["createCloudUrl"]+paramsObj["aai-id"],paramsObj);
-  }
-  //删除连线
-  deleteLink(paramsObj){
-    let str=paramsObj["logical-link"]+"/"+paramsObj["resource-version"];
-    return this.http.delete<any>((this.url["deleteLink"]+str));
-  }
-}
diff --git a/usecaseui-portal/src/app/services/services-list/services-list.component.css b/usecaseui-portal/src/app/services/services-list/services-list.component.css
index eaf8fddb..63426fd9 100644
--- a/usecaseui-portal/src/app/services/services-list/services-list.component.css
+++ b/usecaseui-portal/src/app/services/services-list/services-list.component.css
@@ -108,6 +108,31 @@ hr {
   font-size: 12px;
   color: #147dc2;
 }
+.list nz-table.table2 tr td {
+  padding: 10px 8px;
+}
+.list nz-table.table2 tr td span.action {
+  color: #3fa8eb;
+  cursor: pointer;
+  padding: 5px;
+}
+.list nz-table.table2 tr td span.cannotclick {
+  pointer-events: none;
+  color: #aaa;
+  opacity: 0.6;
+}
+.list nz-table.table2 tr td span.deleting {
+  color: red;
+  font-size: 12px;
+  display: block;
+  height: 12px;
+}
+.list nz-table.table2 tr td span.creating {
+  color: #3fa8eb;
+  font-size: 12px;
+  display: block;
+  height: 12px;
+}
 .detailComponent {
   position: absolute;
   left: 0;
diff --git a/usecaseui-portal/src/app/services/services-list/services-list.component.html b/usecaseui-portal/src/app/services/services-list/services-list.component.html
index e0866524..c18d294a 100644
--- a/usecaseui-portal/src/app/services/services-list/services-list.component.html
+++ b/usecaseui-portal/src/app/services/services-list/services-list.component.html
@@ -39,34 +39,40 @@
 
   <button class="create" nz-button [nzType]="'primary'" (click)="showModal()"><i class="anticon anticon-plus-circle-o"></i><span> Create </span></button>
   <nz-modal [(nzVisible)]="isVisible" nzTitle="Create" (nzOnCancel)="handleCancel()" (nzOnOk)="handleOk()">
-    <p>Content one</p>
-    <p>Content two</p>
-    <p>Content three</p>
-  </nz-modal>
-  <button class="create" nz-button [nzType]="'primary'" (click)="showModal2()"><i class="anticon anticon-plus-circle-o"></i><span> Create </span></button>
-  <nz-modal [(nzVisible)]="isVisible2" nzTitle="Create" (nzOnCancel)="handleCancel()" (nzOnOk)="handleOk2()">
     <span style="display:inline-block;width:70px;">Service: </span>
     <nz-select style="width: 165px;" [(ngModel)]="templateTypeSelected" nzAllowClear (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>
+      <nz-option nzValue="E2E Service" nzLabel="E2E Service"></nz-option>
+      <nz-option nzValue="Network Service" nzLabel="Network Service"></nz-option>
     </nz-select>
 
     <hr>
-    <span>SOTN VPN: </span>
-    <nz-select style="width: 165px;" [(ngModel)]="template1" nzAllowClear >
-      <nz-option *ngFor="let item of templates" [nzValue]="item" [nzLabel]="item.name"></nz-option>
-    </nz-select>
+    <div *ngIf="templateTypeSelected == 'SOTN'||templateTypeSelected == 'CCVPN'">
+      <span>SOTN VPN: </span>
+      <nz-select style="width: 165px;" [(ngModel)]="template1" nzAllowClear >
+        <nz-option *ngFor="let item of templates" [nzValue]="item" [nzLabel]="item.name"></nz-option>
+      </nz-select>
 
-    <span> SITE: </span>
-    <nz-select style="width: 165px;" [(ngModel)]="template2" nzAllowClear >
-      <nz-option *ngFor="let item of templates" [nzValue]="item" [nzLabel]="item.name"></nz-option>
-    </nz-select>
-    
-    <div *ngIf="templateTypeSelected == 'CCVPN'">
-      <br>
-      <span style="display:inline-block;width:70px;">SD-WAN: </span>
-      <nz-select style="width: 165px;" [(ngModel)]="template3" nzAllowClear >
+      <br><br>
+      <span style="display:inline-block;width:70px;"> SITE: </span>
+      <nz-select style="width: 165px;" [(ngModel)]="template2" nzAllowClear >
+        <nz-option *ngFor="let item of templates" [nzValue]="item" [nzLabel]="item.name"></nz-option>
+      </nz-select>
+      
+      <div *ngIf="templateTypeSelected == 'CCVPN'">
+        <br>
+        <span style="display:inline-block;width:70px;">SD-WAN: </span>
+        <nz-select style="width: 165px;" [(ngModel)]="template3" nzAllowClear >
+          <nz-option *ngFor="let item of templates" [nzValue]="item" [nzLabel]="item.name"></nz-option>
+        </nz-select>
+      </div>
+    </div>
+
+    <div *ngIf="templateTypeSelected == 'E2E Service'||templateTypeSelected == 'Network Service'">
+      <span style="display:inline-block;width:70px;">TEMPLATE: </span>
+      <nz-select style="width: 165px;" [(ngModel)]="template4" nzAllowClear >
         <nz-option *ngFor="let item of templates" [nzValue]="item" [nzLabel]="item.name"></nz-option>
       </nz-select>
     </div>
@@ -101,76 +107,40 @@
       <tbody>
         <ng-template ngFor let-data [ngForOf]="nzTable.data" let-i="index">
           <tr>
-            <td>{{i+1}}</td>
-            <td [nzShowExpand]="data.children[0]" [(nzExpand)]="data.expand"></td>
-            <td>{{data.serviceId}}</td>
-            <td>{{data.name}}</td>
-            <td>{{data.type}}</td>
+            <td>{{pageSize*(pageIndex-1) + i+1}}</td>
+            <td [nzShowExpand]="data.childServiceInstances[0]" [(nzExpand)]="data.expand"></td>
+            <td>{{data["service-instance-id"] || data.nsInstanceId}}</td>
+            <td>{{data["service-instance-name"] || data.nsName}}</td>
+            <td>{{data.serviceDomain}}</td>
             <td>
               <span [ngClass]="{'active':data.status=='Active','closed':data.status=='Closed','onboarding':data.status=='Onboarding',
-                    'updating':data.status=='Updating','deleting':data.status=='Deleting','creating':data.status=='Creating'}">{{data.status}}</span>
-              <nz-progress *ngIf="data.status!='Active' && data.status!='Closed'" [nzPercent]="data.progress"></nz-progress>
+                    'updating':data.status=='Updating','deleting':data.status=='Deleting','creating':data.status=='Creating'}">{{data.status || "Active"}}</span>
+              <nz-progress *ngIf="data.status == 'Creating' || data.status == 'Deleting' || data.status == 'Updating' " [nzPercent]="data.rate"></nz-progress>
+              <!-- <nz-progress *ngIf="item.sotnvpnSer.status=='creating' || item.sotnvpnSer.status=='deleting'" [nzPercent]="item.sotnvpnSer.rate"></nz-progress> -->
             </td>
             <td>
-              <i class="anticon anticon-setting" (click)="scaleService()"></i>
-              <i class="anticon anticon-cloud-upload-o" (click)="updataService()"></i>
-              <i class="anticon anticon-delete" (click)="deleteService()"></i>
+              <i *ngIf="data.serviceDomain=='E2E Service'||data.serviceDomain=='Network Service' " class="anticon anticon-setting" (click)="scaleService(data)"></i>
+              <!-- <i *ngIf="data.serviceDomain=='E2E Service'||data.serviceDomain=='Network Service' " class="anticon anticon-cloud-upload-o" (click)="updataService(data)"></i> -->
+              <i *ngIf="data.serviceDomain=='Network Service' " class="anticon anticon-pause" (click)="stopService(data)"></i>
+              <i *ngIf="data.serviceDomain=='Network Service' " class="anticon anticon-reload" (click)="restartService(data)"></i>
+              <i *ngIf="data.serviceDomain=='SOTN'||data.serviceDomain=='CCVPN' " class="anticon anticon-ellipsis" (click)="serviceDetail(data)"></i>
+              <i class="anticon anticon-delete" (click)="deleteService(data)"></i>
+              <!-- <span title="detail" class="action" [ngClass]="{'cannotclick':item.sotnvpnSer.status=='deleting'||item.sotnvpnSer.status=='creating'}" 
+              (click)="showDetail(item)"> <i class="anticon anticon-ellipsis"></i> </span>
+            <span title="delete" class="action" [ngClass]="{'cannotclick':item.sotnvpnSer.status=='deleting'||item.sotnvpnSer.status=='creating'}" 
+              (click)="deleteInstace(item)"> <i class="anticon anticon-delete"></i> </span> -->
             </td>
           </tr>
-          <tr class="childtr" [nzExpand]="data.expand" *ngFor="let item of data.children">
+          <tr class="childtr" [nzExpand]="data.expand" *ngFor="let item of data.childServiceInstances">
             <td></td>
             <td></td>
-            <td>{{item.serviceId}}</td>
-            <td>{{item.name}}</td>
-            <td colspan="3">{{item.type}}</td>
+            <td>{{data["service-instance-id"] || data.nsInstanceId}}</td>
+            <td>{{data["service-instance-name"] || data.nsName}}</td>
+            <td colspan="3">{{item.serviceDomain}}</td>
           </tr>
         </ng-template>
       </tbody>
     </nz-table>
-    <nz-table *ngIf="1"
-        #nzTable2 [nzData]="tableData2" 
-        nzShowSizeChanger
-        [nzFrontPagination]="true" 
-        [nzShowQuickJumper]="true" 
-        [nzPageSizeOptions]="[5,10,15,20]" 
-        [(nzPageSize)]="pageSize" 
-        [(nzPageIndex)]='pageIndex'
-        nzSize="middle"
-        [nzScroll]="{ y: '58vh' }">
-        <thead nzSingleSort>
-          <tr>
-            <th nzWidth="5%">NO.</th>
-            <th nzWidth="20%"> Instance ID </th>
-            <th nzWidth="20%">Instance Name</th>
-            <!-- <th nzWidth="10%">Type</th> -->
-            <th nzWidth="25%">Description</th>
-            <th nzWidth="15%">Status</th>
-            <th nzWidth="10%">Action</th>
-          </tr>
-        </thead>
-        <tbody>
-            <!-- <ng-template ngFor let-data [ngForOf]="nzTable2.data" let-i="index"> -->
-            <tr *ngFor="let item of nzTable2.data; let i = index; ">
-                <td>{{pageSize*(pageIndex-1) + i+1}}</td>
-                <td>{{item.sotnvpnSer['service-instance-id']}}</td>
-                <td>{{item.sotnvpnSer['service-instance-name']}}</td>
-                <!-- <td>{{item.type}}</td> -->
-                <td>{{item.sotnvpnSer.description}}</td>
-                <td>
-                    <span *ngIf="item.sotnvpnSer.status!='creating' && item.sotnvpnSer.status!='deleting'">{{item.sotnvpnSer.status}}</span>
-                    <span *ngIf="item.sotnvpnSer.status=='creating' || item.sotnvpnSer.status=='deleting'" [ngClass]="{'deleting':item.sotnvpnSer.status=='deleting','creating':item.sotnvpnSer.status=='creating'}">{{item.sotnvpnSer.status}}</span>
-                    <nz-progress *ngIf="item.sotnvpnSer.status=='creating' || item.sotnvpnSer.status=='deleting'" [nzPercent]="item.sotnvpnSer.rate"></nz-progress>
-                </td>
-                <td>
-                    <span title="detail" class="action" [ngClass]="{'cannotclick':item.sotnvpnSer.status=='deleting'||item.sotnvpnSer.status=='creating'}" 
-                      (click)="showDetail(item)"> <i class="anticon anticon-ellipsis"></i> </span>
-                    <span title="delete" class="action" [ngClass]="{'cannotclick':item.sotnvpnSer.status=='deleting'||item.sotnvpnSer.status=='creating'}" 
-                      (click)="deleteInstace(item)"> <i class="anticon anticon-delete"></i> </span>
-                </td>
-            </tr>
-            <!-- </ng-template> -->
-        </tbody>
-    </nz-table>
 </div>
 
 <div class="detailComponent" *ngIf="detailshow">
@@ -183,3 +153,10 @@
     (closeCreate)="closeCreate($event)">
   </app-ccvpn-creation>
 </div>
+<div class="createComponent" *ngIf="createshow2">
+  <app-e2e-creation
+    [createParams]="createData" 
+    (nsCloseCreate)="nsCloseCreate($event)" 
+    (e2eCloseCreate)="e2eCloseCreate($event)">
+  </app-e2e-creation>
+</div>
diff --git a/usecaseui-portal/src/app/services/services-list/services-list.component.less b/usecaseui-portal/src/app/services/services-list/services-list.component.less
index 7e8ff80e..8f83cc9d 100644
--- a/usecaseui-portal/src/app/services/services-list/services-list.component.less
+++ b/usecaseui-portal/src/app/services/services-list/services-list.component.less
@@ -1,3 +1,18 @@
+/*
+    Copyright (C) 2018 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.
+*/
 .title {
     font: 700 18px/18px "思源黑体";
     color: #4c5e70;
@@ -103,6 +118,32 @@ hr {
     }
 }
 
+.list nz-table.table2 tr td {
+    padding: 10px 8px;
+}
+.list nz-table.table2 tr td span.action {
+    color: #3fa8eb;
+    cursor: pointer;
+    padding: 5px;
+}
+.list nz-table.table2 tr td span.cannotclick {
+    pointer-events: none;
+    color: #aaa;
+    opacity: 0.6;
+}
+.list nz-table.table2 tr td span.deleting {
+    color: red;
+    font-size: 12px;
+    display: block;
+    height: 12px;
+}
+.list nz-table.table2 tr td span.creating {
+    color: #3fa8eb;
+    font-size: 12px;
+    display: block;
+    height: 12px;
+}
+
 .detailComponent {
     position: absolute;
     left: 0;
diff --git a/usecaseui-portal/src/app/services/services-list/services-list.component.ts b/usecaseui-portal/src/app/services/services-list/services-list.component.ts
index d893070d..9ea28d4b 100644
--- a/usecaseui-portal/src/app/services/services-list/services-list.component.ts
+++ b/usecaseui-portal/src/app/services/services-list/services-list.component.ts
@@ -1,3 +1,18 @@
+/*
+    Copyright (C) 2018 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, HostBinding } from '@angular/core';
 import { MyhttpService } from '../../myhttp.service';
 import { slideToRight } from '../../animates';
@@ -13,18 +28,18 @@ export class ServicesListComponent implements OnInit {
   @HostBinding('@routerAnimate') routerAnimateState;
   constructor(private myhttp: MyhttpService, private modalService: NzModalService) { }
 
+ 
   ngOnInit() {
     this.getallCustomers();
-    this.getTemplateSubTypes();
     this.inputNamests();
   }
-  // 筛选框（下拉框）customer servicetype
+  // customer servicetype
   customerList = [];
   customerSelected = {name:null,id:null};
   serviceTypeList = [];
-  serviceTypeSelected = {name:null,id:null};
+  serviceTypeSelected = {name:null};
 
-  // 获取所有customer
+  // 
   getallCustomers(){
     this.myhttp.getAllCustomers()
       .subscribe((data)=>{
@@ -50,108 +65,71 @@ export class ServicesListComponent implements OnInit {
     this.getTableData();
   }
 
-  // 模态框（对话框） create
+
+  // Create modal box 2 (dialog box) create -------------------------------
   isVisible = false;
   showModal(): void {
     this.isVisible = true;
-  }
-  handleOk(): void {
-    console.log('Button ok clicked!');
-    this.isVisible = false;
-  }
-  handleCancel(): void {
-    console.log('Button cancel clicked!');
-    this.isVisible = false;
-    this.isVisible2 = false;
-  }
-
-  // 创建模态框2（对话框） create -------------------------------
-  isVisible2 = false;
-  showModal2(): void {
-    this.isVisible2 = true;
-    this.templates1 = [];  //多次创建会push累积名字，从新置空
-    this.templates2 = [];
-    this.templates3 = [];
     this.getAlltemplates();
   }
-  // 服务
+  // 
   templateTypeSelected = "SOTN";
   choseTemplateType(){
-    // this.filterTemplates();//分类
+    this.getAlltemplates();
   }
-  // 模板
-  templates = []; templates1;templates2;templates3;
+  // 
+  templates = [];
     template1={name:null};
     template2={name:null};
     template3={name:null};
-  // 模板分类数据,创建、获取实例分类共用
-  templateSubTypes = {};  //子类，sotnvpn、site、sdwan
-  getTemplateSubTypes(){
-    this.myhttp.getServicesCategory()
-      .subscribe((data)=>{
-        this.templateSubTypes = data;
-      },(err)=>{
-        console.log("getTemplateTypes err")
-      })
-  }
+    template4={name:null};
 
-  getAlltemplates(){  //获取所有模板类型
-    this.myhttp.getAllServiceTemplates()
+  getAlltemplates(){  //
+    this.myhttp.getAllServiceTemplates(this.templateTypeSelected)
       .subscribe((data)=>{
         console.log(data)
         this.templates = data;
-        this.template1 = data[0];
-        this.template2 = data[1];
-        this.template3 = data[2];
-        // this.filterTemplates();//分类
+        if(this.templateTypeSelected=="Network Service"){
+          this.templates = data.map((item)=>{return {name:item.packageInfo.csarName,id:item.csarId,packageInfo:item.packageInfo}});
+        }
+        this.template1 = this.templates[0];
+        this.template2 = this.templates[1];
+        this.template3 = this.templates[2];
+        this.template4 = this.templates[0];
+        
       },(err)=>{
 
       })
   }
-  // filterTemplates(){ //模板类型分类，本地配置文件
-  //     this.templates1 = [];
-  //     this.templates2 = [];
-  //     this.templates3 = [];
-  //     this.templates.forEach((item)=>{
-  //       this.templateSubTypes[this.templateTypeSelected].sotnvpn.find((d)=>{
-  //         return d["model-invariant-id"] == item.uuid && d["model-version-id"] == item.invariantUUID 
-  //       })?this.templates1.push(item):null;
-  //       this.templateSubTypes[this.templateTypeSelected].site.find((d)=>{
-  //         return d["model-invariant-id"] == item.uuid && d["model-version-id"] == item.invariantUUID 
-  //       })?this.templates2.push(item):null;
-  //       if(this.templateTypeSelected=="CCVPN"){
-  //         this.templateSubTypes[this.templateTypeSelected].sdwan.find((d)=>{
-  //           return d["model-invariant-id"] == item.uuid && d["model-version-id"] == item.invariantUUID 
-  //         })?this.templates3.push(item):null;
-  //       }
-  //     })
-  //     this.template1 = this.templates1[0];
-  //     this.template2 = this.templates2[0];
-  //     if(this.templates3[0]){
-  //       this.template3 = this.templates3[0];
-  //     } 
-  // }
 
 
-  // 确定、取消
+
+  // 
   createshow = false;
+  createshow2 = false;
   createData:Object={};
-  handleOk2(): void {
+  handleOk(): void {
     console.log('Button ok clicked!');
-    this.isVisible2 = false;
-    let data1 = {commonParams:{customer:this.customerSelected, serviceType:this.serviceTypeSelected, templateType:"SOTN"},templates:{template1:this.template1,template2:this.template2}};
-    let data2 = {commonParams:{customer:this.customerSelected, serviceType:this.serviceTypeSelected, templateType:"CCVPN"},templates:{template1:this.template1,template2:this.template2,template3:this.template3}};
+    this.isVisible = false;
+
+    if(this.templateTypeSelected=="SOTN"||this.templateTypeSelected=="CCVPN"){
+      let data1 = {commonParams:{customer:this.customerSelected, serviceType:this.serviceTypeSelected, templateType:"SOTN"},templates:{template1:this.template1,template2:this.template2}};
+      let data2 = {commonParams:{customer:this.customerSelected, serviceType:this.serviceTypeSelected, templateType:"CCVPN"},templates:{template1:this.template1,template2:this.template2,template3:this.template3}};
+      this.createData = this.templateTypeSelected == "SOTN" ? data1 : data2;
+      this.createshow = true;
+    }else if(this.templateTypeSelected=="E2E Service"||this.templateTypeSelected=="Network Service"){
+      this.createData = {commonParams:{customer:this.customerSelected, serviceType:this.serviceTypeSelected, templateType:this.templateTypeSelected},template:this.template4};
+      this.createshow2 = true;
+    }
     
-    this.createData = this.templateTypeSelected == "SOTN" ? data1 : data2;
-    this.createshow = true;
   }
-  // handleCancel(): void {
-  //   console.log('Button cancel clicked!');
-  //   this.isVisible2 = false;
-  // }
+  handleCancel(): void {
+    console.log('Button cancel clicked!');
+    this.isVisible = false;
+  }
 
 
-  //表格数据
+  //tableData
   tableData = [];
   pageIndex = 1;
   pageSize = 10;
@@ -160,10 +138,10 @@ export class ServicesListComponent implements OnInit {
   sortName = null;
   sortValue = null;
   getTableData(){
-    // 查询参数: customer serviceType 当前页码，每页条数，排序方式
+    // params: customer serviceType pageIndex，pageSize，sortName
     let paramsObj = {
-      customer:this.customerSelected,
-      serviceType:this.serviceTypeSelected,
+      customer:this.customerSelected.id,
+      serviceType:this.serviceTypeSelected.name,
       pageIndex:this.pageIndex,
       pageSize:this.pageSize,
       serviceIdSort:this.sortValue
@@ -194,119 +172,54 @@ export class ServicesListComponent implements OnInit {
   updataService(){
     console.log("updataService!");
   }
-  deleteService(){
-    console.log("deleteService!");
-  }
-
-  //表格数据
-  tableData2 = [];
-  getTableData2(){
-    let params = {
-      customerId:this.customerSelected.id,
-      serviceType:this.serviceTypeSelected
-    }
-    this.myhttp.getInstanceTableData(params)
-      .subscribe((data)=>{
-        this.pageIndex = 1;
-        this.tableData2 = [];
-        console.log(data)
-        // data.results.forEach((item)=>{ 
-        //   item["sotnvpnSer"] = item["service-subscription"]["service-instances"]["service-instance"].find((d)=>{ 
-        //     return this.templateSubTypes["SOTN"].sotnvpn.find((m)=>{ 
-        //       return d["model-invariant-id"]==m["model-invariant-id"] && d["model-version-id"]==m["model-version-id"]
-        //     })?item["Type"]="SOTN":null || this.templateSubTypes["CCVPN"].sotnvpn.find((m)=>{ 
-        //       return d["model-invariant-id"]==m["model-invariant-id"] && d["model-version-id"]==m["model-version-id"]
-        //     })?item["Type"]="CCVPN":null
-        //   })
-
-        //   if(item["sotnvpnSer"]){
-        //     this.tableData2.push(item);
-        //   }
-        // })
-
-        //---------数据结构有问题，模拟只有一组数据情况---------//
-        data["sotnvpnSer"] = data["service-instance"].find((d)=>{ 
-          return this.templateSubTypes["SOTN"].sotnvpn.find((m)=>{ 
-            return d["model-invariant-id"]==m["model-invariant-id"] && d["model-version-id"]==m["model-version-id"]
-          })?d["Type"]="SOTN":null || this.templateSubTypes["CCVPN"].sotnvpn.find((m)=>{ 
-            return d["model-invariant-id"]==m["model-invariant-id"] && d["model-version-id"]==m["model-version-id"]
-          })?d["Type"]="CCVPN":null
-        })
-        let inputParams = JSON.parse(data["sotnvpnSer"]["input-parameters"]).service.parameters.requestInputs;
-        let descriptionName = Object.keys(inputParams).find((item)=>{ return item.endsWith("_description")});
-        data["sotnvpnSer"]["description"] = inputParams[descriptionName];
-        data["sotnvpnSer"]["status"] = "Active";
-        this.tableData2.push(data);
+  stopService(data){
 
-        console.log(this.tableData2)
-      },(err)=>{
-        console.log(err);
-      })
   }
+  restartService(data){
 
-  // 显示详情
+  }
+  // 
   detailshow = false;
   detailData:Object;
-  showDetail(service){
+  serviceDetail(service){
     service["siteSer"]=[];
     service["sdwanSer"]=[];
     service["customer"]=this.customerSelected;
     service["serviceType"] = this.serviceTypeSelected;
-    // service["service-subscription"]["service-instances"]["service-instance"].forEach((item)=>{
-    //   this.templateSubTypes[service.Type].site.find((d)=>{
-    //     return d["model-invariant-id"] == item["model-invariant-id"] && d["model-version-id"] == item["model-version-id"] 
-    //   })?service["siteSer"].push(item):null;
-    //   if(service.Type=="CCVPN"){
-    //     this.templateSubTypes[service.Type].sdwan.find((d)=>{
-    //       return d["model-invariant-id"] == item["model-invariant-id"] && d["model-version-id"] == item["model-version-id"] 
-    //     })?service["sdwanSer"].push(item):null;
-    //   }
-    // })
-    service["service-instance"].forEach((item)=>{
-      this.templateSubTypes[service.sotnvpnSer.Type].site.find((d)=>{
-        return d["model-invariant-id"] == item["model-invariant-id"] && d["model-version-id"] == item["model-version-id"] 
-      })?service["siteSer"].push(item):null;
-      if(service.sotnvpnSer.Type=="CCVPN"){
-        this.templateSubTypes[service.sotnvpnSer.Type].sdwan.find((d)=>{
-          return d["model-invariant-id"] == item["model-invariant-id"] && d["model-version-id"] == item["model-version-id"] 
-        })?service["sdwanSer"].push(item):null;
+
+    service.childServiceInstances.forEach((item)=>{
+      if(item.serviceDomain=="SITE"){
+        service.siteSer.push(item);
+      }else if(item.serviceDomain=="SDWAN"){
+        service.sdwanSer.push(item);
       }
     })
     this.detailshow = true;
     this.detailData = service;
     console.log(service);
   }
-  // 删除 确认模态框
-  deleteInstace(service){
-    // 创建确认框
+  // deleteService(){
+  //   console.log("deleteService!");
+  // }
+
+  
+  // 
+  deleteService(service){
     this.modalService.confirm({
       nzTitle     : 'Are you sure delete this instance?',
-      nzContent   : `Instance ID: <b class="deleteModelContent"> ${service.sotnvpnSer["service-instance-id"]}</b>`,
+      nzContent   : `Instance ID: <b class="deleteModelContent"> ${service["service-instance-id"]}</b>`,
       nzOkText    : 'Yes',
       nzOkType    : 'danger',
       nzOnOk      : () => {
         console.log(service);
-        let allprogress = {};  //所有进度值，以operationId为键
-        let querypros = [];  //所有查询
-        service.sotnvpnSer.rate = 0;
-        service.sotnvpnSer.status = "deleting";
-        // let deletePros = service["service-subscription"]["service-instances"]["service-instance"].map((item)=>{
-        //   let id = item["service-instance-id"];
-        //   return new Promise((res,rej)=>{
-        //     this.myhttp.deleteInstance(id)
-        //     .subscribe((data)=>{
-        //       let obj = {serviceId:id,operationId:data.operationId}
-        //       let updata = (prodata)=>{
-        //         allprogress[prodata.operationId] = prodata.progress;
-        //         let average = ((arr)=>{return eval(arr.join("+"))/arr.length})(Object.values(allprogress));
-        //         service.sotnvpnSer["rate"]=average;
-        //       }
-        //       querypros.push(this.queryProgress(obj,updata));
-        //       res();
-        //     })
-        //   })  
-        // })
-        let deletePros = service["service-instance"].map((item)=>{
+        let allprogress = {};  //
+        let querypros = [];  //
+        service.rate = 0;
+        service.status = "Deleting";
+
+        service["childServiceInstances"].push({"service-instance-id":service["service-instance-id"]})
+
+        let deletePros = service["childServiceInstances"].map((item)=>{
           let params = {
             globalSubscriberId:this.customerSelected.id,
             serviceType:this.serviceTypeSelected,
@@ -319,7 +232,7 @@ export class ServicesListComponent implements OnInit {
               let updata = (prodata)=>{
                 allprogress[prodata.operationId] = prodata.progress;
                 let average = ((arr)=>{return eval(arr.join("+"))/arr.length})(Object.values(allprogress));
-                service.sotnvpnSer["rate"]=average;
+                service["rate"]=average;
               }
               querypros.push(this.queryProgress(obj,updata));
               res();
@@ -330,11 +243,16 @@ export class ServicesListComponent implements OnInit {
         Promise.all(deletePros).then(()=>{
           Promise.all(querypros).then((data)=>{
             console.log(data);
-            service.sotnvpnSer.rate = 100;
-            service.sotnvpnSer.status = "deleted";
-            setTimeout(()=>{
-              this.getTableData();
-            },1000)
+            service.rate = 100;
+            service.status = "completed";
+            let hasUndone = this.tableData.some((item)=>{
+              return item.rate < 100;
+            })
+            if(!hasUndone){
+              setTimeout(()=>{
+                this.getTableData();
+              },1000)
+            }
           })
         })
 
@@ -344,35 +262,34 @@ export class ServicesListComponent implements OnInit {
     });
   }
 
-
+  //ccvpn sotn createservice
+  parentServiceInstanceId="";
   closeCreate(obj){
     if(!obj){
-      this.createshow = false; //关闭创建窗口
+      this.createshow = false; //close
       return false;
     }
-    this.createshow = false; //关闭创建窗口
+    this.createshow = false; 
     console.log(obj);
-    let newData; //主表格中新创建的服务数据
-    let stageNum = 0; //不同阶段进度，用于后续服务进度相加；
-    // --------------------------------------------------------------------------
-        // obj.groupbody.map((group)=>{  //所有创建
-        //   return this.createService(group)
-        // })
-        // obj.sitebody.map((group)=>{  //所有创建
-        //   console.log(group)
-        //   return this.createService(group)
-        // })
-    // -----------------------------------------------------------------------------
-    this.createService(obj.vpnbody).then((data)=>{
+    let newData; //Newly created service data for the main table
+    let stageNum = 0; //Different stages of progress, used to add up subsequent service progress;
+
+    let   createParams = "?customerId="+this.customerSelected.id + 
+                        "&serviceType="+this.serviceTypeSelected.name + 
+                        "&serviceDomain="+this.templateTypeSelected +
+                        "&parentServiceInstanceId=";
+    this.createService(obj.vpnbody,createParams).then((data)=>{
       console.log(data)
-      newData = {  //主表格中新创建的服务数据
+      this.parentServiceInstanceId = data["serviceId"]; //------------updata parentServiceInstanceId
+      newData = {  //
         'service-instance-id':data["serviceId"],
         'service-instance-name':obj.vpnbody.service.name,
-        description:obj.vpnbody.service.description,
-        status:"creating",
+        serviceDomain:this.templateTypeSelected,
+        childServiceInstances:[],
+        status:"Creating",
         rate:0,
       }
-      this.tableData2 = [{sotnvpnSer:newData},...this.tableData2];
+      this.tableData = [newData,...this.tableData];
       let updata = (prodata)=>{
         newData.rate = Math.floor(prodata.progress/3);   
       }
@@ -380,11 +297,17 @@ export class ServicesListComponent implements OnInit {
       return this.queryProgress(queryParams,updata);
     }).then((data)=>{
       console.log(data);
-      stageNum = newData.rate; //阶段进度值更新；
-      let allprogress = {};  //所有进度值，以operationId为键
-      let querypros = [];  //所有查询
-      let createPros = obj.groupbody.map((group)=>{  //所有创建
-        return this.createService(group).then((data)=>{
+      stageNum = newData.rate; //Phase progress value update;
+      let allprogress = {};  //
+      let querypros = [];  //All the query
+      // Additional parameters
+      let   createParams = "?customerId="+this.customerSelected.id + 
+                          "&serviceType="+this.serviceTypeSelected.name + 
+                          "&serviceDomain="+"SDWAN" +
+                          "&parentServiceInstanceId="+this.parentServiceInstanceId;
+
+      let createPros = obj.groupbody.map((group)=>{  //
+        return this.createService(group,createParams).then((data)=>{
           console.log(data);
           let updata = (prodata)=>{
             allprogress[prodata.operationId] = prodata.progress;
@@ -397,7 +320,7 @@ export class ServicesListComponent implements OnInit {
       })
 
       return new Promise((res)=>{
-        Promise.all(createPros).then(()=>{  //所有创建好之后querypros中查询进度才全都添加完毕
+        Promise.all(createPros).then(()=>{  //All queries in querypros are added only once created
           Promise.all(querypros).then((data)=>{
             console.log(data);
             res("site--begin");
@@ -406,11 +329,16 @@ export class ServicesListComponent implements OnInit {
       })
     }).then((data)=>{
       console.log(data);
-      stageNum = newData.rate; //阶段进度值更新；
+      stageNum = newData.rate; //Phase progress value update;
       let allprogress = {};
-      let querypros = [];  //所有查询
-      let createPros = obj.sitebody.map((group)=>{  //所有创建
-        return this.createService(group).then((data)=>{
+      let querypros = [];  //All the query
+      // Additional parameters
+      let createParams = "?customerId="+this.customerSelected.id + 
+                        "&serviceType="+this.serviceTypeSelected.name + 
+                        "&serviceDomain="+"SITE" +
+                        "&parentServiceInstanceId="+this.parentServiceInstanceId;
+      let createPros = obj.sitebody.map((group)=>{  
+        return this.createService(group,createParams).then((data)=>{
           console.log(data);
           let updata = (prodata)=>{
             allprogress[prodata.operationId] = prodata.progress;
@@ -422,23 +350,125 @@ export class ServicesListComponent implements OnInit {
         })
       })
       console.log(createPros);
-      Promise.all(createPros).then(()=>{  //所有创建好之后querypros中查询进度才全都添加完毕
+      Promise.all(createPros).then(()=>{  //
         Promise.all(querypros).then((data)=>{
           console.log(data);
           newData.rate = 100;
           newData.status = "completed";
-          setTimeout(()=>{
-            this.getTableData();
-          },1000)
+          let hasUndone = this.tableData.some((item)=>{
+            return item.rate < 100;
+          })
+          if(!hasUndone){
+            setTimeout(()=>{
+              this.getTableData();
+            },1000)
+          }
         })
       }) 
     })
 
   }
 
-  createService(params){
+  e2eCloseCreate(obj){
+    if(!obj){
+      this.createshow2 = false; //
+      return false;
+    }
+    this.createshow2 = false; //
+    console.log(obj);
+    let newData; //
+    let   createParams = "?customerId="+this.customerSelected.id + 
+                        "&serviceType="+this.serviceTypeSelected.name + 
+                        "&serviceDomain="+this.templateTypeSelected +
+                        "&parentServiceInstanceId=";
+    this.createService(obj,createParams).then((data)=>{
+      console.log(data);
+      newData = {  //
+        'service-instance-id':data["serviceId"],
+        'service-instance-name':obj.name,
+        serviceDomain:this.templateTypeSelected,
+        childServiceInstances:[],
+        status:"Creating",
+        rate:0,
+      }
+
+      this.tableData = [newData,...this.tableData];
+      let updata = (prodata)=>{
+        newData.rate = prodata.progress;
+      }
+      let queryParams = {serviceId:data["serviceId"],operationId:data["operationId"]};
+      return this.queryProgress(queryParams,updata);
+    }).then((data)=>{
+      console.log(data);
+      newData.rate = 100;
+      newData.status = "completed";
+      let hasUndone = this.tableData.some((item)=>{
+        return item.rate < 100;
+      })
+      if(!hasUndone){
+        setTimeout(()=>{
+          this.getTableData();
+        },1000)
+      }
+    })
+
+  }
+
+  nsCloseCreate(obj){
+    if(!obj){
+      this.createshow2 = false; //
+      return false;
+    }
+    this.createshow2 = false; //
+    console.log(obj);
+    let newData; //
+    // step1
+    this.myhttp.nsCreateInstance(obj.step1)
+    .subscribe((data)=>{
+      console.log(data);
+      newData = {  //
+        'service-instance-id':data.nsInstanceId,
+        'service-instance-name':obj.step1.nsName,
+        serviceDomain:this.templateTypeSelected,
+        childServiceInstances:[],
+        status:"Creating",
+        rate:0,
+      }
+      this.tableData = [newData,...this.tableData];
+      let createParams = "?ns_instance_id=" + data.nsInstanceId + 
+                        "&customerId="+this.customerSelected.id + 
+                        "&serviceType="+this.serviceTypeSelected.name + 
+                        "&serviceDomain="+"SITE" +
+                        "&parentServiceInstanceId="+this.parentServiceInstanceId;
+      // step2
+      this.createNsService(createParams,obj.step2).then((jobid)=>{
+
+        let updata = (prodata)=>{
+          newData.rate = prodata.responseDescriptor.progress;
+        }
+
+        return this.queryNsProgress(jobid,updata);
+      }).then((data)=>{
+        console.log(data);
+        newData.rate = 100;
+        newData.status = "completed";
+        let hasUndone = this.tableData.some((item)=>{
+          return item.rate < 100;
+        })
+        if(!hasUndone){
+          setTimeout(()=>{
+            this.getTableData();
+          },1000)
+        }
+      })
+
+
+    })
+  }
+
+  createService(requestBody,createParams){
     let mypromise = new Promise((res,rej)=>{
-      this.myhttp.createInstance(params)
+      this.myhttp.createInstance(requestBody,createParams)
         .subscribe((data)=>{
           
           res(data.service);
@@ -446,6 +476,15 @@ export class ServicesListComponent implements OnInit {
     })
     return mypromise;
   }
+  createNsService(id,obj){
+    let mypromise = new Promise((res,rej)=>{
+      this.myhttp.nsCreateInstance2(id,obj)
+        .subscribe((data)=>{
+          res(data.jobId);
+        })
+    })
+    return mypromise;
+  }
  
   queryProgress(obj,callback){
     let mypromise = new Promise((res,rej)=>{
@@ -497,9 +536,65 @@ export class ServicesListComponent implements OnInit {
     })
     return mypromise;
   }
+  queryNsProgress(jobid,callback){
+    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 requery = (responseId)=>{
+        this.myhttp.getNsProgress(jobid,responseId)
+          .subscribe((data)=>{
+            if(data.responseDescriptor.progress==undefined){
+              console.log(data);
+              setTimeout(()=>{
+                requery(data.responseDescriptor.responseId);
+              },5000)
+              return false;
+            }
+            if(data.responseDescriptor.progress < 100){
+              callback(data);
+              setTimeout(()=>{
+                requery(data.responseDescriptor.responseId);
+              },5000)
+            }else {
+              res(data);
+            }     
+          })
+        // setTimeout(()=>{
+        //   console.log(data.responseDescriptor.progress)
+        //   data.responseDescriptor.progress++;        
+        //   if(data.responseDescriptor.progress<100){
+        //     callback(data);
+        //     requery(data.responseDescriptor.responseId)
+        //   }else{
+        //     callback(data);
+        //     res(data)
+        //   }
+        // },100)
+      }
+      requery(0);
+    })
+    return mypromise;
+  }
 
 
-  // 名字转换参数匹配 --> 传给子组件用
+  //  --> 
   namesTranslate:Object;
   inputNamests(){
     this.myhttp.inputNamesTransform()