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