summaryrefslogtreecommitdiffstats
path: root/usecaseui-portal/src/app/views/services
diff options
context:
space:
mode:
Diffstat (limited to 'usecaseui-portal/src/app/views/services')
-rw-r--r--usecaseui-portal/src/app/views/services/services-list/mdons-creation/mdons-creation.component.html21
-rw-r--r--usecaseui-portal/src/app/views/services/services-list/mdons-creation/mdons-creation.component.ts48
-rw-r--r--usecaseui-portal/src/app/views/services/services-list/mdons-detail/mdons-detail.component.ts121
-rw-r--r--usecaseui-portal/src/app/views/services/services-list/services-list.component.less4
-rw-r--r--usecaseui-portal/src/app/views/services/services-list/top-card/top-card.component.less4
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;