catalog-ui/src/app/ng2/pages/attributes-outputs/attributes-outputs.page.component.html

   1 <!--
   2  * ============LICENSE_START=======================================================
   3  * SDC
   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
  10  *
  11  *      http://www.apache.org/licenses/LICENSE-2.0
  12  *
  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=========================================================
  19 -->
  20
  21 <div class="attributes-outputs-page">
  22
  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)">
  39             </attributes-table>
  40           </tab>
  41
  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)">
  52             </outputs-table>
  53           </tab>
  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>
  57           </div>
  58         </tabs>
  59         <div class="header">
  60           <button class="tlv-btn blue declare-button" [disabled]="!checkedAttributesCount || isReadonly || hasChangedData" (click)="declareOutput()" data-tests-id="declare-button declare-output">Declare Output</button>
  61         </div>
  62       </div>
  63     </div>
  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>
  72             </div>
  73             <div
  74                 *ngIf="!instancesNavigationData || instancesNavigationData.length === 0 || isOutputsTabSelected">
  75               No data to display
  76             </div>
  77             <hierarchy-navigation class="hierarchy-nav"
  78                                   (updateSelected)="onInstanceSelectedUpdate($event)"
  79                                   [displayData]="isOutputsTabSelected ? []: instancesNavigationData"
  80                                   [selectedItem]="selectedInstanceData?.uniqueId"
  81                                   [displayOptions]="hierarchyInstancesDisplayOptions"></hierarchy-navigation>
  82           </div>
  83         </tab>
  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">
  88               <span
  89                   tooltip="{{isAttributesTabSelected ? attributeStructureHeader : ''}}">{{isAttributesTabSelected
  90                   ? (attributeStructureHeader || "No Attribute Selected")
  91                   : "No Attribute Selected"}}</span>
  92             </div>
  93             <div
  94                 *ngIf="!attributesNavigationData || attributesNavigationData.length === 0 || isOutputsTabSelected ">
  95               No data to display
  96             </div>
  97             <hierarchy-navigation class="hierarchy-nav"
  98                                   (updateSelected)="onAttributeSelectedUpdate($event)"
  99                                   [displayData]="isOutputsTabSelected ? [] : attributesNavigationData"
 100                                   [selectedItem]="selectedFlatAttribute.path"
 101                                   [displayOptions]="hierarchyAttributesDisplayOptions"></hierarchy-navigation>
 102           </div>
 103         </tab>
 104       </tabs>
 105     </div>
 106   </div>
 107 </div>