Fix instance instantiation for CCVPN

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

3 files changed, 42 insertions, 72 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 99095ec3..5d65e550 100644
--- a/usecaseui-portal/src/app/ccvpn-creation/ccvpn-creation.component.css
+++ b/usecaseui-portal/src/app/ccvpn-creation/ccvpn-creation.component.css
@@ -94,20 +94,32 @@ hr {
     color: #000;
 }
 /* SOTN VPN */
-.model .creation .sotnvpn .service-title{
-    margin-bottom: 35px;
+.model .creation .service-title{
+    margin:60px 50px;
 }
-.model .creation .sotnvpn .service-title .lable {
+.model .creation .service-title .info-inputs{
+    width:400px;
+    height: 42px;
     display: inline-block;
-    width: 90px;
+}
+.model .creation .service-title span{
+    height: 42px;
+    line-height: 42px;
+    vertical-align: middle;
+}
+.model .creation .service-title .lable{
+    display: inline-block;
+    width: 100px;
     font: 700 14px "Arial";
     color: #3C4F8C;
+    height: 42px;
+    line-height: 42px;
     vertical-align: middle;
     margin-left: 5px;
 }
-.model .creation .sotnvpn .service-title  input {
-    width: 234px;
-    height: 40px;
+.model .creation .service-title  input {
+    width: 230px;
+    height: 42px;
     border-radius:4px;
     outline: none;
     margin-right: 50px;
@@ -177,7 +189,7 @@ hr {
 .model .sitemodel .inputs input,.model .sitemodel .inputs nz-select {
     width: 186px;
     float: right;
-    margin-right: 25px;
+    margin-right: 60px;
 }
 .model .sotnnpnmodel .inputs input{
     width: 186px;
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 8aa7bd61..3ae5af27 100644
--- a/usecaseui-portal/src/app/ccvpn-creation/ccvpn-creation.component.html
+++ b/usecaseui-portal/src/app/ccvpn-creation/ccvpn-creation.component.html
@@ -42,14 +42,16 @@
     </div>
     <div class="creation">
         <nz-tabset [nzTabPosition]="'top'" [nzShowPagination]=false [nzTabBarGutter]="'2'" [nzTabBarStyle]=tabBarStyle>
-            <nz-tab nzTitle="sdwanvpnresource_list">
+            <nz-tab nzTitle="Service Info">
+                <div class="service-title" style="clear: both">
+                    <span style="color: red;">*</span><span class="lable" style="width: 60px">name:</span>
+                    <input nz-input [(ngModel)]="this.templateParameters.service['name']" required="required">
+                    <span style="color: red;">*</span><span class="lable">description:</span>
+                    <input nz-input [(ngModel)]="this.templateParameters.service['description']">
+                </div>
+            </nz-tab>
+            <nz-tab nzTitle="Sdwanvpnresource List">
                 <div class="sotnvpn clearfix">
-                    <div class="service-title" style="clear: both">
-                        <span style="color: red;">*</span><span class="lable" style="width: 50px">name:</span>
-                        <input nz-input [(ngModel)]="this.templateParameters.service['name']" required="required">
-                        <span style="color: red;">*</span><span class="lable">description:</span>
-                        <input nz-input [(ngModel)]="this.templateParameters.service['description']">
-                    </div>
                     <div style="clear: both;height: 10px">
                         <h3 style="float: left;color: #3C4F8C">sdwanVPN List</h3>
                         <button nz-button (click)="addSotnvpn()" class="addListBtn"
@@ -86,7 +88,7 @@
                     </nz-table>
                 </div>
             </nz-tab>
-            <nz-tab nzTitle="sdwansiteresource_list">
+            <nz-tab nzTitle="Sdwansiteresource List">
                 <div class="site">
                     <div>
                         <h3 style="float: left;color: #3C4F8C">Site List</h3>
@@ -134,7 +136,7 @@
     </div>
     <!-- sotnVpnmodel -->
     <div class="sotnnpnmodel" *ngIf="sotnVpnModelShow">
-        <h3>sdwanvpnresource_list</h3>
+        <h3>Base</h3>
         <div class="inputs">
             <ul>
                 <li *ngFor="let item of this.templateParameters.sotnvpn.sdwanvpnresource_list">
@@ -144,7 +146,7 @@
             </ul>
         </div>
         <div>
-            <h3>sdwansitelan_list</h3>
+            <h3>Sdwansitelan List</h3>
             <div>
                 <div style="width: 100%;text-align: right">
                     <button nz-button (click)="addSotnSdwansitelan()" class="addListBtn"><i class="anticon anticon-plus"
@@ -191,7 +193,7 @@
     </div>
     <!-- sitemodel -->
     <div class="sitemodel" *ngIf="siteModelShow">
-        <h3>sdwansiteresource_list</h3>
+        <h3>Base</h3>
         <div class="inputs">
             <ul>
                 <li *ngFor="let item of this.templateParameters.site.sdwansiteresource_list">
@@ -201,7 +203,7 @@
             </ul>
         </div>
         <div>
-            <h3>sdwandevice_list</h3>
+            <h3>Sdwandevice</h3>
             <div class="inputs">
                 <ul>
                     <li *ngFor="let item of this.templateParameters.site.sdwandevice_list">
@@ -210,7 +212,7 @@
                                required="{{item.required==true ? 'required':null}}"></li>
                 </ul>
             </div>
-            <h3>sdwansitewan_list</h3>
+            <h3>Sdwansitewan List</h3>
             <div>
                 <div style="width: 100%;text-align: right">
                     <button nz-button (click)="addSiteWan()" class="addListBtn"><i class="anticon anticon-plus"
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 063d609a..0200de85 100644
--- a/usecaseui-portal/src/app/ccvpn-creation/ccvpn-creation.component.ts
+++ b/usecaseui-portal/src/app/ccvpn-creation/ccvpn-creation.component.ts
@@ -38,7 +38,7 @@ export class CcvpnCreationComponent implements OnInit {
   //tabBarStyle
   tabBarStyle = {
     "height": "58px",
-        "width": "460px",
+        "width": "694px",
     "box-shadow": "none",
     "margin": "0",
     "border-radius": "4px 4px 0px 0px"
@@ -591,58 +591,14 @@ export class CcvpnCreationComponent implements OnInit {
                 locationConstraints: [
                 ],
             },
+            resources:[],
             requestInputs: {
-            },
-            resources:[]
+                sdwanvpnresource_list:[],
+                sdwansiteresource_list:[]
+            }
         };
-
-        let sotnbody = this.sotnVpnTableData.map((sotn) => {
-            let sotninputs = {
-                resourceIndex: 0,
-                resourceName:this.templateParameters["sotnvpn"]["info"]["resourceName"],
-                resourceInvariantUuid: this.templateParameters["sotnvpn"]["info"]["resourceInvariantUuid"],
-                resourceUuid: this.templateParameters["sotnvpn"]["info"]["resourceUuid"],
-                resourceCustomizationUuid:this.templateParameters["sotnvpn"]["info"]["resourceCustomizationUuid"],
-                parameters: {
-                    locationConstraints: [
-                    ],
-                    resources: [
-                    ],
-                    requestInputs: {}
-                }
-            };
-            sotninputs.parameters.requestInputs=Object.assign({}, sotn);
-
-            return sotninputs;
-        });
-
-        let sitebody = this.sotnVpnTableData.map((site) => {
-            let siteinputs = {
-                resourceIndex: 0,
-                resourceName:this.templateParameters["site"]["info"]["resourceName"],
-                resourceInvariantUuid: this.templateParameters["site"]["info"]["resourceInvariantUuid"],
-                resourceUuid: this.templateParameters["site"]["info"]["resourceUuid"],
-                resourceCustomizationUuid:this.templateParameters["site"]["info"]["resourceCustomizationUuid"],
-                parameters: {
-                    locationConstraints: [
-                    ],
-                    resources: [
-                    ],
-                    requestInputs: {}
-                }
-            };
-            siteinputs.parameters.requestInputs=Object.assign({}, site);
-
-            return siteinputs;
-        });
-
-        servicebody.resources = sotnbody.concat(sitebody);
-        servicebody.resources.map((item,index) => {
-            item.resourceIndex=index;
-        });
-
-        console.log(sotnbody);
-        console.log(sitebody);
+        servicebody.requestInputs.sdwanvpnresource_list=servicebody.requestInputs.sdwanvpnresource_list.concat(this.sotnVpnTableData);
+        servicebody.requestInputs.sdwansiteresource_list=servicebody.requestInputs.sdwansiteresource_list.concat(this.siteTableData);
         console.log(servicebody);
 
         this.closeCreate.emit(servicebody);