catalog-ui/src/app/view-models/tabs/hierarchy/hierarchy-view.html

   1 <!--
   2   ~ Copyright (C) 2018 AT&T Intellectual Property. All rights reserved.
   3   ~
   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
   7   ~
   8   ~      http://www.apache.org/licenses/LICENSE-2.0
   9   ~
  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.
  15 -->
  16
  17 <div class="sdc-general-tab hierarchy-tab" ng-class="">
  18     <loader data-display="isLoading" relative="true" size="medium"></loader>
  19     <div class="sdc-general-tab-title" data-tests-id="tab-header" translate="DEPLOYMENT_TAB_TITLE"></div>
  20
  21     <div class="resizable-container">
  22         <div  data-ng-if="!component.isService()"class="resizable-section">
  23
  24             <perfect-scrollbar scroll-y-margin-offset="0" include-padding="true"
  25                                class="general-tab-scrollbar-container">
  26                 <div class="sdc-general-tab-sub-title" data-tests-id="tab-sub-header">{{component.name}}</div>
  27                 <expand-collapse expanded-selector=".hierarchy-module-member-list.{{$index}}"
  28                                  class="general-tab-expand-collapse" is-close-on-init="true"
  29                                  data-tests-id="hierarchy-module-{{$index}}"
  30                                  data-ng-repeat-start="module in component.modules">
  31                     <div class="expand-collapse-title first-level" data-tests-id="hierarchy-module-{{$index}}-title" ng-class="{'selected': selectedIndex === $index}" data-ng-click="onModuleSelected(module, $index)">
  32                         <div class="expand-collapse-title-icon"></div>
  33                         <span class="expand-collapse-title-text" data-ng-bind="module.name" tooltips
  34                               tooltip-content="{{module.name}}"></span>
  35
  36                     </div>
  37                 </expand-collapse>
  38
  39                 <div data-ng-repeat-end="" class="hierarchy-module-member-list {{$index}}">
  40                     <div ng-repeat="memberId in ::module.members track by $index">
  41                         <div class="expand-collapse-sub-title"  tooltips tooltip-content="{{componentInstancesMap[memberId].name}}">{{componentInstancesMap[memberId].name}}</div>
  42                     </div>
  43                 </div>
  44             </perfect-scrollbar>
  45         </div>
  46         <div  data-ng-if="component.isService()"class="resizable-section">
  47             <perfect-scrollbar scroll-y-margin-offset="0" include-padding="true"
  48                                class="general-tab-scrollbar-container">
  49                 <expand-collapse expanded-selector=".hierarchy-modules-list.{{$index}}"
  50                                  class="general-tab-expand-collapse" is-close-on-init="true"
  51                                  data-tests-id="hierarchy-instance-{{$index}}"
  52
  53                                  data-ng-repeat-start="instance in component.componentInstances">
  54                     <div class="expand-collapse-title first-level" data-tests-id="hierarchy-instance-{{$index}}-title">
  55                         <div class="expand-collapse-title-icon"></div>
  56                         <span class="expand-collapse-title-text" data-ng-bind="instance.name" tooltips
  57                               tooltip-content="{{instance.name}}"></span>
  58
  59                     </div>
  60                 </expand-collapse>
  61                 <!--TODO: Rachel :  -->
  62                 <div data-ng-repeat-end="" class="hierarchy-modules-list {{$index}}">
  63                     <expand-collapse expanded-selector=".outer-index-{{$parent.$index}}.hierarchy-module-member-list.{{$index}}"
  64                                      class="general-tab-expand-collapse" is-close-on-init="true"
  65                                      data-tests-id="hierarchy-module-{{$index}}"
  66                                      data-ng-repeat-start="module in instance.groupInstances">
  67                         <div class="expand-collapse-title second-level" data-tests-id="hierarchy-module-{{$index}}-title" ng-class="{'selected': selectedIndex === $index && selectedInstanceId === instance.uniqueId}" data-ng-click="onModuleSelected(module, $index, instance.uniqueId)">
  68                             <div class="expand-collapse-title-icon"></div>
  69                         <span class="expand-collapse-title-text" data-ng-bind="module.name" tooltips tooltip-content="{{module.name}}"></span>
  70
  71                         </div>
  72                     </expand-collapse>
  73
  74                     <div data-ng-repeat-end="" class="outer-index-{{$parent.$index}} hierarchy-module-member-list {{$index}}">
  75                         <div ng-repeat="memberId in ::module.members track by $index">
  76                             <div class="expand-collapse-sub-title"  tooltips tooltip-content="{{componentInstancesMap[memberId].name}}">{{componentInstancesMap[memberId].name}}</div>
  77                         </div>
  78                     </div>
  79                 </div>
  80             </perfect-scrollbar>
  81         </div>
  82
  83         <div  resizable r-directions="['top']" r-flex="true" ng-if="selectedModule" class="resizable-section module-data-container" data-tests-id="selected-module-data">
  84             <perfect-scrollbar scroll-y-margin-offset="0" include-padding="true"
  85                                class="general-tab-scrollbar-container">
  86                 <div class="module-data">
  87                     <div>
  88                         <div class="module-name module-text-overflow" data-tests-id="selected-module-name" tooltips tooltip-content="{{selectedModule.name}}">{{selectedModule.name}}</div>
  89                         <div class="edit-name-container" data-ng-if="!component.isService()">
  90                             <edit-name-popover header="Edit Module Name" direction="auto top" module="selectedModule" on-save="updateHeatName()" ng-class="{'disabled': isViewOnly}" class="sdc-edit-icon" data-tests-id="edit-name-popover-icon"></edit-name-popover>
  91                         </div>
  92                     </div>
  93                     <div class="" data-tests-id="selected-module-group-uuid" tooltips tooltip-content="{{selectedModule.groupUUID}}"><span class="bold">Module ID:</span><br><span class="small-font">{{selectedModule.groupUUID}}</span></div>
  94                     <div class="" data-tests-id="selected-module-group-customization-uuid" data-ng-if="component.isService() && isViewOnly" tooltips tooltip-content="{{selectedModule.customizationUUID}}"><span class="bold">Customization ID:</span ><br><span class="small-font">{{selectedModule.customizationUUID}}</span></div>
  95                     <div class=""  data-tests-id="selected-module-group-invariant-uuid" tooltips tooltip-content="{{selectedModule.invariantUUID}}"><span class="bold">Invariant UUID:</span><span class="small-font">{{selectedModule.invariantUUID}}</span></div>
  96                     <div data-tests-id="selected-module-version"><span class="bold">Version:</span> {{selectedModule.version}}</div>
  97                     <div data-tests-id="selected-module-is-base"><span class="bold">IsBase:</span> {{selectedModule.isBase}}</div>
  98
  99                 </div>
 100                 <expand-collapse-list-header title="Properties" expand-collapse-list-data="expandCollapsePropertiesList"></expand-collapse-list-header>
 101                 <div ng-repeat="property in filteredProperties=(selectedModule.properties | filter: expandCollapsePropertiesList.filter | orderBy:expandCollapsePropertiesList.orderByField) track by $index" data-ng-if="expandCollapsePropertiesList.expandCollapse">
 102                     <div class="list-item property-data" data-ng-class="{'last':$last}">
 103                         <div class="property-name  module-text-overflow" data-tests-id="selected-module-property-name">
 104                             <span tooltips tooltip-content="{{property.name}}"
 105                                   data-ng-class="{'hand': !isViewOnly}"
 106                                   data-ng-click="!isViewOnly && openEditPropertyModal(property, filteredProperties)">{{property.name}}</span>
 107                         </div>
 108                         <div class="module-text-overflow property-info" data-tests-id="selected-module-property-type"> Type: {{property.type}}</div>
 109                         <div class="module-text-overflow property-info" data-tests-id="selected-module-property-schema-type">Value: {{property.value}}</div>
 110                     </div>
 111                 </div>
 112                 <expand-collapse-list-header title="Artifacts" expand-collapse-list-data="expandCollapseArtifactsList"></expand-collapse-list-header>
 113                 <div ng-repeat="artifact in selectedModule.artifacts| filter: expandCollapseArtifactsList.filter | orderBy:expandCollapseArtifactsList.orderByField  track by $index" data-ng-if="expandCollapseArtifactsList.expandCollapse">
 114                     <div class="list-item artifact-data" data-ng-class="{'last':$last}">
 115                         <div class="artifact-name  module-text-overflow" data-tests-id="selected-module-artifact-name" tooltips tooltip-content="{{artifact.artifactName}}">{{artifact.artifactName}}</div>
 116                         <div class="module-text-overflow" tooltips data-tests-id="selected-module-artifact-uuid" tooltip-content="{{artifact.artifactUUID}}">UUID: {{artifact.artifactUUID}}</div>
 117                         <div data-tests-id="selected-module-artifact-version">Version: {{artifact.artifactVersion}}</div>
 118                     </div>
 119                 </div>
 120             </perfect-scrollbar>
 121         </div>
 122     </div>
 123 </div>