feat:add scaleModel component of services-list page

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

4 files changed, 118 insertions, 0 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;
+    }
+
+}