catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/info-tab/info-tab.component.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 <ng2-expand-collapse state="0">
  18     <header tooltip="General Information">General Info</header>
  19     <content class="general-info-container">
  20         <!-- TYPE -->
  21         <div class="component-details-panel-item" *ngIf="component.componentType">
  22             <span class="name" [innerHTML]="'Type:'"></span>
  23             <span class="value" data-tests-id="rightTab_componentType" tooltip="{{component.componentType}}">{{component.componentType}}</span>
  24         </div>
  25
  26         <!-- RESOURCE TYPE-->
  27         <div class="component-details-panel-item" *ngIf="component.resourceType">
  28             <span class="name" [innerHTML]="'Resource Type:'"></span>
  29             <span class="value" data-tests-id="rightTab_resourceType" tooltip="{{component.resourceType}}">{{component.resourceType}}</span>
  30         </div>
  31
  32         <!-- VERSION -->
  33         <div class="component-details-panel-item" >
  34             <span class="name" [innerHTML]="'GENERAL_LABEL_VERSION' | translate"></span>
  35             <span class="value" *ngIf="!isComponentSelectedFlag" data-tests-id="rightTab_version" tooltip="{{component.version}}">{{component.version}}</span>
  36             <ng-container *ngIf="isComponentSelectedFlag">
  37                 <select #versionDropdown (change)="onChangeVersion(versionDropdown)" [ngModel]="component.getComponentUid()" data-tests-id="changeVersion">
  38                     <option *ngFor="let version of versions" value="{{version.value}}"
  39                             [disabled]="isDisabledFlag" [class.minor]="(component.componentVersion)%1"
  40                     >{{version.label}}</option>
  41                 </select>
  42             </ng-container>
  43         </div>
  44
  45         <!-- CATEGORY -->
  46         <ng-container *ngIf="component.categories && component.categories[0]">
  47             <div class="component-details-panel-item">
  48                 <span class="name" [innerHTML]="'GENERAL_LABEL_CATEGORY' | translate"></span>
  49                 <span class="value" data-tests-id="rightTab_category" tooltip="{{component.categories[0].name}}">{{component.categories[0].name}}</span>
  50             </div>
  51
  52             <!-- SUB CATEGORY -->
  53             <div class="component-details-panel-item" *ngIf="component.categories[0].subcategories && component.categories[0].subcategories[0]">
  54                 <span class="name" [innerHTML]="'GENERAL_LABEL_SUB_CATEGORY' | translate"></span>
  55                 <span class="value" data-tests-id="rightTab_subCategory" tooltip="{{component.categories[0].subcategories[0].name}}">{{component.categories[0].subcategories[0].name}}</span>
  56             </div>
  57         </ng-container>
  58
  59         <!-- CREATION DATE -->
  60         <div class="component-details-panel-item" *ngIf="component.creationDate">
  61             <span class="name" [innerHTML]="'Creation Date:'"></span>
  62             <span class="value" data-tests-id="rightTab_version" tooltip="{{component.creationDate | date: 'MM/dd/yyyy'}}">{{component.creationDate | date: 'MM/dd/yyyy'}}</span>
  63         </div>
  64
  65         <!-- AUTHOR -->
  66         <div class="component-details-panel-item" *ngIf="component.creatorFullName">
  67             <span class="name" [innerHTML]="'Author:'"></span>
  68             <span class="value" data-tests-id="rightTab_author" tooltip="{{component.creatorFullName}}">{{component.creatorFullName}}</span>
  69         </div>
  70
  71         <!-- Vendor Name data-ng-if="selectedComponent.isResource()"-->
  72         <div class="component-details-panel-item" *ngIf="component.vendorName">
  73             <span class="name" [innerHTML]="'Vendor Name:'"></span>
  74             <span class="value" data-tests-id="rightTab_vendorName" tooltip="{{component.vendorName}}">{{component.vendorName}}</span>
  75         </div>
  76
  77         <!-- Vendor Release data-ng-if="selectedComponent.isResource()"-->
  78         <div class="component-details-panel-item" *ngIf="component.vendorRelease">
  79             <span class="name" [innerHTML]="'Vendor Release:'"></span>
  80             <span class="value" data-tests-id="rightTab_vendorRelease" tooltip="{{component.vendorRelease}}">{{component.vendorRelease}}</span>
  81         </div>
  82
  83         <!-- Vendor Release data-ng-if="selectedComponent.isResource()"-->
  84         <div class="component-details-panel-item" *ngIf="component.resourceVendorModelNumber">
  85             <span class="name" [innerHTML]="'GENERAL_LABEL_RESOURCE_MODEL_NUMBER' | translate"></span>
  86             <span class="value" data-tests-id="rightTab_resourceVendorModelNumber" tooltip="{{component.resourceVendorModelNumber}}">{{component.resourceVendorModelNumber}}</span>
  87         </div>
  88
  89         <!-- Service Type data-ng-if="selectedComponent.isService()"-->
  90         <div class="component-details-panel-item" *ngIf="component.serviceType">
  91             <span class="name" [innerHTML]="'GENERAL_LABEL_SERVICE_TYPE' | translate"></span>
  92             <span class="value" data-tests-id="rightTab_serviceType" tooltip="{{component.serviceType}}">{{component.serviceType}}</span>
  93         </div>
  94
  95         <!-- Service Role data-ng-if="selectedComponent.isService()"-->
  96         <div class="component-details-panel-item" *ngIf="component.serviceRole">
  97             <span class="name" [innerHTML]="'GENERAL_LABEL_SERVICE_ROLE' | translate"></span>
  98             <span class="value" data-tests-id="rightTab_serviceRole" tooltip="{{component.serviceRole}}">{{component.serviceRole}}</span>
  99         </div>
 100
 101         <!-- Contact ID -->
 102         <div class="component-details-panel-item" *ngIf="component.contactId">
 103             <span class="name" [innerHTML]="'GENERAL_LABEL_CONTACT_ID' | translate"></span>
 104             <span class="value" data-tests-id="rightTab_contactId" tooltip="{{component.contactId}}">{{component.contactId}}</span>
 105         </div>
 106
 107         <!-- Service Name data-ng-if="isComponentInstanceSelected() && currentComponent.selectedInstance.isServiceProxy()"-->
 108         <div class="component-details-panel-item" *ngIf="component.sourceModelName">
 109             <span class="name" [innerHTML]="'GENERAL_LABEL_SOURCE_SERVICE_NAME' | translate"></span>
 110             <span class="value" data-tests-id="rightTab_sourceModelName" tooltip="{{component.sourceModelName}}">{{component.sourceModelName}}</span>
 111         </div>
 112
 113         <!-- Customization UUID data-ng-if="isViewMode() && currentComponent.isService() && selectedComponent.isResource()"-->
 114         <div class="component-details-panel-item" *ngIf="component.customizationUUID">
 115             <span class="name" [innerHTML]="'GENERAL_LABEL_RESOURCE_CUSTOMIZATION_UUID' | translate"></span>
 116             <span class="value" data-tests-id="rightTab_customizationModuleUUID" tooltip="{{component.customizationUUID}}">{{component.customizationUUID}}</span>
 117         </div>
 118
 119         <!-- DESCRIPTION -->
 120         <div class="component-details-panel-item description">
 121             <span class="name" [innerHTML]="'GENERAL_LABEL_DESCRIPTION' | translate"></span>
 122             <chars-ellipsis [text]="component.description" [maxChars]="55" [testId]="'rightTab_description'"></chars-ellipsis>
 123         </div>
 124
 125
 126         <!--TODO: move to separate component!-->
 127         <ng-container *ngIf="componentType == 'POLICY'">
 128             <!-- TYPE -->
 129             <div class="component-details-panel-item policy-item">
 130                 <span class="name" [innerHTML]="'GENERAL_LABEL_TYPE' | translate"></span>
 131                 <span class="value" data-tests-id="rightTab_componentType" tooltip="{{component.policyTypeUid}}">{{component.policyTypeUid}}</span>
 132             </div>
 133
 134             <!-- CATEGORY -->
 135             <div class="component-details-panel-item policy-item">
 136                 <span class="name" [innerHTML]="'GENERAL_LABEL_CATEGORY' | translate"></span>
 137                 <span class="value" data-tests-id="rightTab_category" tooltip="Policy">Policy</span>
 138             </div>
 139
 140             <!-- SUB CATEGORY -->
 141             <div class="component-details-panel-item policy-item">
 142                 <span class="name" [innerHTML]="'GENERAL_LABEL_SUB_CATEGORY' | translate"></span>
 143                 <span class="value" data-tests-id="rightTab_subCategory" tooltip="Policy">Policy</span>
 144             </div>
 145         </ng-container>
 146
 147         <!--TODO: move to separate component!-->
 148         <ng-container *ngIf="componentType == 'GROUP'">
 149             <!-- CATEGORY -->
 150             <div class="component-details-panel-item group-item">
 151                 <span class="name" [innerHTML]="'GENERAL_LABEL_CATEGORY' | translate"></span>
 152                 <span class="value" data-tests-id="rightTab_category" tooltip="Group">Group</span>
 153             </div>
 154
 155             <!-- SUB CATEGORY -->
 156             <div class="component-details-panel-item group-item">
 157                 <span class="name" [innerHTML]="'GENERAL_LABEL_SUB_CATEGORY' | translate"></span>
 158                 <span class="value" data-tests-id="rightTab_subCategory" tooltip="Group">Group</span>
 159             </div>
 160
 161         </ng-container>
 162
 163     </content>
 164 </ng2-expand-collapse>
 165
 166 <ng2-expand-collapse *ngIf="component.tags || isComponentInstanceSelected()">
 167     <header tooltip="Tags">Tags</header>
 168     <content class="tags-container">
 169         <span *ngIf="component.tags?.indexOf(component.name)===-1" class="i-sdc-designer-sidebar-section-content-item-tag"
 170               data-tests-id="rightTab_tag" tooltip="{{component.name}}">{{component.name}}</span>
 171         <span class="i-sdc-designer-sidebar-section-content-item-tag" *ngFor="let tag of component.tags"
 172               data-tests-id="rightTab_tag" tooltip="{{tag}}">{{tag}}</span>
 173     </content>
 174 </ng2-expand-collapse>