From 4d97d5fac309ce0d66938e5ccd0349e2660d4e23 Mon Sep 17 00:00:00 2001 From: Michael Lando Date: Sat, 17 Jun 2017 22:40:44 +0300 Subject: [sdc] update code of sdc Change-Id: If9f37c80b659cb67b34d18e6c019defecca58b9a Signed-off-by: Michael Lando --- .../utils/composition-graph-palette-utils.ts | 2 +- .../deployment-graph/deployment-graph.directive.ts | 52 +++++---- .../graphs-v2/palette/palette.directive.ts | 2 +- .../properties-inputs/derived-fe-property.ts | 1 + .../models/properties-inputs/property-fe-model.ts | 29 +++++ .../dynamic-element/dynamic-element.component.ts | 7 +- .../filter-properties-assignment.component.less | 5 +- .../hierarchy-navigation.component.less | 6 +- .../inputs-table/inputs-table.component.html | 2 +- .../inputs-table/inputs-table.component.less | 46 +++----- .../app/ng2/components/loader/loader.component.ts | 94 +++++++--------- .../dynamic-property.component.html | 18 ++-- .../dynamic-property.component.less | 55 ++++++---- .../dynamic-property/dynamic-property.component.ts | 41 ++----- .../properties-table.component.html | 19 ++-- .../properties-table.component.less | 75 +++++++------ .../properties-table/properties-table.component.ts | 5 +- .../ng2/components/tooltip/tooltip.component.ts | 8 ++ .../properties-assignment.page.component.html | 8 +- .../properties-assignment.page.component.less | 120 +++++++++++++-------- .../properties-assignment.page.component.ts | 6 +- .../properties-assignment/properties.utils.ts | 1 + .../src/app/ng2/services/data-type.service.ts | 47 ++++---- .../ng2/shared/checkbox/checkbox.component.html | 2 +- .../ng2/shared/checkbox/checkbox.component.less | 9 +- .../app/ng2/shared/checkbox/checkbox.component.ts | 20 ++-- .../src/app/ng2/shared/tabs/tabs.component.less | 12 +-- .../module-property-modal/module-property-model.ts | 14 +-- .../view-models/workspace/workspace-view-model.ts | 2 +- .../assets/styles/images/sprites/sprite-global.png | Bin 95876 -> 89666 bytes catalog-ui/src/assets/styles/sprite.less | 15 ++- 31 files changed, 380 insertions(+), 343 deletions(-) (limited to 'catalog-ui/src') diff --git a/catalog-ui/src/app/directives/graphs-v2/composition-graph/utils/composition-graph-palette-utils.ts b/catalog-ui/src/app/directives/graphs-v2/composition-graph/utils/composition-graph-palette-utils.ts index 83bf747501..5285f46112 100644 --- a/catalog-ui/src/app/directives/graphs-v2/composition-graph/utils/composition-graph-palette-utils.ts +++ b/catalog-ui/src/app/directives/graphs-v2/composition-graph/utils/composition-graph-palette-utils.ts @@ -3,7 +3,7 @@ import {CapabilitiesGroup, NodesFactory, ComponentInstance, Component, Compositi import {ComponentFactory, ComponentInstanceFactory, GRAPH_EVENTS, GraphUIObjects} from "app/utils"; import {CompositionGraphGeneralUtils} from "./composition-graph-general-utils"; import {CommonGraphUtils} from "../../common/common-graph-utils"; -import 'angular-dragdrop'; +import 'sdc-angular-dragdrop'; import {LeftPaletteComponent} from "../../../../models/components/displayComponent"; export class CompositionGraphPaletteUtils { diff --git a/catalog-ui/src/app/directives/graphs-v2/deployment-graph/deployment-graph.directive.ts b/catalog-ui/src/app/directives/graphs-v2/deployment-graph/deployment-graph.directive.ts index 5ad6570013..3a0726f212 100644 --- a/catalog-ui/src/app/directives/graphs-v2/deployment-graph/deployment-graph.directive.ts +++ b/catalog-ui/src/app/directives/graphs-v2/deployment-graph/deployment-graph.directive.ts @@ -1,22 +1,25 @@ -import {Component, Module, NodesFactory, ComponentInstance} from "app/models"; -import {ComponentInstanceFactory} from "app/utils"; -import {DeploymentGraphGeneralUtils} from "./deployment-utils/deployment-graph-general-utils"; -import {CommonGraphUtils} from "../common/common-graph-utils"; -import {ComponentInstanceNodesStyle} from "../common/style/component-instances-nodes-style"; -import {ModulesNodesStyle} from "../common/style/module-node-style"; -import {GRAPH_EVENTS} from "app/utils"; -import {EventListenerService} from "app/services"; -import 'cytoscape-expand-collapse'; +import { Component, Module, NodesFactory, ComponentInstance } from "app/models"; +import { ComponentInstanceFactory } from "app/utils"; +import { DeploymentGraphGeneralUtils } from "./deployment-utils/deployment-graph-general-utils"; +import { CommonGraphUtils } from "../common/common-graph-utils"; +import { ComponentInstanceNodesStyle } from "../common/style/component-instances-nodes-style"; +import { ModulesNodesStyle } from "../common/style/module-node-style"; +import { GRAPH_EVENTS } from "app/utils"; +import { EventListenerService } from "app/services"; +import '@bardit/cytoscape-expand-collapse'; interface IDeploymentGraphScope extends ng.IScope { - component:Component; + component: Component; } export class DeploymentGraph implements ng.IDirective { - private _cy:Cy.Instance; + private _cy: Cy.Instance; - constructor(private NodesFactory:NodesFactory, private commonGraphUtils:CommonGraphUtils, - private deploymentGraphGeneralUtils:DeploymentGraphGeneralUtils, private ComponentInstanceFactory:ComponentInstanceFactory, private eventListenerService:EventListenerService) { + constructor(private NodesFactory: NodesFactory, + private commonGraphUtils: CommonGraphUtils, + private deploymentGraphGeneralUtils: DeploymentGraphGeneralUtils, + private ComponentInstanceFactory: ComponentInstanceFactory, + private eventListenerService: EventListenerService) { } restrict = 'E'; @@ -26,7 +29,7 @@ export class DeploymentGraph implements ng.IDirective { isViewOnly: '=' }; - link = (scope:IDeploymentGraphScope, el:JQuery) => { + link = (scope: IDeploymentGraphScope, el: JQuery) => { if (scope.component.isResource()) { if (scope.component.componentInstances && scope.component.componentInstancesRelations && scope.component.groups) { @@ -39,16 +42,15 @@ export class DeploymentGraph implements ng.IDirective { } }; - - public initGraphNodes = (cy:Cy.Instance, component:Component):void => { + public initGraphNodes = (cy: Cy.Instance, component: Component): void => { if (component.groups) { // Init module nodes - _.each(component.groups, (groupModule:Module) => { + _.each(component.groups, (groupModule: Module) => { let moduleNode = this.NodesFactory.createModuleNode(groupModule); this.commonGraphUtils.addNodeToGraph(cy, moduleNode); }); } - _.each(component.componentInstances, (instance:ComponentInstance) => { // Init component instance nodes + _.each(component.componentInstances, (instance: ComponentInstance) => { // Init component instance nodes let componentInstanceNode = this.NodesFactory.createNode(instance); componentInstanceNode.parent = this.deploymentGraphGeneralUtils.findInstanceModule(component.groups, instance.uniqueId); if (componentInstanceNode.parent) { // we are not drawing instances that are not a part of a module @@ -58,7 +60,7 @@ export class DeploymentGraph implements ng.IDirective { // This is a special functionality to pass the cytoscape default behavior - we can't create Parent module node without children's // so we must add an empty dummy child node - _.each(this._cy.nodes('[?isGroup]'), (moduleNode:Cy.CollectionFirstNode) => { + _.each(this._cy.nodes('[?isGroup]'), (moduleNode: Cy.CollectionFirstNode) => { if (!moduleNode.isParent()) { let dummyInstance = this.ComponentInstanceFactory.createEmptyComponentInstance(); let componentInstanceNode = this.NodesFactory.createNode(dummyInstance); @@ -80,7 +82,7 @@ export class DeploymentGraph implements ng.IDirective { }); } - private loadGraph = (scope:IDeploymentGraphScope, el:JQuery) => { + private loadGraph = (scope: IDeploymentGraphScope, el: JQuery) => { let graphEl = el.find('.sdc-deployment-graph-wrapper'); this._cy = cytoscape({ @@ -112,9 +114,17 @@ export class DeploymentGraph implements ng.IDirective { this.commonGraphUtils.initGraphLinks(this._cy, scope.component.componentInstancesRelations); this._cy.collapseAll(); this.registerGraphEvents(); + + scope.$on('$destroy', () => { + this._cy.destroy(); + _.forEach(GRAPH_EVENTS, (event) => { + this.eventListenerService.unRegisterObserver(event); + }); + }); + }; - public static factory = (NodesFactory:NodesFactory, CommonGraphUtils:CommonGraphUtils, DeploymentGraphGeneralUtils:DeploymentGraphGeneralUtils, ComponentInstanceFactory:ComponentInstanceFactory, EventListenerService:EventListenerService) => { + public static factory = (NodesFactory: NodesFactory, CommonGraphUtils: CommonGraphUtils, DeploymentGraphGeneralUtils: DeploymentGraphGeneralUtils, ComponentInstanceFactory: ComponentInstanceFactory, EventListenerService: EventListenerService) => { return new DeploymentGraph(NodesFactory, CommonGraphUtils, DeploymentGraphGeneralUtils, ComponentInstanceFactory, EventListenerService) } } diff --git a/catalog-ui/src/app/directives/graphs-v2/palette/palette.directive.ts b/catalog-ui/src/app/directives/graphs-v2/palette/palette.directive.ts index 4bfbe5270e..0158a38253 100644 --- a/catalog-ui/src/app/directives/graphs-v2/palette/palette.directive.ts +++ b/catalog-ui/src/app/directives/graphs-v2/palette/palette.directive.ts @@ -10,7 +10,7 @@ import { import {CompositionGraphGeneralUtils} from "../composition-graph/utils/composition-graph-general-utils"; import {EventListenerService} from "app/services"; import {ResourceType, GRAPH_EVENTS, EVENTS, ComponentInstanceFactory, ModalsHandler} from "app/utils"; -import 'angular-dragdrop'; +import 'sdc-angular-dragdrop'; import {LeftPaletteLoaderService} from "../../../services/components/utils/composition-left-palette-service"; interface IPaletteScope { diff --git a/catalog-ui/src/app/models/properties-inputs/derived-fe-property.ts b/catalog-ui/src/app/models/properties-inputs/derived-fe-property.ts index f7117e456c..2178319e0b 100644 --- a/catalog-ui/src/app/models/properties-inputs/derived-fe-property.ts +++ b/catalog-ui/src/app/models/properties-inputs/derived-fe-property.ts @@ -12,6 +12,7 @@ export class DerivedFEProperty extends PropertyBEModel { isDeclared: boolean; isSelected: boolean; isDisabled: boolean; + hidden: boolean; isChildOfListOrMap: boolean; canBeDeclared: boolean; mapKey: string; diff --git a/catalog-ui/src/app/models/properties-inputs/property-fe-model.ts b/catalog-ui/src/app/models/properties-inputs/property-fe-model.ts index 564611c344..cfbe6d64c7 100644 --- a/catalog-ui/src/app/models/properties-inputs/property-fe-model.ts +++ b/catalog-ui/src/app/models/properties-inputs/property-fe-model.ts @@ -78,4 +78,33 @@ export class PropertyFEModel extends PropertyBEModel { // this.flattenedChildren.filter(prop => prop.parentName == item.parentName).map(prop => prop.propertiesName).indexOf(item.propertiesName) // } + /* Updates parent valueObj when a child prop's value has changed */ + public childPropUpdated = (childProp: DerivedFEProperty): void => { + let parentNames = this.getParentNamesArray(childProp.propertiesName, []); + if (parentNames.length) { + _.set(this.valueObj, parentNames.join('.'), childProp.valueObj); + } + }; + + /* Returns array of individual parents for given prop path, with list/map UUIDs replaced with index/mapkey */ + private getParentNamesArray = (parentPropName: string, parentNames?: Array): Array => { + if (parentPropName.indexOf("#") == -1) { return parentNames; } //finished recursing parents. return + + let parentProp: DerivedFEProperty = this.flattenedChildren.find(prop => prop.propertiesName === parentPropName); + let nameToInsert: string = parentProp.name; + + if (parentProp.isChildOfListOrMap) { + if (parentProp.derivedDataType == DerivedPropertyType.MAP) { + nameToInsert = parentProp.mapKey; + } else { //LIST + let siblingProps = this.flattenedChildren.filter(prop => prop.parentName == parentProp.parentName).map(prop => prop.propertiesName); + nameToInsert = siblingProps.indexOf(parentProp.propertiesName).toString(); + } + } + + parentNames.splice(0, 0, nameToInsert); //add prop name to array + return this.getParentNamesArray(parentProp.parentName, parentNames); //continue recursing + } + + } diff --git a/catalog-ui/src/app/ng2/components/dynamic-element/dynamic-element.component.ts b/catalog-ui/src/app/ng2/components/dynamic-element/dynamic-element.component.ts index 84ac46c4cf..0c74765944 100644 --- a/catalog-ui/src/app/ng2/components/dynamic-element/dynamic-element.component.ts +++ b/catalog-ui/src/app/ng2/components/dynamic-element/dynamic-element.component.ts @@ -24,6 +24,7 @@ export class DynamicElementComponent { @Input() type: any; @Input() name: string; @Input() readonly:boolean; + @Input() path:string;//optional param. used only for for subnetpoolid type value:any; // Two way binding for value (need to write the "Change" word like this) @@ -58,7 +59,11 @@ export class DynamicElementComponent { this.cmpRef.instance.pattern = this.validation.validationPatterns.integer; break; case 'string': - if (this.name.toUpperCase().indexOf("SUBNETPOOLID") !== -1) { + if (this.path && this.path.toUpperCase().indexOf("SUBNETPOOLID") !== -1) { + if(this.name.toUpperCase().indexOf("SUBNETPOOLID") == -1){//if it's an item of subnetpoolid list get the parent name + let pathArray = this.path.split("#"); + this.name = pathArray[pathArray.length - 2]; + } this.createComponent(UiElementPopoverInputComponent); } else { diff --git a/catalog-ui/src/app/ng2/components/filter-properties-assignment/filter-properties-assignment.component.less b/catalog-ui/src/app/ng2/components/filter-properties-assignment/filter-properties-assignment.component.less index afed54672c..07f38d3011 100644 --- a/catalog-ui/src/app/ng2/components/filter-properties-assignment/filter-properties-assignment.component.less +++ b/catalog-ui/src/app/ng2/components/filter-properties-assignment/filter-properties-assignment.component.less @@ -25,11 +25,10 @@ form{ cursor: pointer; width: 32px; height: 34px; - display: inline-block; + margin-left:5px; + &.open{ z-index: 1061; - position: relative; - top: 2px; background-color: @main_color_p; border: solid 1px @main_color_c; border-bottom: none; diff --git a/catalog-ui/src/app/ng2/components/hierarchy-navigtion/hierarchy-navigation.component.less b/catalog-ui/src/app/ng2/components/hierarchy-navigtion/hierarchy-navigation.component.less index 57d51616a8..a9174fd73d 100644 --- a/catalog-ui/src/app/ng2/components/hierarchy-navigtion/hierarchy-navigation.component.less +++ b/catalog-ui/src/app/ng2/components/hierarchy-navigtion/hierarchy-navigation.component.less @@ -14,10 +14,10 @@ .node-data-wrapper { cursor: default; - height: 30px; - line-height: 2.6em;; + height: 39px; + line-height: 39px; position: relative; - top: -1.1em; + top: -20px; background-color: white; margin-left: 0.7em; } diff --git a/catalog-ui/src/app/ng2/components/inputs-table/inputs-table.component.html b/catalog-ui/src/app/ng2/components/inputs-table/inputs-table.component.html index fb6b04013f..8d3f6d1836 100644 --- a/catalog-ui/src/app/ng2/components/inputs-table/inputs-table.component.html +++ b/catalog-ui/src/app/ng2/components/inputs-table/inputs-table.component.html @@ -1,5 +1,5 @@
- +
Property Name
Type
diff --git a/catalog-ui/src/app/ng2/components/inputs-table/inputs-table.component.less b/catalog-ui/src/app/ng2/components/inputs-table/inputs-table.component.less index 93f96470bc..96d4d0a4eb 100644 --- a/catalog-ui/src/app/ng2/components/inputs-table/inputs-table.component.less +++ b/catalog-ui/src/app/ng2/components/inputs-table/inputs-table.component.less @@ -10,26 +10,26 @@ height:100%; text-align:left; - dynamic-property { - width:100%; - } - - /deep/ .dynamic-property-row { - border-top:solid #d2d2d2 1px; - } - - /deep/ dynamic-property dynamic-property:first-of-type .dynamic-property-row:not(.with-top-border) { - border-top: none; + .inner-cell-div{ + width: 100%; + text-overflow: ellipsis; + overflow: hidden; + height: 20px; } + .table-header { font-weight:bold; border-top: #d2d2d2 solid 1px; background-color: #eaeaea; - + color:#191919; + + .table-cell { + font-size: 14px; + } .valueCol { justify-content: flex-start; - padding: 5px; + padding: 10px; } } .table-header, .table-row { @@ -57,18 +57,6 @@ } } - .table-rows-header { - font-size:16px; - flex:1; - border: #d2d2d2 solid 1px; - border-top:none; - padding: 5px; - text-overflow: ellipsis; - white-space: nowrap; - overflow: hidden; - background-color: @tlv_color_v; - } - .table-row { &:hover { background-color:#f8f8f8; cursor:pointer; @@ -81,17 +69,14 @@ background-color:#e6f6fb; } } - .cut-inner-long-text{ - text-overflow: ellipsis; - overflow: hidden; - } + .table-cell { font-size:13px; flex:1; border: #d2d2d2 solid 1px; border-right:none; border-top:none; - padding: 5px; + padding: 10px; text-overflow: ellipsis; white-space: nowrap; @@ -132,6 +117,7 @@ display: flex; justify-content: flex-end; padding: 0px; + align-items: center; .value-input { flex: 1; @@ -163,7 +149,7 @@ } &.input-value-col { - padding: 5px; + padding: 8px; } diff --git a/catalog-ui/src/app/ng2/components/loader/loader.component.ts b/catalog-ui/src/app/ng2/components/loader/loader.component.ts index 4d90b2853d..4af92eca24 100644 --- a/catalog-ui/src/app/ng2/components/loader/loader.component.ts +++ b/catalog-ui/src/app/ng2/components/loader/loader.component.ts @@ -11,72 +11,28 @@ export class LoaderComponent { @Input() display:boolean; @Input() size:string;// small || medium || large - @Input() elementSelector:string; // required if is relative true - @Input() relative:boolean; - - interval; + @Input() relative: boolean; + @Input() elementSelector: string; // optional. If is relative is set to true, option to pass in element that loader should be relative to. Otherwise, will be relative to parent element. + constructor (private el: ElementRef, private renderer: Renderer){ } ngOnInit() { - - if (this.elementSelector) { - let elemParent = angular.element(this.elementSelector); - let positionStyle:string = elemParent.css('position'); - this.setStyle(positionStyle); - } - - if (this.relative === true) { - let positionStyle:string = this.el.nativeElement.parentElement.style.position; - this.setStyle(positionStyle); - } if (!this.size) { this.size = 'large'; } - } - - ngOnDestroy(){ - clearInterval(this.interval); - } - - calculateSizesForFixPosition = (positionStyle:string):void => { - // This is problematic, I do not want to change the parent position. - // set the loader on all the screen - let parentLeft = this.el.nativeElement.parentElement.offsetLeft; - let parentTop = this.el.nativeElement.parentElement.offsetTop; - let parentWidth = this.el.nativeElement.parentElement.offsetWidth; - let parentHeight = this.el.nativeElement.parentElement.offsetHeight; - this.renderer.setElementStyle(this.el.nativeElement, 'position', positionStyle); - this.renderer.setElementStyle(this.el.nativeElement, 'top', parentTop); - this.renderer.setElementStyle(this.el.nativeElement, 'left', parentLeft); - this.renderer.setElementStyle(this.el.nativeElement, 'width', parentWidth); - this.renderer.setElementStyle(this.el.nativeElement, 'height', parentHeight); - }; - - setStyle = (positionStyle:string):void => { - - switch (positionStyle) { - case 'absolute': - case 'fixed': - // The parent size is not set yet, still loading, so need to use interval to update the size. - this.interval = window.setInterval(()=> { - this.calculateSizesForFixPosition(positionStyle); - }, 2000); - break; - default: - // Can change the parent position to relative without causing style issues. - this.renderer.setElementStyle(this.el.nativeElement.parentElement,'position', 'relative'); - break; + if (this.display === true) { + this.changeLoaderDisplay(true); } - }; + } ngOnChanges(changes: SimpleChanges) { if(changes.display){ - this.changeLoaderDisplay(false); - if ( this.display ) { - window.setTimeout(():void => { - this.changeLoaderDisplay(true); + if (this.display) { + this.changeLoaderDisplay(false); //display is set to true, so loader will appear unless we explicitly tell it not to. + window.setTimeout((): void => { + this.display && this.changeLoaderDisplay(true); //only show loader if we still need to display it. }, 500); } else { window.setTimeout(():void => { @@ -86,7 +42,33 @@ export class LoaderComponent { } } - changeLoaderDisplay = (display:boolean):void => { - this.renderer.setElementStyle(this.el.nativeElement, 'display', display ? 'block' : 'none'); + changeLoaderDisplay = (display: boolean): void => { + if (display) { + this.calculateLoaderPosition(); + this.renderer.setElementStyle(this.el.nativeElement, 'display', 'block'); + } else { + this.renderer.setElementStyle(this.el.nativeElement, 'display', 'none'); + } + } + + calculateLoaderPosition = () => { + if (this.relative === true) { // Can change the parent position to relative without causing style issues. + let parent = (this.elementSelector) ? angular.element(this.elementSelector).get(0) : this.el.nativeElement.parentElement; + this.renderer.setElementStyle(parent, 'position', 'relative'); + this.setLoaderPosition(0, 0); //will be relative to parent and appear over specified element + //TODO: DONT force parent to have position relative; set inner div's style instead of outer element + // let parentPos: ClientRect = this.el.nativeElement.parentElement.getBoundingClientRect(); + // this.setLoaderPosition(parentPos.top, parentPos.left, parentPos.width, parentPos.height); + } else { + this.setLoaderPosition(0, 0); //will appear over whole page + } } + + setLoaderPosition = (top:number, left:number, width?:number, height?:number): void => { + this.renderer.setElementStyle(this.el.nativeElement, 'position', 'absolute'); + this.renderer.setElementStyle(this.el.nativeElement, 'top', top? top.toString() : "0"); + this.renderer.setElementStyle(this.el.nativeElement, 'left', left? left.toString() : "0"); + this.renderer.setElementStyle(this.el.nativeElement, 'width', width? width.toString() : "100%"); + this.renderer.setElementStyle(this.el.nativeElement, 'height', height? height.toString() : "100%"); + }; } diff --git a/catalog-ui/src/app/ng2/components/properties-table/dynamic-property/dynamic-property.component.html b/catalog-ui/src/app/ng2/components/properties-table/dynamic-property/dynamic-property.component.html index d6ee568c0c..2df17971e2 100644 --- a/catalog-ui/src/app/ng2/components/properties-table/dynamic-property/dynamic-property.component.html +++ b/catalog-ui/src/app/ng2/components/properties-table/dynamic-property/dynamic-property.component.html @@ -1,12 +1,12 @@ -
- + +
{{property.name}}
{{property.name}}
@@ -21,24 +21,24 @@ [(value)]="property.valueObj" [type]="property.isDeclared ? 'string' : property.type" [name]="property.name" + [path]="property.propertiesName" (valueChange)="valueChanged.emit();" - [readonly]="readonly||property.isDeclared" - > - + [readonly]="readonly||property.isDeclared||property.isDisabled" + >
{{property.type | contentAfterLastDot }}
{{property.schema.property.type | contentAfterLastDot }}
 - +
- + Add value to list - V +
diff --git a/catalog-ui/src/app/ng2/components/properties-table/dynamic-property/dynamic-property.component.less b/catalog-ui/src/app/ng2/components/properties-table/dynamic-property/dynamic-property.component.less index cb7cd39640..4da98ec736 100644 --- a/catalog-ui/src/app/ng2/components/properties-table/dynamic-property/dynamic-property.component.less +++ b/catalog-ui/src/app/ng2/components/properties-table/dynamic-property/dynamic-property.component.less @@ -1,48 +1,67 @@ .flat-children-container { - dynamic-property:first-child .dynamic-property-row:not(.with-top-border) { - border-top:none; - } .dynamic-property-row { - border-top: solid 1px #CCC; + /*create nested left border classes for up to 10 levels of nesting*/ + .nested-border-loop(@i) when (@i > 0) { + @size: (@i - 1) *2; + &.nested-level-@{i} .table-cell:first-child { + border-left: ~"solid @{size}px #009fdb"; + } + .nested-border-loop(@i - 1) + } + .nested-border-loop(10); + } + dynamic-property { + &:first-child .dynamic-property-row.with-top-border { + border-top:solid 1px #d2d2d2; + } + &:not(:last-child) .dynamic-property-row { + border-bottom:solid 1px #d2d2d2; + } } } .dynamic-property-row { display:flex; flex-direction:row; - align-items: center; - + align-items: stretch; + .table-cell { flex: 1; - padding:5px; + padding:9px; + justify-content: center; + overflow: hidden; text-overflow: ellipsis; white-space: nowrap; - overflow:hidden; - min-height:32px; &:first-child { flex: 0 0 50%; border-right:#d2d2d2 solid 1px; - - &:only-of-type { flex: 1 1 100%; border-right:none; } } - + &.empty { + height:40px; + } } .property-icon { flex: 0 0 auto; + margin-right:10px; + align-self:center; + cursor:pointer; } - span.expand-icon { - transition: 200ms transform ease-in-out; - } - span.expand-icon.expanded { - transform: rotate(-180deg); - } + } + .filtered { /deep/ .checkbox-label-content{ background-color: yellow; } } +.inner-cell-div{ + max-width: 100%; + text-overflow: ellipsis; + overflow: hidden; + display: inline; + padding-left: 8px; +} \ No newline at end of file diff --git a/catalog-ui/src/app/ng2/components/properties-table/dynamic-property/dynamic-property.component.ts b/catalog-ui/src/app/ng2/components/properties-table/dynamic-property/dynamic-property.component.ts index 1c7fbfac7a..3713676040 100644 --- a/catalog-ui/src/app/ng2/components/properties-table/dynamic-property/dynamic-property.component.ts +++ b/catalog-ui/src/app/ng2/components/properties-table/dynamic-property/dynamic-property.component.ts @@ -3,12 +3,14 @@ import { PropertyBEModel, PropertyFEModel, DerivedFEProperty, DerivedPropertyTyp import { PROPERTY_DATA, PROPERTY_TYPES } from 'app/utils'; import { PropertiesUtils } from "app/ng2/pages/properties-assignment/properties.utils"; import { DataTypeService } from "../../../services/data-type.service"; +import { trigger, state, style, transition, animate } from '@angular/core'; @Component({ selector: 'dynamic-property', templateUrl: './dynamic-property.component.html', - styleUrls: ['./dynamic-property.component.less'] + styleUrls: ['./dynamic-property.component.less'], + animations: [trigger('fadeIn', [transition(':enter', [style({ opacity: '0' }), animate('.7s ease-out', style({ opacity: '1' }))])])] }) export class DynamicPropertyComponent { @@ -16,7 +18,7 @@ export class DynamicPropertyComponent { propType: DerivedPropertyType; propPath: string; isPropertyFEModel: boolean; - childrenCount: number; + nestedLevel: number; @Input() canBeDeclared: boolean; @Input() property: PropertyFEModel | DerivedFEProperty; @@ -41,6 +43,7 @@ export class DynamicPropertyComponent { this.isPropertyFEModel = this.property instanceof PropertyFEModel; this.propType = this.property.derivedDataType; this.propPath = (this.property instanceof PropertyFEModel) ? this.property.name : this.property.propertiesName; + this.nestedLevel = (this.property.propertiesName.match(/#/g) || []).length; } @@ -66,7 +69,7 @@ export class DynamicPropertyComponent { createNewChildProperty = (): void => { - let newProps: Array = this.propertiesUtils.createListOrMapChildren(this.property, "", null); + let newProps: Array = this.propertiesUtils.createListOrMapChildren(this.property, "", undefined); if (this.property instanceof PropertyFEModel) { this.addChildProps(newProps, this.property.name); } else { @@ -86,11 +89,8 @@ export class DynamicPropertyComponent { childValueChanged = (property: DerivedFEProperty) => { //value of child property changed if (this.property instanceof PropertyFEModel) { // will always be the case - let parentNames = this.getParentNamesArray(property.propertiesName, []); - if (parentNames.length) { - _.set(this.property.valueObj, parentNames.join('.'), property.valueObj); - } - console.log(parentNames); + this.property.childPropUpdated(property); + this.dataTypeService.checkForCustomBehavior(this.property); this.valueChanged.emit(this.property.name); } } @@ -127,29 +127,4 @@ export class DynamicPropertyComponent { } } - - getParentNamesArray = (parentPropName: string, parentNames?: Array): Array => { - if (this.property instanceof PropertyFEModel) { - - if (parentPropName.indexOf("#") == -1) { return parentNames; } //finished recursing parents. return - - let parentProp: DerivedFEProperty = this.property.flattenedChildren.find(prop => prop.propertiesName === parentPropName); - let nameToInsert: string = parentProp.name; - - if (parentProp.isChildOfListOrMap) { - if (parentProp.derivedDataType == DerivedPropertyType.MAP) { - nameToInsert = parentProp.mapKey; - } else { //LIST - let siblingProps = this.property.flattenedChildren.filter(prop => prop.parentName == parentProp.parentName).map(prop => prop.propertiesName); - nameToInsert = siblingProps.indexOf(parentProp.propertiesName).toString(); - } - } - - parentNames.splice(0, 0, nameToInsert); //add prop name to array - return this.getParentNamesArray(parentProp.parentName, parentNames); //continue recursing - - } - } - - } diff --git a/catalog-ui/src/app/ng2/components/properties-table/properties-table.component.html b/catalog-ui/src/app/ng2/components/properties-table/properties-table.component.html index 426ae3ab23..dc8fe70244 100644 --- a/catalog-ui/src/app/ng2/components/properties-table/properties-table.component.html +++ b/catalog-ui/src/app/ng2/components/properties-table/properties-table.component.html @@ -1,5 +1,5 @@
- +
Property Name
Type
@@ -7,10 +7,10 @@
Value
-
No data to display
+
No data to display
-
-
{{instanceName | contentAfterLastDot}}
+ +
{{instanceName | contentAfterLastDot}}
{{property.name}}
- +
{{property.type | contentAfterLastDot}}
-
{{property.schema && property.schema.property && property.schema.property.type ? (property.schema.property.type - | contentAfterLastDot) : ''}}
+
+
+ {{property.schema.property.type | contentAfterLastDot}} +
+
-
+
diff --git a/catalog-ui/src/app/ng2/components/properties-table/properties-table.component.less b/catalog-ui/src/app/ng2/components/properties-table/properties-table.component.less index bb019a768b..a525021b04 100644 --- a/catalog-ui/src/app/ng2/components/properties-table/properties-table.component.less +++ b/catalog-ui/src/app/ng2/components/properties-table/properties-table.component.less @@ -1,5 +1,5 @@ - @import './../../../../assets/styles/variables.less'; +@smaller-screen: ~"only screen and (max-width: 1580px)"; :host /deep/ input { width:100%;} @@ -10,40 +10,31 @@ height:100%; text-align:left; + .inner-cell-div{ max-width: 100%; text-overflow: ellipsis; overflow: hidden; height: 20px; } - - .table-header, .table-row { + + .table-header { display: flex; flex-direction:row; flex: 0 0 auto; - } - - .table-header { font-weight:bold; border-top: #d2d2d2 solid 1px; - background-color: #eaeaea; + background-color: #f2f2f2; - .valueCol { - justify-content: flex-start; - padding: 5px; + .table-cell { + color:#191919; + font-size:14px; } } .table-rows-header { - font-size:16px; - flex:1; border: #d2d2d2 solid 1px; border-top:none; - padding: 5px; - text-overflow: ellipsis; - white-space: nowrap; - overflow: hidden; - background-color: @tlv_color_v; } .table-body { @@ -63,35 +54,37 @@ background-color: #e6f6fb; color: #009fdb; } - } + .table-row { + display: flex; + flex-direction:row; + flex: 0 0 auto; + &:hover:not(.selected){ + background-color:#f8f8f8; cursor:pointer; + } - .table-row { - &:hover { - background-color:#f8f8f8; cursor:pointer; - } + .selected-row { + background-color:#e6f6fb; + } - &:last-child { - flex: 1 0 auto; - } - .selected-row { - background-color:#e6f6fb; + .table-cell.valueCol { + padding:0px; + + } } } - .cut-inner-long-text{ - text-overflow: ellipsis; - overflow: hidden; - } - .table-cell { + .table-cell { font-size:13px; flex:1; border: #d2d2d2 solid 1px; border-right:none; border-top:none; - padding: 5px; + padding:10px; text-overflow: ellipsis; white-space: nowrap; + overflow:hidden; display: flex; + min-height:40px; &:last-child { border-right:#d2d2d2 solid 1px; @@ -101,6 +94,7 @@ max-width:300px; display: flex; justify-content: space-between; + @media @smaller-screen { flex: 0 0 25%;} .property-name { flex: 1; @@ -116,25 +110,25 @@ } /deep/ .checkbox-container { - margin-right: 5px; + margin-right: 10px; } } &.col2 { flex: 0 0 150px; max-width:150px; + @media @smaller-screen { flex: 0 0 20%;} } &.col3 { flex:0 0 120px; max-width:120px; + @media @smaller-screen { flex: 0 0 15%;} } &.valueCol { - flex: 1; - min-width: 350px; + flex: 1 0 350px; display: flex; - justify-content: flex-end; - padding: 0px; + @media @smaller-screen { flex: 1 0 40%;} } } @@ -146,6 +140,9 @@ dynamic-property { width:100%; + &:last-child /deep/ .dynamic-property-row { + border-bottom:none; + } } -} +} \ No newline at end of file diff --git a/catalog-ui/src/app/ng2/components/properties-table/properties-table.component.ts b/catalog-ui/src/app/ng2/components/properties-table/properties-table.component.ts index 58214ca16b..463de4f018 100644 --- a/catalog-ui/src/app/ng2/components/properties-table/properties-table.component.ts +++ b/catalog-ui/src/app/ng2/components/properties-table/properties-table.component.ts @@ -1,5 +1,4 @@ import { Component, Input, Output, EventEmitter, SimpleChanges, ViewChild, ElementRef } from "@angular/core"; -import { trigger, state, style, transition, animate} from '@angular/core'; import {PropertyFEModel, DerivedFEProperty, DerivedPropertyType, InstanceFePropertiesMap} from "app/models"; import {PropertiesService} from "../../services/properties.service"; import { DynamicElementComponent } from 'app/ng2/components/dynamic-element/dynamic-element.component'; @@ -8,8 +7,7 @@ import { KeysPipe } from 'app/ng2/pipes/keys.pipe'; @Component({ selector: 'properties-table', templateUrl: './properties-table.component.html', - styleUrls: ['./properties-table.component.less'], - animations: [trigger('fadeIn', [transition(':enter', [style({ opacity: '0' }), animate('.3s ease-out', style({ opacity: '1' }))]) ])] + styleUrls: ['./properties-table.component.less'] }) export class PropertiesTableComponent { @@ -65,7 +63,6 @@ export class PropertiesTableComponent { propertyChecked = (prop: PropertyFEModel, childPropName?: string) => { let isChecked: boolean = (!childPropName)? prop.isSelected : prop.flattenedChildren.find(prop => prop.propertiesName == childPropName).isSelected; - console.log(isChecked, childPropName, prop); if (!isChecked) { this.propertiesService.undoDisableRelatedProperties(prop, childPropName); } else { diff --git a/catalog-ui/src/app/ng2/components/tooltip/tooltip.component.ts b/catalog-ui/src/app/ng2/components/tooltip/tooltip.component.ts index e98b69003e..891aa60860 100644 --- a/catalog-ui/src/app/ng2/components/tooltip/tooltip.component.ts +++ b/catalog-ui/src/app/ng2/components/tooltip/tooltip.component.ts @@ -14,6 +14,7 @@ export class TooltipComponent { private tooltip: ComponentRef; private visible: boolean; + private delayInProgress: boolean = false; // ------------------------------------------------------------------------- // Constructor @@ -31,6 +32,7 @@ export class TooltipComponent { @Input() tooltipDisabled: boolean; @Input() tooltipAnimation: boolean = true; @Input() tooltipPlacement: "top"|"bottom"|"left"|"right" = "bottom"; + @Input() tooltipDelay: number = 1500; // ------------------------------------------------------------------------- // Public Methods @@ -41,6 +43,11 @@ export class TooltipComponent { if(this.tooltipDisabled || this.visible || this.content === "") { return; } + if (this.tooltipDelay && !this.delayInProgress) { + this.delayInProgress = true; + setTimeout(() => { this.delayInProgress && this.show() }, this.tooltipDelay); + return; + } this.visible = true; if (typeof this.content === "string") { @@ -65,6 +72,7 @@ export class TooltipComponent { @HostListener("mouseleave") hide(): void { + this.delayInProgress = false; if (!this.visible) { return; } diff --git a/catalog-ui/src/app/ng2/pages/properties-assignment/properties-assignment.page.component.html b/catalog-ui/src/app/ng2/pages/properties-assignment/properties-assignment.page.component.html index 317a1fc827..fa3270ec77 100644 --- a/catalog-ui/src/app/ng2/pages/properties-assignment/properties-assignment.page.component.html +++ b/catalog-ui/src/app/ng2/pages/properties-assignment/properties-assignment.page.component.html @@ -28,7 +28,7 @@
-
+
@@ -42,7 +42,7 @@
-
+
{{component.name}}
No data to display
@@ -55,8 +55,8 @@
-
- {{!isInpusTabSelected ? (propertyStructureHeader || selectedFlatProperty.name || "No Property Selected") : "No Property Selected"}} +
+ {{!isInpusTabSelected ? (propertyStructureHeader || "No Property Selected") : "No Property Selected"}}
No data to display
{ - /////////temporary hack for tosca primitives/////////////////////// - if (!this.dataTypes[dataTypeName]) { - return PROPERTY_TYPES.STRING; - } - /////////////////////////////////////////////////////////////////// - if (this.dataTypes[dataTypeName].derivedFromName == PROPERTY_DATA.ROOT_DATA_TYPE || this.dataTypes[dataTypeName].properties) { - return null; - } - if (PROPERTY_DATA.SIMPLE_TYPES.indexOf(this.dataTypes[dataTypeName].derivedFromName) > -1) { - return this.dataTypes[dataTypeName].derivedFromName - } - return this.getTypeForDataTypeDerivedFromSimple(this.dataTypes[dataTypeName].derivedFromName); - }; - /** - * The function returns all properties for the DataType passed in, and recurses through parent dataTypes (derivedFrom) to retrieve their properties as well - * @param dataTypeObj - * - public getDataTypePropertiesRecursively(dataTypeObj: DataTypeModel): Array { - let propertiesArray: Array = dataTypeObj.properties || []; - if (PROPERTY_DATA.ROOT_DATA_TYPE !== dataTypeObj.derivedFromName) { - propertiesArray = propertiesArray.concat(this.getDataTypePropertiesRecursively(dataTypeObj.derivedFrom)); - } - return propertiesArray; - } -*/ public getDerivedDataTypeProperties(dataTypeObj: DataTypeModel, propertiesArray: Array, parentName: string) { //push all child properties to array @@ -67,5 +39,24 @@ export class DataTypeService { } } + /** + * Checks for custom behavior for a given data type by checking if a function exists within data-type.service with that name + * Additional custom behavior can be added by adding a function with the given dataType name + */ + public checkForCustomBehavior = (property:PropertyFEModel) => { + let shortTypeName:string = property.type.split('.').pop(); + if (this[shortTypeName]) { + this[shortTypeName](property); //execute function for given type, pass property as param + } + } + + public Naming = (property: PropertyFEModel) => { + let generatedNamingVal: boolean = _.get(property.valueObj, 'ecomp_generated_naming', true); + property.flattenedChildren.forEach((prop) => { + if (prop.name == 'naming_policy') prop.hidden = !generatedNamingVal; + if (prop.name == 'instance_name') prop.hidden = generatedNamingVal; + }); + } + } diff --git a/catalog-ui/src/app/ng2/shared/checkbox/checkbox.component.html b/catalog-ui/src/app/ng2/shared/checkbox/checkbox.component.html index efe830d6e0..872bf90329 100644 --- a/catalog-ui/src/app/ng2/shared/checkbox/checkbox.component.html +++ b/catalog-ui/src/app/ng2/shared/checkbox/checkbox.component.html @@ -1,5 +1,5 @@
-
+