diff options
Diffstat (limited to 'catalog-ui/src/app/view-models/workspace/tabs/composition/composition-view.html')
-rw-r--r-- | catalog-ui/src/app/view-models/workspace/tabs/composition/composition-view.html | 167 |
1 files changed, 94 insertions, 73 deletions
diff --git a/catalog-ui/src/app/view-models/workspace/tabs/composition/composition-view.html b/catalog-ui/src/app/view-models/workspace/tabs/composition/composition-view.html index fceb73b882..4cd33f3210 100644 --- a/catalog-ui/src/app/view-models/workspace/tabs/composition/composition-view.html +++ b/catalog-ui/src/app/view-models/workspace/tabs/composition/composition-view.html @@ -2,7 +2,7 @@ <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> @@ -19,86 +19,107 @@ <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> |