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">
   9     </span>
  10     <svg-icon-label name="edit-file-o" size="small" class="directive-edit-icon" data-tests-id="directive-edit-icon" (click)="onEditDirectives()">
  11     </svg-icon-label>
  12   </div>
  13
  14   <div *ngIf="isDependent">
  15     <div class="w-sdc-designer-sidebar-section">
  16       <sdc-accordion [title]="'Node Filter Capabilities'" [arrow-direction]="'right'" [open]="true">
  17         <div class="i-sdc-designer-sidebar-section-content-node-filter-section">
  18
  19           <div class="i-sdc-designer-sidebar-section-content-node-filter"
  20                [ngClass]="{'hand': !readonly}"
  21                *ngFor="let capability of constraintCapabilities; let i = index">
  22             <div class="filter-details" [ngClass]="{'readonly': readonly}">
  23               <div class="filter-desc" (click)="!readonly && onSelectNodeFilterCapability(capabilities, i)"
  24                    tooltips
  25                    tooltip="{{capability.capabilityName + ' : ' +
  26                    capability.servicePropertyName + ' ' + getSymbol(capability.constraintOperator) + ' '
  27                    + (capability.sourceName ? capability.sourceName + ':' : '') + capability.value}}">
  28                 {{capability.capabilityName + ' : ' + capability.servicePropertyName + ' ' + getSymbol(capability.constraintOperator)
  29               + ' ' + (capability.sourceName ? capability.sourceName + ':' : '') + capability.value}}
  30               </div>
  31               <span *ngIf="!readonly" class="sprite-new delete-btn delete-icon"
  32                     (click)="openDeleteModal(capabilities, i)"
  33                     data-tests-id="delete-input-button"></span>
  34             </div>
  35           </div>
  36
  37           <div class="w-sdc-designer-sidebar-section-node-filter-footer">
  38             <button
  39                 class="w-sdc-designer-sidebar-section-node-filter-footer-action add-rule-btn tlv-btn blue"
  40                 data-tests-id="add-rule-button"
  41                 (click)="onAddNodeFilterCapabilities()"
  42                 [disabled]="readonly">
  43               {{'DIRECTIVES_AND_NODE_FILTER_ADD_NODE_FILTER' | translate}}
  44             </button>
  45           </div>
  46         </div>
  47       </sdc-accordion>
  48
  49       <sdc-accordion [title]="'Node Filter Properties'" [arrow-direction]="'right'" [open]="true">
  50         <div class="i-sdc-designer-sidebar-section-content-node-filter-section">
  51
  52           <div class="i-sdc-designer-sidebar-section-content-node-filter"
  53                [ngClass]="{'hand': !readonly}"
  54                *ngFor="let property of constraintProperties; let i = index">
  55             <div class="filter-details" [ngClass]="{'readonly': readonly}">
  56               <div class="filter-desc" (click)="!readonly && onSelectNodeFilter(properties, i)"
  57                    tooltips
  58                    tooltip="{{property.servicePropertyName + ' ' + getSymbol(property.constraintOperator) + ' '
  59              + (property.sourceName ? property.sourceName + ':' : '') + property.value}}">
  60                 {{property.servicePropertyName + ' ' + getSymbol(property.constraintOperator)
  61               + ' '
  62               + (property.sourceName ? property.sourceName + ':' : '') + property.value}}
  63               </div>
  64               <span *ngIf="!readonly" class="sprite-new delete-btn delete-icon"
  65                     (click)="openDeleteModal(properties, i)"
  66                     data-tests-id="delete-input-button"></span>
  67             </div>
  68           </div>
  69
  70           <div class="w-sdc-designer-sidebar-section-node-filter-footer">
  71             <button
  72                 class="w-sdc-designer-sidebar-section-node-filter-footer-action add-rule-btn tlv-btn blue"
  73                 data-tests-id="add-rule-button"
  74                 (click)="onAddNodeFilter()"
  75                 [disabled]="readonly">
  76               {{'DIRECTIVES_AND_NODE_FILTER_ADD_NODE_FILTER' | translate}}
  77             </button>
  78           </div>
  79         </div>
  80       </sdc-accordion>
  81     </div>
  82   </div>
  83 </div>