From f792671ae247a931f34d902e9276202b5016ef9a Mon Sep 17 00:00:00 2001
From: Ittay Stern <ittay.stern@att.com>
Date: Sun, 7 Jul 2019 19:23:03 +0300
Subject: Merge from ecomp 718fd196 - Modern UI

Issue-ID: VID-378

Change-Id: I2736b98426e324ec3aa233b034229ba84d99839f
Signed-off-by: Ittay Stern <ittay.stern@att.com>
---
 .../drawing-board-tree/drawing-board-tree.html     | 95 ++++++++++++++--------
 1 file changed, 59 insertions(+), 36 deletions(-)

(limited to 'vid-webpack-master/src/app/drawingBoard/service-planning/drawing-board-tree/drawing-board-tree.html')

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>
 
-- 
cgit 1.2.3-korg