Fix instance instantiation for CCVPN

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

3 files changed, 42 insertions, 17 deletions

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 28162251..ff977190 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
@@ -38,7 +38,8 @@
     </nz-dropdown>
 
     <button class="create" nz-button [nzType]="'primary'" (click)="createModal()"><i
-            class="anticon anticon-plus-circle-o"></i><span> Create </span></button>
+            class="anticon anticon-plus" style="transform: scale(1.5);line-height: 15px;margin-right: 5px;"></i><span> Create </span>
+    </button>
     <nz-modal nzWidth="428" [(nzVisible)]="isVisible" nzTitle="CREATE" (nzOnCancel)="handleCancel()"
               (nzOnOk)="handleOk()">
         <div class="select-list">
@@ -96,7 +97,7 @@
             </div>
         </li>
     </ul>
-    <div class="list">
+    <div class="list" [ngClass]="{'listdisplay':listDisplay == true}">
         <nz-table *ngIf="1"
                   #nzTable [nzData]="tableData"
                   nzShowSizeChanger
@@ -136,7 +137,8 @@
               <span [ngClass]="{'active':data.statusClass=='2001','closed':data.statusClass=='Closed','onboarding':data.statusClass=='Onboarding',
                     'updating':data.statusClass=='Updating','deleting':data.statusClass=='1002','creating':data.statusClass=='1001',
                     'scaling':data.statusClass=='1003','healing':data.statusClass=='1004'}">{{data.tips}}</span>
-                        <nz-progress *ngIf="data.status == 'In Progress'" [nzPercent]="data.rate"></nz-progress>
+                        <nz-progress *ngIf="data.status == 'In Progress'" [nzPercent]="data.rate" [nzShowInfo]="false"
+                                     nzStatus="active"></nz-progress>
                     </td>
                     <td>
                         <i [ngClass]="{'cannotclick':data.status == 'In Progress'||(data.status=='Failed' && data.operationType=='1001')||(data.status=='Failed' && data.operationType=='1002')}"
@@ -161,7 +163,7 @@
                         <nz-progress *ngIf=" item.status == 'Healing' " [nzPercent]="item.rate"></nz-progress>
                     </td>
                     <td>
-                        <i [ngClass]="{'cannotclick':data.serviceDomain!='E2E Service' || data.status == 'In Progress'||(data.status=='Failed' && data.operationType=='1001')||(data.status=='Failed' && data.operationType=='1002')}"
+                        <i [ngClass]="{'cannotclick':data.serviceDomain!='Network Service' || data.status == 'In Progress'||(data.status=='Failed' && data.operationType=='1001')||(data.status=='Failed' && data.operationType=='1002')}"
                            class="anticon anticon-reload" (click)="healService(item)"></i>
                     </td>
                 </tr>
@@ -169,7 +171,8 @@
             </tbody>
         </nz-table>
 
-        <nz-modal [nzVisible]="scaleModelVisible" nzTitle="Scale" (nzOnCancel)="scaleCancel()" (nzOnOk)="scaleOk()">
+        <nz-modal nzWidth="428" [nzVisible]="scaleModelVisible" nzTitle="Scale" (nzOnCancel)="scaleCancel()"
+                  (nzOnOk)="scaleOk()">
             <h3><i class="anticon anticon-question-circle" style="color:yellow;"></i>Are you sure heal this instance?
             </h3>
             Instance ID: <b style="color:green"> {{ thisService["service-instance-id"] || thisService["nsInstanceId"] ||
@@ -194,7 +197,7 @@
                 </nz-select>
             </div>
         </nz-modal>
-        <nz-modal [(nzVisible)]="deleteModelVisible" nzTitle="Delete" (nzOnCancel)="deleteCancel()"
+        <nz-modal nzWidth="428" [(nzVisible)]="deleteModelVisible" nzTitle="Delete" (nzOnCancel)="deleteCancel()"
                   (nzOnOk)="deleteOk()">
             <h3><i class="anticon anticon-question-circle" style="color:yellow;"></i>Are you sure delete this instance?
             </h3>
@@ -211,7 +214,8 @@
                        [(ngModel)]="gracefulTerminationTimeout">
             </div>
         </nz-modal>
-        <nz-modal [nzVisible]="healModelVisible" nzTitle="Heal" (nzOnCancel)="healCancel()" (nzOnOk)="healOk()">
+        <nz-modal nzWidth="428" [nzVisible]="healModelVisible" nzTitle="Heal" (nzOnCancel)="healCancel()"
+                  (nzOnOk)="healOk()">
             <h3><i class="anticon anticon-question-circle" style="color:yellow;"></i>Are you sure heal this instance?
             </h3>
             Instance ID: <b style="color:green"> {{ thisService["service-instance-id"] || thisService["nsInstanceId"] ||
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 3ef3fde2..0e59ca2e 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
@@ -24,6 +24,9 @@ hr {
     background-color: #dce1e7;
     margin-bottom: 20px;
 }
+.ant-tabs-bar{
+    margin-bottom: 0!important;
+}
 .action {
     margin-bottom: 15px;
     padding: 28px;
@@ -85,16 +88,20 @@ hr {
     .create.ant-btn.ant-btn-primary{
         border: none;
     }
+    .create:hover{
+        background:linear-gradient(90deg, rgb(103, 207, 246) 0%, rgb(69, 175, 255) 100%) !important;
+    }
 
 }
 .top-num{
     overflow: auto;
+    width: 100%;
 }
 .top-list{
     position: relative;
-    width:360px;
+    width:22%;
     height:160px;
-    margin: 15px 15px 30px 15px;
+    margin: 15px 1.5%;
     float: left;
     background:linear-gradient(90deg,rgba(16,174,222,1) 0%,rgba(43,206,202,1) 100%);
     box-shadow:0px 10px 15px 2px rgba(222,222,222,1);
@@ -102,17 +109,17 @@ hr {
 }
 .top-list .round{
     position: absolute;
-    width:80px;
-    height:80px;
-    line-height: 80px;
+    width: 60px;
+    height: 60px;
+    line-height: 60px;
     text-align: center;
     top:50%;
     left: 10px;
-    margin-top: -40px;
+    margin-top: -30px;
     background:#E0EDFF;
     border:2px solid rgba(224,237,255,1);
     border-radius: 50%;
-    font-size:18px;
+    font-size:16px;
     font-family:ArialMT;
     color:#3C4F8C;
 }
@@ -123,8 +130,11 @@ hr {
     line-height: 20px;
     top:50%;
     margin-top: -20px;
-    right: 20px;
+    right: 15px;
     color: #fff;
+    span:nth-child(1){
+        font-size: 22px;
+    }
 }
 .list {
     background-color: #fff;
@@ -207,9 +217,9 @@ hr {
     top: 0;
     width: 100%;
     height: 100vh;
-    background-color: #f3f3f3;
+    background-color: #F7F8FC;
     overflow-y: auto;
-    padding: 20px 32px;
+    //padding: 20px 32px;
     z-index: 3;
 }
 /*2019.01.14*/
@@ -236,3 +246,6 @@ hr {
     line-height: 32px;
 }
 
+.listdisplay{
+    display: none;
+}
\ No newline at end of file
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 7149ae2f..2dfbc942 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
@@ -140,6 +140,7 @@ export class ServicesListComponent implements OnInit {
   //
   createshow = false;
   createshow2 = false;
+    listDisplay = false;
   createData:Object={};
   handleOk(): void {
     // console.log('Button ok clicked!');
@@ -153,6 +154,7 @@ export class ServicesListComponent implements OnInit {
     }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.listDisplay = true;
     }
 
   }
@@ -461,9 +463,11 @@ export class ServicesListComponent implements OnInit {
   closeCreate(obj){
     if(!obj){
       this.createshow = false; //close
+            this.listDisplay = false; 
       return false;
     }
     this.createshow = false;
+        this.listDisplay = false;
     console.log(obj);
     let newData; //Newly created service data for the main table
     let stageNum = 0; //Different stages of progress, used to add up subsequent service progress;
@@ -584,9 +588,11 @@ export class ServicesListComponent implements OnInit {
   e2eCloseCreate(obj){
     if(!obj){
       this.createshow2 = false; //
+            this.listDisplay = false;
       return false;
     }
     this.createshow2 = false; //
+        this.listDisplay = false;
     console.log(obj);
     let newData; //
     let   createParams = "?customerId="+this.customerSelected.id +
@@ -638,9 +644,11 @@ export class ServicesListComponent implements OnInit {
   nsCloseCreate(obj){
     if(!obj){
       this.createshow2 = false; //
+            this.listDisplay = false;
       return false;
     }
     this.createshow2 = false; //
+        this.listDisplay = false;
     console.log(obj);
     let newData; //
     // step1