catalog-ui/src/app/ng2/pages/composition/graph/composition-graph.component.html

   1 <div class="sdc-composition-graph-wrapper {{zoneTagMode}}"
   2      [ngClass]="{'with-sidebar': withSidebar$ | async, 'view-only':isViewOnly$ | async}">
   3 </div>
   4
   5 <div class="sdc-composition-menu" [ngClass]="{'with-sidebar': withSidebar$ | async}">
   6
   7     <service-path-selector
   8             *ngIf="topologyTemplate.isService() && compositionService.forwardingPaths"
   9             [drawPath]="drawPathOnCy"
  10             [deletePaths]="deletePathsOnCy"
  11             [selectedPathId]="selectedPathId">
  12     </service-path-selector>
  13
  14     <canvas-search *ngIf="componentInstanceNames" class="composition-search"
  15                    [placeholder]="'Type to search'"
  16                    [data]="componentInstanceNames"
  17                    (searchChanged)="getAutoCompleteValues($event)"
  18                    (searchButtonClicked)="highlightSearchMatches($event)">
  19     </canvas-search>
  20
  21     <!--<service-path class="zoom-icons"-->
  22                   <!--*ngIf="!(isViewOnly$ | async) && topologyTemplate.isService()"-->
  23                   <!--[service]="topologyTemplate"-->
  24                   <!--[onCreate]="createOrUpdateServicePath">-->
  25     <!--</service-path>-->
  26
  27     <svg-icon  *ngIf="!(isViewOnly$ | async) && topologyTemplate.isService()" class="zoom-icons" [mode]="'primary2'" [size]="'medium'" [backgroundShape]="'rectangle'"
  28                [backgroundColor]="'silver'" [name]="'browse'" [clickable]="true" [testId]="'pathsMenuBtn'"
  29                (click)="openServicePathMenu($event)"></svg-icon>
  30     <svg-icon class="zoom-icons" [mode]="'primary2'" [size]="'medium'" [backgroundShape]="'rectangle'"
  31               [backgroundColor]="'silver'" [name]="'expand-o'" [clickable]="true"
  32               (click)="zoomAllWithoutSidebar()"></svg-icon>
  33     <svg-icon class="zoom-icons" [mode]="'primary2'" [size]="'medium'" [backgroundShape]="'rectangle'"
  34               [backgroundColor]="'silver'" [name]="'plus'" [clickable]="true"
  35               (click)="zoom(true)"></svg-icon>
  36     <svg-icon class="zoom-icons" [mode]="'primary2'" [size]="'medium'" [backgroundShape]="'rectangle'"
  37               [backgroundColor]="'silver'" [name]="'minus'" [clickable]="true"
  38               (click)="zoom(false)"></svg-icon>
  39 </div>
  40
  41 <div class="sdc-canvas-zones__wrapper {{zoneTagMode}}" [ngClass]="{'with-sidebar': withSidebar$ | async}">
  42     <zone-container *ngFor="let zone of zones" [title]="zone.title" [type]="zone.type" [count]="zone.instances.length"
  43                     [visible]="zone.visible" [minimized]="zone.minimized" (minimize)="zoneMinimizeToggle(zone.type)"
  44                     (backgroundClick)="zoneBackgroundClicked()">
  45         <zone-instance *ngFor="let instance of zone.instances" [hidden]="instance.hidden"
  46                        [zoneInstance]="instance" [defaultIconText]="zone.defaultIconText"
  47                        [isActive]="activeZoneInstance == instance"
  48                        [activeInstanceMode]="activeZoneInstance && activeZoneInstance.mode"
  49                        [isViewOnly]="isViewOnly$ | async"
  50                        [forceSave]="instance.forceSave"
  51                        (modeChange)="zoneInstanceModeChanged($event.newMode, $event.instance, zone.type)"
  52                        (tagHandleClick)="zoneInstanceTagged($event)"
  53                        (assignmentSaveStart)="zoneAssignmentSaveStart()"
  54                        (assignmentSaveComplete)="zoneAssignmentSaveComplete($event)">
  55         </zone-instance>
  56     </zone-container>
  57 </div>