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