catalog-ui/src/app/ng2/pages/properties-assignment/properties-assignment.page.component.html

   1 <!--
   2   ~ Copyright (C) 2018 AT&T Intellectual Property. All rights reserved.
   3   ~
   4   ~ Licensed under the Apache License, Version 2.0 (the "License");
   5   ~ you may not use this file except in compliance with the License.
   6   ~ You may obtain a copy of the License at
   7   ~
   8   ~      http://www.apache.org/licenses/LICENSE-2.0
   9   ~
  10   ~ Unless required by applicable law or agreed to in writing, software
  11   ~ distributed under the License is distributed on an "AS IS" BASIS,
  12   ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  13   ~ See the License for the specific language governing permissions and
  14   ~ limitations under the License.
  15   -->
  16
  17 <div class="properties-assignment-page">
  18     <div class="main-content">
  19         <div class="left-column">
  20             <div class="main-tabs-section">
  21                 <tabs #propertyInputTabs tabStyle="round-tabs" (tabChanged)="tabChanged($event)" [hideIndicationOnTabChange]="true" >
  22                     <tab tabTitle="Properties">
  23                         <properties-table class="properties-table"
  24                             [fePropertiesMap]="instanceFePropertiesMap"
  25                             [feInstanceNamesMap]="componentInstanceNamesMap"
  26                             [searchTerm]="searchQuery"
  27                             [selectedPropertyId]="selectedFlatProperty.path"
  28                             [propertyNameSearchText]="searchPropertyName"
  29                             [readonly]="isReadonly || resourceIsReadonly"
  30                             [isLoading]="loadingProperties || savingChangedData"
  31                             [hasDeclareOption]="true"
  32                             [showDelete]="!isReadonly && isSelf()"
  33                             [disablePropertyValue] = "disablePropertyValue()"
  34                             (propertyChanged)="dataChanged($event)"
  35                             (propertySelected)="propertySelected($event)"
  36                             (selectPropertyRow)="selectPropertyRow($event)"
  37                             (selectChildProperty)="selectChildProperty($event)"
  38                             (updateCheckedPropertyCount)="updateCheckedPropertyCount($event)"
  39                             (updateCheckedChildPropertyCount)="updateCheckedChildPropertyCount($event)"
  40                             (togggleToscaBtn)="togggleToscaBtn($event)"
  41                             (selectInstanceRow)="selectInstanceRow($event)"
  42                             (deleteProperty)="deleteProperty($event)"
  43                         >
  44                         </properties-table>
  45                     </tab>
  46                     <tab tabTitle="Inputs" [show]="isSelf()">
  47                         <inputs-table class="properties-table"
  48                             [fePropertiesMap]="instanceFePropertiesMap"
  49                             [readonly]="isReadonly"
  50                             [showDelete]="!isReadonly && isSelf()"
  51                             [inputs]="inputs | searchFilter:'name':searchQuery"
  52                             [instanceNamesMap]="componentInstanceNamesMap"
  53                             [componentInstancePropertyMap]="componentInstancePropertyMap"
  54                             [isLoading]="loadingInputs"
  55                             [componentType]="component.componentType"
  56                             [parentComponent]="component"
  57                             (deleteInput)="deleteInput($event)"
  58                             (inputChanged)="dataChanged($event)">
  59                         </inputs-table>
  60                     </tab>
  61                     <tab tabTitle="Policies" [show]="isSelf()">
  62                         <policies-table class="properties-table"
  63                                       [readonly]="isReadonly"
  64                                       [policies]="policies | searchFilter:'name':searchQuery"
  65                                       [instanceNamesMap]="componentInstanceNamesMap"
  66                                       [isLoading]="loadingPolicies"
  67                                       (deletePolicy)="deletePolicy($event)">
  68                         </policies-table>
  69                     </tab>
  70                 </tabs>
  71                 <div class="main-tabs-section-buttons">
  72                     <button class="tlv-btn outline blue" [disabled]="!hasChangedData || savingChangedData" (click)="reverseChangedData()" data-tests-id="properties-reverse-button">Discard</button>
  73                     <button class="tlv-btn blue" [disabled]="!hasChangedData || !isValidChangedData || savingChangedData" (click)="doSaveChangedData()" data-tests-id="properties-save-button">{{savingChangedData ? 'Saving' : 'Save'}}</button>
  74                 </div>
  75             </div>
  76             <div class="header">
  77                 <div class="search-filter-container" [class.without-filter]="isInputsTabSelected || isPoliciesTabSelected">
  78                     <span *ngIf="displayClearSearch && isPropertiesTabSelected" (click)="clickOnClearSearch()" class="clear-filter" data-tests-id="clear-filter-button">Clear All</span>
  79                     <input type="text" class="search-box" placeholder="Search" [(ngModel)]="searchQuery" data-tests-id="search-box"/>
  80                     <span class="sprite search-icon" data-tests-id="search-button"></span>
  81                     <filter-properties-assignment *ngIf="isPropertiesTabSelected" #advanceSearch class="advance-search" [componentType]="component.componentType" (searchProperties)="searchPropertiesInstances($event)"></filter-properties-assignment>
  82                 </div>
  83                 <button (click)="openToscaGetFunctionModal()"
  84                         *ngIf="isPropertiesTabSelected && !isSelf()"
  85                         [disabled]="(checkedPropertiesCount != 1 || isReadonly || hasChangedData) && !enableToscaFunction"
  86                         class="tlv-btn blue declare-button"
  87                         data-tests-id="declare-button select-tosca-function">{{'TOSCA_FUNCTION_LABEL' | translate}}</button>
  88                 <button class="tlv-btn blue declare-button" [disabled]="!checkedPropertiesCount || isReadonly || hasChangedData" (click)="declareInput()" data-tests-id="declare-button declare-input">Declare Input</button>
  89                 <button class="tlv-btn blue declare-button" [disabled]="!checkedPropertiesCount || isReadonly || hasChangedData || isSelf()" (click)="declarePropertiesToPolicies()" data-tests-id="declare-button declare-policy">Declare Policy</button>
  90                 <button class="tlv-btn blue declare-button" [disabled]="!checkedPropertiesCount || checkedChildPropertiesCount || isReadonly || hasChangedData" (click)="declareListProperties()" data-tests-id="declare-but($event)ton declare-list-input">Create List Input</button>
  91             </div>
  92         </div>
  93         <div class="right-column">
  94             <div *ngIf="!isReadonly && !isInputsTabSelected" class="add-btn"
  95                  (click)="addProperty(component.model)" data-tests-id="properties-add-button" [ngClass]="{'disabled': !showAddProperties()}" >Add Property</div>
  96             <div *ngIf="!isReadonly && isInputsTabSelected" class="add-btn"
  97                  (click)="addInput()" [ngClass]="{'disabled': !isSelf()}">Add Input</div>
  98             <tabs #hierarchyNavTabs tabStyle="simple-tabs" class="gray-border">
  99                 <tab tabTitle="Composition">
 100                     <div class="hierarchy-nav-container">
 101                         <loader [display]="loadingInstances" [size]="'medium'" [relative]="true" [loaderDelay]="500"></loader>
 102                         <div class="hierarchy-header white-sub-header">
 103                             <span tooltip="{{component.name}}">{{component.name}}</span>
 104                         </div>
 105                         <div *ngIf="!instancesNavigationData || instancesNavigationData.length === 0 || isInputsTabSelected || isPoliciesTabSelected">No data to display</div>
 106                         <hierarchy-navigation class="hierarchy-nav"
 107                                 (updateSelected)="onInstanceSelectedUpdate($event)"
 108                                 [displayData]="isInputsTabSelected || isPoliciesTabSelected ? []: instancesNavigationData"
 109                                 [selectedItem]="selectedInstanceData?.uniqueId"
 110                                 [displayOptions]="hierarchyInstancesDisplayOptions"></hierarchy-navigation>
 111                     </div>
 112                 </tab>
 113                 <tab tabTitle="Property Structure">
 114                     <div class="hierarchy-nav-container">
 115                     <div class="hierarchy-header white-sub-header" [class.selected]="selectedFlatProperty.path == propertyStructureHeader">
 116                         <span tooltip="{{isPropertiesTabSelected ? propertyStructureHeader : ''}}">{{isPropertiesTabSelected ? (propertyStructureHeader || "No Property Selected") : "No Property Selected"}}</span>
 117                     </div>
 118                     <div *ngIf="!propertiesNavigationData || propertiesNavigationData.length === 0 || isInputsTabSelected || isPoliciesTabSelected">No data to display</div>
 119                     <hierarchy-navigation class="hierarchy-nav"
 120                             (updateSelected)="onPropertySelectedUpdate($event)"
 121                             [displayData]="isInputsTabSelected || isPoliciesTabSelected ? [] : propertiesNavigationData"
 122                             [selectedItem]="selectedFlatProperty.path"
 123                             [displayOptions]="hierarchyPropertiesDisplayOptions"></hierarchy-navigation>
 124                     </div>
 125                 </tab>
 126             </tabs>
 127         </div>
 128     </div>
 129 </div>