diff options
Diffstat (limited to 'usecaseui-portal/src/app/views/services')
5 files changed, 173 insertions, 25 deletions
diff --git a/usecaseui-portal/src/app/views/services/services-list/mdons-creation/mdons-creation.component.html b/usecaseui-portal/src/app/views/services/services-list/mdons-creation/mdons-creation.component.html index 47e22fe9..a3dec5aa 100644 --- a/usecaseui-portal/src/app/views/services/services-list/mdons-creation/mdons-creation.component.html +++ b/usecaseui-portal/src/app/views/services/services-list/mdons-creation/mdons-creation.component.html @@ -19,21 +19,26 @@ <li *ngFor="let parameter of templateParameters.inputs; let i = index;"> <span *ngIf="parameter.isRequired.includes('true')" style="color: red;width:10px;min-width:1px;">*</span> <span title="{{parameter.name}}">{{parameter.name}}:</span> - <input *ngIf="!(parameter.name.includes('uni_id') || parameter.name.includes('enni_id') || parameter.name.includes('date'))" formControlName="{{parameter.name}}" nz-input [(ngModel)]="parameter.value" style="margin-left: auto;"> + <input *ngIf="!(((parameter.name.includes('uni') || parameter.name.includes('enni') || parameter.name.includes('nni')) && parameter.name.includes('id')) || parameter.name.includes('date'))" formControlName="{{parameter.name}}" nz-input [(ngModel)]="parameter.value" style="margin-left: auto;"> <!--<pre>{{mdons_creation_form.get(parameter.name).valid}}</pre>--> <input style="margin-left: 2px;" *ngIf="parameter.name.includes('date')" type="date" formControlName="{{parameter.name}}" nz-input [(ngModel)]="parameter.value" placeholder="yyyy-MM-dd"/> <span style="color: red;width:10px;" *ngIf="mdons_creation_form.controls[parameter.name].errors?.required && (mdons_creation_form.controls[parameter.name].dirty || mdons_creation_form.controls[parameter.name].touched)">Required</span> - <nz-dropdown class = "customclass" [nzTrigger]="'click'" [nzPlacement]="'bottomLeft'" *ngIf="(parameter.name.includes('uni_id') || parameter.name.includes('enni_id'))"> - <button style="width: 300px;" nz-button nz-dropdown><span *ngIf="parameter.name.includes('uni_id')">{{uniIdSelected.id}}</span><span *ngIf="parameter.name.includes('enni_id')">{{enniIdSelected.id}}</span> <i class="anticon anticon-down"></i> + <nz-dropdown class = "customclass" [nzTrigger]="'click'" [nzPlacement]="'bottomLeft'" *ngIf="(parameter.name.includes('uni') || parameter.name.includes('enni') || parameter.name.includes('nni')) && parameter.name.includes('id')"> + <button style="width: 300px;" nz-button nz-dropdown><span *ngIf="(parameter.name.includes('uni') && parameter.name.includes('id'))">{{nniMap.get(parameter.name) == undefined ? uniIdSelected.id : nniMap.get(parameter.name).id}}</span><span *ngIf="(parameter.name.includes('enni')&& parameter.name.includes('id'))">{{nniMap.get(parameter.name) == undefined ? enniIdSelected.id : nniMap.get(parameter.name).id}}</span><span *ngIf="(parameter.name.includes('nni') && parameter.name.includes('id') && !parameter.name.includes('e'))">{{nniMap.get(parameter.name) == undefined ? nniIdSelected.id : nniMap.get(parameter.name).id}}</span> <i class="anticon anticon-down"></i> </button> - <ul nz-menu *ngIf="parameter.name.includes('uni_id')" class="dropDownScroller"> - <li nz-menu-item (click)="chooseUni(item)" *ngFor="let item of uniList" > + <ul nz-menu *ngIf="(parameter.name.includes('uni') && parameter.name.includes('id'))" class="dropDownScroller"> + <li nz-menu-item (click)="chooseUni(parameter.name,item)" *ngFor="let item of uniList" > <a title="{{item.id}}">{{item.id}}</a> </li> </ul> - <ul nz-menu *ngIf="parameter.name.includes('enni_id')" class="dropDownScroller" > - <li nz-menu-item (click)="chooseEnni(item)" *ngFor="let item of enniList" > - <a title="{{item.id}}">{{item.id}}</a> + <ul nz-menu *ngIf="(parameter.name.includes('enni') && parameter.name.includes('id'))" class="dropDownScroller" > + <li nz-menu-item (click)="chooseEnni(parameter.name,item)" *ngFor="let item of enniList" > + <a title="{{nniMap.get(parameter.name) == undefined ? item.id : nniMap.get(parameter.name)}}">{{nniMap.get(parameter.name) == undefined ? item.id : nniMap.get(parameter.name)}}</a> + </li> + </ul> + <ul nz-menu *ngIf="(parameter.name.includes('nni') && parameter.name.includes('id') && !parameter.name.includes('e'))" class="dropDownScroller"> + <li nz-menu-item (click)="chooseNni(parameter.name,item)" *ngFor="let item of nniList" > + <a title="{{item.id}}">{{item.id}}</a> </li> </ul> </nz-dropdown> diff --git a/usecaseui-portal/src/app/views/services/services-list/mdons-creation/mdons-creation.component.ts b/usecaseui-portal/src/app/views/services/services-list/mdons-creation/mdons-creation.component.ts index 3123bfc8..232de474 100644 --- a/usecaseui-portal/src/app/views/services/services-list/mdons-creation/mdons-creation.component.ts +++ b/usecaseui-portal/src/app/views/services/services-list/mdons-creation/mdons-creation.component.ts @@ -16,6 +16,11 @@ export class MdonsCreationComponent implements OnInit { uniIdSelected = { id: null }; enniList= []; enniIdSelected = { id: null }; + nniList= []; + nniIdSelected = { id: null }; + + nniMap : Map<any, any> = new Map<any, any>(); + templateParameters = { invariantUUID: "", uuid: "", @@ -67,6 +72,7 @@ export class MdonsCreationComponent implements OnInit { ngOnInit() { this.getalluni(); this.getallenni(); + this.getallnni(); this.templateParameters=this.mdons_temParametersContent; this.mdonsModelShow = true; this.mdons_creation_form = this.fb.group({}); @@ -76,7 +82,7 @@ export class MdonsCreationComponent implements OnInit { buildFormArrayOfGroupsFromArr() { for(let i of this.templateParameters.inputs){ - if(i.isRequired === "true" && !(i.name.includes('uni_id') || i.name.includes('enni_id'))){ + if(i.isRequired === "true" && !(i.name.includes('_id'))){ this.mdons_creation_form.addControl(i.name, this.fb.control('', [Validators.required])) } else { this.mdons_creation_form.addControl(i.name, this.fb.control('')) @@ -95,7 +101,7 @@ export class MdonsCreationComponent implements OnInit { } getallenni() { - this.myhttp.getAllNI("NNI") + this.myhttp.getAllNI("ENNI") .subscribe((data) => { this.enniList = data.map(item => ({id: item }) ); if(data.length !== 0){ @@ -104,12 +110,29 @@ getallenni() { }) } -chooseUni(item = this.uniIdSelected){ - if(this.uniIdSelected !== item) this.uniIdSelected = item; +getallnni() { + this.myhttp.getAllNI("NNI") + .subscribe((data) => { + this.nniList = data.map(item => ({id: item }) ); + if(data.length !== 0){ + this.nniIdSelected = this.nniList[0]; + } + }) } -chooseEnni(item = this.enniIdSelected){ - if(this.enniIdSelected !== item) this.enniIdSelected = item; +chooseUni(parameterName, item){ + //if(this.uniIdSelected !== item) this.uniIdSelected = item; + this.nniMap.set(parameterName,item); +} + +chooseEnni(parameterName, item){ + //if(this.enniIdSelected !== item) this.enniIdSelected = item; + this.nniMap.set(parameterName,item); +} + +chooseNni(parameterName, item){ + //if(this.nniIdSelected !== item) this.nniIdSelected = item; + this.nniMap.set(parameterName,item); } goback() { @@ -131,11 +154,14 @@ chooseEnni(item = this.enniIdSelected){ this.templateParameters.inputs.forEach((ipnut) => { this.service.parameters.requestInputs[ipnut.name] = ipnut.value == undefined ? ipnut.defaultValue : ipnut.value; - if(ipnut.name.includes('uni_id')) { - this.service.parameters.requestInputs[ipnut.name] = this.uniIdSelected.id == undefined ? ipnut.defaultValue : this.uniIdSelected.id; + if(ipnut.name.includes('uni') && ipnut.name.includes('id')) { + this.service.parameters.requestInputs[ipnut.name] = this.nniMap.get(ipnut.name) == undefined ? this.uniIdSelected.id : this.nniMap.get(ipnut.name).id; + } + if(ipnut.name.includes('enni') && ipnut.name.includes('id')) { + this.service.parameters.requestInputs[ipnut.name] = this.nniMap.get(ipnut.name) == undefined ? this.enniIdSelected.id : this.nniMap.get(ipnut.name).id; } - if(ipnut.name.includes('enni_id')) { - this.service.parameters.requestInputs[ipnut.name] = this.enniIdSelected.id == undefined ? ipnut.defaultValue : this.enniIdSelected.id; + if(ipnut.name.includes('nni') && ipnut.name.includes('id')) { + this.service.parameters.requestInputs[ipnut.name] = this.nniMap.get(ipnut.name) == undefined ? this.nniIdSelected.id : this.nniMap.get(ipnut.name).id; } if(ipnut.name==='name') { this.service.name = ipnut.value == undefined ? ipnut.defaultValue : ipnut.value; @@ -157,4 +183,4 @@ chooseEnni(item = this.enniIdSelected){ -}
\ No newline at end of file +} diff --git a/usecaseui-portal/src/app/views/services/services-list/mdons-detail/mdons-detail.component.ts b/usecaseui-portal/src/app/views/services/services-list/mdons-detail/mdons-detail.component.ts index ee4c71df..1b0d3565 100644 --- a/usecaseui-portal/src/app/views/services/services-list/mdons-detail/mdons-detail.component.ts +++ b/usecaseui-portal/src/app/views/services/services-list/mdons-detail/mdons-detail.component.ts @@ -1,5 +1,6 @@ import { Component, Input, Output, OnInit, EventEmitter } from '@angular/core'; import { ServiceListService } from '../../../../core/services/serviceList.service'; +import * as d3 from 'd3'; @Component({ selector: 'app-mdons-detail', @@ -22,6 +23,18 @@ export class MdonsDetailComponent implements OnInit { description: "", }; + roote2e = { + "name": "e2e", + "type": "e2e", + "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); } @@ -39,12 +52,116 @@ export class MdonsDetailComponent implements OnInit { 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.e2e_requestInputs != undefined) { + for(let item of this.e2e_requestInputs) { + console.log("outside "+item); + if((item.includes("enni_id") || item.includes("uni_id"))){ + console.log("inside "+item); + let nsIndex = { + "name": "ns", + "type": "ns", + "children": [] + }; + + this.roote2e.children.push(nsIndex); + } + + + } + console.log(this.e2e_requestInputs); + console.log(this.roote2e) + } + + this.drawImage(this.roote2e,this.imgmap); } goback() { this.closeDetail.emit(); } - + drawImage(data, imgmap) { + var width = document.getElementById("createChart").clientWidth, + height = document.getElementById("createChart").clientHeight; + var cluster = d3.layout.tree() + .size([width, height]); + var diagonal = d3.svg.diagonal() + .projection(function (d) { + return [d.x - 18, d.y + 40]; + }); + var svg = d3.select("svg"); + + //marker + var 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'); + var i = 0; + var nodes = cluster.nodes(data).reverse(); + console.log(nodes); + nodes.forEach(function (d) { + d.y = d.depth * 200 + 100; + + }); + + var links = cluster.links(nodes); + + var 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; + }); + + var 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); + + + } -}
\ No newline at end of file +} diff --git a/usecaseui-portal/src/app/views/services/services-list/services-list.component.less b/usecaseui-portal/src/app/views/services/services-list/services-list.component.less index 454e3bc8..388e4c6c 100644 --- a/usecaseui-portal/src/app/views/services/services-list/services-list.component.less +++ b/usecaseui-portal/src/app/views/services/services-list/services-list.component.less @@ -203,8 +203,8 @@ hr { nz-layout{ padding: 20px 32px; .top-num{ - - width: 100%; + white-space: normal; + width: 100%; display: flex; justify-content: space-around; app-top-card{ diff --git a/usecaseui-portal/src/app/views/services/services-list/top-card/top-card.component.less b/usecaseui-portal/src/app/views/services/services-list/top-card/top-card.component.less index 0d95773f..9b5ce8e8 100644 --- a/usecaseui-portal/src/app/views/services/services-list/top-card/top-card.component.less +++ b/usecaseui-portal/src/app/views/services/services-list/top-card/top-card.component.less @@ -32,6 +32,7 @@ p{ height: 28px; margin-bottom: 0; + line-height: 15px; padding-left: 5px; font-size: 14px; clear: both; @@ -51,11 +52,10 @@ } } p:nth-child(1){ - margin-top: 25px; + margin-top: 20px; } .service-description{ - white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #3C4F8C; |