Merge from ecomp 718fd196 - Modern UI

Issue-ID: VID-378

Change-Id: I2736b98426e324ec3aa233b034229ba84d99839f
Signed-off-by: Ittay Stern <ittay.stern@att.com>

6 files changed, 301 insertions, 136 deletions

diff --git a/vid-webpack-master/src/app/drawingBoard/service-planning/drawing-board-tree/dragAndDrop/dragAndDrop.service.spec.ts b/vid-webpack-master/src/app/drawingBoard/service-planning/drawing-board-tree/dragAndDrop/dragAndDrop.service.spec.ts
index 1221cef5f..8b7f1a4f5 100644
--- a/vid-webpack-master/src/app/drawingBoard/service-planning/drawing-board-tree/dragAndDrop/dragAndDrop.service.spec.ts
+++ b/vid-webpack-master/src/app/drawingBoard/service-planning/drawing-board-tree/dragAndDrop/dragAndDrop.service.spec.ts
@@ -83,11 +83,11 @@ describe('Drag and drop service', () => {
       "action": "Create",
       "inMaint": false,
       "name": "yoav2_001",
-      "modelName": "VF_vMee 0",
+      "modelName": "VF_vGeraldine 0",
       "type": "VF",
       "isEcompGeneratedNaming": true,
-      "networkStoreKey": "VF_vMee 0:0001",
-      "vnfStoreKey": "VF_vMee 0:0001",
+      "networkStoreKey": "VF_vGeraldine 0:0001",
+      "vnfStoreKey": "VF_vGeraldine 0:0001",
       "typeName": "VNF",
       "menuActions": {"edit": {}, "showAuditInfo": {}, "duplicate": {}, "remove": {}, "delete": {}, "undoDelete": {}},
       "isFailed": false,
@@ -106,11 +106,11 @@ describe('Drag and drop service', () => {
         "id": 6654971919519,
         "action": "Create",
         "name": "VFModule1",
-        "modelName": "vf_vmee0..VfVmee..base_vmme..module-0",
+        "modelName": "vf_vgeraldine0..VfVgeraldine..base_vflorence..module-0",
         "type": "VFmodule",
         "isEcompGeneratedNaming": true,
         "dynamicInputs": [],
-        "dynamicModelName": "vf_vmee0..VfVmee..base_vmme..module-0bykqx",
+        "dynamicModelName": "vf_vgeraldine0..VfVgeraldine..base_vflorence..module-0bykqx",
         "typeName": "M",
         "menuActions": {"edit": {}, "showAuditInfo": {}, "remove": {}, "delete": {}, "undoDelete": {}},
         "isFailed": false,
@@ -130,11 +130,11 @@ describe('Drag and drop service', () => {
         "id": 987761655742,
         "action": "Create",
         "name": "VNFModule3",
-        "modelName": "vf_vmee0..VfVmee..vmme_gpb..module-2",
+        "modelName": "vf_vgeraldine0..VfVgeraldine..vflorence_gpb..module-2",
         "type": "VFmodule",
         "isEcompGeneratedNaming": true,
         "dynamicInputs": [],
-        "dynamicModelName": "vf_vmee0..VfVmee..vmme_gpb..module-2fjrrc",
+        "dynamicModelName": "vf_vgeraldine0..VfVgeraldine..vflorence_gpb..module-2fjrrc",
         "typeName": "M",
         "menuActions": {"edit": {}, "showAuditInfo": {}, "remove": {}, "delete": {}, "undoDelete": {}},
         "isFailed": false,
@@ -154,11 +154,11 @@ describe('Drag and drop service', () => {
         "id": 873798901625,
         "action": "Create",
         "name": "VFModule2",
-        "modelName": "vf_vmee0..VfVmee..vmme_vlc..module-1",
+        "modelName": "vf_vgeraldine0..VfVgeraldine..vflorence_vlc..module-1",
         "type": "VFmodule",
         "isEcompGeneratedNaming": true,
         "dynamicInputs": [],
-        "dynamicModelName": "vf_vmee0..VfVmee..vmme_vlc..module-1djjni",
+        "dynamicModelName": "vf_vgeraldine0..VfVgeraldine..vflorence_vlc..module-1djjni",
         "typeName": "M",
         "menuActions": {"edit": {}, "showAuditInfo": {}, "remove": {}, "delete": {}, "undoDelete": {}},
         "isFailed": false,
@@ -181,11 +181,11 @@ describe('Drag and drop service', () => {
       "action": "Create",
       "inMaint": false,
       "name": "yoav2",
-      "modelName": "VF_vMee 0",
+      "modelName": "VF_vGeraldine 0",
       "type": "VF",
       "isEcompGeneratedNaming": true,
-      "networkStoreKey": "VF_vMee 0",
-      "vnfStoreKey": "VF_vMee 0",
+      "networkStoreKey": "VF_vGeraldine 0",
+      "vnfStoreKey": "VF_vGeraldine 0",
       "typeName": "VNF",
       "menuActions": {"edit": {}, "showAuditInfo": {}, "duplicate": {}, "remove": {}, "delete": {}, "undoDelete": {}},
       "isFailed": false,
diff --git a/vid-webpack-master/src/app/drawingBoard/service-planning/drawing-board-tree/drawing-board-tree.component.ts b/vid-webpack-master/src/app/drawingBoard/service-planning/drawing-board-tree/drawing-board-tree.component.ts
index d0715982c..6be5036b2 100644
--- a/vid-webpack-master/src/app/drawingBoard/service-planning/drawing-board-tree/drawing-board-tree.component.ts
+++ b/vid-webpack-master/src/app/drawingBoard/service-planning/drawing-board-tree/drawing-board-tree.component.ts
@@ -1,4 +1,4 @@
-import {AfterViewInit, Component, EventEmitter, OnInit, Output, ViewChild,} from '@angular/core';
+import {AfterViewInit, Component, EventEmitter, Input, OnInit, Output, ViewChild,} from '@angular/core';
 import {ContextMenuComponent, ContextMenuService} from 'ngx-contextmenu';
 import {Constants} from '../../../shared/utils/constants';
 import {IDType, ITreeNode} from "angular-tree-component/dist/defs/api";
@@ -24,7 +24,10 @@ import * as _ from 'lodash';
 import {ErrorMsgService} from "../../../shared/components/error-msg/error-msg.service";
 import {DragAndDropService} from "./dragAndDrop/dragAndDrop.service";
 import {FeatureFlagsService, Features} from "../../../shared/services/featureFlag/feature-flags.service";
-import {PopoverPlacement} from "../../../shared/components/popover/popover.component";
+import {ComponentInfoService} from "../component-info/component-info.service";
+import {ComponentInfoModel} from "../component-info/component-info-model";
+import {ObjectToModelTreeService} from "../objectsToTree/objectToModelTree/objectToModelTree.service";
+import {DrawingBoardModes} from "../drawing-board.modes";
 
 @Component({
   selector: 'drawing-board-tree',
@@ -37,10 +40,14 @@ export class DrawingBoardTreeComponent implements OnInit, AfterViewInit {
   _store: NgRedux<AppState>;
   duplicateService: DuplicateService;
   drawingBoardTreeService: DrawingBoardTreeService;
+  objectToModelTreeService : ObjectToModelTreeService;
+  objectToInstanceTreeService : ObjectToInstanceTreeService;
   errorMsgService: ErrorMsgService;
   isFilterEnabled: boolean = false;
   filterValue: string = '';
   contextMenuOptions: TreeNodeContextMenuModel[];
+
+  @Input() pageMode : DrawingBoardModes;
   static triggerDeleteActionService: Subject<string> = new Subject<string>();
   static triggerUndoDeleteActionService: Subject<string> = new Subject<string>();
   static triggerreCalculateIsDirty: Subject<string> = new Subject<string>();
@@ -62,13 +69,16 @@ export class DrawingBoardTreeComponent implements OnInit, AfterViewInit {
               private _highlightPipe: HighlightPipe,
               private _objectToInstanceTreeService: ObjectToInstanceTreeService,
               private _sharedTreeService: SharedTreeService,
-              private _dragAndDropService : DragAndDropService) {
+              private _dragAndDropService : DragAndDropService,
+              private _objectToModelTreeService : ObjectToModelTreeService,
+              private _componentInfoService: ComponentInfoService) {
 
     this.errorMsgService = _errorMsgService;
     this.duplicateService = _duplicateService;
     this.drawingBoardTreeService = _drawingBoardTreeService;
     this.contextMenuOptions = _drawingBoardTreeService.generateContextMenuOptions();
-
+    this.objectToModelTreeService = _objectToModelTreeService;
+    this.objectToInstanceTreeService = _objectToInstanceTreeService;
     DrawingBoardTreeComponent.triggerDeleteActionService.subscribe((serviceModelId) => {
       this._sharedTreeService.shouldShowDeleteInstanceWithChildrenModal(this.nodes, serviceModelId, (node, serviceModelId)=>{
         this.drawingBoardTreeService.deleteActionService(this.nodes, serviceModelId);
@@ -102,6 +112,10 @@ export class DrawingBoardTreeComponent implements OnInit, AfterViewInit {
     this.filterValue = updateData.filterValue;
   }
 
+  isLinkedInstance = (node) : boolean => {
+    return !_.isNil(node) && node.parentType === "VRF" || node.parentType === "VnfGroup";
+  };
+
   @Output()
   highlightNode: EventEmitter<number> = new EventEmitter<number>();
 
@@ -138,7 +152,7 @@ export class DrawingBoardTreeComponent implements OnInit, AfterViewInit {
 
   updateTree() {
     const serviceInstance = this.store.getState().service.serviceInstance[this.serviceModelId];
-    this.nodes = this._objectToInstanceTreeService.convertServiceInstanceToTreeData(serviceInstance, this.store.getState().service.serviceHierarchy[this.serviceModelId]);
+    this.nodes = this._objectToInstanceTreeService.convertServiceInstanceToTreeData(serviceInstance, this.store.getState().service.serviceHierarchy[this.serviceModelId]).filter((item) => item !== null);
     console.log('right nodes', this.nodes);
 
   }
@@ -194,7 +208,11 @@ export class DrawingBoardTreeComponent implements OnInit, AfterViewInit {
     this._sharedTreeService.setSelectedVNF(node);
     this.highlightNode.emit(node.data.modelUniqueId);
     if (FeatureFlagsService.getFlagState(Features.FLAG_1906_COMPONENT_INFO, this.store)) {
-      node.data.onSelectedNode(node);
+      const serviceHierarchy = this._store.getState().service.serviceHierarchy[this.serviceModelId];
+      const model = node.data.getModel(node.data.modelName, node.data, serviceHierarchy);
+      const modelInfoItems = node.data.getInfo(model, node.data);
+      const componentInfoModel: ComponentInfoModel = this._sharedTreeService.addGeneralInfoItems(modelInfoItems, node.data.componentInfoType, model, node.data);
+      ComponentInfoService.triggerComponentInfoChange.next(componentInfoModel);
     }
   }
 
diff --git a/vid-webpack-master/src/app/drawingBoard/service-planning/drawing-board-tree/drawing-board-tree.html b/vid-webpack-master/src/app/drawingBoard/service-planning/drawing-board-tree/drawing-board-tree.html
index 8af909ffc..e1d88a696 100644
--- a/vid-webpack-master/src/app/drawingBoard/service-planning/drawing-board-tree/drawing-board-tree.html
+++ b/vid-webpack-master/src/app/drawingBoard/service-planning/drawing-board-tree/drawing-board-tree.html
@@ -1,33 +1,54 @@
 <error-msg></error-msg>
 <div class="drawing-board-tree" style="height: calc(100vh - 55px);">
   <div *ngIf="nodes?.length == 0" style="text-align: center;    margin-top: 50px;">
-    <no-content-message-and-icon class="span-over"
+
+    <no-content-message-and-icon *ngIf="objectToModelTreeService.numberOfPlusButton != 0" class="span-over"
                                  data-title="Please add objects (VNFs, network, modules etc.)"
                                  title2="from the left tree to design the service instance"
                                  subtitle="Once done, click Deploy to start instantiation"
                                  iconPath="./assets/img/UPLOAD.svg"
                                  iconClass="upload-icon-service-planing"></no-content-message-and-icon>
+
+    <no-content-message-and-icon *ngIf="objectToModelTreeService.numberOfPlusButton == 0" class="span-over"
+                                 data-title="No objects to add in this service instance."
+                                 title2=""
+                                 subtitle="Click Deploy to start instantiation"
+                                 iconPath="./assets/img/UPLOAD.svg"
+                                 iconClass="upload-icon-service-planing"></no-content-message-and-icon>
   </div>
   <div class="tree-header" *ngIf="nodes?.length > 0">
     <div class="title-tree">Instance:</div>
     <search-component (updateNodes)="updateNodes($event)"
-                        [nodes]="nodes" [tree]="tree"
-                        [inputTestId]="'search-right-tree'"
-                        *ngIf="drawingBoardTreeService.isViewEditFlagTrue()"></search-component>
+                      [nodes]="nodes" [tree]="tree"
+                      [inputTestId]="'search-right-tree'"
+                      *ngIf="drawingBoardTreeService.isViewEditFlagTrue()"></search-component>
   </div>
   <tree-root [attr.data-tests-id]="'drawing-board-tree'" #tree [nodes]="nodes" [options]="options"
              id="drawing-board-tree">
 
-    <ng-template #treeNodeTemplate let-node let-index="index" >
-       <div [attr.id]="getNodeId(node)" [attr.data-tests-id]="'node-'+node.data.modelId +'-' +node.data.modelName" (click)="selectNode(node)" >
-         <custom-popover class="failed-popover-wrap" *ngIf= "node?.data?.isFailed"  [value]= "node?.data?.statusMessage" [placement]="'left'" [popoverType]="'error'">
-          <div class="failed-msg" [attr.data-tests-id]="'failed-error-message'" *ngIf= "node?.data?.isFailed">Failed</div>
-         </custom-popover>
-          <div class="instance-type" style="position: relative;">
-            <div *ngIf="node?.data?.action == 'Create'" class="notShowOnViewMode notShowOnCreateMode newIcon"></div>
-            <div><span title="{{node.data.type}}" [attr.data-tests-id]="'node-type-indicator'">{{node?.data?.typeName}}</span></div>
+    <ng-template #treeNodeTemplate let-node let-index="index">
+      <div class="main-row" [attr.id]="getNodeId(node)" [attr.data-tests-id]="'node-'+node.data.modelId +'-' +node.data.modelName"
+           (click)="selectNode(node)"
+           [ngClass]="{'isLinked' : isLinkedInstance(node?.data)}">
+        <custom-popover class="failed-popover-wrap" *ngIf="node?.data?.isFailed" [value]="node?.data?.statusMessage"
+                        [placement]="'left'" [popoverType]="'error'">
+          <div class="failed-msg" [attr.data-tests-id]="'failed-error-message'" *ngIf="node?.data?.isFailed">Failed
+          </div>
+        </custom-popover>
+        <div class="instance-type" style="position: relative;border: 1px solid #D2D2CD;">
+          <div *ngIf="node?.data?.action == 'Create'" class="notShowOnViewMode notShowOnCreateMode newIcon"></div>
+          <div><span title="{{node.data.type}}"
+                     [attr.data-tests-id]="'node-type-indicator'">{{node?.data?.typeName}}</span></div>
+          <div *ngIf="isLinkedInstance(node?.data)">
+            <svg-icon
+              [ngClass]="'link'"
+              class="icon-link"
+              [size]="'small'"
+              [name]="'link'">
+            </svg-icon>
           </div>
-          <div class="model-info">
+        </div>
+        <div class="model-info" [ngClass]="{'rightBorder' : pageMode === 'VIEW'}">
           <span class="header-info">
             <span class="property-name">
               <span class="auto-name"
@@ -37,15 +58,16 @@
               ></span>
             </span>
           </span>
-            <tree-node-header-properties
-              *ngIf="(node?.data?.action !== 'Create' || node?.data?.parentType === 'VnfGroup') && !node?.data?.isFailed"
-              [properties]="node.data.statusProperties"></tree-node-header-properties>
-          </div>
-          <div class="scaling invalid" *ngIf="node?.data?.errors?.scalingError" [attr.data-tests-id]="'scaling-policy'">
-            <span>Limit</span><span>{{node?.data?.limitMembers}}</span>
-          </div>
-          <div class="model-actions notShowOnViewMode">
+          <tree-node-header-properties
+            *ngIf="(node?.data?.action !== 'Create' || node?.data?.parentType === 'VnfGroup') && !node?.data?.isFailed"
+            [properties]="node.data.statusProperties"></tree-node-header-properties>
+        </div>
+        <div class="scaling invalid" *ngIf="node?.data?.errors?.scalingError" [attr.data-tests-id]="'scaling-policy'">
+          <span>Limit</span><span>{{node?.data?.limitMembers}}</span>
+        </div>
+        <div class="model-actions notShowOnViewMode ">
           <span class="icon-browse"
+                [ngClass]="{'isLinked' : isLinkedInstance(node?.data)}"
                 [attr.data-tests-id]="'node-'+node.data.modelId +'-' +node.data.modelName+'-menu-btn'"
                 (click)="onContextMenu($event, node)">
           <context-menu>
@@ -66,12 +88,12 @@
             </ng-template>
           </context-menu>
           </span>
-            <span
-              *ngIf="drawingBoardTreeService.isVNFMissingData(node, serviceModelId)"
-              tooltip="{{ missingDataTooltip }}"
-              tooltipPlacement="left"
-              [attr.data-tests-id]="'node-'+node.data.modelId +'-' +node.data.modelName+'-alert-icon'"
-              class="icon-alert" >
+          <span
+            *ngIf="drawingBoardTreeService.isVNFMissingData(node, serviceModelId)"
+            tooltip="{{ missingDataTooltip }}"
+            tooltipPlacement="left"
+            [attr.data-tests-id]="'node-'+node.data.modelId +'-' +node.data.modelName+'-alert-icon'"
+            class="icon-alert">
               <svg-icon
                 [mode]="'warning'"
                 [testId]="'icon-alert'"
@@ -79,16 +101,17 @@
                 [name]="'alert-triangle-o'">
               </svg-icon>
             </span>
+          <span *ngIf="drawingBoardTreeService.isVFModuleMissingData(node, serviceModelId)" class="icon-alert"
+                tooltip="{{ missingDataTooltip }}" tooltipPlacement="left"
+                [attr.data-tests-id]="'node-'+node.data.modelId +'-' +node.data.modelName+'-alert-icon'"></span>
+        </div>
 
-            <!--<span *ngIf="drawingBoardTreeService.isVNFMissingData(node, serviceModelId)" class="icon-alert"-->
-                  <!--tooltip="{{ missingDataTooltip }}" tooltipPlacement="left"-->
-                  <!--[attr.data-tests-id]="'node-'+node.data.modelId +'-' +node.data.modelName+'-alert-icon'"></span>-->
-            <span *ngIf="drawingBoardTreeService.isVFModuleMissingData(node, serviceModelId)" class="icon-alert"
-                  tooltip="{{ missingDataTooltip }}" tooltipPlacement="left"
-                  [attr.data-tests-id]="'node-'+node.data.modelId +'-' +node.data.modelName+'-alert-icon'"></span>
-          </div>
-        </div >
-      </ng-template>
+        <div class="action-status">
+          <span class="action-status-type delete" [attr.data-tests-id]="'delete-status-type'" [ngStyle]="{ 'opacity': node.data.action.split('_').pop() !== 'Delete' ? '0' : '1'}">Delete</span>
+        </div>
+
+      </div>
+    </ng-template>
   </tree-root>
 </div>
 
diff --git a/vid-webpack-master/src/app/drawingBoard/service-planning/drawing-board-tree/drawing-board-tree.scss b/vid-webpack-master/src/app/drawingBoard/service-planning/drawing-board-tree/drawing-board-tree.scss
index be9f9f2d4..e08e69e2e 100644
--- a/vid-webpack-master/src/app/drawingBoard/service-planning/drawing-board-tree/drawing-board-tree.scss
+++ b/vid-webpack-master/src/app/drawingBoard/service-planning/drawing-board-tree/drawing-board-tree.scss
@@ -36,6 +36,11 @@
   }
 }
 
+
+.icon-browse.isLinked {
+  display: none !important;
+}
+
 #RETRY_EDIT drawing-board-tree tree-node-collection > div,
 #RETRY drawing-board-tree tree-node-collection > div {
    margin-top: 0px;
@@ -98,11 +103,54 @@ drawing-board-tree {
             @include highlight-toggle-children;
             .node-content-wrapper-focused,
             .node-content-wrapper-active {
+              background: transparent !important;
+              .main-row {
+                //background-color: #E6F6FB;
+                //color: #009FDB;
+                //border-right: none !important;
+                //border: #009FDB 1px solid;
+              }
+              .instance-type {
+                background-color: #E6F6FB;
+                color: #009FDB;
+                border-right: none !important;
+                border: #009FDB 1px solid !important;
+              }
+
+              .isLinked {
+                .model-info {
+                  border-top: 1px #009FDB dashed !important;
+                  border-bottom: 1px #009FDB dashed !important;
+                }
+                .model-info.rightBorder {
+                  border-right: 1px #009FDB dashed !important ;
+                }
+              }
+              .model-info {
+                background-color: #E6F6FB;
+                color: #009FDB;
+                border-right: none !important;
+                border: #009FDB 1px solid;
+              }
+
+              .model-info.rightBorder {
+                border-right: #009FDB 1px solid !important;
+              }
+
+              .model-actions {
+                background-color: #E6F6FB;
+                color: #009FDB;
+                color: #009FDB;
+                border-left: none !important;
+                border: #009FDB 1px solid;
+              }
+
               @include highlight-toggle-children;
-              @include highlight(#E6F6FB, #009FDB);
               .property-name,.instance-type {
                 color: #009FDB !important;
                 position: relative;
+                background-color: #E6F6FB;
+                color: #009FDB !important;
               }
               .status-properties {
                 .status-property-value,.status-property-name {
@@ -119,7 +167,7 @@ drawing-board-tree {
       }
       & .tree-node-expanded {
         > tree-node-wrapper .node-wrapper {
-          box-shadow: 0 0px 2px rgba(90,90,90,0.24);
+
         }
       }
 
@@ -136,7 +184,7 @@ drawing-board-tree {
       }
 
       .tree-node.tree-node-expanded > tree-node-wrapper{
-        box-shadow: 0 2px 2px 0 rgba(0,0,0,.1);
+
         position: relative;
         z-index: 1;
         display: block;
@@ -146,7 +194,11 @@ drawing-board-tree {
           height: 45px;
           &:hover {
             .node-content-wrapper:not(.node-content-wrapper-focused) {
-              background: #F2F2F2;
+              .instance-type ,
+              .model-info ,
+              .model-actions {
+                background: #F2F2F2;
+              }
               .icon-browse:before {
                 color: #5A5A5A;
               }
@@ -164,11 +216,12 @@ drawing-board-tree {
               display: block;
               height: 100%;
               span.toggle-children {
+                height: 43px;
                 display: flex;
                 width: 45px;
+                margin-top: 1px;
                 padding: 0;
                 top: 0;
-                height: inherit;
                 background-image: none;
                 background-color: white;
                 border: 1px solid #D2D2D2;
@@ -196,18 +249,44 @@ drawing-board-tree {
               width:45px;
             }
           }
+          .node-content-wrapper-active,
+          .node-content-wrapper.node-content-wrapper-active:hover,
+          .node-content-wrapper-active.node-content-wrapper-focused {
+            background: white !important;
+          }
 
+          .node-content-wrapper-active.node-content-wrapper-focused {
+            background: white !important;
+          }
           .node-content-wrapper {
+
             padding: 0;
             background: none;
             box-shadow: none;
             border-radius: 0;
-            border: 1px solid #D2D2D2;
+            border: 1px solid white;
             height: 100%;
             flex: 1;
             .resourceGroup {
               border: 1px dashed #D2D2D2 !important;
             }
+
+            .isLinked {
+              .instance-type  {
+                border-style: dashed !important;
+              }
+
+              .model-info {
+                border: 1px #D2D2CD dashed !important;
+                border-right: none !important;
+              }
+
+              .model-actions {
+                border-style: dashed !important;
+                border-left-style: none !important;
+              }
+            }
+
             tree-node-content {
               > div {
                 height: 100%;
@@ -217,14 +296,18 @@ drawing-board-tree {
                 .instance-type {
                   width: 40px;
                   height: 100%;
-                  padding-top: 16px;
                   text-transform: uppercase;
-                  text-align: center;
                   border-right: 1px solid #D2D2D2;
                   word-break: break-all;
                   color: #959595;
                   font-size: 13px;
                   font-family: OpenSans-SemiBold;
+                  display: flex;
+                  text-align: center;
+                  flex-direction: column;
+                  align-items: center;
+                  justify-content: center;
+
                   .newIcon {
                     background: #45B16D;
                     position: absolute;
@@ -247,9 +330,42 @@ drawing-board-tree {
                     display: block;
                   }
                 }
+                .node-content-wrapper-active {
+                  .action-status {
+                    background-color: white !important;
+                  }
+                }
+                .action-status {
+                  padding-left: 10px;
+                  background-color: white !important;
+                  line-height: 42px;
+                  width: 95px;
+                  min-width: 95px;
+                  .action-status-type.delete {
+                    background: transparent;
+                    font-family: OpenSans-SemiBold;
+                    font-size: 12px;
+                    color: red;
+                    border-radius: 50px;
+                    border: 1px solid gray;
+                    padding: 5px 20px;
+                  }
+                }
+
+                .model-info.rightBorder {
+                  border-right: 1px solid #D2D2CD !important;
+                }
                 .model-info {
+                  border: 1px solid #D2D2CD;
+                  line-height: normal;
                   padding-left: 16px;
                   width: 100%;
+                  height: 100%;
+                  flex-direction: column;
+                  display: flex;
+                  justify-content: center;
+                  border-right: none;
+
                   .property-name {
                     font-family: OpenSans-SemiBold;
                     font-size: 13px;
@@ -285,9 +401,17 @@ drawing-board-tree {
                     margin-right: 3px;
                   }
                 }
+
                 .model-actions {
+                  :hover {
+                    background: transparent !important;
+                  }
                   display: flex;
                   align-items: center;
+                  border: 1px solid #D2D2CD;
+                  line-height: normal;
+                  height: 100%;
+                  border-left: none;
                   .icon-browse {
                     padding: 0;
                     width: 30px;
@@ -298,11 +422,11 @@ drawing-board-tree {
                       display: none;
                     }
                     &:hover:before {
-                      color: #009FDB;
+                      //color: #009FDB;
                     }
                     &:focus:before,
                     &:active:before {
-                      color: #009FDB;
+                      //color: #009FDB;
                     }
                   }
 
@@ -319,7 +443,7 @@ drawing-board-tree {
         .tree-children {
           padding-left: 45px;
           .model-info span:first-child {
-            flex: 1.1 !important;
+            //flex: 1.1 !important;
           }
         }
       }
diff --git a/vid-webpack-master/src/app/drawingBoard/service-planning/drawing-board-tree/drawing-board-tree.service.spec.ts b/vid-webpack-master/src/app/drawingBoard/service-planning/drawing-board-tree/drawing-board-tree.service.spec.ts
index 1b913cfe9..b804342c6 100644
--- a/vid-webpack-master/src/app/drawingBoard/service-planning/drawing-board-tree/drawing-board-tree.service.spec.ts
+++ b/vid-webpack-master/src/app/drawingBoard/service-planning/drawing-board-tree/drawing-board-tree.service.spec.ts
@@ -7,39 +7,39 @@ import {NgRedux} from "@angular-redux/store";
 import {DrawingBoardTreeService, TreeNodeContextMenuModel} from "./drawing-board-tree.service";
 import {ITreeNode} from "angular-tree-component/dist/defs/api";
 
- class MockAppStore<T>{
-  getState()  {
+class MockAppStore<T> {
+  getState() {
     return {
-     service : {
-       serviceInstance : {
-         "serviceInstanceId" : {
-           vnfs : {
-             "vnfStoreKey" : {
-               isMissingData : true,
-               vfModules : {
-                 "vfModulesName" : {
-                   "vfModulesName" : {
-                     isMissingData : true
-                   }
-                 }
-               }
-             },
-
-             "vnfStoreKey1" : {
-               isMissingData : false,
-               vfModules : {
-                 "vfModulesName" : {
-                   "vfModulesName" : {
-                     isMissingData : false
-                   }
-                 }
-               }
-             }
-           }
-         }
-       }
-     }
-   }
+      service: {
+        serviceInstance: {
+          "serviceInstanceId": {
+            vnfs: {
+              "vnfStoreKey": {
+                isMissingData: true,
+                vfModules: {
+                  "vfModulesName": {
+                    "vfModulesName": {
+                      isMissingData: true
+                    }
+                  }
+                }
+              },
+
+              "vnfStoreKey1": {
+                isMissingData: false,
+                vfModules: {
+                  "vfModulesName": {
+                    "vfModulesName": {
+                      isMissingData: false
+                    }
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+    }
   }
 }
 
@@ -65,82 +65,81 @@ describe('Drawing board tree Service', () => {
   })().then(done).catch(done.fail));
 
 
-
-
   test('generateContextMenuOptions should return list of optional context menu', () => {
-    const options : TreeNodeContextMenuModel[] = service.generateContextMenuOptions();
-    const expected : TreeNodeContextMenuModel[] = [
+    const options: TreeNodeContextMenuModel[] = service.generateContextMenuOptions();
+    const expected: TreeNodeContextMenuModel[] = [
       new TreeNodeContextMenuModel('edit', 'context-menu-edit', 'Edit', 'edit-file-o'),
       new TreeNodeContextMenuModel('duplicate', 'context-menu-duplicate', 'Duplicate', 'copy-o'),
       new TreeNodeContextMenuModel('showAuditInfo', 'context-menu-showAuditInfo', 'Show audit info', 'eye-o'),
       new TreeNodeContextMenuModel('addGroupMember', 'context-menu-addGroupMember', 'Add group members', 'plus'),
       new TreeNodeContextMenuModel('delete', 'context-menu-delete', 'Delete', 'trash-o'),
       new TreeNodeContextMenuModel('remove', 'context-menu-remove', 'Remove', 'trash-o'),
-      new TreeNodeContextMenuModel('undoDelete', 'context-menu-undoDelete', 'Undo Delete', 'undo-delete')
+      new TreeNodeContextMenuModel('undoDelete', 'context-menu-undoDelete', 'Undo Delete', 'undo-delete'),
+      new TreeNodeContextMenuModel('changeAssociations', 'context-menu-changeAssociations', 'Change Associations', 'edit-file-o')
     ];
-    expect(options.length).toEqual(7);
+    expect(options.length).toEqual(8);
     expect(options).toEqual(expected);
   });
 
   test('isVNFMissingData should return true if vnf isMissingData = true', () => {
-    let node : ITreeNode  = <any>{
-      data : {
-        type : 'VF',
-        vnfStoreKey : "vnfStoreKey"
+    let node: ITreeNode = <any>{
+      data: {
+        type: 'VF',
+        vnfStoreKey: "vnfStoreKey"
       }
     };
-    let result : boolean = service.isVNFMissingData(node, "serviceInstanceId");
+    let result: boolean = service.isVNFMissingData(node, "serviceInstanceId");
     expect(result).toBeTruthy();
   });
 
 
   test('isVNFMissingData should return false if vnf has isMissingData = false', () => {
-    let node : ITreeNode  = <any>{
-      data : {
-        type : 'VFModule',
-        modelName : "vfModulesName",
-        dynamicModelName : "vfModulesName",
-        parent : {
-          vnfStoreKey : "vnfStoreKey1",
-          type : 'VF'
+    let node: ITreeNode = <any>{
+      data: {
+        type: 'VFModule',
+        modelName: "vfModulesName",
+        dynamicModelName: "vfModulesName",
+        parent: {
+          vnfStoreKey: "vnfStoreKey1",
+          type: 'VF'
         }
       }
     };
-    let result : boolean = service.isVNFMissingData(node, "serviceInstanceId");
+    let result: boolean = service.isVNFMissingData(node, "serviceInstanceId");
     expect(result).toBeFalsy();
   });
 
 
   test('isVFModuleMissingData should return true if vnfModule has isMissingData = true', () => {
-    let node : ITreeNode  = <any>{
-      data : {
-        type : 'VFModule',
-        modelName : "vfModulesName",
-        dynamicModelName : "vfModulesName",
-        parent : {
-          vnfStoreKey : "vnfStoreKey",
-          type : 'VF'
+    let node: ITreeNode = <any>{
+      data: {
+        type: 'VFModule',
+        modelName: "vfModulesName",
+        dynamicModelName: "vfModulesName",
+        parent: {
+          vnfStoreKey: "vnfStoreKey",
+          type: 'VF'
         }
       }
     };
-    let result : boolean = service.isVFModuleMissingData(node, "serviceInstanceId");
+    let result: boolean = service.isVFModuleMissingData(node, "serviceInstanceId");
     expect(result).toBeFalsy();
   });
 
 
   test('isVFModuleMissingData should return false if vnfModule has isMissingData = false', () => {
-    let node : ITreeNode  = <any>{
-      data : {
-        type : 'VFModule',
-        modelName : "vfModulesName",
-        dynamicModelName : "vfModulesName",
-        parent : {
-          vnfStoreKey : "vnfStoreKey1",
-          type : 'VF'
+    let node: ITreeNode = <any>{
+      data: {
+        type: 'VFModule',
+        modelName: "vfModulesName",
+        dynamicModelName: "vfModulesName",
+        parent: {
+          vnfStoreKey: "vnfStoreKey1",
+          type: 'VF'
         }
       }
     };
-    let result : boolean = service.isVFModuleMissingData(node, "serviceInstanceId");
+    let result: boolean = service.isVFModuleMissingData(node, "serviceInstanceId");
     expect(result).toBeFalsy();
   });
 
diff --git a/vid-webpack-master/src/app/drawingBoard/service-planning/drawing-board-tree/drawing-board-tree.service.ts b/vid-webpack-master/src/app/drawingBoard/service-planning/drawing-board-tree/drawing-board-tree.service.ts
index 17f761c41..acf622463 100644
--- a/vid-webpack-master/src/app/drawingBoard/service-planning/drawing-board-tree/drawing-board-tree.service.ts
+++ b/vid-webpack-master/src/app/drawingBoard/service-planning/drawing-board-tree/drawing-board-tree.service.ts
@@ -42,7 +42,8 @@ export class  DrawingBoardTreeService {
       new TreeNodeContextMenuModel('addGroupMember', 'context-menu-addGroupMember', 'Add group members', 'plus'),
       new TreeNodeContextMenuModel('delete', 'context-menu-delete', 'Delete', 'trash-o'),
       new TreeNodeContextMenuModel('remove', 'context-menu-remove', 'Remove', 'trash-o'),
-      new TreeNodeContextMenuModel('undoDelete', 'context-menu-undoDelete', 'Undo Delete', 'undo-delete')
+      new TreeNodeContextMenuModel('undoDelete', 'context-menu-undoDelete', 'Undo Delete', 'undo-delete'),
+      new TreeNodeContextMenuModel('changeAssociations', 'context-menu-changeAssociations', 'Change Associations', 'edit-file-o')
     ];
   }