diff options
author | 2019-08-22 16:55:57 +0800 | |
---|---|---|
committer | 2019-08-22 16:56:09 +0800 | |
commit | d0f5347dc16b5aa9fc95eb520fbc9a1c7b672b09 (patch) | |
tree | b3891d8de290d755d7f0f00d35bb77d3b89ad747 /usecaseui-portal/src/app/components/e2e-creation | |
parent | 56923755c761897cc86ca2457667fcc3e6a0e43f (diff) |
feat: change the project structure and add mock data function
Change-Id: I381845bff5eb37d1fab3eba8cf1ae7838df523b7
Issue-ID: USECASEUI-307
Signed-off-by: cyuamber <xuranyjy@chinamobile.com>
Diffstat (limited to 'usecaseui-portal/src/app/components/e2e-creation')
5 files changed, 0 insertions, 753 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 deleted file mode 100644 index 5dce6c92..00000000 --- a/usecaseui-portal/src/app/components/e2e-creation/e2e-creation.component.css +++ /dev/null @@ -1,77 +0,0 @@ -/* - Copyright (C) 2019 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 deleted file mode 100644 index 49cba838..00000000 --- a/usecaseui-portal/src/app/components/e2e-creation/e2e-creation.component.html +++ /dev/null @@ -1,138 +0,0 @@ -<!-- - Copyright (C) 2019 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. ---> -<div class="model creation-model"> - <!-- Create data --> - <div class="top-title"> - <h3 class="title fl">{{createParams.commonParams.templateType}} {{"i18nTextDefine_InstanceCreation" | translate}} </h3> - <div class="fl" style="width: 20%"> - <button class="submit" nz-button (click)="submit()"> - <span> {{"i18nTextDefine_Create" | translate}} </span> - </button> - <button class="back" nz-button (click)="goback()"></button> - </div> - </div> - <div class="e2ecreate-content"> - <div class="creation fl"> - <div *ngIf="createParams.commonParams.templateType=='E2E Service'" class="baseparms clearfix"> - <div class="vnf-box"> - <h3> {{"i18nTextDefine_Base" | translate}} </h3> - <ul class="clearfix"> - <li> - <span>Name:</span> - <input nz-input [(ngModel)]="service.name"> - </li> - <li> - <span>Description:</span> - <input nz-input [(ngModel)]="service.description"> - </li> - <li> - <span>COS:</span> - <input nz-input [(ngModel)]="service.COS"> - </li> - <li> - <span>EBS:</span> - <input nz-input [(ngModel)]="service.EBS"> - </li> - </ul> - </div> - <div class="vnf-box" *ngIf="templateParameters.inputs.length>0"> - <h3>{{"i18nTextDefine_templateInputs" | translate}}</h3> - <ul> - <li *ngFor="let parameter of templateParameters.inputs; let i = index;"> - <span *ngIf="parameter.type !== 'vf_location' && parameter.type !== 'sdn_controller'" title="{{parameter.name}}">{{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'" [(ngModel)]="parameter.value" nzAllowClear> - <nz-option *ngFor="let vim of vimInfos" [nzValue]="vim" [nzLabel]="vim.name"></nz-option> - </nz-select> - </li> - </ul> - </div> - <div class="vnf-box" *ngFor="let template of templateParameters.nestedTemplates;"> - <h3>{{template.name}}</h3> - <ul> - <li *ngFor="let input of template.inputs; let i = index;"> - <span *ngIf="input.type !== 'vf_location' && input.type !== 'sdn_controller'" title="{{input.name}}"> {{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'" [(ngModel)]="input.value" nzAllowClear> - <nz-option *ngFor="let vim of vimInfos" [nzValue]="vim" [nzLabel]="vim.name"></nz-option> - </nz-select> - </li> - </ul> - </div> - </div> - - <div *ngIf="createParams.commonParams.templateType=='Network Service'" class="baseparms clearfix"> - <div class="vnf-box"> - <h3> {{"i18nTextDefine_Base" | translate}} </h3> - <ul class="clearfix"> - <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> - </div> - <div class="vnf-box" *ngIf="nsTemplateParameters.inputs2.length>0"> - <h4>{{"i18nTextDefine_templateInputs" | translate}}</h4> - <ul> - <li *ngFor="let parameter of nsTemplateParameters.inputs2; let i = index;"> - <span *ngIf="parameter.type !== 'vf_location' && parameter.type !== 'sdn_controller'" title="{{parameter.name}}">{{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'" [(ngModel)]="parameter.value" nzAllowClear> - <nz-option *ngFor="let vim of vimInfos" [nzValue]="vim" [nzLabel]="vim.name"></nz-option> - </nz-select> - </li> - </ul> - </div> - <div class="vnf-box"> - <h4 *ngIf="nsTemplateParameters.vnfs.length>0">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 [(ngModel)]="vnf.value" nzAllowClear> - <nz-option *ngFor="let vim of vimInfos" [nzValue]="vim" [nzLabel]="vim.name"></nz-option> - </nz-select> - </li> - </ul> - </div> - </div> - </div> - <div class="dividing-line fl"></div> - <!-- chart --> - <div class="chart fr"> - <div id="createChart"> - <svg width="100%" height="100%"> - </svg> - </div> - </div> - </div> - -</div>
\ No newline at end of file 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 deleted file mode 100644 index 35b91799..00000000 --- a/usecaseui-portal/src/app/components/e2e-creation/e2e-creation.component.less +++ /dev/null @@ -1,159 +0,0 @@ -/* - Copyright (C) 2019 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: #F7F8FC; - height: 100%; - overflow-y: auto; - position: relative; - .top-title{ - width: 100%; - padding: 20px; - position: relative; - display: inline-block; - } - .submit{ - position: absolute; - width:84px; - height: 35px; - top: 10px; - right: 85px; - color: #fff; - font-size: 18px; - background:linear-gradient(90deg,rgba(99,194,246,1) 0%,rgba(62,155,255,1) 100%) !important; - border-radius:4px; - border: none!important; - border-color:rgba(0,0,0,0)!important; - } - .submit:hover{ - background:linear-gradient(90deg, rgb(103, 207, 246) 0%, rgb(69, 175, 255) 100%) !important; - border: none; - } - .back,.back:hover{ - position: absolute; - top: 10px; - right: 20px; - display: inline-block; - width: 35px; - height: 35px; - background:url("../../../assets/images/Return-icon.png") no-repeat!important; - background-size: 100%!important; - border-radius:4px; - color: #D7D7D7; - cursor: pointer; - } - .back:hover{ - background: url("../../../assets/images/Return-icon-active.png")!important; - background-size: 100%!important; - } - .top-title h3.title { - height: 35px; - width: 80%; - font-size:16px; - font-family:ArialMT; - color:#3C4F8C; - line-height:35px; - display: inline-block; - } - .e2ecreate-content{ - position: relative; - width: 98%; - height: 100%; - margin-left: 30px; - box-shadow:0px 10px 15px 2px rgba(222,222,222,0.5); - background: #fff; - border-radius:2px; - } - .creation{ - position: relative; - width: 58%; - height: 100%; - overflow-y: auto; - padding: 20px; - background: #fff; - .baseparms { - h3,h4{ - color: #06A7E2; - width: 96%; - height: 40px; - line-height: 35px; - font-size: 18px; - font-weight: 500; - margin: 10px auto; - border-bottom: 2px solid; - border-image: -webkit-linear-gradient(#07A9E1,#30D9C4) 100 100; - border-image: -moz-linear-gradient(#07A9E1,#30D9C4) 100 100; - border-image: linear-gradient(#07A9E1,#30D9C4) 100 100; - border-radius:2px; - } - h4 { - font: 700 16px "Arial"; - margin-left: 25px; - } - .vnf-box{ - clear: both; - } - ul{ - margin-left: 30px; - } - ul li { - margin: 10px 0; - width: 42%; - margin-right: 5%; - float: left; - text-align: left; - span { - display: inline-block; - width: 30%; - font: 700 14px "Arial"; - vertical-align: middle; - overflow: hidden; - text-align: left; - } - input,nz-select{ - width: 65%; - margin-left:3% - } - } - } - } - .dividing-line{ - width: 0; - height: 85%; - margin: 4% 0; - border-left: 1px #cccccc dashed; - } - .chart { - width: 38%; - padding: 10px; - height: 95%; - margin-right: 40px; - #createChart{ - height: 100%; - width: 100%; - } - } -} 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 deleted file mode 100644 index de00c43f..00000000 --- a/usecaseui-portal/src/app/components/e2e-creation/e2e-creation.component.spec.ts +++ /dev/null @@ -1,25 +0,0 @@ -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 deleted file mode 100644 index 5446dc5f..00000000 --- a/usecaseui-portal/src/app/components/e2e-creation/e2e-creation.component.ts +++ /dev/null @@ -1,354 +0,0 @@ -/* - Copyright (C) 2019 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'; -import * as d3 from 'd3'; - -@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.gete2eTemParameters(this.e2e_ns_temParametersContent); - this.getVimInfo(); - this.getSdnControllers(); - } - - @Output() e2eCloseCreate = new EventEmitter(); - @Output() nsCloseCreate = new EventEmitter(); - @Input() createParams; - @Input() e2e_ns_temParametersContent; - - - // e2e serviceTemplateParameters - templateParameters = { - invariantUUID: "", - uuid: "", - name: "", - type: "", - version: "", - description: "", - category: "", - subcategory: "", - customizationUuid: "", - inputs:[], - nestedTemplates:[] - }; - // ns serviceTemplateParameters - nsTemplateParameters = { - inputs:{}, - inputs2:[], - vnfs:[] - }; - roote2e = { - "name": "e2e", - "type": "e2e", - "children": [] - }; - - rootns = { - "name": "ns", - "type": "ns", - "children": [] - }; - - imgmap = { - '1': './assets/images/create-e2e.png', - '2': './assets/images/create-ns.png', - '3': './assets/images/create-vnf.png', - }; - gete2eTemParameters(data) { //Get template parameters - let type = this.createParams.commonParams.templateType == "E2E Service" ? "e2e" : "ns"; - 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"}); - }); - this.templateParameters.nestedTemplates.map((item,index) => { - let nsIndex={ - "name": "ns", - "type": "ns", - "children": [] - }; - nsIndex.children=item.nestedTemplates.map((item,index) => { - return { - "name": "vnf", - "type": "vnf", - } - }); - this.roote2e.children.push(nsIndex); - }); - console.log(this.templateParameters); - }else if(type == "ns"){ - if(data["model"]!=undefined && typeof data["model"]=='string'){ - this.nsTemplateParameters = JSON.parse(data["model"]); - }else{ - 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}) - } - this.rootns.children=this.nsTemplateParameters.vnfs.map((item,index) => { - return { - "name": "vnf", - "type": "vnf", - } - }); - console.log(this.nsTemplateParameters); - } - - this.drawImage(type) - - } - 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: "", - COS:"", - EBS:"", - 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((ipnut)=>{ - this.service.parameters.requestInputs[ipnut.name] = ipnut.value == undefined ? ipnut.defaultValue : ipnut.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:{ - cloudOwner: input.value.name, - cloudRegionId:input.value.id - } - }; - nsService.parameters.locationConstraints.push(location); - }else{ - nsService.parameters.requestInputs[input.name] = input.value == undefined ? input.defaultValue : input.value; - } - }) - this.service.parameters.resources.push(nsService); - }) - console.log(this.service); - this.service.parameters.requestInputs['orchestrator'] = this.createParams.orchestrator.name; - if(this.createParams.isSol005Interface){ - this.service.parameters.requestInputs['isSol005Interface'] = this.createParams.isSol005Interface; - } - this.e2eCloseCreate.emit({service: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.properties.id, - locationConstraints: { - cloudOwner: vnf.value.name, - cloudRegionId:vnf.value.id - } - } - 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(); - } - - - - drawImage(type) { - if (type == "e2e") { - this.render(this.roote2e, this.imgmap) - } else if (type == "ns") { - this.render(this.rootns, this.imgmap) - } - - - } - - // e2e or NS draw d3 topo - render(data, imgmap) { - let width = document.getElementById("createChart").clientWidth, - height = document.getElementById("createChart").clientHeight; - let cluster = d3.layout.tree() - .size([width, height]); - let diagonal = d3.svg.diagonal() - .projection(function (d) { - return [d.x-18, d.y+40]; - }); - let svg = d3.select("svg"); - - //marker - let marker = - svg.append("marker") - .attr("id", "resolved") - .attr("markerUnits", "strokeWidth") - .attr("markerUnits", "userSpaceOnUse") - .attr("viewBox", "0 -5 10 10") - .attr("refX", 22) - .attr("refY", 0) - .attr("markerWidth", 20) - .attr("markerHeight", 20) - .attr("orient", "auto") - .attr("stroke-width", 1) - .append("circle") - .attr("cx", 5) - .attr("cy", 0) - .attr("r", 2) - .attr("stroke-width", 1) - .style("stroke", "#2F8BF7") - .attr('fill', 'white'); - let i = 0; - let nodes = cluster.nodes(data).reverse(); - nodes.forEach(function (d) { - d.y = d.depth * 200+100; - - }); - - let links = cluster.links(nodes); - - let linkEnter = svg.selectAll("path.link") - .data(links); - - linkEnter.enter().append("path") - .attr("class", "link") - .attr("d", diagonal) - .style("stroke", "#2F8BF7") - .style('stroke-width', '1px') - .attr("marker-end", "url(#resolved)") - .style("fill", "none") - // .style("fill-opacity", 1) - .attr("id", function (d, i) { - return "mypath" + i; - }); - - let node = svg.selectAll(".node") - .data(nodes) - .enter() - .append("g") - .attr("class", "node") - .attr("transform", function (d) { - return "translate(" + (d.x + -50) + "," + (d.y) + ")"; - }); - - node.append('image') - .attr('xlink:href', function (d) { - if(d.type=="e2e"){ - return imgmap[1]; - }else if(d.type=="ns"){ - return imgmap[2]; - }else if(d.type=="vnf"){ - return imgmap[3]; - } - - }) - .style('width', '12%') - .style("cursor","pointer") - .attr("x", 0) - .attr("y", 0) - .attr("rx", 3); - - - } - -} |