feat:add deleteModel component of service-list page

Change-Id: I29c64343321f216152f466a7f8650b54e63dde53
Issue-ID: USECASEUI-307
Signed-off-by: cyuamber <xuranyjy@chinamobile.com>

6 files changed, 119 insertions, 48 deletions

diff --git a/usecaseui-portal/src/app/views/services/services-list/delete-model/delete-model.component.html b/usecaseui-portal/src/app/views/services/services-list/delete-model/delete-model.component.html
new file mode 100644
index 00000000..5b516a0f
--- /dev/null
+++ b/usecaseui-portal/src/app/views/services/services-list/delete-model/delete-model.component.html
@@ -0,0 +1,34 @@
+<nz-modal nzWidth="428" [(nzVisible)]="deleteModalVisible" nzTitle=" {{'i18nTextDefine_delete' | translate}}"
+          (nzOnCancel)="deleteCancel()" (nzOnOk)="deleteOk()"
+          nzClassName="{{thisService['serviceDomain'] == 'Network Service'?'nsdeleteModel':'deleteModel'}}"
+          nzCancelText=" {{'i18nTextDefine_Cancel' | translate}} "
+          nzOkText=" {{'i18nTextDefine_modelOk' | translate}} ">
+  <h3><span style="color: red">*&nbsp;</span> {{"i18nTextDefine_SureDelete" | translate}} </h3>
+  <div class="question">
+    <h4> {{"i18nTextDefine_InstanceName" | translate}} :</h4>
+    <div class="deleteModelContent">{{ thisService["service-instance-name"] ||
+      thisService["nsInstanceName"] }}
+    </div>
+  </div>
+  <div class="question">
+    <h4> {{"i18nTextDefine_InstanceID" | translate}} :</h4>
+    <div class="deleteModelContent">{{ thisService["service-instance-id"] ||
+      thisService["nsInstanceId"] }}
+    </div>
+  </div>
+  <div *ngIf="thisService['serviceDomain'] == 'Network Service'">
+    <div class="question">
+      <h4> {{"i18nTextDefine_terminationType" | translate}} :</h4>
+      <nz-select style="width: 306px;" [(ngModel)]="terminationType">
+        <nz-option nzValue="graceful" nzLabel=" {{'i18nTextDefine_graceful' | translate}} "></nz-option>
+        <nz-option nzValue="forceful" nzLabel=" {{'i18nTextDefine_forceful' | translate}} "></nz-option>
+      </nz-select>
+    </div>
+    <div class="question">
+      <h4 *ngIf="terminationType=='graceful'"> {{"i18nTextDefine_gracefulTerminationTimeout" | translate}}
+        :</h4>
+      <input *ngIf="terminationType=='graceful'" style="width: 306px;" nz-input
+             [(ngModel)]="gracefulTerminationTimeout">
+    </div>
+  </div>
+</nz-modal>
diff --git a/usecaseui-portal/src/app/views/services/services-list/delete-model/delete-model.component.less b/usecaseui-portal/src/app/views/services/services-list/delete-model/delete-model.component.less
new file mode 100644
index 00000000..e69de29b
--- /dev/null
+++ b/usecaseui-portal/src/app/views/services/services-list/delete-model/delete-model.component.less
diff --git a/usecaseui-portal/src/app/views/services/services-list/delete-model/delete-model.component.spec.ts b/usecaseui-portal/src/app/views/services/services-list/delete-model/delete-model.component.spec.ts
new file mode 100644
index 00000000..e5e94c94
--- /dev/null
+++ b/usecaseui-portal/src/app/views/services/services-list/delete-model/delete-model.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DeleteModelComponent } from './delete-model.component';
+
+describe('DeleteModelComponent', () => {
+  let component: DeleteModelComponent;
+  let fixture: ComponentFixture<DeleteModelComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ DeleteModelComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(DeleteModelComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/usecaseui-portal/src/app/views/services/services-list/delete-model/delete-model.component.ts b/usecaseui-portal/src/app/views/services/services-list/delete-model/delete-model.component.ts
new file mode 100644
index 00000000..f9bf9a9c
--- /dev/null
+++ b/usecaseui-portal/src/app/views/services/services-list/delete-model/delete-model.component.ts
@@ -0,0 +1,42 @@
+import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
+
+@Component({
+  selector: 'app-delete-model',
+  templateUrl: './delete-model.component.html',
+  styleUrls: ['./delete-model.component.less']
+})
+export class DeleteModelComponent implements OnInit {
+  @Input()deleteModalVisible: boolean;
+  @Input()thisService;
+  @Input()terminationType;
+  @Input()loadingAnimateShow;
+  @Input()templateDeleteSuccessFaild;
+  @Input()gracefulTerminationTimeout;
+
+  @Output() cancel = new EventEmitter<boolean>();
+  @Output() deleteModalOK = new EventEmitter<any>();
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+    deleteOk() {
+        this.deleteModalVisible = false;
+        this.loadingAnimateShow = true;
+
+        if (this.thisService["serviceDomain"] === "Network Service") {
+            this.deleteModalOK.emit({
+                terminationType: this.terminationType,
+                gracefulTerminationTimeout: this.gracefulTerminationTimeout
+            })
+        } else {
+            this.deleteModalOK.emit()
+        }
+    }
+    deleteCancel() {
+        this.deleteModalVisible = 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 a97c3766..ce3844c1 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
@@ -222,41 +222,19 @@
                 </div>
             </ng-template>
         </nz-modal>
-        <!-- <app-delete-modal *ngIf="deleteModalVisible" [deleteModalVisible]="deleteModalVisible"></app-delete-modal> -->
-        <nz-modal nzWidth="428" [(nzVisible)]="deleteModalVisible" nzTitle=" {{'i18nTextDefine_delete' | translate}}"
-            (nzOnCancel)="deleteCancel()" (nzOnOk)="deleteOk(templateDeleteSuccessFaild)"
-            nzClassName="{{thisService['serviceDomain'] == 'Network Service'?'nsdeleteModel':'deleteModel'}}"
-            nzCancelText=" {{'i18nTextDefine_Cancel' | translate}} "
-            nzOkText=" {{'i18nTextDefine_modelOk' | translate}} ">
-            <h3><span style="color: red">*&nbsp;</span> {{"i18nTextDefine_SureDelete" | translate}} </h3>
-            <div class="question">
-                <h4> {{"i18nTextDefine_InstanceName" | translate}} :</h4>
-                <div class="deleteModelContent">{{ thisService["service-instance-name"] ||
-                    thisService["nsInstanceName"] }}
-                </div>
-            </div>
-            <div class="question">
-                <h4> {{"i18nTextDefine_InstanceID" | translate}} :</h4>
-                <div class="deleteModelContent">{{ thisService["service-instance-id"] ||
-                    thisService["nsInstanceId"] }}
-                </div>
-            </div>
-            <div *ngIf="thisService['serviceDomain'] == 'Network Service'">
-                <div class="question">
-                    <h4> {{"i18nTextDefine_terminationType" | translate}} :</h4>
-                    <nz-select style="width: 306px;" [(ngModel)]="terminationType">
-                        <nz-option nzValue="graceful" nzLabel=" {{'i18nTextDefine_graceful' | translate}} "></nz-option>
-                        <nz-option nzValue="forceful" nzLabel=" {{'i18nTextDefine_forceful' | translate}} "></nz-option>
-                    </nz-select>
-                </div>
-                <div class="question">
-                    <h4 *ngIf="terminationType=='graceful'"> {{"i18nTextDefine_gracefulTerminationTimeout" | translate}}
-                        :</h4>
-                    <input *ngIf="terminationType=='graceful'" style="width: 306px;" nz-input
-                        [(ngModel)]="gracefulTerminationTimeout">
-                </div>
-            </div>
-        </nz-modal>
+         <app-delete-model
+                 *ngIf="deleteModalVisible"
+                 [deleteModalVisible]="deleteModalVisible"
+                 [thisService]="thisService"
+                 [terminationType]="terminationType"
+                 [loadingAnimateShow]="loadingAnimateShow"
+                 [gracefulTerminationTimeout]="gracefulTerminationTimeout"
+                 [templateDeleteSuccessFaild]="templateDeleteSuccessFaild"
+                 (cancel)="deleteModalVisible=$event"
+                 (deleteModalOK)="deleteModalOK($event,templateDeleteSuccessFaild)"
+         >
+         </app-delete-model>
+
 
         <nz-modal nzWidth="428" [nzVisible]="healModelVisible" nzTitle=" {{'i18nTextDefine_Heal' | translate}} "
             (nzOnCancel)="healCancel()" (nzOnOk)="healOk(templatehealstarting,templatehealSuccessFaild)"
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 9de72233..96b4310c 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
@@ -539,21 +539,17 @@ export class ServicesListComponent implements OnInit {
         this.deleteModalVisible = true;
     }
 
-    deleteOk(templateDeleteSuccessFaild) {
+    deleteModalOK(obj: any,templateDeleteSuccessFaild) :void{
         this.deleteModalVisible = false;
         this.loadingAnimateShow = true;
         if (this.thisService["serviceDomain"] === "Network Service") {
-            this.deleteNsService(this.thisService);
+            this.deleteNsService(obj,this.thisService);
         } else {
             this.deleteService(this.thisService, templateDeleteSuccessFaild);
         }
         this.notification1.notificationStart(this.thisService['serviceDomain'],'deleteStarting',this.thisService["service-instance-name"] ||this.thisService["nsInstanceName"])
     }
 
-    deleteCancel() {
-        this.deleteModalVisible = false;
-    }
-
     deleteSuccessNotification(template: TemplateRef<{}>): void {
         this.notification.template(template);
     }
@@ -992,7 +988,7 @@ export class ServicesListComponent implements OnInit {
             })
     }
 
-    deleteService(service, templateDeleteSuccessFaild) {
+    deleteService(service:any, templateDeleteSuccessFaild) {
         let allprogress = {};  
         let querypros = [];  
         service.rate = 0;
@@ -1069,18 +1065,14 @@ export class ServicesListComponent implements OnInit {
         })
     }
 
-    deleteNsService(service) {
+    deleteNsService(obj:any,service:any) {
         service.rate = 0;
         service.status = "In Progress";
         service.tips = "";
         service.statusClass = "1002";
         let id = service.nsInstanceId || service["service-instance-id"];
         let operationType = "1002";
-        let requestBody = {
-            terminationType: this.terminationType,
-            gracefulTerminationTimeout: this.gracefulTerminationTimeout
-        }
-        this.stopNsService(id, requestBody).then((jobid) => {
+        this.stopNsService(id, obj).then((jobid) => {
             if (jobid === "Failed") {
                 service.status = "Failed";
                 this.notification1.notificationFailed(service.serviceDomain,'deleteStarting',service["service-instance-name"] ||service["nsInstanceName"])