catalog-ui/src/app/ng2/pages/workspace/deployment/panel/panel-tabs/hierarchy-tab/hierarchy-tab.component.html

   1 <div class="sdc-hierarchy-tab" ng-class="">
   2     <sdc-loader [global]="false" [testId]="'hierarchy-tab-loader'" [active]="isLoading" [relative]="true" [size]="'medium'"></sdc-loader>
   3     <div class="sdc-hierarchy-tab-title"
   4          [attr.data-tests-id]="'tab-header'">{{'DEPLOYMENT_TAB_TITLE' | translate }}</div>
   5     <div [ngClass]="{'scroll-module-list': selectedModule}">
   6         <div *ngIf="topologyTemplateType != 'SERVICE'; else isService" class="modules-list">
   7             <div>
   8                 <div class="sdc-hierarchy-tab-sub-title" data-tests-id="tab-sub-header">{{topologyTemplateName}}</div>
   9                 <div *ngFor="let module of modules; index as i">
  10                     <sdc-accordion [title]="module.name" [arrow-direction]="'left'"
  11                                    [css-class]="'expand-collapse-container'"
  12                                    [ngClass]="{'selected': selectedModule !== undefined && selectedModule.uniqueId === module.uniqueId}"
  13                                    [testId]="'hierarchy-module-' + i + '-title'" tooltip="{{module.name}}"
  14                                    (click)="onModuleSelected(module)">
  15                         <div *ngFor="let memberId of getKeys(module.members)">
  16                             <div class="expand-collapse-sub-title" tooltip="{{memberId}}">{{memberId}}</div>
  17                         </div>
  18                     </sdc-accordion>
  19                 </div>
  20             </div>
  21         </div>
  22
  23         <ng-template #isService>
  24             <div class="module-list">
  25                 <div *ngFor="let instance of componentInstances; index as instanceIndex">
  26                     <sdc-accordion [title]="instance.name" [arrow-direction]="'left'"
  27                                    [css-class]="'expand-collapse-container outer-container'"
  28                                    [testId]="'hierarchy-instance-' + instanceIndex + '-title'"
  29                                    tooltip="{{instance.name}}">
  30                         <div *ngFor="let module of instance.groupInstances; index as moduleIndex">
  31                             <sdc-accordion [title]="module.name" [arrow-direction]="'left'"
  32                                            [css-class]="'expand-collapse-container inner-container'"
  33                                            [ngClass]="{'selected': selectedModule && selectedModule.groupInstanceUniqueId === module.uniqueId}"
  34                                            [testId]="'hierarchy-module-' + moduleIndex + '-title'"
  35                                            tooltip="{{module.uniqueId}}"
  36                                            (click)="onModuleSelected(module, instance.uniqueId)">
  37                                 <div *ngFor="let memberId of getKeys(module.members)">
  38                                     <div class="expand-collapse-sub-title" tooltip="{{memberId}}">{{memberId}}</div>
  39                                 </div>
  40                             </sdc-accordion>
  41                         </div>
  42                     </sdc-accordion>
  43                 </div>
  44             </div>
  45         </ng-template>
  46
  47         <!--TODO: Add Resizable-->
  48         <div *ngIf="selectedModule"class="module-data-container" [attr.data-tests-id]="'selected-module-data'">
  49             <div class="module-data">
  50                 <div class="module-name-container">
  51                     <div class="module-name module-text-overflow" [attr.data-tests-id]="'selected-module-name'"
  52                          tooltip="{{selectedModule.name}}">{{selectedModule.name}}</div>
  53                     <div class="edit-name-container" *ngIf="topologyTemplateType != 'SERVICE'">
  54                         <svg-icon name="edit-o" [size]="'medium'" [ngClass]="{'hand-pointer': !isViewOnly}" (click)="openEditModuleNamePopup($event)"></svg-icon>
  55                     </div>
  56                 </div>
  57                 <div [attr.data-tests-id]="'selected-module-group-uuid'" tooltip="{{selectedModule.groupUUID}}">
  58                     <div class="selected-module-property-header">Module ID:</div>
  59                     <div class="selected-module-property-value small-font">{{selectedModule.groupUUID}}</div>
  60                 </div>
  61                 <div [attr.data-tests-id]="'selected-module-group-customization-uuid'"
  62                      *ngIf="topologyTemplateType == 'SERVICE' && isViewOnly"
  63                      tooltip="{{selectedModule.customizationUUID}}">
  64                     <div class="selected-module-property-header">Customization ID:</div>
  65                     <div class="selected-module-property-value small-font">{{selectedModule.customizationUUID}}</div>
  66                 </div>
  67                 <div [attr.data-tests-id]="'selected-module-group-invariant-uuid'"
  68                      tooltip="{{selectedModule.invariantUUID}}">
  69                     <div class="selected-module-property-header">Invariant UUID:</div>
  70                     <div class="selected-module-property-value small-font">{{selectedModule.invariantUUID}}</div>
  71                 </div>
  72                 <div [attr.data-tests-id]="'selected-module-version'" class="selected-module-property-container">
  73                     <div class="selected-module-property-header">Version:</div>
  74                     <div class="selected-module-property-value same-row">{{selectedModule.version}}</div>
  75                 </div>
  76                 <div data-tests-id="selected-module-is-base" class="selected-module-property-container">
  77                     <div class="selected-module-property-header">IsBase:</div>
  78                     <div class="selected-module-property-value same-row">{{selectedModule.isBase}}</div>
  79                 </div>
  80
  81             </div>
  82             <sdc-accordion [title]="'Properties'" [arrow-direction]="'right'"
  83                            [css-class]="'expand-collapse-module-data-container'">
  84                 <div *ngFor="let property of selectedModule.properties | orderBy:['name']:['asc']">
  85                     <div class="module-data-list-item">
  86                         <div class="module-data-list-item-value property-name"
  87                              [attr.data-tests-id]="'selected-module-property-name'">
  88                             <span tooltip="{{property.name}}" [ngClass]="{'hand-pointer': !isViewOnly}"
  89                                   (click)="!isViewOnly && openEditPropertyModal(property)">{{property.name}}</span>
  90                         </div>
  91                         <div class="module-data-list-item-value property-info"
  92                              [attr.data-tests-id]="'selected-module-property-type'"> Type: {{property.type}}</div>
  93                         <div class="module-data-list-item-value property-info"
  94                              [attr.data-tests-id]="'selected-module-property-schema-type'">
  95                             Value: {{property.value}}</div>
  96                     </div>
  97                 </div>
  98             </sdc-accordion>
  99             <sdc-accordion [title]="'Artifacts'" [arrow-direction]="'right'"
 100                            [css-class]="'expand-collapse-module-data-container'">
 101                 <div *ngFor="let artifact of selectedModule.artifacts | orderBy:['artifactName']:['asc']">
 102                     <div class="module-data-list-item">
 103                         <div class="artifact-list-item">
 104                             <div class="module-data-list-item-value"
 105                                  [attr.data-tests-id]="'selected-module-artifact-name'"
 106                                  tooltip="{{artifact.artifactName}}">{{artifact.artifactName}}</div>
 107                             <div class="module-data-list-item-value artifact-info"
 108                                  [attr.data-tests-id]="'selected-module-artifact-uuid'"
 109                                  tooltip="{{artifact.artifactUUID}}">UUID: {{artifact.artifactUUID}}</div>
 110                             <div class="module-data-list-item-value artifact-info"
 111                                  [attr.data-tests-id]="'selected-module-artifact-version'">
 112                                 Version: {{artifact.artifactVersion}}</div>
 113                         </div>
 114                     </div>
 115                 </div>
 116             </sdc-accordion>
 117         </div>
 118     </div>
 119 </div>