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)"
  31            [attr.data-tests-id]="'node-'+node.data.modelId +'-' +node.data.modelName"
  32            (click)="selectNode(node)"
  33            [ngClass]="{'isLinked' : isLinkedInstance(node?.data)}">
  34         <custom-popover class="failed-popover-wrap" *ngIf="node?.data?.isFailed" [value]="node?.data?.statusMessage"
  35                         [placement]="'left'" [popoverType]="'error'">
  36           <div class="failed-msg" [attr.data-tests-id]="'failed-error-message'" *ngIf="node?.data?.isFailed">Failed
  37           </div>
  38         </custom-popover>
  39         <div *ngIf= "node?.data?.type == 'VFmodule'" class="instance-type" style="position: relative;border: 1px solid #D2D2CD;">
  40           <div *ngIf="node?.data?.action == 'Create' && node?.data?.type == 'VFmodule'" class="notShowOnViewMode notShowOnCreateMode newIcon"></div>
  41           <div><span title="{{node.data.position}}"
  42                      [attr.data-tests-id]="'node-position-indicator'">{{node?.data?.position}}</span></div>
  43           <div *ngIf="isLinkedInstance(node?.data)">
  44             <custom-icon
  45               [ngClass]="'link'"
  46               class="icon-link"
  47               [size]="'small'"
  48               [name]="'link'">
  49             </custom-icon>
  50           </div>
  51         </div>
  52         <div class="instance-type" style="position: relative;border: 1px solid #D2D2CD;">
  53           <div *ngIf="node?.data?.action == 'Create'" class="notShowOnViewMode notShowOnCreateMode newIcon"></div>
  54           <div><span title="{{node.data.type}}"
  55                      [attr.data-tests-id]="'node-type-indicator'">{{node?.data?.typeName}}</span></div>
  56           <div *ngIf="isLinkedInstance(node?.data)">
  57             <custom-icon
  58               [ngClass]="'link'"
  59               class="icon-link"
  60               [size]="'small'"
  61               [name]="'link'">
  62             </custom-icon>
  63           </div>
  64         </div>
  65         <div class="model-info" [ngClass]="{'rightBorder' : pageMode === 'VIEW'}">
  66           <span class="header-info">
  67             <span class="property-name">
  68               <span class="auto-name"
  69                     [ngClass]="{'text_decoration' : drawingBoardTreeService.isTextDecoration(node)}"
  70                     [innerHtml]="getNodeName(node, filterValue) | safe : 'html'"
  71                     [attr.data-tests-id]="'node-name'"
  72               ></span>
  73             </span>
  74           </span>
  75           <tree-node-header-properties
  76             *ngIf="(node?.data?.action !== 'Create' || node?.data?.parentType === 'VnfGroup') && !node?.data?.isFailed"
  77             [properties]="node.data.statusProperties"></tree-node-header-properties>
  78         </div>
  79         <div class="scaling invalid" *ngIf="node?.data?.errors?.scalingError" [attr.data-tests-id]="'scaling-policy'">
  80           <span>Limit</span><span>{{node?.data?.limitMembers}}</span>
  81         </div>
  82         <div class="model-actions notShowOnViewMode" *ngIf="isPaused(node)" style="border-right: none;">
  83           <custom-icon
  84             [size]="'large'"
  85             [name]="'pause-upon-completion'"
  86             [testId]="'pause-upon-completion'">
  87           </custom-icon>
  88         </div>
  89         <div class="model-actions notShowOnViewMode">
  90           <span class="icon-browse"
  91                 [ngClass]="{'isLinked' : isLinkedInstance(node?.data)}"
  92                 [attr.data-tests-id]="'node-'+node.data.modelId +'-' +node.data.modelName+'-menu-btn'"
  93                 (click)="onContextMenu($event, node)">
  94           <context-menu>
  95             <ng-template *ngFor="let contextMenuOption of contextMenuOptions"
  96                          contextMenuItem (execute)="executeMenuAction(contextMenuOption.methodName)"
  97                          [visible]="isVisible(currentNode, contextMenuOption.methodName)"
  98                          [enabled]="isEnabled(currentNode, serviceModelId, contextMenuOption.methodName)">
  99               <div [attr.data-tests-id]="contextMenuOption.dataTestId">
 100                 <div style="float: left;margin-top: 3px;">
 101                   <custom-icon
 102                     class="icon-edit"
 103                     [ngClass]="contextMenuOption.iconClass"
 104                     [size]="'small'"
 105                     [name]="contextMenuOption.iconClass">
 106                 </custom-icon></div>
 107                 <div style="padding-left: 25px;">{{getcontextMenuOptionLabel(contextMenuOption)}}</div>
 108               </div>
 109             </ng-template>
 110           </context-menu>
 111           </span>
 112           <span
 113             *ngIf="drawingBoardTreeService.isVNFMissingData(node, serviceModelId) || drawingBoardTreeService.isVFModuleMissingData(node, serviceModelId)"
 114             tooltip="{{ missingDataTooltip }}"
 115             tooltipPlacement="left"
 116             [attr.data-tests-id]="'node-'+ node.data.modelId + '-' + node.data.modelName +'-alert-icon'"
 117             class="icon-alert">
 118               <custom-icon
 119                 [mode]="'warning'"
 120                 [testId]="'icon-alert'"
 121                 [size]="'medium'"
 122                 [name]="'alert-triangle-o'">
 123               </custom-icon>
 124           </span>
 125         </div>
 126
 127         <div class="action-status">
 128           <span
 129             [ngClass]="isUpgraded(node)?'action-status-type upgrade':'action-status-type delete'"
 130             [attr.data-tests-id]="isUpgraded(node)?'action-status-type':'delete-status-type'"
 131             [ngStyle]="{ 'opacity': isUpgraded(node) || isDeleted(node) ? '1' : '0'}">{{isUpgraded(node) ? "Upgrade" : "Delete"}}</span>
 132         </div>
 133       </div>
 134     </ng-template>
 135   </tree-root>
 136 </div>
 137
 138
 139
 140