diff options
author | cyuamber <xuranyjy@chinamobile.com> | 2019-10-15 16:28:59 +0800 |
---|---|---|
committer | cyuamber <xuranyjy@chinamobile.com> | 2019-10-15 16:29:09 +0800 |
commit | 65be860e2a6844da71d4046254a189d911adbbd9 (patch) | |
tree | 5313cdd32205a22848f26a4bf0a99fe93ac53407 /usecaseui-portal | |
parent | 58372d3b8c3f99cbd199ea2c717388bb6b2eed16 (diff) |
feat:add healModel component of services-list page5.0.2-ONAPelalto
Change-Id: I0665fb880663645fd620355387f1a113f72d40c5
Issue-ID: USECASEUI-307
Signed-off-by: cyuamber <xuranyjy@chinamobile.com>
Diffstat (limited to 'usecaseui-portal')
7 files changed, 214 insertions, 140 deletions
diff --git a/usecaseui-portal/src/app/app.module.ts b/usecaseui-portal/src/app/app.module.ts index 04651d01..17804649 100644 --- a/usecaseui-portal/src/app/app.module.ts +++ b/usecaseui-portal/src/app/app.module.ts @@ -78,6 +78,7 @@ import { CreateModelComponent } from './views/services/services-list/create-mode import { DeleteModelComponent } from './views/services/services-list/delete-model/delete-model.component'; import { NotificationComponent } from './shared/components/notification/notification.component'; import { ScaleModelComponent } from './views/services/services-list/scale-model/scale-model.component'; +import { HealModelComponent } from './views/services/services-list/heal-model/heal-model.component'; @NgModule({ providers: [ @@ -123,6 +124,7 @@ import { ScaleModelComponent } from './views/services/services-list/scale-model/ DeleteModelComponent, NotificationComponent, ScaleModelComponent, + HealModelComponent ], imports: [ BrowserModule, diff --git a/usecaseui-portal/src/app/views/services/services-list/heal-model/heal-model.component.html b/usecaseui-portal/src/app/views/services/services-list/heal-model/heal-model.component.html new file mode 100644 index 00000000..0117669f --- /dev/null +++ b/usecaseui-portal/src/app/views/services/services-list/heal-model/heal-model.component.html @@ -0,0 +1,72 @@ +<nz-modal nzWidth="428" [nzVisible]="healModelVisible" nzTitle=" {{'i18nTextDefine_Heal' | translate}} " + (nzOnCancel)="healCancel()" (nzOnOk)="healOk()" + nzClassName="healModel" nzCancelText=" {{'i18nTextDefine_Cancel' | translate}} " + nzOkText=" {{'i18nTextDefine_modelOk' | translate}} "> + <h3><span style="color: red">* </span> {{"i18nTextDefine_SureHeal" | translate}} </h3> + <div class="heal-question"> + <p class="heal-label"> {{"i18nTextDefine_InstanceID" | translate}} : </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"> {{"i18nTextDefine_degreeHealing" | translate}} :</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;"> {{"i18nTextDefine_actionsHealing" | translate}} :</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%;"> {{"i18nTextDefine_healScript" | translate}} :</span> + <input style="width: 165px;" nz-input [(ngModel)]="nsParams.healScript"> + <div> + <span style="display:inline-block;"> {{"i18nTextDefine_additionalParamsforNs" | translate}} :</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> + <!-- vnf --> + <div *ngIf="thisService['serviceDomain'] == 'vnf'" style="clear: both"> + <div class="heal-question"> + <p class="heal-label"> {{"i18nTextDefine_cause" | translate}} :</p> + <input nz-input [(ngModel)]="vnfParams.cause" class="heal-input"> + </div> + <div class="heal-question"> + <p class="heal-label"> {{"i18nTextDefine_action" | translate}} :</p> + <input nz-input [(ngModel)]="vnfParams.additionalParams.action" class="heal-input"> + </div> + <div class="heal-question"> + <p class="heal-label"> {{"i18nTextDefine_actionvminfo" | translate}}:</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> +</nz-modal>
\ No newline at end of file diff --git a/usecaseui-portal/src/app/views/services/services-list/heal-model/heal-model.component.less b/usecaseui-portal/src/app/views/services/services-list/heal-model/heal-model.component.less new file mode 100644 index 00000000..e69de29b --- /dev/null +++ b/usecaseui-portal/src/app/views/services/services-list/heal-model/heal-model.component.less diff --git a/usecaseui-portal/src/app/views/services/services-list/heal-model/heal-model.component.spec.ts b/usecaseui-portal/src/app/views/services/services-list/heal-model/heal-model.component.spec.ts new file mode 100644 index 00000000..af1c07bd --- /dev/null +++ b/usecaseui-portal/src/app/views/services/services-list/heal-model/heal-model.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { HealModelComponent } from './heal-model.component'; + +describe('HealModelComponent', () => { + let component: HealModelComponent; + let fixture: ComponentFixture<HealModelComponent>; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ HealModelComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(HealModelComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/usecaseui-portal/src/app/views/services/services-list/heal-model/heal-model.component.ts b/usecaseui-portal/src/app/views/services/services-list/heal-model/heal-model.component.ts new file mode 100644 index 00000000..a7ffe663 --- /dev/null +++ b/usecaseui-portal/src/app/views/services/services-list/heal-model/heal-model.component.ts @@ -0,0 +1,68 @@ +import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core'; + +@Component({ + selector: 'app-heal-model', + templateUrl: './heal-model.component.html', + styleUrls: ['./heal-model.component.less'] +}) +export class HealModelComponent implements OnInit { + @Input()healModelVisible: boolean; + @Input()thisService; + @Input()nsParams; + @Input()healActions; + @Input()nsAdditional; + @Input()vnfParams; + @Input()vmSelected; + @Input()vnfVms; + @Input()templatehealstarting; + @Input()templatehealSuccessFaild; + + @Output() cancel = new EventEmitter<boolean>(); + @Output() healModalOK = new EventEmitter<any>(); + + constructor() { } + + ngOnInit() { + } + + + addActionsHealing() { + this.healActions.push({ value: "" }) + } + + minusActionsHealing(index) { + this.healActions.splice(index, 1); + } + + addNsAdditional() { + this.nsAdditional.push({ key: "", value: "" }) + } + + minusNsAdditional(index) { + this.nsAdditional.splice(index, 1); + } + + healOk() { + this.healModelVisible = false; + // nsParams + this.nsParams.actionsHealing = this.healActions.map((item) => { + return item.value + }); + let additional = {}; + this.nsAdditional.forEach((item) => { + additional[item.key] = item.value; + }); + this.nsParams.additionalParamsforNs = JSON.stringify(additional); + // vnfParams + this.vnfParams.additionalParams.actionvminfo.vmid = this.vmSelected["vmId"]; + this.vnfParams.additionalParams.actionvminfo.vmname = this.vmSelected["vmName"]; + + let requestBody = this.thisService["serviceDomain"] == "Network Service" ? { healNsData: this.nsParams } : { healVnfData: this.vnfParams }; + this.healModalOK.emit(requestBody) + } + + healCancel() { + this.healModelVisible = false; + } + +} diff --git a/usecaseui-portal/src/app/views/services/services-list/services-list.component.html b/usecaseui-portal/src/app/views/services/services-list/services-list.component.html index ff1924fb..216e92df 100644 --- a/usecaseui-portal/src/app/views/services/services-list/services-list.component.html +++ b/usecaseui-portal/src/app/views/services/services-list/services-list.component.html @@ -179,108 +179,21 @@ (scaleModalOK)="scaleModalOK($event,templatescalestarting,templateScaleSuccessFaild)" > </app-scale-model> - <nz-modal nzWidth="428" [nzVisible]="healModelVisible" nzTitle=" {{'i18nTextDefine_Heal' | translate}} " - (nzOnCancel)="healCancel()" (nzOnOk)="healOk(templatehealstarting,templatehealSuccessFaild)" - nzClassName="healModel" nzCancelText=" {{'i18nTextDefine_Cancel' | translate}} " - nzOkText=" {{'i18nTextDefine_modelOk' | translate}} "> - <h3><span style="color: red">* </span> {{"i18nTextDefine_SureHeal" | translate}} </h3> - <div class="heal-question"> - <p class="heal-label"> {{"i18nTextDefine_InstanceID" | translate}} : </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"> {{"i18nTextDefine_degreeHealing" | translate}} :</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;"> {{"i18nTextDefine_actionsHealing" | translate}} :</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%;"> {{"i18nTextDefine_healScript" | translate}} :</span> - <input style="width: 165px;" nz-input [(ngModel)]="nsParams.healScript"> - <div> - <span style="display:inline-block;"> {{"i18nTextDefine_additionalParamsforNs" | translate}} :</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> - <!-- vnf --> - <div *ngIf="thisService['serviceDomain'] == 'vnf'" style="clear: both"> - <div class="heal-question"> - <p class="heal-label"> {{"i18nTextDefine_cause" | translate}} :</p> - <input nz-input [(ngModel)]="vnfParams.cause" class="heal-input"> - </div> - <div class="heal-question"> - <p class="heal-label"> {{"i18nTextDefine_action" | translate}} :</p> - <input nz-input [(ngModel)]="vnfParams.additionalParams.action" class="heal-input"> - </div> - <div class="heal-question"> - <p class="heal-label"> {{"i18nTextDefine_actionvminfo" | translate}}:</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> - - <ng-template #templatehealstarting> - <div class="ant-notification-notice-content"> - <div class="ant-notification-notice-with-icon"> - <span class="ant-notification-notice-icon"> - <img src="assets/images/execute-inproess.png" alt="instance temination is starting"> - </span> - <div class="ant-notification-notice-message">NS - {{"i18nTextDefine_InstanceHealingStarting" | translate}} - </div> - <div class="ant-notification-notice-description"> - <div class="notificationlist"> - <p> {{"i18nTextDefine_InstanceName" | translate}} :</p> - <span>{{ thisService["service-instance-name"] || - thisService["nsInstanceName"] }} - </span> - </div> - <div class="notificationlist"> - <p> {{"i18nTextDefine_Customer" | translate}} :</p> - <span>{{ customerSelected.name }}</span> - </div> - <div class="notificationlist"> - <p> {{"i18nTextDefine_UseCase" | translate}} :</p> - <span>{{ thisService["serviceDomain"] }}</span> - </div> - </div> - <div class="close-icons">{{"i18nTextDefine_Close" | translate}}</div> - </div> - </div> - </ng-template> - </nz-modal> + <app-heal-model + *ngIf="healModelVisible" + [healModelVisible]="healModelVisible" + [thisService]="thisService" + [nsParams]="nsParams" + [healActions]="healActions" + [nsAdditional]="nsAdditional" + [vnfParams]="vnfParams" + [vmSelected]="vmSelected" + [vnfVms]="vnfVms" + [templatehealstarting]="templatehealstarting" + [templatehealSuccessFaild]="templatehealSuccessFaild" + (cancel)="healModelVisible=$event" + (healModalOK)="healModalOK($event,templatehealstarting,templatehealSuccessFaild)" + ></app-heal-model> <app-notification #notification [isServicesList]="true" [customerSelected]="customerSelected"></app-notification> <!-- add notification--> @@ -498,6 +411,35 @@ </div> </div> </ng-template> + <ng-template #templatehealstarting> + <div class="ant-notification-notice-content"> + <div class="ant-notification-notice-with-icon"> + <span class="ant-notification-notice-icon"> + <img src="assets/images/execute-inproess.png" alt="instance temination is starting"> + </span> + <div class="ant-notification-notice-message">NS + {{"i18nTextDefine_InstanceHealingStarting" | translate}} + </div> + <div class="ant-notification-notice-description"> + <div class="notificationlist"> + <p> {{"i18nTextDefine_InstanceName" | translate}} :</p> + <span>{{ thisService["service-instance-name"] || + thisService["nsInstanceName"] }} + </span> + </div> + <div class="notificationlist"> + <p> {{"i18nTextDefine_Customer" | translate}} :</p> + <span>{{ customerSelected.name }}</span> + </div> + <div class="notificationlist"> + <p> {{"i18nTextDefine_UseCase" | translate}} :</p> + <span>{{ thisService["serviceDomain"] }}</span> + </div> + </div> + <div class="close-icons">{{"i18nTextDefine_Close" | translate}}</div> + </div> + </div> + </ng-template> <ng-template #templatehealSuccessFaild> <div class="ant-notification-notice-content"> <div class="ant-notification-notice-with-icon"> diff --git a/usecaseui-portal/src/app/views/services/services-list/services-list.component.ts b/usecaseui-portal/src/app/views/services/services-list/services-list.component.ts index 47ba6f9d..da027028 100644 --- a/usecaseui-portal/src/app/views/services/services-list/services-list.component.ts +++ b/usecaseui-portal/src/app/views/services/services-list/services-list.component.ts @@ -408,23 +408,7 @@ export class ServicesListComponent implements OnInit { vmname: "" } } - } - - addActionsHealing() { - this.healActions.push({ value: "" }) - } - - minusActionsHealing(index) { - this.healActions.splice(index, 1); - } - - addNsAdditional() { - this.nsAdditional.push({ key: "", value: "" }) - } - - minusNsAdditional(index) { - this.nsAdditional.splice(index, 1); - } + }; healService(service) { this.thisService = service; @@ -439,30 +423,11 @@ export class ServicesListComponent implements OnInit { } } - healOk(templatehealstarting, templatehealSuccessFaild) { - this.healModelVisible = false; - // nsParams - this.nsParams.actionsHealing = this.healActions.map((item) => { - return item.value - }); - let additional = {}; - this.nsAdditional.forEach((item) => { - additional[item.key] = item.value; - }); - this.nsParams.additionalParamsforNs = JSON.stringify(additional); - // vnfParams - this.vnfParams.additionalParams.actionvminfo.vmid = this.vmSelected["vmId"]; - this.vnfParams.additionalParams.actionvminfo.vmname = this.vmSelected["vmName"]; - - let requestBody = this.thisService["serviceDomain"] == "Network Service" ? { healNsData: this.nsParams } : { healVnfData: this.vnfParams }; - this.healNsVnfService(this.thisService, requestBody, templatehealSuccessFaild); + healModalOK(obj: any,templatehealstarting,templatehealSuccessFaild) :void{ + this.healNsVnfService(this.thisService, obj, templatehealSuccessFaild); this.healNotification(templatehealstarting); } - healCancel() { - this.healModelVisible = false; - } - healNotification(template: TemplateRef<{}>): void { this.notification.template(template); } |