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