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 <preethamshyam.sathiyaseelan@us.fujitsu.com>

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 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;