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"
   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 class="w-sdc-designer-sidebar-head" data-tests-id="w-sdc-designer-sidebar-head">
  23             <div class="w-sdc-designer-sidebar-logo-ph">
  24                 <div class="large {{selectedComponent.iconSprite}} {{selectedComponent.icon}}">
  25                     <div ng-if="isComponentInstanceSelected()"
  26                          data-ng-class="{'non-certified':'CERTIFIED' !== selectedComponent.lifecycleState}"
  27                          tooltips tooltip-side="top" tooltip-content="Not certified"></div>
  28                 </div>
  29             </div>
  30
  31             <div class="w-sdc-designer-sidebar-logo">
  32               <span class="w-sdc-designer-sidebar-logo-title" data-tests-id="selectedCompTitle" tooltips
  33                     tooltip-class="tooltip-custom break-word-tooltip"
  34                     tooltip-content="&#8203;{{isComponentInstanceSelected() ? currentComponent.selectedInstance.name : currentComponent.name | resourceName}}"
  35                     data-ng-bind="isComponentInstanceSelected() ? currentComponent.selectedInstance.name : currentComponent.name | resourceName"></span>
  36             </div>
  37             <div class="sprite e-sdc-small-icon-pencil w-sdc-designer-update-resource-icon"
  38                  data-ng-if="!isViewOnly && isComponentInstanceSelected()"
  39                  data-ng-click="openUpdateModal()" id="editPencil"></div>
  40
  41             <div class="sprite e-sdc-small-icon-delete w-sdc-designer-delete-resource-icon"
  42                  data-tests-id="e-sdc-small-icon-delete"
  43                  data-ng-if="!isViewOnly && isComponentInstanceSelected()"
  44                  data-ng-click="!isLoading && deleteSelectedComponentInstance()" title="Delete Resource Instance"></div>
  45         </div>
  46
  47         <div class="w-sdc-designer-sidebar-tabs">
  48             <button class="i-sdc-designer-sidebar-tab" data-ui-sref-active="active"
  49                     data-ui-sref="workspace.composition.details"
  50                     tooltips tooltip-class="tooltip-custom tab-tooltip" tooltip-content="Information"
  51                     data-tests-id="information-tab"
  52                     data-ng-class="{'disabled': disabledTabs}">
  53                 <div class="i-sdc-designer-sidebar-tab-icon sprite-new info"></div>
  54             </button>
  55             <!--<button class="i-sdc-designer-sidebar-tab" data-ui-sref-active="active"-->
  56                     <!--ui-sref="workspace.composition.structure"-->
  57                     <!--tooltips tooltip-class="tooltip-custom tab-tooltip" tooltip-content="Composition">-->
  58                 <!--<div class="i-sdc-designer-sidebar-tab-icon sprite-new structure"></div>-->
  59             <!--</button>-->
  60             <button class="i-sdc-designer-sidebar-tab" data-ui-sref-active="active"
  61                     data-ui-sref="workspace.composition.deployment"
  62                     tooltips tooltip-class="tooltip-custom tab-tooltip" tooltip-content="Deployment Artifacts"
  63                     data-tests-id="deployment-artifact-tab"
  64                     data-ng-if="!isPNF() && !isConfiguration() && !(isComponentInstanceSelected() && currentComponent.selectedInstance.isServiceProxy())"
  65                     data-ng-class="{'disabled': disabledTabs}">
  66                 <div class="i-sdc-designer-sidebar-tab-icon sprite-new deployment-artifacts"></div>
  67             </button>
  68             <button tooltips tooltip-class="tooltip-custom tab-tooltip"
  69                     tooltip-content="{{selectedComponent.isResource() || (isComponentInstanceSelected() && currentComponent.selectedInstance.isServiceProxy()) ? 'Properties and Attributes': 'Inputs'}}"
  70                     class="i-sdc-designer-sidebar-tab" data-ui-sref-active="active"
  71                     data-ui-sref="workspace.composition.properties"
  72                     data-tests-id="properties-and-attributes-tab"
  73                     data-ng-class="{'disabled': disabledTabs}">
  74                 <div class="i-sdc-designer-sidebar-tab-icon sprite-new"
  75                      ng-class="selectedComponent.isResource() || (isComponentInstanceSelected() && currentComponent.selectedInstance.isServiceProxy()) ? 'properties': 'inputs'"></div>
  76             </button>
  77             <button class="i-sdc-designer-sidebar-tab" data-ui-sref-active="active"
  78                     data-ui-sref="workspace.composition.artifacts"
  79                     data-ng-if="!isConfiguration() && !(isComponentInstanceSelected() && currentComponent.selectedInstance.isServiceProxy())"
  80                     tooltips tooltip-class="tooltip-custom tab-tooltip" tooltip-content="Information Artifacts"
  81                     data-ng-class="{'disabled': disabledTabs}">
  82                 <div class="i-sdc-designer-sidebar-tab-icon sprite-new information-artifacts"></div>
  83             </button>
  84             <button data-ng-if="!selectedComponent.isService() || (isComponentInstanceSelected() && currentComponent.selectedInstance.isServiceProxy())" class="i-sdc-designer-sidebar-tab"
  85                     data-ui-sref-active="active" ui-sref="workspace.composition.relations"
  86                     tooltips tooltip-class="tooltip-custom tab-tooltip  tooltip-rightside"
  87                     data-tests-id="requirements-and-capabilities"
  88                     tooltip-content="Requirements and Capabilities"
  89                     data-ng-class="{'disabled': disabledTabs}">
  90                 <div class="i-sdc-designer-sidebar-tab-icon sprite-new relations"></div>
  91             </button>
  92             <button data-ng-if="selectedComponent.isService() && !(isComponentInstanceSelected() && currentComponent.selectedInstance.isServiceProxy())" class="i-sdc-designer-sidebar-tab"
  93                     data-ui-sref-active="active" ui-sref="workspace.composition.api" data-tests-id="tab-api"
  94                     tooltips tooltip-class="tooltip-custom tab-tooltip tooltip-rightside" tooltip-content="API"
  95                     data-ng-class="{'disabled': disabledTabs}">
  96                 <div class="i-sdc-designer-sidebar-tab-icon sprite-new api"></div>
  97             </button>
  98
  99         </div>
 100
 101         <div data-ui-view="" class="w-sdc-designer-sidebar-tab-content-view"></div>
 102
 103         <loader data-display="isLoadingRightPanel" relative="true" size="medium"></loader>
 104
 105     </div>
 106 </div>