aboutsummaryrefslogtreecommitdiffstats
path: root/catalog-ui/src/app/ng2/components/ui
diff options
context:
space:
mode:
authorMichael Lando <ml636r@att.com>2018-07-29 16:13:45 +0300
committerMichael Lando <ml636r@att.com>2018-07-29 16:20:34 +0300
commit5b593496b8f1b8e8be8d7d2dbcc223332e65a49b (patch)
tree2f9dfc45191e723da69cf74be7829784e9741b94 /catalog-ui/src/app/ng2/components/ui
parent9200382f2ce7b4bb729aa287d0878004b2d2b4f9 (diff)
re base code
Change-Id: I12a5ca14a6d8a87e9316b9ff362eb131105f98a5 Issue-ID: SDC-1566 Signed-off-by: Michael Lando <ml636r@att.com>
Diffstat (limited to 'catalog-ui/src/app/ng2/components/ui')
-rw-r--r--catalog-ui/src/app/ng2/components/ui/canvas-zone/zone-container.component.html6
-rw-r--r--catalog-ui/src/app/ng2/components/ui/canvas-zone/zone-container.component.less2
-rw-r--r--catalog-ui/src/app/ng2/components/ui/canvas-zone/zone-container.component.ts32
-rw-r--r--catalog-ui/src/app/ng2/components/ui/canvas-zone/zone-instance/zone-instance.component.html14
-rw-r--r--catalog-ui/src/app/ng2/components/ui/canvas-zone/zone-instance/zone-instance.component.less100
-rw-r--r--catalog-ui/src/app/ng2/components/ui/canvas-zone/zone-instance/zone-instance.component.ts100
-rw-r--r--catalog-ui/src/app/ng2/components/ui/dynamic-element/dynamic-element.component.ts8
-rw-r--r--catalog-ui/src/app/ng2/components/ui/expand-collapse/expand-collapse.component.html13
-rw-r--r--catalog-ui/src/app/ng2/components/ui/expand-collapse/expand-collapse.component.less7
-rw-r--r--catalog-ui/src/app/ng2/components/ui/expand-collapse/expand-collapse.component.ts56
-rw-r--r--catalog-ui/src/app/ng2/components/ui/form-components/dropdown/ui-element-dropdown.component.html2
-rw-r--r--catalog-ui/src/app/ng2/components/ui/form-components/input/ui-element-input.component.html1
-rw-r--r--catalog-ui/src/app/ng2/components/ui/form-components/integer-input/ui-element-integer-input.component.html1
-rw-r--r--catalog-ui/src/app/ng2/components/ui/form-components/popover-input/ui-element-popover-input.component.html5
-rw-r--r--catalog-ui/src/app/ng2/components/ui/form-components/popover-input/ui-element-popover-input.component.ts16
-rw-r--r--catalog-ui/src/app/ng2/components/ui/form-components/ui-element-base.component.ts3
-rw-r--r--catalog-ui/src/app/ng2/components/ui/forms/modal-forms.module.ts27
-rw-r--r--catalog-ui/src/app/ng2/components/ui/forms/unsaved-changes/unsaved-changes.component.html6
-rw-r--r--catalog-ui/src/app/ng2/components/ui/forms/unsaved-changes/unsaved-changes.component.ts17
-rw-r--r--catalog-ui/src/app/ng2/components/ui/forms/value-edit/value-edit.component.html12
-rw-r--r--catalog-ui/src/app/ng2/components/ui/forms/value-edit/value-edit.component.less3
-rw-r--r--catalog-ui/src/app/ng2/components/ui/forms/value-edit/value-edit.component.ts25
-rw-r--r--catalog-ui/src/app/ng2/components/ui/modal/add-elements/add-elements.component.html30
-rw-r--r--catalog-ui/src/app/ng2/components/ui/modal/add-elements/add-elements.component.less61
-rw-r--r--catalog-ui/src/app/ng2/components/ui/modal/add-elements/add-elements.component.ts65
-rw-r--r--catalog-ui/src/app/ng2/components/ui/modal/add-elements/add-elements.module.ts30
-rw-r--r--catalog-ui/src/app/ng2/components/ui/modal/modal.component.html1
-rw-r--r--catalog-ui/src/app/ng2/components/ui/palette-animation/palette-animation.component.ts11
-rw-r--r--catalog-ui/src/app/ng2/components/ui/palette-popup-panel/palette-popup-panel.component.ts3
-rw-r--r--catalog-ui/src/app/ng2/components/ui/tile/tile.component.html28
-rw-r--r--catalog-ui/src/app/ng2/components/ui/tile/tile.component.less0
-rw-r--r--catalog-ui/src/app/ng2/components/ui/tile/tile.component.ts24
-rw-r--r--catalog-ui/src/app/ng2/components/ui/tile/tile.module.ts15
-rw-r--r--catalog-ui/src/app/ng2/components/ui/ui-elements.module.ts56
34 files changed, 675 insertions, 105 deletions
diff --git a/catalog-ui/src/app/ng2/components/ui/canvas-zone/zone-container.component.html b/catalog-ui/src/app/ng2/components/ui/canvas-zone/zone-container.component.html
index e279e3f704..981efbb58e 100644
--- a/catalog-ui/src/app/ng2/components/ui/canvas-zone/zone-container.component.html
+++ b/catalog-ui/src/app/ng2/components/ui/canvas-zone/zone-container.component.html
@@ -1,11 +1,11 @@
-<div class="sdc-canvas-zone {{class}}-zone" [class.minimized]="minifyZone" [class.hidden]="!showZone">
- <div class="sdc-canvas-zone__header" (click)="unminifyZone()" >
+<div class="sdc-canvas-zone {{class}}-zone" [class.minimized]="minimized" [class.hidden]="!visible" (click)="backgroundClicked()">
+ <div class="sdc-canvas-zone__header" (click)="unminifyZone(); $event.stopPropagation();" >
<div class="sdc-canvas-zone__title">{{title}}
<span class="sdc-canvas-zone__counter">{{count}}</span>
</div>
<span class="sdc-canvas-zone__state-button">&ndash;</span>
</div>
- <div class="sdc-canvas-zone__container">
+ <div class="sdc-canvas-zone__container" #scrollDiv >
<ng-content></ng-content>
</div>
</div> \ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/components/ui/canvas-zone/zone-container.component.less b/catalog-ui/src/app/ng2/components/ui/canvas-zone/zone-container.component.less
index 3e77c5ca3b..02880a9202 100644
--- a/catalog-ui/src/app/ng2/components/ui/canvas-zone/zone-container.component.less
+++ b/catalog-ui/src/app/ng2/components/ui/canvas-zone/zone-container.component.less
@@ -1,5 +1,5 @@
.sdc-canvas-zone {
- width: 280px;
+ width: 285px;
max-height:186px;
display:flex;
flex-direction:column;
diff --git a/catalog-ui/src/app/ng2/components/ui/canvas-zone/zone-container.component.ts b/catalog-ui/src/app/ng2/components/ui/canvas-zone/zone-container.component.ts
index 7e60cb37a6..4059ad6cae 100644
--- a/catalog-ui/src/app/ng2/components/ui/canvas-zone/zone-container.component.ts
+++ b/catalog-ui/src/app/ng2/components/ui/canvas-zone/zone-container.component.ts
@@ -1,6 +1,5 @@
-import { Component, Input, Output, ViewEncapsulation, EventEmitter } from '@angular/core';
-import { EventListenerService } from 'app/services';
-import { GRAPH_EVENTS } from 'app/utils';
+import { Component, Input, Output, ViewEncapsulation, EventEmitter, OnInit } from '@angular/core';
+import { ZoneInstanceType } from '../../../../models/graph/zones/zone-instance';
@Component({
selector: 'zone-container',
@@ -9,17 +8,28 @@ import { GRAPH_EVENTS } from 'app/utils';
encapsulation: ViewEncapsulation.None
})
-export class ZoneContainerComponent {
+export class ZoneContainerComponent implements OnInit {
@Input() title:string;
- @Input() class:string;
- @Input() count:number;
- @Input() showZone:boolean;
- @Input() minifyZone:boolean;
- constructor(private eventListenerService:EventListenerService) {}
+ @Input() type:ZoneInstanceType;
+ @Input() count:number;
+ @Input() visible:boolean;
+ @Input() minimized:boolean;
+ @Output() minimize: EventEmitter<any> = new EventEmitter<any>();
+ @Output() backgroundClick: EventEmitter<void> = new EventEmitter<void>();
+ private class:string;
+
+ constructor() {}
+
+ ngOnInit() {
+ this.class = ZoneInstanceType[this.type].toLowerCase();
+ }
private unminifyZone = () => {
- this.minifyZone = !this.minifyZone;
- this.eventListenerService.notifyObservers(GRAPH_EVENTS.ON_ZONE_SIZE_CHANGE);
+ this.minimize.emit();
+ }
+
+ private backgroundClicked = () => {
+ this.backgroundClick.emit();
}
} \ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/components/ui/canvas-zone/zone-instance/zone-instance.component.html b/catalog-ui/src/app/ng2/components/ui/canvas-zone/zone-instance/zone-instance.component.html
index d36b7aec6f..031b081323 100644
--- a/catalog-ui/src/app/ng2/components/ui/canvas-zone/zone-instance/zone-instance.component.html
+++ b/catalog-ui/src/app/ng2/components/ui/canvas-zone/zone-instance/zone-instance.component.html
@@ -1,8 +1,10 @@
-<div class="zone-child mode-{{config.mode}}" [class.locked]="activeInstanceMode > MODE.HOVER"
- (mouseenter)="setMode(MODE.HOVER)" (mouseleave)="setMode(MODE.NONE)" (click)="setMode(MODE.SELECTED)">
- <div class="zone-child__handle" (click)="setMode(MODE.TAG, $event)">+</div>
- <div class="zone-child__body">
- <div class="zone-child__body-content">{{config.count || defaultIconText}}</div>
+<div tooltip="{{zoneInstance.instanceData.name}}" #currentComponent
+ class="zone-instance mode-{{zoneInstance.mode}}" [class.locked]="activeInstanceMode > MODE.HOVER" [class.hiding]="hidden"
+ (mouseenter)="setMode(MODE.HOVER)" (mouseleave)="setMode(MODE.NONE)" (click)="setMode(MODE.SELECTED, $event)">
+ <div *ngIf="zoneInstance.handle" class="target-handle {{zoneInstance.handle}}" (click)="tagHandleClicked($event)"></div>
+ <div *ngIf="!isViewOnly" class="zone-instance__handle" (click)="setMode(MODE.TAG, $event)">+</div>
+ <div class="zone-instance__body">
+ <div class="zone-instance__body-content">{{zoneInstance.assignments.length || defaultIconText}}</div>
</div>
- <div class="zone-child__name">{{config.name}}</div>
+ <div class="zone-instance__name">{{zoneInstance.instanceData.name}}</div>
</div> \ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/components/ui/canvas-zone/zone-instance/zone-instance.component.less b/catalog-ui/src/app/ng2/components/ui/canvas-zone/zone-instance/zone-instance.component.less
index a1d56df96e..b562c08514 100644
--- a/catalog-ui/src/app/ng2/components/ui/canvas-zone/zone-instance/zone-instance.component.less
+++ b/catalog-ui/src/app/ng2/components/ui/canvas-zone/zone-instance/zone-instance.component.less
@@ -1,9 +1,12 @@
-.zone-child {
+@import '../../../../../../assets/styles/variables';
+
+.zone-instance {
position:relative;
width:76px;
margin:5px;
+ opacity:1;
- .zone-child__handle {
+ .zone-instance__handle {
display:none;
position:absolute;
right:4px;
@@ -11,33 +14,34 @@
width:22px;
height:22px;
cursor:pointer;
- border: solid white 1px;
+ border: solid @main_color_p 1px;
border-radius: 2px;
text-align: center;
font-weight:bold;
}
- .zone-child__body {
+ .zone-instance__body {
margin:0 auto;
width:43px;
height:43px;
display:flex;
padding:3px;
-
}
- .zone-child__body-content {
+ .zone-instance__body-content {
border-radius: 2px;
flex:1;
- color:white;
- font-size:18px;
+ color:@main_color_p;
+ font-size:16px;
text-align:center;
display:flex;
align-items: center;
justify-content: center;
+ box-shadow:none;
+ transition:box-shadow 5s;
}
- .zone-child__name {
+ .zone-instance__name {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
@@ -45,66 +49,86 @@
}
/* Dynamic classes below */
+ .target-handle {
+ position:absolute;
+ width:18px;
+ height:18px;
+ display:block;
+ top: -4px;
+ right: 10px;
+ background-size: 100% 100%;
+ cursor: url("../../../../../../assets/styles/images/canvas-tagging-icons/policy_2.svg"), pointer;
+
+ &.tagged-policy {
+ background-image: url('../../../../../../assets/styles/images/canvas-tagging-icons/policy_added.svg');
+ }
+
+ &.tag-available {
+ background-image: url('../../../../../../assets/styles/images/canvas-tagging-icons/indication.svg');
+ }
+ }
+
+
&.mode-1, &.mode-2, &.mode-3 { //hover, selected, tag
- .zone-child__body {
+ .zone-instance__body {
border:solid 2px;
border-radius: 2px;
padding:2px;
cursor:pointer;
}
- .zone-child__handle{
+ }
+
+ &.mode-1, &.mode-2:hover{
+ .zone-instance__handle{
display:block;
- cursor:pointer;
}
}
&.locked {
- cursor: default;
+ cursor: inherit;
}
-
- // &:not(.locked):hover .zone-child__handle{
- // display:block;
- // }
- .zone-child__body {
- cursor: default;
+
+ &.hiding {
+ opacity:0;
+ .zone-instance__body-content {
+ box-shadow: #CCC 0px 0px 15px;
+ }
}
- &.mode-3 .zone-child__handle {
+
+
+ &.mode-3 .zone-instance__handle {
width:24px;
height:24px;
right:3px;
top:9px;
display:block;
background-image: linear-gradient(-140deg, #009E98 0%, #97D648 100%);
- border: 2px solid #FFFFFF;
+ border: 2px solid @main_color_p;
border-radius: 2px;
box-shadow: inset 2px -2px 3px 0 #007A3E;
- cursor: pointer;
}
}
.sdc-canvas-zone.group-zone {
- .zone-child__handle {
- background-color:#009FDB;
- }
- .zone-child__body {
- border-color:#009FDB;
+ .zone-instance__handle {
+ background-color:@main_color_a;
}
- .zone-child__body-content {
- background: #009FDB;
+ .zone-instance__body {
+ border-color:@main_color_a;
+ .zone-instance__body-content {
+ background: @main_color_a;
+ }
}
}
.sdc-canvas-zone.policy-zone {
- .zone-child__handle {
- background-color:#0568AE;
+ .zone-instance__handle {
+ background-color:@main_color_r;
}
- .zone-child__body {
- border-color:#1287D9;
- .zone-child__body-content {
- background: #1287D9;
+ .zone-instance__body {
+ border-color:@main_color_r;
+ .zone-instance__body-content {
+ background: @main_color_r;
}
}
- .zone-child__body-content {
- background: #0568AE;
- }
} \ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/components/ui/canvas-zone/zone-instance/zone-instance.component.ts b/catalog-ui/src/app/ng2/components/ui/canvas-zone/zone-instance/zone-instance.component.ts
index 8057ae908a..3c2dd45db5 100644
--- a/catalog-ui/src/app/ng2/components/ui/canvas-zone/zone-instance/zone-instance.component.ts
+++ b/catalog-ui/src/app/ng2/components/ui/canvas-zone/zone-instance/zone-instance.component.ts
@@ -1,5 +1,14 @@
-import { Component, Input, Output, EventEmitter, ViewEncapsulation } from '@angular/core';
-import { ZoneInstanceConfig, ZoneInstanceMode } from 'app/models/graph/zones/zone-child';
+import { Component, Input, Output, EventEmitter, ViewEncapsulation, OnInit, SimpleChange, ElementRef, ViewChild, SimpleChanges } from '@angular/core';
+import {
+ ZoneInstance, ZoneInstanceMode, ZoneInstanceType,
+ IZoneInstanceAssignment
+} from 'app/models/graph/zones/zone-instance';
+import { PoliciesService } from '../../../../services/policies.service';
+import { GroupsService } from '../../../../services/groups.service';
+import { IZoneService } from "../../../../../models/graph/zones/zone";
+import { EventListenerService } from 'app/services';
+import { GRAPH_EVENTS } from '../../../../../utils';
+import { Subject, Observable } from 'rxjs';
@Component({
selector: 'zone-instance',
@@ -7,22 +16,95 @@ import { ZoneInstanceConfig, ZoneInstanceMode } from 'app/models/graph/zones/zon
styleUrls: ['./zone-instance.component.less'],
encapsulation: ViewEncapsulation.None
})
-export class ZoneInstanceComponent {
+export class ZoneInstanceComponent implements OnInit {
- @Input() config:ZoneInstanceConfig;
+ @Input() zoneInstance:ZoneInstance;
@Input() defaultIconText:string;
@Input() isActive:boolean;
+ @Input() isViewOnly:boolean;
@Input() activeInstanceMode: ZoneInstanceMode;
+ @Input() hidden:boolean;
+ @Input() forceSave:Subject<Function>;
@Output() modeChange: EventEmitter<any> = new EventEmitter<any>();
+ @Output() assignmentSaveStart: EventEmitter<void> = new EventEmitter<void>();
+ @Output() assignmentSaveComplete: EventEmitter<boolean> = new EventEmitter<boolean>();
+ @Output() tagHandleClick: EventEmitter<ZoneInstance> = new EventEmitter<ZoneInstance>();
+ @ViewChild('currentComponent') currentComponent: ElementRef;
private MODE = ZoneInstanceMode;
+ private zoneService:IZoneService;
- private setMode = (mode:ZoneInstanceMode, event?:any):void => {
- if(!this.isActive || this.isActive && mode == ZoneInstanceMode.TAG){ //when active, do not allow hover/select mode toggling
- this.modeChange.emit({newMode: mode, instance: this.config});
+ constructor(private policiesService:PoliciesService, private groupsService:GroupsService, private eventListenerService:EventListenerService){}
+
+ ngOnInit(){
+ if(this.zoneInstance.type == ZoneInstanceType.POLICY){
+ this.zoneService = this.policiesService;
+ } else {
+ this.zoneService = this.groupsService;
}
- if(event){
- event.stopPropagation();
+ this.forceSave.subscribe((afterSaveFunction:Function) => {
+ this.setMode(ZoneInstanceMode.TAG, null, afterSaveFunction);
+ })
+ }
+
+ ngOnChanges(changes:SimpleChanges) {
+ if(changes.hidden){
+ this.currentComponent.nativeElement.scrollIntoView({behavior: "smooth", block: "nearest", inline:"end"});
}
}
+ ngOnDestroy() {
+ this.forceSave.unsubscribe();
+ }
+
+ private setMode = (mode:ZoneInstanceMode, event?:any, afterSaveCallback?:Function):void => {
+
+ if(event){ //prevent event from handle and then repeat event from zone instance
+ event.stopPropagation();
+ }
+
+ if(!this.isActive && this.activeInstanceMode === ZoneInstanceMode.TAG) {
+ return; //someone else is tagging. No events allowed
+ }
+
+ if(this.isActive && this.zoneInstance.mode === ZoneInstanceMode.TAG){
+ if(mode !== ZoneInstanceMode.TAG) {
+ return; //ignore all other events. The only valid option is saving changes.
+ }
+
+ let oldAssignments:Array<IZoneInstanceAssignment> = this.zoneInstance.instanceData.getSavedAssignments();
+ if(this.zoneInstance.isZoneAssignmentChanged(oldAssignments, this.zoneInstance.assignments)) {
+
+ this.assignmentSaveStart.emit();
+
+ this.zoneService.updateZoneInstanceAssignments(this.zoneInstance.parentComponentType, this.zoneInstance.parentComponentID, this.zoneInstance.instanceData.uniqueId, this.zoneInstance.assignments).subscribe(
+ (success) => {
+ this.zoneInstance.instanceData.setSavedAssignments(this.zoneInstance.assignments);
+ if(this.zoneInstance.type === ZoneInstanceType.POLICY){
+ this.eventListenerService.notifyObservers(GRAPH_EVENTS.ON_POLICY_INSTANCE_UPDATE, this.zoneInstance.instanceData);
+ } else {
+ this.eventListenerService.notifyObservers(GRAPH_EVENTS.ON_GROUP_INSTANCE_UPDATE, this.zoneInstance.instanceData);
+ }
+ this.assignmentSaveComplete.emit(true);
+ if(afterSaveCallback) afterSaveCallback();
+ }, (error) => {
+ this.zoneInstance.assignments = oldAssignments;
+ this.assignmentSaveComplete.emit(false);
+ });
+ } else {
+ if(afterSaveCallback) afterSaveCallback();
+ }
+ this.modeChange.emit({newMode: ZoneInstanceMode.NONE, instance: this.zoneInstance});
+
+ } else {
+ this.modeChange.emit({newMode: mode, instance: this.zoneInstance});
+ }
+
+
+ }
+
+ private tagHandleClicked = (event:Event) => {
+ this.tagHandleClick.emit(this.zoneInstance);
+ event.stopPropagation();
+ };
+
} \ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/components/ui/dynamic-element/dynamic-element.component.ts b/catalog-ui/src/app/ng2/components/ui/dynamic-element/dynamic-element.component.ts
index d1e68f3088..c15f92ccb8 100644
--- a/catalog-ui/src/app/ng2/components/ui/dynamic-element/dynamic-element.component.ts
+++ b/catalog-ui/src/app/ng2/components/ui/dynamic-element/dynamic-element.component.ts
@@ -53,6 +53,7 @@ export class DynamicElementComponent {
@ViewChild('target', { read: ViewContainerRef }) target: any;
@Input() type: any;
@Input() name: string;
+ @Input() testId: string;
@Input() readonly:boolean;
@Input() path:string;//optional param. used only for for subnetpoolid type
@@ -111,6 +112,7 @@ export class DynamicElementComponent {
if (this.cmpRef) {
this.cmpRef.instance.name = this.name;
this.cmpRef.instance.type = this.type;
+ this.cmpRef.instance.testId = this.testId;
this.cmpRef.instance.value = this.value;
this.cmpRef.instance.readonly = this.readonly;
}
@@ -133,7 +135,7 @@ export class DynamicElementComponent {
case DynamicElementComponentCreatorIdentifier.FLOAT:
this.createComponent(UiElementIntegerInputComponent);
- this.cmpRef.instance.pattern = /^[-+]?[0-9]+(\.[0-9]+)?([eE][-+]?[0-9]+)?$/;
+ this.cmpRef.instance.pattern = /^[-+]?[0-9]+(\.[0-9]+)?([eE][-+]?[0-9]+)?$/.source;
break;
case DynamicElementComponentCreatorIdentifier.STRING:
@@ -156,10 +158,10 @@ export class DynamicElementComponent {
case DynamicElementComponentCreatorIdentifier.DEFAULT:
default:
this.createComponent(UiElementInputComponent);
- console.log("ERROR: No ui component to handle type: " + this.type);
+ console.log("ERROR: No ui-models component to handle type: " + this.type);
}
- // Subscribe to change event of of ui-element-basic and fire event to change the value
+ // Subscribe to change event of of ui-models-element-basic and fire event to change the value
this.cmpRef.instance.baseEmitter.subscribe((event) => { this.emitter.emit(event); });
this.cmpRef.instance.valueChange.subscribe((event) => { this.valueChange.emit(event); });
}
diff --git a/catalog-ui/src/app/ng2/components/ui/expand-collapse/expand-collapse.component.html b/catalog-ui/src/app/ng2/components/ui/expand-collapse/expand-collapse.component.html
new file mode 100644
index 0000000000..83daca2ae5
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/ui/expand-collapse/expand-collapse.component.html
@@ -0,0 +1,13 @@
+<h1 class="w-sdc-designer-sidebar-section-title"
+ tooltip="{{titleTooltip}}"
+ [ngClass]="{'expanded': state == 0, 'collapsed': state == 1}"
+ (click)="toggleState()">
+ {{caption}}<span class="w-sdc-designer-sidebar-section-title-icon"></span>
+ <ng-content select="header"></ng-content>
+ <span class="w-sdc-designer-sidebar-section-title-icon"></span>
+</h1>
+
+<div class="expand-collapse-content" [ngClass]="{'visible': state === 0, 'hidden': state === 1}">
+ <ng-content></ng-content>
+ <ng-content select="content"></ng-content>
+</div>
diff --git a/catalog-ui/src/app/ng2/components/ui/expand-collapse/expand-collapse.component.less b/catalog-ui/src/app/ng2/components/ui/expand-collapse/expand-collapse.component.less
new file mode 100644
index 0000000000..e5dd2527c1
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/ui/expand-collapse/expand-collapse.component.less
@@ -0,0 +1,7 @@
+.ellipsis-directive-more-less {
+ float: right;
+ margin-right: 10px;
+ line-height: 23px;
+ text-decoration: underline;
+ text-align: left;
+}
diff --git a/catalog-ui/src/app/ng2/components/ui/expand-collapse/expand-collapse.component.ts b/catalog-ui/src/app/ng2/components/ui/expand-collapse/expand-collapse.component.ts
new file mode 100644
index 0000000000..0fa0d33de9
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/ui/expand-collapse/expand-collapse.component.ts
@@ -0,0 +1,56 @@
+/*-
+ * ============LICENSE_START=======================================================
+ * SDC
+ * ================================================================================
+ * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+ * ================================================================================
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ============LICENSE_END=========================================================
+ */
+
+import { Component, Input, Output, ViewEncapsulation, AfterViewInit } from '@angular/core';
+
+export enum ExpandState {
+ EXPANDED,
+ COLLAPSED
+}
+
+@Component({
+ selector: 'ng2-expand-collapse',
+ templateUrl: './expand-collapse.component.html',
+ styleUrls: ['./expand-collapse.component.less'],
+ encapsulation: ViewEncapsulation.None
+})
+
+export class ExpandCollapseComponent implements AfterViewInit {
+ @Input() caption: String;
+ @Input() state: ExpandState;
+ @Input() titleTooltip: String;
+
+ constructor() {
+
+ }
+
+ toggleState():void {
+ if (this.state == ExpandState.EXPANDED) {
+ this.state = ExpandState.COLLAPSED;
+ } else {
+ this.state = ExpandState.EXPANDED;
+ }
+ }
+
+ ngAfterViewInit(): void {
+
+ }
+
+}
diff --git a/catalog-ui/src/app/ng2/components/ui/form-components/dropdown/ui-element-dropdown.component.html b/catalog-ui/src/app/ng2/components/ui/form-components/dropdown/ui-element-dropdown.component.html
index 805e5ac295..c564abc092 100644
--- a/catalog-ui/src/app/ng2/components/ui/form-components/dropdown/ui-element-dropdown.component.html
+++ b/catalog-ui/src/app/ng2/components/ui/form-components/dropdown/ui-element-dropdown.component.html
@@ -1,3 +1,3 @@
-<select name='{{name}}' [(ngModel)]="value" (change)="onChange()" [ngClass]="{'disabled':readonly}" data-tests-id="SelectType">
+<select name='{{name}}' [(ngModel)]="value" (change)="onChange()" [ngClass]="{'disabled':readonly}" [attr.data-tests-id]="'value-' + testId">
<option *ngFor="let ddvalue of values" [ngValue]="ddvalue.label != undefined ? ddvalue.value : ddvalue">{{ddvalue.label||ddvalue}}</option>
</select>
diff --git a/catalog-ui/src/app/ng2/components/ui/form-components/input/ui-element-input.component.html b/catalog-ui/src/app/ng2/components/ui/form-components/input/ui-element-input.component.html
index 057e731ada..fdba850e93 100644
--- a/catalog-ui/src/app/ng2/components/ui/form-components/input/ui-element-input.component.html
+++ b/catalog-ui/src/app/ng2/components/ui/form-components/input/ui-element-input.component.html
@@ -11,4 +11,5 @@
[formControl]="control"
tooltip="{{value}}"
[readonly]="readonly"
+ [attr.data-tests-id]="'value-' + testId"
/>
diff --git a/catalog-ui/src/app/ng2/components/ui/form-components/integer-input/ui-element-integer-input.component.html b/catalog-ui/src/app/ng2/components/ui/form-components/integer-input/ui-element-integer-input.component.html
index e1555e87fd..04307e4c2d 100644
--- a/catalog-ui/src/app/ng2/components/ui/form-components/integer-input/ui-element-integer-input.component.html
+++ b/catalog-ui/src/app/ng2/components/ui/form-components/integer-input/ui-element-integer-input.component.html
@@ -11,4 +11,5 @@
[formControl]="control"
tooltip="{{value}}"
[readonly]="readonly"
+ [attr.data-tests-id]="'value-' + testId"
/>
diff --git a/catalog-ui/src/app/ng2/components/ui/form-components/popover-input/ui-element-popover-input.component.html b/catalog-ui/src/app/ng2/components/ui/form-components/popover-input/ui-element-popover-input.component.html
index 3bd51b4e36..3bc94de1e4 100644
--- a/catalog-ui/src/app/ng2/components/ui/form-components/popover-input/ui-element-popover-input.component.html
+++ b/catalog-ui/src/app/ng2/components/ui/form-components/popover-input/ui-element-popover-input.component.html
@@ -7,7 +7,7 @@
[value]="value!=undefined?value:''"
disabled
/>
- <button [popover]="popoverForm" [ngClass]="{'disabled':readonly}">Edit</button>
+ <button [popover]="popoverForm" (onShown)="setEditValue()" [ngClass]="{'disabled':readonly}" [attr.data-tests-id] ="'edit-button-' + testId">Edit</button>
</div>
<popover-content #popoverForm [title]="name" [buttons]="buttonsArray" [placement]="'top'" [closeOnClickOutside]="true">
@@ -16,11 +16,12 @@
#textArea
class="subnet-value"
[ngClass]="{'error': control.invalid}"
- [(ngModel)]="value"
+ [(ngModel)]="editValue"
[attr.maxlength]="validation.propertyValue.max"
[attr.minlength]="validation.propertyValue.min"
[pattern]="pattern"
[formControl]="control"
+ [attr.data-tests-id]="'value-' + testId"
></textarea>
</div>
</popover-content>
diff --git a/catalog-ui/src/app/ng2/components/ui/form-components/popover-input/ui-element-popover-input.component.ts b/catalog-ui/src/app/ng2/components/ui/form-components/popover-input/ui-element-popover-input.component.ts
index 525cd1742c..f485d270fa 100644
--- a/catalog-ui/src/app/ng2/components/ui/form-components/popover-input/ui-element-popover-input.component.ts
+++ b/catalog-ui/src/app/ng2/components/ui/form-components/popover-input/ui-element-popover-input.component.ts
@@ -18,7 +18,7 @@
* ============LICENSE_END=========================================================
*/
-import {Component, ViewChild, ElementRef, Input} from '@angular/core';
+import {Component, ViewChild, ElementRef} from '@angular/core';
import {ButtonsModelMap, ButtonModel} from "app/models";
import {PopoverContentComponent} from "../../popover/popover-content.component";
import {UiElementBase, UiElementBaseInterface} from "../ui-element-base.component";
@@ -32,13 +32,14 @@ export class UiElementPopoverInputComponent extends UiElementBase implements UiE
@ViewChild('textArea') textArea: ElementRef;
@ViewChild('popoverForm') popoverContentComponent: PopoverContentComponent;
+ editValue: any;
saveButton: ButtonModel;
buttonsArray: ButtonsModelMap;
constructor() {
super();
// Create Save button and insert to buttons map
- this.saveButton = new ButtonModel('save', 'blue', this.onChange);
+ this.saveButton = new ButtonModel('Set', 'blue', this.onChange.bind(this));
this.buttonsArray = { 'test': this.saveButton };
// Define the regex pattern for this controller
@@ -47,4 +48,15 @@ export class UiElementPopoverInputComponent extends UiElementBase implements UiE
// Disable / Enable button according to validation
//this.control.valueChanges.subscribe(data => this.saveButton.disabled = this.control.invalid);
}
+
+ public setEditValue() {
+ // copy value to edit
+ this.editValue = angular.copy(this.value);
+ }
+
+ public onChange() {
+ this.popoverContentComponent.hide();
+ this.value = this.editValue;
+ super.onChange();
+ }
}
diff --git a/catalog-ui/src/app/ng2/components/ui/form-components/ui-element-base.component.ts b/catalog-ui/src/app/ng2/components/ui/form-components/ui-element-base.component.ts
index b4e9e7d36a..31fa7c3442 100644
--- a/catalog-ui/src/app/ng2/components/ui/form-components/ui-element-base.component.ts
+++ b/catalog-ui/src/app/ng2/components/ui/form-components/ui-element-base.component.ts
@@ -46,9 +46,12 @@ export class UiElementBase {
@Input() name: string;
@Input() type: string;
+ @Input() path: string;
@Input() pattern: any;
@Input() readonly:boolean;
+ @Input() testId:string;
+
constructor() {
//this.control = new FormControl('', [Validators.required]);
this.control = new FormControl('', []);
diff --git a/catalog-ui/src/app/ng2/components/ui/forms/modal-forms.module.ts b/catalog-ui/src/app/ng2/components/ui/forms/modal-forms.module.ts
new file mode 100644
index 0000000000..34404e50a5
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/ui/forms/modal-forms.module.ts
@@ -0,0 +1,27 @@
+import { NgModule } from "@angular/core";
+import { CommonModule } from '@angular/common';
+import { SdcUiComponentsModule } from "sdc-ui/lib/angular";
+import { ValueEditComponent } from './value-edit/value-edit.component';
+import { UnsavedChangesComponent } from "./unsaved-changes/unsaved-changes.component";
+import { UiElementsModule } from "../ui-elements.module";
+
+
+
+@NgModule({
+ declarations: [
+ ValueEditComponent,
+ UnsavedChangesComponent
+ ],
+ imports: [
+ CommonModule,
+ SdcUiComponentsModule,
+ UiElementsModule
+ ],
+ exports: [ValueEditComponent, UnsavedChangesComponent],
+ entryComponents: [ UnsavedChangesComponent
+ ],
+ providers: []
+})
+export class ModalFormsModule {
+
+} \ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/components/ui/forms/unsaved-changes/unsaved-changes.component.html b/catalog-ui/src/app/ng2/components/ui/forms/unsaved-changes/unsaved-changes.component.html
new file mode 100644
index 0000000000..bdf21dec62
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/ui/forms/unsaved-changes/unsaved-changes.component.html
@@ -0,0 +1,6 @@
+<div class="unsaved-changes-modal">
+ <div class="message">
+ <p>Your changes {{isValidChangedData ? '' : '(invalid)'}} have not been saved.</p>
+ <p>Do you want to {{isValidChangedData ? 'save' : 'discard'}} them?</p>
+ </div>
+</div> \ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/components/ui/forms/unsaved-changes/unsaved-changes.component.ts b/catalog-ui/src/app/ng2/components/ui/forms/unsaved-changes/unsaved-changes.component.ts
new file mode 100644
index 0000000000..b8fdeaf659
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/ui/forms/unsaved-changes/unsaved-changes.component.ts
@@ -0,0 +1,17 @@
+import { Component, Input } from "@angular/core";
+
+@Component({
+ selector: 'unsaved-changes',
+ templateUrl: './unsaved-changes.component.html',
+ styleUrls: []
+})
+export class UnsavedChangesComponent {
+
+ @Input() isValidChangedData:boolean;
+
+ constructor(){
+ }
+
+
+
+} \ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/components/ui/forms/value-edit/value-edit.component.html b/catalog-ui/src/app/ng2/components/ui/forms/value-edit/value-edit.component.html
new file mode 100644
index 0000000000..464b756a3f
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/ui/forms/value-edit/value-edit.component.html
@@ -0,0 +1,12 @@
+<div class="name-update-container">
+ <sdc-input #updateNameInput
+ label="Instance Name"
+ required="true"
+ [maxLength]="50"
+ [(value)]="name"
+ testId="instanceName"></sdc-input>
+ <sdc-validation [validateElement]="updateNameInput" (validityChanged)="validityChanged($event)">
+ <sdc-required-validator message="Name is required."></sdc-required-validator>
+ <sdc-regex-validator message="Special characters not allowed." [pattern]="pattern"></sdc-regex-validator>
+ </sdc-validation>
+</div> \ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/components/ui/forms/value-edit/value-edit.component.less b/catalog-ui/src/app/ng2/components/ui/forms/value-edit/value-edit.component.less
new file mode 100644
index 0000000000..b958ca17b7
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/ui/forms/value-edit/value-edit.component.less
@@ -0,0 +1,3 @@
+.name-update-container {
+ min-height: 90px;
+} \ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/components/ui/forms/value-edit/value-edit.component.ts b/catalog-ui/src/app/ng2/components/ui/forms/value-edit/value-edit.component.ts
new file mode 100644
index 0000000000..08bc0586c7
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/ui/forms/value-edit/value-edit.component.ts
@@ -0,0 +1,25 @@
+import { Component, Input } from "@angular/core";
+
+@Component({
+ selector: 'value-edit',
+ templateUrl: './value-edit.component.html',
+ styleUrls: ['./value-edit.component.less']
+})
+export class ValueEditComponent {
+
+ @Input() name:String;
+ @Input() validityChangedCallback: Function;
+
+ private pattern:string = "^[\\s\\w\&_.:-]{1,1024}$"
+ constructor(){
+ }
+
+ private validityChanged = (value):void => {
+ if(this.validityChangedCallback) {
+ this.validityChangedCallback(value);
+ }
+ }
+
+
+
+} \ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/components/ui/modal/add-elements/add-elements.component.html b/catalog-ui/src/app/ng2/components/ui/modal/add-elements/add-elements.component.html
new file mode 100644
index 0000000000..ba897198d6
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/ui/modal/add-elements/add-elements.component.html
@@ -0,0 +1,30 @@
+<div class="component-add-element">
+ <div class="add-element-selection-container">
+ <sdc-dropdown class="add-element-selection" selectedOption="selectedElement" placeHolder="Please choose option"
+ (changed)="onElementSelected($event)" [options]="dropdownOptions"></sdc-dropdown>
+ <svg-icon-label class="add-element-button" [class.disabled]="!selectedElement"
+ name="plus-circle-o"
+ mode="primary"
+ size="medium"
+ label="ADD"
+ labelPlacement="right"
+ clickable="{{!!selectedElement}}"
+ (click)="addElement()">
+ </svg-icon-label>
+ </div>
+
+ <div class="elements-list">
+ <ul>
+ <li *ngFor="let element of existingElements" class="elements-list-item">
+ <span>{{element.name}}</span>
+ <svg-icon-label name="trash-o" clickable="true" size="small" class="elements-list-item-delete"
+ data-tests-id="delete_target" (click)="removeElement(element)"></svg-icon-label>
+ </li>
+ </ul>
+ <div *ngIf="existingElements.length===0" class="add-element-no-data">
+ <div class="add-element-no-data-title">No {{elementName}} have been added yet.</div>
+ <div class="add-element-no-data-content">Begin typing or select {{elementName}} above</div>
+ </div>
+ </div>
+
+</div> \ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/components/ui/modal/add-elements/add-elements.component.less b/catalog-ui/src/app/ng2/components/ui/modal/add-elements/add-elements.component.less
new file mode 100644
index 0000000000..522483dfb7
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/ui/modal/add-elements/add-elements.component.less
@@ -0,0 +1,61 @@
+@import "./../../../../../../assets/styles/variables-old";
+
+.component-add-element {
+
+ .add-element-selection-container {
+
+ display: flex;
+ flex-direction: row;
+ .add-element-selection {
+ flex: 2;
+ }
+
+ .add-element-button {
+ padding: 0px 0px 0px 15px;
+ &:not(.disabled) {
+ cursor:pointer;
+ }
+ }
+
+ }
+
+ .elements-list {
+ border: 1px solid #d2d2d2;
+ margin-top: 10px;
+ height: 300px;
+ overflow: auto;
+
+ .elements-list-item {
+ padding: 10px 20px 10px 20px;
+
+ &:first-child {
+ padding-top: 15px;
+ }
+
+ &:hover {
+ background-color: #f8f8f8;
+ .elements-list-item-delete {
+ visibility: visible;
+ }
+ }
+ }
+ }
+
+ .elements-list-item-delete {
+ float:right;
+ cursor: pointer;
+ visibility: hidden;
+ }
+
+
+ .add-element-no-data {
+ margin: 0 auto;
+ padding-top: 30px;
+ text-align: center;
+
+ .add-element-no-data-title {
+ font-family: @font-opensans-bold;
+ }
+
+ }
+} \ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/components/ui/modal/add-elements/add-elements.component.ts b/catalog-ui/src/app/ng2/components/ui/modal/add-elements/add-elements.component.ts
new file mode 100644
index 0000000000..1d05b27d68
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/ui/modal/add-elements/add-elements.component.ts
@@ -0,0 +1,65 @@
+/**
+ * Created by ob0695 on 11.04.2018.
+ */
+import {Component, Input} from "@angular/core";
+import {UiBaseObject} from "../../../../../models/ui-models/ui-base-object";
+import {IDropDownOption} from "sdc-ui/lib/angular/form-elements/dropdown/dropdown-models";
+
+@Component({
+ selector: 'add-elements',
+ templateUrl: './add-elements.component.html',
+ styleUrls: ['./add-elements.component.less']
+})
+
+export class AddElementsComponent {
+
+ @Input() elementsToAdd:Array<UiBaseObject>;
+ @Input() elementName: string;
+
+ private existingElements:Array<UiBaseObject>;
+ private dropdownOptions:Array<IDropDownOption>;
+ private selectedElement:IDropDownOption;
+
+ ngOnInit() {
+ this.existingElements = [];
+ this.convertElementToDropdownDisplay();
+
+ }
+
+ private convertElementToDropdownDisplay = () => {
+ this.dropdownOptions = [];
+ _.forEach(this.elementsToAdd, (elementToAdd:UiBaseObject) =>{
+ this.dropdownOptions.push({label:elementToAdd.name, value: elementToAdd.uniqueId })
+ });
+ }
+
+ onElementSelected(selectedElement:IDropDownOption):void {
+ this.selectedElement = selectedElement
+ }
+
+ addElement():void {
+
+ if(this.selectedElement){
+ this.dropdownOptions = _.reject(this.dropdownOptions, (option: IDropDownOption) => { // remove from dropDown
+ return option.value === this.selectedElement.value;
+ });
+
+ let selected = _.find(this.elementsToAdd, (element:UiBaseObject) => {
+ return this.selectedElement.value === element.uniqueId;
+ });
+
+ this.elementsToAdd =_.without(this.elementsToAdd, selected); // remove from optional elements to add
+ this.existingElements.push(selected); // add to existing element list
+ this.selectedElement = undefined;
+ } else {
+ console.log("no element selected"); //TODO:show error?
+ }
+ }
+
+ removeElement(element:UiBaseObject):void {
+
+ this.existingElements =_.without(this.existingElements, element); // remove from optional elements to add
+ this.dropdownOptions.push({label:element.name, value: element.uniqueId });
+ this.elementsToAdd.push(element);
+ }
+}
diff --git a/catalog-ui/src/app/ng2/components/ui/modal/add-elements/add-elements.module.ts b/catalog-ui/src/app/ng2/components/ui/modal/add-elements/add-elements.module.ts
new file mode 100644
index 0000000000..a1c34f5686
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/ui/modal/add-elements/add-elements.module.ts
@@ -0,0 +1,30 @@
+/**
+ * Created by ob0695 on 11.04.2018.
+ */
+import {NgModule} from "@angular/core";
+import {SdcUiComponentsModule} from "sdc-ui/lib/angular/index";
+import {AddElementsComponent} from "./add-elements.component";
+import {CommonModule} from "@angular/common";
+
+/**
+ * Created by ob0695 on 9.04.2018.
+ */
+@NgModule({
+ declarations: [
+ AddElementsComponent
+ ],
+
+ imports: [
+ CommonModule,
+ SdcUiComponentsModule
+ ],
+
+ entryComponents: [
+ AddElementsComponent
+ ],
+ exports: [],
+ providers: []
+})
+export class AddElementsModule {
+
+}
diff --git a/catalog-ui/src/app/ng2/components/ui/modal/modal.component.html b/catalog-ui/src/app/ng2/components/ui/modal/modal.component.html
index 6fc55d19e7..1708fc4c23 100644
--- a/catalog-ui/src/app/ng2/components/ui/modal/modal.component.html
+++ b/catalog-ui/src/app/ng2/components/ui/modal/modal.component.html
@@ -1,6 +1,5 @@
<div class="custom-modal {{input.size}}">
<div class="ng2-modal-content"
- ngDraggable
[ngDraggable]="input.isMovable"
[handle]="ModalHandle"
[bounds]="ModalBounds"
diff --git a/catalog-ui/src/app/ng2/components/ui/palette-animation/palette-animation.component.ts b/catalog-ui/src/app/ng2/components/ui/palette-animation/palette-animation.component.ts
index 609a1fc5e1..7e45b9e55b 100644
--- a/catalog-ui/src/app/ng2/components/ui/palette-animation/palette-animation.component.ts
+++ b/catalog-ui/src/app/ng2/components/ui/palette-animation/palette-animation.component.ts
@@ -24,6 +24,7 @@ import { setTimeout } from 'core-js/library/web/timers';
import { EventListenerService } from 'app/services';
import { GRAPH_EVENTS } from 'app/utils';
import { Point } from 'app/models';
+import { ZoneInstanceType, ZoneInstance } from '../../../../models/graph/zones/zone-instance';
@@ -37,8 +38,9 @@ export class PaletteAnimationComponent {
@Input() from : Point;
@Input() to : Point;
+ @Input() type: ZoneInstanceType;
@Input() iconName : string;
- @Input() data : any;
+ @Input() zoneInstance : ZoneInstance;
public animation;
private visible:boolean = false;
@@ -47,6 +49,11 @@ export class PaletteAnimationComponent {
constructor(private eventListenerService:EventListenerService) {}
+
+ ngOnDestroy(){
+ this.zoneInstance.hidden = false; //if animation component is destroyed before animation is complete
+ }
+
public runAnimation() {
this.visible = true;
let positionDiff:Point = new Point(this.to.x - this.from.x, this.to.y - this.from.y);
@@ -57,7 +64,7 @@ export class PaletteAnimationComponent {
public animationComplete = (e) => {
this.visible = false;
- this.eventListenerService.notifyObservers(GRAPH_EVENTS.ON_FINISH_ANIMATION_ZONE);
+ this.zoneInstance.hidden = false;
};
diff --git a/catalog-ui/src/app/ng2/components/ui/palette-popup-panel/palette-popup-panel.component.ts b/catalog-ui/src/app/ng2/components/ui/palette-popup-panel/palette-popup-panel.component.ts
index d30d5f6178..a10ca7dc81 100644
--- a/catalog-ui/src/app/ng2/components/ui/palette-popup-panel/palette-popup-panel.component.ts
+++ b/catalog-ui/src/app/ng2/components/ui/palette-popup-panel/palette-popup-panel.component.ts
@@ -35,7 +35,8 @@ export class PalettePopupPanelComponent implements OnInit {
public addZoneInstance(): void {
if(this.displayComponent) {
- this.eventListenerService.notifyObservers(GRAPH_EVENTS.ON_ADD_COMPONENT_INSTANCE_ZONE_START, this.component, this.displayComponent, this.popupPanelPosition);
+ this.eventListenerService.notifyObservers(GRAPH_EVENTS.ON_ADD_ZONE_INSTANCE_FROM_PALETTE, this.component, this.displayComponent, this.popupPanelPosition);
+ this.hidePopupPanel();
}
}
diff --git a/catalog-ui/src/app/ng2/components/ui/tile/tile.component.html b/catalog-ui/src/app/ng2/components/ui/tile/tile.component.html
new file mode 100644
index 0000000000..a7a7b2c5b5
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/ui/tile/tile.component.html
@@ -0,0 +1,28 @@
+<div class="sdc-tile sdc-tile-fix-width">
+
+ <div class='sdc-tile-header' [ngClass]="{'purple': component.isResource(), 'blue': !component.isResource()}">
+ <div *ngIf="component.isResource()" data-tests-id="asset-type">{{component.getComponentSubType()}}</div>
+ <div *ngIf="component.isService()">S</div>
+ </div>
+
+ <div class='sdc-tile-content' data-tests-id="dashboard-Elements" (click)="tileClicked()">
+ <div class='sdc-tile-content-icon'>
+ <div [ngClass]="[component.iconSprite, component.icon]" [ngClass]="{'sprite-resource-icons': component.isResource(), 'sprite-services-icons': component.isService()}"
+ [attr.data-tests-id]="component.name"></div>
+ </div>
+
+ <div class='sdc-tile-content-info'>
+ <div class="sdc-tile-info-line title" [attr.data-tests-id]="component.name | resourceName" [tooltip]="component.name | resourceName" [tooltipDisabled]="!hasEllipsis">
+ <multiline-ellipsis className="w-sdc-tile-multiline-ellipsis" [lines]="3" (hasEllipsisChanged)="hasEllipsis = $event">{{component.name | resourceName}}</multiline-ellipsis>
+ </div>
+ <div class="sdc-tile-info-line subtitle" [attr.data-tests-id]="component.name+'Version'">V {{component.version}}</div>
+ </div>
+ </div>
+
+ <div class='sdc-tile-footer'>
+ <div class="sdc-tile-footer-content">
+ <div class='sdc-tile-footer-text'>{{component.getStatus(sdcMenu)}}</div>
+ </div>
+ </div>
+
+</div>
diff --git a/catalog-ui/src/app/ng2/components/ui/tile/tile.component.less b/catalog-ui/src/app/ng2/components/ui/tile/tile.component.less
new file mode 100644
index 0000000000..e69de29bb2
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/ui/tile/tile.component.less
diff --git a/catalog-ui/src/app/ng2/components/ui/tile/tile.component.ts b/catalog-ui/src/app/ng2/components/ui/tile/tile.component.ts
new file mode 100644
index 0000000000..b6f63584be
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/ui/tile/tile.component.ts
@@ -0,0 +1,24 @@
+import {Component, Input, Output, Inject, EventEmitter} from '@angular/core';
+import {Component as ComponentModel} from 'app/models';
+import {SdcMenuToken, IAppMenu} from "../../../config/sdc-menu.config";
+
+@Component({
+ selector: 'ui-tile',
+ templateUrl: './tile.component.html',
+ styleUrls: ['./tile.component.less']
+})
+export class TileComponent {
+ @Input() public component: ComponentModel;
+ @Output() public onTileClick: EventEmitter<ComponentModel>;
+
+ public hasEllipsis: boolean;
+
+ constructor(@Inject(SdcMenuToken) public sdcMenu:IAppMenu) {
+ this.onTileClick = new EventEmitter<ComponentModel>();
+ this.hasEllipsis = false;
+ }
+
+ public tileClicked() {
+ this.onTileClick.emit(this.component);
+ }
+}
diff --git a/catalog-ui/src/app/ng2/components/ui/tile/tile.module.ts b/catalog-ui/src/app/ng2/components/ui/tile/tile.module.ts
new file mode 100644
index 0000000000..55b34400d6
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/ui/tile/tile.module.ts
@@ -0,0 +1,15 @@
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { TileComponent } from './tile.component';
+import { GlobalPipesModule } from "../../../pipes/global-pipes.module";
+import { TooltipModule } from "../tooltip/tooltip.module";
+import {MultilineEllipsisModule} from "../../../shared/multiline-ellipsis/multiline-ellipsis.module";
+
+
+@NgModule({
+ imports: [BrowserModule, GlobalPipesModule, TooltipModule, MultilineEllipsisModule],
+ declarations: [TileComponent],
+ exports: [TileComponent],
+ entryComponents: [TileComponent]
+})
+export class TileModule { }
diff --git a/catalog-ui/src/app/ng2/components/ui/ui-elements.module.ts b/catalog-ui/src/app/ng2/components/ui/ui-elements.module.ts
index 44314734c3..e905db73a6 100644
--- a/catalog-ui/src/app/ng2/components/ui/ui-elements.module.ts
+++ b/catalog-ui/src/app/ng2/components/ui/ui-elements.module.ts
@@ -20,26 +20,28 @@
import { NgModule } from '@angular/core';
import { NavbarModule } from "./navbar/navbar.module";
-import {DynamicElementModule} from "./dynamic-element/dynamic-element.module";
-import {FormElementsModule} from "./form-components/form-elements.module";
-import {LoaderComponent} from "./loader/loader.component";
-import {ModalModule} from "./modal/modal.module";
-import {PopoverModule} from "./popover/popover.module";
-import {SearchBarComponent} from "./search-bar/search-bar.component";
-import {SearchWithAutoCompleteComponent} from "./search-with-autocomplete/search-with-autocomplete.component";
-import {PalettePopupPanelComponent} from "./palette-popup-panel/palette-popup-panel.component";
-import {ZoneContainerComponent} from "./canvas-zone/zone-container.component";
-import {ZoneInstanceComponent } from "./canvas-zone/zone-instance/zone-instance.component";
-import {PaletteAnimationComponent} from "./palette-animation/palette-animation.component"
-import {TabModule} from "./tabs/tabs.module";
-import {TooltipModule} from "./tooltip/tooltip.module";
-import {CommonModule} from "@angular/common";
-import {FormsModule} from "@angular/forms";
-import {BrowserModule} from "@angular/platform-browser";
-import {MultiStepsWizardModule} from "./multi-steps-wizard/multi-steps-wizard.module";
-import {MenuListModule} from "./menu/menu-list.module";
-import {MenuListNg2Module} from "../downgrade-wrappers/menu-list-ng2/menu-list-ng2.module";
-//import {SdcUiComponentsModule} from "sdc-ui/lib/angular";
+import { DynamicElementModule } from "./dynamic-element/dynamic-element.module";
+import { FormElementsModule } from "./form-components/form-elements.module";
+import { LoaderComponent } from "./loader/loader.component";
+import { ModalModule } from "./modal/modal.module";
+import { PopoverModule } from "./popover/popover.module";
+import { SearchBarComponent } from "./search-bar/search-bar.component";
+import { SearchWithAutoCompleteComponent } from "./search-with-autocomplete/search-with-autocomplete.component";
+import { PalettePopupPanelComponent } from "./palette-popup-panel/palette-popup-panel.component";
+import { ZoneContainerComponent } from "./canvas-zone/zone-container.component";
+import { ZoneInstanceComponent } from "./canvas-zone/zone-instance/zone-instance.component";
+import { PaletteAnimationComponent } from "./palette-animation/palette-animation.component"
+import { TabModule } from "./tabs/tabs.module";
+import { TooltipModule } from "./tooltip/tooltip.module";
+import { CommonModule } from "@angular/common";
+import { FormsModule } from "@angular/forms";
+import { BrowserModule } from "@angular/platform-browser";
+import { MultiStepsWizardModule } from "./multi-steps-wizard/multi-steps-wizard.module";
+import { MenuListModule } from "./menu/menu-list.module";
+import { MenuListNg2Module } from "../downgrade-wrappers/menu-list-ng2/menu-list-ng2.module";
+import { ExpandCollapseComponent } from './expand-collapse/expand-collapse.component';
+import { SdcUiComponentsModule } from "sdc-ui/lib/angular";
+import { TileModule } from "./tile/tile.module";
@NgModule({
declarations: [
@@ -49,11 +51,12 @@ import {MenuListNg2Module} from "../downgrade-wrappers/menu-list-ng2/menu-list-n
PalettePopupPanelComponent,
ZoneContainerComponent,
ZoneInstanceComponent,
- PaletteAnimationComponent
+ PaletteAnimationComponent,
+ ExpandCollapseComponent
],
-
+
imports: [
- //SdcUiComponentsModule,
+ SdcUiComponentsModule,
BrowserModule,
FormsModule,
CommonModule,
@@ -66,7 +69,8 @@ import {MenuListNg2Module} from "../downgrade-wrappers/menu-list-ng2/menu-list-n
TooltipModule,
MultiStepsWizardModule,
MenuListModule,
- MenuListNg2Module
+ MenuListNg2Module,
+ TileModule
],
exports: [
LoaderComponent,
@@ -85,7 +89,9 @@ import {MenuListNg2Module} from "../downgrade-wrappers/menu-list-ng2/menu-list-n
TooltipModule,
MenuListModule,
MenuListNg2Module,
- PaletteAnimationComponent
+ PaletteAnimationComponent,
+ ExpandCollapseComponent,
+ TileModule
],
entryComponents: [SearchWithAutoCompleteComponent, PalettePopupPanelComponent, ZoneContainerComponent, ZoneInstanceComponent, PaletteAnimationComponent]
})