vid-webpack-master/src/app/drawingBoard/service-planning/drawing-board-tree/drawing-board-tree.html

   1 <error-msg></error-msg>
   2 <div class="drawing-board-tree" style="height: calc(100vh - 55px);">
   3   <div *ngIf="nodes?.length == 0" style="text-align: center;    margin-top: 50px;">
   4
   5     <no-content-message-and-icon *ngIf="objectToModelTreeService.numberOfPlusButton != 0" class="span-over"
   6                                  data-title="Please add objects (VNFs, network, modules etc.)"
   7                                  title2="from the left tree to design the service instance"
   8                                  subtitle="Once done, click Deploy to start instantiation"
   9                                  iconPath="./assets/img/UPLOAD.svg"
  10                                  iconClass="upload-icon-service-planing"></no-content-message-and-icon>
  11
  12     <no-content-message-and-icon *ngIf="objectToModelTreeService.numberOfPlusButton == 0" class="span-over"
  13                                  data-title="No objects to add in this service instance."
  14                                  title2=""
  15                                  subtitle="Click Deploy to start instantiation"
  16                                  iconPath="./assets/img/UPLOAD.svg"
  17                                  iconClass="upload-icon-service-planing"></no-content-message-and-icon>
  18   </div>
  19   <div class="tree-header" *ngIf="nodes?.length > 0">
  20     <div class="title-tree">Instance:</div>
  21     <search-component (updateNodes)="updateNodes($event)"
  22                       [nodes]="nodes" [tree]="tree"
  23                       [inputTestId]="'search-right-tree'"
  24                       *ngIf="drawingBoardTreeService.isViewEditFlagTrue()"></search-component>
  25   </div>
  26   <tree-root [attr.data-tests-id]="'drawing-board-tree'" #tree [nodes]="nodes" [options]="options"
  27              id="drawing-board-tree">
  28
  29     <ng-template #treeNodeTemplate let-node let-index="index">
  30       <div class="main-row" [attr.id]="getNodeId(node)" [attr.data-tests-id]="'node-'+node.data.modelId +'-' +node.data.modelName"
  31            (click)="selectNode(node)"
  32            [ngClass]="{'isLinked' : isLinkedInstance(node?.data)}">
  33         <custom-popover class="failed-popover-wrap" *ngIf="node?.data?.isFailed" [value]="node?.data?.statusMessage"
  34                         [placement]="'left'" [popoverType]="'error'">
  35           <div class="failed-msg" [attr.data-tests-id]="'failed-error-message'" *ngIf="node?.data?.isFailed">Failed
  36           </div>
  37         </custom-popover>
  38         <div class="instance-type" style="position: relative;border: 1px solid #D2D2CD;">
  39           <div *ngIf="node?.data?.action == 'Create'" class="notShowOnViewMode notShowOnCreateMode newIcon"></div>
  40           <div><span title="{{node.data.type}}"
  41                      [attr.data-tests-id]="'node-type-indicator'">{{node?.data?.typeName}}</span></div>
  42           <div *ngIf="isLinkedInstance(node?.data)">
  43             <svg-icon
  44               [ngClass]="'link'"
  45               class="icon-link"
  46               [size]="'small'"
  47               [name]="'link'">
  48             </svg-icon>
  49           </div>
  50         </div>
  51         <div class="model-info" [ngClass]="{'rightBorder' : pageMode === 'VIEW'}">
  52           <span class="header-info">
  53             <span class="property-name">
  54               <span class="auto-name"
  55                     [ngClass]="{'text_decoration' : drawingBoardTreeService.isTextDecoration(node)}"
  56                     [innerHtml]="getNodeName(node, filterValue) | safe : 'html'"
  57                     [attr.data-tests-id]="'node-name'"
  58               ></span>
  59             </span>
  60           </span>
  61           <tree-node-header-properties
  62             *ngIf="(node?.data?.action !== 'Create' || node?.data?.parentType === 'VnfGroup') && !node?.data?.isFailed"
  63             [properties]="node.data.statusProperties"></tree-node-header-properties>
  64         </div>
  65         <div class="scaling invalid" *ngIf="node?.data?.errors?.scalingError" [attr.data-tests-id]="'scaling-policy'">
  66           <span>Limit</span><span>{{node?.data?.limitMembers}}</span>
  67         </div>
  68         <div class="model-actions notShowOnViewMode ">
  69           <span class="icon-browse"
  70                 [ngClass]="{'isLinked' : isLinkedInstance(node?.data)}"
  71                 [attr.data-tests-id]="'node-'+node.data.modelId +'-' +node.data.modelName+'-menu-btn'"
  72                 (click)="onContextMenu($event, node)">
  73           <context-menu>
  74             <ng-template *ngFor="let contextMenuOption of contextMenuOptions"
  75                          contextMenuItem (execute)="executeMenuAction(contextMenuOption.methodName)"
  76                          [visible]="isVisible(currentNode, contextMenuOption.methodName)"
  77                          [enabled]="isEnabled(currentNode, serviceModelId, contextMenuOption.methodName)">
  78               <div [attr.data-tests-id]="contextMenuOption.dataTestId">
  79                 <div style="float: left;margin-top: 3px;">
  80                   <svg-icon
  81                     [ngClass]="contextMenuOption.iconClass"
  82                     class="icon-edit"
  83                     [size]="'small'"
  84                     [name]="contextMenuOption.iconClass">
  85                 </svg-icon></div>
  86                 <div style="padding-left: 25px;">{{contextMenuOption.label}}</div>
  87               </div>
  88             </ng-template>
  89           </context-menu>
  90           </span>
  91           <span
  92             *ngIf="drawingBoardTreeService.isVNFMissingData(node, serviceModelId)"
  93             tooltip="{{ missingDataTooltip }}"
  94             tooltipPlacement="left"
  95             [attr.data-tests-id]="'node-'+node.data.modelId +'-' +node.data.modelName+'-alert-icon'"
  96             class="icon-alert">
  97               <svg-icon
  98                 [mode]="'warning'"
  99                 [testId]="'icon-alert'"
 100                 [size]="'medium'"
 101                 [name]="'alert-triangle-o'">
 102               </svg-icon>
 103             </span>
 104           <span *ngIf="drawingBoardTreeService.isVFModuleMissingData(node, serviceModelId)" class="icon-alert"
 105                 tooltip="{{ missingDataTooltip }}" tooltipPlacement="left"
 106                 [attr.data-tests-id]="'node-'+node.data.modelId +'-' +node.data.modelName+'-alert-icon'"></span>
 107         </div>
 108
 109         <div class="action-status">
 110           <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>
 111         </div>
 112
 113       </div>
 114     </ng-template>
 115   </tree-root>
 116 </div>
 117
 118
 119