diff options
author | 2019-10-09 08:13:41 +0000 | |
---|---|---|
committer | 2019-10-09 08:49:34 +0000 | |
commit | a82b518867281a85f7c80a3604f40a91409ea964 (patch) | |
tree | fad9b3cb3f04806580bc1889d85012110e235021 /usecaseui-portal/src/app/views/services/services-list/create-model | |
parent | bb79ef05913b5b66807d4bfcd096e0144133b13b (diff) |
Add create model component
Change-Id: Ia99496892c82024af895d0abc37c4cda548872a5
Issue-ID: USECASEUI-307
Signed-off-by: cyuamber <xuranyjy@chinamobile.com>
Diffstat (limited to 'usecaseui-portal/src/app/views/services/services-list/create-model')
4 files changed, 273 insertions, 0 deletions
diff --git a/usecaseui-portal/src/app/views/services/services-list/create-model/create-model.component.html b/usecaseui-portal/src/app/views/services/services-list/create-model/create-model.component.html new file mode 100644 index 00000000..aa2cb06a --- /dev/null +++ b/usecaseui-portal/src/app/views/services/services-list/create-model/create-model.component.html @@ -0,0 +1,60 @@ +<nz-modal nzWidth="428" [(nzVisible)]="isVisible" nzTitle=" {{'i18nTextDefine_ServiceCreation' | translate}} " + (nzOnCancel)="handleCancel()" + (nzOnOk)="handleOk()" nzClassName="serviceCreationModel" + nzCancelText=" {{'i18nTextDefine_Cancel' | translate}} " + nzOkText=" {{'i18nTextDefine_modelOk' | translate}} "> + <div class="select-list"> + <span style="display:inline-block;" class="label"> {{"i18nTextDefine_Customer" | translate}} : </span> + <nz-select style="width: 176px;float: right;" [(ngModel)]="currentCustomer.name" nzAllowClear + (ngModelChange)="customerChange()"> + <nz-option *ngFor="let item of customerList" [nzValue]="item.name" [nzLabel]="item.name"></nz-option> + </nz-select> + </div> + <div class="select-list"> + <span style="display:inline-block;"> {{"i18nTextDefine_ServiceType" | translate}} : </span> + <nz-select style="width: 176px;float: right;" [(ngModel)]="currentServiceType.name" nzAllowClear> + <nz-option *ngFor="let item of serviceTypes" [nzValue]="item.name" [nzLabel]="item.name"> + </nz-option> + </nz-select> + </div> + <div class="select-list"> + <span style="display:inline-block;"> {{"i18nTextDefine_UseCase" | translate}} : </span> + <nz-select style="width: 176px;float: right;" [(ngModel)]="templateTypeSelected" nzAllowClear + (ngModelChange)="choseTemplateType()"> + <nz-option nzValue="SOTN" nzLabel="SOTN"></nz-option> + <nz-option nzValue="CCVPN" nzLabel="CCVPN"></nz-option> + <nz-option nzValue="E2E Service" nzLabel="E2E Service"></nz-option> + <nz-option nzValue="Network Service" nzLabel="Network Service"></nz-option> + </nz-select> + </div> + <div class="select-list"> + <span style="display:inline-block;width:70px;"> {{"i18nTextDefine_Template" | translate}} : </span> + <nz-select style="width: 176px;float: right;" [(ngModel)]="currentTemplate" nzAllowClear> + <nz-option *ngFor="let item of templates" [nzValue]="item" [nzLabel]="item.name"></nz-option> + </nz-select> + </div> + <div *ngIf="templateTypeSelected === 'E2E Service'"> + <div class="select-list"> + <span style="display:inline-block;width:70px;"> {{"i18nTextDefine_Orchestrator" | translate}} : </span> + <nz-select style="width: 176px;float: right;" [(ngModel)]="orchestratorSelected" nzAllowClear> + <nz-option *ngFor="let item of orchestratorList" [nzValue]="item" [nzLabel]="item.name"></nz-option> + </nz-select> + </div> + </div> + <div *ngIf="templateTypeSelected === 'E2E Service'"> + <div class="check-box" style="margin:30px; height: 50px"> + <input class="check-box-style" style="zoom: 1.8; width: 70px" type="checkbox" + [(ngModel)]="isSol005Interface" value="true" nzAllowClear> + <label class="label" style="font-size: 20px; color: rgb(60,79,140,0.5)">Sol005</label> + </div> + </div> + <div class="select-list" style="color: red;margin-left: 66px;" *ngIf="temParametersTips"> + {{"i18nTextDefine_Templateparsingfailed" | translate}} + </div> + + </nz-modal> + <div class="loading" *ngIf="loadingAnimateShow"> + <img src="assets/images/loading-animate2.gif" alt="loading"> + <p>Please wating……</p> + </div> + diff --git a/usecaseui-portal/src/app/views/services/services-list/create-model/create-model.component.less b/usecaseui-portal/src/app/views/services/services-list/create-model/create-model.component.less new file mode 100644 index 00000000..a42c4128 --- /dev/null +++ b/usecaseui-portal/src/app/views/services/services-list/create-model/create-model.component.less @@ -0,0 +1,43 @@ +select-list{
+ width: 320px;
+ height: 32px;
+ line-height: 32px;
+ margin: 35px auto;
+ .select-list>span{
+ text-align: right;
+ width: 110px!important;
+ line-height: 32px;
+ }
+}
+.loading{
+ width: 100%;
+ height: 100%;
+ position: fixed;
+ top: 0;
+ margin-top: -50px;
+ margin-left: -50px;
+ z-index: 1001;
+ text-align: center;
+ background: transparent;
+ p{
+ color: #0DA9E2;
+ text-align: center;
+ position: absolute;
+ width: 300px;
+ height: 30px;
+ line-height: 30px;
+ top: 71%;
+ left: 36%;
+ margin-top: -150px;
+ margin-left: -150px;
+ }
+ img{
+ width: 300px;
+ height: 300px;
+ position: absolute;
+ top: 50%;
+ left: 36%;
+ margin-top: -150px;
+ margin-left: -150px;
+ }
+}
diff --git a/usecaseui-portal/src/app/views/services/services-list/create-model/create-model.component.spec.ts b/usecaseui-portal/src/app/views/services/services-list/create-model/create-model.component.spec.ts new file mode 100644 index 00000000..fd57b3a7 --- /dev/null +++ b/usecaseui-portal/src/app/views/services/services-list/create-model/create-model.component.spec.ts @@ -0,0 +1,26 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { CreateModelComponent } from './create-model.component'; + +describe('CreateModelComponent', () => { + let component: CreateModelComponent; + let fixture: ComponentFixture<CreateModelComponent>; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ CreateModelComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(CreateModelComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); + diff --git a/usecaseui-portal/src/app/views/services/services-list/create-model/create-model.component.ts b/usecaseui-portal/src/app/views/services/services-list/create-model/create-model.component.ts new file mode 100644 index 00000000..f7cce450 --- /dev/null +++ b/usecaseui-portal/src/app/views/services/services-list/create-model/create-model.component.ts @@ -0,0 +1,144 @@ +import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core'; +import { ServiceListService } from '../../../../core/services/serviceList.service'; + +@Component({ + selector: 'app-create-model', + templateUrl: './create-model.component.html', + styleUrls: ['./create-model.component.less'], +}) +export class CreateModelComponent implements OnInit { + @Input()isVisible: boolean; + @Input()customerList; + @Input()serviceTypeList; + @Input()customerSelected; + @Input()serviceTypeSelected; + + @Output() cancel = new EventEmitter<boolean>(); + @Output() createdModalShow = new EventEmitter<any>(); + + serviceTypes: any[]; + currentCustomer: any; + currentServiceType: any; + templateTypeSelected:string = "CCVPN"; + templates: any[] = []; + currentTemplate: object = { name: null }; + orchestratorList: any[] = []; + orchestratorSelected: object = { name: null, id: null }; + isSol005Interface: boolean = false; + temParametersTips: boolean = false; + createData: Object = {}; + loadingAnimateShow: boolean = false; + + constructor( private http: ServiceListService) {} + + ngOnInit() { + this.serviceTypes = this.serviceTypeList; + this.currentCustomer = JSON.parse(JSON.stringify(this.customerSelected)); + this.currentServiceType = JSON.parse(JSON.stringify(this.serviceTypeSelected)); + this.getAlltemplates(); + } + + getServiceType(): void{ + this.http.getServiceTypes(this.currentCustomer) + .subscribe((data) => { + this.serviceTypes = data.map((item) => { + return { name: item["service-type"] } + }); + }) + } + + getAlltemplates() { + this.http.getAllServiceTemplates(this.templateTypeSelected) + .subscribe((data) => { + this.templates = data; + if (this.templateTypeSelected == "Network Service") { + this.templates = data.filter((d) => { + return typeof d.packageInfo.csarName == "string"; + }).map((item) => { + let cName = item.packageInfo.csarName.split("/").reverse()[0]; + return { name: cName, id: item.csarId, packageInfo: item.packageInfo } + }); + } + this.currentTemplate = this.templates[0]; + }, (err) => { + console.log(err); + }) + } + + getallOrchestrators() { + this.http.getAllOrchestrators() + .subscribe((data) => { + if(data.length > 0){ + this.orchestratorList = data.map((item) => { + return { name: item["name"], id: item["name"] } + }); + this.orchestratorSelected = this.orchestratorList[0]; + } + }) + } + + handleCancel(): void { + this.isVisible = false; + this.cancel.emit(false); + this.loadingAnimateShow = false; + } + + customerChange(): void { + this.getServiceType(); + } + + choseTemplateType() { + if(this.templateTypeSelected === 'E2E Service'){ + this.getallOrchestrators(); + } + this.getAlltemplates(); + } + + handleOk(): void { + if (this.templateTypeSelected === "SOTN" || this.templateTypeSelected === "CCVPN") { + this.createData = { + commonParams: { + customer: this.currentCustomer, + serviceType: this.currentServiceType, + templateType: this.templateTypeSelected + }, + template: this.currentTemplate + }; + } else if (this.templateTypeSelected === "E2E Service" || this.templateTypeSelected === "Network Service") { + this.createData = { + commonParams: { + customer: this.currentCustomer, + serviceType: this.currentServiceType, + templateType: this.templateTypeSelected + }, + template: this.currentTemplate, + orchestrator: this.orchestratorSelected, + isSol005Interface: this.isSol005Interface + }; + } + this.getTemParameters(); + } + + getTemParameters() { + let chosedtemplates = this.createData["template"]; + let types = this.createData["commonParams"].templateType; + if (types == "E2E Service") { + types = "e2e"; + } else if (types == "Network Service") { + types = "ns"; + } + this.loadingAnimateShow = true; + this.http.getTemplateParameters(types, chosedtemplates) + .subscribe((data) => { + this.loadingAnimateShow = false; + if (data.status == "FAILED") { + this.temParametersTips = true; + this.isVisible = true; + } else { + this.cancel.emit(false); + this.temParametersTips = false; + this.createdModalShow.emit({templateType: this.templateTypeSelected, data, createData: this.createData}) + } + }) + } +}
\ No newline at end of file |