Service instance lifecycle management

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

1 files changed, 112 insertions, 163 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 a415244b..04289c62 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
@@ -41,7 +41,7 @@
             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="Service Creation" (nzOnCancel)="handleCancel()"
-              (nzOnOk)="handleOk()">
+              (nzOnOk)="handleOk()" nzClassName="serviceCreationModel">
         <div class="select-list">
             <span style="display:inline-block;">Customer: </span>
             <nz-select style="width: 176px;float: right;" [(ngModel)]="customerSelected2.name" nzAllowClear>
@@ -54,28 +54,12 @@
                 <nz-option *ngFor="let item of serviceTypeList2" [nzValue]="item.name" [nzLabel]="item.name" ></nz-option>
             </nz-select>
         </div>
-  <div class="select-list">
+  		<div class="select-list">
             <span style="display:inline-block;width:70px;">TEMPLATE: </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;">Orchestrator: </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,.5)">Sol005</label>
-            </div>
-        </div>
     </nz-modal>
 </div>
 <nz-layout style=" padding: 20px 32px; ">
@@ -182,169 +166,135 @@
         </nz-table>
 
         <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"] ||
-            thisService["vnfInstanceId"]}}</b>
-            <div *ngFor="let item of e2e_nsData">
+                  (nzOnOk)="scaleOk()" nzClassName="scaleModel">
+            <h3><span style="color: red">*&nbsp;</span>Are you sure Scale this instance?</h3>
+            <div class="question">
+                <h4>Instance ID:</h4>
+                <div class="scaleModelContent" style="width: 100%">{{ thisService["service-instance-id"] || thisService["nsInstanceId"] ||
+                    thisService["vnfInstanceId"]}}</div>
+            </div>
+            <div *ngFor="let item of e2e_nsData" style="margin-top: 20px">
                 <h3>{{ item.netWorkServiceName }}</h3>
-                <hr>
-                <span style="display:inline-block;width:50%;">Scale Type:</span>
-                <nz-select style="width: 165px;" [(ngModel)]="item.scaleType">
-                    <nz-option nzValue="SCALE_NS" nzLabel="SCALE_NS"></nz-option>
-                    <nz-option nzValue="SCALE_VNF" nzLabel="SCALE_VNF"></nz-option>
-                </nz-select>
-                <span style="display:inline-block;width:50%;">AspectId:</span>
-                <input style="width: 165px;" nz-input [(ngModel)]="item.aspectId" placeholder="string">
-                <span style="display:inline-block;width:50%;">Number Of Steps:</span>
-                <nz-input-number style="width: 165px;" [(ngModel)]="item.numberOfSteps" [nzMin]="1" [nzMax]="100"
-                                 nzPrecision=0 [nzStep]="1" nzPlaceHolder="number"></nz-input-number>
-                <span style="display:inline-block;width:50%;">Scaling Direction:</span>
-                <nz-select style="width: 165px;" nzPlaceHolder="Chose" [(ngModel)]="item.scalingDirection">
-                    <nz-option nzValue="SCALE_IN" nzLabel="SCALE_IN"></nz-option>
-                    <nz-option nzValue="SCALE_OUT" nzLabel="SCALE_OUT"></nz-option>
-                </nz-select>
+                <div class="e2eScaleContent">
+                    <span class="e2eScaleLable">Scale Type:</span>
+                    <nz-select style="width: 165px;" [(ngModel)]="item.scaleType">
+                        <nz-option nzValue="SCALE_NS" nzLabel="SCALE_NS"></nz-option>
+                        <nz-option nzValue="SCALE_VNF" nzLabel="SCALE_VNF"></nz-option>
+                    </nz-select>
+                </div>
+               <div class="e2eScaleContent">
+                   <span class="e2eScaleLable">AspectId:</span>
+                   <input style="width: 165px;" nz-input [(ngModel)]="item.aspectId" placeholder="string">
+               </div>
+                <div class="e2eScaleContent">
+                    <span class="e2eScaleLable">Number Of Steps:</span>
+                    <nz-input-number style="width: 165px;" [(ngModel)]="item.numberOfSteps" [nzMin]="1" [nzMax]="100"
+                                     nzPrecision=0 [nzStep]="1" nzPlaceHolder="number"></nz-input-number>
+                </div>
+                <div class="e2eScaleContent">
+                    <span class="e2eScaleLable" >Scaling Direction:</span>
+                    <nz-select style="width: 165px;" nzPlaceHolder="Chose" [(ngModel)]="item.scalingDirection">
+                        <nz-option nzValue="SCALE_IN" nzLabel="SCALE_IN"></nz-option>
+                        <nz-option nzValue="SCALE_OUT" nzLabel="SCALE_OUT"></nz-option>
+                    </nz-select>
+                </div>
             </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">-->
-            <!--</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>
+        <nz-modal nzWidth="428" [(nzVisible)]="deleteModelVisible" nzTitle="Delete" (nzOnCancel)="deleteCancel()"
+                  (nzOnOk)="deleteOk()"  nzClassName="{{thisService['serviceDomain'] == 'Network Service'?'nsdeleteModel':'deleteModel'}}">
+            <h3><span style="color: red">*&nbsp;</span>Are you sure delete this instance?</h3>
+            <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>Instance Name£º</h4>
-                    <div class="deleteModelContent">{{ thisService["service-instance-id"] ||
-                        thisService["nsInstanceId"] }}</div>
+                    <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">
-                    <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>
+                    <h4 *ngIf="terminationType=='graceful'">gracefulTerminationTimeout:</h4>
+                    <input *ngIf="terminationType=='graceful'" style="width: 306px;" nz-input
+                           [(ngModel)]="gracefulTerminationTimeout">
                 </div>
             </div>
-            <div class="action-btn">
-                <button nz-button nzType="primary" (click)="deleteCancel()">cancel</button>
-                <button nz-button nzType="primary" (click)="deleteOk()">ok</button>
-            </div>
-        </div>
+        </nz-modal>
 
-        <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'] ||
+        <nz-modal nzWidth="428" [nzVisible]="healModelVisible" nzTitle="Heal" (nzOnCancel)="healCancel()"
+                  (nzOnOk)="healOk()" nzClassName="healModel">
+            <h3><span style="color: red">*&nbsp;</span>Are you sure heal this instance?</h3>
+            <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>
-                <!-- 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>
+                    <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>
-                <!-- 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>
+                <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>
-            <div class="action-btn">
-                <button nz-button nzType="primary" (click)="healCancel()">cancel</button>
-                <button nz-button nzType="primary" (click)="healOk()">ok</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>
-
-
-
-        <!--<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>-->
+        </nz-modal>
     </div>
 
     <div class="detailComponent" *ngIf="detailshow">
@@ -371,4 +321,3 @@
     </div>
     <!--</div>-->
 </nz-layout>
-<div class="mask" *ngIf="maskShow" (click)="deleteCancel()" ></div>
\ No newline at end of file