feat:add scaleModel component of services-list page

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

6 files changed, 165 insertions, 99 deletions

diff --git a/usecaseui-portal/src/app/views/services/services-list/scale-model/scale-model.component.html b/usecaseui-portal/src/app/views/services/services-list/scale-model/scale-model.component.html
new file mode 100644
index 00000000..cb873149
--- /dev/null
+++ b/usecaseui-portal/src/app/views/services/services-list/scale-model/scale-model.component.html
@@ -0,0 +1,40 @@
+<nz-modal nzWidth="428" [nzVisible]="scaleModelVisible" nzTitle=" {{'i18nTextDefine_Scale' | translate}} "
+          (nzOnCancel)="scaleCancel()" (nzOnOk)="scaleOk()"
+          nzClassName="scaleModel" nzCancelText=" {{'i18nTextDefine_Cancel' | translate}} "
+          nzOkText=" {{'i18nTextDefine_modelOk' | translate}} ">
+  <h3><span style="color: red">*&nbsp;</span> {{"i18nTextDefine_SureScale" | translate}} </h3>
+  <div class="question">
+    <h4> {{"i18nTextDefine_InstanceID" | translate}} :</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>
+    <div class="e2eScaleContent">
+      <span class="e2eScaleLable"> {{"i18nTextDefine_ScaleType" | translate}} :</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"> {{"i18nTextDefine_AspectId" | translate}} :</span>
+      <input style="width: 165px;" nz-input [(ngModel)]="item.aspectId" placeholder="string">
+    </div>
+    <div class="e2eScaleContent">
+      <span class="e2eScaleLable"> {{"i18nTextDefine_Number_Of_Steps" | translate}} :</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"> {{"i18nTextDefine_ScalingDirection" | translate}} :</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>
\ No newline at end of file
diff --git a/usecaseui-portal/src/app/views/services/services-list/scale-model/scale-model.component.less b/usecaseui-portal/src/app/views/services/services-list/scale-model/scale-model.component.less
new file mode 100644
index 00000000..e69de29b
--- /dev/null
+++ b/usecaseui-portal/src/app/views/services/services-list/scale-model/scale-model.component.less
diff --git a/usecaseui-portal/src/app/views/services/services-list/scale-model/scale-model.component.spec.ts b/usecaseui-portal/src/app/views/services/services-list/scale-model/scale-model.component.spec.ts
new file mode 100644
index 00000000..5d069ee4
--- /dev/null
+++ b/usecaseui-portal/src/app/views/services/services-list/scale-model/scale-model.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ScaleModelComponent } from './scale-model.component';
+
+describe('ScaleModelComponent', () => {
+  let component: ScaleModelComponent;
+  let fixture: ComponentFixture<ScaleModelComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ScaleModelComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ScaleModelComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/usecaseui-portal/src/app/views/services/services-list/scale-model/scale-model.component.ts b/usecaseui-portal/src/app/views/services/services-list/scale-model/scale-model.component.ts
new file mode 100644
index 00000000..c1b9a86e
--- /dev/null
+++ b/usecaseui-portal/src/app/views/services/services-list/scale-model/scale-model.component.ts
@@ -0,0 +1,53 @@
+import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
+
+@Component({
+  selector: 'app-scale-model',
+  templateUrl: './scale-model.component.html',
+  styleUrls: ['./scale-model.component.less']
+})
+export class ScaleModelComponent implements OnInit {
+  @Input()scaleModelVisible: boolean;
+  @Input()templatescalestarting;
+  @Input()templateScaleSuccessFaild;
+  @Input()thisService;
+  @Input()e2e_nsData;
+  @Input()customerSelected;
+  @Input()serviceTypeSelected;
+
+  @Output() cancel = new EventEmitter<boolean>();
+  @Output() scaleModalOK = new EventEmitter<any>();
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+    scaleOk() {
+        this.scaleModelVisible = false;
+        let requestBody = {
+            "service": {
+                "serviceInstanceName": this.thisService["service-instance-name"],
+                "serviceType": this.serviceTypeSelected.name,
+                "globalSubscriberId": this.customerSelected.id,
+                "resources": this.e2e_nsData.map((item) => {
+                    return {
+                        "resourceInstanceId": item["netWorkServiceId"],
+                        "scaleType": item["scaleType"],
+                        "scaleNsData": {
+                            "scaleNsByStepsData": {
+                                "aspectId": item["aspectId"],
+                                "numberOfSteps": item["numberOfSteps"],
+                                "scalingDirection": item["scalingDirection"]
+                            }
+                        }
+                    }
+                })
+            }
+        };
+        this.scaleModalOK.emit(requestBody)
+    }
+
+    scaleCancel() {
+        this.scaleModelVisible = 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 ce3844c1..ff1924fb 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
@@ -153,76 +153,8 @@
                 </ng-template>
             </tbody>
         </nz-table>
-        <nz-modal nzWidth="428" [nzVisible]="scaleModelVisible" nzTitle=" {{'i18nTextDefine_Scale' | translate}} "
-            (nzOnCancel)="scaleCancel()" (nzOnOk)="scaleOk(templatescalestarting,templateScaleSuccessFaild)"
-            nzClassName="scaleModel" nzCancelText=" {{'i18nTextDefine_Cancel' | translate}} "
-            nzOkText=" {{'i18nTextDefine_modelOk' | translate}} ">
-            <h3><span style="color: red">*&nbsp;</span> {{"i18nTextDefine_SureScale" | translate}} </h3>
-            <div class="question">
-                <h4> {{"i18nTextDefine_InstanceID" | translate}} :</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>
-                <div class="e2eScaleContent">
-                    <span class="e2eScaleLable"> {{"i18nTextDefine_ScaleType" | translate}} :</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"> {{"i18nTextDefine_AspectId" | translate}} :</span>
-                    <input style="width: 165px;" nz-input [(ngModel)]="item.aspectId" placeholder="string">
-                </div>
-                <div class="e2eScaleContent">
-                    <span class="e2eScaleLable"> {{"i18nTextDefine_Number_Of_Steps" | translate}} :</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"> {{"i18nTextDefine_ScalingDirection" | translate}} :</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>
 
-            <ng-template #templatescalestarting>
-                <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">E2E &nbsp;
-                            {{"i18nTextDefine_InstanceTeminationStarting" | 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-delete-model
+        <app-delete-model
                  *ngIf="deleteModalVisible"
                  [deleteModalVisible]="deleteModalVisible"
                  [thisService]="thisService"
@@ -234,8 +166,19 @@
                  (deleteModalOK)="deleteModalOK($event,templateDeleteSuccessFaild)"
          >
          </app-delete-model>
-
-
+        <app-scale-model
+                *ngIf="scaleModelVisible"
+                [scaleModelVisible]="scaleModelVisible"
+                [thisService]="thisService"
+                [e2e_nsData]="e2e_nsData"
+                [customerSelected]="customerSelected"
+                [serviceTypeSelected]="serviceTypeSelected"
+                [templatescalestarting]="templatescalestarting"
+                [templateScaleSuccessFaild]="templateScaleSuccessFaild"
+                (cancel)="scaleModelVisible=$event"
+                (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}} "
@@ -341,6 +284,7 @@
 
         <app-notification #notification [isServicesList]="true" [customerSelected]="customerSelected"></app-notification>
         <!-- add notification-->
+
         <ng-template #templateCreatestarting>
             <div class="ant-notification-notice-content">
                 <div class="ant-notification-notice-with-icon">
@@ -490,6 +434,35 @@
                 </div>
             </div>
         </ng-template>
+        <ng-template #templatescalestarting>
+            <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">E2E &nbsp;
+                        {{"i18nTextDefine_InstanceTeminationStarting" | 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 #templateScaleSuccessFaild>
             <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 96b4310c..47ba6f9d 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
@@ -365,43 +365,18 @@ export class ServicesListComponent implements OnInit {
             customerId: this.customerSelected.id,
             serviceType: this.serviceTypeSelected.name,
             serviceId: service["service-instance-id"]
-        }
+        };
         this.myhttp.getE2e_nsData(paramsObj)
             .subscribe((data) => {
                 this.e2e_nsData = data;
             })
     }
 
-    scaleOk(templatescalestarting, templateScaleSuccessFaild) {
-        this.scaleModelVisible = false;
-        let requestBody = {
-            "service": {
-                "serviceInstanceName": this.thisService["service-instance-name"],
-                "serviceType": this.serviceTypeSelected.name,
-                "globalSubscriberId": this.customerSelected.id,
-                "resources": this.e2e_nsData.map((item) => {
-                    return {
-                        "resourceInstanceId": item["netWorkServiceId"],
-                        "scaleType": item["scaleType"],
-                        "scaleNsData": {
-                            "scaleNsByStepsData": {
-                                "aspectId": item["aspectId"],
-                                "numberOfSteps": item["numberOfSteps"],
-                                "scalingDirection": item["scalingDirection"]
-                            }
-                        }
-                    }
-                })
-            }
-        }
-        this.scaleE2eService(this.thisService, requestBody, templateScaleSuccessFaild);
+    scaleModalOK(obj: any,templatescalestarting,templateScaleSuccessFaild) :void{
+        this.scaleE2eService(this.thisService, obj, templateScaleSuccessFaild);
         this.scaleNotification(templatescalestarting);
     }
 
-    scaleCancel() {
-        this.scaleModelVisible = false;
-    }
-
     scaleNotification(template: TemplateRef<{}>): void {
         this.notification.template(template);
     }