<loader data-display="isLoading"></loader>
<div class="w-sdc-designer-canvas" data-ng-class="{sidebaractive: displayDesignerRightSidebar}">
<palette current-component="currentComponent"
- is-view-only="isViewOnly"
+ is-view-only="isViewOnly || isCanvasTagging"
is-loading="isLoading"></palette>
<ng2-palette-popup-panel></ng2-palette-popup-panel>
<div class="w-sdc-designer-sidebar" data-ng-class="{'view-mode':isViewOnly}">
- <div class="w-sdc-designer-sidebar-head" data-tests-id="w-sdc-designer-sidebar-head">
- <div class="w-sdc-designer-sidebar-logo-ph">
- <div class="large {{selectedComponent.iconSprite}} {{selectedComponent.icon}}">
- <div ng-if="isComponentInstanceSelected()"
- data-ng-class="{'non-certified':'CERTIFIED' !== selectedComponent.lifecycleState}"
- tooltips tooltip-side="top" tooltip-content="Not certified"></div>
+ <div ng-if="!selectedZoneInstance">
+
+ <div class="w-sdc-designer-sidebar-head" data-tests-id="w-sdc-designer-sidebar-head">
+ <div class="w-sdc-designer-sidebar-logo-ph">
+ <div class=" large {{selectedComponent.iconSprite}} {{selectedComponent.icon}}"
+ ng-class="{'archive-component':selectedComponent.archived}">
+ <div ng-if="isComponentInstanceSelected()"
+ data-ng-class="{'non-certified':'CERTIFIED' !== selectedComponent.lifecycleState}"
+ tooltips tooltip-side="top" tooltip-content="Not certified"></div>
+ </div>
</div>
- </div>
- <div class="w-sdc-designer-sidebar-logo">
- <span class="w-sdc-designer-sidebar-logo-title" data-tests-id="selectedCompTitle" tooltips
- tooltip-class="tooltip-custom break-word-tooltip"
- tooltip-content="​{{isComponentInstanceSelected() ? currentComponent.selectedInstance.name : currentComponent.name | resourceName}}"
- data-ng-bind="isComponentInstanceSelected() ? currentComponent.selectedInstance.name : currentComponent.name | resourceName"></span>
+ <div class="w-sdc-designer-sidebar-logo">
+ <span class="w-sdc-designer-sidebar-logo-title" data-tests-id="selectedCompTitle" tooltips
+ tooltip-class="tooltip-custom break-word-tooltip"
+ tooltip-content="​{{isComponentInstanceSelected() ? currentComponent.selectedInstance.name : currentComponent.name | resourceName}}"
+ data-ng-bind="isComponentInstanceSelected() ? currentComponent.selectedInstance.name : currentComponent.name | resourceName"></span>
+ </div>
+ <div class="sprite e-sdc-small-icon-pencil w-sdc-designer-update-resource-icon"
+ data-tests-id="renameInstance"
+ data-ng-if="!isViewOnly && isComponentInstanceSelected() && !selectedComponent.archived"
+ data-ng-click="openUpdateModal()" id="editPencil"></div>
+
+ <div class="sprite e-sdc-small-icon-delete w-sdc-designer-delete-resource-icon"
+ data-tests-id="deleteInstance"
+ data-ng-if="!isViewOnly && isComponentInstanceSelected() && !selectedComponent.archived"
+ data-ng-click="!isLoading && deleteSelectedComponentInstance()" title="Delete Resource Instance"></div>
</div>
- <div class="sprite e-sdc-small-icon-pencil w-sdc-designer-update-resource-icon"
- data-ng-if="!isViewOnly && isComponentInstanceSelected()"
- data-ng-click="openUpdateModal()" id="editPencil"></div>
- <div class="sprite e-sdc-small-icon-delete w-sdc-designer-delete-resource-icon"
- data-tests-id="e-sdc-small-icon-delete"
- data-ng-if="!isViewOnly && isComponentInstanceSelected()"
- data-ng-click="!isLoading && deleteSelectedComponentInstance()" title="Delete Resource Instance"></div>
- </div>
+ <div class="w-sdc-designer-sidebar-tabs">
+ <button class="i-sdc-designer-sidebar-tab" data-ui-sref-active="active"
+ data-ui-sref="workspace.composition.details"
+ tooltips tooltip-class="tooltip-custom tab-tooltip" tooltip-content="Information"
+ data-tests-id="information-tab"
+ data-ng-class="{'disabled': disabledTabs}">
+ <div class="i-sdc-designer-sidebar-tab-icon sprite-new info"></div>
+ </button>
+ <!--<button class="i-sdc-designer-sidebar-tab" data-ui-sref-active="active"-->
+ <!--ui-sref="workspace.composition.structure"-->
+ <!--tooltips tooltip-class="tooltip-custom tab-tooltip" tooltip-content="Composition">-->
+ <!--<div class="i-sdc-designer-sidebar-tab-icon sprite-new structure"></div>-->
+ <!--</button>-->
+ <button class="i-sdc-designer-sidebar-tab" data-ui-sref-active="active"
+ data-ui-sref="workspace.composition.deployment"
+ tooltips tooltip-class="tooltip-custom tab-tooltip" tooltip-content="Deployment Artifacts"
+ data-tests-id="deployment-artifact-tab"
+ data-ng-if="!isPNF() && !isConfiguration() && !(isComponentInstanceSelected() && currentComponent.selectedInstance.isServiceProxy())"
+ data-ng-class="{'disabled': disabledTabs}">
+ <div class="i-sdc-designer-sidebar-tab-icon sprite-new deployment-artifacts"></div>
+ </button>
+ <button tooltips tooltip-class="tooltip-custom tab-tooltip"
+ tooltip-content="{{selectedComponent.isResource() || (isComponentInstanceSelected() && currentComponent.selectedInstance.isServiceProxy()) ? 'Properties and Attributes': 'Inputs'}}"
+ class="i-sdc-designer-sidebar-tab" data-ui-sref-active="active"
+ data-ui-sref="workspace.composition.properties"
+ data-tests-id="properties-and-attributes-tab"
+ data-ng-class="{'disabled': disabledTabs}">
+ <div class="i-sdc-designer-sidebar-tab-icon sprite-new"
+ ng-class="selectedComponent.isResource() || (isComponentInstanceSelected() && currentComponent.selectedInstance.isServiceProxy()) ? 'properties': 'inputs'"></div>
+ </button>
+ <button class="i-sdc-designer-sidebar-tab" data-ui-sref-active="active"
+ data-ui-sref="workspace.composition.artifacts"
+ data-ng-if="!isConfiguration() && !(isComponentInstanceSelected() && currentComponent.selectedInstance.isServiceProxy())"
+ tooltips tooltip-class="tooltip-custom tab-tooltip" tooltip-content="Information Artifacts"
+ data-ng-class="{'disabled': disabledTabs}">
+ <div class="i-sdc-designer-sidebar-tab-icon sprite-new information-artifacts"></div>
+ </button>
+ <button data-ng-if="!selectedComponent.isService() || (isComponentInstanceSelected() && currentComponent.selectedInstance.isServiceProxy())" class="i-sdc-designer-sidebar-tab"
+ data-ui-sref-active="active" ui-sref="workspace.composition.relations"
+ tooltips tooltip-class="tooltip-custom tab-tooltip tooltip-rightside"
+ data-tests-id="requirements-and-capabilities"
+ tooltip-content="Requirements and Capabilities"
+ data-ng-class="{'disabled': disabledTabs}">
+ <div class="i-sdc-designer-sidebar-tab-icon sprite-new relations"></div>
+ </button>
+ <button data-ng-if="selectedComponent.isService() && !(isComponentInstanceSelected() && currentComponent.selectedInstance.isServiceProxy())" class="i-sdc-designer-sidebar-tab"
+ data-ui-sref-active="active" ui-sref="workspace.composition.api" data-tests-id="tab-api"
+ tooltips tooltip-class="tooltip-custom tab-tooltip tooltip-rightside" tooltip-content="API"
+ data-ng-class="{'disabled': disabledTabs}">
+ <div class="i-sdc-designer-sidebar-tab-icon sprite-new api"></div>
+ </button>
- <div class="w-sdc-designer-sidebar-tabs">
- <button class="i-sdc-designer-sidebar-tab" data-ui-sref-active="active"
- data-ui-sref="workspace.composition.details"
- tooltips tooltip-class="tooltip-custom tab-tooltip" tooltip-content="Information"
- data-tests-id="information-tab"
- data-ng-class="{'disabled': disabledTabs}">
- <div class="i-sdc-designer-sidebar-tab-icon sprite-new info"></div>
- </button>
- <!--<button class="i-sdc-designer-sidebar-tab" data-ui-sref-active="active"-->
- <!--ui-sref="workspace.composition.structure"-->
- <!--tooltips tooltip-class="tooltip-custom tab-tooltip" tooltip-content="Composition">-->
- <!--<div class="i-sdc-designer-sidebar-tab-icon sprite-new structure"></div>-->
- <!--</button>-->
- <button class="i-sdc-designer-sidebar-tab" data-ui-sref-active="active"
- data-ui-sref="workspace.composition.deployment"
- tooltips tooltip-class="tooltip-custom tab-tooltip" tooltip-content="Deployment Artifacts"
- data-tests-id="deployment-artifact-tab"
- data-ng-if="!isPNF() && !isConfiguration() && !(isComponentInstanceSelected() && currentComponent.selectedInstance.isServiceProxy())"
- data-ng-class="{'disabled': disabledTabs}">
- <div class="i-sdc-designer-sidebar-tab-icon sprite-new deployment-artifacts"></div>
- </button>
- <button tooltips tooltip-class="tooltip-custom tab-tooltip"
- tooltip-content="{{selectedComponent.isResource() || (isComponentInstanceSelected() && currentComponent.selectedInstance.isServiceProxy()) ? 'Properties and Attributes': 'Inputs'}}"
- class="i-sdc-designer-sidebar-tab" data-ui-sref-active="active"
- data-ui-sref="workspace.composition.properties"
- data-tests-id="properties-and-attributes-tab"
- data-ng-class="{'disabled': disabledTabs}">
- <div class="i-sdc-designer-sidebar-tab-icon sprite-new"
- ng-class="selectedComponent.isResource() || (isComponentInstanceSelected() && currentComponent.selectedInstance.isServiceProxy()) ? 'properties': 'inputs'"></div>
- </button>
- <button class="i-sdc-designer-sidebar-tab" data-ui-sref-active="active"
- data-ui-sref="workspace.composition.artifacts"
- data-ng-if="!isConfiguration() && !(isComponentInstanceSelected() && currentComponent.selectedInstance.isServiceProxy())"
- tooltips tooltip-class="tooltip-custom tab-tooltip" tooltip-content="Information Artifacts"
- data-ng-class="{'disabled': disabledTabs}">
- <div class="i-sdc-designer-sidebar-tab-icon sprite-new information-artifacts"></div>
- </button>
- <button data-ng-if="!selectedComponent.isService() || (isComponentInstanceSelected() && currentComponent.selectedInstance.isServiceProxy())" class="i-sdc-designer-sidebar-tab"
- data-ui-sref-active="active" ui-sref="workspace.composition.relations"
- tooltips tooltip-class="tooltip-custom tab-tooltip tooltip-rightside"
- data-tests-id="requirements-and-capabilities"
- tooltip-content="Requirements and Capabilities"
- data-ng-class="{'disabled': disabledTabs}">
- <div class="i-sdc-designer-sidebar-tab-icon sprite-new relations"></div>
- </button>
- <button data-ng-if="selectedComponent.isService() && !(isComponentInstanceSelected() && currentComponent.selectedInstance.isServiceProxy())" class="i-sdc-designer-sidebar-tab"
- data-ui-sref-active="active" ui-sref="workspace.composition.api" data-tests-id="tab-api"
- tooltips tooltip-class="tooltip-custom tab-tooltip tooltip-rightside" tooltip-content="API"
- data-ng-class="{'disabled': disabledTabs}">
- <div class="i-sdc-designer-sidebar-tab-icon sprite-new api"></div>
- </button>
+ </div>
+ <div data-ui-view="" class="w-sdc-designer-sidebar-tab-content-view"></div>
</div>
- <div data-ui-view="" class="w-sdc-designer-sidebar-tab-content-view"></div>
+ <!-- Solution for now to support policies and groups working with Angular 2 components -->
+ <!-- isCertified not relevant for group or policy -->
+ <!-- (selectedZoneInstanceType === ZoneInstanceType.GROUP || selectedZoneInstanceType === ZoneInstanceType.POLICY) -->
+ <div ng-if="selectedZoneInstance">
+
+ <ng2-composition-panel
+ [is-loading]="isLoading"
+ [is-view-only]="isViewOnly || isCanvasTagging"
+ [selected-zone-instance-name]="selectedZoneInstance.instanceData.name"
+ [selected-zone-instance-id]="selectedZoneInstance.instanceData.uniqueId"
+ [selected-zone-instance-type]="selectedZoneInstance.type"
+ [topology-template]="currentComponent"
+ >
+ </ng2-composition-panel>
+ </div>
<loader data-display="isLoadingRightPanel" relative="true" size="medium"></loader>
Code Review / sdc.git / blobdiff