Initial OpenECOMP SDC commit

Change-Id: I0924d5a6ae9cdc161ae17c68d3689a30d10f407b
Signed-off-by: Michael Lando <ml636r@att.com>

1 files changed, 99 insertions, 0 deletions

diff --git a/catalog-ui/app/scripts/view-models/workspace/tabs/composition/composition-view.html b/catalog-ui/app/scripts/view-models/workspace/tabs/composition/composition-view.html
new file mode 100644
index 0000000000..4efc74c31b
--- /dev/null
+++ b/catalog-ui/app/scripts/view-models/workspace/tabs/composition/composition-view.html
@@ -0,0 +1,99 @@
+<div class="workspace-composition">
+    <loader data-display="isLoading"></loader>
+    <div class="w-sdc-designer-canvas" data-ng-class="{sidebaractive: displayDesignerRightSidebar}" >
+        <palette components="leftPanelComponents"
+                 current-component="currentComponent"
+                 is-view-only="isViewOnly"
+                 is-loading="isLoading"></palette>
+
+        <composition-graph component="currentComponent" is-view-only="isViewOnly"></composition-graph>
+        <!--<graph-creator left-panel-components="leftPanelComponents"-->
+        <!--data-tests-id="canvas"-->
+        <!--on-instance-selected="setSelectedInstance(componentInstance)"-->
+        <!--on-background-click="onBackgroundClick()" current-component="currentComponent"-->
+        <!--api="graphApi" is-view-only="isViewOnly" is-loading="isLoading"></graph-creator>-->
+    </div>
+
+    <div class="w-sdc-designer-sidebar-toggle" data-ng-class="{'active': displayDesignerRightSidebar}"
+         data-ng-init="displayDesignerRightSidebar = true"
+         data-ng-click="displayDesignerRightSidebar = !displayDesignerRightSidebar">
+        <div class="w-sdc-designer-sidebar-toggle-icon sprite-new pointer menu-open-left"></div>
+    </div>
+
+    <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, 'smaller-icon': selectedComponent.icon==='vl' || selectedComponent.icon==='cp'}"
+                         tooltips tooltip-side="top" tooltip-content="Not certified"></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="&#8203;{{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-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">
+                <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">
+                <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() ? '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">
+                <div class="i-sdc-designer-sidebar-tab-icon sprite-new"
+                     ng-class="selectedComponent.isResource() ? 'properties': 'inputs'"></div>
+            </button>
+            <button class="i-sdc-designer-sidebar-tab" data-ui-sref-active="active"
+                    data-ui-sref="workspace.composition.artifacts"
+                    tooltips tooltip-class="tooltip-custom tab-tooltip" tooltip-content="Information Artifacts">
+                <div class="i-sdc-designer-sidebar-tab-icon sprite-new information-artifacts"></div>
+            </button>
+            <button data-ng-show="!selectedComponent.isService()" 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"
+                    tooltip-content="Requirements and Capabilities">
+                <div class="i-sdc-designer-sidebar-tab-icon sprite-new relations"></div>
+            </button>
+            <button data-ng-show="selectedComponent.isService()" 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">
+                <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>
+
+        <loader data-display="isLoadingRightPanel" relative="true" size="medium"></loader>
+
+    </div>
+</div>