Add create model component

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

8 files changed, 357 insertions, 279 deletions

diff --git a/usecaseui-portal/src/app/app.module.ts b/usecaseui-portal/src/app/app.module.ts
index f591be4b..9aaa7ebf 100644
--- a/usecaseui-portal/src/app/app.module.ts
+++ b/usecaseui-portal/src/app/app.module.ts
@@ -74,6 +74,7 @@ import { FcapsComponent } from './views/fcaps/fcaps.component';
 import { TestComponent } from './test/test.component';
 import { TextService } from './core/services/text.service';
 import { TopCardComponent } from './views/services/services-list/top-card/top-card.component';
+import { CreateModelComponent } from './views/services/services-list/create-model/create-model.component';
 
 @NgModule({
   providers: [
@@ -114,7 +115,8 @@ import { TopCardComponent } from './views/services/services-list/top-card/top-ca
     PerformanceDetailsComponent,
     FcapsComponent,
     TestComponent,
-    TopCardComponent
+    TopCardComponent,
+    CreateModelComponent
   ],
   imports: [
     BrowserModule,
diff --git a/usecaseui-portal/src/app/views/services/services-list/create-model/create-model.component.html b/usecaseui-portal/src/app/views/services/services-list/create-model/create-model.component.html
new file mode 100644
index 00000000..aa2cb06a
--- /dev/null
+++ b/usecaseui-portal/src/app/views/services/services-list/create-model/create-model.component.html
@@ -0,0 +1,60 @@
+<nz-modal nzWidth="428" [(nzVisible)]="isVisible" nzTitle=" {{'i18nTextDefine_ServiceCreation' | translate}} "
+        (nzOnCancel)="handleCancel()"
+        (nzOnOk)="handleOk()" nzClassName="serviceCreationModel"
+        nzCancelText=" {{'i18nTextDefine_Cancel' | translate}} "
+        nzOkText=" {{'i18nTextDefine_modelOk' | translate}} ">
+        <div class="select-list">
+            <span style="display:inline-block;" class="label"> {{"i18nTextDefine_Customer" | translate}} : </span>
+            <nz-select style="width: 176px;float: right;" [(ngModel)]="currentCustomer.name" nzAllowClear
+                (ngModelChange)="customerChange()">
+                <nz-option *ngFor="let item of customerList" [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)]="currentServiceType.name" nzAllowClear>
+              <nz-option *ngFor="let item of serviceTypes" [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()">
+                <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>
+        </div>
+        <div class="select-list">
+            <span style="display:inline-block;width:70px;"> {{"i18nTextDefine_Template" | translate}} : </span>
+            <nz-select style="width: 176px;float: right;" [(ngModel)]="currentTemplate" nzAllowClear>
+                <nz-option *ngFor="let item of templates" [nzValue]="item" [nzLabel]="item.name"></nz-option>
+            </nz-select>
+        </div>
+        <div *ngIf="templateTypeSelected === 'E2E Service'">
+            <div class="select-list">
+                <span style="display:inline-block;width:70px;"> {{"i18nTextDefine_Orchestrator" | translate}} : </span>
+                <nz-select style="width: 176px;float: right;" [(ngModel)]="orchestratorSelected" nzAllowClear>
+                    <nz-option *ngFor="let item of orchestratorList" [nzValue]="item" [nzLabel]="item.name"></nz-option>
+                </nz-select>
+            </div>
+        </div>
+        <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>
+                <label class="label" style="font-size: 20px; color: rgb(60,79,140,0.5)">Sol005</label>
+            </div>
+        </div>
+        <div class="select-list" style="color: red;margin-left: 66px;" *ngIf="temParametersTips">
+            {{"i18nTextDefine_Templateparsingfailed" | translate}}
+        </div>
+        
+    </nz-modal>
+    <div class="loading" *ngIf="loadingAnimateShow">
+      <img src="assets/images/loading-animate2.gif" alt="loading">
+      <p>Please wating……</p>
+  </div>
+
diff --git a/usecaseui-portal/src/app/views/services/services-list/create-model/create-model.component.less b/usecaseui-portal/src/app/views/services/services-list/create-model/create-model.component.less
new file mode 100644
index 00000000..a42c4128
--- /dev/null
+++ b/usecaseui-portal/src/app/views/services/services-list/create-model/create-model.component.less
@@ -0,0 +1,43 @@
+select-list{

+  width: 320px;

+  height: 32px;

+  line-height: 32px;

+  margin: 35px auto;

+  .select-list>span{

+    text-align: right;

+    width: 110px!important;

+    line-height: 32px;

+  }

+}

+.loading{

+  width: 100%;

+  height: 100%;

+  position: fixed;

+  top: 0;

+  margin-top: -50px;

+  margin-left: -50px;

+  z-index: 1001;

+  text-align: center;

+  background: transparent;

+  p{

+      color: #0DA9E2;

+      text-align: center;

+      position: absolute;

+      width: 300px;

+      height: 30px;

+      line-height: 30px;

+      top: 71%;

+      left: 36%;

+      margin-top: -150px;

+      margin-left: -150px;

+  }

+  img{

+      width: 300px;

+      height: 300px;

+      position: absolute;

+      top: 50%;

+      left: 36%;

+      margin-top: -150px;

+      margin-left: -150px;

+  }

+}

diff --git a/usecaseui-portal/src/app/views/services/services-list/create-model/create-model.component.spec.ts b/usecaseui-portal/src/app/views/services/services-list/create-model/create-model.component.spec.ts
new file mode 100644
index 00000000..fd57b3a7
--- /dev/null
+++ b/usecaseui-portal/src/app/views/services/services-list/create-model/create-model.component.spec.ts
@@ -0,0 +1,26 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CreateModelComponent } from './create-model.component';
+
+describe('CreateModelComponent', () => {
+  let component: CreateModelComponent;
+  let fixture: ComponentFixture<CreateModelComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ CreateModelComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(CreateModelComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
+
diff --git a/usecaseui-portal/src/app/views/services/services-list/create-model/create-model.component.ts b/usecaseui-portal/src/app/views/services/services-list/create-model/create-model.component.ts
new file mode 100644
index 00000000..f7cce450
--- /dev/null
+++ b/usecaseui-portal/src/app/views/services/services-list/create-model/create-model.component.ts
@@ -0,0 +1,144 @@
+import { Component, OnInit, Input, Output, EventEmitter  } from '@angular/core';
+import { ServiceListService } from '../../../../core/services/serviceList.service';
+
+@Component({
+  selector: 'app-create-model',
+  templateUrl: './create-model.component.html',
+  styleUrls: ['./create-model.component.less'],
+})
+export class CreateModelComponent implements OnInit {
+  @Input()isVisible: boolean;
+  @Input()customerList;
+  @Input()serviceTypeList;
+  @Input()customerSelected;
+  @Input()serviceTypeSelected;
+  
+  @Output() cancel = new EventEmitter<boolean>();
+  @Output() createdModalShow = new EventEmitter<any>();
+
+  serviceTypes: any[];
+  currentCustomer: any;
+  currentServiceType: any; 
+  templateTypeSelected:string = "CCVPN";
+  templates: any[] = [];
+  currentTemplate: object = { name: null };
+  orchestratorList: any[] = [];
+  orchestratorSelected: object = { name: null, id: null };
+  isSol005Interface: boolean = false;
+  temParametersTips: boolean = false;
+  createData: Object = {};
+  loadingAnimateShow: boolean = false;
+
+  constructor( private http: ServiceListService) {}
+
+  ngOnInit() {
+    this.serviceTypes = this.serviceTypeList;
+    this.currentCustomer = JSON.parse(JSON.stringify(this.customerSelected));
+    this.currentServiceType = JSON.parse(JSON.stringify(this.serviceTypeSelected));
+    this.getAlltemplates();
+  }
+
+  getServiceType(): void{
+    this.http.getServiceTypes(this.currentCustomer)
+    .subscribe((data) => {
+      this.serviceTypes = data.map((item) => {
+        return { name: item["service-type"] }
+      });
+    })
+  } 
+  
+  getAlltemplates() {
+    this.http.getAllServiceTemplates(this.templateTypeSelected)
+      .subscribe((data) => {
+        this.templates = data;
+        if (this.templateTypeSelected == "Network Service") {
+          this.templates = data.filter((d) => {
+            return typeof d.packageInfo.csarName == "string";
+          }).map((item) => {
+            let cName = item.packageInfo.csarName.split("/").reverse()[0];
+            return { name: cName, id: item.csarId, packageInfo: item.packageInfo }
+          });
+        }
+        this.currentTemplate = this.templates[0];
+      }, (err) => {
+        console.log(err);
+      })
+  }
+
+  getallOrchestrators() {
+    this.http.getAllOrchestrators()
+      .subscribe((data) => {
+        if(data.length > 0){
+            this.orchestratorList = data.map((item) => {
+                return { name: item["name"], id: item["name"] }
+            });
+            this.orchestratorSelected = this.orchestratorList[0];
+        }
+    })
+  }
+
+  handleCancel(): void {
+    this.isVisible = false;
+    this.cancel.emit(false);
+    this.loadingAnimateShow = false;
+  }
+
+  customerChange(): void {
+    this.getServiceType();
+  }
+
+  choseTemplateType() {
+    if(this.templateTypeSelected === 'E2E Service'){
+      this.getallOrchestrators();
+    }
+    this.getAlltemplates();
+  }
+
+  handleOk(): void {
+    if (this.templateTypeSelected === "SOTN" || this.templateTypeSelected === "CCVPN") {
+        this.createData = {
+            commonParams: {
+              customer: this.currentCustomer,
+              serviceType: this.currentServiceType,
+              templateType: this.templateTypeSelected
+            },
+            template: this.currentTemplate
+        };
+    } else if (this.templateTypeSelected === "E2E Service" || this.templateTypeSelected === "Network Service") {
+        this.createData = {
+            commonParams: {
+                customer: this.currentCustomer,
+                serviceType: this.currentServiceType,
+                templateType: this.templateTypeSelected
+            },
+            template: this.currentTemplate,
+            orchestrator: this.orchestratorSelected,
+            isSol005Interface: this.isSol005Interface
+        };
+    }
+    this.getTemParameters();
+  }
+  
+  getTemParameters() {
+    let chosedtemplates = this.createData["template"];
+    let types = this.createData["commonParams"].templateType;
+    if (types == "E2E Service") {
+      types = "e2e";
+    } else if (types == "Network Service") {
+      types = "ns";
+    }
+    this.loadingAnimateShow = true;
+    this.http.getTemplateParameters(types, chosedtemplates)
+        .subscribe((data) => {
+          this.loadingAnimateShow = false;
+          if (data.status == "FAILED") {
+            this.temParametersTips = true;
+            this.isVisible = true;
+          } else {
+            this.cancel.emit(false);
+            this.temParametersTips = false;
+            this.createdModalShow.emit({templateType: this.templateTypeSelected, data, createData: this.createData})
+          }
+        })
+  }
+}
\ No newline at end of file
diff --git a/usecaseui-portal/src/app/views/services/services-list/services-list.component.html b/usecaseui-portal/src/app/views/services/services-list/services-list.component.html
index 59aeea2e..431228d8 100644
--- a/usecaseui-portal/src/app/views/services/services-list/services-list.component.html
+++ b/usecaseui-portal/src/app/views/services/services-list/services-list.component.html
@@ -14,7 +14,6 @@
     limitations under the License.
 -->
 <div class="action ant-tabs-bar">
-
     <span>
         <i class="icon">
             <img src="assets/images/customer.png" alt="">
@@ -51,67 +50,15 @@
         <i *ngIf="width>1200" class="anticon anticon-plus"></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}} ">
-        <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()">
-                <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>
-            </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()">
-                <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>
-        </div>
-
-        <div class="select-list">
-            <span style="display:inline-block;width:70px;"> {{"i18nTextDefine_Template" | translate}} : </span>
-            <nz-select style="width: 176px;float: right;" [(ngModel)]="template1" nzAllowClear>
-                <nz-option *ngFor="let item of templates" [nzValue]="item" [nzLabel]="item.name"></nz-option>
-            </nz-select>
-        </div>
-        <div *ngIf="templateTypeSelected == 'E2E Service'">
-            <div class="select-list">
-                <span style="display:inline-block;width:70px;"> {{"i18nTextDefine_Orchestrator" | translate}} : </span>
-                <nz-select style="width: 176px;float: right;" [(ngModel)]="orchestratorSelected" nzAllowClear>
-                    <nz-option *ngFor="let item of orchestratorList" [nzValue]="item" [nzLabel]="item.name"></nz-option>
-                </nz-select>
-            </div>
-        </div>
-        <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>
-                <label class="label" style="font-size: 20px; color: rgb(60,79,140,0.5)">Sol005</label>
-            </div>
-        </div>
-        <div class="select-list" style="color: red;margin-left: 66px;" *ngIf="temParametersTips">
-            {{"i18nTextDefine_Templateparsingfailed" | translate}}
-        </div>
-    </nz-modal>
+    <app-create-model *ngIf="isVisible" [isVisible]="isVisible" (cancel)="isVisible=$event" (createdModalShow)="createdModalShow($event)"
+        [customerList]="customerList" [serviceTypeList]="serviceTypeList" [customerSelected]="customerSelected" [serviceTypeSelected]="serviceTypeSelected">
+    </app-create-model>
+    
 </div>
 <nz-layout style=" padding: 20px 32px; ">
     <div class="top-num">
         <app-top-card
-            *ngFor="let item of serviceMunber"
+            *ngFor="let item of serviceNunber"
             [serviceDomain]="item.serviceDomain"
             [successNum]="item.Success"
             [failedNum]="item.failed"
@@ -733,7 +680,7 @@
     </div>
     <!--</div>-->
 </nz-layout>
-<div class="loading" *ngIf="loadingAnimateShow">
+<!-- <div class="loading" *ngIf="loadingAnimateShow">
     <img src="assets/images/loading-animate2.gif" alt="loading">
     <p>Please wating……</p>
-</div>
\ No newline at end of file
+</div> -->
\ No newline at end of file
diff --git a/usecaseui-portal/src/app/views/services/services-list/services-list.component.less b/usecaseui-portal/src/app/views/services/services-list/services-list.component.less
index f3dac6c9..dd26bcb7 100644
--- a/usecaseui-portal/src/app/views/services/services-list/services-list.component.less
+++ b/usecaseui-portal/src/app/views/services/services-list/services-list.component.less
@@ -356,18 +356,6 @@ nz-layout{
     border-radius:4px;
 }
 
-.select-list{
-    width: 320px;
-    height: 32px;
-    line-height: 32px;
-    margin: 35px auto;
-}
-.select-list>span{
-    text-align: right;
-    width: 110px!important;
-    line-height: 32px;
-}
-
 .listdisplay{
     display: none;
 }
\ No newline at end of file
diff --git a/usecaseui-portal/src/app/views/services/services-list/services-list.component.ts b/usecaseui-portal/src/app/views/services/services-list/services-list.component.ts
index b39c14e0..0fc46aae 100644
--- a/usecaseui-portal/src/app/views/services/services-list/services-list.component.ts
+++ b/usecaseui-portal/src/app/views/services/services-list/services-list.component.ts
@@ -65,7 +65,7 @@ export class ServicesListComponent implements OnInit {
     language = sessionStorage.getItem("DefaultLang");
     iconMore = false;
     loadingAnimateShow = false;
-    serviceMunber = [ // top: E2E/NS/CCVPN data
+    serviceNunber = [ // top: E2E/NS/CCVPN data
         {
             "serviceDomain": "E2E",
             "Success": 0,
@@ -114,59 +114,41 @@ export class ServicesListComponent implements OnInit {
         console.log(this.language, "this.language");
         this.myhttp.getAllCustomers()
             .subscribe((data) => {
-                this.customerList = data.map((item) => {
-                    return { name: item["subscriber-name"], id: item["global-customer-id"] }
-                });
-                if (this.customerList.length == 0) {
-                    console.log("customerList.length == 0", this.customerList);
-                    return false;
-                }
-                this.customerList2 = data.map((item) => {
-                    return { name: item["subscriber-name"], id: item["global-customer-id"] }
-                });
-                if (this.customerList2.length == 0) {
-                    return false;
+                this.customerList = data.map(item => ({ name: item["subscriber-name"], id: item["global-customer-id"] }) );
+                if(data.length !== 0){
+                    // this.customerList2 = data.map(item => ({ name: item["subscriber-name"], id: item["global-customer-id"] }) );
+                    this.customerSelected = this.customerList[0];
+                    this.choseCustomer();
                 }
-                this.customerSelected = this.customerList[0];
-                this.choseCustomer(this.customerSelected);
             })
     }
 
     getallOrchestrators() {
         this.myhttp.getAllOrchestrators()
             .subscribe((data) => {
-                this.orchestratorList = data.map((item) => {
-                    return { name: item["name"], id: item["name"] }
-                });
-                if (this.orchestratorList.length == 0) {
-                    console.log("orchestratorList.length == 0", this.orchestratorList);
-                    return false;
+                if(data.length > 0){
+                    this.orchestratorList = data.map((item) => {
+                        return { name: item["name"], id: item["name"] }
+                    });
+                    this.orchestratorSelected = this.orchestratorList[0];
                 }
-                this.orchestratorSelected = this.orchestratorList[0];
             })
     }
 
-    choseCustomer(item) {
-        this.customerSelected = item;
+    choseCustomer(item = this.customerSelected) {
+        if(this.customerSelected !== item) this.customerSelected = item;
         this.myhttp.getServiceTypes(this.customerSelected)
             .subscribe((data) => {
-                this.serviceTypeList = data.map((item) => {
-                    return { name: item["service-type"] }
-                });
-
-                if (this.serviceTypeList.length == 0) {
-                    console.log("serviceTypeList.length == 0", this.serviceTypeList);
-                    return false;
+                this.serviceTypeList = data.map( item => ({ name: item["service-type"] }));
+                if(data.length !== 0){
+                    this.serviceTypeSelected = this.serviceTypeList[0];
+                    this.choseServiceType();
                 }
-
-                this.serviceTypeSelected = this.serviceTypeList[0];
-
-                this.choseServiceType(this.serviceTypeSelected);
             })
     }
 
-    choseServiceType(item) {
-        this.serviceTypeSelected = item;
+    choseServiceType(item = this.serviceTypeSelected) {
+        if(this.serviceTypeSelected !== item) this.serviceTypeSelected = item;
         this.getTableData();
     }
 
@@ -174,131 +156,31 @@ export class ServicesListComponent implements OnInit {
     // Create modal box 2 (dialog box) create -------------------------------
     isVisible = false;
 
-    customerChange(): void {
-        this.getServiceType(this.customerSelected2);
-    }
 
-    getServiceType(customerSelected2) {
-        this.myhttp.getServiceTypes(customerSelected2)
-            .subscribe((data) => {
-                this.serviceTypeList2 = data.map((item) => {
-                    return { name: item["service-type"] }
-                });
-                if (this.serviceTypeList2.length == 0) {
-                    console.log("serviceTypeList.length == 0", this.serviceTypeList2);
-                    return false;
-                }
-                this.getAlltemplates();
-            })
-    }
 
-    serviceTypeChange(): void {
-        this.serviceTypeSelected2.name = this.serviceTypeSelectedName
-    }
 
     createModal(): void {
         this.isVisible = true;
-        this.getallOrchestrators();
-        this.customerSelected2 = this.customerSelected;
-        this.serviceTypeSelectedName = this.serviceTypeSelected.name;
-        this.serviceTypeSelected2 = Object.assign({}, this.serviceTypeSelected);
-        this.getServiceType(this.customerSelected2);
     }
 
-    choseTemplateType() {
-        this.getallOrchestrators();
-        this.getAlltemplates();
-    }
-
-    templates = [];
-    template1 = { name: null };
-
-    getAlltemplates() {
-        this.myhttp.getAllServiceTemplates(this.templateTypeSelected)
-            .subscribe((data) => {
-                this.templates = data;
-                if (this.templateTypeSelected == "Network Service") {
-                    this.templates = data.filter((d) => {
-                        return typeof d.packageInfo.csarName == "string";
-                    }).map((item) => {
-                        let cName = item.packageInfo.csarName.split("/").reverse()[0];
-                        return { name: cName, id: item.csarId, packageInfo: item.packageInfo }
-                    });
-                }
-                this.template1 = this.templates[0];
-            }, (err) => {
-                console.log(err);
-            })
-    }
-
-    createshow = false;
-    createshow2 = false;
-    listDisplay = false;
+    createshow: boolean = false;
+    createshow2: boolean = false;
+    listDisplay: boolean = false;
     createData: Object = {};
-
-    handleOk(): void {
-        if (this.templateTypeSelected == "SOTN" || this.templateTypeSelected == "CCVPN") {
-            this.createData = {
-                commonParams: {
-                    customer: this.customerSelected,
-                    serviceType: this.serviceTypeSelected2,
-                    templateType: this.templateTypeSelected
-                }, template: this.template1
-            };
-        } else if (this.templateTypeSelected == "E2E Service" || this.templateTypeSelected == "Network Service") {
-            this.createData = {
-                commonParams: {
-                    customer: this.customerSelected,
-                    serviceType: this.serviceTypeSelected2,
-                    templateType: this.templateTypeSelected
-                },
-                template: this.template1,
-                orchestrator: this.orchestratorSelected,
-                isSol005Interface: this.isSol005Interface
-            };
-        }
-        this.getTemParameters();
-    }
-
-    handleCancel(): void {
-        this.isVisible = false;
-        this.loadingAnimateShow = false;
-    }
-
-    temParametersTips = false;
     ccvpn_temParametersContent: any;
     e2e_ns_temParametersContent: any;
 
-    getTemParameters() {
-        let chosedtemplates = this.createData["template"];
-        let types = this.createData["commonParams"].templateType;
-        if (types == "E2E Service") {
-            types = "e2e";
-        } else if (types == "Network Service") {
-            types = "ns";
+    createdModalShow(obj: any): void{
+        this.createData = obj.createData;
+        console.log(obj.createData)
+        if (obj.templateType === "SOTN" || obj.templateType === "CCVPN") {
+            this.ccvpn_temParametersContent = obj.data;
+            this.createshow = true;
+        } else if (obj.templateType === "E2E Service" || obj.templateType === "Network Service") {
+            this.e2e_ns_temParametersContent = obj.data;
+            this.createshow2 = true;
         }
-        this.loadingAnimateShow = true;
-        this.myhttp.getTemplateParameters(types, chosedtemplates)
-            .subscribe((data) => {
-                this.loadingAnimateShow = false;
-                if (data.status == "FAILED") {
-                    this.temParametersTips = true;
-                    this.isVisible = true;
-                    console.log("Template parsing Failed");
-                } else {
-                    this.isVisible = false;
-                    this.temParametersTips = false;
-                    if (this.templateTypeSelected == "SOTN" || this.templateTypeSelected == "CCVPN") {
-                        this.ccvpn_temParametersContent = data;
-                        this.createshow = true;
-                        this.listDisplay = true;
-                    } else if (this.templateTypeSelected == "E2E Service" || this.templateTypeSelected == "Network Service") {
-                        this.e2e_ns_temParametersContent = data;
-                        this.createshow2 = true;
-                        this.listDisplay = true;
-                    }
-                }
-            })
+           this.listDisplay = true;
     }
 
     //tableData
@@ -326,7 +208,7 @@ export class ServicesListComponent implements OnInit {
                     }
 
                     item["iconMore"] = this.iconMore;
-                    if (item["serviceDomain"] == "Network Service") {
+                    if (item["serviceDomain"] === "Network Service") {
                         if (item["vnfInfo"]) {
                             item["childServiceInstances"] = item["vnfInfo"].map((vnf) => {
                                 vnf["serviceDomain"] = "vnf";
@@ -344,10 +226,10 @@ export class ServicesListComponent implements OnInit {
                                 };
                                 vnfInfo.vnfNsInstanceId = item["nsInstanceId"] || item["service-instance-id"];
                                 vnfInfo.vnfInstanceId = vnf["relationship-data"].find((vnfid) => {
-                                    return vnfid["relationship-key"] == "generic-vnf.vnf-id"
+                                    return vnfid["relationship-key"] === "generic-vnf.vnf-id"
                                 })["relationship-value"];
                                 vnfInfo.vnfInstanceName = vnf["related-to-property"].find((vnfname) => {
-                                    return vnfname["property-key"] == "generic-vnf.vnf-name"
+                                    return vnfname["property-key"] === "generic-vnf.vnf-name"
                                 })["property-value"];
                                 return vnfInfo;
                             })
@@ -357,32 +239,30 @@ export class ServicesListComponent implements OnInit {
                     }
 
                     //
-                    if (item["operationResult"] == "2001") { //operationResult==2001
+                    if (item["operationResult"] === "2001") { 
                         item["status"] = "Available";
                         item["tips"] = "Available";
                         item["statusClass"] = item["operationResult"];
                     }
                     // 2018.12.13
-                    else if (item["operationResult"] == "2002") { //operationResult==2002
-                        if (item["operationType"] == "1001" || item["operationType"] == "1002") {
+                    else if (item["operationResult"] === "2002") { 
+                        if (item["operationType"] === "1001" || item["operationType"] === "1002") {
                             // item["status"] = this.accordingState["operationResult"][item["operationResult"]];
                             item["status"] = this.listSortMasters["operationResults"].find((its) => {
-                                return its["sortCode"] == item["operationResult"] && its["language"] == this.language
+                                return its["sortCode"] === item["operationResult"] && its["language"] === this.language
                             })["sortValue"];
                             item["tips"] = "Unavailable";
                             item["statusClass"] = item["operationType"];
-                        } else if (item["operationType"] != "1001" && item["operationType"] != "1002") {
-                            // item["status"] = this.accordingState["operationResult"][item["operationResult"]];
+                        } else {
                             item["status"] = this.listSortMasters["operationResults"].find((its) => {
-                                return its["sortCode"] == item["operationResult"] && its["language"] == this.language
+                                return its["sortCode"] === item["operationResult"] && its["language"] === this.language
                             })["sortValue"];
                             item["tips"] = "Available";
                             item["statusClass"] = item["operationType"];
                         }
 
                     }
-                    else if (item["operationResult"] == "2003") { //operationResult==2003
-                        // item["status"] = this.accordingState["operationResult"][item["operationResult"]];
+                    else if (item["operationResult"] === "2003") { 
                         item["status"] = this.listSortMasters["operationResults"].find((its) => {
                             return its["sortCode"] == item["operationResult"] && its["language"] == this.language
                         })["sortValue"];
@@ -414,16 +294,11 @@ export class ServicesListComponent implements OnInit {
                             })
                         } else {
                             let updata = (prodata) => {
-                                item["rate"] = prodata.progress || item["rate"];
+                                item["rate"] = prodata.progress || 0;
+                                if(item["rate"] > 100) item["status"] = prodata.status;
                                 item["tips"] = this.listSortMasters["operationTypes"].find((its) => {
-                                    return its["sortCode"] == item["operationType"] && its["language"] == this.language
-                                })["sortValue"] + '\xa0\xa0\xa0' + prodata.progress + "%";
-                                if (item["rate"] > 100) {
-                                    item["status"] = prodata.status;
-                                    item["tips"] = this.listSortMasters["operationTypes"].find((its) => {
-                                        return its["sortCode"] == item["operationType"] && its["language"] == this.language
-                                    })["sortValue"] + '\xa0\xa0\xa0' + item["status"];
-                                }
+                                    return its["sortCode"] === item["operationType"] && its["language"] === this.language
+                                })["sortValue"] + '\xa0\xa0\xa0' + (item["rate"] > 100? item["status"] : prodata.progress + '%');
                             }
                             let obj = {
                                 serviceId: item["service-instance-id"],
@@ -443,32 +318,32 @@ export class ServicesListComponent implements OnInit {
                     }
                     return item;
                 })
-                this.tableData.map((item, index) => {
-                    if (item.serviceDomain == 'E2E Service') {
-                        if (item.operationResult == 2001) {
-                            this.serviceMunber[0]["Success"] += 1;
-                        } else if (item.operationResult == 2002) {
-                            this.serviceMunber[0]["failed"] += 1;
-                        } else if (item.operationResult == 2003) {
-                            this.serviceMunber[0]["InProgress"] += 1;
+                this.tableData.forEach( item => {
+                    if (item.serviceDomain === 'E2E Service') {
+                        if (item.operationResult === 2001) {
+                            this.serviceNunber[0]["Success"] += 1;
+                        } else if (item.operationResult === 2002) {
+                            this.serviceNunber[0]["failed"] += 1;
+                        } else if (item.operationResult === 2003) {
+                            this.serviceNunber[0]["InProgress"] += 1;
                         }
                     }
-                    else if (item.serviceDomain == 'Network Service') {
-                        if (item.operationResult == 2001) {
-                            this.serviceMunber[1]["Success"] += 1;
-                        } else if (item.operationResult == 2002) {
-                            this.serviceMunber[1]["failed"] += 1;
-                        } else if (item.operationResult == 2003) {
-                            this.serviceMunber[1]["InProgress"] += 1;
+                    else if (item.serviceDomain === 'Network Service') {
+                        if (item.operationResult === 2001) {
+                            this.serviceNunber[1]["Success"] += 1;
+                        } else if (item.operationResult === 2002) {
+                            this.serviceNunber[1]["failed"] += 1;
+                        } else if (item.operationResult === 2003) {
+                            this.serviceNunber[1]["InProgress"] += 1;
                         }
                     }
-                    else if (item.serviceDomain == 'CCVPN') {
-                        if (item.operationResult == 2001) {
-                            this.serviceMunber[2]["Success"] += 1;
-                        } else if (item.operationResult == 2002) {
-                            this.serviceMunber[2]["failed"] += 1;
-                        } else if (item.operationResult == 2003) {
-                            this.serviceMunber[2]["InProgress"] += 1;
+                    else if (item.serviceDomain === 'CCVPN') {
+                        if (item.operationResult === 2001) {
+                            this.serviceNunber[2]["Success"] += 1;
+                        } else if (item.operationResult === 2002) {
+                            this.serviceNunber[2]["failed"] += 1;
+                        } else if (item.operationResult === 2003) {
+                            this.serviceNunber[2]["InProgress"] += 1;
                         }
                     }
                 })
@@ -1298,32 +1173,26 @@ export class ServicesListComponent implements OnInit {
     }
 
     queryProgress(obj, callback) {
-        let mypromise = new Promise((res, rej) => {
+        return new Promise( res => {
             let operationTypeObj = {operationType:obj.operationType};
             let errorNums = 180;
              let requeryCcvpn = () => {
                 this.myhttp.getProgress(obj,operationTypeObj)
                     .subscribe((data) => {
-                        if (data.status == "FAILED") {
+                        if (data.status === "FAILED") {
                             callback({ progress: 255, status: "Failed" });
-                            return false;
-                        }
-                        if (data.operationStatus == null || data.operationStatus.progress == undefined) {
+                        }else if (data.operationStatus === null || data.operationStatus.progress === undefined) {
                             errorNums--;
-                            if (errorNums == 0) {
+                            if (errorNums === 0) {
                                 callback({ progress: 255, status: "time over" });
                                 return false;
                             }
                             this.progressCcvpnOutTimer = setTimeout(()=>{
                                 requeryCcvpn();
                             },10000);
-                            return false;
-                        }
-                        if (data.operationStatus.progress > 100) {
+                        }else if (data.operationStatus.progress > 100) {
                             callback({ progress: 255, status: "time over" });
-                            return false;
-                        }
-                        if (data.operationStatus.progress < 100) {
+                        }else if (data.operationStatus.progress < 100) {
                             callback(data.operationStatus);
                             this.progressingCcvpnTimer = setTimeout(()=>{
                                 requeryCcvpn();
@@ -1335,7 +1204,6 @@ export class ServicesListComponent implements OnInit {
             }
             requeryCcvpn();
         })
-        return mypromise;
     }
 
     queryNsProgress(jobid, id, callback, operationType) {