summaryrefslogtreecommitdiffstats
path: root/usecaseui-portal/src/app/views
diff options
context:
space:
mode:
authorcyuamber <xuranyjy@chinamobile.com>2019-10-15 16:28:59 +0800
committercyuamber <xuranyjy@chinamobile.com>2019-10-15 16:29:09 +0800
commit65be860e2a6844da71d4046254a189d911adbbd9 (patch)
tree5313cdd32205a22848f26a4bf0a99fe93ac53407 /usecaseui-portal/src/app/views
parent58372d3b8c3f99cbd199ea2c717388bb6b2eed16 (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/src/app/views')
-rw-r--r--usecaseui-portal/src/app/views/services/services-list/heal-model/heal-model.component.html72
-rw-r--r--usecaseui-portal/src/app/views/services/services-list/heal-model/heal-model.component.less0
-rw-r--r--usecaseui-portal/src/app/views/services/services-list/heal-model/heal-model.component.spec.ts25
-rw-r--r--usecaseui-portal/src/app/views/services/services-list/heal-model/heal-model.component.ts68
-rw-r--r--usecaseui-portal/src/app/views/services/services-list/services-list.component.html146
-rw-r--r--usecaseui-portal/src/app/views/services/services-list/services-list.component.ts41
6 files changed, 212 insertions, 140 deletions
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">*&nbsp;</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>
+ &nbsp;
+ </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"> &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>
+ <!-- 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">*&nbsp;</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>
- &nbsp;
- </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"> &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>
- <!-- 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 &nbsp;
- {{"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 &nbsp;
+ {{"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);
}