2 ~ Copyright (C) 2018 AT&T Intellectual Property. All rights reserved.
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
8 ~ http://www.apache.org/licenses/LICENSE-2.0
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.
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 (propertyChanged)="dataChanged($event)"
34 (propertySelected)="propertySelected($event)"
35 (selectPropertyRow)="selectPropertyRow($event)"
36 (selectChildProperty)="selectChildProperty($event)"
37 (updateCheckedPropertyCount)="updateCheckedPropertyCount($event)"
38 (updateCheckedChildPropertyCount)="updateCheckedChildPropertyCount($event)"
39 (selectInstanceRow)="selectInstanceRow($event)"
40 (deleteProperty)="deleteProperty($event)">
43 <tab tabTitle="Inputs">
44 <inputs-table class="properties-table"
45 [readonly]="isReadonly"
46 [inputs]="inputs | searchFilter:'name':searchQuery"
47 [instanceNamesMap]="componentInstanceNamesMap"
48 [isLoading]="loadingInputs"
49 (deleteInput)="deleteInput($event)"
50 (inputChanged)="dataChanged($event)">
53 <tab tabTitle="Policies">
54 <policies-table class="properties-table"
55 [readonly]="isReadonly"
56 [policies]="policies | searchFilter:'name':searchQuery"
57 [instanceNamesMap]="componentInstanceNamesMap"
58 [isLoading]="loadingPolicies"
59 (deletePolicy)="deletePolicy($event)">
63 <div class="main-tabs-section-buttons">
64 <button class="tlv-btn outline blue" [disabled]="!hasChangedData || savingChangedData" (click)="reverseChangedData()" data-tests-id="properties-reverse-button">Discard</button>
65 <button class="tlv-btn blue" [disabled]="!hasChangedData || !isValidChangedData || savingChangedData" (click)="doSaveChangedData()" data-tests-id="properties-save-button">{{savingChangedData ? 'Saving' : 'Save'}}</button>
69 <div class="search-filter-container" [class.without-filter]="isInputsTabSelected || isPoliciesTabSelected">
70 <span *ngIf="displayClearSearch && isPropertiesTabSelected" (click)="clickOnClearSearch()" class="clear-filter" data-tests-id="clear-filter-button">Clear All</span>
71 <input type="text" class="search-box" placeholder="Search" [(ngModel)]="searchQuery" data-tests-id="search-box"/>
72 <span class="sprite search-icon" data-tests-id="search-button"></span>
73 <filter-properties-assignment *ngIf="isPropertiesTabSelected" #advanceSearch class="advance-search" [componentType]="component.componentType" (searchProperties)="searchPropertiesInstances($event)"></filter-properties-assignment>
75 <button class="tlv-btn blue declare-button" [disabled]="!checkedPropertiesCount || isReadonly || hasChangedData" (click)="declareProperties()" data-tests-id="declare-button declare-input">Declare Input</button>
76 <button class="tlv-btn blue declare-button" [disabled]="!checkedPropertiesCount || isReadonly || hasChangedData || isSelf()" (click)="declarePropertiesToPolicies()" data-tests-id="declare-button declare-policy">Declare Policy</button>
77 <button class="tlv-btn blue declare-button" [disabled]="!checkedPropertiesCount || checkedChildPropertiesCount || isReadonly || hasChangedData" (click)="declareListProperties()" data-tests-id="declare-button declare-list-input">Create List Input</button>
80 <div class="right-column">
81 <div *ngIf="!isReadonly" class="add-btn"
82 (click)="addProperty()" [ngClass]="{'disabled': !isSelf()}">Add Property</div>
83 <tabs #hierarchyNavTabs tabStyle="simple-tabs" class="gray-border">
84 <tab tabTitle="Composition">
85 <div class="hierarchy-nav-container">
86 <loader [display]="loadingInstances" [size]="'medium'" [relative]="true" [loaderDelay]="500"></loader>
87 <div class="hierarchy-header white-sub-header">
88 <span tooltip="{{component.name}}">{{component.name}}</span>
90 <div *ngIf="!instancesNavigationData || instancesNavigationData.length === 0 || isInputsTabSelected || isPoliciesTabSelected">No data to display</div>
91 <hierarchy-navigation class="hierarchy-nav"
92 (updateSelected)="onInstanceSelectedUpdate($event)"
93 [displayData]="isInputsTabSelected || isPoliciesTabSelected ? []: instancesNavigationData"
94 [selectedItem]="selectedInstanceData?.uniqueId"
95 [displayOptions]="hierarchyInstancesDisplayOptions"></hierarchy-navigation>
98 <tab tabTitle="Property Structure">
99 <div class="hierarchy-nav-container">
100 <div class="hierarchy-header white-sub-header" [class.selected]="selectedFlatProperty.path == propertyStructureHeader">
101 <span tooltip="{{isPropertiesTabSelected ? propertyStructureHeader : ''}}">{{isPropertiesTabSelected ? (propertyStructureHeader || "No Property Selected") : "No Property Selected"}}</span>
103 <div *ngIf="!propertiesNavigationData || propertiesNavigationData.length === 0 || isInputsTabSelected || isPoliciesTabSelected">No data to display</div>
104 <hierarchy-navigation class="hierarchy-nav"
105 (updateSelected)="onPropertySelectedUpdate($event)"
106 [displayData]="isInputsTabSelected || isPoliciesTabSelected ? [] : propertiesNavigationData"
107 [selectedItem]="selectedFlatProperty.path"
108 [displayOptions]="hierarchyPropertiesDisplayOptions"></hierarchy-navigation>