diff options
Diffstat (limited to 'usecaseui-portal/src')
4 files changed, 277 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>* </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> - + <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>* </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> + + </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"> + 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"> - 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 diff --git a/usecaseui-portal/src/styles.less b/usecaseui-portal/src/styles.less index 845187a5..cae17d18 100644 --- a/usecaseui-portal/src/styles.less +++ b/usecaseui-portal/src/styles.less @@ -595,4 +595,18 @@ nz-modal { } } } +} +//gong 2019.04.12 add +.healModel{ + .heal-question{ + nz-select{ + .ant-select-selection{ + height: 42px!important; + .ant-select-selection__rendered{ + line-height: 42px!important; + } + } + + } + } }
\ No newline at end of file |