aboutsummaryrefslogtreecommitdiffstats
path: root/catalog-ui/src/app/ng2/pages/attributes-outputs/attributes-outputs.page.component.html
diff options
context:
space:
mode:
authorvasraz <vasyl.razinkov@est.tech>2021-02-16 17:37:57 +0000
committerChristophe Closset <christophe.closset@intl.att.com>2021-02-17 15:57:55 +0000
commit26e5029d922779fd7e786c1a31b6b37492132388 (patch)
tree8e8e68a6913749e1405fce951bc7816d4fa35ba3 /catalog-ui/src/app/ng2/pages/attributes-outputs/attributes-outputs.page.component.html
parentf2c0a4118c3c0b6360b639622766543bd754b59c (diff)
Implement Attributes/Outputs FE
Change-Id: I014bb0ebc07f3fea4266a4f295172eadee546705 Signed-off-by: Vasyl Razinkov <vasyl.razinkov@est.tech> Issue-ID: SDC-3448
Diffstat (limited to 'catalog-ui/src/app/ng2/pages/attributes-outputs/attributes-outputs.page.component.html')
-rw-r--r--catalog-ui/src/app/ng2/pages/attributes-outputs/attributes-outputs.page.component.html103
1 files changed, 103 insertions, 0 deletions
diff --git a/catalog-ui/src/app/ng2/pages/attributes-outputs/attributes-outputs.page.component.html b/catalog-ui/src/app/ng2/pages/attributes-outputs/attributes-outputs.page.component.html
new file mode 100644
index 0000000000..778d5458c6
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/attributes-outputs/attributes-outputs.page.component.html
@@ -0,0 +1,103 @@
+<!--
+ * ============LICENSE_START=======================================================
+ * SDC
+ * ================================================================================
+ * Copyright (C) 2021 Nordix Foundation. 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.
+ * ============LICENSE_END=========================================================
+-->
+
+<div class="attributes-outputs-page">
+
+ <div class="main-content">
+ <div class="left-column">
+ <div class="main-tabs-section">
+ <tabs #attributeOutputTabs tabStyle="round-tabs" (tabChanged)="tabChanged($event)"
+ [hideIndicationOnTabChange]="true">
+ <tab tabTitle="Attributes">
+ <attributes-table class="attributes-table"
+ [feAttributesMap]="instanceFeAttributesMap"
+ [feInstanceNamesMap]="componentInstanceNamesMap"
+ [selectedAttributeId]="selectedFlatAttribute.path"
+ [readonly]="isReadonly || resourceIsReadonly"
+ [isLoading]="loadingAttributes || savingChangedData"
+ [hasDeclareOption]="true"
+ (attributeChanged)="dataChanged($event)"
+ (selectAttributeRow)="selectAttributeRow($event)"
+ (updateCheckedAttributeCount)="updateCheckedAttributeCount($event)">
+ </attributes-table>
+ </tab>
+
+ <tab tabTitle="Outputs">
+ <outputs-table class="attributes-table"
+ [feAttributesMap]="instanceFeAttributesMap"
+ [readonly]="isReadonly"
+ [outputs]="outputs | searchFilter:'name':searchQuery"
+ [instanceNamesMap]="componentInstanceNamesMap"
+ [isLoading]="loadingOutputs"
+ [componentType]="component.componentType"
+ (deleteOutput)="deleteOutput($event)"
+ (outputChanged)="dataChanged($event)">
+ </outputs-table>
+ </tab>
+ </tabs>
+ <div class="header">
+ <button class="tlv-btn blue declare-button" [disabled]="!checkedAttributesCount || isReadonly || hasChangedData" (click)="declareAttributes()" data-tests-id="declare-button declare-output">Declare Output</button>
+ </div>
+ </div>
+ </div>
+ <div class="right-column">
+ <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 || isOutputsTabSelected">
+ No data to display
+ </div>
+ <hierarchy-navigation class="hierarchy-nav"
+ (updateSelected)="onInstanceSelectedUpdate($event)"
+ [displayData]="isOutputsTabSelected ? []: instancesNavigationData"
+ [selectedItem]="selectedInstanceData?.uniqueId"
+ [displayOptions]="hierarchyInstancesDisplayOptions"></hierarchy-navigation>
+ </div>
+ </tab>
+ <tab tabTitle="Attribute Structure">
+ <div class="hierarchy-nav-container">
+ <div class="hierarchy-header white-sub-header"
+ [class.selected]="selectedFlatAttribute.path == attributeStructureHeader">
+ <span
+ tooltip="{{isAttributesTabSelected ? attributeStructureHeader : ''}}">{{isAttributesTabSelected
+ ? (attributeStructureHeader || "No Attribute Selected")
+ : "No Attribute Selected"}}</span>
+ </div>
+ <div
+ *ngIf="!attributesNavigationData || attributesNavigationData.length === 0 || isOutputsTabSelected ">
+ No data to display
+ </div>
+ <hierarchy-navigation class="hierarchy-nav"
+ (updateSelected)="onAttributeSelectedUpdate($event)"
+ [displayData]="isOutputsTabSelected ? [] : attributesNavigationData"
+ [selectedItem]="selectedFlatAttribute.path"
+ [displayOptions]="hierarchyAttributesDisplayOptions"></hierarchy-navigation>
+ </div>
+ </tab>
+ </tabs>
+ </div>
+ </div>
+</div>