summaryrefslogtreecommitdiffstats
path: root/usecaseui-portal/src/app/services/services-list
diff options
context:
space:
mode:
authorguochuyicmri <guochuyi@chinamobile.com>2019-04-12 18:06:52 +0800
committerguochuyicmri <guochuyi@chinamobile.com>2019-04-12 18:06:58 +0800
commitb1592103a3164e8dced4f843e0b69b2599d1dd60 (patch)
tree1f65d69e2754557e329447b06ce040872566ac93 /usecaseui-portal/src/app/services/services-list
parente60a7298e1d9d83c887cd53fd8f9df71753b8f97 (diff)
Service instance lifecycle management
Change-Id: I788dbbc35e29d98885ec8d598929eb8193f6fc4f Issue-ID: USECASEUI-218 Signed-off-by: guochuyicmri <guochuyi@chinamobile.com>
Diffstat (limited to 'usecaseui-portal/src/app/services/services-list')
-rw-r--r--usecaseui-portal/src/app/services/services-list/services-list.component.html198
-rw-r--r--usecaseui-portal/src/app/services/services-list/services-list.component.less123
-rw-r--r--usecaseui-portal/src/app/services/services-list/services-list.component.ts7
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