2 * ============LICENSE_START=======================================================
4 * ================================================================================
5 * Copyright (C) 2021 Nordix Foundation. All rights reserved.
6 * ================================================================================
7 * Licensed under the Apache License, Version 2.0 (the "License");
8 * you may not use this file except in compliance with the License.
9 * You may obtain a copy of the License at
11 * http://www.apache.org/licenses/LICENSE-2.0
13 * Unless required by applicable law or agreed to in writing, software
14 * distributed under the License is distributed on an "AS IS" BASIS,
15 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
16 * See the License for the specific language governing permissions and
17 * limitations under the License.
18 * ============LICENSE_END=========================================================
21 <div class="attributes-outputs-page">
23 <div class="main-content">
24 <div class="left-column">
25 <div class="main-tabs-section">
26 <tabs #attributeOutputTabs tabStyle="round-tabs" (tabChanged)="tabChanged($event)"
27 [hideIndicationOnTabChange]="true">
28 <tab tabTitle="Attributes">
29 <attributes-table class="attributes-table"
30 [feAttributesMap]="instanceFeAttributesMap"
31 [feInstanceNamesMap]="componentInstanceNamesMap"
32 [selectedAttributeId]="selectedFlatAttribute.path"
33 [readonly]="isReadonly || resourceIsReadonly"
34 [isLoading]="loadingAttributes || savingChangedData"
35 [hasDeclareOption]="true"
36 (attributeChanged)="dataChanged($event)"
37 (selectAttributeRow)="selectAttributeRow($event)"
38 (updateCheckedAttributeCount)="updateCheckedAttributeCount($event)">
42 <tab tabTitle="Outputs">
43 <outputs-table class="attributes-table"
44 [feAttributesMap]="instanceFeAttributesMap"
45 [readonly]="isReadonly"
46 [outputs]="outputs | searchFilter:'name':searchQuery"
47 [instanceNamesMap]="componentInstanceNamesMap"
48 [isLoading]="loadingOutputs"
49 [componentType]="component.componentType"
50 (deleteOutput)="deleteOutput($event)"
51 (outputChanged)="dataChanged($event)">
54 <div class="main-tabs-section-buttons">
55 <button class="tlv-btn outline blue" [disabled]="!hasChangedData || savingChangedData" (click)="reverseChangedData()" data-tests-id="attributes-reverse-button">Discard</button>
56 <button class="tlv-btn blue" [disabled]="!hasChangedData || !isValidChangedData || savingChangedData" (click)="doSaveChangedData()" data-tests-id="attributes-save-button">{{savingChangedData ? 'Saving' : 'Save'}}</button>
60 <button class="tlv-btn blue declare-button" [disabled]="!checkedAttributesCount || isReadonly || hasChangedData" (click)="declareAttributes()" data-tests-id="declare-button declare-output">Declare Output</button>
64 <div class="right-column">
65 <tabs #hierarchyNavTabs tabStyle="simple-tabs" class="gray-border">
66 <tab tabTitle="Composition">
67 <div class="hierarchy-nav-container">
68 <loader [display]="loadingInstances" [size]="'medium'" [relative]="true"
69 [loaderDelay]="500"></loader>
70 <div class="hierarchy-header white-sub-header">
71 <span tooltip="{{component.name}}">{{component.name}}</span>
74 *ngIf="!instancesNavigationData || instancesNavigationData.length === 0 || isOutputsTabSelected">
77 <hierarchy-navigation class="hierarchy-nav"
78 (updateSelected)="onInstanceSelectedUpdate($event)"
79 [displayData]="isOutputsTabSelected ? []: instancesNavigationData"
80 [selectedItem]="selectedInstanceData?.uniqueId"
81 [displayOptions]="hierarchyInstancesDisplayOptions"></hierarchy-navigation>
84 <tab tabTitle="Attribute Structure">
85 <div class="hierarchy-nav-container">
86 <div class="hierarchy-header white-sub-header"
87 [class.selected]="selectedFlatAttribute.path == attributeStructureHeader">
89 tooltip="{{isAttributesTabSelected ? attributeStructureHeader : ''}}">{{isAttributesTabSelected
90 ? (attributeStructureHeader || "No Attribute Selected")
91 : "No Attribute Selected"}}</span>
94 *ngIf="!attributesNavigationData || attributesNavigationData.length === 0 || isOutputsTabSelected ">
97 <hierarchy-navigation class="hierarchy-nav"
98 (updateSelected)="onAttributeSelectedUpdate($event)"
99 [displayData]="isOutputsTabSelected ? [] : attributesNavigationData"
100 [selectedItem]="selectedFlatAttribute.path"
101 [displayOptions]="hierarchyAttributesDisplayOptions"></hierarchy-navigation>