diff options
Diffstat (limited to 'usecaseui-portal/src/app/services/services-list')
3 files changed, 112 insertions, 279 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">* </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>* </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">* </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>* </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">* </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> - - </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> + <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> - <!-- 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"> + 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 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 fd7ef64b..ca0ac419 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 @@ -244,121 +244,6 @@ 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 ae95aec6..113b8e4c 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 @@ -496,7 +496,6 @@ export class ServicesListComponent implements OnInit { this.detailshow2 = true; } this.listDisplay = true; - this.detailshow = true; this.detailData = service; console.log(service); } |