Fix instance instantiation for CCVPN

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

12 files changed, 91 insertions, 76 deletions

diff --git a/usecaseui-portal/src/app/ccvpn-creation/ccvpn-creation.component.css b/usecaseui-portal/src/app/ccvpn-creation/ccvpn-creation.component.css
index ce546cb8..23ea9d7a 100644
--- a/usecaseui-portal/src/app/ccvpn-creation/ccvpn-creation.component.css
+++ b/usecaseui-portal/src/app/ccvpn-creation/ccvpn-creation.component.css
@@ -38,18 +38,24 @@ hr {
     position: relative;
     display: inline-block;
 }
-.model .back {
+.model .back,.model .back:hover{
     position: absolute;
     top: 10px;
     right: 20px;
     display: inline-block;
     width: 35px;
     height: 35px;
-    background:#ffffff!important;
+    background:url("../../assets/images/Return-icon.png") no-repeat!important;
+    background-size: 100%!important;
     border-radius:4px;
     color: #D7D7D7;
+    cursor: pointer;
     /*border: 1px solid #ffffff;*/
 }
+.model .back:hover{
+    background: url("../../assets/images/Return-icon-active.png")!important;
+    background-size: 100%!important;
+}
 .top-title h3.title {
     height: 35px;
     width: 80%;
@@ -239,7 +245,7 @@ hr {
     border-radius:4px;
     border:1px solid #D7D7D7;
 }
-.sitemodel h3 button:hover,.model .back:hover,.sotnnpnmodel h3 button:hover{
+.sitemodel h3 button:hover,.sotnnpnmodel h3 button:hover{
     background:#ffffff;
     color: #0DA9E2;
     border:1px solid #0DA9E2;
diff --git a/usecaseui-portal/src/app/ccvpn-creation/ccvpn-creation.component.html b/usecaseui-portal/src/app/ccvpn-creation/ccvpn-creation.component.html
index 3409c8fa..486c11e8 100644
--- a/usecaseui-portal/src/app/ccvpn-creation/ccvpn-creation.component.html
+++ b/usecaseui-portal/src/app/ccvpn-creation/ccvpn-creation.component.html
@@ -22,9 +22,7 @@
         <div class="fl" style="width: 20%">
             <button class="submit" nz-button (click)="submit()"><span> {{"i18nTextDefine_Create" | translate}} </span>
             </button>
-            <button class="back" nz-button (click)="goback()">
-               <i class="anticon anticon-arrow-left" style="transform: scale(1.5)"></i>
-            </button>
+            <button class="back" nz-button (click)="goback()"></button>
         </div>
     </div>
     <!-- chart -->
diff --git a/usecaseui-portal/src/app/ccvpn-creation/ccvpn-creation.component.ts b/usecaseui-portal/src/app/ccvpn-creation/ccvpn-creation.component.ts
index b3db8906..f2f35221 100644
--- a/usecaseui-portal/src/app/ccvpn-creation/ccvpn-creation.component.ts
+++ b/usecaseui-portal/src/app/ccvpn-creation/ccvpn-creation.component.ts
@@ -27,14 +27,14 @@ import {el} from "@angular/platform-browser/testing/src/browser_util";
 export class CcvpnCreationComponent implements OnInit {
 
   constructor(private myhttp:MyhttpService) { }
+    @Input() createParams;
+    @Input() ccvpn_temParametersContent;
+    @Output() closeCreate = new EventEmitter();
 
   ngOnInit() {
-    this.getTemParameters();
+    this.getccvpnTemParameters(this.ccvpn_temParametersContent);
   }
 
-  @Input() createParams;
-  @Output() closeCreate = new EventEmitter();
-
   //tabBarStyle
   tabBarStyle = {
     "height": "58px",
@@ -77,59 +77,41 @@ export class CcvpnCreationComponent implements OnInit {
         return Object.keys(item);
     }
 
-    getTemParameters() { //Get template parameters
-        let chosedtemplates = this.createParams.template;
-        let types = this.createParams.commonParams.templateType;
+    getccvpnTemParameters(data) { //Get template parameters
         console.log(this.createParams);
-        console.log(chosedtemplates);  //Template id array
-        this.myhttp.getTemplateParameters(types, chosedtemplates)
-            .subscribe((data) => {
                 let inputs = data["inputs"];
-                let vnfs = data["vnfs"];
                 this.templateParameters.service = {
                     name: data.metadata.name,
                     description: data.metadata.description,
                     serviceInvariantUuid: data.metadata.invariantUUID,
                     serviceUuid: data.metadata.UUID
                 };
-                vnfs.map((item) => { //Add basic information about sotnvpn and site
-                   if( item["vnf_id"]=='sdwanvpnresource'){
-                       this.templateParameters["sotnvpn"]["info"]={resourceName: item["vnf_id"], min:item.properties["min_instances"],resourceInvariantUuid: item.metadata["invariantUUID"], resourceUuid: item.metadata["UUID"],resourceCustomizationUuid: item.metadata["customizationUUID"]}
-                   }
-                   if(item["vnf_id"]=='sdwansiteresource'){
-                       this.templateParameters["site"]["info"]={resourceName: item["vnf_id"], min:item.properties["min_instances"],resourceInvariantUuid: item.metadata["invariantUUID"], resourceUuid: item.metadata["UUID"],resourceCustomizationUuid: item.metadata["customizationUUID"]}
-                   }
-                });
-
                 //Screening separation sotnvpn data
-                inputs["sdwanvpnresource_list"].map((item,index) => {
+                inputs["vpnresourcelist"].map((item,index) => {
                     if(item["required"] !=undefined){
                         this.templateParameters["sotnvpn"]["sdwanvpnresource_list"].push(item);
                     }
-                    if (item["sdwansitelan_list"] != undefined && item["sdwansitelan_list"] instanceof Array === true) {
-                        this.templateParameters["sotnvpn"]["sdwansitelan_list"] = item["sdwansitelan_list"]
+                    if (item["sitelanlist"] != undefined && item["sitelanlist"] instanceof Array === true) {
+                        this.templateParameters["sotnvpn"]["sdwansitelan_list"] = item["sitelanlist"]
                     }
                 });
 
                 //Screening separation site data
-                inputs["sdwansiteresource_list"].map((item,index) => {
+                inputs["sitereourcelist"].map((item,index) => {
                     if(item["required"] !=undefined){
                         this.templateParameters["site"]["sdwansiteresource_list"].push(item);
                     }
-                    if (item["sdwandevice_list"] != undefined && item["sdwandevice_list"] instanceof Array === true) {
-                        this.templateParameters["site"]["sdwandevice_list"] = item["sdwandevice_list"]
+                    if (item["deviceList"] != undefined && item["deviceList"] instanceof Array === true) {
+                        this.templateParameters["site"]["sdwandevice_list"] = item["deviceList"]
                     }
-                    if (item["sdwansitewan_list"] != undefined && item["sdwansitewan_list"] instanceof Array === true) {
-                        this.templateParameters["site"]["sdwansitewan_list"] = item["sdwansitewan_list"]
+                    if (item["sitewanlist"] != undefined && item["sitewanlist"] instanceof Array === true) {
+                        this.templateParameters["site"]["sdwansitewan_list"] = item["sitewanlist"]
                     }
                 });
 
                 this.showTemParametersSotnVpn();
                 this.showTemParametersSite();
                 console.log(this.templateParameters)
-            }, (err) => {
-
-            });
     }
 
     //sotnVpn data, after combining the structure, rendering the template data to the page
diff --git a/usecaseui-portal/src/app/ccvpn-detail/ccvpn-detail.component.css b/usecaseui-portal/src/app/ccvpn-detail/ccvpn-detail.component.css
index 912157de..272e0b8f 100644
--- a/usecaseui-portal/src/app/ccvpn-detail/ccvpn-detail.component.css
+++ b/usecaseui-portal/src/app/ccvpn-detail/ccvpn-detail.component.css
@@ -39,16 +39,23 @@ hr {
     position: relative;
     display: inline-block;
 }
-.model .back {
+.model .back,.model .back:hover{
     position: absolute;
     top: 10px;
     right: 20px;
     display: inline-block;
     width: 35px;
     height: 35px;
-    background:#ffffff!important;
+    background:url("../../assets/images/Return-icon.png") no-repeat!important;
+    background-size: 100%!important;
     border-radius:4px;
     color: #D7D7D7;
+    cursor: pointer;
+    /*border: 1px solid #ffffff;*/
+}
+.model .back:hover{
+    background: url("../../assets/images/Return-icon-active.png")!important;
+    background-size: 100%!important;
 }
 .top-title h3.title {
     height: 35px;
@@ -241,7 +248,7 @@ hr {
     border-radius:4px;
     border:1px solid #D7D7D7;
 }
-.sitemodel h3 button:hover,.model .back:hover,.sotnnpnmodel h3 button:hover{
+.sitemodel h3 button:hover,.sotnnpnmodel h3 button:hover{
     background:#ffffff;
     color: #0DA9E2;
     border:1px solid #0DA9E2;
diff --git a/usecaseui-portal/src/app/ccvpn-detail/ccvpn-detail.component.html b/usecaseui-portal/src/app/ccvpn-detail/ccvpn-detail.component.html
index 5e630767..96d5dcb5 100644
--- a/usecaseui-portal/src/app/ccvpn-detail/ccvpn-detail.component.html
+++ b/usecaseui-portal/src/app/ccvpn-detail/ccvpn-detail.component.html
@@ -19,9 +19,7 @@
   <div class="top-title">
     <h3 class="title fl">{{detailParams['service-instance-name']}} Instance Detail</h3>
     <div class="fl" style="width: 20%">
-      <button class="back" nz-button (click)="goback()">
-        <i class="anticon anticon-arrow-left" style="transform: scale(1.5)"></i>
-      </button>
+      <button class="back" nz-button (click)="goback()"></button>
     </div>
   </div>
   <!-- ͼ -->
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
index b2ec4401..5e9f8158 100644
--- a/usecaseui-portal/src/app/components/e2e-creation/e2e-creation.component.html
+++ b/usecaseui-portal/src/app/components/e2e-creation/e2e-creation.component.html
@@ -20,9 +20,7 @@
         <h3 class="title fl">{{createParams.commonParams.templateType}}  {{"i18nTextDefine_InstanceCreation" | translate}} </h3>
         <div class="fl" style="width: 20%">
             <button class="submit" nz-button (click)="submit()"><span> {{"i18nTextDefine_Create" | translate}} </span></button>
-            <button class="back" nz-button (click)="goback()">
-                <i class="anticon anticon-arrow-left" style="transform: scale(1.5)"></i>
-            </button>
+            <button class="back" nz-button (click)="goback()"></button>
         </div>
     </div>
     <div class="e2ecreate-content">
@@ -63,7 +61,7 @@
                 <h3>{{template.name}}</h3>
                 <ul>
                     <li *ngFor="let input of template.inputs; let i = index;">
-                        <span *ngIf="input.type !== 'vf_location' && input.type !== 'sdn_controller'" title=" {{input.name}}"> {{input.name}}: </span>
+                        <span *ngIf="input.type !== 'vf_location' && input.type !== 'sdn_controller'" title="{{input.name}}"> {{input.name}}: </span>
                         <input *ngIf="input.type !== 'vf_location' && input.type !== 'sdn_controller'" nz-input
                                [(ngModel)]="input.value">
 
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
index 1900f7d2..22c12fb7 100644
--- a/usecaseui-portal/src/app/components/e2e-creation/e2e-creation.component.less
+++ b/usecaseui-portal/src/app/components/e2e-creation/e2e-creation.component.less
@@ -52,21 +52,23 @@ hr {
         background:linear-gradient(90deg, rgb(103, 207, 246) 0%, rgb(69, 175, 255) 100%) !important;
         border: none;
     }
-    .back {
+    .back,.back:hover{
         position: absolute;
         top: 10px;
         right: 20px;
         display: inline-block;
         width: 35px;
         height: 35px;
-        background:#ffffff!important;
+        background:url("../../../assets/images/Return-icon.png") no-repeat!important;
+        background-size: 100%!important;
         border-radius:4px;
         color: #D7D7D7;
+        cursor: pointer;
+        /*border: 1px solid #ffffff;*/
     }
     .back:hover{
-        background:#ffffff;
-        color: #3F9CFF;
-        border:1px solid #3F9CFF;
+        background: url("../../../assets/images/Return-icon-active.png")!important;
+        background-size: 100%!important;
     }
     .top-title h3.title {
         height: 35px;
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
index d5e1a3a0..dc8566e0 100644
--- a/usecaseui-portal/src/app/components/e2e-creation/e2e-creation.component.ts
+++ b/usecaseui-portal/src/app/components/e2e-creation/e2e-creation.component.ts
@@ -27,7 +27,7 @@ export class E2eCreationComponent implements OnInit {
   constructor( private myhttp:MyhttpService ) { }
 
   ngOnInit() {
-    this.getTemParameters();
+        this.gete2eTemParameters(this.e2e_ns_temParametersContent);
     this.getVimInfo();
     this.getSdnControllers();
     console.log(this.createParams);
@@ -36,6 +36,7 @@ export class E2eCreationComponent implements OnInit {
   @Output() e2eCloseCreate = new EventEmitter();
   @Output() nsCloseCreate = new EventEmitter();
   @Input() createParams;
+    @Input() e2e_ns_temParametersContent;
 
 
   // e2e serviceTemplateParameters
@@ -75,12 +76,10 @@ export class E2eCreationComponent implements OnInit {
         '2': './assets/images/create-ns.png',
         '3': './assets/images/create-vnf.png',
     };
-  getTemParameters(){ //Get template parameters
+    gete2eTemParameters(data) { //Get template parameters
     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);
+        console.log(this.createParams);
+        console.log(data);
       if(type == "e2e"){
         this.templateParameters = data;
         this.templateParameters.nestedTemplates.forEach((item)=>{
@@ -124,7 +123,6 @@ export class E2eCreationComponent implements OnInit {
 
       this.drawImage(type)
 
-    })
   }
   vimInfos=[];
   getVimInfo() {
diff --git a/usecaseui-portal/src/app/components/e2e-detail/e2e-detail.component.html b/usecaseui-portal/src/app/components/e2e-detail/e2e-detail.component.html
index dec6f2d3..29ac4194 100644
--- a/usecaseui-portal/src/app/components/e2e-detail/e2e-detail.component.html
+++ b/usecaseui-portal/src/app/components/e2e-detail/e2e-detail.component.html
@@ -19,9 +19,7 @@
   <div class="top-title">
     <h3 class="title fl">{{serviceInstanceName}} Instance Detail</h3>
     <div class="fl" style="width: 20%">
-      <button class="back" nz-button (click)="goback()">
-        <i class="anticon anticon-arrow-left" style="transform: scale(1.5)"></i>
-      </button>
+      <button class="back" nz-button (click)="goback()"></button>
     </div>
   </div>
   <div class="detaildata fl">
diff --git a/usecaseui-portal/src/app/components/e2e-detail/e2e-detail.component.less b/usecaseui-portal/src/app/components/e2e-detail/e2e-detail.component.less
index fd306c5b..bba5160f 100644
--- a/usecaseui-portal/src/app/components/e2e-detail/e2e-detail.component.less
+++ b/usecaseui-portal/src/app/components/e2e-detail/e2e-detail.component.less
@@ -38,21 +38,23 @@ hr {
     position: relative;
     display: inline-block;
   }
-  .back {
+  .back,.back:hover{
     position: absolute;
     top: 10px;
     right: 20px;
     display: inline-block;
     width: 35px;
     height: 35px;
-    background:#ffffff!important;
+    background:url("../../../assets/images/Return-icon.png") no-repeat!important;
+    background-size: 100%!important;
     border-radius:4px;
     color: #D7D7D7;
+    cursor: pointer;
+    /*border: 1px solid #ffffff;*/
   }
   .back:hover{
-    background:#ffffff;
-    color: #3F9CFF;
-    border:1px solid #3F9CFF;
+    background: url("../../../assets/images/Return-icon-active.png")!important;
+    background-size: 100%!important;
   }
   .top-title h3.title {
     height: 35px;
@@ -132,10 +134,7 @@ hr {
     height: 95%;
     box-shadow: 0px 10px 35px 10px rgba(222, 222, 222, 0.5);
     margin-right: 40px;
-    //background: url("../../../assets/images/ccvpn-createbanner2.png") no-repeat -45px -10px;
-    //background-size: 110% 110%;
     background:linear-gradient(180deg,rgba(183, 230, 247, 1) 0%,rgba(214, 240, 254, 1) 100%);
-    //background-color: rgba(188, 231, 248, 1);
     border-radius: 4px;
     #createChart{
       height: 100%;
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 b68210ae..55551402 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
@@ -86,6 +86,7 @@
                 <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>
 <nz-layout style=" padding: 20px 32px; ">
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 90e996a9..1cf8cb98 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
@@ -216,18 +216,13 @@ export class ServicesListComponent implements OnInit {
   createData:Object={};
   handleOk(): void {
     // console.log('Button ok clicked!');
-    this.isVisible = false;
 
     if(this.templateTypeSelected=="SOTN"||this.templateTypeSelected=="CCVPN"){
      this.createData = {commonParams:{customer:this.customerSelected, serviceType:this.serviceTypeSelected2, templateType:this.templateTypeSelected},template:this.template1};
-      this.createshow = true;
-      this.listDisplay = true;
     }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.createshow2 = true;
-            this.listDisplay = true;
     }
-
+    this.getTemParameters();
   }
   handleCancel(): void {
     // console.log('Button cancel clicked!');
@@ -235,6 +230,39 @@ export class ServicesListComponent implements OnInit {
   }
 
 
+    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";
+        }
+        this.myhttp.getTemplateParameters(types, chosedtemplates)
+            .subscribe((data) => {
+                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;
+                    }
+                }
+            })
+    }
+
   //tableData
   tableData = [];
   pageIndex = 1;