From 1c0e11d0e8221eedbc86577501d5fd40d4890d7e Mon Sep 17 00:00:00 2001 From: root Date: Fri, 21 Feb 2020 11:34:03 +0000 Subject: USECASEUI-388 fixed and with additional changes Fixed i18Resource, subtittle wrap and directive folder Path. Alos added few changes for adapting multiple templates. Change-Id: Ie64485d24d11bcfd59be6c3c119dbccbc6c9b499 Issue-ID: USECASEUI-388 Signed-off-by: root --- .../app/Directives/disable-control.directive.ts | 17 --- usecaseui-portal/src/app/app.module.ts | 2 +- .../core/Directives/disable-control.directive.ts | 17 +++ .../mdons-creation/mdons-creation.component.html | 21 ++-- .../mdons-creation/mdons-creation.component.ts | 48 ++++++-- .../mdons-detail/mdons-detail.component.ts | 121 ++++++++++++++++++++- .../services-list/services-list.component.less | 4 +- .../services-list/top-card/top-card.component.less | 4 +- 8 files changed, 191 insertions(+), 43 deletions(-) delete mode 100644 usecaseui-portal/src/app/Directives/disable-control.directive.ts create mode 100644 usecaseui-portal/src/app/core/Directives/disable-control.directive.ts (limited to 'usecaseui-portal/src/app') diff --git a/usecaseui-portal/src/app/Directives/disable-control.directive.ts b/usecaseui-portal/src/app/Directives/disable-control.directive.ts deleted file mode 100644 index 85495401..00000000 --- a/usecaseui-portal/src/app/Directives/disable-control.directive.ts +++ /dev/null @@ -1,17 +0,0 @@ -import { Directive, Input } from '@angular/core'; -import { NgControl } from '@angular/forms'; - -@Directive({ - selector: '[disableControl]' -}) -export class DisableControlDirective { - - @Input() - set disableControl(condition: boolean) { - const action = condition ? 'enable' : 'disable'; - this.ngControl.control[action](); - } - - constructor(private ngControl: NgControl) { - } -} \ No newline at end of file diff --git a/usecaseui-portal/src/app/app.module.ts b/usecaseui-portal/src/app/app.module.ts index 9d14d8f9..5fa37be6 100644 --- a/usecaseui-portal/src/app/app.module.ts +++ b/usecaseui-portal/src/app/app.module.ts @@ -24,7 +24,7 @@ import { NZ_I18N, en_US } from 'ng-zorro-antd'; import { NgxEchartsModule } from 'ngx-echarts'; //Custom Directive -import { DisableControlDirective } from './Directives/disable-control.directive'; +import { DisableControlDirective } from './core/Directives/disable-control.directive'; import { TranslateModule, TranslateLoader } from '@ngx-translate/core'; import { TranslateHttpLoader } from '@ngx-translate/http-loader'; diff --git a/usecaseui-portal/src/app/core/Directives/disable-control.directive.ts b/usecaseui-portal/src/app/core/Directives/disable-control.directive.ts new file mode 100644 index 00000000..85495401 --- /dev/null +++ b/usecaseui-portal/src/app/core/Directives/disable-control.directive.ts @@ -0,0 +1,17 @@ +import { Directive, Input } from '@angular/core'; +import { NgControl } from '@angular/forms'; + +@Directive({ + selector: '[disableControl]' +}) +export class DisableControlDirective { + + @Input() + set disableControl(condition: boolean) { + const action = condition ? 'enable' : 'disable'; + this.ngControl.control[action](); + } + + constructor(private ngControl: NgControl) { + } +} \ No newline at end of file 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 @@
  • * {{parameter.name}}: - + Required - - -
      -
    • + -
        -
      • - {{item.id}} + + 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 = new Map(); + 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 a235b1e6..000d68d2 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; -- cgit 1.2.3-korg