catalog-ui/src/app/ng2/components/logic/service-dependencies/service-dependencies.component.html

   1 <div class="service-dependencies">
   2   <loader [display]="isLoading" [size]="'medium'" [relative]="true"></loader>
   3   <select-directives *ngIf="!isDependent || isEditable" (onAddClick)="onAddDirectives($event)" [updateDirectives]="getActualDirectiveValue()">
   4   </select-directives>
   5   <div *ngIf="isDependent && !isEditable" class="checkbox-label-mark-as-dependent">
   6     <label class="i-sdc-form-label">Directive: {{getActualDirectiveValue()}}</label>
   7     <span class="sprite-new delete-btn delete-icon"
   8           (click)="onRemoveDirective()" data-tests-id="delete-input-button" *ngIf="!readonly">
   9     </span>
  10     <svg-icon-label name="edit-file-o" size="small" class="directive-edit-icon" data-tests-id="directive-edit-icon"
  11           (click)="onEditDirectives()" *ngIf="!readonly">
  12     </svg-icon-label>
  13   </div>
  14
  15   <div *ngIf="isDependent">
  16     <div class="w-sdc-designer-sidebar-section">
  17       <sdc-accordion [title]="'Node Filter Capabilities'" [arrow-direction]="'right'" [open]="true">
  18         <div class="i-sdc-designer-sidebar-section-content-node-filter-section">
  19
  20           <div class="i-sdc-designer-sidebar-section-content-node-filter"
  21                [ngClass]="{'hand': !readonly}"
  22                *ngFor="let capability of constraintCapabilities; let i = index">
  23             <div class="filter-details" [ngClass]="{'readonly': readonly}">
  24               <div class="filter-desc" (click)="!readonly && onSelectNodeFilterCapability(capabilities, i)"
  25                    tooltips
  26                    tooltip="{{constraintCapabilityLabels[i]}}">
  27                    {{constraintCapabilityLabels[i]}}
  28               </div>
  29               <span *ngIf="!readonly" class="sprite-new delete-btn delete-icon"
  30                     (click)="openDeleteModal(capabilities, i)"
  31                     data-tests-id="delete-input-button"></span>
  32             </div>
  33           </div>
  34
  35           <div class="w-sdc-designer-sidebar-section-node-filter-footer">
  36             <button
  37                 class="w-sdc-designer-sidebar-section-node-filter-footer-action add-rule-btn tlv-btn blue"
  38                 data-tests-id="add-rule-button"
  39                 (click)="onAddNodeFilterCapabilities()"
  40                 [disabled]="readonly">
  41               {{'DIRECTIVES_AND_NODE_FILTER_ADD_NODE_FILTER' | translate}}
  42             </button>
  43           </div>
  44         </div>
  45       </sdc-accordion>
  46
  47       <sdc-accordion [title]="'Node Filter Properties'" [arrow-direction]="'right'" [open]="true">
  48         <div class="i-sdc-designer-sidebar-section-content-node-filter-section">
  49
  50           <div class="i-sdc-designer-sidebar-section-content-node-filter"
  51                [ngClass]="{'hand': !readonly}"
  52                *ngFor="let property of constraintProperties; let i = index">
  53             <div class="filter-details" [ngClass]="{'readonly': readonly}">
  54               <div class="filter-desc" (click)="!readonly && onSelectNodeFilter(properties, i)"
  55                    tooltips
  56                    tooltip="{{constraintPropertyLabels[i]}}">
  57                    {{constraintPropertyLabels[i]}}
  58               </div>
  59               <span *ngIf="!readonly" class="sprite-new delete-btn delete-icon"
  60                     (click)="openDeleteModal(properties, i)"
  61                     data-tests-id="delete-input-button"></span>
  62             </div>
  63           </div>
  64
  65           <div class="w-sdc-designer-sidebar-section-node-filter-footer">
  66             <button
  67                 class="w-sdc-designer-sidebar-section-node-filter-footer-action add-rule-btn tlv-btn blue"
  68                 data-tests-id="add-rule-button"
  69                 (click)="onAddNodeFilter()"
  70                 [disabled]="readonly">
  71               {{'DIRECTIVES_AND_NODE_FILTER_ADD_NODE_FILTER' | translate}}
  72             </button>
  73           </div>
  74         </div>
  75       </sdc-accordion>
  76     </div>
  77   </div>
  78 </div>