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>

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);
     }