Service instance lifecycle management

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

3 files changed, 263 insertions, 65 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 de137fd4..a415244b 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
@@ -207,77 +207,144 @@
                 </nz-select>
             </div>
         </nz-modal>
-        <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>
-            Instance ID: <b class="deleteModelContent"> {{ thisService["service-instance-id"] ||
-            thisService["nsInstanceId"] }}</b>
-            <div *ngIf="thisService['serviceDomain'] == 'Network Service'">
-                <span style="display:inline-block;width:50%;">terminationType:</span>
-                <nz-select style="width: 165px;" [(ngModel)]="terminationType">
-                    <nz-option nzValue="graceful" nzLabel="graceful"></nz-option>
-                    <nz-option nzValue="forceful" nzLabel="forceful"></nz-option>
-                </nz-select>
-                <span *ngIf="terminationType=='graceful'" style="display:inline-block;width:50%;">gracefulTerminationTimeout:</span>
-                <input *ngIf="terminationType=='graceful'" style="width: 165px;" nz-input
-                       [(ngModel)]="gracefulTerminationTimeout">
+        <!--<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>-->
+            <!--Instance ID: <b class="deleteModelContent"> {{ thisService["service-instance-id"] ||-->
+            <!--thisService["nsInstanceId"] }}</b>-->
+            <!--<div *ngIf="thisService['serviceDomain'] == 'Network Service'">-->
+                <!--<span style="display:inline-block;width:50%;">terminationType:</span>-->
+                <!--<nz-select style="width: 165px;" [(ngModel)]="terminationType">-->
+                    <!--<nz-option nzValue="graceful" nzLabel="graceful"></nz-option>-->
+                    <!--<nz-option nzValue="forceful" nzLabel="forceful"></nz-option>-->
+                <!--</nz-select>-->
+                <!--<span *ngIf="terminationType=='graceful'" style="display:inline-block;width:50%;">gracefulTerminationTimeout:</span>-->
+                <!--<input *ngIf="terminationType=='graceful'" style="width: 165px;" nz-input-->
+                       <!--[(ngModel)]="gracefulTerminationTimeout">-->
+            <!--</div>-->
+        <!--</nz-modal>-->
+
+    <!--2019.04.12 add-->
+        <div class="deleteModel" *ngIf="deleteModelVisible" [ngClass]="{'nsdeleteModel':thisService['serviceDomain'] == 'Network Service'}">
+            <h3>Delete<i class="anticon anticon-close-circle" style="color:#B8C0C4;" (click)="deleteCancel()"></i></h3>
+            <p class="line"></p>
+            <div class="modelText">
+                <p class="question-title"><span>*&nbsp;</span>Are you sure delete this instance£¿</p>
+                <div class="question">
+                    <h4>Instance Name£º</h4>
+                    <div class="deleteModelContent">{{ thisService["service-instance-id"] ||
+                        thisService["nsInstanceId"] }}</div>
+                </div>
+                <div class="question">
+                    <h4>Instance Id£º</h4>
+                    <div class="deleteModelContent">{{ thisService["service-instance-name"] ||
+                        thisService["nsInstanceName"] }}</div>
+                </div>
+                <div *ngIf="thisService['serviceDomain'] == 'Network Service'">
+                    <div class="question">
+                        <h4 >terminationType:</h4>
+                        <nz-select style="width: 306px;" [(ngModel)]="terminationType">
+                            <nz-option nzValue="graceful" nzLabel="graceful"></nz-option>
+                            <nz-option nzValue="forceful" nzLabel="forceful"></nz-option>
+                        </nz-select>
+                    </div>
+                    <div class="question" style="position: relative">
+                        <h4 *ngIf="terminationType=='graceful'">gracefulTerminationTimeout:</h4>
+                        <input *ngIf="terminationType=='graceful'" style="width: 306px;" nz-input
+                               [(ngModel)]="gracefulTerminationTimeout">
+                    </div>
+                </div>
             </div>
-        </nz-modal>
-        <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"] ||
-            thisService["vnfInstanceId"]}}</b>
-            <!-- NS -->
-            <div *ngIf="thisService['serviceDomain'] == 'Network Service'">
-                <span style="display:inline-block;width:50%;">degreeHealing:</span>
-                <nz-select style="width: 165px;" [(ngModel)]="nsParams.degreeHealing">
-                    <nz-option nzValue="HEAL_RESTORE" nzLabel="HEAL_RESTORE"></nz-option>
-                    <nz-option nzValue="HEAL_QOS" nzLabel="HEAL_QOS"></nz-option>
-                    <nz-option nzValue="HEAL_RESET" nzLabel="HEAL_RESET"></nz-option>
-                    <nz-option nzValue="PARTIAL_HEALING" nzLabel="PARTIAL_HEALING"></nz-option>
-                </nz-select>
-                <div>
-                    <span style="display:inline-block;">actionsHealing:</span>
-                    <button nz-button [nzType]="'default'" (click)="addActionsHealing()"><i
-                            class="anticon anticon-plus-circle-o"></i></button>
-                    <br>
-                    <div *ngFor="let item of healActions;let i = index;" style="display:inline-block;">
-                        <input style="width: 165px;" nz-input [(ngModel)]="item.value">
-                        <button nz-button [nzType]="'dashed'" (click)="minusActionsHealing(i)"><i
-                                class="anticon anticon-minus-circle-o"></i></button>
-                        &nbsp;
+            <div class="action-btn">
+                <button nz-button nzType="primary" (click)="deleteCancel()">cancel</button>
+                <button nz-button nzType="primary" (click)="deleteOk()">ok</button>
+            </div>
+        </div>
+
+        <div class="healModel" *ngIf="healModelVisible">
+            <h3>Heal<i class="anticon anticon-close-circle" style="color:#B8C0C4;" (click)="healCancel()"></i></h3>
+            <p class="line"></p>
+            <div class="modelText heal-">
+                <p class="question-title"><span>*&nbsp;</span>Are you sure heal this instance£¿</p>
+                <div class="heal-question">
+                    <p class="heal-label">Instance ID: </p>
+                    <div class="healModelContent" title="{{ thisService['service-instance-id'] || thisService['nsInstanceId'] ||
+                    thisService['vnfInstanceId']}}"> {{ thisService["service-instance-id"] || thisService["nsInstanceId"] ||
+                    thisService["vnfInstanceId"]}}</div>
+                </div>
+                <!-- NS -->
+                <div *ngIf="thisService['serviceDomain'] == 'Network Service'">
+                    <div class="question">
+                        <p class="heal-label">degreeHealing:</p>
+                        <nz-select style="width: 200px;height:42px;margin-left: 15px;border-radius: 6px" [(ngModel)]="nsParams.degreeHealing">
+                            <nz-option nzValue="HEAL_RESTORE" nzLabel="HEAL_RESTORE"></nz-option>
+                            <nz-option nzValue="HEAL_QOS" nzLabel="HEAL_QOS"></nz-option>
+                            <nz-option nzValue="HEAL_RESET" nzLabel="HEAL_RESET"></nz-option>
+                            <nz-option nzValue="PARTIAL_HEALING" nzLabel="PARTIAL_HEALING"></nz-option>
+                        </nz-select>
+                    </div>
+                    <div>
+                        <span style="display:inline-block;">actionsHealing:</span>
+                        <button nz-button [nzType]="'default'" (click)="addActionsHealing()"><i
+                                class="anticon anticon-plus-circle-o"></i></button>
+                        <br>
+                        <div *ngFor="let item of healActions;let i = index;" style="display:inline-block;">
+                            <input style="width: 165px;" nz-input [(ngModel)]="item.value">
+                            <button nz-button [nzType]="'dashed'" (click)="minusActionsHealing(i)"><i
+                                    class="anticon anticon-minus-circle-o"></i></button>
+                            &nbsp;
+                        </div>
+                    </div>
+                    <span style="display:inline-block;width:50%;">healScript:</span>
+                    <input style="width: 165px;" nz-input [(ngModel)]="nsParams.healScript">
+                    <div>
+                        <span style="display:inline-block;">additionalParamsforNs:</span>
+                        <button nz-button [nzType]="'default'" (click)="addNsAdditional()"><i
+                                class="anticon anticon-plus-circle-o"></i></button>
+                        <br>
+                        <div *ngFor="let item of nsAdditional;let i = index;">
+                            Key: <input style="width: 165px;" nz-input [(ngModel)]="item.key"> &nbsp;
+                            Value: <input style="width: 165px;" nz-input [(ngModel)]="item.value">
+                            <button nz-button [nzType]="'dashed'" (click)="minusNsAdditional(i)"><i
+                                    class="anticon anticon-minus-circle-o"></i></button>
+                        </div>
                     </div>
                 </div>
-                <span style="display:inline-block;width:50%;">healScript:</span>
-                <input style="width: 165px;" nz-input [(ngModel)]="nsParams.healScript">
-                <div>
-                    <span style="display:inline-block;">additionalParamsforNs:</span>
-                    <button nz-button [nzType]="'default'" (click)="addNsAdditional()"><i
-                            class="anticon anticon-plus-circle-o"></i></button>
-                    <br>
-                    <div *ngFor="let item of nsAdditional;let i = index;">
-                        Key: <input style="width: 165px;" nz-input [(ngModel)]="item.key"> &nbsp;
-                        Value: <input style="width: 165px;" nz-input [(ngModel)]="item.value">
-                        <button nz-button [nzType]="'dashed'" (click)="minusNsAdditional(i)"><i
-                                class="anticon anticon-minus-circle-o"></i></button>
+                <!-- vnf -->
+                <div *ngIf="thisService['serviceDomain'] == 'vnf'" style="clear: both">
+                    <div class="heal-question">
+                        <p class="heal-label">cause:</p>
+                        <input nz-input [(ngModel)]="vnfParams.cause" class="heal-input">
                     </div>
+                    <div class="heal-question">
+                        <p class="heal-label">action:</p>
+                        <input nz-input [(ngModel)]="vnfParams.additionalParams.action" class="heal-input">
+                    </div>
+                    <div class="heal-question">
+                        <p class="heal-label">actionvminfo:</p>
+                        <nz-select style=" float: right;width: 200px;margin-left: 15px;border-radius: 6px;margin-right: 30px" [(ngModel)]="vmSelected">
+                            <nz-option *ngFor="let item of vnfVms" [nzValue]="item" [nzLabel]="item.vmName"></nz-option>
+                        </nz-select>
+                    </div>
+
+
                 </div>
             </div>
-            <!-- vnf -->
-            <div *ngIf="thisService['serviceDomain'] == 'vnf'">
-                <span style="display:inline-block;width:50%;">cause:</span>
-                <input style="width: 165px;" nz-input [(ngModel)]="vnfParams.cause">
-                <span style="display:inline-block;width:50%;">action:</span>
-                <input style="width: 165px;" nz-input [(ngModel)]="vnfParams.additionalParams.action">
-                <span style="display:inline-block;width:50%;">actionvminfo:</span>
-                <nz-select style="width: 165px;" [(ngModel)]="vmSelected">
-                    <nz-option *ngFor="let item of vnfVms" [nzValue]="item" [nzLabel]="item.vmName"></nz-option>
-                </nz-select>
+            <div class="action-btn">
+                <button nz-button nzType="primary" (click)="healCancel()">cancel</button>
+                <button nz-button nzType="primary" (click)="healOk()">ok</button>
             </div>
-        </nz-modal>
+        </div>
+
+
+
+        <!--<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>-->
+
+        <!--</nz-modal>-->
     </div>
 
     <div class="detailComponent" *ngIf="detailshow">
@@ -303,4 +370,5 @@
         </app-e2e-creation>
     </div>
     <!--</div>-->
-</nz-layout>
\ No newline at end of file
+</nz-layout>
+<div class="mask" *ngIf="maskShow" (click)="deleteCancel()" ></div>
\ No newline at end of file
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 915afd3a..fd7ef64b 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
@@ -27,6 +27,14 @@ hr {
 .ant-tabs-bar{
     margin-bottom: 0!important;
 }
+.mask{
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    z-index: 999;
+    background: rgba(0, 0, 0, 0.65);
+    top:0;
+}
 .action {
     margin-bottom: 15px;
     padding: 28px;
@@ -236,6 +244,121 @@ hr {
             }
         }
     }
+  //2019.0412 add
+    .nsdeleteModel{
+        height: 580px!important;
+    }
+    .deleteModel,.healModel{
+        width: 428px;
+        min-height: 450px;
+        position: fixed;
+        z-index: 1000;
+        top:50%;
+        left:50%;
+        margin-left: -214px;
+        margin-top: -225px;
+        background: #ffffff;
+        border-radius:4px;
+        h3{
+            width: 100%;
+            height: 50px;
+            line-height: 50px;
+            text-align: center;
+            position: relative;
+            color: #0DA9E2;
+            font-size: 18px;
+            margin-bottom: 0!important;
+            i{
+                position: absolute;
+                right: 3%;
+                cursor: pointer;
+                background: none!important;
+                transform: scale(1.5);
+                vertical-align: middle;
+                line-height: 50px;
+            }
+        }
+        .line{
+            width: 100%;
+            height: 2px;
+            background:linear-gradient(180deg,#07A9E1 0%,#30D9C4 100%);
+        }
+        .modelText{
+            padding: 10px 45px;
+            .question-title{
+                color: #3C4F8C;
+                font-size: 16px;
+                font-weight: 500;
+                span{
+                    color: red;
+                }
+            }
+            .question,.heal-question{
+                margin-bottom: 15px;
+                h4{
+                    border-radius:4px;
+                    font-size: 16px;
+                }
+                .deleteModelContent,.healModelContent{
+                    width: 306px;
+                    height: 40px;
+                    line-height: 40px;
+                    background:rgba(229,238,252,0.8);
+                    border-radius:4px;
+                    color: #0DA9E2;
+                    text-indent: 10px;
+                }
+                .heal-label{
+                    float: left;
+                    line-height: 42px;
+                    margin-bottom: 0;
+                    color:rgba(60,79,140,0.5);
+                }
+                .heal-input{
+                    width: 200px;
+                    height: 40px;
+                    border-radius: 6px;
+                    float: right;
+                    margin-right: 30px;
+                }
+                .healModelContent{
+                    width: 200px;
+                    height: 40px;
+                    overflow: hidden;
+                    float: right;
+                    margin-right: 30px
+                }
+            }
+            .heal-question{
+                height: 40px;
+            }
+
+        }
+        .action-btn{
+            margin-top: 20px;
+            text-align: center;
+            button{
+                width: 126px;
+                height: 40px;
+                line-height: 40px;
+                margin: 0 15px;
+                border: none;
+                border-radius:2px;
+                font-size: 14px!important;
+            }
+            button:nth-child(1){
+                background:rgba(238,238,238,1);
+                color: #9DA7C5;
+            }
+            button:nth-child(2){
+                background:rgba(13,169,226,1);
+                color: #ffffff;
+            }
+        }
+    }
+    .healModel{
+        min-height: 470px!important;
+    }
 }
 
 
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 2efe231a..ae95aec6 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
@@ -48,6 +48,7 @@ export class ServicesListComponent implements OnInit {
   listSortMasters=JSON.parse(sessionStorage.getItem('listSortMasters'));
   language="en";
     iconMore=false;
+    maskShow=false;
     serviceMunber = [
         {
             "serviceDomain": "E2E",
@@ -438,6 +439,7 @@ export class ServicesListComponent implements OnInit {
     // console.log(service);
     this.thisService = service;
     this.healModelVisible = true;
+        this.maskShow = true;
     if(service.serviceDomain == "vnf"){
       this.vnfParams.vnfInstanceId = service.vnfInstanceId;
       this.myhttp.getVnfInfo(service.vnfInstanceId)
@@ -450,6 +452,7 @@ export class ServicesListComponent implements OnInit {
   }
   healOk(){
     this.healModelVisible = false;
+        this.maskShow = false;
     // nsParams
     this.nsParams.actionsHealing = this.healActions.map((item)=>{return item.value});
     let additional = {};
@@ -467,6 +470,7 @@ export class ServicesListComponent implements OnInit {
   }
   healCancel(){
     this.healModelVisible = false;
+        this.maskShow = false;
   }
 
   // show detail
@@ -504,9 +508,11 @@ export class ServicesListComponent implements OnInit {
   deleteModel(service){
     this.thisService = service;
     this.deleteModelVisible = true;
+        this.maskShow = true;
   }
   deleteOk(){
     this.deleteModelVisible = false;
+        this.maskShow = false;
     if(this.thisService["serviceDomain"] == "Network Service"){
       this.deleteNsService(this.thisService);
     }else{
@@ -516,6 +522,7 @@ export class ServicesListComponent implements OnInit {
 
   deleteCancel(){
     this.deleteModelVisible = false;
+        this.maskShow = false;
   }
 
   //ccvpn sotn createservice