catalog-ui/src/app/view-models/workspace/tabs/composition/composition-view.html

   1 <div class="workspace-composition">
   2     <loader data-display="isLoading"></loader>
   3     <div class="w-sdc-designer-canvas" data-ng-class="{sidebaractive: displayDesignerRightSidebar}">
   4         <palette current-component="currentComponent"
   5                  is-view-only="isViewOnly || isCanvasTagging"
   6                  is-loading="isLoading"></palette>
   7
   8         <ng2-palette-popup-panel></ng2-palette-popup-panel>
   9
  10         <composition-graph component="currentComponent" data-tests-id="canvas"
  11                            is-view-only="isViewOnly" with-sidebar="displayDesignerRightSidebar"></composition-graph>
  12     </div>
  13
  14     <div class="w-sdc-designer-sidebar-toggle" data-ng-class="{'active': displayDesignerRightSidebar}"
  15          data-ng-init="displayDesignerRightSidebar = true"
  16          data-ng-click="displayDesignerRightSidebar = !displayDesignerRightSidebar">
  17         <div class="w-sdc-designer-sidebar-toggle-icon sprite-new pointer menu-open-left"></div>
  18     </div>
  19
  20     <div class="w-sdc-designer-sidebar" data-ng-class="{'view-mode':isViewOnly}">
  21
  22         <div ng-if="!selectedZoneInstance">
  23
  24             <div class="w-sdc-designer-sidebar-head" data-tests-id="w-sdc-designer-sidebar-head">
  25                 <div class="w-sdc-designer-sidebar-logo-ph">
  26                     <div class=" large {{selectedComponent.iconSprite}} {{selectedComponent.icon}}"
  27                     ng-class="{'archive-component':selectedComponent.archived}">
  28                         <div ng-if="isComponentInstanceSelected()"
  29                             data-ng-class="{'non-certified':'CERTIFIED' !== selectedComponent.lifecycleState}"
  30                             tooltips tooltip-side="top" tooltip-content="Not certified"></div>
  31                     </div>
  32                 </div>
  33
  34                 <div class="w-sdc-designer-sidebar-logo">
  35                 <span class="w-sdc-designer-sidebar-logo-title" data-tests-id="selectedCompTitle" tooltips
  36                         tooltip-class="tooltip-custom break-word-tooltip"
  37                         tooltip-content="&#8203;{{isComponentInstanceSelected() ? currentComponent.selectedInstance.name : currentComponent.name | resourceName}}"
  38                         data-ng-bind="isComponentInstanceSelected() ? currentComponent.selectedInstance.name : currentComponent.name | resourceName"></span>
  39                 </div>
  40                 <div class="sprite e-sdc-small-icon-pencil w-sdc-designer-update-resource-icon"
  41                     data-tests-id="renameInstance"
  42                     data-ng-if="!isViewOnly && isComponentInstanceSelected() && !selectedComponent.archived"
  43                     data-ng-click="openUpdateModal()" id="editPencil"></div>
  44
  45                 <div class="sprite e-sdc-small-icon-delete w-sdc-designer-delete-resource-icon"
  46                     data-tests-id="deleteInstance"
  47                     data-ng-if="!isViewOnly && isComponentInstanceSelected() && !selectedComponent.archived"
  48                     data-ng-click="!isLoading && deleteSelectedComponentInstance()" title="Delete Resource Instance"></div>
  49             </div>
  50
  51             <div class="w-sdc-designer-sidebar-tabs">
  52                 <button class="i-sdc-designer-sidebar-tab" data-ui-sref-active="active"
  53                         data-ui-sref="workspace.composition.details"
  54                         tooltips tooltip-class="tooltip-custom tab-tooltip" tooltip-content="Information"
  55                         data-tests-id="information-tab"
  56                         data-ng-class="{'disabled': disabledTabs}">
  57                     <div class="i-sdc-designer-sidebar-tab-icon sprite-new info"></div>
  58                 </button>
  59                 <!--<button class="i-sdc-designer-sidebar-tab" data-ui-sref-active="active"-->
  60                         <!--ui-sref="workspace.composition.structure"-->
  61                         <!--tooltips tooltip-class="tooltip-custom tab-tooltip" tooltip-content="Composition">-->
  62                     <!--<div class="i-sdc-designer-sidebar-tab-icon sprite-new structure"></div>-->
  63                 <!--</button>-->
  64                 <button class="i-sdc-designer-sidebar-tab" data-ui-sref-active="active"
  65                         data-ui-sref="workspace.composition.deployment"
  66                         tooltips tooltip-class="tooltip-custom tab-tooltip" tooltip-content="Deployment Artifacts"
  67                         data-tests-id="deployment-artifact-tab"
  68                         data-ng-if="!isPNF() && !isConfiguration() && !(isComponentInstanceSelected() && currentComponent.selectedInstance.isServiceProxy())"
  69                         data-ng-class="{'disabled': disabledTabs}">
  70                     <div class="i-sdc-designer-sidebar-tab-icon sprite-new deployment-artifacts"></div>
  71                 </button>
  72                 <button tooltips tooltip-class="tooltip-custom tab-tooltip"
  73                         tooltip-content="{{selectedComponent.isResource() || (isComponentInstanceSelected() && currentComponent.selectedInstance.isServiceProxy()) ? 'Properties and Attributes': 'Inputs'}}"
  74                         class="i-sdc-designer-sidebar-tab" data-ui-sref-active="active"
  75                         data-ui-sref="workspace.composition.properties"
  76                         data-tests-id="properties-and-attributes-tab"
  77                         data-ng-class="{'disabled': disabledTabs}">
  78                     <div class="i-sdc-designer-sidebar-tab-icon sprite-new"
  79                         ng-class="selectedComponent.isResource() || (isComponentInstanceSelected() && currentComponent.selectedInstance.isServiceProxy()) ? 'properties': 'inputs'"></div>
  80                 </button>
  81                 <button class="i-sdc-designer-sidebar-tab" data-ui-sref-active="active"
  82                         data-ui-sref="workspace.composition.artifacts"
  83                         data-ng-if="!isConfiguration() && !(isComponentInstanceSelected() && currentComponent.selectedInstance.isServiceProxy())"
  84                         tooltips tooltip-class="tooltip-custom tab-tooltip" tooltip-content="Information Artifacts"
  85                         data-ng-class="{'disabled': disabledTabs}">
  86                     <div class="i-sdc-designer-sidebar-tab-icon sprite-new information-artifacts"></div>
  87                 </button>
  88                 <button data-ng-if="!selectedComponent.isService() || (isComponentInstanceSelected() && currentComponent.selectedInstance.isServiceProxy())" class="i-sdc-designer-sidebar-tab"
  89                         data-ui-sref-active="active" ui-sref="workspace.composition.relations"
  90                         tooltips tooltip-class="tooltip-custom tab-tooltip  tooltip-rightside"
  91                         data-tests-id="requirements-and-capabilities"
  92                         tooltip-content="Requirements and Capabilities"
  93                         data-ng-class="{'disabled': disabledTabs}">
  94                     <div class="i-sdc-designer-sidebar-tab-icon sprite-new relations"></div>
  95                 </button>
  96                 <button data-ng-if="selectedComponent.isService() && !(isComponentInstanceSelected() && currentComponent.selectedInstance.isServiceProxy())" class="i-sdc-designer-sidebar-tab"
  97                         data-ui-sref-active="active" ui-sref="workspace.composition.api" data-tests-id="tab-api"
  98                         tooltips tooltip-class="tooltip-custom tab-tooltip tooltip-rightside" tooltip-content="API"
  99                         data-ng-class="{'disabled': disabledTabs}">
 100                     <div class="i-sdc-designer-sidebar-tab-icon sprite-new api"></div>
 101                 </button>
 102
 103             </div>
 104             <div data-ui-view="" class="w-sdc-designer-sidebar-tab-content-view"></div>
 105
 106         </div>
 107
 108         <!-- Solution for now to support policies and groups working with Angular 2 components -->
 109         <!-- isCertified not relevant for group or policy -->
 110         <!-- (selectedZoneInstanceType === ZoneInstanceType.GROUP || selectedZoneInstanceType === ZoneInstanceType.POLICY) -->
 111         <div ng-if="selectedZoneInstance">
 112
 113             <ng2-composition-panel
 114                 [is-loading]="isLoading"
 115                 [is-view-only]="isViewOnly || isCanvasTagging"
 116                 [selected-zone-instance-name]="selectedZoneInstance.instanceData.name"
 117                 [selected-zone-instance-id]="selectedZoneInstance.instanceData.uniqueId"
 118                 [selected-zone-instance-type]="selectedZoneInstance.type"
 119                 [topology-template]="currentComponent"
 120             >
 121             </ng2-composition-panel>
 122         </div>
 123
 124         <loader data-display="isLoadingRightPanel" relative="true" size="medium"></loader>
 125
 126     </div>
 127 </div>