diff options
Diffstat (limited to 'usecaseui-portal/src/app/components/e2e-creation')
5 files changed, 517 insertions, 0 deletions
diff --git a/usecaseui-portal/src/app/components/e2e-creation/e2e-creation.component.css b/usecaseui-portal/src/app/components/e2e-creation/e2e-creation.component.css new file mode 100644 index 00000000..f1d359f0 --- /dev/null +++ b/usecaseui-portal/src/app/components/e2e-creation/e2e-creation.component.css @@ -0,0 +1,77 @@ +/* + Copyright (C) 2018 CMCC, Inc. and others. All rights reserved. + + Licensed under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. + You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. +*/ +.title { + font: 700 18px/18px "思源黑体"; + color: #4c5e70; + margin-bottom: 18px; +} +hr { + border: none; + height: 2px; + background-color: #dce1e7; + margin-bottom: 10px; +} +.model { + background-color: #fff; + height: 90%; + overflow-y: auto; +} +.model .back { + position: absolute; + top: 10px; + right: 20px; +} +.model .creation { + position: relative; + width: 60%; + height: 100%; + overflow-y: auto; + border-radius: 5px; + padding: 20px; +} +.model .creation .baseparms h3 { + color: #3fa8eb; + font: 700 16px "Arial"; +} +.model .creation .baseparms h4 { + font: 700 16px "Arial"; +} +.model .creation .baseparms ul li { + margin: 3px 0; +} +.model .creation .baseparms ul li span { + display: inline-block; + width: 40%; + font: 700 14px "Arial"; + vertical-align: middle; + overflow: hidden; + text-overflow: ellipsis; + text-align: right; +} +.model .creation .baseparms ul li input { + width: 165px; +} +.model .creation .submit { + position: absolute; + top: 10px; + right: 20px; +} +.model .chart { + width: 40%; + padding: 10px; + height: 100%; + border-left: 10px solid #f3f3f3; +} diff --git a/usecaseui-portal/src/app/components/e2e-creation/e2e-creation.component.html b/usecaseui-portal/src/app/components/e2e-creation/e2e-creation.component.html new file mode 100644 index 00000000..0ada7dd1 --- /dev/null +++ b/usecaseui-portal/src/app/components/e2e-creation/e2e-creation.component.html @@ -0,0 +1,123 @@ +<!-- + Copyright (C) 2018 CMCC, Inc. and others. All rights reserved. + + Licensed under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. + You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. +--> +<h3 class="title"> Services List </h3> +<hr> +<div class="model"> + <!-- 创建数据 --> + <button class="back" nz-button (click)="goback()"><span><i class="anticon anticon-rollback"></i></span></button> + <div class="creation fl"> + <div *ngIf="createParams.commonParams.templateType=='E2E Service'" class="baseparms clearfix"> + <h3>Base</h3> + <ul> + <li><span>Name*</span> <input nz-input [(ngModel)]="service.name"></li> + <li><span>Description*</span> <input nz-input [(ngModel)]="service.description"></li> + </ul> + <br> + <h3>Template Parameters</h3> + <h4>template Inputs</h4> + <ul> + <li *ngFor="let parameter of templateParameters.inputs; let i = index;"> + <span *ngIf="parameter.type !== 'vf_location' && parameter.type !== 'sdn_controller'">{{parameter.name}}:</span> + <input *ngIf="parameter.type !== 'vf_location' && parameter.type !== 'sdn_controller'" nz-input [(ngModel)]="parameter.value"> + + <h5 *ngIf="parameter.type === 'vf_location'" style="padding-left:10px;">id: {{parameter.name}}</h5> + <span *ngIf="parameter.type === 'vf_location'"> vf_location: </span> + <nz-select *ngIf="parameter.type === 'vf_location'" style="width: 165px;" [(ngModel)]="parameter.value" nzAllowClear > + <nz-option *ngFor="let vim of vimInfos" [nzValue]="vim" [nzLabel]="vim.name"></nz-option> + </nz-select> + <!-- <nz-select *ngIf="parameter.type === 'sdn_controller'" style="width: 165px;" [(ngModel)]="parameter.value" nzAllowClear > + <nz-option *ngFor="let control of sdnControllers" [nzValue]="control" [nzLabel]="control.name"></nz-option> + </nz-select> --> + </li> + </ul> + <h4>nestedTemplate Inputs</h4> + <div *ngFor="let template of templateParameters.nestedTemplates;"> + <h4 style="font:400 14px 'Arial';color:#aaa;">templateName: {{template.name}}</h4> + <ul> + <li *ngFor="let input of template.inputs; let i = index;"> + <span *ngIf="input.type !== 'vf_location' && input.type !== 'sdn_controller'" > {{input.name}}: </span> + <input *ngIf="input.type !== 'vf_location' && input.type !== 'sdn_controller'" nz-input [(ngModel)]="input.value"> + + <h5 *ngIf="input.type === 'vf_location'" style="padding-left:10px;">id: {{input.name}}</h5> + <span *ngIf="input.type === 'vf_location'"> vf_location: </span> + <nz-select *ngIf="input.type === 'vf_location'" style="width: 165px;" [(ngModel)]="input.value" nzAllowClear > + <nz-option *ngFor="let vim of vimInfos" [nzValue]="vim" [nzLabel]="vim.name"></nz-option> + </nz-select> + <!-- <nz-select *ngIf="input.type === 'sdn_controller'" style="width: 165px;" [(ngModel)]="input.value" nzAllowClear > + <nz-option *ngFor="let control of sdnControllers" [nzValue]="control" [nzLabel]="control.name"></nz-option> + </nz-select> --> + </li> + </ul> + </div> + + </div> + + <div *ngIf="createParams.commonParams.templateType=='Network Service'" class="baseparms clearfix"> + <h3>Base</h3> + <ul> + <li><span>Name*</span> <input nz-input [(ngModel)]="ns_service.nsName"></li> + <li><span>Description*</span> <input nz-input [(ngModel)]="ns_service.description"></li> + </ul> + <h3>Template Parameters</h3> + <h4>template Inputs</h4> + <ul> + <li *ngFor="let parameter of nsTemplateParameters.inputs2; let i = index;"> + <span *ngIf="parameter.type !== 'vf_location' && parameter.type !== 'sdn_controller'">{{parameter.name}}:</span> + <input *ngIf="parameter.type !== 'vf_location' && parameter.type !== 'sdn_controller'" nz-input [(ngModel)]="parameter.value"> + + <h5 *ngIf="parameter.type === 'vf_location'" style="padding-left:10px;">id: {{parameter.name}}</h5> + <span *ngIf="parameter.type === 'vf_location'"> vf_location: </span> + <nz-select *ngIf="parameter.type === 'vf_location'" style="width: 165px;" [(ngModel)]="parameter.value" nzAllowClear > + <nz-option *ngFor="let vim of vimInfos" [nzValue]="vim" [nzLabel]="vim.name"></nz-option> + </nz-select> + <!-- <nz-select *ngIf="parameter.type === 'sdn_controller'" style="width: 165px;" [(ngModel)]="parameter.value" nzAllowClear > + <nz-option *ngFor="let control of sdnControllers" [nzValue]="control" [nzLabel]="control.name"></nz-option> + </nz-select> --> + </li> + </ul> + + <h4>vnfs Inputs</h4> + + <ul> + <li *ngFor="let vnf of nsTemplateParameters.vnfs;"> + <h5 style="padding-left:10px;">id: {{vnf.vnf_id}}</h5> + <span> vf_location: </span> + <nz-select style="width: 165px;" [(ngModel)]="vnf.value" nzAllowClear > + <nz-option *ngFor="let vim of vimInfos" [nzValue]="vim" [nzLabel]="vim.name"></nz-option> + </nz-select> + </li> + </ul> + + </div> + <button class="submit" nz-button [nzType]="'primary'" (click)="submit()"><span>Create</span></button> + </div> + + <!-- 图 --> + <div class="chart fr"> + Create Service + <div id="createChart"> + <svg width="100%" height="100%"> + + <image xlink:href="./assets/images/cloud-site.png" + x="25%" y="30%" width="50%"/> + + </svg> + + </div> + </div> + +</div> + diff --git a/usecaseui-portal/src/app/components/e2e-creation/e2e-creation.component.less b/usecaseui-portal/src/app/components/e2e-creation/e2e-creation.component.less new file mode 100644 index 00000000..b8c41877 --- /dev/null +++ b/usecaseui-portal/src/app/components/e2e-creation/e2e-creation.component.less @@ -0,0 +1,80 @@ +/* + Copyright (C) 2018 CMCC, Inc. and others. All rights reserved. + + Licensed under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. + You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. +*/ +.title { + font: 700 18px/18px "思源黑体"; + color: #4c5e70; + margin-bottom: 18px; +} +hr { + border: none; + height: 2px; + background-color: #dce1e7; + margin-bottom: 10px; +} +.model { + background-color: #fff; + height: 90%; + overflow-y: auto; + .back { + position: absolute; + top: 10px; + right: 20px; + } + .creation{ + position: relative; + width: 60%; + height: 100%; + overflow-y: auto; + border-radius: 5px; + padding: 20px; + .baseparms { + h3 { + color: #3fa8eb; + font: 700 16px "Arial"; + } + h4 { + font: 700 16px "Arial"; + } + ul li { + // display: inline-block; + margin: 3px 0; + span { + display: inline-block; + width: 40%; + font: 700 14px "Arial"; + vertical-align: middle; + overflow: hidden; + text-overflow: ellipsis; + text-align: right; + } + input { + width: 165px; + } + } + } + .submit { + position: absolute; + top: 10px; + right: 20px; + } + } + .chart { + width: 40%; + padding: 10px; + height: 100%; + border-left: 10px solid #f3f3f3; + } +} diff --git a/usecaseui-portal/src/app/components/e2e-creation/e2e-creation.component.spec.ts b/usecaseui-portal/src/app/components/e2e-creation/e2e-creation.component.spec.ts new file mode 100644 index 00000000..de00c43f --- /dev/null +++ b/usecaseui-portal/src/app/components/e2e-creation/e2e-creation.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { E2eCreationComponent } from './e2e-creation.component'; + +describe('E2eCreationComponent', () => { + let component: E2eCreationComponent; + let fixture: ComponentFixture<E2eCreationComponent>; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ E2eCreationComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(E2eCreationComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/usecaseui-portal/src/app/components/e2e-creation/e2e-creation.component.ts b/usecaseui-portal/src/app/components/e2e-creation/e2e-creation.component.ts new file mode 100644 index 00000000..f478c699 --- /dev/null +++ b/usecaseui-portal/src/app/components/e2e-creation/e2e-creation.component.ts @@ -0,0 +1,212 @@ +/* + Copyright (C) 2018 CMCC, Inc. and others. All rights reserved. + + Licensed under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. + You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. +*/ +import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core'; +import { MyhttpService } from '../../myhttp.service'; + +@Component({ + selector: 'app-e2e-creation', + templateUrl: './e2e-creation.component.html', + styleUrls: ['./e2e-creation.component.less'] +}) +export class E2eCreationComponent implements OnInit { + + constructor( private myhttp:MyhttpService ) { } + + ngOnInit() { + this.getTemParameters(); + this.getVimInfo(); + this.getSdnControllers(); + console.log(this.createParams); + } + + @Output() e2eCloseCreate = new EventEmitter(); + @Output() nsCloseCreate = new EventEmitter(); + @Input() createParams; + + + // e2e serviceTemplateParameters + templateParameters = { + invariantUUID: "", + uuid: "", + name: "", + type: "", + version: "", + description: "", + category: "", + subcategory: "", + customizationUuid: "", + inputs:[], + nestedTemplates:[] + }; + // ns serviceTemplateParameters + nsTemplateParameters = { + inputs:{}, + inputs2:[], + vnfs:[] + } + getTemParameters(){ //获取模板参数 + let type = this.createParams.commonParams.templateType == "E2E Service" ? "e2e" : "ns"; + this.myhttp.getTemplateParameters(type,this.createParams.template) + .subscribe((data)=>{ + console.log(this.createParams); + console.log(data); + if(type == "e2e"){ + this.templateParameters = data; + this.templateParameters.nestedTemplates.forEach((item)=>{ + item.inputs = item.inputs.filter((input)=>{return input.type !== "sdn_controller"}); + }) + }else if(type == "ns"){ + this.nsTemplateParameters = data; + this.nsTemplateParameters["inputs2"] = []; + let inputs = this.nsTemplateParameters.inputs; + for(let key in inputs){ + this.nsTemplateParameters["inputs2"].push({name:key,type:inputs[key].type,value:inputs[key].value}) + } + console.log(this.nsTemplateParameters); + } + + + }) + } + vimInfos=[]; + getVimInfo() { + this.myhttp.getVimInfo() + .subscribe((data)=>{ + this.vimInfos = data.map((item)=>{return {name:item['cloud-owner'],id:item['cloud-region-id']}}); + }) + }; + sdnControllers=[]; + getSdnControllers(){ + this.myhttp.getSdnControllers() + .subscribe((data)=>{ + this.sdnControllers = data.map((item)=>{return {name:item['thirdparty-sdnc-id'],id:item['thirdparty-sdnc-id']}}); + }) + } + + // e2e requstbody + service = { + name: "", + description: "", + serviceInvariantUuid: "", + serviceUuid: "", // uuid ?? + globalSubscriberId: "", // "customer.id", + serviceType: "", // "serviceType.value", + parameters: { + locationConstraints:[ + + ], + resources: [], + requestInputs: {}, + } + + } + + // ns requstbody + ns_service = { + csarId: "", + nsName: "", + description: "", + context: { + globalCustomerId: "", + serviceType: "" + } + } + ns_service2 = { + locationConstraints: [ + + ], + additionalParamForNs: { + } + } + submit(){ + let type = this.createParams.commonParams.templateType == "E2E Service" ? "e2e" : "ns"; + if(type == "e2e"){ + this.service.serviceInvariantUuid = this.templateParameters.invariantUUID; + this.service.serviceUuid = this.templateParameters.uuid; + this.service.globalSubscriberId = this.createParams.commonParams.customer.id; + this.service.serviceType = this.createParams.commonParams.serviceType.name; + + this.templateParameters.inputs.forEach((item)=>{ + this.service.parameters.requestInputs[item.name] = item.value == undefined ? item.defaultValue : item.value; + }) + + this.templateParameters.nestedTemplates.forEach((item)=>{ + let nsService = { + resourceName: item.name, + resourceInvariantUuid: item.invariantUUID, + resourceUuid: item.uuid, + resourceCustomizationUuid: item.customizationUuid, + parameters: { + locationConstraints:[], + resources:[], + requestInputs:{} + } + } + item.inputs.forEach((input)=>{ + if(input.type == "vf_location"){ + let location = { + vnfProfileId: input.name, + locationConstraints:{ + vimId:input.value.id + } + } + nsService.parameters.locationConstraints.push(location); + } + }) + this.service.parameters.resources.push(nsService); + }) + + this.e2eCloseCreate.emit(this.service); + + }else if(type == "ns"){ + //create ns instance + this.ns_service.csarId = this.createParams.template.id; + this.ns_service.context.globalCustomerId = this.createParams.commonParams.customer.id; + this.ns_service.context.serviceType = this.createParams.commonParams.serviceType.name; + + this.nsTemplateParameters.inputs2.forEach((input)=>{ + this.ns_service2.additionalParamForNs[input.name] = input.value == undefined ? input.defaultValue : input.value; + }) + this.nsTemplateParameters.vnfs.forEach((vnf)=>{ + let vnfparams = { + vnfProfileId: vnf.vnf_id, + locationConstraints: { + vimid: vnf.value.id, + accessinfo: { + tenant: "" + }, + accessInfo: { + tenant: "" + } + } + } + this.ns_service2.locationConstraints.push(vnfparams); + }) + console.log(this.ns_service2); + + let requstbody = { + step1:this.ns_service, + step2:this.ns_service2 + } + this.nsCloseCreate.emit(requstbody); + } + + } + goback(){ + this.e2eCloseCreate.emit(); + } + +} |