aboutsummaryrefslogtreecommitdiffstats
path: root/catalog-ui/src/app/ng2/pages/attributes-outputs/attributes-outputs.page.component.html
blob: 778d5458c6581cba1fcb56747972a11f64e02dc6 (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
<!--
 * ============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>