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