diff options
Diffstat (limited to 'usecaseui-portal/src/app/components')
5 files changed, 178 insertions, 218 deletions
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 index 497693fe..b2ec4401 100644 --- a/usecaseui-portal/src/app/components/e2e-creation/e2e-creation.component.html +++ b/usecaseui-portal/src/app/components/e2e-creation/e2e-creation.component.html @@ -42,7 +42,7 @@ <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'">{{parameter.name}}:</span> + <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"> @@ -63,7 +63,7 @@ <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'"> {{input.name}}: </span> + <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"> @@ -98,7 +98,7 @@ <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'">{{parameter.name}}:</span> + <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"> @@ -116,7 +116,7 @@ </ul> </div> <div class="vnf-box"> - <h4>vnfs Inputs</h4> + <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> 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 index 3a1693b6..1900f7d2 100644 --- a/usecaseui-portal/src/app/components/e2e-creation/e2e-creation.component.less +++ b/usecaseui-portal/src/app/components/e2e-creation/e2e-creation.component.less @@ -96,7 +96,7 @@ hr { padding: 20px; background: #fff; .baseparms { - h3 { + h3,h4{ color: #06A7E2; width: 96%; height: 40px; @@ -114,12 +114,15 @@ hr { font: 700 16px "Arial"; margin-left: 25px; } + .vnf-box{ + clear: both; + } ul{ margin-left: 30px; } ul li { margin: 10px 0; - width: 40%; + width: 42%; margin-right: 5%; float: left; text-align: left; @@ -129,11 +132,12 @@ hr { font: 700 14px "Arial"; vertical-align: middle; overflow: hidden; - text-overflow: ellipsis; - text-align: left; + //text-overflow: ellipsis; + text-align: left; } input,nz-select{ width: 65%; + margin-left:3% } } } diff --git a/usecaseui-portal/src/app/components/e2e-detail/e2e-detail.component.html b/usecaseui-portal/src/app/components/e2e-detail/e2e-detail.component.html index ce5b97c2..dec6f2d3 100644 --- a/usecaseui-portal/src/app/components/e2e-detail/e2e-detail.component.html +++ b/usecaseui-portal/src/app/components/e2e-detail/e2e-detail.component.html @@ -28,146 +28,60 @@ <div *ngIf="detailParams.serviceDomain == 'E2E Service'" class="baseparms clearfix"> <!--2019.02.21 add--> <div class="vnf-box"> - <h3>Base</h3> + <h3> {{"i18nTextDefine_Base" | translate}} </h3> <ul class="clearfix"> - <li><span>Name:</span>Sont L2</li> - <li><span>Description:</span>Typen asaa</li> - <li><span>COS:</span>standard</li> - <li><span>EBS:</span>fince in felis nec e</li> - <li> - <span style="vertical-align: top;">checkbox</span> - <nz-checkbox-wrapper style="width: 100%;" > - <div nz-row> - <div nz-col style="margin-bottom: 10px"><label nz-checkbox nzValue="A" - [nzDisabled]="true">Mauris rutrum quam p - </label></div> - <div nz-col><label nz-checkbox nzValue="B" [ngModel]="true" [nzDisabled]="true">fince in felis nec e - </label></div> - </div> - </nz-checkbox-wrapper> + <li><span style="width:15%">Name:</span> <span class="input-content">{{service.name}}</span></li> + <li><span style="width:25%">Description:</span><span class="input-content">{{service.description}}</span></li> + </ul> + </div> + <div class="vnf-box" *ngIf="getKeys(e2e_requestInputs).length>0"> + <h3>{{"i18nTextDefine_templateInputs" | translate}}</h3> + <ul class="clearfix"> + <li *ngFor="let key of getKeys(e2e_requestInputs);"> + <span title="{{key}}">{{key}}:</span> + <span class="input-content">{{e2e_requestInputs[key]}}</span> </li> </ul> </div> - <div class="vnf-box"> - <h3>VNF1</h3> + <div class="vnf-box" *ngFor="let template of e2e_nestedTemplates;"> + <h3>{{template.name}}</h3> <ul class="clearfix"> - <li><span>Name:</span>Sont L2</li> - <li><span>Description:</span>Typen asaa</li> - <li> - <span style="vertical-align: top;">radio button</span> - <nz-radio-group [(ngModel)]="radioValue1" nzName="radiogroup"> - <label nz-radio [ngStyle]="{'margin-bottom':'10px'}" nzValue="Selected" [ngModel]="true" [nzDisabled]="true">Selected</label> - <br> - <label nz-radio [ngStyle]="style" nzValue="Disaled" [nzDisabled]="true">Disaled</label> - </nz-radio-group> + <li *ngFor="let input of template.vnfs; let i = index;"> + <span style="width: 26%"> vf_location: </span> + <span class="input-content">{{input["vf_location"]}}</span> </li> - <li><span>pull down:</span>Heresanoption</li> </ul> </div> + </div> + + <div *ngIf="detailParams.serviceDomain=='Network Service'" class="baseparms clearfix"> <div class="vnf-box"> - <h3>VNF2</h3> + <h3> {{"i18nTextDefine_Base" | translate}} </h3> <ul class="clearfix"> - <li><span>Name:</span>Sont L2</li> - <li><span>Description:</span>Typen asaa</li> - <li> - <span style="vertical-align: top;margin-top: 3px;" nzName="radiogroup2">radio button</span> - <nz-radio-group [(ngModel)]="radioValue2"> - <label nz-radio [ngStyle]="{'margin-bottom':'10px'}" nzValue="Selected2" [ngModel]="true" [nzDisabled]="true">Selected2</label> - <br> - <label nz-radio [ngStyle]="style" nzValue="Disaled2" [nzDisabled]="true">Disaled2</label> - </nz-radio-group> + <li><span style="width:15%">Name:</span> <span class="input-content">{{ns_service.name}}</span></li> + <li><span style="width:25%">Description:</span><span class="input-content">{{ns_service.description}}</span></li> + </ul> + </div> + <div class="vnf-box" *ngIf="getKeys(ns_requestInputs).length>0"> + <h4>{{"i18nTextDefine_templateInputs" | translate}}</h4> + <ul> + <li *ngFor="let key of getKeys(ns_requestInputs);"> + <span title="{{key}}">{{key}}:</span> + <span class="input-content">{{ns_requestInputs[key]}}</span> + </li> + </ul> + </div> + <div class="vnf-box" *ngIf="ns_nestedTemplates.length>0"> + <h4>vnfs Inputs</h4> + <ul> + <li *ngFor="let vnf of ns_nestedTemplates;"> + <h5>id: {{vnf.vnfInstanceId}}</h5> + <span style="width: 26%"> vf_location: </span> + <span class="input-content">{{vnf["vnfInstanceName"]}}</span> </li> </ul> </div> - <!--<div class="vnf-box">--> - <!--<h3>template Inputs</h3>--> - <!--<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> - - <!--<div *ngIf="detailParams.serviceDomain=='Network Service'" class="baseparms clearfix">--> - <!--<div class="vnf-box">--> - <!--<h3>Base</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">--> - <!--<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>--> - <!--</div>--> </div> <!-- chart --> diff --git a/usecaseui-portal/src/app/components/e2e-detail/e2e-detail.component.less b/usecaseui-portal/src/app/components/e2e-detail/e2e-detail.component.less index 63b6c030..fd306c5b 100644 --- a/usecaseui-portal/src/app/components/e2e-detail/e2e-detail.component.less +++ b/usecaseui-portal/src/app/components/e2e-detail/e2e-detail.component.less @@ -76,7 +76,7 @@ hr { margin-left: 30px; box-shadow:0px 10px 15px 2px rgba(222,222,222,0.5); .baseparms { - h3 { + h3,h4{ color: #06A7E2; width: 96%; height: 40px; @@ -94,29 +94,34 @@ hr { font: 700 16px "Arial"; margin-left: 25px; } + .vnf-box{ + clear: both; + } ul{ margin-left: 30px; } ul li { // display: inline-block; margin: 10px 0; - width: 40%; + width: 49%; float: left; text-align: left; color:rgba(60,79,140,1); font-size: 14px; span { display: inline-block; - width: 30%; + width: 50%; font: 700 14px "Arial"; vertical-align: middle; overflow: hidden; - text-overflow: ellipsis; + //text-overflow: ellipsis; text-align: left; color:rgba(60,79,140,0.5); } - input,nz-select{ - width: 170px; + span.input-content{ + width: 42%; + color: #3C4F8C; + margin-left: 5%; } } } diff --git a/usecaseui-portal/src/app/components/e2e-detail/e2e-detail.component.ts b/usecaseui-portal/src/app/components/e2e-detail/e2e-detail.component.ts index a592e169..cfcaae6c 100644 --- a/usecaseui-portal/src/app/components/e2e-detail/e2e-detail.component.ts +++ b/usecaseui-portal/src/app/components/e2e-detail/e2e-detail.component.ts @@ -28,87 +28,125 @@ export class E2eDetailComponent implements OnInit { constructor(private myhttp: MyhttpService) { } - ngOnInit() { - // this.getDetails(); - this.dataInit(); - this.drawImage("E2E Service"); - } - - @Input() detailParams; - @Input() namesTranslate; - @Output() closeDetail = new EventEmitter(); - templateParameters: any; - serviceInstanceName: any; - serviceType: any; - - dataInit() { - console.log(this.detailParams); - this.serviceInstanceName = this.detailParams['service-instance-name']; - } - - goback() { - this.closeDetail.emit(); - } - + ngOnInit() { + // this.getDetails(); + this.dataInit(); + } - roote2e = { - "name": "e2e", - "type": "e2e", - "children": - [ - { - "name": "ns", - "type": "ns", - "children": - [ - { - "name": "vnf", - "type": "vnf", - }, - { - "name": "vnf", - "type": "vnf", - } - ] - }, - { - "name": "ns", - "type": "ns", - "children": - [ - { - "name": "vnf", - "type": "vnf", - }, - { - "name": "vnf", - "type": "vnf", - } - ] - }] - } + @Input() detailParams; + + @Output() closeDetail = new EventEmitter(); + serviceInstanceName: any; + serviceType: any; + input_parameters: any; + nsinput_parameters: any; + + // e2e + service = { + name: "", + description: "", + }; + e2e_nestedTemplates = []; + e2e_requestInputs: any; + + ns_service = { + name:"", + description:"" + } + ns_nestedTemplates = []; + ns_requestInputs = {}; + 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', + }; + + getKeys(item) { + return Object.keys(item); + } - rootns = { - "name": "ns", - "type": "ns", - "children": - [ - { - "name": "vnf", - "type": "vnf", - }, - { - "name": "vnf", - "type": "vnf", + dataInit() { + console.log(this.detailParams); + this.serviceInstanceName = this.detailParams['service-instance-name'] || this.detailParams["nsName"]; + if (this.detailParams.serviceDomain == 'E2E Service'){ + this.input_parameters = JSON.stringify(this.detailParams['input-parameters']); + this.input_parameters = JSON.parse(this.input_parameters); + console.log(this.input_parameters); + this.service = { + name:this.input_parameters.service.name, + description: this.input_parameters.service.description, + }; + if(this.input_parameters.service.parameters.requestInputs!=undefined && Object.keys(this.input_parameters.service.parameters.requestInputs).length>0){ + this.e2e_requestInputs = this.input_parameters.service.parameters.requestInputs; + } + if(this.input_parameters.service.parameters.resources!=undefined && this.input_parameters.service.parameters.resources.length>0){ + this.input_parameters.service.parameters.resources.map((item,i) => { + let nestedTemplates={ + name:null, + vnfs:[] + }; + nestedTemplates.name= item.resourceName; + item.parameters.locationConstraints.map((its,k) => { + nestedTemplates.vnfs.push({ + "vf_location":its.locationConstraints.cloudOwner + }) + }); + this.e2e_nestedTemplates.push(nestedTemplates); + + let nsIndex={ + "name": "ns", + "type": "ns", + "children": [] + }; + nsIndex.children=item.parameters.locationConstraints.map((itemits,index) => { + return { + "name": "vnf", + "type": "vnf", + } + }); + this.roote2e.children.push(nsIndex); + }); + console.log(this.e2e_nestedTemplates); + console.log(this.e2e_requestInputs); + console.log(this.roote2e) + } + }else if(this.detailParams.serviceDomain == 'Network Service'){ + this.ns_service = { + name:this.detailParams.name, + description: this.detailParams.description, + }; + if(this.detailParams.requestInputs!=undefined && Object.keys(this.detailParams.requestInputs).length>0){ + this.ns_requestInputs = this.detailParams.requestInputs; + } + this.ns_nestedTemplates = this.detailParams.vnfInfo; + this.rootns.children=this.ns_nestedTemplates.map((item,index) => { + return { + "name": "vnf", + "type": "vnf", + } + }); + console.log(this.ns_nestedTemplates); + console.log(this.ns_requestInputs); + console.log(this.rootns) } - ] - } + this.drawImage(this.detailParams.serviceDomain) + } - imgmap = { - '1': './assets/images/create-e2e.png', - '2': './assets/images/create-ns.png', - '3': './assets/images/create-vnf.png', - }; + goback() { + this.closeDetail.emit(); + } drawImage(type) { if (type == "E2E Service") { @@ -129,7 +167,6 @@ export class E2eDetailComponent implements OnInit { .projection(function (d) { return [d.x-18, d.y+40]; }); - console.log(diagonal) var svg = d3.select("svg"); //marker |