Catalog alignment

Issue-ID: SDC-2724
Signed-off-by: ys9693 <ys9693@att.com>
Change-Id: I52b4aacb58cbd432ca0e1ff7ff1f7dd52099c6fe

1 files changed, 57 insertions, 0 deletions

diff --git a/catalog-ui/src/app/ng2/pages/composition/graph/composition-graph.component.html b/catalog-ui/src/app/ng2/pages/composition/graph/composition-graph.component.html
new file mode 100644
index 0000000000..5a0ca3e43f
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/composition/graph/composition-graph.component.html
@@ -0,0 +1,57 @@
+<div class="sdc-composition-graph-wrapper {{zoneTagMode}}"
+     [ngClass]="{'with-sidebar': withSidebar$ | async, 'view-only':isViewOnly$ | async}">
+</div>
+
+<div class="sdc-composition-menu" [ngClass]="{'with-sidebar': withSidebar$ | async}">
+
+    <service-path-selector
+            *ngIf="topologyTemplate.isService() && compositionService.forwardingPaths"
+            [drawPath]="drawPathOnCy"
+            [deletePaths]="deletePathsOnCy"
+            [selectedPathId]="selectedPathId">
+    </service-path-selector>
+
+    <canvas-search *ngIf="componentInstanceNames" class="composition-search"
+                   [placeholder]="'Type to search'"
+                   [data]="componentInstanceNames"
+                   (searchChanged)="getAutoCompleteValues($event)"
+                   (searchButtonClicked)="highlightSearchMatches($event)">
+    </canvas-search>
+
+    <!--<service-path class="zoom-icons"-->
+                  <!--*ngIf="!(isViewOnly$ | async) && topologyTemplate.isService()"-->
+                  <!--[service]="topologyTemplate"-->
+                  <!--[onCreate]="createOrUpdateServicePath">-->
+    <!--</service-path>-->
+
+    <svg-icon  *ngIf="!(isViewOnly$ | async) && topologyTemplate.isService()" class="zoom-icons" [mode]="'primary2'" [size]="'medium'" [backgroundShape]="'rectangle'"
+               [backgroundColor]="'silver'" [name]="'browse'" [clickable]="true" [testId]="'pathsMenuBtn'"
+               (click)="openServicePathMenu($event)"></svg-icon>
+    <svg-icon class="zoom-icons" [mode]="'primary2'" [size]="'medium'" [backgroundShape]="'rectangle'"
+              [backgroundColor]="'silver'" [name]="'expand-o'" [clickable]="true"
+              (click)="zoomAllWithoutSidebar()"></svg-icon>
+    <svg-icon class="zoom-icons" [mode]="'primary2'" [size]="'medium'" [backgroundShape]="'rectangle'"
+              [backgroundColor]="'silver'" [name]="'plus'" [clickable]="true"
+              (click)="zoom(true)"></svg-icon>
+    <svg-icon class="zoom-icons" [mode]="'primary2'" [size]="'medium'" [backgroundShape]="'rectangle'"
+              [backgroundColor]="'silver'" [name]="'minus'" [clickable]="true"
+              (click)="zoom(false)"></svg-icon>
+</div>
+
+<div class="sdc-canvas-zones__wrapper {{zoneTagMode}}" [ngClass]="{'with-sidebar': withSidebar$ | async}">
+    <zone-container *ngFor="let zone of zones" [title]="zone.title" [type]="zone.type" [count]="zone.instances.length"
+                    [visible]="zone.visible" [minimized]="zone.minimized" (minimize)="zoneMinimizeToggle(zone.type)"
+                    (backgroundClick)="zoneBackgroundClicked()">
+        <zone-instance *ngFor="let instance of zone.instances" [hidden]="instance.hidden"
+                       [zoneInstance]="instance" [defaultIconText]="zone.defaultIconText"
+                       [isActive]="activeZoneInstance == instance"
+                       [activeInstanceMode]="activeZoneInstance && activeZoneInstance.mode"
+                       [isViewOnly]="isViewOnly$ | async"
+                       [forceSave]="instance.forceSave"
+                       (modeChange)="zoneInstanceModeChanged($event.newMode, $event.instance, zone.type)"
+                       (tagHandleClick)="zoneInstanceTagged($event)"
+                       (assignmentSaveStart)="zoneAssignmentSaveStart()"
+                       (assignmentSaveComplete)="zoneAssignmentSaveComplete($event)">
+        </zone-instance>
+    </zone-container>
+</div>
\ No newline at end of file