diff options
Diffstat (limited to 'catalog-ui/src/app/directives')
134 files changed, 10555 insertions, 0 deletions
diff --git a/catalog-ui/src/app/directives/capabilities-and-requirements/capabilities-requirements-list.less b/catalog-ui/src/app/directives/capabilities-and-requirements/capabilities-requirements-list.less new file mode 100644 index 0000000000..0860261b97 --- /dev/null +++ b/catalog-ui/src/app/directives/capabilities-and-requirements/capabilities-requirements-list.less @@ -0,0 +1,113 @@ +.i-sdc-designer-sidebar-capabilities-requirements { + + .b_7; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + + &.description { + margin-top: 28px; + white-space: normal; + word-wrap: break-word; + } + + .i-sdc-designer-sidebar-section-content-item-relations { + border-bottom: 1px solid @color_e; + padding: 10px 10px 10px 18px; + position: relative; + cursor: default; + + .i-sdc-designer-sidebar-section-content-item-button { + top: 15px; + line-height: 10px; + } + + &:hover { + background-color: @color_c; + + .i-sdc-designer-sidebar-section-content-item-button { + display: block; + + } + } + } + + .w-sdc-designer-sidebar-section-relations:not(:last-child) .i-sdc-designer-sidebar-section-content-item-relations-group:last-child .i-sdc-designer-sidebar-section-content-item-relations:last-child { + border-bottom: none; + } + + .i-sdc-designer-sidebar-section-content-item-relations.hand { + .hand; + } + + .i-sdc-designer-sidebar-section-content-item-relations-group { + //border-bottom: 1px solid @color_e; + } + + .i-sdc-designer-sidebar-section-content-item-relations-details { + display: inline-block; + margin-left: 5px; + vertical-align: middle; + } + + .i-sdc-designer-sidebar-section-content-item-relations-details-name { + .b_1; + .bold; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + //width: 100%; + text-transform: capitalize; + max-width: 240px; + display: inline-block; + } + + .i-sdc-designer-sidebar-section-content-item-relations-details-ownerName { + .b_13; + font-weight: 400; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + + &:before { + .sprite; + .arrow-left; + content: ''; + } + } + + .i-sdc-designer-sidebar-section-content-item-relations-details-desc { + .p_1; + line-height: 14px; + word-wrap: break-word; + white-space: normal; + max-width: 265px; + + .i-sdc-designer-sidebar-section-content-item-relations-details-indent-box { + border-left: 1px #848586 solid; + height: 40px; + margin-left: 2px; + margin-top: 5px; + border-bottom: 1px #848586 solid; + width: 25px; + float: left; + } + .i-sdc-designer-sidebar-section-content-item-relations-details-child { + margin-top: 30px; + float: left; + padding-left: 10px; + max-width: 230px; + } + } + + .i-sdc-designer-sidebar-section-content-item-relations-details-desc-label { + font-family: omnes-medium, sans-serif; + } + + .i-sdc-designer-sidebar-section-content-item-relations-view { + position: absolute; + right: 0; + top: 22px; + display: none; + } +} diff --git a/catalog-ui/src/app/directives/capabilities-and-requirements/capability/capabilities-list-directive.ts b/catalog-ui/src/app/directives/capabilities-and-requirements/capability/capabilities-list-directive.ts new file mode 100644 index 0000000000..e71478fa4d --- /dev/null +++ b/catalog-ui/src/app/directives/capabilities-and-requirements/capability/capabilities-list-directive.ts @@ -0,0 +1,40 @@ +/** + * Created by ob0695 on 5/9/2017. + */ +/** + * Created by obarda on 1/8/2017. + */ +'use strict'; +import {CapabilitiesGroup} from "app/models"; + +export interface ICapabilitiesListScope extends ng.IScope { + capabilities:CapabilitiesGroup; +} + + +export class CapabilitiesListDirective implements ng.IDirective { + + constructor() { + + } + + scope = { + capabilities: '=', + }; + + restrict = 'E'; + replace = true; + template = ():string => { + return require('./capabilities-list-view.html'); + }; + + link = (scope:ICapabilitiesListScope, element:any, $attr:any) => { + + }; + + public static factory = ()=> { + return new CapabilitiesListDirective(); + }; +} + +CapabilitiesListDirective.factory.$inject = []; diff --git a/catalog-ui/src/app/directives/capabilities-and-requirements/capability/capabilities-list-view.html b/catalog-ui/src/app/directives/capabilities-and-requirements/capability/capabilities-list-view.html new file mode 100644 index 0000000000..c86a6df785 --- /dev/null +++ b/catalog-ui/src/app/directives/capabilities-and-requirements/capability/capabilities-list-view.html @@ -0,0 +1,14 @@ +<div class="i-sdc-designer-sidebar-capabilities-requirements"> + <div class="i-sdc-designer-sidebar-section-content-item-relations-group"> + <div class="i-sdc-designer-sidebar-section-content-item-relations" + data-ng-repeat="capability in capabilities track by $index"> + <div class="i-sdc-designer-sidebar-section-content-item-relations-details"> + <div class="i-sdc-designer-sidebar-section-content-item-relations-details-name">{{capability.name}} </div> + <div class="i-sdc-designer-sidebar-section-content-item-relations-details-desc" sdc-smart-tooltip> + {{capability.type}} + </div> + </div> + </div> + </div> +</div> + diff --git a/catalog-ui/src/app/directives/capabilities-and-requirements/requirement/requirements-list-directive.ts b/catalog-ui/src/app/directives/capabilities-and-requirements/requirement/requirements-list-directive.ts new file mode 100644 index 0000000000..9863b5d271 --- /dev/null +++ b/catalog-ui/src/app/directives/capabilities-and-requirements/requirement/requirements-list-directive.ts @@ -0,0 +1,71 @@ +/** + * Created by ob0695 on 5/9/2017. + */ +/** + * Created by ob0695 on 5/9/2017. + */ +/** + * Created by obarda on 1/8/2017. + */ +'use strict'; +import {RequirementsGroup, Component} from "app/models"; + +export interface IRequirementsListScope extends ng.IScope { + + requirements:RequirementsGroup; + currentComponent: Component; +} + + +export class RequirementsListDirective implements ng.IDirective { + + constructor(private $filter: ng.IFilterService) { + + } + + scope = { + requirements: '=', + component: '=' + }; + + restrict = 'E'; + replace = true; + template = ():string => { + return require('./requirements-list-view.html'); + }; + + link = (scope:IRequirementsListScope) => { + + scope.isInstanceSelected = () : boolean => { + return scope.component && scope.component.selectedInstance != undefined && scope.component.selectedInstance != null; + } + + scope.getRelation = (requirement:any):any => { + if (scope.isInstanceSelected() && scope.component.componentInstancesRelations) { + let relationItem = _.filter(scope.component.componentInstancesRelations, (relation:any) => { + return relation.fromNode === scope.component.selectedInstance.uniqueId && + _.some(relation.relationships, { + 'requirement': requirement.name, + 'requirementOwnerId': requirement.ownerId + }); + }); + + if (relationItem && relationItem.length) { + return { + type: requirement.relationship.split('.').pop(), + requirementName: this.$filter('resourceName')(scope.component.componentInstances[_.map + (scope.component.componentInstances, "uniqueId").indexOf(relationItem[0].toNode)].name) + }; + } + } + return null; + }; + + }; + + public static factory = ($filter: ng.IFilterService)=> { + return new RequirementsListDirective($filter); + }; +} + +RequirementsListDirective.factory.$inject = ['$filter']; diff --git a/catalog-ui/src/app/directives/capabilities-and-requirements/requirement/requirements-list-view.html b/catalog-ui/src/app/directives/capabilities-and-requirements/requirement/requirements-list-view.html new file mode 100644 index 0000000000..a6487fe72a --- /dev/null +++ b/catalog-ui/src/app/directives/capabilities-and-requirements/requirement/requirements-list-view.html @@ -0,0 +1,19 @@ +<div class="i-sdc-designer-sidebar-capabilities-requirements"> + <div class="i-sdc-designer-sidebar-section-content-item-relations-group"> + <div class="i-sdc-designer-sidebar-section-content-item-relations" + data-ng-repeat="requirement in requirements track by $index"> + <div class="i-sdc-designer-sidebar-section-content-item-relations-details"> + <div class="i-sdc-designer-sidebar-section-content-item-relations-details-name">{{requirement.name}} </div> + <div class="i-sdc-designer-sidebar-section-content-item-relations-details-desc">{{requirement.node}} + <div data-ng-if="getRelation(requirement) != null"> + <div class="i-sdc-designer-sidebar-section-content-item-relations-details-indent-box"></div> + <div class="i-sdc-designer-sidebar-section-content-item-relations-details-child"> + <span class="i-sdc-designer-sidebar-section-content-item-relations-details-desc">{{getRelation(requirement).type}} <br/></span> + <span class="i-sdc-designer-sidebar-section-content-item-relations-details-name">{{getRelation(requirement).requirementName}}</span> + </div> + </div> + </div> + </div> + </div> + </div> +</div> diff --git a/catalog-ui/src/app/directives/clicked-outside/clicked-outside-directive.ts b/catalog-ui/src/app/directives/clicked-outside/clicked-outside-directive.ts new file mode 100644 index 0000000000..009e104740 --- /dev/null +++ b/catalog-ui/src/app/directives/clicked-outside/clicked-outside-directive.ts @@ -0,0 +1,110 @@ +class ClickedOutsideModel { + + private clickedOutsideContainerSelector:string; + private onClickedOutsideGetter:Function; + private clickedOutsideEnableGetter:Function; + + constructor(clickedOutsideData:any) { + this.clickedOutsideContainerSelector = clickedOutsideData.clickedOutsideContainerSelector; + this.onClickedOutsideGetter = clickedOutsideData.onClickedOutsideGetter; + this.clickedOutsideEnableGetter = clickedOutsideData.clickedOutsideEnableGetter; + } + + public getClickedOutsideContainerSelector = ():string => { + return this.clickedOutsideContainerSelector; + } + + public getOnClickedOutsideGetter = ():Function => { + return this.onClickedOutsideGetter; + } + + public getClickedOutsideEnableGetter = ():Function => { + return this.clickedOutsideEnableGetter; + } +} + +export interface IClickedOutsideDirectiveScope extends ng.IScope { +} + +export class ClickedOutsideDirective implements ng.IDirective { + + constructor(private $document:JQuery, private $parse:ng.IParseService) { + } + + restrict = 'A'; + + link = (scope:IClickedOutsideDirectiveScope, element:JQuery, attrs) => { + + let container:HTMLElement; + let attrsAfterEval = scope.$eval(attrs.clickedOutside); + attrsAfterEval.onClickedOutsideGetter = this.$parse(attrsAfterEval.onClickedOutside); + attrsAfterEval.clickedOutsideEnableGetter = this.$parse(attrsAfterEval.clickedOutsideEnable); + + let clickedOutsideModel:ClickedOutsideModel = new ClickedOutsideModel(attrsAfterEval); + + + let getContainer:Function = ():HTMLElement => { + if (!container) { + let clickedOutsideContainerSelector:string = clickedOutsideModel.getClickedOutsideContainerSelector(); + if (!angular.isUndefined(clickedOutsideContainerSelector) && clickedOutsideContainerSelector !== '') { + container = element.parents(clickedOutsideContainerSelector + ':first')[0]; + if (!container) { + container = element[0]; + } + } else { + container = element[0]; + } + } + return container; + }; + + + let onClickedOutside = (event:JQueryEventObject) => { + let containerDomElement:HTMLElement = getContainer(); + let targetDomElementJq:JQuery = angular.element(event.target); + if (targetDomElementJq.hasClass('tooltip') || targetDomElementJq.parents('.tooltip:first').length) { + return; + } + let targetDomElement:HTMLElement = targetDomElementJq[0]; + if (!containerDomElement.contains(targetDomElement)) { + scope.$apply(() => { + let onClickedOutsideGetter:Function = clickedOutsideModel.getOnClickedOutsideGetter(); + onClickedOutsideGetter(scope); + }); + } + }; + + let attachDomEvents:Function = () => { + this.$document.on('mousedown', onClickedOutside); + }; + + let detachDomEvents:Function = () => { + this.$document.off('mousedown', onClickedOutside); + }; + + // + scope.$on('$destroy', () => { + detachDomEvents(); + }); + + + scope.$watch(() => { + let clickedOutsideEnableGetter:Function = clickedOutsideModel.getClickedOutsideEnableGetter(); + return clickedOutsideEnableGetter(scope); + }, (newValue:boolean) => { + if (newValue) { + attachDomEvents(); + return; + } + detachDomEvents(); + }); + + + } + + public static factory = ($document:JQuery, $parse:ng.IParseService) => { + return new ClickedOutsideDirective($document, $parse); + } +} + +ClickedOutsideDirective.factory.$inject = ['$document', '$parse']; diff --git a/catalog-ui/src/app/directives/custom-validation/custom-validation.ts b/catalog-ui/src/app/directives/custom-validation/custom-validation.ts new file mode 100644 index 0000000000..e35a747e1b --- /dev/null +++ b/catalog-ui/src/app/directives/custom-validation/custom-validation.ts @@ -0,0 +1,32 @@ +'use strict'; +export interface ICustomValidationScope extends ng.IScope { + validationFunc:Function; +} + +export class CustomValidationDirective implements ng.IDirective { + + constructor() { + } + + require = 'ngModel'; + restrict = 'A'; + + scope = { + validationFunc: '=' + }; + + link = (scope:ICustomValidationScope, elem, attrs, ngModel) => { + + ngModel.$validators.customValidation = (modelValue, viewValue):boolean => { + return scope.validationFunc(viewValue); + }; + + }; + + public static factory = ()=> { + return new CustomValidationDirective(); + }; + +} + +CustomValidationDirective.factory.$inject = []; diff --git a/catalog-ui/src/app/directives/download-artifact/download-artifact.ts b/catalog-ui/src/app/directives/download-artifact/download-artifact.ts new file mode 100644 index 0000000000..7c817935cf --- /dev/null +++ b/catalog-ui/src/app/directives/download-artifact/download-artifact.ts @@ -0,0 +1,125 @@ +'use strict'; +import {IFileDownload, Component, ArtifactModel} from "app/models"; +import {EventListenerService, CacheService} from "app/services"; +import {EVENTS, FileUtils} from "app/utils"; + +export class DOWNLOAD_CSS_CLASSES { + static DOWNLOAD_ICON = "table-download-btn tosca"; + static LOADER_ICON = "tlv-loader small loader"; +} + +export interface IDownloadArtifactScope extends ng.IScope { + $window:any; + artifact:ArtifactModel; + component:Component; + instance:boolean; + download:Function; + showLoader:boolean; + downloadIconClass:string; + updateDownloadIcon:Function; +} + +export class DownloadArtifactDirective implements ng.IDirective { + + constructor(private $window:any, private cacheService:CacheService, private EventListenerService:EventListenerService, private fileUtils:FileUtils) { + } + + scope = { + artifact: '=', + component: '=', + instance: '=', + showLoader: '=', + downloadIconClass: '@' + }; + restrict = 'EA'; + + link = (scope:IDownloadArtifactScope, element:any) => { + scope.$window = this.$window; + + element.on("click", function () { + scope.download(scope.artifact); + }); + + + let initDownloadLoader = ()=> { + //if the artifact is in a middle of download progress register form callBack & change icon from download to loader + if (scope.showLoader && this.cacheService.get(scope.artifact.uniqueId)) { + this.EventListenerService.registerObserverCallback(EVENTS.DOWNLOAD_ARTIFACT_FINISH_EVENT + scope.artifact.uniqueId, scope.updateDownloadIcon); + window.setTimeout(():void => { + if (this.cacheService.get(scope.artifact.uniqueId)) { + element[0].className = DOWNLOAD_CSS_CLASSES.LOADER_ICON; + } + }, 1000); + + } + }; + + let setDownloadedFileLoader = ()=> { + if (scope.showLoader) { + //set in cache service thet the artifact is in download progress + this.cacheService.set(scope.artifact.uniqueId, true); + initDownloadLoader(); + } + }; + + let removeDownloadedFileLoader = ()=> { + if (scope.showLoader) { + this.cacheService.set(scope.artifact.uniqueId, false); + this.EventListenerService.notifyObservers(EVENTS.DOWNLOAD_ARTIFACT_FINISH_EVENT + scope.artifact.uniqueId); + } + }; + + + //replace the loader to download icon + scope.updateDownloadIcon = () => { + element[0].className = scope.downloadIconClass || DOWNLOAD_CSS_CLASSES.DOWNLOAD_ICON; + }; + + + initDownloadLoader(); + + scope.download = (artifact:ArtifactModel):void => { + + let onFaild = (response):void => { + console.info('onFaild', response); + removeDownloadedFileLoader(); + }; + + let onSuccess = (data:IFileDownload):void => { + downloadFile(data); + removeDownloadedFileLoader(); + }; + + setDownloadedFileLoader(); + + if (scope.instance) { + scope.component.downloadInstanceArtifact(artifact.uniqueId).then(onSuccess, onFaild); + } else { + scope.component.downloadArtifact(artifact.uniqueId).then(onSuccess, onFaild); + } + }; + + let downloadFile = (file:IFileDownload):void => { + if (file) { + let blob = this.fileUtils.base64toBlob(file.base64Contents, ''); + let fileName = file.artifactName; + this.fileUtils.downloadFile(blob, fileName); + } + }; + + element.on('$destroy', ()=> { + //remove listener of download event + if (scope.artifact && scope.artifact.uniqueId) { + this.EventListenerService.unRegisterObserver(EVENTS.DOWNLOAD_ARTIFACT_FINISH_EVENT + scope.artifact.uniqueId); + } + }); + + }; + + public static factory = ($window:any, cacheService:CacheService, EventListenerService:EventListenerService, fileUtils:FileUtils)=> { + return new DownloadArtifactDirective($window, cacheService, EventListenerService, fileUtils); + }; + +} + +DownloadArtifactDirective.factory.$inject = ['$window', 'Sdc.Services.CacheService', 'EventListenerService', 'FileUtils']; diff --git a/catalog-ui/src/app/directives/ecomp-footer/ecomp-footer.html b/catalog-ui/src/app/directives/ecomp-footer/ecomp-footer.html new file mode 100644 index 0000000000..a50731443d --- /dev/null +++ b/catalog-ui/src/app/directives/ecomp-footer/ecomp-footer.html @@ -0,0 +1,8 @@ +<div class="footer-wrapper"> + <div class="divider-footer-bottom"> + <div class="footer-copyright-text"> + <p> + </p> + </div> + </div> +</div> diff --git a/catalog-ui/src/app/directives/ecomp-footer/ecomp-footer.less b/catalog-ui/src/app/directives/ecomp-footer/ecomp-footer.less new file mode 100644 index 0000000000..4c54a11fec --- /dev/null +++ b/catalog-ui/src/app/directives/ecomp-footer/ecomp-footer.less @@ -0,0 +1,47 @@ + +.footer-wrapper { + position: fixed; + bottom: 0px; + left: 0px; + width: 100%; + background-color: #222222; + color: #ffffff; + font-family: "Arial"; + font-size: 11px; + height: @footer_height; +} + +.footer-wrapper a { + color: #ffffff; + margin: 0; + padding: 0; + text-decoration: underline; +} + +.divider-footer-bottom { + margin: 0 auto; + width: 1020px; +} + +.footer-copyright-text { + display: inline-block; + width:612px; + margin-top: 18px; + margin-left: 50px; + text-align: left; + vertical-align: top; +} + +.footer-logo1 { + display: inline-block; + margin-top: 20px; + margin-left: 124px; +} + +.footer-logo2 { + margin-top: 22px; + margin-left: 9px; + display: inline-block; + font-size: 24px; + vertical-align: top; +} diff --git a/catalog-ui/src/app/directives/ecomp-footer/ecomp-footer.ts b/catalog-ui/src/app/directives/ecomp-footer/ecomp-footer.ts new file mode 100644 index 0000000000..f104926fc6 --- /dev/null +++ b/catalog-ui/src/app/directives/ecomp-footer/ecomp-footer.ts @@ -0,0 +1,33 @@ +'use strict'; +import {IAppConfigurtaion} from "app/models"; + +export interface IEcompFooterDirectiveScope extends ng.IScope { + +} + +export class EcompFooterDirective implements ng.IDirective { + + constructor(private sdcConfig:IAppConfigurtaion) { + + } + + public replace = true; + public restrict = 'E'; + + public scope = {}; + + template = ():string => { + return require('./ecomp-footer.html'); + }; + + link = (scope:IEcompFooterDirectiveScope, $elem:JQuery, attr:any) => { + + }; + + public static factory = (sdcConfig:IAppConfigurtaion)=> { + return new EcompFooterDirective(sdcConfig); + }; + +} + +EcompFooterDirective.factory.$inject = ['sdcConfig']; diff --git a/catalog-ui/src/app/directives/ecomp-header/ecomp-header.html b/catalog-ui/src/app/directives/ecomp-header/ecomp-header.html new file mode 100644 index 0000000000..67799420f4 --- /dev/null +++ b/catalog-ui/src/app/directives/ecomp-header/ecomp-header.html @@ -0,0 +1,73 @@ +<div class="sdc-ecomp-header-wrapper"> + + <div class="sdc-ecomp-header"> + + <div class="sdc-ecomp-logo-wrapper"> + <a class="sdc-ecomp-header-title" data-ng-if="clickableLogo==='true'" data-ui-sref="dashboard" translate="PROJECT_TITLE"><span class="sdc-ecomp-logo"></span></a> + <a class="sdc-ecomp-header-title" data-ng-if="clickableLogo==='false'"><span class="sdc-ecomp-logo" translate="PROJECT_TITLE"></span></a> + <div class="sdc-ecomp-header-version"> v.{{version}}</div> + </div> + + <div class="sdc-ecomp-menu"> + + <!-- Top level menu --> + <ul class="sdc-ecomp-menu-top-level"> + <li class="sdc-ecomp-menu-top-level-item" + ng-repeat="item in megaMenuDataObject" + data-ng-if="item.children && item.children.length>0" + > + <span class="selected" data-ng-if="item.menuId === selectedTopMenu.menuId"></span> + <a href data-ng-click="firstMenuLevelClick(item.menuId)">{{item.text}}</a> + + <!-- Second level menu --> + <div class="sdc-ecomp-menu-second-level" data-ng-if="item.menuId === selectedTopMenu.menuId" data-ng-mouseleave="subMenuLeaveAction(item.menuId)"> + <ul> + <li class="sdc-ecomp-menu-second-level-item" + ng-repeat="subItem in selectedTopMenu.children | orderBy : 'column'" + aria-label="{{subItem.text}}" + data-ng-class="{'sdc-ecomp-menu-item-hover': menuItemHover===true}" + ng-mouseover="subMenuEnterAction(subItem.menuId)" + ng-mouseenter="menuItemHover=true" + ng-mouseleave="menuItemHover=false"> + + <!--<i ng-if="subItem.text=='Favorites'" id="favorite-star" class="icon-star favorites-icon-active"></i>--> + + <a href title="{{subItem.text}}" data-ng-click="memuItemClick(subItem)">{{subItem.text}}</a> + + <!-- Third and Four menu panel --> + <ul class="sdc-ecomp-menu-third-level" data-ng-if="subItem.menuId === selectedSubMenu.menuId && (selectedSubMenu.children && selectedSubMenu.children.length>0)"> + <li class="sdc-ecomp-menu-third-level-item" + ng-repeat="thirdItem in selectedSubMenu.children | orderBy : 'column'" + aria-label="{{thirdItem.text}}"> + <a class="sdc-ecomp-menu-third-level-title" href title="{{thirdItem.text}}" data-ng-click="memuItemClick(thirdItem)">{{thirdItem.text}}</a> + <span class="sdc-ecomp-menu-four-level-seperator"></span> + <ul class="sdc-ecomp-menu-four-level"> + <li class="sdc-ecomp-menu-four-level-item" data-ng-repeat="fourItem in thirdItem.children | orderBy : 'column'"> + <a href title="{{fourItem.text}}" data-ng-click="memuItemClick(fourItem)">{{fourItem.text}}</a> + </li> + </ul> + </li> + </ul> + + </li> + </ul> + </div> + + </li> + + </ul> + + </div> + <div class="sdc-ecomp-user-wrapper"> + <span class="sdc-ecomp-user-icon"></span> + <div class="sdc-ecomp-user-details"> + <div class="sdc-ecomp-user-details-name-role"> + <div sdc-smart-tooltip class="sdc-ecomp-user-details-name" data-ng-bind="user.getName()"></div> + <div class="sdc-ecomp-user-details-role" data-ng-bind="user.getRoleToView()"></div> + </div> + <div class="sdc-ecomp-user-details-last-login" data-ng-show="user.getLastLogin()!==''">Last Login: {{user.getLastLogin() | date: 'MMM dd hh:mm a' : 'UTC'}} UTC</div> + </div> + </div> + </div> + +</div> diff --git a/catalog-ui/src/app/directives/ecomp-header/ecomp-header.less b/catalog-ui/src/app/directives/ecomp-header/ecomp-header.less new file mode 100644 index 0000000000..8fa80c4237 --- /dev/null +++ b/catalog-ui/src/app/directives/ecomp-header/ecomp-header.less @@ -0,0 +1,296 @@ +@first-level-color: #067ab4; +@second-level-color: #f8f8f8; + +@first-level-height: 60px; +@second-level-height: 60px; +@third-four-level-height: 370px; + +@max-item-width: 250px; + +.sdc-ecomp-header-wrapper { + + position: absolute; + top: 0; + right: 0; + left: 0; + z-index: 999; + + ul { + margin: 0; + padding: 0; + } + + .sdc-ecomp-header { + + background-color: @first-level-color; + height: @first-level-height; + line-height: @first-level-height; + vertical-align: middle; + display: flex; + flex-direction: row; + padding: 0 20px; + + .sdc-ecomp-menu { + flex-grow: 98; + } + + } + + /* LEVEL 1 */ + .sdc-ecomp-menu-top-level { + list-style: none; + + .sdc-ecomp-menu-top-level-item:first-child { + margin-left: 0; + } + + .sdc-ecomp-menu-top-level-item { + display: inline-block; + margin: 0 20px; + position: relative; + a { + .p_14_m; + text-decoration: none; + } + + span { + &.selected { + position: absolute; + bottom: 0; + width: 0; + height: 0; + border-left: 15px solid transparent; + border-right: 15px solid transparent; + border-bottom: 15px solid @second-level-color; + } + } + } + } + + /* LEVEL 2 */ + .sdc-ecomp-menu-second-level { + background-color: @second-level-color; + box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.33); + height: @second-level-height; + list-style: none; + line-height: @second-level-height; + vertical-align: middle; + display: flex; + flex-direction: row; + padding: 0 20px; + position: fixed; + left: 0; + right: 0; + + .sdc-ecomp-menu-second-level-item:first-child { + margin-left: 0; + } + + .sdc-ecomp-menu-second-level-item { + display: inline-block; + height: @second-level-height; + line-height: @second-level-height; + + &.sdc-ecomp-menu-item-hover { + border-bottom: 4px solid #067ab4; + } + + a { + .m_14_r; + text-decoration: none; + text-align:center; + padding: 0 20px; + display: block; + + &:hover { + .s_14_r; + font-weight:bold; + } + + &:active { + font-weight: bold; + } + + /* fix jump when hovering text */ + &:after { + display:block; + content:attr(title); + font-weight:bold; + height:1px; + color:transparent; + overflow:hidden; + visibility:hidden; + } + } + + } + + } + + /* LEVEL 3 */ + ul.sdc-ecomp-menu-third-level { + background-color: #ffffff; + box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1); + min-height: @third-four-level-height; + list-style: none; + + display: flex; + flex-direction: row; + /*flex-wrap: wrap;*/ + position: fixed; + top: @first-level-height + @second-level-height; + left: 0; + right: 0; + padding: 0 40px; + + li.sdc-ecomp-menu-third-level-item { + height: 40px; + line-height: 40px; + position: relative; + /*width: @max-item-width;*/ + max-width: @max-item-width; + + .sdc-ecomp-menu-third-level-title { + .m_14_m; + text-decoration: none; + text-align: left; + display: block; + padding: 0 20px; + line-height: 20px; + margin-top: 20px; + font-weight: bold; + cursor: pointer; + } + + .sdc-ecomp-menu-four-level-seperator { + position: absolute; + border-right: solid 1px #e5e5e5; + height: @third-four-level-height - 20; + top: 10px; + } + } + + li.sdc-ecomp-menu-third-level-item:first-child { + .sdc-ecomp-menu-four-level-seperator { + border: none; + } + } + } + + /* LEVEL 4 */ + ul.sdc-ecomp-menu-four-level { + display: flex; + flex-direction: column; + margin-top: 10px; + + li.sdc-ecomp-menu-four-level-item { + display: block; + /*width: @max-item-width;*/ + max-width: @max-item-width; + line-height: 20px; + + a { + .m_14_r; + text-decoration: none; + text-align: left; + display: block; + + &:hover { + .s_14_r; + font-weight: bold; + } + } + } + } + +} + +.sdc-ecomp-logo-wrapper { + flex-grow: 1; + .p_18_m; + white-space: nowrap; + min-width: 210px; + text-align: left; + position: relative; + + .sdc-ecomp-logo { + background-image: url("/assets/styles/images/att_logo_white.png"); + background-repeat: no-repeat; + display: inline-block; + vertical-align: middle; + width: 55px; + height: 55px; + } + + .sdc-ecomp-header-version { + .c_16; + .opacity(0.8); + position: absolute; + top: 34px; + line-height: 20px; + left: 56px; + } + + a.sdc-ecomp-header-title { + .p_24; + text-decoration: none; + } +} + + +.sdc-ecomp-user-wrapper { + + flex-grow: 1; + .p_14_m; + white-space: nowrap; + display: flex; + flex-direction: row; + align-items: center; + height: @first-level-height; + + .sdc-ecomp-user-icon { + margin-right: 20px; + .tlv-sprite; + .tlv-sprite.user; + } + + .sdc-ecomp-user-details { + display: flex; + flex-direction: column; + } + + .sdc-ecomp-user-details-name-role { + line-height: 20px; + + .sdc-ecomp-user-details-name { + max-width: 160px; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + vertical-align: bottom; + + .bold; + display: inline-block; + } + + .sdc-ecomp-user-details-role { + .bold; + display: inline-block; + margin-left: 6px; + + &:before { + content: ''; + margin-right: 8px; + border-left: 1px solid @color_m; + } + } + } + + .sdc-ecomp-user-details-last-login { + .font-type._3; + display: block; + line-height: 20px; + height: 20px; + } + +} diff --git a/catalog-ui/src/app/directives/ecomp-header/ecomp-header.ts b/catalog-ui/src/app/directives/ecomp-header/ecomp-header.ts new file mode 100644 index 0000000000..ba96e80484 --- /dev/null +++ b/catalog-ui/src/app/directives/ecomp-header/ecomp-header.ts @@ -0,0 +1,217 @@ +'use strict'; +import {IAppConfigurtaion, User, IUser} from "app/models"; +import {IUserResourceClass, IUserResource} from "app/services"; + +export class MenuItem { + menuId:number; + column:number; + text:string; + parentMenuId:number; + url:string; + children:Array<MenuItem> +} + +export interface IEcompHeaderDirectiveScope extends ng.IScope { + menuData:Array<MenuItem>; + version:string; + clickableLogo:string; + contactUsUrl:string; + getAccessUrl:string; + megaMenuDataObjectTemp:Array<any>; + megaMenuDataObject:Array<any>; + + selectedTopMenu:MenuItem; + selectedSubMenu:MenuItem; + + firstMenuLevelClick:Function; + subMenuEnterAction:Function; + subMenuLeaveAction:Function; + + memuItemClick:Function; + user:IUser; +} + +export class EcompHeaderDirective implements ng.IDirective { + + constructor(private $http:ng.IHttpService, + private sdcConfig:IAppConfigurtaion, + private UserResourceClass:IUserResourceClass) { + + } + + scope = { + menuData: '=', + version: '@', + clickableLogo: '@?' + }; + + public replace = true; + public restrict = 'E'; + public controller = EcompHeaderController; + + template = ():string => { + return 'src/app/directives/ecomp-header/ecomp-header.html'; + }; + + link = ($scope:IEcompHeaderDirectiveScope, $elem:JQuery, attr:any) => { + + if (!$scope.clickableLogo) { + $scope.clickableLogo = "true"; + } + + let findMenuItemById = (menuId):MenuItem => { + let selectedMenuItem:MenuItem = _.find($scope.menuData, (item:MenuItem)=> { + if (item.menuId === menuId) { + return item; + } + }); + return selectedMenuItem; + }; + + let initUser = ():void => { + let defaultUserId:string; + let user:IUserResource = this.UserResourceClass.getLoggedinUser(); + if (!user) { + defaultUserId = this.$http.defaults.headers.common[this.sdcConfig.cookie.userIdSuffix]; + user = this.UserResourceClass.get({id: defaultUserId}, ():void => { + $scope.user = new User(user); + }); + } else { + $scope.user = new User(user); + } + }; + + $scope.firstMenuLevelClick = (menuId:number):void => { + let selectedMenuItem:MenuItem = _.find($scope.megaMenuDataObjectTemp, (item:MenuItem)=> { + if (item.menuId === menuId) { + return item; + } + }); + if (selectedMenuItem) { + $scope.selectedTopMenu = selectedMenuItem; + //console.log("Selected menu item: " + selectedMenuItem.text); + } + }; + + $scope.subMenuEnterAction = (menuId:number):void => { + $scope.selectedSubMenu = findMenuItemById(menuId); + }; + + $scope.subMenuLeaveAction = (menuId:number):void => { + $scope.selectedTopMenu = undefined; + }; + + $scope.memuItemClick = (menuItem:MenuItem):void => { + if (menuItem.url) { + window.location.href = menuItem.url; + } else { + console.log("Menu item: " + menuItem.text + " does not have defined URL!"); + } + }; + + initUser(); + + }; + + public static factory = ($http:ng.IHttpService, + sdcConfig:IAppConfigurtaion, + UserResourceClass:IUserResourceClass)=> { + return new EcompHeaderDirective($http, sdcConfig, UserResourceClass); + }; + +} + +export class EcompHeaderController { + + messages:any; + getAttachId:Function; + render:any; + reRender:Function; + register:Function; + deregister:Function; + head:any; + + static '$inject' = [ + '$element', + '$scope', + '$attrs', + '$animate' + ]; + + constructor(private $element:JQuery, + private $scope:IEcompHeaderDirectiveScope, + private $attrs:ng.IAttributes, + private $animate:any) { + + this.$scope = $scope; + + this.$scope.$watch('menuData', (newVal, oldVal) => { + if (newVal) { + this.init(); + } + }); + + } + + init = ():void => { + + this.$scope.contactUsUrl = "https://wiki.web.att.com/display/EcompPortal/ECOMP+Portal+Home"; + this.$scope.getAccessUrl = "http://ecomp-tlv-dev2.uccentral.att.com:8080/ecompportal/get_access"; + + let unflatten = (array, parent?, tree?) => { + tree = typeof tree !== 'undefined' ? tree : []; + parent = typeof parent !== 'undefined' ? parent : {menuId: null}; + let children = _.filter(array, function (child) { + return child["parentMenuId"] == parent.menuId; + }); + if (!_.isEmpty(children)) { + if (parent.menuId === null) { + tree = children; + } else { + parent['children'] = children + } + _.each(children, function (child) { + unflatten(array, child) + }); + } + return tree; + }; + + let menuStructureConvert = (menuItems) => { + console.log(menuItems); + this.$scope.megaMenuDataObjectTemp = [ + { + menuId: 1001, + text: "ECOMP", + children: menuItems + }, + { + menuId: 1002, + text: "Help", + children: [ + { + text: "Contact Us", + url: this.$scope.contactUsUrl + }] + } + ]; + + /*{ + text:"Get Access", + url: this.$scope.getAccessUrl + }*/ + return this.$scope.megaMenuDataObjectTemp; + }; + + let a = unflatten(this.$scope.menuData); + this.$scope.megaMenuDataObject = menuStructureConvert(a); + //console.log(this.$scope.megaMenuDataObject); + }; +} + +EcompHeaderDirective.factory.$inject = ['$http', 'sdcConfig', 'Sdc.Services.UserResourceService']; + + + + + diff --git a/catalog-ui/src/app/directives/edit-name-popover/edit-module-name-popover.html b/catalog-ui/src/app/directives/edit-name-popover/edit-module-name-popover.html new file mode 100644 index 0000000000..d90c52d9a6 --- /dev/null +++ b/catalog-ui/src/app/directives/edit-name-popover/edit-module-name-popover.html @@ -0,0 +1,31 @@ +<div> + <form name="popoverForm" class="w-sdc-form" data-tests-id="popover-form"> + <span class="tlv-sprite tlv-x-btn close-popover-btn" data-tests-id="popover-x-button" ng-click="closePopover()"></span> + <div class="form-group"> + <span class="popover-label" data-tests-id="popover-vfinstance-name" tooltips tooltip-content="{{module.vfInstanceName}}">{{module.vfInstanceName}}</span> + <div class="popover-input"> + <div class="i-sdc-form-item" data-ng-class="{'error': validateField(popoverForm.heatName)}"> + <input type="text" + data-ng-model="module.heatName" + data-ng-maxlength="50" + maxlength="50" + name="heatName" + placeholder="Enter Name" + autocomplete="off" + data-ng-init="onInit()" + data-ng-pattern="heatNameValidationPattern" + data-tests-id="popover-heat-name" + class="form-control" + /> + </div> + <div class="input-error" data-ng-show="validateField(popoverForm.heatName)"> + <span ng-show="popoverForm.heatName.$error.maxlength" translate="VALIDATION_ERROR_MAX_LENGTH" translate-values="{'max': '50' }"></span> + <span ng-show="popoverForm.heatName.$error.pattern" translate="VALIDATION_ERROR_SPECIAL_CHARS_NOT_ALLOWED"></span> + </div> + </div> + <span class="popover-label" data-tests-id="popover-module-name" tooltips tooltip-content="{{module.moduleName}}">{{module.moduleName}}</span> + <button class="tlv-btn grey popover-btn" data-tests-id="popover-close-button" data-ng-click="closePopover()">Cancel</button> + <button class="tlv-btn blue popover-btn" data-tests-id="popover-save-button" data-ng-class="{'disabled': (validateField(popoverForm.heatName) || popoverForm.heatName.$viewValue === originalName)}" data-ng-click="updateHeatName()">Save</button> + </div> + </form> +</div> diff --git a/catalog-ui/src/app/directives/edit-name-popover/edit-name-popover-directive.ts b/catalog-ui/src/app/directives/edit-name-popover/edit-name-popover-directive.ts new file mode 100644 index 0000000000..b99f11fcf9 --- /dev/null +++ b/catalog-ui/src/app/directives/edit-name-popover/edit-name-popover-directive.ts @@ -0,0 +1,77 @@ +'use strict'; + +export interface IEditNamePopoverDirectiveScope extends ng.IScope { + isOpen:boolean; + templateUrl:string; + module:any; + direction:string; + header:string; + heatNameValidationPattern:RegExp; + originalName:string; + onSave:any; + + closePopover(isCancel:boolean):void; + validateField(field:any, originalName:string):boolean; + updateHeatName(heatName:string):void; + onInit():void; +} + +export class EditNamePopoverDirective implements ng.IDirective { + + constructor(private ValidationPattern:RegExp,private $templateCache:ng.ITemplateCacheService) { + } + + scope = { + direction: "@?", + module: "=", + header: "@?", + onSave: "&" + }; + + link = (scope:IEditNamePopoverDirectiveScope) => { + if (!scope.direction) { + scope.direction = 'top'; + } + + scope.originalName = ''; + this.$templateCache.put("edit-module-name-popover.html", require('./edit-module-name-popover.html')); + scope.templateUrl = "edit-module-name-popover.html"; + scope.isOpen = false; + + scope.closePopover = (isCancel:boolean = true) => { + scope.isOpen = !scope.isOpen; + + if (isCancel) { + scope.module.heatName = scope.originalName; + } + }; + + scope.onInit = () => { + scope.originalName = scope.module.heatName; + }; + + scope.validateField = (field:any):boolean => { + return !!(field && field.$dirty && field.$invalid); + }; + + scope.heatNameValidationPattern = this.ValidationPattern; + + scope.updateHeatName = () => { + scope.closePopover(false); + scope.onSave(); + } + + }; + + replace = true; + restrict = 'E'; + template = ():string => { + return require('./edit-name-popover-view.html'); + }; + + public static factory = (ValidationPattern:RegExp,$templateCache:ng.ITemplateCacheService)=> { + return new EditNamePopoverDirective(ValidationPattern,$templateCache); + } +} + +EditNamePopoverDirective.factory.$inject = ['ValidationPattern','$templateCache']; diff --git a/catalog-ui/src/app/directives/edit-name-popover/edit-name-popover-view.html b/catalog-ui/src/app/directives/edit-name-popover/edit-name-popover-view.html new file mode 100644 index 0000000000..23340ccee2 --- /dev/null +++ b/catalog-ui/src/app/directives/edit-name-popover/edit-name-popover-view.html @@ -0,0 +1 @@ +<div uib-popover-template="templateUrl" popover-class="edit-name-popover" popover-title="{{header}}" popover-placement="{{direction}}" popover-is-open="isOpen" popover-append-to-body="true"></div> diff --git a/catalog-ui/src/app/directives/edit-name-popover/edit-name-popover.less b/catalog-ui/src/app/directives/edit-name-popover/edit-name-popover.less new file mode 100644 index 0000000000..55dcd80a27 --- /dev/null +++ b/catalog-ui/src/app/directives/edit-name-popover/edit-name-popover.less @@ -0,0 +1,74 @@ +.edit-name-popover{ + max-width: none; + width: 310px; + left: initial !important; + right: 10px; + z-index: 100; + + .arrow { + left: 95% !important; + border-width: 7px; + bottom: -8px !important; + } +} + +.popover { + border-radius: 0; + + .top > .arrow { + bottom: -8px !important; + } + + .popover-title { + background-color: transparent; + border-bottom: 2px solid #40b7e4; + margin-left: 20px; + margin-right: 20px; + padding: 8px 14px 8px 0px; + font-family: @font-omnes-medium; + font-weight: bold; + } + + .popover-content { + width: inherit; + padding: 9px 20px; + } + + .form-group { + margin-top: 9px; + } + + .popover-btn { + float:right; + margin-left: 10px; + margin-bottom: 20px; + } + + .close-popover-btn { + position: absolute; + top: 11px; + right: 25px; + } + + .close-popover-btn:hover { + cursor: pointer; + } + + .popover-input { + height: 47px; + margin-bottom:5px; + } + + .popover-label { + text-overflow: ellipsis; + display: block; + white-space: nowrap; + margin-bottom: 10px; + font-family: @font-omnes-medium; + color: @main_color_l; + } + + .w-sdc-form .i-sdc-form-item { + margin-bottom: 0px; + } +} diff --git a/catalog-ui/src/app/directives/elements/checkbox/checkbox.html b/catalog-ui/src/app/directives/elements/checkbox/checkbox.html new file mode 100644 index 0000000000..1e25408188 --- /dev/null +++ b/catalog-ui/src/app/directives/elements/checkbox/checkbox.html @@ -0,0 +1,14 @@ +<label class="tlv-checkbox" ng-class="{'disabled' : disabled}"> + <input id="{{elemId}}" + name="{{elemId}}" + class="tlv-checkbox-i" + type="checkbox" + checked="" + ng-disabled="disabled" + checklist-model="sdcChecklistModel" + checklist-value="sdcChecklistValue" + checklist-change="sdcChecklistChange()" + /> + + <span sdc-smart-tooltip class="tlv-checkbox-label" data-tests-id="{{elemId}}">{{text}}</span> +</label> diff --git a/catalog-ui/src/app/directives/elements/checkbox/checkbox.less b/catalog-ui/src/app/directives/elements/checkbox/checkbox.less new file mode 100644 index 0000000000..0747a680a9 --- /dev/null +++ b/catalog-ui/src/app/directives/elements/checkbox/checkbox.less @@ -0,0 +1,35 @@ +label.tlv-checkbox { + font-weight: normal; +} + +/* +input[type="checkbox"] { + display:none; +} + +input[type="checkbox"] + label span { + margin-right: 6px; + vertical-align: text-bottom; + .sprite-new; + .checkbox_unchecked; + cursor:pointer; +} + +input[type="checkbox"]:checked + label span { + vertical-align: text-bottom; + .sprite-new; + .checkbox_checked; +} + +input[type="checkbox"]:focus + label span { + vertical-align: text-bottom; + .sprite-new; + .checkbox_focus; +} + +input[type="checkbox"][disabled] + label{ + vertical-align: text-bottom; + .sprite-new; + .checkbox_disabled; +} +*/ diff --git a/catalog-ui/src/app/directives/elements/checkbox/checkbox.ts b/catalog-ui/src/app/directives/elements/checkbox/checkbox.ts new file mode 100644 index 0000000000..ec0be8ab07 --- /dev/null +++ b/catalog-ui/src/app/directives/elements/checkbox/checkbox.ts @@ -0,0 +1,43 @@ +'use strict'; + +export interface ICheckboxElementScope extends ng.IScope { + elemId:string; + text:string; + sdcChecklistModel:any; + sdcChecklistValue:string; + disabled:boolean; +} + +export class CheckboxElementDirective implements ng.IDirective { + + constructor(private $filter:ng.IFilterService) { + } + + public replace = true; + public restrict = 'E'; + public transclude = false; + + scope = { + elemId: '@', + text: '@', + disabled: '=', + sdcChecklistModel: '=', + sdcChecklistValue: '=', + sdcChecklistChange: '&' + }; + + template = ():string => { + return require('./checkbox.html'); + }; + + public link = (scope:ICheckboxElementScope, $elem:ng.IAugmentedJQuery, $attrs:angular.IAttributes) => { + + }; + + public static factory = ($filter:ng.IFilterService)=> { + return new CheckboxElementDirective($filter); + }; + +} + +CheckboxElementDirective.factory.$inject = ['$filter']; diff --git a/catalog-ui/src/app/directives/elements/radiobutton/radiobutton.html b/catalog-ui/src/app/directives/elements/radiobutton/radiobutton.html new file mode 100644 index 0000000000..b31fae5d73 --- /dev/null +++ b/catalog-ui/src/app/directives/elements/radiobutton/radiobutton.html @@ -0,0 +1,5 @@ +<div class="tlv-radio"> + <input name="{{elemName}}" id="{{elemId}}" class="tlv-radio-i" type="radio" ng-model="sdcModel" ng-click="onValueChange()" + ng-disabled="disabled" value="{{value}}" /> + <label for="{{elemId}}" sdc-smart-tooltip class="tlv-radio-label">{{text}}</label> +</div> diff --git a/catalog-ui/src/app/directives/elements/radiobutton/radiobutton.less b/catalog-ui/src/app/directives/elements/radiobutton/radiobutton.less new file mode 100644 index 0000000000..e69de29bb2 --- /dev/null +++ b/catalog-ui/src/app/directives/elements/radiobutton/radiobutton.less diff --git a/catalog-ui/src/app/directives/elements/radiobutton/radiobutton.ts b/catalog-ui/src/app/directives/elements/radiobutton/radiobutton.ts new file mode 100644 index 0000000000..1384a82674 --- /dev/null +++ b/catalog-ui/src/app/directives/elements/radiobutton/radiobutton.ts @@ -0,0 +1,48 @@ +import INgModelController = angular.INgModelController; +'use strict'; + +export interface IRadiobuttonElementScope extends ng.IScope { + elemId:string; + elemName:string; + text:string; + sdcModel:any; + value:any; + disabled:boolean; + onValueChange:Function; +} + +export class RadiobuttonElementDirective implements ng.IDirective { + + constructor(private $filter:ng.IFilterService) { + } + + public replace = true; + public restrict = 'E'; + public transclude = false; + + scope = { + elemId: '@', + elemName: '@', + text: '@', + sdcModel: '=', + value: '@', + disabled: '=', + onValueChange: '&' + }; + + template = ():string => { + return require('./radiobutton.html'); + }; + + public link = (scope:IRadiobuttonElementScope, $elem:ng.IAugmentedJQuery, $attrs:angular.IAttributes) => { + //$elem.removeAttr("id") + //console.log(scope.sdcChecklistValue); + }; + + public static factory = ($filter:ng.IFilterService)=> { + return new RadiobuttonElementDirective($filter); + }; + +} + +RadiobuttonElementDirective.factory.$inject = ['$filter']; diff --git a/catalog-ui/src/app/directives/ellipsis/ellipsis-directive.html b/catalog-ui/src/app/directives/ellipsis/ellipsis-directive.html new file mode 100644 index 0000000000..31fa06adda --- /dev/null +++ b/catalog-ui/src/app/directives/ellipsis/ellipsis-directive.html @@ -0,0 +1,7 @@ +{{actualText}} + +<span class="ellipsis-directive-more-less" + data-ng-click="collapsed = !collapsed; toggleText()" + data-ng-hide="ellipsis.length <= maxChars"> + {{collapsed ? "More" : "Less"}} +</span> diff --git a/catalog-ui/src/app/directives/ellipsis/ellipsis-directive.less b/catalog-ui/src/app/directives/ellipsis/ellipsis-directive.less new file mode 100644 index 0000000000..d8dfdbb73b --- /dev/null +++ b/catalog-ui/src/app/directives/ellipsis/ellipsis-directive.less @@ -0,0 +1,10 @@ +.ellipsis-directive-more-less { + .a_9; + .bold; + .hand; + float: right; + margin-right: 17px; + line-height: 23px; + text-decoration: underline; + text-align: left; +} diff --git a/catalog-ui/src/app/directives/ellipsis/ellipsis-directive.ts b/catalog-ui/src/app/directives/ellipsis/ellipsis-directive.ts new file mode 100644 index 0000000000..8fbbd4d486 --- /dev/null +++ b/catalog-ui/src/app/directives/ellipsis/ellipsis-directive.ts @@ -0,0 +1,57 @@ +'use strict'; +export interface IEllipsisScope extends ng.IScope { + ellipsis:string; + maxChars:number; + toggleText():void; + collapsed:boolean; + actualText:string; + +} + +export class EllipsisDirective implements ng.IDirective { + + constructor() { + } + + scope = { + ellipsis: '=', + moreClass: '@', + maxChars: '=' + }; + + replace = false; + restrict = 'A'; + template = ():string => { + return require('./ellipsis-directive.html'); + }; + + link = (scope:IEllipsisScope, $elem:any) => { + + + scope.collapsed = true; + + scope.toggleText = ():void => { + if (scope.ellipsis && scope.collapsed) { + scope.actualText = scope.ellipsis.substr(0, scope.maxChars); + scope.actualText += scope.ellipsis.length > scope.maxChars ? '...' : ''; + } + else { + scope.actualText = scope.ellipsis; + } + }; + + scope.$watch("ellipsis", function () { + scope.collapsed = true; + scope.toggleText(); + }); + + + }; + + public static factory = ()=> { + return new EllipsisDirective(); + }; + +} + +EllipsisDirective.factory.$inject = []; diff --git a/catalog-ui/src/app/directives/events/on-last-repeat/on-last-repeat.ts b/catalog-ui/src/app/directives/events/on-last-repeat/on-last-repeat.ts new file mode 100644 index 0000000000..84014159f0 --- /dev/null +++ b/catalog-ui/src/app/directives/events/on-last-repeat/on-last-repeat.ts @@ -0,0 +1,40 @@ +'use strict'; + +/** + * Usage: + * In data-ng-repeat html: <ol ng-repeat="record in records" on-last-repeat> + * In the controller, catch the last repeat: + * $scope.$on('onRepeatLast', function(scope, element, attrs){ + * //work your magic + * }); + */ +export interface IOnLastRepeatDirectiveScope extends ng.IScope { + $last:any; +} + +export class OnLastRepeatDirective implements ng.IDirective { + + constructor() { + } + + scope = {}; + + restrict = 'AE'; + replace = true; + + link = (scope:IOnLastRepeatDirectiveScope, element:any, attrs:any) => { + let s:any = scope.$parent; // repeat scope + if (s.$last) { + setTimeout(function () { + s.$emit('onRepeatLast', element, attrs); + }, 1); + } + }; + + public static factory = ()=> { + return new OnLastRepeatDirective(); + }; + +} + +OnLastRepeatDirective.factory.$inject = []; diff --git a/catalog-ui/src/app/directives/export-json-to-excel/export-json-to-excel.html b/catalog-ui/src/app/directives/export-json-to-excel/export-json-to-excel.html new file mode 100644 index 0000000000..55696b33fa --- /dev/null +++ b/catalog-ui/src/app/directives/export-json-to-excel/export-json-to-excel.html @@ -0,0 +1,7 @@ +<span data-ng-click="export()" + class="sprite-new download-btn hand" + uib-tooltip="Download" + tooltip-class="uib-custom-tooltip" + tooltip-placement="bottom" + data-tests-id="download-excel"></span> + diff --git a/catalog-ui/src/app/directives/export-json-to-excel/export-json-to-excel.ts b/catalog-ui/src/app/directives/export-json-to-excel/export-json-to-excel.ts new file mode 100644 index 0000000000..deb1c94936 --- /dev/null +++ b/catalog-ui/src/app/directives/export-json-to-excel/export-json-to-excel.ts @@ -0,0 +1,61 @@ +'use strict'; +import {FileUtils} from "app/utils"; + +export interface IJsonExportExcelScope extends ng.IScope { + initExportExcelData:Function; + export:()=>void; +} + +export class JsonExportExcelDirective implements ng.IDirective { + + constructor(private fileUtils:FileUtils) { + } + + scope = { + initExportExcelData: '&'//get function that init and returns Models.ExportExcel + }; + + public restrict = 'E'; + replace = true; + template = ():string => { + return require('./export-json-to-excel.html'); + }; + + private jsonToTableText = (headers:string, dataObj:Array<Object>):string=> { + let tableText = headers + "\n"; + _.each(dataObj, (rowData:any) => { + tableText += _.values(rowData).join() + "\n"; + }); + return tableText; + }; + + link = (scope:IJsonExportExcelScope, $elem:any) => { + scope.export = ():void => { + let exportExcelData = scope.initExportExcelData(); + exportExcelData.fileName = !!exportExcelData.fileName ? exportExcelData.fileName : 'export-excel'; + + let headers = exportExcelData.tableHeaders.join(","); + let tableData = ""; + if (exportExcelData.groupByField) { + _.each(_.groupBy(exportExcelData.dataObj, exportExcelData.groupByField), (groupData:Array<Object>) => { + tableData += this.jsonToTableText(headers, groupData); + tableData += '\n'; + }); + } else { + tableData = this.jsonToTableText(headers, exportExcelData.dataObj); + } + + let blob = new Blob([exportExcelData.metaData.join('\n\n') + '\n\n' + tableData], {type: "text/csv;charset=utf-8"}); + + return this.fileUtils.downloadFile(blob, exportExcelData.fileName + '.csv'); + }; + + }; + + public static factory = (fileUtils:FileUtils)=> { + return new JsonExportExcelDirective( fileUtils); + }; + +} + +JsonExportExcelDirective.factory.$inject = ['FileUtils']; diff --git a/catalog-ui/src/app/directives/file-opener/file-opener.html b/catalog-ui/src/app/directives/file-opener/file-opener.html new file mode 100644 index 0000000000..38f82554e9 --- /dev/null +++ b/catalog-ui/src/app/directives/file-opener/file-opener.html @@ -0,0 +1,3 @@ +<div> +<input class="i-sdc-dashboard-item-upload-input" type="file" data-tests-id="file-{{testsId}}" data-ng-model="importFile" base-sixty-four-input data-ng-change="onFileSelect()" accept="{{getExtensionsWithDot()}}"/> +</div> diff --git a/catalog-ui/src/app/directives/file-opener/file-opener.ts b/catalog-ui/src/app/directives/file-opener/file-opener.ts new file mode 100644 index 0000000000..95e43262f5 --- /dev/null +++ b/catalog-ui/src/app/directives/file-opener/file-opener.ts @@ -0,0 +1,54 @@ +'use strict'; + +export interface IFileOpenerScope extends ng.IScope { + importFile:any; + testsId:any; + extensions:string; + + onFileSelect():void; + onFileUpload(file:any):void; + getExtensionsWithDot():string; +} + +export class FileOpenerDirective implements ng.IDirective { + + constructor(private $compile:ng.ICompileService) { + } + + scope = { + onFileUpload: '&', + testsId: '@', + extensions: '@' + }; + + restrict = 'AE'; + replace = true; + template = ():string => { + return require('./file-opener.html'); + }; + + link = (scope:IFileOpenerScope, element:any) => { + + scope.onFileSelect = () => { + scope.onFileUpload({file: scope.importFile}); + element.html('app/directives/file-opener/file-opener.html'); + this.$compile(element.contents())(scope); + }; + + scope.getExtensionsWithDot = ():string => { + let ret = []; + _.each(scope.extensions.split(','), function (item) { + ret.push("." + item.toString()); + }); + return ret.join(","); + }; + + }; + + public static factory = ($compile:ng.ICompileService)=> { + return new FileOpenerDirective($compile); + }; + +} + +FileOpenerDirective.factory.$inject = ['$compile']; diff --git a/catalog-ui/src/app/directives/file-type/file-type.ts b/catalog-ui/src/app/directives/file-type/file-type.ts new file mode 100644 index 0000000000..11795724d0 --- /dev/null +++ b/catalog-ui/src/app/directives/file-type/file-type.ts @@ -0,0 +1,45 @@ +'use strict'; + +export class FileTypeDirective implements ng.IDirective { + + constructor() { + } + + require = 'ngModel'; + + link = (scope, elem, attrs, ngModel) => { + + let typesToApprove = ""; + + attrs.$observe('fileType', (val:string) => { + typesToApprove = val; + validate(ngModel.$viewValue); + }); + + let validate:Function = function (value) { + let fileName:string = elem.val(), valid:boolean = true; + + if (fileName && value && typesToApprove) { + let extension:string = fileName.substring(fileName.lastIndexOf('.') + 1).toLowerCase(); + valid = typesToApprove.split(',').indexOf(extension) > -1; + } + + ngModel.$setValidity('filetype', valid); + if (!value) { + ngModel.$setPristine(); + } + return value; + }; + + //For DOM -> model validation + ngModel.$parsers.unshift(validate); + + }; + + public static factory = ()=> { + return new FileTypeDirective(); + }; + +} + +FileTypeDirective.factory.$inject = []; diff --git a/catalog-ui/src/app/directives/file-upload/file-upload.html b/catalog-ui/src/app/directives/file-upload/file-upload.html new file mode 100644 index 0000000000..a69340d0ba --- /dev/null +++ b/catalog-ui/src/app/directives/file-upload/file-upload.html @@ -0,0 +1,23 @@ +<div class="i-sdc-form-item i-sdc-form-file-upload"> + <span class="i-sdc-form-file-name" data-tests-id="filename">{{(fileModel && fileModel.filename) || defaultText}}</span> + <div class="i-sdc-form-file-upload-x-btn" ng-click="cancel()" data-ng-show="fileModel.filename && fileModel.filename!=='' && elementDisabled!=='true'"></div> + <label class="i-sdc-form-file-upload-label"> + <input + type="file" + name="{{elementName}}" + ng-model="myFileModel" + base-sixty-four-input + accept="{{getExtensionsWithDot()}}" + file-type="{{extensions}}" + data-ng-change="onFileChange()" + onchange="angular.element(this).scope().setEmptyError(this)" + onclick="angular.element(this).scope().onFileClick(this)" + on-after-validate="onAfterValidate" + data-ng-required="{{elementRequired}}" + data-ng-disabled="elementDisabled==='true'" + data-tests-id="browseButton" + maxsize="10240" + /> + <div class="file-upload-browse-btn" data-ng-class="{'disabled':elementDisabled==='true'}">Browse</div> + </label> +</div> diff --git a/catalog-ui/src/app/directives/file-upload/file-upload.less b/catalog-ui/src/app/directives/file-upload/file-upload.less new file mode 100644 index 0000000000..1c4b010853 --- /dev/null +++ b/catalog-ui/src/app/directives/file-upload/file-upload.less @@ -0,0 +1,75 @@ +.i-sdc-form-file-upload { + + display: flex; + margin-top: 0; + width: 100%; + .p_1; + .bg_c; + .border-radius(2px); + border: solid 1px @border_color_f; + height: 30px; + + input[type="file"] { + cursor: inherit; + display: block; + filter: alpha(opacity=0); + width: 100px; + height: 30px; + opacity: 0; + position: absolute; + right: 0; + text-align: right; + top: 0; + } + + .i-sdc-form-file-name{ + flex-grow: 999; + text-align: left; + padding: 3px 10px; + opacity: 0.6; + width: 80%; + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; + + } + + .i-sdc-form-file-upload-x-btn{ + flex-grow: 1; + .sprite; + .sprite.small-x-btn-black; + cursor: pointer; + top: 10px; + right: 9px; + width: 10px; + position: relative; + } + .i-sdc-form-file-upload-label { + float: right; + width: 100px; + height: 100%; + .bg_n; + .b_9; + + .file-upload-browse-btn { + .noselect; + padding: 4px 6px; + cursor: pointer; + z-index: 999; + position: absolute; + width: 100px; + height: 28px; + text-align: center; + + &.disabled { + cursor: default; + } + } + } + + &.error { + border-color: #da1f3d; + outline: none; + box-sizing: border-box; + } +} diff --git a/catalog-ui/src/app/directives/file-upload/file-upload.ts b/catalog-ui/src/app/directives/file-upload/file-upload.ts new file mode 100644 index 0000000000..63a6f08062 --- /dev/null +++ b/catalog-ui/src/app/directives/file-upload/file-upload.ts @@ -0,0 +1,130 @@ +/** + * Created by obarda on 1/27/2016. + */ +'use strict'; +import {IAppConfigurtaion} from "app/models"; + +export class FileUploadModel { + filetype:string; + filename:string; + filesize:number; + base64:string; +} + +export interface IFileUploadScope extends ng.IScope { + fileModel:FileUploadModel; + formElement:ng.IFormController; + extensions:string; + elementDisabled:string; + elementName:string; + elementRequired:string; + myFileModel:any; // From the ng bind to <input type=file + defaultText:string; + onFileChangedInDirective:Function; + + getExtensionsWithDot():string; + onFileChange():void + onFileClick(element:any):void; + onAfterValidate():void; + setEmptyError(element):void; + validateField(field:any):boolean; + cancel():void; +} + + +export class FileUploadDirective implements ng.IDirective { + + constructor(private sdcConfig:IAppConfigurtaion) { + } + + scope = { + fileModel: '=', + formElement: '=', + extensions: '@', + elementDisabled: '@', + elementName: '@', + elementRequired: '@', + onFileChangedInDirective: '=?', + defaultText: '=', + }; + + restrict = 'E'; + replace = true; + template = ():string => { + return require('./file-upload.html'); + }; + + link = (scope:IFileUploadScope, element:any, $attr:any) => { + + // In case the browse has filename, set it valid. + // When editing artifact the file is not sent again, so if we have filename I do not want to show error. + if (scope.fileModel && scope.fileModel.filename && scope.fileModel.filename !== '') { + scope.formElement[scope.elementName].$setValidity('required', true); + } + + scope.getExtensionsWithDot = ():string => { + let ret = []; + if (scope.extensions) { + _.each(scope.extensions.split(','), function (item) { + ret.push("." + item.toString()); + }); + } + return ret.join(","); + }; + + scope.onFileChange = ():void => { + if (scope.onFileChangedInDirective) { + scope.onFileChangedInDirective(); + } + if (scope.myFileModel) { + scope.fileModel = scope.myFileModel; + scope.formElement[scope.elementName].$setValidity('required', true); + } + }; + + scope.setEmptyError = (element):void => { + if (element.files[0].size) { + scope.formElement[scope.elementName].$setValidity('emptyFile', true); + } else { + scope.formElement[scope.elementName].$setValidity('emptyFile', false); + scope.fileModel = undefined; + } + + }; + + // Prevent case-sensitivity in the upload-file accept parameter + // Workaround for github issue: https://github.com/adonespitogo/angular-base64-upload/issues/81 + scope.onAfterValidate = () => { + if (!scope.formElement[scope.elementName].$valid && scope.extensions) { + let uploadfileExtension:string = scope.fileModel.filename.split('.').pop().toLowerCase(); + if (scope.extensions.split(',').indexOf(uploadfileExtension) > -1) { + scope.formElement[scope.elementName].$setValidity('accept', true); + } + } + // Adding fix for cases when we're changing file type for upload from file that requires certain + // extensions to a file that don't requires any extensions + if (!scope.formElement[scope.elementName].$valid && scope.formElement[scope.elementName].$error.accept && scope.extensions === "") { + scope.formElement[scope.elementName].$setValidity('accept', true); + } + }; + + // Workaround, in case user select a file then cancel (X) then select the file again, the event onChange is not fired. + // This is a workaround to fix this issue. + scope.onFileClick = (element:any):void => { + element.value = null; + }; + + scope.cancel = ():void => { + scope.fileModel.filename = ''; + scope.formElement[scope.elementName].$pristine; + scope.formElement[scope.elementName].$setValidity('required', false); + } + }; + + public static factory = (sdcConfig:IAppConfigurtaion)=> { + return new FileUploadDirective(sdcConfig); + }; + +} + +FileUploadDirective.factory.$inject = [ 'sdcConfig']; diff --git a/catalog-ui/src/app/directives/graphs-v2/asset-popover/asset-popover.html b/catalog-ui/src/app/directives/graphs-v2/asset-popover/asset-popover.html new file mode 100644 index 0000000000..659ff7014f --- /dev/null +++ b/catalog-ui/src/app/directives/graphs-v2/asset-popover/asset-popover.html @@ -0,0 +1,11 @@ +<div class="assetPopover" ng-class="assetPopoverObj.menuSide" ng-style="{left: assetPopoverObj.menuPosition.x, top: assetPopoverObj.menuPosition.y}"> + <div class="display-name-tooltip" >{{assetPopoverObj.displayName}}</div> + + <div class="assetMenu"> + <!--<div class="sprite-new expand-asset-icon" uib-tooltip="Open" tooltip-class="uib-custom-tooltip" tooltip-placement="{{tooltipSide}}"></div>--> + <div class="sprite-new view-info-icon" uib-tooltip="Information" tooltip-class="uib-custom-tooltip" tooltip-placement="{{assetPopoverObj.menuSide}}"></div> + <div class="sprite-new cp-icon" uib-tooltip="Connection Points" tooltip-class="uib-custom-tooltip" tooltip-placement="{{assetPopoverObj.menuSide}}"></div> + <div class="sprite-new vl-icon" uib-tooltip="Links" tooltip-class="uib-custom-tooltip" tooltip-placement="{{assetPopoverObj.menuSide}}"></div> + <div class="sprite-new trash-icon" uib-tooltip="Delete" tooltip-class="uib-custom-tooltip" tooltip-placement="{{assetPopoverObj.menuSide}}" ng-click="deleteAsset()" data-ng-class="{'disabled-icon': assetPopoverObj.isViewOnly}"></div> + </div> +</div> diff --git a/catalog-ui/src/app/directives/graphs-v2/asset-popover/asset-popover.less b/catalog-ui/src/app/directives/graphs-v2/asset-popover/asset-popover.less new file mode 100644 index 0000000000..44de4dfed1 --- /dev/null +++ b/catalog-ui/src/app/directives/graphs-v2/asset-popover/asset-popover.less @@ -0,0 +1,64 @@ +.assetPopover { + font-family: omnes-regular,sans-serif; + font-size: 13px; + width:230px; + padding:0 15px; + position:absolute; + display:flex; + flex-direction:column; + align-items:flex-start; + + &.left { + align-items:flex-end; + + .uib-custom-tooltip { + margin-left:-10px; + } + } + + .display-name-tooltip { + + border:solid 1px @main_color_p; + color: @main_color_p; + padding:5px 10px; + width:200px; + margin-bottom:10px; + border-radius: 2px; + background-color: rgba(80, 99, 113, 0.8); + box-shadow: 0px 3px 7.44px 0.56px rgba(0, 0, 0, 0.33); + } + + .uib-custom-tooltip { + margin-left:20px; + font-family: omnes-regular,sans-serif; + font-size: 13px; + } + + .assetMenu { + + border-radius: 2px; + border: solid 1px @main_color_p; + background-color: rgba(234, 234, 234, 0.7); + box-shadow: 0px 3px 7.44px 0.56px rgba(0, 0, 0, 0.33); + display:flex; + flex-direction: column; + justify-content: center; + align-items:center; + + .sprite-new { + border-bottom:solid 1px #CCC; + &:hover:not(.disabled-icon) { + .hand; + } + &:active:not(.disabled-icon) { + background-color: @main_color_a; + border-bottom-color: @main_color_a; + } + &.trash-icon { + border-bottom: none; + } + } + + + } +} diff --git a/catalog-ui/src/app/directives/graphs-v2/asset-popover/asset-popover.ts b/catalog-ui/src/app/directives/graphs-v2/asset-popover/asset-popover.ts new file mode 100644 index 0000000000..c560161d6e --- /dev/null +++ b/catalog-ui/src/app/directives/graphs-v2/asset-popover/asset-popover.ts @@ -0,0 +1,55 @@ +/*- + * ============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========================================================= + */ + +'use strict'; +import {AssetPopoverObj} from "app/models"; + +export interface IAssetPopoverScope extends ng.IScope { + assetPopoverObj:AssetPopoverObj; + deleteAsset:Function; +} + +export class AssetPopoverDirective implements ng.IDirective { + + constructor() { + } + + scope = { + assetPopoverObj: '=', + deleteAsset: '&' + }; + + restrict = 'E'; + replace = true; + template = ():string => { + return require('app/directives/graphs-v2/asset-popover/asset-popover.html'); + }; + + link = (scope:IAssetPopoverScope, element:JQuery, $attr:ng.IAttributes) => { + + }; + + public static factory = ()=> { + return new AssetPopoverDirective(); + }; +} + +AssetPopoverDirective.factory.$inject = []; + diff --git a/catalog-ui/src/app/directives/graphs-v2/common/common-graph-utils.ts b/catalog-ui/src/app/directives/graphs-v2/common/common-graph-utils.ts new file mode 100644 index 0000000000..0b02173e9a --- /dev/null +++ b/catalog-ui/src/app/directives/graphs-v2/common/common-graph-utils.ts @@ -0,0 +1,372 @@ +import {CommonNodeBase, CompositionCiLinkBase, RelationshipModel, Relationship, CompositionCiNodeBase, NodesFactory, LinksFactory} from "app/models"; +import {GraphUIObjects} from "app/utils"; +/** + * Created by obarda on 12/21/2016. + */ +export class CommonGraphUtils { + + constructor(private NodesFactory:NodesFactory, private LinksFactory:LinksFactory) { + + } + + public safeApply = (scope:ng.IScope, fn:any) => { //todo remove to general utils + let phase = scope.$root.$$phase; + if (phase == '$apply' || phase == '$digest') { + if (fn && (typeof(fn) === 'function')) { + fn(); + } + } else { + scope.$apply(fn); + } + }; + + /** + * Draw node on the graph + * @param cy + * @param compositionGraphNode + * @param position + * @returns {CollectionElements} + */ + public addNodeToGraph(cy:Cy.Instance, compositionGraphNode:CommonNodeBase, position?:Cy.Position):Cy.CollectionElements { + + let node = cy.add(<Cy.ElementDefinition> { + group: 'nodes', + position: position, + data: compositionGraphNode, + classes: compositionGraphNode.classes + }); + + if(!node.data().isUcpe) { //ucpe should not have tooltip + this.initNodeTooltip(node); + } + return node; + }; + + /** + * The function will create a component instance node by the componentInstance position. + * If the node is UCPE the function will create all cp lan&wan for the ucpe + * @param cy + * @param compositionGraphNode + * @returns {Cy.CollectionElements} + */ + public addComponentInstanceNodeToGraph(cy:Cy.Instance, compositionGraphNode:CompositionCiNodeBase):Cy.CollectionElements { + + let nodePosition = { + x: +compositionGraphNode.componentInstance.posX, + y: +compositionGraphNode.componentInstance.posY + }; + + let node = this.addNodeToGraph(cy, compositionGraphNode, nodePosition); + if (compositionGraphNode.isUcpe) { + this.createUcpeCpNodes(cy, node); + } + return node; + }; + + /** + * This function will create CP_WAN & CP_LAN for the UCPE. this is a special node on the group that will behave like ports on the ucpe + * @param cy + * @param ucpeGraphNode + */ + private createUcpeCpNodes(cy:Cy.Instance, ucpeGraphNode:Cy.CollectionNodes):void { + + let requirementsArray:Array<any> = ucpeGraphNode.data().componentInstance.requirements["tosca.capabilities.Node"]; + //show only LAN or WAN requirements + requirementsArray = _.reject(requirementsArray, (requirement:any) => { + let name:string = requirement.ownerName.toLowerCase(); + return name.indexOf('lan') === -1 && name.indexOf('wan') === -1; + }); + requirementsArray.sort(function (a, b) { + let nameA = a.ownerName.toLowerCase().match(/[^ ]+/)[0]; + let nameB = b.ownerName.toLowerCase().match(/[^ ]+/)[0]; + let numA = _.last(a.ownerName.toLowerCase().split(' ')); + let numB = _.last(b.ownerName.toLowerCase().split(' ')); + + if (nameA === nameB) return numA > numB ? 1 : -1; + return nameA < nameB ? 1 : -1; + }); + let position = angular.copy(ucpeGraphNode.boundingbox()); + //add CP nodes to group + let topCps:number = 0; + for (let i = 0; i < requirementsArray.length; i++) { + + let cpNode = this.NodesFactory.createUcpeCpNode(angular.copy(ucpeGraphNode.data().componentInstance)); + cpNode.componentInstance.capabilities = requirementsArray[i]; + cpNode.id = requirementsArray[i].ownerId; + cpNode.group = ucpeGraphNode.data().componentInstance.uniqueId; + cpNode.name = requirementsArray[i].ownerName; //for tooltip + cpNode.displayName = requirementsArray[i].ownerName; + cpNode.displayName = cpNode.displayName.length > 5 ? cpNode.displayName.substring(0, 5) + '...' : cpNode.displayName; + + + if (cpNode.name.toLowerCase().indexOf('lan') > -1) { + cpNode.textPosition = "top"; + cpNode.componentInstance.posX = position.x1 + (i * 90) - (topCps * 90) + 53; + cpNode.componentInstance.posY = position.y1 + 400 + 27; + } else { + cpNode.textPosition = "bottom"; + cpNode.componentInstance.posX = position.x1 + (topCps * 90) + 53; + cpNode.componentInstance.posY = position.y1 + 27; + topCps++; + } + let cyCpNode = this.addComponentInstanceNodeToGraph(cy, cpNode); + cyCpNode.lock(); + } + }; + + /** + * + * @param nodes - all nodes in graph in order to find the edge connecting the two nodes + * @param fromNodeId + * @param toNodeId + * @returns {boolean} true/false if the edge is certified (from node and to node are certified) + */ + public isRelationCertified(nodes:Cy.CollectionNodes, fromNodeId:string, toNodeId:string):boolean { + let resourceTemp = _.filter(nodes, function (node:Cy.CollectionFirst) { + return node.data().id === fromNodeId || node.data().id === toNodeId; + }); + let certified:boolean = true; + + _.forEach(resourceTemp, (item) => { + certified = certified && item.data().certified; + }); + + return certified; + } + + /** + * Add link to graph - only draw the link + * @param cy + * @param link + */ + public insertLinkToGraph = (cy:Cy.Instance, link:CompositionCiLinkBase) => { + + if (!this.isRelationCertified(cy.nodes(), link.source, link.target)) { + link.classes = 'not-certified-link'; + } + cy.add({ + group: 'edges', + data: link, + classes: link.classes + }); + + }; + + /** + * go over the relations and draw links on the graph + * @param cy + * @param instancesRelations + */ + public initGraphLinks(cy:Cy.Instance, instancesRelations:Array<RelationshipModel>) { + + if (instancesRelations) { + _.forEach(instancesRelations, (relationshipModel:RelationshipModel) => { + _.forEach(relationshipModel.relationships, (relationship:Relationship) => { + let linkToCreate = this.LinksFactory.createGraphLink(cy, relationshipModel, relationship); + this.insertLinkToGraph(cy, linkToCreate); + }); + }); + } + } + + /** + * Determine which nodes are in the UCPE and set child data for them. + * @param cy + */ + public initUcpeChildren(cy:Cy.Instance) { + let ucpe:Cy.CollectionNodes = cy.nodes('[?isUcpe]'); // Get ucpe on graph if exist + _.each(cy.edges('.ucpe-host-link'), (link)=> { + + let ucpeChild:Cy.CollectionNodes = (link.source().id() == ucpe.id()) ? link.target() : link.source(); + this.initUcpeChildData(ucpeChild, ucpe); + + //vls dont have ucpe-host-link connection, so need to find them and iterate separately + let connectedVLs = ucpeChild.connectedEdges().connectedNodes('.vl-node'); + _.forEach(connectedVLs, (vl)=> { //all connected vls must be UCPE children because not allowed to connect to a VL outside of the UCPE + this.initUcpeChildData(vl, ucpe); + }); + }); + } + + /** + * Set properties for nodes contained by the UCPE + * @param childNode- node contained in UCPE + * @param ucpe- ucpe container node + */ + public initUcpeChildData(childNode:Cy.CollectionNodes, ucpe:Cy.CollectionNodes) { + + if (!childNode.data('isInsideGroup')) { + this.updateUcpeChildPosition(childNode, ucpe); + childNode.data({isInsideGroup: true}); + } + + } + + /** + * Updates UCPE child node offset, which allows child nodes to be dragged in synchronization with ucpe + * @param childNode- node contained in UCPE + * @param ucpe- ucpe container node + */ + public updateUcpeChildPosition(childNode:Cy.CollectionNodes, ucpe:Cy.CollectionNodes) { + let childPos:Cy.Position = childNode.relativePosition(); + let ucpePos:Cy.Position = ucpe.relativePosition(); + let offset:Cy.Position = { + x: childPos.x - ucpePos.x, + y: childPos.y - ucpePos.y + }; + childNode.data("ucpeOffset", offset); + } + + /** + * Removes ucpe-child properties from the node + * @param childNode- node being removed from UCPE + */ + public removeUcpeChildData(childNode:Cy.CollectionNodes) { + childNode.removeData("ucpeOffset"); + childNode.data({isInsideGroup: false}); + + } + + + public HTMLCoordsToCytoscapeCoords(cytoscapeBoundingBox:Cy.Extent, mousePos:Cy.Position):Cy.Position { + return {x: mousePos.x + cytoscapeBoundingBox.x1, y: mousePos.y + cytoscapeBoundingBox.y1} + }; + + + public getCytoscapeNodePosition = (cy:Cy.Instance, event:IDragDropEvent):Cy.Position => { + let targetOffset = $(event.target).offset(); + let x = event.pageX - targetOffset.left; + let y = event.pageY - targetOffset.top; + + return this.HTMLCoordsToCytoscapeCoords(cy.extent(), { + x: x, + y: y + }); + }; + + + public getNodePosition(node:Cy.CollectionFirstNode):Cy.Position { + let nodePosition = node.relativePoint(); + if (node.data().isUcpe) { //UCPEs use bounding box and not relative point. + nodePosition = {x: node.boundingbox().x1, y: node.boundingbox().y1}; + } + + return nodePosition; + } + + /** + * Generic function that can be used for any html elements overlaid on canvas + * Returns the html position of a node on canvas, including left palette and header offsets. Option to pass in additional offset to add to return position. + * @param node + * @param additionalOffset + * @returns {Cy.Position} + + public getNodePositionWithOffset = (node:Cy.CollectionFirstNode, additionalOffset?:Cy.Position): Cy.Position => { + if(!additionalOffset) additionalOffset = {x: 0, y:0}; + + let nodePosition = node.renderedPosition(); + let posWithOffset:Cy.Position = { + x: nodePosition.x + GraphUIObjects.DIAGRAM_PALETTE_WIDTH_OFFSET + additionalOffset.x, + y: nodePosition.y + GraphUIObjects.COMPOSITION_HEADER_OFFSET + additionalOffset.y + }; + return posWithOffset; + };*/ + + /** + * return true/false if first node contains in second - this used in order to verify is node is entirely inside ucpe + * @param firstBox + * @param secondBox + * @returns {boolean} + */ + public isFirstBoxContainsInSecondBox(firstBox:Cy.BoundingBox, secondBox:Cy.BoundingBox) { + + return firstBox.x1 > secondBox.x1 && firstBox.x2 < secondBox.x2 && firstBox.y1 > secondBox.y1 && firstBox.y2 < secondBox.y2; + + }; + + + /** + * Check if node node bounds position is inside any ucpe on graph, and return the ucpe + * @param {diagram} the diagram. + * @param {nodeActualBounds} the actual bound position of the node. + * @return the ucpe if found else return null + */ + public isInUcpe = (cy:Cy.Instance, nodeBounds:Cy.BoundingBox):Cy.CollectionElements => { + + let ucpeNodes = cy.nodes('[?isUcpe]').filterFn((ucpeNode) => { + return this.isFirstBoxContainsInSecondBox(nodeBounds, ucpeNode.boundingbox()); + }); + return ucpeNodes; + }; + + /** + * + * @param cy + * @param node + * @returns {Array} + */ + public getLinkableNodes(cy:Cy.Instance, node:Cy.CollectionFirstNode):Array<CompositionCiNodeBase> { + let compatibleNodes = []; + _.each(cy.nodes(), (tempNode)=> { + if (this.nodeLocationsCompatible(cy, node, tempNode)) { + compatibleNodes.push(tempNode.data()); + } + }); + return compatibleNodes; + } + + /** + * Checks whether node locations are compatible in reference to UCPEs. + * Returns true if both nodes are in UCPE or both nodes out, or one node is UCPEpart. + * @param node1 + * @param node2 + */ + public nodeLocationsCompatible(cy:Cy.Instance, node1:Cy.CollectionFirstNode, node2:Cy.CollectionFirstNode) { + + let ucpe = cy.nodes('[?isUcpe]'); + if(!ucpe.length){ return true; } + if(node1.data().isUcpePart || node2.data().isUcpePart) { return true; } + + return (this.isFirstBoxContainsInSecondBox(node1.boundingbox(), ucpe.boundingbox()) == this.isFirstBoxContainsInSecondBox(node2.boundingbox(), ucpe.boundingbox())); + + } + + /** + * This function will init qtip tooltip on the node + * @param node - the node we want the tooltip to apply on + */ + public initNodeTooltip(node:Cy.CollectionNodes) { + + let opts = { + content: function () { + return this.data('name'); + }, + position: { + my: 'top center', + at: 'bottom center', + adjust: {x:0, y:-5} + }, + style: { + classes: 'qtip-dark qtip-rounded qtip-custom', + tip: { + width: 16, + height: 8 + } + }, + show: { + event: 'mouseover', + delay: 1000 + }, + hide: {event: 'mouseout mousedown'}, + includeLabels: true + }; + + if (node.data().isUcpePart){ //fix tooltip positioning for UCPE-cps + opts.position.adjust = {x:0, y:20}; + } + + node.qtip(opts); + }; +} + +CommonGraphUtils.$inject = ['NodesFactory', 'LinksFactory'];
\ No newline at end of file diff --git a/catalog-ui/src/app/directives/graphs-v2/common/style/component-instances-nodes-style.ts b/catalog-ui/src/app/directives/graphs-v2/common/style/component-instances-nodes-style.ts new file mode 100644 index 0000000000..971dabafe8 --- /dev/null +++ b/catalog-ui/src/app/directives/graphs-v2/common/style/component-instances-nodes-style.ts @@ -0,0 +1,256 @@ +import {GraphColors} from "app/utils/constants"; +/** + * Created by obarda on 12/18/2016. + */ +export class ComponentInstanceNodesStyle { + + public static getCompositionGraphStyle = ():Array<Cy.Stylesheet> => { + return [ + { + selector: 'core', + css: { + 'shape': 'rectangle', + 'active-bg-size': 0, + 'selection-box-color': 'rgb(0, 159, 219)', + 'selection-box-opacity': 0.2, + 'selection-box-border-color': '#009fdb', + 'selection-box-border-width': 1 + + } + }, + { + selector: 'node', + css: { + 'font-family': 'omnes-regular,sans-serif', + 'font-size': 14, + 'events': 'yes', + 'text-events': 'yes', + 'text-border-width': 15, + 'text-border-color': GraphColors.NODE_UCPE, + 'text-margin-y': 5 + } + }, + { + selector: '.vf-node', + css: { + 'background-color': 'transparent', + 'shape': 'rectangle', + 'label': 'data(displayName)', + 'background-image': 'data(img)', + 'width': 65, + 'height': 65, + 'background-opacity': 0, + "background-width": 65, + "background-height": 65, + 'text-valign': 'bottom', + 'text-halign': 'center', + 'background-fit': 'cover', + 'background-clip': 'node', + 'overlay-color': GraphColors.NODE_BACKGROUND_COLOR, + 'overlay-opacity': 0 + } + }, + + { + selector: '.service-node', + css: { + 'background-color': 'transparent', + 'label': 'data(displayName)', + 'events': 'yes', + 'text-events': 'yes', + 'background-image': 'data(img)', + 'width': 64, + 'height': 64, + "border-width": 0, + 'text-valign': 'bottom', + 'text-halign': 'center', + 'background-opacity': 0, + 'overlay-color': GraphColors.NODE_BACKGROUND_COLOR, + 'overlay-opacity': 0 + } + }, + { + selector: '.cp-node', + css: { + 'background-color': 'rgb(255,255,255)', + 'shape': 'rectangle', + 'label': 'data(displayName)', + 'background-image': 'data(img)', + 'background-width': 21, + 'background-height': 21, + 'width': 21, + 'height': 21, + 'text-valign': 'bottom', + 'text-halign': 'center', + 'background-opacity': 0, + 'overlay-color': GraphColors.NODE_BACKGROUND_COLOR, + 'overlay-opacity': 0 + } + }, + { + selector: '.vl-node', + css: { + 'background-color': 'rgb(255,255,255)', + 'shape': 'rectangle', + 'label': 'data(displayName)', + 'background-image': 'data(img)', + 'background-width': 21, + 'background-height': 21, + 'width': 21, + 'height': 21, + 'text-valign': 'bottom', + 'text-halign': 'center', + 'background-opacity': 0, + 'overlay-color': GraphColors.NODE_BACKGROUND_COLOR, + 'overlay-opacity': 0 + } + }, + { + selector: '.ucpe-cp', + css: { + 'background-color': GraphColors.NODE_UCPE_CP, + 'background-width': 15, + 'background-height': 15, + 'width': 15, + 'height': 15, + 'text-halign': 'center', + 'overlay-opacity': 0, + 'label': 'data(displayName)', + 'text-valign': 'data(textPosition)', + 'text-margin-y': (ele:Cy.Collection) => { + return (ele.data('textPosition') == 'top') ? -5 : 5; + }, + 'font-size': 12 + } + }, + { + selector: '.ucpe-node', + css: { + 'background-fit': 'cover', + 'padding-bottom': 0, + 'padding-top': 0 + } + }, + { + selector: '.simple-link', + css: { + 'width': 1, + 'line-color': GraphColors.BASE_LINK, + 'target-arrow-color': '#3b7b9b', + 'target-arrow-shape': 'triangle', + 'curve-style': 'bezier', + 'control-point-step-size': 30 + } + }, + { + selector: '.vl-link', + css: { + 'width': 3, + 'line-color': GraphColors.VL_LINK, + 'curve-style': 'bezier', + 'control-point-step-size': 30 + } + }, + { + selector: '.ucpe-host-link', + css: { + 'width': 0 + } + }, + { + selector: '.not-certified-link', + css: { + 'width': 1, + 'line-color': GraphColors.NOT_CERTIFIED_LINK, + 'curve-style': 'bezier', + 'control-point-step-size': 30, + 'line-style': 'dashed', + 'target-arrow-color': '#3b7b9b', + 'target-arrow-shape': 'triangle' + + } + }, + + { + selector: '.not-certified', + css: { + 'shape': 'rectangle', + 'background-image': (ele:Cy.Collection) => { + return ele.data().initImage(ele) + }, + "border-width": 0 + } + }, + { + selector: 'node:selected', + css: { + "border-width": 2, + "border-color": GraphColors.NODE_SELECTED_BORDER_COLOR, + 'shape': 'rectangle' + } + }, + { + selector: 'edge:selected', + css: { + 'line-color': GraphColors.ACTIVE_LINK + + } + }, + { + selector: 'edge:active', + css: { + 'overlay-opacity': 0 + } + } + ] + } + + public static getBasicNodeHanlde = () => { + return { + positionX: "center", + positionY: "top", + offsetX: 15, + offsetY: -20, + color: "#27a337", + type: "default", + single: false, + nodeTypeNames: ["basic-node"], + imageUrl: '/assets/styles/images/resource-icons/' + 'canvasPlusIcon.png', + lineWidth: 2, + lineStyle: 'dashed' + + } + } + + public static getBasicSmallNodeHandle = () => { + return { + positionX: "center", + positionY: "top", + offsetX: 3, + offsetY: -25, + color: "#27a337", + type: "default", + single: false, + nodeTypeNames: ["basic-small-node"], + imageUrl: '/assets/styles/images/resource-icons/' + 'canvasPlusIcon.png', + lineWidth: 2, + lineStyle: 'dashed' + } + } + + public static getUcpeCpNodeHandle = () => { + return { + positionX: "center", + positionY: "center", + offsetX: -8, + offsetY: -10, + color: "#27a337", + type: "default", + single: false, + nodeTypeNames: ["ucpe-cp-node"], + imageUrl: '/assets/styles/images/resource-icons/' + 'canvasPlusIcon.png', + lineWidth: 2, + lineStyle: 'dashed' + } + } +} diff --git a/catalog-ui/src/app/directives/graphs-v2/common/style/module-node-style.ts b/catalog-ui/src/app/directives/graphs-v2/common/style/module-node-style.ts new file mode 100644 index 0000000000..0c92c90538 --- /dev/null +++ b/catalog-ui/src/app/directives/graphs-v2/common/style/module-node-style.ts @@ -0,0 +1,83 @@ +import {GraphColors} from "app/utils"; +export class ModulesNodesStyle { + + public static getModuleGraphStyle = ():Array<Cy.Stylesheet> => { + + return [ + { + selector: '.cy-expand-collapse-collapsed-node', + css: { + 'background-image': 'data(img)', + 'width': 34, + 'height': 32, + 'background-opacity': 0, + 'shape': 'rectangle', + 'label': 'data(displayName)', + 'events': 'yes', + 'text-events': 'yes', + 'text-valign': 'bottom', + 'text-halign': 'center', + 'text-margin-y': 5, + 'border-opacity': 0 + } + }, + { + selector: '.module-node', + css: { + 'background-color': 'transparent', + 'background-opacity': 0, + "border-width": 2, + "border-color": GraphColors.NODE_SELECTED_BORDER_COLOR, + 'border-style': 'dashed', + 'label': 'data(displayName)', + 'events': 'yes', + 'text-events': 'yes', + 'text-valign': 'bottom', + 'text-halign': 'center', + 'text-margin-y': 8 + } + }, + { + selector: 'node:selected', + css: { + "border-opacity": 0 + } + }, + { + selector: '.simple-link:selected', + css: { + 'line-color': GraphColors.BASE_LINK, + } + }, + { + selector: '.vl-link:selected', + css: { + 'line-color': GraphColors.VL_LINK, + } + }, + { + selector: '.cy-expand-collapse-collapsed-node:selected', + css: { + "border-color": GraphColors.NODE_SELECTED_BORDER_COLOR, + 'border-opacity': 1, + 'border-style': 'solid', + 'border-width': 2 + } + }, + { + selector: '.module-node:selected', + css: { + "border-color": GraphColors.NODE_SELECTED_BORDER_COLOR, + 'border-opacity': 1 + } + }, + { + selector: '.dummy-node', + css: { + 'width': 20, + 'height': 20 + } + }, + ] + } +} diff --git a/catalog-ui/src/app/directives/graphs-v2/composition-graph/composition-graph.directive.ts b/catalog-ui/src/app/directives/graphs-v2/composition-graph/composition-graph.directive.ts new file mode 100644 index 0000000000..db03aa53fb --- /dev/null +++ b/catalog-ui/src/app/directives/graphs-v2/composition-graph/composition-graph.directive.ts @@ -0,0 +1,539 @@ +import { + MatchBase, + LinkMenu, + ComponentInstance, + LeftPaletteComponent, + Component, + RelationMenuDirectiveObj, + CompositionCiNodeBase, + CompositionCiNodeVl, + NodesFactory/*, + AssetPopoverObj*/ +} from "app/models"; +import {ComponentInstanceFactory, ComponentFactory, GRAPH_EVENTS, GraphColors} from "app/utils"; +import {EventListenerService, LoaderService} from "app/services"; +import {CompositionGraphLinkUtils} from "./utils/composition-graph-links-utils"; +import {CompositionGraphGeneralUtils} from "./utils/composition-graph-general-utils"; +import {CompositionGraphNodesUtils} from "./utils/composition-graph-nodes-utils"; +import {CommonGraphUtils} from "../common/common-graph-utils"; +import {MatchCapabilitiesRequirementsUtils} from "./utils/match-capability-requierment-utils"; +import {CompositionGraphPaletteUtils} from "./utils/composition-graph-palette-utils"; +import {ComponentInstanceNodesStyle} from "../common/style/component-instances-nodes-style"; +import {CytoscapeEdgeEditation} from 'third-party/cytoscape.js-edge-editation/CytoscapeEdgeEditation.js'; +import {ComponentServiceNg2} from "../../../ng2/services/component-services/component.service"; +import {ComponentGenericResponse} from "../../../ng2/services/responses/component-generic-response"; + +interface ICompositionGraphScope extends ng.IScope { + + component:Component; + isLoading: boolean; + isViewOnly:boolean; + // Link menu - create link menu + relationMenuDirectiveObj:RelationMenuDirectiveObj; + isLinkMenuOpen:boolean; + createLinkFromMenu:(chosenMatch:MatchBase, vl:Component)=>void; + + //modify link menu - for now only delete menu + relationMenuTimeout:ng.IPromise<any>; + linkMenuObject:LinkMenu; + + //left palette functions callbacks + dropCallback(event:JQueryEventObject, ui:any):void; + beforeDropCallback(event:IDragDropEvent):void; + verifyDrop(event:JQueryEventObject, ui:any):void; + + //Links menus + deleteRelation(link:Cy.CollectionEdges):void; + hideRelationMenu(); + /*//asset popover menu + assetPopoverObj:AssetPopoverObj; + assetPopoverOpen:boolean; + hideAssetPopover():void; + deleteNode(nodeId:string):void;*/ +} + +export class CompositionGraph implements ng.IDirective { + private _cy:Cy.Instance; + private _currentlyCLickedNodePosition:Cy.Position; + // private $document:JQuery = $(document); + private dragElement:JQuery; + private dragComponent:ComponentInstance; + + constructor(private $q:ng.IQService, + private $log:ng.ILogService, + private $timeout:ng.ITimeoutService, + private NodesFactory:NodesFactory, + private CompositionGraphLinkUtils:CompositionGraphLinkUtils, + private GeneralGraphUtils:CompositionGraphGeneralUtils, + private ComponentInstanceFactory:ComponentInstanceFactory, + private NodesGraphUtils:CompositionGraphNodesUtils, + private eventListenerService:EventListenerService, + private ComponentFactory:ComponentFactory, + private LoaderService:LoaderService, + private commonGraphUtils:CommonGraphUtils, + private matchCapabilitiesRequirementsUtils:MatchCapabilitiesRequirementsUtils, + private CompositionGraphPaletteUtils:CompositionGraphPaletteUtils, + private ComponentServiceNg2: ComponentServiceNg2) { + + } + + restrict = 'E'; + template = require('./composition-graph.html'); + scope = { + component: '=', + isViewOnly: '=' + }; + + link = (scope:ICompositionGraphScope, el:JQuery) => { + + this.loadGraph(scope, el); + + if(scope.component.componentInstances && scope.component.componentInstancesRelations) { + this.loadGraphData(scope); + } else { + //when we don't have the data we register to on graph load event + this.eventListenerService.registerObserverCallback(GRAPH_EVENTS.ON_COMPOSITION_GRAPH_DATA_LOADED, () => { + this.loadGraphData(scope); + }); + } + scope.$on('$destroy', () => { + this._cy.destroy(); + _.forEach(GRAPH_EVENTS, (event) => { + this.eventListenerService.unRegisterObserver(event); + }); + }); + + }; + + private loadGraphData = (scope:ICompositionGraphScope) => { + this.initGraphNodes(scope.component.componentInstances, scope.isViewOnly); + this.commonGraphUtils.initGraphLinks(this._cy, scope.component.componentInstancesRelations); + this.commonGraphUtils.initUcpeChildren(this._cy); + } + + private loadGraph = (scope:ICompositionGraphScope, el:JQuery) => { + + let graphEl = el.find('.sdc-composition-graph-wrapper'); + this.initGraph(graphEl, scope.isViewOnly); + this.initDropZone(scope); + this.registerCytoscapeGraphEvents(scope); + this.registerCustomEvents(scope, el); + this.initViewMode(scope.isViewOnly); + + }; + + private initGraph(graphEl:JQuery, isViewOnly:boolean) { + + this._cy = cytoscape({ + container: graphEl, + style: ComponentInstanceNodesStyle.getCompositionGraphStyle(), + zoomingEnabled: false, + selectionType: 'single', + boxSelectionEnabled: true, + autolock: isViewOnly, + autoungrabify: isViewOnly + }); + } + + private initViewMode(isViewOnly:boolean) { + + if (isViewOnly) { + //remove event listeners + this._cy.off('drag'); + this._cy.off('handlemouseout'); + this._cy.off('handlemouseover'); + this._cy.edges().unselectify(); + } + }; + + private registerCustomEvents(scope:ICompositionGraphScope, el:JQuery) { + + this.eventListenerService.registerObserverCallback(GRAPH_EVENTS.ON_PALETTE_COMPONENT_HOVER_IN, (leftPaletteComponent:LeftPaletteComponent) => { + this.$log.info(`composition-graph::registerEventServiceEvents:: palette hover on component: ${leftPaletteComponent.uniqueId}`); + + let nodesData = this.NodesGraphUtils.getAllNodesData(this._cy.nodes()); + let nodesLinks = this.GeneralGraphUtils.getAllCompositionCiLinks(this._cy); + + if (this.GeneralGraphUtils.componentRequirementsAndCapabilitiesCaching.containsKey(leftPaletteComponent.uniqueId)) { + let cacheComponent = this.GeneralGraphUtils.componentRequirementsAndCapabilitiesCaching.getValue(leftPaletteComponent.uniqueId); + let filteredNodesData = this.matchCapabilitiesRequirementsUtils.findByMatchingCapabilitiesToRequirements(cacheComponent, nodesData, nodesLinks); + + this.matchCapabilitiesRequirementsUtils.highlightMatchingComponents(filteredNodesData, this._cy); + this.matchCapabilitiesRequirementsUtils.fadeNonMachingComponents(filteredNodesData, nodesData, this._cy); + + return; + } + + //----------------------- ORIT TO FIX------------------------// + + this.ComponentServiceNg2.getCapabilitiesAndRequirements(leftPaletteComponent.componentType, leftPaletteComponent.uniqueId).subscribe((response: ComponentGenericResponse) => { + + let component = this.ComponentFactory.createEmptyComponent(leftPaletteComponent.componentType); + component.uniqueId = component.uniqueId; + component.capabilities = response.capabilities; + component.requirements = response.requirements; + this.GeneralGraphUtils.componentRequirementsAndCapabilitiesCaching.setValue(leftPaletteComponent.uniqueId, component); + let filteredNodesData = this.matchCapabilitiesRequirementsUtils.findByMatchingCapabilitiesToRequirements(component, nodesData, nodesLinks); + this.matchCapabilitiesRequirementsUtils.fadeNonMachingComponents(filteredNodesData, nodesData, this._cy); + this.matchCapabilitiesRequirementsUtils.highlightMatchingComponents(filteredNodesData, this._cy) + }); + }); + + this.eventListenerService.registerObserverCallback(GRAPH_EVENTS.ON_PALETTE_COMPONENT_HOVER_OUT, () => { + this._cy.emit('hidehandles'); + this.matchCapabilitiesRequirementsUtils.resetFadedNodes(this._cy); + }); + + this.eventListenerService.registerObserverCallback(GRAPH_EVENTS.ON_PALETTE_COMPONENT_DRAG_START, (dragElement, dragComponent) => { + + this.dragElement = dragElement; + this.dragComponent = this.ComponentInstanceFactory.createComponentInstanceFromComponent(dragComponent); + }); + + this.eventListenerService.registerObserverCallback(GRAPH_EVENTS.ON_PALETTE_COMPONENT_DRAG_ACTION, (event:IDragDropEvent) => { + this.CompositionGraphPaletteUtils.onComponentDrag(this._cy, event, this.dragElement, this.dragComponent); + + }); + + this.eventListenerService.registerObserverCallback(GRAPH_EVENTS.ON_COMPONENT_INSTANCE_NAME_CHANGED, (component:ComponentInstance) => { + + let selectedNode = this._cy.getElementById(component.uniqueId); + selectedNode.data().componentInstance.name = component.name; + selectedNode.data('name', component.name); //used for tooltip + selectedNode.data('displayName', selectedNode.data().getDisplayName()); //abbreviated + + }); + + this.eventListenerService.registerObserverCallback(GRAPH_EVENTS.ON_DELETE_COMPONENT_INSTANCE, (componentInstance:ComponentInstance) => { + let nodeToDelete = this._cy.getElementById(componentInstance.uniqueId); + this.NodesGraphUtils.deleteNode(this._cy, scope.component, nodeToDelete); + }); + + this.eventListenerService.registerObserverCallback(GRAPH_EVENTS.ON_DELETE_MULTIPLE_COMPONENTS, () => { + + this._cy.$('node:selected').each((i:number, node:Cy.CollectionNodes) => { + this.NodesGraphUtils.deleteNode(this._cy, scope.component, node); + }); + + }); + + this.eventListenerService.registerObserverCallback(GRAPH_EVENTS.ON_DELETE_EDGE, (releaseLoading:boolean, linksToDelete:Cy.CollectionEdges) => { + this.CompositionGraphLinkUtils.deleteLink(this._cy, scope.component, releaseLoading, linksToDelete); + }); + + this.eventListenerService.registerObserverCallback(GRAPH_EVENTS.ON_INSERT_NODE_TO_UCPE, (node:Cy.CollectionNodes, ucpe:Cy.CollectionNodes, updateExistingNode:boolean) => { + + this.commonGraphUtils.initUcpeChildData(node, ucpe); + //check if item is a VL, and if so, skip adding the binding to ucpe + if (!(node.data() instanceof CompositionCiNodeVl)) { + this.CompositionGraphLinkUtils.createVfToUcpeLink(scope.component, this._cy, ucpe.data(), node.data()); //create link from the node to the ucpe + } + + if (updateExistingNode) { + let vlsPendingDeletion:Cy.CollectionNodes = this.NodesGraphUtils.deleteNodeVLsUponMoveToOrFromUCPE(scope.component, node.cy(), node); //delete connected VLs that no longer have 2 links + this.CompositionGraphLinkUtils.deleteLinksWhenNodeMovedFromOrToUCPE(scope.component, node.cy(), node, vlsPendingDeletion); //delete all connected links if needed + this.GeneralGraphUtils.pushUpdateComponentInstanceActionToQueue(scope.component, true, node.data().componentInstance); //update componentInstance position + } + + }); + + this.eventListenerService.registerObserverCallback(GRAPH_EVENTS.ON_REMOVE_NODE_FROM_UCPE, (node:Cy.CollectionNodes, ucpe:Cy.CollectionNodes) => { + this.commonGraphUtils.removeUcpeChildData(node); + let vlsPendingDeletion:Cy.CollectionNodes = this.NodesGraphUtils.deleteNodeVLsUponMoveToOrFromUCPE(scope.component, node.cy(), node); + this.CompositionGraphLinkUtils.deleteLinksWhenNodeMovedFromOrToUCPE(scope.component, node.cy(), node, vlsPendingDeletion); //delete all connected links if needed + this.GeneralGraphUtils.pushUpdateComponentInstanceActionToQueue(scope.component, true, node.data().componentInstance); //update componentInstance position + }); + + this.eventListenerService.registerObserverCallback(GRAPH_EVENTS.ON_VERSION_CHANGED, (component:Component) => { + scope.component = component; + this.loadGraphData(scope); + }); + + + scope.createLinkFromMenu = (chosenMatch:MatchBase):void => { + scope.isLinkMenuOpen = false; + this.CompositionGraphLinkUtils.createLinkFromMenu(this._cy, chosenMatch, scope.component); + }; + + scope.hideRelationMenu = () => { + this.commonGraphUtils.safeApply(scope, () => { + scope.linkMenuObject = null; + this.$timeout.cancel(scope.relationMenuTimeout); + }); + }; + + + scope.deleteRelation = (link:Cy.CollectionEdges) => { + scope.hideRelationMenu(); + + //if multiple edges selected, delete the VL itself so edges get deleted automatically + if (this._cy.$('edge:selected').length > 1) { + this.NodesGraphUtils.deleteNode(this._cy, scope.component, this._cy.$('node:selected')); + } else { + this.CompositionGraphLinkUtils.deleteLink(this._cy, scope.component, true, link); + } + }; + + /* + scope.hideAssetPopover = ():void => { + + this.commonGraphUtils.safeApply(scope, () => { + scope.assetPopoverOpen = false; + scope.assetPopoverObj = null; + }); + }; + + scope.deleteNode = (nodeId:string):void => { + if (!scope.isViewOnly) { + this.NodesGraphUtils.confirmDeleteNode(nodeId, this._cy, scope.component); + //scope.hideAssetPopover(); + } + };*/ + } + + private registerCytoscapeGraphEvents(scope:ICompositionGraphScope) { + + this._cy.on('addedgemouseup', (event, data) => { + scope.relationMenuDirectiveObj = this.CompositionGraphLinkUtils.onLinkDrawn(this._cy, data.source, data.target); + if (scope.relationMenuDirectiveObj != null) { + scope.$apply(() => { + scope.isLinkMenuOpen = true; + }); + } + }); + this._cy.on('tapstart', 'node', (event:Cy.EventObject) => { + this._currentlyCLickedNodePosition = angular.copy(event.cyTarget[0].position()); //update node position on drag + if (event.cyTarget.data().isUcpe) { + this._cy.nodes('.ucpe-cp').unlock(); + event.cyTarget.style('opacity', 0.5); + } + //scope.hideAssetPopover(); + }); + + this._cy.on('drag', 'node', (event:Cy.EventObject) => { + + if (event.cyTarget.data().isDraggable) { + event.cyTarget.style({'overlay-opacity': 0.24}); + if (this.GeneralGraphUtils.isValidDrop(this._cy, event.cyTarget)) { + event.cyTarget.style({'overlay-color': GraphColors.NODE_BACKGROUND_COLOR}); + } else { + event.cyTarget.style({'overlay-color': GraphColors.NODE_OVERLAPPING_BACKGROUND_COLOR}); + } + } + + if (event.cyTarget.data().isUcpe) { + let pos = event.cyTarget.position(); + + this._cy.nodes('[?isInsideGroup]').positions((i, node)=> { + return { + x: pos.x + node.data("ucpeOffset").x, + y: pos.y + node.data("ucpeOffset").y + } + }); + } + }); + + /* this._cy.on('mouseover', 'node', (event:Cy.EventObject) => { + if (!this._cy.scratch('_edge_editation_highlights')) { + this.commonGraphUtils.safeApply(scope, () => { + this.showNodePopoverMenu(scope, event.cyTarget[0]); + }); + } + }); + + this._cy.on('mouseout', 'node', (event:Cy.EventObject) => { + scope.hideAssetPopover(); + });*/ + this._cy.on('handlemouseover', (event, payload) => { + + if (payload.node.grabbed() /* || this._cy.scratch('_edge_editation_highlights') === true*/) { //no need to add opacity while we are dragging and hovering othe nodes- or if opacity was already calculated for these nodes + return; + } + let nodesData = this.NodesGraphUtils.getAllNodesData(this._cy.nodes()); + let nodesLinks = this.GeneralGraphUtils.getAllCompositionCiLinks(this._cy); + + let linkableNodes = this.commonGraphUtils.getLinkableNodes(this._cy, payload.node); + let filteredNodesData = this.matchCapabilitiesRequirementsUtils.findByMatchingCapabilitiesToRequirements(payload.node.data().componentInstance, linkableNodes, nodesLinks); + this.matchCapabilitiesRequirementsUtils.highlightMatchingComponents(filteredNodesData, this._cy); + this.matchCapabilitiesRequirementsUtils.fadeNonMachingComponents(filteredNodesData, nodesData, this._cy, payload.node.data()); + /* + this._cy.scratch()._edge_editation_highlights = true; + scope.hideAssetPopover();*/ + }); + + this._cy.on('handlemouseout', () => { + if (this._cy.scratch('_edge_editation_highlights') === true) { + this._cy.removeScratch('_edge_editation_highlights'); + this._cy.emit('hidehandles'); + this.matchCapabilitiesRequirementsUtils.resetFadedNodes(this._cy); + } + }); + + + this._cy.on('tapend', (event:Cy.EventObject) => { + + if (event.cyTarget === this._cy) { //On Background clicked + if (this._cy.$('node:selected').length === 0) { //if the background click but not dragged + this.eventListenerService.notifyObservers(GRAPH_EVENTS.ON_GRAPH_BACKGROUND_CLICKED); + } + scope.hideRelationMenu(); + } + + else if (event.cyTarget.isEdge()) { //On Edge clicked + if (scope.isViewOnly) return; + this.CompositionGraphLinkUtils.handleLinkClick(this._cy, event); + this.openModifyLinkMenu(scope, this.CompositionGraphLinkUtils.getModifyLinkMenu(event.cyTarget[0], event), 6000); + } + + else { //On Node clicked + this._cy.nodes(':grabbed').style({'overlay-opacity': 0}); + + let isUcpe:boolean = event.cyTarget.data().isUcpe; + let newPosition = event.cyTarget[0].position(); + //node position changed (drop after drag event) - we need to update position + if (this._currentlyCLickedNodePosition.x !== newPosition.x || this._currentlyCLickedNodePosition.y !== newPosition.y) { + let nodesMoved:Cy.CollectionNodes = this._cy.$(':grabbed'); + if (isUcpe) { + nodesMoved = nodesMoved.add(this._cy.nodes('[?isInsideGroup]:free')); //'child' nodes will not be recognized as "grabbed" elements within cytoscape. manually add them to collection of nodes moved. + } + this.NodesGraphUtils.onNodesPositionChanged(this._cy, scope.component, nodesMoved); + } else { + this.$log.debug('composition-graph::onNodeSelectedEvent:: fired'); + scope.$apply(() => { + this.eventListenerService.notifyObservers(GRAPH_EVENTS.ON_NODE_SELECTED, event.cyTarget.data().componentInstance); + //open node popover menu + //this.showNodePopoverMenu(scope, event.cyTarget[0]); + }); + } + + if (isUcpe) { + this._cy.nodes('.ucpe-cp').lock(); + event.cyTarget.style('opacity', 1); + } + + } + }); + + this._cy.on('boxselect', 'node', (event:Cy.EventObject) => { + this.eventListenerService.notifyObservers(GRAPH_EVENTS.ON_NODE_SELECTED, event.cyTarget.data().componentInstance); + }); + } + + /* + private showNodePopoverMenu = (scope:ICompositionGraphScope, node:Cy.CollectionNodes) => { + + scope.assetPopoverObj = this.NodesGraphUtils.createAssetPopover(this._cy, node, scope.isViewOnly); + scope.assetPopoverOpen = true; + + };*/ + private openModifyLinkMenu = (scope:ICompositionGraphScope, linkMenuObject:LinkMenu, timeOutInMilliseconds?:number) => { + + this.commonGraphUtils.safeApply(scope, () => { + scope.linkMenuObject = linkMenuObject; + }); + + scope.relationMenuTimeout = this.$timeout(() => { + scope.hideRelationMenu(); + }, timeOutInMilliseconds ? timeOutInMilliseconds : 6000); + }; + + private initGraphNodes(componentInstances:ComponentInstance[], isViewOnly:boolean) { + + if (!isViewOnly) { //Init nodes handle extension - enable dynamic links + setTimeout(()=> { + let handles = new CytoscapeEdgeEditation; + handles.init(this._cy, 18); + handles.registerHandle(ComponentInstanceNodesStyle.getBasicNodeHanlde()); + handles.registerHandle(ComponentInstanceNodesStyle.getBasicSmallNodeHandle()); + handles.registerHandle(ComponentInstanceNodesStyle.getUcpeCpNodeHandle()); + }, 0); + } + + _.each(componentInstances, (instance) => { + let compositionGraphNode:CompositionCiNodeBase = this.NodesFactory.createNode(instance); + this.commonGraphUtils.addComponentInstanceNodeToGraph(this._cy, compositionGraphNode); + }); + } + + + private initDropZone(scope:ICompositionGraphScope) { + + if (scope.isViewOnly) { + return; + } + scope.dropCallback = (event:IDragDropEvent) => { + this.$log.debug(`composition-graph::dropCallback:: fired`); + this.CompositionGraphPaletteUtils.addNodeFromPalette(this._cy, event, scope.component); + }; + + scope.verifyDrop = (event:JQueryEventObject) => { + + if (this.dragElement.hasClass('red')) { + return false; + } + return true; + }; + + scope.beforeDropCallback = (event:IDragDropEvent):ng.IPromise<void> => { + let deferred:ng.IDeferred<void> = this.$q.defer<void>(); + if (this.dragElement.hasClass('red')) { + deferred.reject(); + } else { + deferred.resolve(); + } + + return deferred.promise; + } + } + + public static factory = ($q, + $log, + $timeout, + NodesFactory, + LinksGraphUtils, + GeneralGraphUtils, + ComponentInstanceFactory, + NodesGraphUtils, + EventListenerService, + ComponentFactory, + LoaderService, + CommonGraphUtils, + MatchCapabilitiesRequirementsUtils, + CompositionGraphPaletteUtils, + ComponentServiceNg2) => { + return new CompositionGraph( + $q, + $log, + $timeout, + NodesFactory, + LinksGraphUtils, + GeneralGraphUtils, + ComponentInstanceFactory, + NodesGraphUtils, + EventListenerService, + ComponentFactory, + LoaderService, + CommonGraphUtils, + MatchCapabilitiesRequirementsUtils, + CompositionGraphPaletteUtils, + ComponentServiceNg2); + } +} + +CompositionGraph.factory.$inject = [ + '$q', + '$log', + '$timeout', + 'NodesFactory', + 'CompositionGraphLinkUtils', + 'CompositionGraphGeneralUtils', + 'ComponentInstanceFactory', + 'CompositionGraphNodesUtils', + 'EventListenerService', + 'ComponentFactory', + 'LoaderService', + 'CommonGraphUtils', + 'MatchCapabilitiesRequirementsUtils', + 'CompositionGraphPaletteUtils', + 'ComponentServiceNg2' +]; diff --git a/catalog-ui/src/app/directives/graphs-v2/composition-graph/composition-graph.html b/catalog-ui/src/app/directives/graphs-v2/composition-graph/composition-graph.html new file mode 100644 index 0000000000..1e69d3384a --- /dev/null +++ b/catalog-ui/src/app/directives/graphs-v2/composition-graph/composition-graph.html @@ -0,0 +1,23 @@ +<loader display="isLoading" loader-type="composition-graph"></loader> +<div class="sdc-composition-graph-wrapper" ng-class="{'view-only':isViewOnly}" + data-drop="true" + data-jqyoui-options="{accept: verifyDrop}" + data-jqyoui-droppable="{onDrop:'dropCallback', beforeDrop: 'beforeDropCallback'}"> +</div> + +<relation-menu relation-menu-directive-obj="relationMenuDirectiveObj" is-link-menu-open="isLinkMenuOpen" + create-relation="createLinkFromMenu" cancel="cancelRelationMenu()"></relation-menu> + + +<div class="w-sdc-canvas-menu" + data-ng-show="linkMenuObject" ng-style="{left: linkMenuObject.position.x, top: linkMenuObject.position.y}" + id="relationMenu"> + + <div class="w-sdc-canvas-menu-content hand" data-ng-click="deleteRelation(linkMenuObject.link)"> + <div class="w-sdc-canvas-menu-content-delete-button"></div> + Delete + </div> + +</div> + +<!--<asset-popover ng-if="assetPopoverOpen" asset-popover-obj="assetPopoverObj" delete-asset="deleteNode(assetPopoverObj.nodeId)"></asset-popover>--> diff --git a/catalog-ui/src/app/directives/graphs-v2/composition-graph/composition-graph.less b/catalog-ui/src/app/directives/graphs-v2/composition-graph/composition-graph.less new file mode 100644 index 0000000000..56c8b5529d --- /dev/null +++ b/catalog-ui/src/app/directives/graphs-v2/composition-graph/composition-graph.less @@ -0,0 +1,14 @@ +composition-graph { + display: block; + height:100%; + width: 100%; + + .sdc-composition-graph-wrapper{ + height:100%; + width: 100%; + } + + .view-only{ + background-color:rgb(248, 248, 248); + } +} diff --git a/catalog-ui/src/app/directives/graphs-v2/composition-graph/utils/composition-graph-general-utils.ts b/catalog-ui/src/app/directives/graphs-v2/composition-graph/utils/composition-graph-general-utils.ts new file mode 100644 index 0000000000..1303e7a894 --- /dev/null +++ b/catalog-ui/src/app/directives/graphs-v2/composition-graph/utils/composition-graph-general-utils.ts @@ -0,0 +1,244 @@ +import {ComponentInstance, Component, MatchReqToCapability, MatchBase, CompositionCiLinkBase, CompositionCiNodeUcpeCp} from "app/models"; +import {QueueUtils, Dictionary, GraphUIObjects} from "app/utils"; +import {LoaderService} from "app/services"; +import {MatchCapabilitiesRequirementsUtils} from "./match-capability-requierment-utils"; +import {CommonGraphUtils} from "../../common/common-graph-utils"; + + +export class CompositionGraphGeneralUtils { + + public componentRequirementsAndCapabilitiesCaching = new Dictionary<string, Component>(); + protected static graphUtilsUpdateQueue:QueueUtils; + + constructor(private $q:ng.IQService, + private LoaderService:LoaderService, + private commonGraphUtils:CommonGraphUtils, + private matchCapabilitiesRequirementsUtils:MatchCapabilitiesRequirementsUtils) { + CompositionGraphGeneralUtils.graphUtilsUpdateQueue = new QueueUtils(this.$q); + } + + + /** + * Get the offset for the link creation Menu + * @param point + * @returns {Cy.Position} + */ + public calcMenuOffset:Function = (point:Cy.Position):Cy.Position => { + point.x = point.x + 60; + point.y = point.y + 105; + return point; + }; + + /** + * return the top left position of the link menu + * @param cy + * @param targetNodePosition + * @returns {Cy.Position} + */ + public getLinkMenuPosition = (cy:Cy.Instance, targetNodePosition:Cy.Position) => { + let menuPosition:Cy.Position = this.calcMenuOffset(targetNodePosition); //get the link mid point + if ($(document.body).height() < menuPosition.y + GraphUIObjects.LINK_MENU_HEIGHT + $(document.getElementsByClassName('sdc-composition-graph-wrapper')).offset().top) { // if position menu is overflow bottom + menuPosition.y = $(document.body).height() - GraphUIObjects.TOP_HEADER_HEIGHT - GraphUIObjects.LINK_MENU_HEIGHT; + } + return menuPosition; + }; + + + /** + * will return true/false if two nodes overlapping + * + * @param graph node + */ + private isNodesOverlapping(node:Cy.CollectionFirstNode, draggedNode:Cy.CollectionFirstNode):boolean { + + let nodeBoundingBox:Cy.BoundingBox = node.renderedBoundingBox(); + let secondNodeBoundingBox:Cy.BoundingBox = draggedNode.renderedBoundingBox(); + + return this.isBBoxOverlapping(nodeBoundingBox, secondNodeBoundingBox); + } + + /** + * Checks whether the bounding boxes of two nodes are overlapping on any side + * @param nodeOneBBox + * @param nodeTwoBBox + * @returns {boolean} + */ + private isBBoxOverlapping(nodeOneBBox:Cy.BoundingBox, nodeTwoBBox:Cy.BoundingBox) { + return (((nodeOneBBox.x1 < nodeTwoBBox.x1 && nodeOneBBox.x2 > nodeTwoBBox.x1) || + (nodeOneBBox.x1 < nodeTwoBBox.x2 && nodeOneBBox.x2 > nodeTwoBBox.x2) || + (nodeTwoBBox.x1 < nodeOneBBox.x1 && nodeTwoBBox.x2 > nodeOneBBox.x2)) && + ((nodeOneBBox.y1 < nodeTwoBBox.y1 && nodeOneBBox.y2 > nodeTwoBBox.y1) || + (nodeOneBBox.y1 < nodeTwoBBox.y2 && nodeOneBBox.y2 > nodeTwoBBox.y2) || + (nodeTwoBBox.y1 < nodeOneBBox.y1 && nodeTwoBBox.y2 > nodeOneBBox.y2))) + } + + + /** + * Checks whether a specific component instance can be hosted on the UCPE instance + * @param cy - Cytoscape instance + * @param fromUcpeInstance + * @param toComponentInstance + * @returns {MatchReqToCapability} + */ + public canBeHostedOn(cy:Cy.Instance, fromUcpeInstance:ComponentInstance, toComponentInstance:ComponentInstance):MatchReqToCapability { + + let matches:Array<MatchBase> = this.matchCapabilitiesRequirementsUtils.getMatchedRequirementsCapabilities(fromUcpeInstance, toComponentInstance, this.getAllCompositionCiLinks(cy)); + let hostedOnMatch:MatchBase = _.find(matches, (match:MatchReqToCapability) => { + return match.requirement.capability.toLowerCase() === 'tosca.capabilities.container'; + }); + + return <MatchReqToCapability>hostedOnMatch; + }; + + + /** + * Checks whether node can be dropped into UCPE + * @param cy + * @param nodeToInsert + * @param ucpeNode + * @returns {boolean} + */ + private isValidDropInsideUCPE(cy:Cy.Instance, nodeToInsert:ComponentInstance, ucpeNode:ComponentInstance):boolean { + + let hostedOnMatch:MatchReqToCapability = this.canBeHostedOn(cy, ucpeNode, nodeToInsert); + let result:boolean = !angular.isUndefined(hostedOnMatch) || nodeToInsert.isVl(); //group validation + return result; + + }; + + + /** + * For drops from palette, checks whether the node can be dropped. If node is being held over another node, check if capable of hosting + * @param cy + * @param pseudoNodeBBox + * @param paletteComponentInstance + * @returns {boolean} + */ + public isPaletteDropValid(cy:Cy.Instance, pseudoNodeBBox:Cy.BoundingBox, paletteComponentInstance:ComponentInstance) { + + let componentIsUCPE:boolean = (paletteComponentInstance.capabilities && paletteComponentInstance.capabilities['tosca.capabilities.Container'] && paletteComponentInstance.name.toLowerCase().indexOf('ucpe') > -1); + + if (componentIsUCPE && cy.nodes('[?isUcpe]').length > 0) { //second UCPE not allowed + return false; + } + + let illegalOverlappingNodes = _.filter(cy.nodes("[isSdcElement]"), (graphNode:Cy.CollectionFirstNode) => { + + if (this.isBBoxOverlapping(pseudoNodeBBox, graphNode.renderedBoundingBox())) { + if (!componentIsUCPE && graphNode.data().isUcpe) { + return !this.isValidDropInsideUCPE(cy, paletteComponentInstance, graphNode.data().componentInstance); //if this is valid insert into ucpe, we return false - no illegal overlapping nodes + } + return true; + } + + return false; + }); + + return illegalOverlappingNodes.length === 0; + } + + /** + * will return true/false if a drop of a single node is valid + * + * @param graph node + */ + public isValidDrop(cy:Cy.Instance, draggedNode:Cy.CollectionFirstNode):boolean { + + let illegalOverlappingNodes = _.filter(cy.nodes("[isSdcElement]"), (graphNode:Cy.CollectionFirstNode) => { //all sdc nodes, removing child nodes (childe node allways collaps + + if (draggedNode.data().isUcpe && (graphNode.isChild() || graphNode.data().isInsideGroup)) { //ucpe cps always inside ucpe, no overlapping + return false; + } + if (draggedNode.data().isInsideGroup && (!draggedNode.active() || graphNode.data().isUcpe)) { + return false; + } + + if (!draggedNode.data().isUcpe && !(draggedNode.data() instanceof CompositionCiNodeUcpeCp) && graphNode.data().isUcpe) { //case we are dragging a node into UCPE + let isEntirelyInUCPE:boolean = this.commonGraphUtils.isFirstBoxContainsInSecondBox(draggedNode.renderedBoundingBox(), graphNode.renderedBoundingBox()); + if (isEntirelyInUCPE) { + if (this.isValidDropInsideUCPE(cy, draggedNode.data().componentInstance, graphNode.data().componentInstance)) { //if this is valid insert into ucpe, we return false - no illegal overlapping nodes + return false; + } + } + } + return graphNode.data().id !== draggedNode.data().id && this.isNodesOverlapping(draggedNode, graphNode); + + }); + // return false; + return illegalOverlappingNodes.length === 0; + }; + + /** + * will return true/false if the move of the nodes is valid (no node overlapping and verifying if insert into UCPE is valid) + * + * @param nodesArray - the selected drags nodes + */ + public isGroupValidDrop(cy:Cy.Instance, nodesArray:Cy.CollectionNodes):boolean { + let filterDraggedNodes = nodesArray.filter('[?isDraggable]'); + let isValidDrop = _.every(filterDraggedNodes, (node:Cy.CollectionFirstNode) => { + return this.isValidDrop(cy, node); + + }); + return isValidDrop; + }; + + /** + * get all links in diagram + * @param cy + * @returns {any[]|boolean[]} + */ + public getAllCompositionCiLinks = (cy:Cy.Instance):Array<CompositionCiLinkBase> => { + return _.map(cy.edges("[isSdcElement]"), (edge:Cy.CollectionEdges) => { + return edge.data(); + }); + }; + + + /** + * Get Graph Utils server queue + * @returns {QueueUtils} + */ + public getGraphUtilsServerUpdateQueue():QueueUtils { + return CompositionGraphGeneralUtils.graphUtilsUpdateQueue; + } + ; + + /** + * + * @param blockAction - true/false if this is a block action + * @param instances + * @param component + */ + public pushMultipleUpdateComponentInstancesRequestToQueue = (blockAction:boolean, instances:Array<ComponentInstance>, component:Component):void => { + if (blockAction) { + this.getGraphUtilsServerUpdateQueue().addBlockingUIAction( + () => component.updateMultipleComponentInstances(instances) + ); + } else { + this.getGraphUtilsServerUpdateQueue().addNonBlockingUIAction( + () => component.updateMultipleComponentInstances(instances), + () => this.LoaderService.hideLoader('composition-graph')); + } + }; + + /** + * this function will update component instance data + * @param blockAction - true/false if this is a block action + * @param updatedInstance + */ + public pushUpdateComponentInstanceActionToQueue = (component:Component, blockAction:boolean, updatedInstance:ComponentInstance):void => { + + if (blockAction) { + this.LoaderService.showLoader('composition-graph'); + this.getGraphUtilsServerUpdateQueue().addBlockingUIAction( + () => component.updateComponentInstance(updatedInstance) + ); + } else { + this.getGraphUtilsServerUpdateQueue().addNonBlockingUIAction( + () => component.updateComponentInstance(updatedInstance), + () => this.LoaderService.hideLoader('composition-graph')); + } + }; +} + +CompositionGraphGeneralUtils.$inject = ['$q', 'LoaderService', 'CommonGraphUtils', 'MatchCapabilitiesRequirementsUtils']; diff --git a/catalog-ui/src/app/directives/graphs-v2/composition-graph/utils/composition-graph-links-utils.ts b/catalog-ui/src/app/directives/graphs-v2/composition-graph/utils/composition-graph-links-utils.ts new file mode 100644 index 0000000000..314c761edd --- /dev/null +++ b/catalog-ui/src/app/directives/graphs-v2/composition-graph/utils/composition-graph-links-utils.ts @@ -0,0 +1,271 @@ +/** + * Created by obarda on 6/28/2016. + */ +import {GraphUIObjects, ComponentInstanceFactory, ResourceType} from "app/utils"; +import {LeftPaletteLoaderService, LoaderService} from "app/services"; +import { + NodeUcpe, + CompositionCiNodeVf, + MatchReqToCapability, + MatchBase, + MatchReqToReq, + ComponentInstance, + CompositionCiNodeBase, + RelationshipModel, + RelationMenuDirectiveObj, + CapabilitiesGroup, + LinksFactory, + NodesFactory, + RequirementsGroup, + Component, + Relationship, + Capability, + LinkMenu, + Point, + CompositionCiLinkBase +} from "app/models"; +import {CommonGraphUtils} from "../../common/common-graph-utils"; +import {CompositionGraphGeneralUtils} from "./composition-graph-general-utils"; +import {MatchCapabilitiesRequirementsUtils} from "./match-capability-requierment-utils"; + +export class CompositionGraphLinkUtils { + + constructor(private linksFactory:LinksFactory, + private loaderService:LoaderService, + private generalGraphUtils:CompositionGraphGeneralUtils, + private commonGraphUtils:CommonGraphUtils, + private matchCapabilitiesRequirementsUtils:MatchCapabilitiesRequirementsUtils) { + } + + + /** + * Delete the link on server and then remove it from graph + * @param component + * @param releaseLoading - true/false release the loader when finished + * @param link - the link to delete + */ + public deleteLink = (cy:Cy.Instance, component:Component, releaseLoading:boolean, link:Cy.CollectionEdges) => { + + this.loaderService.showLoader('composition-graph'); + let onSuccessDeleteRelation = (response) => { + cy.remove(link); + }; + + if (!releaseLoading) { + this.generalGraphUtils.getGraphUtilsServerUpdateQueue().addBlockingUIAction( + () => component.deleteRelation(link.data().relation).then(onSuccessDeleteRelation) + ); + } else { + this.generalGraphUtils.getGraphUtilsServerUpdateQueue().addBlockingUIActionWithReleaseCallback( + () => component.deleteRelation(link.data().relation).then(onSuccessDeleteRelation), + () => this.loaderService.hideLoader('composition-graph')); + } + }; + + /** + * create the link on server and than draw it on graph + * @param link - the link to create + * @param cy + * @param component + */ + public createLink = (link:CompositionCiLinkBase, cy:Cy.Instance, component:Component):void => { + + this.loaderService.showLoader('composition-graph'); + + let onSuccess:(response:RelationshipModel) => void = (relation:RelationshipModel) => { + link.setRelation(relation); + this.commonGraphUtils.insertLinkToGraph(cy, link); + }; + + link.updateLinkDirection(); + + this.generalGraphUtils.getGraphUtilsServerUpdateQueue().addBlockingUIActionWithReleaseCallback( + () => component.createRelation(link.relation).then(onSuccess), + () => this.loaderService.hideLoader('composition-graph') + ); + }; + + private createSimpleLink = (match:MatchReqToCapability, cy:Cy.Instance, component:Component):void => { + let newRelation:RelationshipModel = match.matchToRelationModel(); + let linkObg:CompositionCiLinkBase = this.linksFactory.createGraphLink(cy, newRelation, newRelation.relationships[0]); + this.createLink(linkObg, cy, component); + }; + + public createLinkFromMenu = (cy:Cy.Instance, chosenMatch:MatchBase, component:Component):void => { + + if (chosenMatch) { + if (chosenMatch && chosenMatch instanceof MatchReqToCapability) { + this.createSimpleLink(chosenMatch, cy, component); + } + } + }; + + + /** + * Filters the matches for UCPE links so that shown requirements and capabilites are only related to the selected ucpe-cp + * @param fromNode + * @param toNode + * @param matchesArray + * @returns {Array<MatchBase>} + */ + public filterUcpeLinks(fromNode:CompositionCiNodeBase, toNode:CompositionCiNodeBase, matchesArray:Array<MatchBase>):any { + + let matchLink:Array<MatchBase>; + + if (fromNode.isUcpePart) { + matchLink = _.filter(matchesArray, (match:MatchBase) => { + return match.isOwner(fromNode.id); + }); + } + + if (toNode.isUcpePart) { + matchLink = _.filter(matchesArray, (match:MatchBase) => { + return match.isOwner(toNode.id); + }); + } + return matchLink ? matchLink : matchesArray; + } + + + /** + * open the connect link menu if the link drawn is valid - match requirements & capabilities + * @param cy + * @param fromNode + * @param toNode + * @returns {any} + */ + public onLinkDrawn(cy:Cy.Instance, fromNode:Cy.CollectionFirstNode, toNode:Cy.CollectionFirstNode):RelationMenuDirectiveObj { + + if (!this.commonGraphUtils.nodeLocationsCompatible(cy, fromNode, toNode)) { + return null; + } + let linkModel:Array<CompositionCiLinkBase> = this.generalGraphUtils.getAllCompositionCiLinks(cy); + + let possibleRelations:Array<MatchBase> = this.matchCapabilitiesRequirementsUtils.getMatchedRequirementsCapabilities(fromNode.data().componentInstance, + toNode.data().componentInstance, linkModel); + + //filter relations found to limit to specific ucpe-cp + possibleRelations = this.filterUcpeLinks(fromNode.data(), toNode.data(), possibleRelations); + + //if found possibleRelations between the nodes we create relation menu directive and open the link menu + if (possibleRelations.length) { + let menuPosition = this.generalGraphUtils.getLinkMenuPosition(cy, toNode.renderedPoint()); + return new RelationMenuDirectiveObj(fromNode.data(), toNode.data(), menuPosition, possibleRelations); + } + return null; + }; + + + /** + * when we drag instance in to UCPE or out of UCPE - get all links we need to delete - one node in ucpe and one node outside of ucpe + * @param node - the node we dragged into or out of the ucpe + */ + public deleteLinksWhenNodeMovedFromOrToUCPE(component:Component, cy:Cy.Instance, nodeMoved:Cy.CollectionNodes, vlsPendingDeletion?:Cy.CollectionNodes):void { + + + let linksToDelete:Cy.CollectionElements = cy.collection(); + _.forEach(nodeMoved.neighborhood('node'), (neighborNode)=> { + + if (neighborNode.data().isUcpePart) { //existing connections to ucpe or ucpe-cp - we want to delete even though nodeLocationsCompatible will technically return true + linksToDelete = linksToDelete.add(nodeMoved.edgesWith(neighborNode)); // This will delete the ucpe-host-link, or the vl-ucpe-link if nodeMoved is vl + } else if (!this.commonGraphUtils.nodeLocationsCompatible(cy, nodeMoved, neighborNode)) { //connection to regular node or vl - check if locations are compatible + if (!vlsPendingDeletion || !vlsPendingDeletion.intersect(neighborNode).length) { //Check if this is a link to a VL pending deletion, to prevent double deletion of between the node moved and vl + linksToDelete = linksToDelete.add(nodeMoved.edgesWith(neighborNode)); + } + } + }); + + linksToDelete.each((i, link)=> { + this.deleteLink(cy, component, false, link); + }); + + }; + + /** + * Creates a hostedOn link between a VF and UCPE + * @param component + * @param cy + * @param ucpeNode + * @param vfNode + */ + public createVfToUcpeLink = (component:Component, cy:Cy.Instance, ucpeNode:NodeUcpe, vfNode:CompositionCiNodeVf):void => { + let hostedOnMatch:MatchReqToCapability = this.generalGraphUtils.canBeHostedOn(cy, ucpeNode.componentInstance, vfNode.componentInstance); + /* create relation */ + let newRelation = new RelationshipModel(); + newRelation.fromNode = ucpeNode.id; + newRelation.toNode = vfNode.id; + + let link:CompositionCiLinkBase = this.linksFactory.createUcpeHostLink(newRelation); + link.relation = hostedOnMatch.matchToRelationModel(); + this.createLink(link, cy, component); + }; + + + /** + * Handles click event on links. + * If one edge selected: do nothing. + /*Two edges selected - always select all + /* Three or more edges: first click - select all, secondary click - select single. + * @param cy + * @param event + */ + public handleLinkClick(cy:Cy.Instance, event:Cy.EventObject) { + if (cy.$('edge:selected').length > 2 && event.cyTarget[0].selected()) { + cy.$(':selected').unselect(); + } else { + + let vl:Cy.CollectionNodes = event.cyTarget[0].target('.vl-node'); + let connectedEdges:Cy.CollectionEdges = vl.connectedEdges(); + if (vl.length && connectedEdges.length > 1) { + + setTimeout(() => { + vl.select(); + connectedEdges.select(); + }, 0); + } + } + + } + + + /** + * Calculates the position for the menu that modifies an existing link + * @param event + * @param elementWidth + * @param elementHeight + * @returns {Point} + */ + public calculateLinkMenuPosition(event, elementWidth, elementHeight):Point { + let point:Point = new Point(event.originalEvent.x, event.originalEvent.y); + if (event.originalEvent.view.screen.height - elementHeight < point.y) { + point.y = event.originalEvent.view.screen.height - elementHeight; + } + if (event.originalEvent.view.screen.width - elementWidth < point.x) { + point.x = event.originalEvent.view.screen.width - elementWidth; + } + return point; + }; + + + /** + * Gets the menu that is displayed when you click an existing link. + * @param link + * @param event + * @returns {LinkMenu} + */ + public getModifyLinkMenu(link:Cy.CollectionFirstEdge, event:Cy.EventObject):LinkMenu { + let point:Point = this.calculateLinkMenuPosition(event, GraphUIObjects.MENU_LINK_VL_WIDTH_OFFSET, GraphUIObjects.MENU_LINK_VL_HEIGHT_OFFSET); + let menu:LinkMenu = new LinkMenu(point, true, link); + return menu; + }; + +} + + +CompositionGraphLinkUtils.$inject = [ + 'LinksFactory', + 'LoaderService', + 'CompositionGraphGeneralUtils', + 'CommonGraphUtils', + 'MatchCapabilitiesRequirementsUtils' +]; diff --git a/catalog-ui/src/app/directives/graphs-v2/composition-graph/utils/composition-graph-nodes-utils.ts b/catalog-ui/src/app/directives/graphs-v2/composition-graph/utils/composition-graph-nodes-utils.ts new file mode 100644 index 0000000000..96afc8a4ea --- /dev/null +++ b/catalog-ui/src/app/directives/graphs-v2/composition-graph/utils/composition-graph-nodes-utils.ts @@ -0,0 +1,266 @@ +import {Component, NodesFactory, ComponentInstance, CompositionCiNodeVl,IAppMenu,AssetPopoverObj} from "app/models"; +import {EventListenerService, LoaderService} from "app/services"; +import {GRAPH_EVENTS,ModalsHandler,GraphUIObjects} from "app/utils"; +import {CompositionGraphGeneralUtils} from "./composition-graph-general-utils"; +import {CommonGraphUtils} from "../../common/common-graph-utils"; +/** + * Created by obarda on 11/9/2016. + */ +export class CompositionGraphNodesUtils { + constructor(private NodesFactory:NodesFactory, private $log:ng.ILogService, + private GeneralGraphUtils:CompositionGraphGeneralUtils, + private commonGraphUtils:CommonGraphUtils, + private eventListenerService:EventListenerService, + private loaderService:LoaderService /*, + private sdcMenu: IAppMenu, + private ModalsHandler: ModalsHandler*/) { + + } + + /** + * Returns component instances for all nodes passed in + * @param nodes - Cy nodes + * @returns {any[]} + */ + public getAllNodesData(nodes:Cy.CollectionNodes) { + return _.map(nodes, (node:Cy.CollectionFirstNode)=> { + return node.data(); + }) + }; + + /** + * Deletes component instances on server and then removes it from the graph as well + * @param cy + * @param component + * @param nodeToDelete + */ + public deleteNode(cy:Cy.Instance, component:Component, nodeToDelete:Cy.CollectionNodes):void { + + this.loaderService.showLoader('composition-graph'); + let onSuccess:(response:ComponentInstance) => void = (response:ComponentInstance) => { + console.info('onSuccess', response); + + //if node to delete is a UCPE, remove all children (except UCPE-CPs) and remove their "hostedOn" links + if (nodeToDelete.data().isUcpe) { + _.each(cy.nodes('[?isInsideGroup]'), (node)=> { + this.eventListenerService.notifyObservers(GRAPH_EVENTS.ON_REMOVE_NODE_FROM_UCPE, node, nodeToDelete); + }); + } + + //check whether the node is connected to any VLs that only have one other connection. If so, delete that VL as well + if (!(nodeToDelete.data() instanceof CompositionCiNodeVl)) { + let connectedVls:Array<Cy.CollectionFirstNode> = this.getConnectedVlToNode(nodeToDelete); + this.handleConnectedVlsToDelete(connectedVls); + } + + //update UI + cy.remove(nodeToDelete); + + }; + + let onFailed:(response:any) => void = (response:any) => { + console.info('onFailed', response); + }; + + + this.GeneralGraphUtils.getGraphUtilsServerUpdateQueue().addBlockingUIActionWithReleaseCallback( + () => component.deleteComponentInstance(nodeToDelete.data().componentInstance.uniqueId).then(onSuccess, onFailed), + () => this.loaderService.hideLoader('composition-graph') + ); + + }; + +/* + public confirmDeleteNode = (nodeId:string, cy:Cy.Instance, component:Component) => { + let node:Cy.CollectionNodes = cy.getElementById(nodeId); + let onOk = ():void => { + this.deleteNode(cy, component, node); + }; + + let componentInstance:ComponentInstance = node.data().componentInstance; + let state = "deleteInstance"; + let title:string = this.sdcMenu.alertMessages[state].title; + let message:string = this.sdcMenu.alertMessages[state].message.format([componentInstance.name]); + + this.ModalsHandler.openAlertModal(title, message).then(onOk); + };*/ + /** + * Finds all VLs connected to a single node + * @param node + * @returns {Array<Cy.CollectionFirstNode>} + */ + public getConnectedVlToNode = (node:Cy.CollectionNodes):Array<Cy.CollectionFirstNode> => { + let connectedVls:Array<Cy.CollectionFirstNode> = new Array<Cy.CollectionFirstNode>(); + _.forEach(node.connectedEdges().connectedNodes(), (node:Cy.CollectionFirstNode) => { + if (node.data() instanceof CompositionCiNodeVl) { + connectedVls.push(node); + } + }); + return connectedVls; + }; + + + /** + * Delete all VLs that have only two connected nodes (this function is called when deleting a node) + * @param connectedVls + */ + public handleConnectedVlsToDelete = (connectedVls:Array<Cy.CollectionFirstNode>) => { + _.forEach(connectedVls, (vlToDelete:Cy.CollectionNodes) => { + + if (vlToDelete.connectedEdges().length === 2) { // if vl connected only to 2 nodes need to delete the vl + this.eventListenerService.notifyObservers(GRAPH_EVENTS.ON_DELETE_COMPONENT_INSTANCE, vlToDelete.data().componentInstance); + } + }); + }; + + + /** + * This function is called when moving a node in or out of UCPE. + * Deletes all connected VLs that have less than 2 valid connections remaining after the move + * Returns the collection of vls that are in the process of deletion (async) to prevent duplicate calls while deletion is in progress + * @param component + * @param cy + * @param node - node that was moved in/out of ucpe + */ + public deleteNodeVLsUponMoveToOrFromUCPE = (component:Component, cy:Cy.Instance, node:Cy.CollectionNodes):Cy.CollectionNodes => { + if (node.data() instanceof CompositionCiNodeVl) { + return; + } + + let connectedVLsToDelete:Cy.CollectionNodes = cy.collection(); + _.forEach(node.neighborhood('node'), (connectedNode) => { + + //Find all neighboring nodes that are VLs + if (connectedNode.data() instanceof CompositionCiNodeVl) { + + //check VL's neighbors to see if it has 2 or more nodes whose location is compatible with VL (regardless of whether VL is in or out of UCPE) + let compatibleNodeCount = 0; + let vlNeighborhood = connectedNode.neighborhood('node'); + _.forEach(vlNeighborhood, (vlNeighborNode)=> { + if (this.commonGraphUtils.nodeLocationsCompatible(cy, connectedNode, vlNeighborNode)) { + compatibleNodeCount++; + } + }); + + if (compatibleNodeCount < 2) { + connectedVLsToDelete = connectedVLsToDelete.add(connectedNode); + } + } + }); + + connectedVLsToDelete.each((i, vlToDelete:Cy.CollectionNodes)=> { + this.deleteNode(cy, component, vlToDelete); + }); + return connectedVLsToDelete; + }; + + /** + * This function will update nodes position. if the new position is into or out of ucpe, the node will trigger the ucpe events + * @param cy + * @param component + * @param nodesMoved - the node/multiple nodes now moved by the user + */ + public onNodesPositionChanged = (cy:Cy.Instance, component:Component, nodesMoved:Cy.CollectionNodes):void => { + + if (nodesMoved.length === 0) { + return; + } + + let isValidMove:boolean = this.GeneralGraphUtils.isGroupValidDrop(cy, nodesMoved); + if (isValidMove) { + + this.$log.debug(`composition-graph::ValidDrop:: updating node position`); + let instancesToUpdateInNonBlockingAction:Array<ComponentInstance> = new Array<ComponentInstance>(); + + _.each(nodesMoved, (node:Cy.CollectionFirstNode)=> { //update all nodes new position + + if (node.data().isUcpePart && !node.data().isUcpe) { + return; + }//No need to update UCPE-CPs + + //update position + let newPosition:Cy.Position = this.commonGraphUtils.getNodePosition(node); + node.data().componentInstance.updatePosition(newPosition.x, newPosition.y); + + //check if node moved to or from UCPE + let ucpe = this.commonGraphUtils.isInUcpe(node.cy(), node.boundingbox()); + if (node.data().isInsideGroup || ucpe.length) { + this.handleUcpeChildMove(node, ucpe, instancesToUpdateInNonBlockingAction); + } else { + instancesToUpdateInNonBlockingAction.push(node.data().componentInstance); + } + + }); + + if (instancesToUpdateInNonBlockingAction.length > 0) { + this.GeneralGraphUtils.pushMultipleUpdateComponentInstancesRequestToQueue(false, instancesToUpdateInNonBlockingAction, component); + } + } else { + this.$log.debug(`composition-graph::notValidDrop:: node return to latest position`); + //reset nodes position + nodesMoved.positions((i, node) => { + return { + x: +node.data().componentInstance.posX, + y: +node.data().componentInstance.posY + }; + }) + } + + this.GeneralGraphUtils.getGraphUtilsServerUpdateQueue().addBlockingUIActionWithReleaseCallback(() => { + }, () => { + this.loaderService.hideLoader('composition-graph'); + }); + + }; + + /** + * Checks whether the node has been added or removed from UCPE and triggers appropriate events + * @param node - node moved + * @param ucpeContainer - UCPE container that the node has been moved to. When moving a node out of ucpe, param will be empty + * @param instancesToUpdateInNonBlockingAction + */ + public handleUcpeChildMove(node:Cy.CollectionFirstNode, ucpeContainer:Cy.CollectionElements, instancesToUpdateInNonBlockingAction:Array<ComponentInstance>) { + + if (node.data().isInsideGroup) { + if (ucpeContainer.length) { //moving node within UCPE. Simply update position + this.commonGraphUtils.updateUcpeChildPosition(<Cy.CollectionNodes>node, ucpeContainer); + instancesToUpdateInNonBlockingAction.push(node.data().componentInstance); + } else { //removing node from UCPE. Notify observers + this.eventListenerService.notifyObservers(GRAPH_EVENTS.ON_REMOVE_NODE_FROM_UCPE, node, ucpeContainer); + } + } else if (!node.data().isInsideGroup && ucpeContainer.length && !node.data().isUcpePart) { //adding node to UCPE + this.eventListenerService.notifyObservers(GRAPH_EVENTS.ON_INSERT_NODE_TO_UCPE, node, ucpeContainer, true); + } + } + /** + * Gets the position for the asset popover menu + * Then, check if right edge of menu would overlap horizontal screen edge (palette offset + canvas width - right panel) + * Then, check if bottom edge of menu would overlap the vertical end of the canvas. + * @param cy + * @param node + * @returns {Cy.Position} + + public createAssetPopover = (cy: Cy.Instance, node:Cy.CollectionFirstNode, isViewOnly:boolean):AssetPopoverObj => { + + let menuOffset:Cy.Position = { x: node.renderedWidth() / 2, y: -(node.renderedWidth() / 2) };// getNodePositionWithOffset returns central point of node. First add node.renderedWidth()/2 to get its to border. + let menuPosition:Cy.Position = this.commonGraphUtils.getNodePositionWithOffset(node, menuOffset); + let menuSide:string = 'right'; + + if(menuPosition.x + GraphUIObjects.COMPOSITION_NODE_MENU_WIDTH >= cy.width() + GraphUIObjects.DIAGRAM_PALETTE_WIDTH_OFFSET - GraphUIObjects.COMPOSITION_RIGHT_PANEL_OFFSET){ + menuPosition.x -= menuOffset.x * 2 + GraphUIObjects.COMPOSITION_NODE_MENU_WIDTH; //menu position already includes offset to the right. Therefore, subtract double offset so we have same distance from node for menu on left + menuSide = 'left'; + } + + if(menuPosition.y + GraphUIObjects.COMPOSITION_NODE_MENU_HEIGHT >= cy.height()){ + menuPosition.y = menuPosition.y - GraphUIObjects.COMPOSITION_NODE_MENU_HEIGHT - menuOffset.y * 2; + } + + return new AssetPopoverObj(node.data().id, node.data().name, menuPosition, menuSide, isViewOnly); + }; + */ + + } + + + CompositionGraphNodesUtils.$inject = ['NodesFactory', '$log', 'CompositionGraphGeneralUtils', 'CommonGraphUtils', 'EventListenerService', 'LoaderService' /*, 'sdcMenu', 'ModalsHandler'*/] + 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 new file mode 100644 index 0000000000..83bf747501 --- /dev/null +++ b/catalog-ui/src/app/directives/graphs-v2/composition-graph/utils/composition-graph-palette-utils.ts @@ -0,0 +1,163 @@ +import {EventListenerService, LoaderService} from "app/services"; +import {CapabilitiesGroup, NodesFactory, ComponentInstance, Component, CompositionCiNodeBase, RequirementsGroup} from "app/models"; +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 {LeftPaletteComponent} from "../../../../models/components/displayComponent"; + +export class CompositionGraphPaletteUtils { + + constructor(private ComponentFactory:ComponentFactory, + private $filter:ng.IFilterService, + private loaderService:LoaderService, + private generalGraphUtils:CompositionGraphGeneralUtils, + private componentInstanceFactory:ComponentInstanceFactory, + private nodesFactory:NodesFactory, + private commonGraphUtils:CommonGraphUtils, + private eventListenerService:EventListenerService) { + } + + /** + * Calculate the dragged element (html element) position on canvas + * @param cy + * @param event + * @param position + * @returns {Cy.BoundingBox} + * @private + */ + private _getNodeBBox(cy:Cy.Instance, event:IDragDropEvent, position?:Cy.Position) { + let bbox = <Cy.BoundingBox>{}; + if (!position) { + position = this.commonGraphUtils.getCytoscapeNodePosition(cy, event); + } + let cushionWidth:number = 40; + let cushionHeight:number = 40; + + bbox.x1 = position.x - cushionWidth / 2; + bbox.y1 = position.y - cushionHeight / 2; + bbox.x2 = position.x + cushionWidth / 2; + bbox.y2 = position.y + cushionHeight / 2; + return bbox; + } + + /** + * Create the component instance, update data from parent component in the left palette and notify on_insert_to_ucpe if component was dragg into ucpe + * @param cy + * @param fullComponent + * @param event + * @param component + */ + private _createComponentInstanceOnGraphFromPaletteComponent(cy:Cy.Instance, fullComponent:LeftPaletteComponent, event:IDragDropEvent, component:Component) { + + let componentInstanceToCreate:ComponentInstance = this.componentInstanceFactory.createComponentInstanceFromComponent(fullComponent); + let cytoscapePosition:Cy.Position = this.commonGraphUtils.getCytoscapeNodePosition(cy, event); + + componentInstanceToCreate.posX = cytoscapePosition.x; + componentInstanceToCreate.posY = cytoscapePosition.y; + + + let onFailedCreatingInstance:(error:any) => void = (error:any) => { + this.loaderService.hideLoader('composition-graph'); + }; + + //on success - update node data + let onSuccessCreatingInstance = (createInstance:ComponentInstance):void => { + + this.loaderService.hideLoader('composition-graph'); + + createInstance.name = this.$filter('resourceName')(createInstance.name); + createInstance.requirements = new RequirementsGroup(createInstance.requirements); + createInstance.capabilities = new CapabilitiesGroup(createInstance.capabilities); + createInstance.componentVersion = fullComponent.version; + createInstance.icon = fullComponent.icon; + createInstance.setInstanceRC(); + + let newNode:CompositionCiNodeBase = this.nodesFactory.createNode(createInstance); + let cyNode:Cy.CollectionNodes = this.commonGraphUtils.addComponentInstanceNodeToGraph(cy, newNode); + + //check if node was dropped into a UCPE + let ucpe:Cy.CollectionElements = this.commonGraphUtils.isInUcpe(cy, cyNode.boundingbox()); + if (ucpe.length > 0) { + this.eventListenerService.notifyObservers(GRAPH_EVENTS.ON_INSERT_NODE_TO_UCPE, cyNode, ucpe, false); + } + this.eventListenerService.notifyObservers(GRAPH_EVENTS.ON_CREATE_COMPONENT_INSTANCE); + + }; + + this.loaderService.showLoader('composition-graph'); + + // Create the component instance on server + this.generalGraphUtils.getGraphUtilsServerUpdateQueue().addBlockingUIAction(() => { + component.createComponentInstance(componentInstanceToCreate).then(onSuccessCreatingInstance, onFailedCreatingInstance); + }); + } + + /** + * Thid function applay red/green background when component dragged from palette + * @param cy + * @param event + * @param dragElement + * @param dragComponent + */ + public onComponentDrag(cy:Cy.Instance, event:IDragDropEvent, dragElement:JQuery, dragComponent:ComponentInstance) { + + if (event.clientX < GraphUIObjects.DIAGRAM_PALETTE_WIDTH_OFFSET || event.clientY < GraphUIObjects.DIAGRAM_HEADER_OFFSET) { //hovering over palette. Dont bother computing validity of drop + dragElement.removeClass('red'); + return; + } + + let offsetPosition = { + x: event.clientX - GraphUIObjects.DIAGRAM_PALETTE_WIDTH_OFFSET, + y: event.clientY - GraphUIObjects.DIAGRAM_HEADER_OFFSET + }; + let bbox = this._getNodeBBox(cy, event, offsetPosition); + + if (this.generalGraphUtils.isPaletteDropValid(cy, bbox, dragComponent)) { + dragElement.removeClass('red'); + } else { + dragElement.addClass('red'); + } + } + + /** + * This function is called when after dropping node on canvas + * Check if the capability & requirements fulfilled and if not get from server + * @param cy + * @param event + * @param component + */ + public addNodeFromPalette(cy:Cy.Instance, event:IDragDropEvent, component:Component) { + this.loaderService.showLoader('composition-graph'); + + let draggedComponent:LeftPaletteComponent = event.dataTransfer.component; + + if (this.generalGraphUtils.componentRequirementsAndCapabilitiesCaching.containsKey(draggedComponent.uniqueId)) { + let fullComponent = this.generalGraphUtils.componentRequirementsAndCapabilitiesCaching.getValue(draggedComponent.uniqueId); + draggedComponent.capabilities = fullComponent.capabilities; + draggedComponent.requirements = fullComponent.requirements; + this._createComponentInstanceOnGraphFromPaletteComponent(cy, draggedComponent, event, component); + + } else { + + this.ComponentFactory.getComponentFromServer(draggedComponent.getComponentSubType(), draggedComponent.uniqueId) + .then((fullComponent:Component) => { + draggedComponent.capabilities = fullComponent.capabilities; + draggedComponent.requirements = fullComponent.requirements; + this._createComponentInstanceOnGraphFromPaletteComponent(cy, draggedComponent, event, component); + }); + } + } +} + + +CompositionGraphPaletteUtils.$inject = [ + 'ComponentFactory', + '$filter', + 'LoaderService', + 'CompositionGraphGeneralUtils', + 'ComponentInstanceFactory', + 'NodesFactory', + 'CommonGraphUtils', + 'EventListenerService' +]; diff --git a/catalog-ui/src/app/directives/graphs-v2/composition-graph/utils/match-capability-requierment-utils.ts b/catalog-ui/src/app/directives/graphs-v2/composition-graph/utils/match-capability-requierment-utils.ts new file mode 100644 index 0000000000..0e21f033be --- /dev/null +++ b/catalog-ui/src/app/directives/graphs-v2/composition-graph/utils/match-capability-requierment-utils.ts @@ -0,0 +1,259 @@ +import {Requirement, CompositionCiLinkBase, ComponentInstance, CapabilitiesGroup, RequirementsGroup, MatchReqToCapability, MatchBase, + MatchReqToReq,CompositionCiNodeBase, Component, Capability} from "app/models"; +/** + * Created by obarda on 1/1/2017. + */ + +export class MatchCapabilitiesRequirementsUtils { + + constructor() { + } + + public static linkable(requirement1:Requirement, requirement2:Requirement, vlCapability:Capability):boolean { + return MatchCapabilitiesRequirementsUtils.isMatch(requirement1, vlCapability) && MatchCapabilitiesRequirementsUtils.isMatch(requirement2, vlCapability); + }; + + + /** + * Shows + icon in corner of each node passed in + * @param filteredNodesData + * @param cy + */ + public highlightMatchingComponents(filteredNodesData, cy:Cy.Instance) { + _.each(filteredNodesData, (data:any) => { + let node = cy.getElementById(data.id); + cy.emit('showhandle', [node]); + }); + } + + /** + * Adds opacity to each node that cannot be linked to hovered node + * @param filteredNodesData + * @param nodesData + * @param cy + * @param hoveredNodeData + */ + public fadeNonMachingComponents(filteredNodesData, nodesData, cy:Cy.Instance, hoveredNodeData?) { + let fadeNodes = _.xorWith(nodesData, filteredNodesData, (node1, node2) => { + return node1.id === node2.id; + }); + if (hoveredNodeData) { + _.remove(fadeNodes, hoveredNodeData); + } + cy.batch(()=> { + _.each(fadeNodes, (node) => { + cy.getElementById(node.id).style({'background-image-opacity': 0.4}); + }); + }) + } + + /** + * Resets all nodes to regular opacity + * @param cy + */ + public resetFadedNodes(cy:Cy.Instance) { + cy.batch(()=> { + cy.nodes().style({'background-image-opacity': 1}); + }) + } + + // -------------------------------------------ALL FUNCTIONS NEED REFACTORING---------------------------------------------------------------// + + private static requirementFulfilled(fromNodeId:string, requirement:any, links:Array<CompositionCiLinkBase>):boolean { + return _.some(links, { + 'relation': { + 'fromNode': fromNodeId, + 'relationships': [{ + 'requirementOwnerId': requirement.ownerId, + 'requirement': requirement.name, + 'relationship': { + 'type': requirement.relationship + } + } + ] + } + }); + }; + + private static isMatch(requirement:Requirement, capability:Capability):boolean { + if (capability.type === requirement.capability) { + if (requirement.node) { + if (_.includes(capability.capabilitySources, requirement.node)) { + return true; + } + } else { + return true; + } + } + return false; + }; + + private getFromToMatches(requirements1:RequirementsGroup, + requirements2:RequirementsGroup, + capabilities:CapabilitiesGroup, + links:Array<CompositionCiLinkBase>, + fromId:string, + toId:string, + vlCapability?:Capability):Array<MatchBase> { + let matches:Array<MatchBase> = new Array<MatchBase>(); + _.forEach(requirements1, (requirementValue:Array<Requirement>, key) => { + _.forEach(requirementValue, (requirement:Requirement) => { + if (requirement.name !== "dependency" && !MatchCapabilitiesRequirementsUtils.requirementFulfilled(fromId, requirement, links)) { + _.forEach(capabilities, (capabilityValue:Array<Capability>, key) => { + _.forEach(capabilityValue, (capability:Capability) => { + if (MatchCapabilitiesRequirementsUtils.isMatch(requirement, capability)) { + let match:MatchReqToCapability = new MatchReqToCapability(requirement, capability, true, fromId, toId); + matches.push(match); + } + }); + }); + if (vlCapability) { + _.forEach(requirements2, (requirement2Value:Array<Requirement>, key) => { + _.forEach(requirement2Value, (requirement2:Requirement) => { + if (!MatchCapabilitiesRequirementsUtils.requirementFulfilled(toId, requirement2, links) && MatchCapabilitiesRequirementsUtils.linkable(requirement, requirement2, vlCapability)) { + let match:MatchReqToReq = new MatchReqToReq(requirement, requirement2, true, fromId, toId); + matches.push(match); + } + }); + }); + } + } + }); + }); + return matches; + } + + private getToFromMatches(requirements:RequirementsGroup, capabilities:CapabilitiesGroup, links:Array<CompositionCiLinkBase>, fromId:string, toId:string):Array<MatchReqToCapability> { + let matches:Array<MatchReqToCapability> = []; + _.forEach(requirements, (requirementValue:Array<Requirement>, key) => { + _.forEach(requirementValue, (requirement:Requirement) => { + if (requirement.name !== "dependency" && !MatchCapabilitiesRequirementsUtils.requirementFulfilled(toId, requirement, links)) { + _.forEach(capabilities, (capabilityValue:Array<Capability>, key) => { + _.forEach(capabilityValue, (capability:Capability) => { + if (MatchCapabilitiesRequirementsUtils.isMatch(requirement, capability)) { + let match:MatchReqToCapability = new MatchReqToCapability(requirement, capability, false, toId, fromId); + matches.push(match); + } + }); + }); + } + }); + }); + return matches; + } + + public getMatchedRequirementsCapabilities(fromComponentInstance:ComponentInstance, + toComponentInstance:ComponentInstance, + links:Array<CompositionCiLinkBase>, + vl?:Component):Array<MatchBase> {//TODO allow for VL array + let linkCapability; + if (vl) { + let linkCapabilities:Array<Capability> = vl.capabilities.findValueByKey('linkable'); + if (linkCapabilities) { + linkCapability = linkCapabilities[0]; + } + } + let fromToMatches:Array<MatchBase> = this.getFromToMatches(fromComponentInstance.requirements, + toComponentInstance.requirements, + toComponentInstance.capabilities, + links, + fromComponentInstance.uniqueId, + toComponentInstance.uniqueId, + linkCapability); + let toFromMatches:Array<MatchReqToCapability> = this.getToFromMatches(toComponentInstance.requirements, + fromComponentInstance.capabilities, + links, + fromComponentInstance.uniqueId, + toComponentInstance.uniqueId); + + return fromToMatches.concat(toFromMatches); + } + + + /** + * Step I: Check if capabilities of component match requirements of nodeDataArray + * 1. Get component capabilities and loop on each capability + * 2. Inside the loop, perform another loop on all nodeDataArray, and fetch the requirements for each one + * 3. Loop on the requirements, and verify match (see in code the rules) + * + * Step II: Check if requirements of component match capabilities of nodeDataArray + * 1. Get component requirements and loop on each requirement + * 2. + * + * @param component - this is the hovered resource of the left panel of composition screen + * @param nodeDataArray - Array of resource instances that are on the canvas + * @param links -getMatchedRequirementsCapabilities + * @param vl - + * @returns {any[]|T[]} + */ + public findByMatchingCapabilitiesToRequirements(component:Component, + nodeDataArray:Array<CompositionCiNodeBase>, + links:Array<CompositionCiLinkBase>, + vl?:Component):Array<any> {//TODO allow for VL array + let res = []; + + // STEP I + { + let capabilities:any = component.capabilities; + _.forEach(capabilities, (capabilityValue:Array<any>, capabilityKey)=> { + _.forEach(capabilityValue, (capability)=> { + _.forEach(nodeDataArray, (node:CompositionCiNodeBase)=> { + if (node && node.componentInstance) { + let requirements:any = node.componentInstance.requirements; + let fromNodeId:string = node.componentInstance.uniqueId; + _.forEach(requirements, (requirementValue:Array<any>, requirementKey)=> { + _.forEach(requirementValue, (requirement)=> { + if (requirement.name !== "dependency" && MatchCapabilitiesRequirementsUtils.isMatch(requirement, capability) + && !MatchCapabilitiesRequirementsUtils.requirementFulfilled(fromNodeId, requirement, links)) { + res.push(node); + } + }); + }); + } + }); + }); + }); + } + + // STEP II + { + let requirements:any = component.requirements; + let fromNodeId:string = component.uniqueId; + let linkCapability:Array<Capability> = vl ? vl.capabilities.findValueByKey('linkable') : undefined; + + _.forEach(requirements, (requirementValue:Array<any>, requirementKey)=> { + _.forEach(requirementValue, (requirement)=> { + if (requirement.name !== "dependency" && !MatchCapabilitiesRequirementsUtils.requirementFulfilled(fromNodeId, requirement, links)) { + _.forEach(nodeDataArray, (node:any)=> { + if (node && node.componentInstance && node.category !== 'groupCp') { + let capabilities:any = node.componentInstance.capabilities; + _.forEach(capabilities, (capabilityValue:Array<any>, capabilityKey)=> { + _.forEach(capabilityValue, (capability)=> { + if (MatchCapabilitiesRequirementsUtils.isMatch(requirement, capability)) { + res.push(node); + } + }); + }); + if (linkCapability) { + let linkRequirements = node.componentInstance.requirements; + _.forEach(linkRequirements, (value:Array<any>, key)=> { + _.forEach(value, (linkRequirement)=> { + if (!MatchCapabilitiesRequirementsUtils.requirementFulfilled(node.componentInstance.uniqueId, linkRequirement, links) + && MatchCapabilitiesRequirementsUtils.linkable(requirement, linkRequirement, linkCapability[0])) { + res.push(node); + } + }); + }); + } + } + }); + } + }); + }); + } + + return _.uniq(res); + }; +} + +MatchCapabilitiesRequirementsUtils.$inject = []; 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 new file mode 100644 index 0000000000..5ad6570013 --- /dev/null +++ b/catalog-ui/src/app/directives/graphs-v2/deployment-graph/deployment-graph.directive.ts @@ -0,0 +1,122 @@ +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'; + +interface IDeploymentGraphScope extends ng.IScope { + component:Component; +} + +export class DeploymentGraph implements ng.IDirective { + private _cy:Cy.Instance; + + constructor(private NodesFactory:NodesFactory, private commonGraphUtils:CommonGraphUtils, + private deploymentGraphGeneralUtils:DeploymentGraphGeneralUtils, private ComponentInstanceFactory:ComponentInstanceFactory, private eventListenerService:EventListenerService) { + } + + restrict = 'E'; + template = require('./deployment-graph.html'); + scope = { + component: '=', + isViewOnly: '=' + }; + + link = (scope:IDeploymentGraphScope, el:JQuery) => { + + if (scope.component.isResource()) { + if (scope.component.componentInstances && scope.component.componentInstancesRelations && scope.component.groups) { + this.loadGraph(scope, el); + } else { + this.eventListenerService.registerObserverCallback(GRAPH_EVENTS.ON_DEPLOYMENT_GRAPH_DATA_LOADED, () => { + this.loadGraph(scope, el); + }); + } + } + }; + + + public initGraphNodes = (cy:Cy.Instance, component:Component):void => { + if (component.groups) { // Init module nodes + _.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 + 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 + this.commonGraphUtils.addComponentInstanceNodeToGraph(cy, componentInstanceNode); + } + }); + + // 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) => { + if (!moduleNode.isParent()) { + let dummyInstance = this.ComponentInstanceFactory.createEmptyComponentInstance(); + let componentInstanceNode = this.NodesFactory.createNode(dummyInstance); + componentInstanceNode.parent = moduleNode.id(); + let dummyNode = this.commonGraphUtils.addNodeToGraph(cy, componentInstanceNode, moduleNode.position()); + dummyNode.addClass('dummy-node'); + } + }) + }; + + private registerGraphEvents() { + + this._cy.on('afterExpand', (event) => { + event.cyTarget.qtip({}); + }); + + this._cy.on('afterCollapse', (event) => { + this.commonGraphUtils.initNodeTooltip(event.cyTarget); + }); + } + + private loadGraph = (scope:IDeploymentGraphScope, el:JQuery) => { + + let graphEl = el.find('.sdc-deployment-graph-wrapper'); + this._cy = cytoscape({ + container: graphEl, + style: ComponentInstanceNodesStyle.getCompositionGraphStyle().concat(ModulesNodesStyle.getModuleGraphStyle()), + zoomingEnabled: false, + selectionType: 'single', + + }); + + //adding expand collapse extension + this._cy.expandCollapse({ + layoutBy: { + name: "grid", + animate: true, + randomize: false, + fit: true + }, + fisheye: false, + undoable: false, + expandCollapseCueSize: 18, + expandCueImage: '/assets/styles/images/resource-icons/' + 'closeModule.png', + collapseCueImage: '/assets/styles/images/resource-icons/' + 'openModule.png', + expandCollapseCueSensitivity: 2, + cueOffset: -20 + }); + + this.initGraphNodes(this._cy, scope.component); //creating instances nodes + this.commonGraphUtils.initGraphLinks(this._cy, scope.component.componentInstancesRelations); + this._cy.collapseAll(); + this.registerGraphEvents(); + }; + + public static factory = (NodesFactory:NodesFactory, CommonGraphUtils:CommonGraphUtils, DeploymentGraphGeneralUtils:DeploymentGraphGeneralUtils, ComponentInstanceFactory:ComponentInstanceFactory, EventListenerService:EventListenerService) => { + return new DeploymentGraph(NodesFactory, CommonGraphUtils, DeploymentGraphGeneralUtils, ComponentInstanceFactory, EventListenerService) + } +} + +DeploymentGraph.factory.$inject = ['NodesFactory', 'CommonGraphUtils', 'DeploymentGraphGeneralUtils', 'ComponentInstanceFactory', 'EventListenerService']; diff --git a/catalog-ui/src/app/directives/graphs-v2/deployment-graph/deployment-graph.html b/catalog-ui/src/app/directives/graphs-v2/deployment-graph/deployment-graph.html new file mode 100644 index 0000000000..56c2d8b200 --- /dev/null +++ b/catalog-ui/src/app/directives/graphs-v2/deployment-graph/deployment-graph.html @@ -0,0 +1,2 @@ +<div class="sdc-deployment-graph-wrapper" ng-class="{'view-only':isViewOnly}"> +</div> diff --git a/catalog-ui/src/app/directives/graphs-v2/deployment-graph/deployment-graph.less b/catalog-ui/src/app/directives/graphs-v2/deployment-graph/deployment-graph.less new file mode 100644 index 0000000000..f83ee8a891 --- /dev/null +++ b/catalog-ui/src/app/directives/graphs-v2/deployment-graph/deployment-graph.less @@ -0,0 +1,14 @@ +deployment-graph { + display: block; + height:100%; + width: 100%; + + .sdc-deployment-graph-wrapper { + height:100%; + width: 100%; + } + + .view-only{ + background-color:rgb(248, 248, 248); + } +} diff --git a/catalog-ui/src/app/directives/graphs-v2/deployment-graph/deployment-utils/deployment-graph-general-utils.ts b/catalog-ui/src/app/directives/graphs-v2/deployment-graph/deployment-utils/deployment-graph-general-utils.ts new file mode 100644 index 0000000000..368455cb24 --- /dev/null +++ b/catalog-ui/src/app/directives/graphs-v2/deployment-graph/deployment-utils/deployment-graph-general-utils.ts @@ -0,0 +1,22 @@ +import {Module} from "app/models"; +/** + * Created by obarda on 12/21/2016. + */ + +export class DeploymentGraphGeneralUtils { + + constructor() { + + } + + public findInstanceModule = (groupsArray:Array<Module>, componentInstanceId:string):string => { + let parentGroup:Module = _.find(groupsArray, (group:Module) => { + return _.find(group.members, (member) => { + return member === componentInstanceId; + }); + }); + return parentGroup ? parentGroup.uniqueId : ""; + }; +} + +DeploymentGraphGeneralUtils.$inject = []; diff --git a/catalog-ui/src/app/directives/graphs-v2/image-creator/image-creator.service.ts b/catalog-ui/src/app/directives/graphs-v2/image-creator/image-creator.service.ts new file mode 100644 index 0000000000..1bafb2f32b --- /dev/null +++ b/catalog-ui/src/app/directives/graphs-v2/image-creator/image-creator.service.ts @@ -0,0 +1,45 @@ +'use strict'; +export class ImageCreatorService { + static '$inject' = ['$q']; + private _canvas:HTMLCanvasElement; + + constructor(private $q:ng.IQService) { + this._canvas = <HTMLCanvasElement>$('<canvas>')[0]; + this._canvas.setAttribute('style', 'display:none'); + + let body = document.getElementsByTagName('body')[0]; + body.appendChild(this._canvas); + } + + getImageBase64(imageBaseUri:string, imageLayerUri:string):ng.IPromise<string> { + let deferred = this.$q.defer(); + let imageBase = new Image(); + let imageLayer = new Image(); + let imagesLoaded = 0; + let onImageLoaded = () => { + imagesLoaded++; + + if (imagesLoaded < 2) { + return; + } + this._canvas.setAttribute('width', imageBase.width.toString()); + this._canvas.setAttribute('height', imageBase.height.toString()); + + let canvasCtx = this._canvas.getContext('2d'); + canvasCtx.clearRect(0, 0, this._canvas.width, this._canvas.height); + + canvasCtx.drawImage(imageBase, 0, 0, imageBase.width, imageBase.height); + canvasCtx.drawImage(imageLayer, imageBase.width - imageLayer.width, 0, imageLayer.width, imageLayer.height); + + let base64Image = this._canvas.toDataURL(); + deferred.resolve(base64Image); + }; + + imageBase.onload = onImageLoaded; + imageLayer.onload = onImageLoaded; + imageBase.src = imageBaseUri; + imageLayer.src = imageLayerUri; + + return deferred.promise; + } +} diff --git a/catalog-ui/src/app/directives/graphs-v2/palette/interfaces/i-dragdrop-event.d.ts b/catalog-ui/src/app/directives/graphs-v2/palette/interfaces/i-dragdrop-event.d.ts new file mode 100644 index 0000000000..26c042611c --- /dev/null +++ b/catalog-ui/src/app/directives/graphs-v2/palette/interfaces/i-dragdrop-event.d.ts @@ -0,0 +1,7 @@ +interface IDragDropEvent extends JQueryEventObject { + dataTransfer: any; + toElement: { + naturalWidth: number; + naturalHeight: number; + } +}
\ No newline at end of file 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 new file mode 100644 index 0000000000..4bfbe5270e --- /dev/null +++ b/catalog-ui/src/app/directives/graphs-v2/palette/palette.directive.ts @@ -0,0 +1,349 @@ +import { + Component, + IAppMenu, + LeftPanelModel, + NodesFactory, + LeftPaletteComponent, + CompositionCiNodeBase, + ComponentInstance +} from "app/models"; +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 {LeftPaletteLoaderService} from "../../../services/components/utils/composition-left-palette-service"; + +interface IPaletteScope { + components:Array<LeftPaletteComponent>; + currentComponent:Component; + model:any; + displaySortedCategories:any; + expandedSection:string; + dragElement:JQuery; + dragbleNode:{ + event:JQueryEventObject, + components:LeftPaletteComponent, + ui:any + } + + sectionClick:(section:string)=>void; + searchComponents:(searchText:string)=>void; + onMouseOver:(displayComponent:LeftPaletteComponent)=>void; + onMouseOut:(displayComponent:LeftPaletteComponent)=>void; + dragStartCallback:(event:JQueryEventObject, ui, displayComponent:LeftPaletteComponent)=>void; + dragStopCallback:()=>void; + onDragCallback:(event:JQueryEventObject) => void; + + setElementTemplate:(e:JQueryEventObject)=>void; + + isOnDrag:boolean; + isDragable:boolean; + isLoading:boolean; + isViewOnly:boolean; +} + +export class Palette implements ng.IDirective { + constructor(private $log:ng.ILogService, + private LeftPaletteLoaderService: LeftPaletteLoaderService, + private sdcConfig, + private ComponentFactory, + private ComponentInstanceFactory:ComponentInstanceFactory, + private NodesFactory:NodesFactory, + private CompositionGraphGeneralUtils:CompositionGraphGeneralUtils, + private EventListenerService:EventListenerService, + private sdcMenu:IAppMenu, + private ModalsHandler:ModalsHandler) { + + } + + private fetchingComponentFromServer:boolean = false; + private nodeHtmlSubstitute:JQuery; + + scope = { + currentComponent: '=', + isViewOnly: '=', + isLoading: '=' + }; + restrict = 'E'; + template = require('./palette.html'); + + link = (scope:IPaletteScope, el:JQuery) => { + this.nodeHtmlSubstitute = $('<div class="node-substitute"><span></span><img /></div>'); + el.append(this.nodeHtmlSubstitute); + this.registerEventListenerForLeftPalette(scope); + // this.LeftPaletteLoaderService.loadLeftPanel(scope.currentComponent.componentType); + + this.initComponents(scope); + this.initEvents(scope); + this.initDragEvents(scope); + this._initExpandedSection(scope, ''); + el.on('$destroy', ()=> { + //remove listener of download event + this.unRegisterEventListenerForLeftPalette(scope); + }); + }; + + private registerEventListenerForLeftPalette = (scope:IPaletteScope):void => { + if (scope.currentComponent.isResource()) { + this.EventListenerService.registerObserverCallback(EVENTS.RESOURCE_LEFT_PALETTE_UPDATE_EVENT, () => { + this.updateLeftPanelDisplay(scope); + }); + } + if (scope.currentComponent.isService()) { + this.EventListenerService.registerObserverCallback(EVENTS.SERVICE_LEFT_PALETTE_UPDATE_EVENT, () => { + this.updateLeftPanelDisplay(scope); + }); + } + if (scope.currentComponent.isProduct()) { + this.EventListenerService.registerObserverCallback(EVENTS.PRODUCT_LEFT_PALETTE_UPDATE_EVENT, () => { + this.updateLeftPanelDisplay(scope); + }); + } + }; + + private unRegisterEventListenerForLeftPalette = (scope:IPaletteScope):void => { + if (scope.currentComponent.isResource()) { + this.EventListenerService.unRegisterObserver(EVENTS.RESOURCE_LEFT_PALETTE_UPDATE_EVENT); + } + if (scope.currentComponent.isService()) { + this.EventListenerService.unRegisterObserver(EVENTS.SERVICE_LEFT_PALETTE_UPDATE_EVENT); + } + if (scope.currentComponent.isProduct()) { + this.EventListenerService.unRegisterObserver(EVENTS.PRODUCT_LEFT_PALETTE_UPDATE_EVENT); + } + }; + + private leftPanelResourceFilter(resourcesNotAbstract:Array<LeftPaletteComponent>, resourceFilterTypes:Array<string>):Array<LeftPaletteComponent> { + let filterResources = _.filter(resourcesNotAbstract, (component) => { + return resourceFilterTypes.indexOf(component.getComponentSubType()) > -1; + }); + return filterResources; + } + + private initLeftPanel(leftPanelComponents:Array<LeftPaletteComponent>, resourceFilterTypes:Array<string>):LeftPanelModel { + let leftPanelModel = new LeftPanelModel(); + + if (resourceFilterTypes && resourceFilterTypes.length) { + leftPanelComponents = this.leftPanelResourceFilter(leftPanelComponents, resourceFilterTypes); + } + leftPanelModel.numberOfElements = leftPanelComponents && leftPanelComponents.length || 0; + + if (leftPanelComponents && leftPanelComponents.length) { + + let categories:any = _.groupBy(leftPanelComponents, 'mainCategory'); + for (let category in categories) + categories[category] = _.groupBy(categories[category], 'subCategory'); + + leftPanelModel.sortedCategories = categories; + } + return leftPanelModel; + } + + + private initEvents(scope:IPaletteScope) { + /** + * + * @param section + */ + scope.sectionClick = (section:string) => { + if (section === scope.expandedSection) { + scope.expandedSection = ''; + return; + } + scope.expandedSection = section; + }; + + scope.onMouseOver = (displayComponent:LeftPaletteComponent) => { + if (scope.isOnDrag) { + return; + } + scope.isOnDrag = true; + + this.EventListenerService.notifyObservers(GRAPH_EVENTS.ON_PALETTE_COMPONENT_HOVER_IN, displayComponent); + this.$log.debug('palette::onMouseOver:: fired'); + // + // if (this.CompositionGraphGeneralUtils.componentRequirementsAndCapabilitiesCaching.containsKey(displayComponent.uniqueId)) { + // this.$log.debug(`palette::onMouseOver:: component id ${displayComponent.uniqueId} found in cache`); + // let cacheComponent:Component = this.CompositionGraphGeneralUtils.componentRequirementsAndCapabilitiesCaching.getValue(displayComponent.uniqueId); + // + // //TODO: Danny: fire event to highlight matching nodes + // //showMatchingNodes(cacheComponent); + // return; + // } + // + // this.$log.debug(`palette::onMouseOver:: component id ${displayComponent.uniqueId} not found in cache, initiating server get`); + // // This will bring the component from the server including requirements and capabilities + // // Check that we do not fetch many times, because only in the success we add the component to componentRequirementsAndCapabilitiesCaching + // if (this.fetchingComponentFromServer) { + // return; + // } + // + // this.fetchingComponentFromServer = true; + // this.ComponentFactory.getComponentFromServer(displayComponent.componentSubType, displayComponent.uniqueId) + // .then((component:Component) => { + // this.$log.debug(`palette::onMouseOver:: component id ${displayComponent.uniqueId} fetch success`); + // // this.LeftPaletteLoaderService.updateSpecificComponentLeftPalette(component, scope.currentComponent.componentType); + // this.CompositionGraphGeneralUtils.componentRequirementsAndCapabilitiesCaching.setValue(component.uniqueId, component); + // this.fetchingComponentFromServer = false; + // + // //TODO: Danny: fire event to highlight matching nodes + // //showMatchingNodes(component); + // }) + // .catch(() => { + // this.$log.debug('palette::onMouseOver:: component id fetch error'); + // this.fetchingComponentFromServer = false; + // }); + + + }; + + scope.onMouseOut = () => { + scope.isOnDrag = false; + this.EventListenerService.notifyObservers(GRAPH_EVENTS.ON_PALETTE_COMPONENT_HOVER_OUT); + } + } + + private initComponents(scope:IPaletteScope) { + scope.searchComponents = (searchText:any):void => { + scope.displaySortedCategories = this._searchComponents(searchText, scope.model.sortedCategories); + this._initExpandedSection(scope, searchText); + }; + + scope.isDragable = scope.currentComponent.isComplex(); + this.updateLeftPanelDisplay(scope); + } + + private updateLeftPanelDisplay(scope:IPaletteScope) { + let entityType:string = scope.currentComponent.componentType.toLowerCase(); + let resourceFilterTypes:Array<string> = this.sdcConfig.resourceTypesFilter[entityType]; + scope.components = this.LeftPaletteLoaderService.getLeftPanelComponentsForDisplay(scope.currentComponent.componentType); + scope.model = this.initLeftPanel(scope.components, resourceFilterTypes); + scope.displaySortedCategories = angular.copy(scope.model.sortedCategories); + }; + + private _initExpandedSection(scope:IPaletteScope, searchText:string):void { + if (searchText == '') { + let isContainingCategory:boolean = false; + let categoryToExpand:string; + if (scope.currentComponent && scope.currentComponent.categories && scope.currentComponent.categories[0]) { + categoryToExpand = this.sdcMenu.categoriesDictionary[scope.currentComponent.categories[0].name]; + for (let category in scope.model.sortedCategories) { + if (categoryToExpand == category) { + isContainingCategory = true; + break; + } + } + } + isContainingCategory ? scope.expandedSection = categoryToExpand : scope.expandedSection = 'Generic'; + } + else { + scope.expandedSection = Object.keys(scope.displaySortedCategories).sort()[0]; + } + }; + + private initDragEvents(scope:IPaletteScope) { + scope.dragStartCallback = (event:IDragDropEvent, ui, displayComponent:LeftPaletteComponent):void => { + if (scope.isLoading || !scope.isDragable || scope.isViewOnly) { + return; + } + + let component = _.find(this.LeftPaletteLoaderService.getLeftPanelComponentsForDisplay(scope.currentComponent.componentType), (componentFullData:LeftPaletteComponent) => { + return displayComponent.uniqueId === componentFullData.uniqueId; + }); + this.EventListenerService.notifyObservers(GRAPH_EVENTS.ON_PALETTE_COMPONENT_DRAG_START, scope.dragElement, component); + + scope.isOnDrag = true; + + // this.graphUtils.showMatchingNodes(component, myDiagram, scope.sdcConfig.imagesPath); + // document.addEventListener('mousemove', moveOnDocument); + event.dataTransfer.component = component; + }; + + scope.dragStopCallback = () => { + scope.isOnDrag = false; + }; + + scope.onDragCallback = (event:IDragDropEvent):void => { + this.EventListenerService.notifyObservers(GRAPH_EVENTS.ON_PALETTE_COMPONENT_DRAG_ACTION, event); + }; + scope.setElementTemplate = (e) => { + let dragComponent:LeftPaletteComponent = _.find(this.LeftPaletteLoaderService.getLeftPanelComponentsForDisplay(scope.currentComponent.componentType), + (fullComponent:LeftPaletteComponent) => { + return (<any>angular.element(e.currentTarget).scope()).component.uniqueId === fullComponent.uniqueId; + }); + let componentInstance:ComponentInstance = this.ComponentInstanceFactory.createComponentInstanceFromComponent(dragComponent); + let node:CompositionCiNodeBase = this.NodesFactory.createNode(componentInstance); + + // myDiagram.dragFromPalette = node; + this.nodeHtmlSubstitute.find("img").attr('src', node.img); + scope.dragElement = this.nodeHtmlSubstitute.clone().show(); + + return scope.dragElement; + }; + } + + private _searchComponents = (searchText:string, categories:any):void => { + let displaySortedCategories = angular.copy(categories); + if (searchText != '') { + angular.forEach(categories, function (category:any, categoryKey) { + + angular.forEach(category, function (subcategory:Array<LeftPaletteComponent>, subcategoryKey) { + let filteredResources = []; + angular.forEach(subcategory, function (component:LeftPaletteComponent) { + + let resourceFilterTerm:string = component.searchFilterTerms; + if (resourceFilterTerm.indexOf(searchText.toLowerCase()) >= 0) { + filteredResources.push(component); + } + }); + if (filteredResources.length > 0) { + displaySortedCategories[categoryKey][subcategoryKey] = filteredResources; + } + else { + delete displaySortedCategories[categoryKey][subcategoryKey]; + } + }); + if (!(Object.keys(displaySortedCategories[categoryKey]).length > 0)) { + delete displaySortedCategories[categoryKey]; + } + + }); + } + return displaySortedCategories; + }; + + public static factory = ($log, + LeftPaletteLoaderService, + sdcConfig, + ComponentFactory, + ComponentInstanceFactory, + NodesFactory, + CompositionGraphGeneralUtils, + EventListenerService, + sdcMenu, + ModalsHandler) => { + return new Palette($log, + LeftPaletteLoaderService, + sdcConfig, + ComponentFactory, + ComponentInstanceFactory, + NodesFactory, + CompositionGraphGeneralUtils, + EventListenerService, + sdcMenu, + ModalsHandler); + }; +} + +Palette.factory.$inject = [ + '$log', + 'LeftPaletteLoaderService', + 'sdcConfig', + 'ComponentFactory', + 'ComponentInstanceFactory', + 'NodesFactory', + 'CompositionGraphGeneralUtils', + 'EventListenerService', + 'sdcMenu', + 'ModalsHandler' +]; diff --git a/catalog-ui/src/app/directives/graphs-v2/palette/palette.html b/catalog-ui/src/app/directives/graphs-v2/palette/palette.html new file mode 100644 index 0000000000..4b123e5777 --- /dev/null +++ b/catalog-ui/src/app/directives/graphs-v2/palette/palette.html @@ -0,0 +1,57 @@ +<div class="w-sdc-designer-leftbar"> + <div class="w-sdc-designer-leftbar-title">Elements <span class="w-sdc-designer-leftbar-title-count">{{model.numberOfElements}}</span> + </div> + + <div class="w-sdc-designer-leftbar-search"> + <input type="text" class="w-sdc-designer-leftbar-search-input" placeholder="Search..." + data-ng-model="searchText" data-ng-change="searchComponents(searchText)" + ng-model-options="{ debounce: 500 }" data-tests-id="searchAsset"/> + <span class="w-sdc-search-icon leftbar" data-ng-class="{'cancel':searchText, 'magnification':!searchText}" + data-ng-click="searchText=''; searchComponents('',categories)"></span> + </div> + <div class="i-sdc-designer-leftbar-section" + data-ng-repeat="(entityCategory, objCategory) in displaySortedCategories track by $index" + data-ng-class="{'expanded': expandedSection.indexOf(entityCategory) !== -1}"> + <div class="i-sdc-designer-leftbar-section-title pointer" data-ng-click="sectionClick(entityCategory)" + data-tests-id="leftbar-section-title-{{entityCategory}}"> + {{entityCategory}} + <div class="i-sdc-designer-leftbar-section-title-icon"></div> + </div> + <div class="i-sdc-designer-leftbar-section-content" + data-ng-repeat="(subCategory, components) in objCategory track by $index"> + <div class="i-sdc-designer-leftbar-section-content-subcat i-sdc-designer-leftbar-section-content-item"> + {{subCategory}} + </div> + <div class="i-sdc-designer-leftbar-section-content-item" + data-ng-class="{'default-pointer': isViewOnly}" + data-ng-mouseover="!isViewOnly && onMouseOver(component)" + data-ng-mouseleave="!isViewOnly && onMouseOut()" + data-drag="{{!isViewOnly}}" + data-jqyoui-options="{revert: 'invalid', helper:setElementTemplate, appendTo:'body', cursorAt: {left:38, top: 38}, cursor:'move'}" + jqyoui-draggable="{index:{{$index}},animate:true,onStart:'dragStartCallback(component)',onStop:'dragStopCallback()', onDrag:'onDragCallback()'}" + data-ng-repeat="component in components | orderBy: 'displayName' track by $index" + data-tests-id={{component.displayName}}> + <div class="i-sdc-designer-leftbar-section-content-item-icon-ph"> + <div class="medium {{component.iconClass}}" + data-tests-id="leftbar-section-content-item-{{component.displayName}}"> + <div class="{{component.certifiedIconClass}}" uib-tooltip="Not certified" + tooltip-class="uib-custom-tooltip" tooltip-placement="bottom" tooltip-popup-delay="700"> + </div> + </div> + </div> + <div class="i-sdc-designer-leftbar-section-content-item-info"> + <span class="i-sdc-designer-leftbar-section-content-item-info-title" + uib-tooltip="{{component.displayName}}" tooltip-class="uib-custom-tooltip" + tooltip-placement="bottom" tooltip-popup-delay="700"> + {{component.displayName}}</span> + <div class="i-sdc-designer-leftbar-section-content-item-info-text"> + V.{{component.version}} + </div> + <div class="i-sdc-designer-leftbar-section-content-item-info-text"> Type: + {{component.componentSubType}} + </div> + </div> + </div> + </div> + </div> +</div> diff --git a/catalog-ui/src/app/directives/graphs-v2/palette/palette.less b/catalog-ui/src/app/directives/graphs-v2/palette/palette.less new file mode 100644 index 0000000000..85657a43a5 --- /dev/null +++ b/catalog-ui/src/app/directives/graphs-v2/palette/palette.less @@ -0,0 +1,92 @@ +.drag-icon-border{ + border: 7px solid red; + border-radius: 500px; + -webkit-border-radius: 500px; + -moz-border-radius: 500px; + width: 53px; + height: 53px; +} + +.drag-icon-circle{ + width: 60px; + height: 60px; + -webkit-border-radius: 50%; + -moz-border-radius: 50%; + border-radius: 50%; + position: relative; + +} + + +@green-shadow: rgba(29, 154, 149, 0.3); +@red-shadow: rgba(218, 31, 61, 0.3); +.drag-icon-circle .sprite-resource-icons { + position: absolute; + top: 10px; + left: 10px; +} + +.drag-icon-circle.red { + background: @red-shadow; +} + +.drag-icon-circle.green { + background: @green-shadow; +} + + +.node-substitute { + display: none; + position: absolute; + z-index: 9999; + height: 80px; + width: 80px; + border-radius: 50%; + text-align: center; + + span { + display: inline-block; + vertical-align: middle; + height: 100%; + } + + img { + height: 40px; + width: 40px; + box-shadow: 0 0 0 10px @green-shadow; + border-radius: 50%; + + -webkit-user-drag: none; + -moz-user-drag: none; + user-drag: none; + } + &.red img { + box-shadow: 0 0 0 10px @red-shadow; + } + &.bounce img { + -moz-animation:bounceOut 0.3s linear; + -webkit-animation:bounceOut 0.3s linear; + animation:bounceOut 0.3s linear; + } +} + +@keyframes bounceOut { + 0%{ box-shadow: 0 0 0 10px @green-shadow; width: 40px; height: 40px; } + 60%{ box-shadow: 0 0 0 0px @green-shadow; width: 60px; height: 60px; } + 85%{ box-shadow: 0 0 0 0px @green-shadow; width: 75px; height: 75px; } + 100%{ box-shadow: 0 0 0 0px @green-shadow; width: 60px; height: 60px; } +} + +@-moz-keyframes bounceOut { + 0%{ box-shadow: 0 0 0 10px @green-shadow; width: 40px; height: 40px; } + 60%{ box-shadow: 0 0 0 0px @green-shadow; width: 60px; height: 60px; } + 85%{ box-shadow: 0 0 0 0px @green-shadow; width: 75px; height: 75px; } + 100%{ box-shadow: 0 0 0 0px @green-shadow; width: 60px; height: 60px; } +} + +@-webkit-keyframes bounceOut { + 0%{ box-shadow: 0 0 0 10px @green-shadow; width: 40px; height: 40px; } + 60%{ box-shadow: 0 0 0 0px @green-shadow; width: 60px; height: 60px; } + 85%{ box-shadow: 0 0 0 0px @green-shadow; width: 75px; height: 75px; } + 100%{ box-shadow: 0 0 0 0px @green-shadow; width: 60px; height: 60px; } +} diff --git a/catalog-ui/src/app/directives/graphs-v2/relation-menu/relation-menu.html b/catalog-ui/src/app/directives/graphs-v2/relation-menu/relation-menu.html new file mode 100644 index 0000000000..a0a9e4af27 --- /dev/null +++ b/catalog-ui/src/app/directives/graphs-v2/relation-menu/relation-menu.html @@ -0,0 +1,63 @@ +<div class="link-menu-open" data-tests-id="link-menu-open" data-ng-show="isLinkMenuOpen" ng-style="{left: relationMenuDirectiveObj.menuPosition.x, top: relationMenuDirectiveObj.menuPosition.y}" clicked-outside="{onClickedOutside: 'hideRelationMatch()', clickedOutsideEnable: 'isLinkMenuOpen'}" > + <h4 sdc-smart-tooltip>{{relationMenuDirectiveObj.leftSideLink.componentInstance.name | resourceName}}</h4> + <h4 sdc-smart-tooltip>{{relationMenuDirectiveObj.rightSideLink.componentInstance.name | resourceName}}</h4> + + <p>Select one of the options below to connect</p> + + <perfect-scrollbar scroll-y-margin-offset="0" include-padding="true" class="scrollbar-container"> + <div class="inner-title" data-ng-show="hasMatchesToShow(relationMenuDirectiveObj.leftSideLink.requirements, relationMenuDirectiveObj.rightSideLink.selectedMatch)">Requirements</div> + <div class="link-item" data-tests-id="link-item-requirements" data-ng-repeat="(req ,matchArr) in relationMenuDirectiveObj.leftSideLink.requirements" + data-ng-click="relationMenuDirectiveObj.leftSideLink.selectMatchArr(matchArr); updateSelectionText()" + data-ng-show="showMatch(relationMenuDirectiveObj.rightSideLink.selectedMatch, matchArr)" + data-ng-class="{ 'selected': relationMenuDirectiveObj.leftSideLink.selectedMatch === matchArr}"> + <div sdc-smart-tooltip>{{matchArr[0].requirement.getFullTitle()}}</div> + </div> + + <div class="inner-title" data-ng-show="hasMatchesToShow(relationMenuDirectiveObj.leftSideLink.capabilities, relationMenuDirectiveObj.rightSideLink.selectedMatch)">Capabilities</div> + <div class="link-item" data-tests-id="link-item-capabilities" data-ng-repeat="(cap, matchArr) in relationMenuDirectiveObj.leftSideLink.capabilities" + data-ng-click="relationMenuDirectiveObj.leftSideLink.selectMatchArr(matchArr); updateSelectionText()" + data-ng-show="showMatch(relationMenuDirectiveObj.rightSideLink.selectedMatch, matchArr)" + data-ng-class="{ 'selected': relationMenuDirectiveObj.leftSideLink.selectedMatch === matchArr}"> + <div sdc-smart-tooltip>{{matchArr[0].capability.getFullTitle()}}</div> + </div> + </perfect-scrollbar> + + <perfect-scrollbar scroll-y-margin-offset="0" include-padding="true" class="scrollbar-container"> + <div class="inner-title" data-ng-show="hasMatchesToShow(relationMenuDirectiveObj.rightSideLink.requirements, relationMenuDirectiveObj.leftSideLink.selectedMatch)">Requirements</div> + <div class="link-item" data-tests-id="link-item-requirements" data-ng-repeat="(req, matchArr) in relationMenuDirectiveObj.rightSideLink.requirements" + data-ng-click="relationMenuDirectiveObj.rightSideLink.selectMatchArr(matchArr); updateSelectionText()" + data-ng-show="showMatch(relationMenuDirectiveObj.leftSideLink.selectedMatch, matchArr)" + data-ng-class="{ 'selected': relationMenuDirectiveObj.rightSideLink.selectedMatch === matchArr}"> + <div sdc-smart-tooltip>{{matchArr[0].secondRequirement ? matchArr[0].secondRequirement.getFullTitle() : matchArr[0].requirement.getFullTitle()}}</div> + </div> + + <div class="inner-title" data-ng-show="hasMatchesToShow(relationMenuDirectiveObj.rightSideLink.capabilities, relationMenuDirectiveObj.leftSideLink.selectedMatch)">Capabilities</div> + <div class="link-item" data-tests-id="link-item-capabilities" data-ng-repeat="(cap, matchArr) in relationMenuDirectiveObj.rightSideLink.capabilities" + data-ng-click="relationMenuDirectiveObj.rightSideLink.selectMatchArr(matchArr); updateSelectionText()" + data-ng-show="showMatch(relationMenuDirectiveObj.leftSideLink.selectedMatch, matchArr)" + data-ng-class="{ 'selected': relationMenuDirectiveObj.rightSideLink.selectedMatch === matchArr}"> + <div sdc-smart-tooltip>{{matchArr[0].capability.getFullTitle()}}</div> + </div> + </perfect-scrollbar> + + <div class="vl-type" data-ng-class="{'disabled': !relationMenuDirectiveObj.leftSideLink.selectedMatch[0].secondRequirement || !relationMenuDirectiveObj.rightSideLink.selectedMatch[0].secondRequirement}"> + <sdc-radio-button sdc-model="relationMenuDirectiveObj.vlType" value="ptp" + disabled="!relationMenuDirectiveObj.leftSideLink.selectedMatch[0].secondRequirement || !relationMenuDirectiveObj.rightSideLink.selectedMatch[0].secondRequirement || !relationMenuDirectiveObj.p2pVL" + text="Point to point" elem-id="radioPTP" elem-name="vlType"></sdc-radio-button> + + <sdc-radio-button sdc-model="relationMenuDirectiveObj.vlType" value="mptmp" + disabled="!relationMenuDirectiveObj.leftSideLink.selectedMatch[0].secondRequirement || !relationMenuDirectiveObj.rightSideLink.selectedMatch[0].secondRequirement || !relationMenuDirectiveObj.mp2mpVL" + text="Multi point" elem-id="radioMPTMP" elem-name="vlType"></sdc-radio-button> + + <span class="sprite-new info-icon" tooltips tooltip-content="You are required to choose the type of the Virtual Link."></span> + </div> + + <div class="result" sdc-smart-tooltip>​{{relationMenuDirectiveObj.selectionText}} + + </div> + + <button class="tlv-btn grey" data-tests-id="link-menu-button-cancel" data-ng-click="hideRelationMatch()">Cancel</button> + <button class="tlv-btn blue" data-tests-id="link-menu-button-connect" data-ng-disabled="!relationMenuDirectiveObj.leftSideLink.selectedMatch || !relationMenuDirectiveObj.rightSideLink.selectedMatch || + (relationMenuDirectiveObj.leftSideLink.selectedMatch[0].secondRequirement && !relationMenuDirectiveObj.vlType)" + data-ng-click="saveRelation()">Connect</button> +</div> diff --git a/catalog-ui/src/app/directives/graphs-v2/relation-menu/relation-menu.less b/catalog-ui/src/app/directives/graphs-v2/relation-menu/relation-menu.less new file mode 100644 index 0000000000..dea814dbec --- /dev/null +++ b/catalog-ui/src/app/directives/graphs-v2/relation-menu/relation-menu.less @@ -0,0 +1,118 @@ +.link-menu-open { + display: block !important; + color: @main_color_m; + font-size: 14px; + position: absolute; + z-index: 99999; + border-radius: 2px; + background-color: #ffffff; + box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.5); + width: 460px; + height: 418px; + + h4 { + width: 50%; + float: left; + background-color: @tlv_color_u; + font-size: 14px; + font-weight: bold; + line-height: 36px; + margin: 0; + padding: 0 15px; + + & + h4 { + border-left: #d8d8d8 1px solid; + } + } + p { + clear: both; + text-indent: 15px; + border-bottom: #d8d8d8 1px solid; + line-height: 34px; + margin: 0; + color: @func_color_s; + } + + .scrollbar-container { + height: 232px; + width: 50%; + float: left; + margin-bottom: 5px; + .perfect-scrollbar; + + & + .scrollbar-container { + border-left: #d8d8d8 1px solid; + } + + .inner-title { + width: 189px; + margin: 5px auto 3px auto; + //text-indent: 10px; + color: @func_color_s; + text-transform: uppercase; + font-weight: bold; + + //&:not(:first-child) { + // margin-top: 10px; + //} + } + + .link-item { + padding: 0 10px; + line-height: 23px; + height: 23px; + text-indent: 5px; + .hand; + + &.selected { + background-color: @tlv_color_v; + } + } + } + + .vl-type { + height: 33px; + border-top: #d8d8d8 solid 1px; + clear: both; + padding: 0 10px; + line-height: 32px; + color: @main_color_m; + + &.disabled { + background-color: #f2f2f2; + color: @color_m; + } + .info-icon { + float:right; + margin-top: 9px; + } + .tlv-radio { + margin-right: 10px; + } + } + + .result { + background-color: @main_color_m; + line-height: 29px; + color: #ffffff; + padding: 0 15px; + } + + button { + float: right; + margin-top: 9px; + margin-right: 10px; + } +} +.link-menu-item { + cursor: pointer; + line-height: 24px; + padding: 0 10px; + &:hover { + color: @color_a; + } +} +.link-menu::before { + right: inherit !important; + left: 50px; +}
\ No newline at end of file diff --git a/catalog-ui/src/app/directives/graphs-v2/relation-menu/relation-menu.ts b/catalog-ui/src/app/directives/graphs-v2/relation-menu/relation-menu.ts new file mode 100644 index 0000000000..b05385b668 --- /dev/null +++ b/catalog-ui/src/app/directives/graphs-v2/relation-menu/relation-menu.ts @@ -0,0 +1,103 @@ +/*- + * ============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========================================================= + */ +'use strict' +import {MatchBase, RelationMenuDirectiveObj} from "app/models"; +import {Component} from "../../../models/components/component"; + +export interface IRelationMenuScope extends ng.IScope { + relationMenuDirectiveObj:RelationMenuDirectiveObj; + createRelation:Function; + isLinkMenuOpen:boolean; + hideRelationMatch:Function; + cancel:Function; + + saveRelation(); + showMatch(arr1:Array<MatchBase>, arr2:Array<MatchBase>):boolean; + hasMatchesToShow(matchesObj:MatchBase, selectedMatch:Array<MatchBase>); + updateSelectionText():void; + +} + + +export class RelationMenuDirective implements ng.IDirective { + + constructor(private $filter:ng.IFilterService) { + } + + scope = { + relationMenuDirectiveObj: '=', + isLinkMenuOpen: '=', + createRelation: '&', + cancel: '&' + }; + + restrict = 'E'; + replace = true; + template = ():string => { + return require('./relation-menu.html'); + }; + + link = (scope:IRelationMenuScope, element:JQuery, $attr:ng.IAttributes) => { + + scope.saveRelation = ():void=> { + let chosenMatches:Array<any> = _.intersection(scope.relationMenuDirectiveObj.rightSideLink.selectedMatch, scope.relationMenuDirectiveObj.leftSideLink.selectedMatch); + let chosenMatch:MatchBase = chosenMatches[0]; + scope.createRelation()(chosenMatch); + }; + + + scope.hideRelationMatch = () => { + scope.isLinkMenuOpen = false; + scope.cancel(); + }; + + //to show options in link menu + scope.showMatch = (arr1:Array<MatchBase>, arr2:Array<MatchBase>):boolean => { + return !arr1 || !arr2 || _.intersection(arr1, arr2).length > 0; + }; + + //to show requirements/capabilities title + scope.hasMatchesToShow = (matchesObj:MatchBase, selectedMatch:Array<MatchBase>):boolean => { + let result:boolean = false; + _.forEach(matchesObj, (matchesArr:Array<MatchBase>) => { + if (!result) { + result = scope.showMatch(matchesArr, selectedMatch); + } + }); + return result; + }; + + + scope.updateSelectionText = ():void => { + let left:string = scope.relationMenuDirectiveObj.leftSideLink.selectedMatch ? this.$filter('resourceName')(scope.relationMenuDirectiveObj.leftSideLink.selectedMatch[0].getDisplayText('left')) : ''; + let both:string = scope.relationMenuDirectiveObj.leftSideLink.selectedMatch && scope.relationMenuDirectiveObj.rightSideLink.selectedMatch ? ' - ' + + this.$filter('resourceName')(scope.relationMenuDirectiveObj.leftSideLink.selectedMatch[0].requirement.relationship) + ' - ' : ''; + let right:string = scope.relationMenuDirectiveObj.rightSideLink.selectedMatch ? this.$filter('resourceName')(scope.relationMenuDirectiveObj.rightSideLink.selectedMatch[0].getDisplayText('right')) : ''; + scope.relationMenuDirectiveObj.selectionText = left + both + right; + }; + + + } + public static factory = ($filter:ng.IFilterService)=> { + return new RelationMenuDirective($filter); + }; +} + +RelationMenuDirective.factory.$inject = ['$filter']; diff --git a/catalog-ui/src/app/directives/info-tooltip/info-tooltip.html b/catalog-ui/src/app/directives/info-tooltip/info-tooltip.html new file mode 100644 index 0000000000..5c2bdcf5f1 --- /dev/null +++ b/catalog-ui/src/app/directives/info-tooltip/info-tooltip.html @@ -0,0 +1,10 @@ +<div> + <span class="sprite-new info-icon hand" data-ng-click="showMessage=!showMessage"></span> + <div class="info-tooltip" data-ng-show="showMessage"> + <div class="info-tooltip-arrow"></div> + <div class="info-tooltip-content" data-ng-class="direction"> + <span class="close-tooltip sprite-new close-info-tooltip-button" data-ng-click="showMessage=false"></span> + <p class="info-tooltip-message" translate="{{infoMessageTranslate}}"></p> + </div> + </div> +</div> diff --git a/catalog-ui/src/app/directives/info-tooltip/info-tooltip.less b/catalog-ui/src/app/directives/info-tooltip/info-tooltip.less new file mode 100644 index 0000000000..cc3e3dc1ec --- /dev/null +++ b/catalog-ui/src/app/directives/info-tooltip/info-tooltip.less @@ -0,0 +1,42 @@ +.info-tooltip { + position: fixed; + z-index: 1070; + display: block; + width: 250px; + .info-tooltip-arrow { + width: 0; + height: 0; + border-style: solid; + border-width: 0 5px 5px 5px; + border-color: transparent transparent @main_color_a transparent; + position: relative; + left: 2px; + } + .info-tooltip-content { + box-shadow: 0px 4px 6px 0px rgba(0, 0, 0, 0.5); + border: 1px solid @main_color_o; + border-radius: 3px; + border-top: 3px solid @main_color_a; + position: relative; + background-color: white; + &.right{ + left: -13px; + } + &.left{ + left: -223px; + } + .close-tooltip{ + float: right; + margin: 5px; + } + + .info-tooltip-message{ + margin: 15px; + word-break: normal; + font-size: 14px; + font-weight: normal; + text-align: left; + line-height: normal; + } + } +} diff --git a/catalog-ui/src/app/directives/info-tooltip/info-tooltip.ts b/catalog-ui/src/app/directives/info-tooltip/info-tooltip.ts new file mode 100644 index 0000000000..63ecdc6091 --- /dev/null +++ b/catalog-ui/src/app/directives/info-tooltip/info-tooltip.ts @@ -0,0 +1,37 @@ +/** + * Created by rcohen on 9/25/2016. + */ +'use strict'; + +export interface IInfoTooltipScope extends ng.IScope { + infoMessageTranslate:string; + direction:string; +} + + +export class InfoTooltipDirective implements ng.IDirective { + + constructor() { + } + + scope = { + infoMessageTranslate: '@', + direction: '@'//get 'right' or 'left', the default is 'right' + }; + + restrict = 'E'; + replace = true; + template = ():string => { + return require('./info-tooltip.html'); + }; + + link = (scope:IInfoTooltipScope, element:any, $attr:any) => { + scope.direction = scope.direction || 'right'; + }; + + public static factory = ()=> { + return new InfoTooltipDirective(); + }; +} + +InfoTooltipDirective.factory.$inject = []; diff --git a/catalog-ui/src/app/directives/inputs-and-properties/inputs/input-row-directive.ts b/catalog-ui/src/app/directives/inputs-and-properties/inputs/input-row-directive.ts new file mode 100644 index 0000000000..221c20d08f --- /dev/null +++ b/catalog-ui/src/app/directives/inputs-and-properties/inputs/input-row-directive.ts @@ -0,0 +1,43 @@ +/** + * Created by obarda on 1/8/2017. + */ +'use strict'; + +export interface IInputRowDirective extends ng.IScope { + showDeleteIcon:boolean; +} + + +export class InputRowDirective implements ng.IDirective { + + constructor() { + + } + + scope = { + instanceInputsMap: '=', + input: '=', + instanceName: '=', + instanceId: '=', + isViewOnly: '=', + deleteInput: '&', + onNameClicked: '&', + onCheckboxClicked: '&' + }; + + restrict = 'E'; + replace = true; + template = ():string => { + return require('./input-row-view.html'); + }; + + link = (scope:IInputRowDirective, element:any, $attr:any) => { + scope.showDeleteIcon = $attr.deleteInput ? true : false; + }; + + public static factory = ()=> { + return new InputRowDirective(); + }; +} + +InputRowDirective.factory.$inject = []; diff --git a/catalog-ui/src/app/directives/inputs-and-properties/inputs/input-row-view.html b/catalog-ui/src/app/directives/inputs-and-properties/inputs/input-row-view.html new file mode 100644 index 0000000000..872a26bc27 --- /dev/null +++ b/catalog-ui/src/app/directives/inputs-and-properties/inputs/input-row-view.html @@ -0,0 +1,43 @@ +<div class="input-row"> + <div class="title-text" ng-click="onNameClicked(input)" data-tests-id="inputName_{{input.name}}"> + {{input.name}} + </div> + <div class="flex-container"> + <div class="expand-collapse-inputs-table-icon"></div> + <div class="flex-item"> + <div class="no-overflow"> + <span class="title-text">Description:</span> + <span tooltips tooltip-content="{{input.description}}" data-tests-id="inputDescription_{{input.name}}">{{input.description}}</span> + </div> + <div class="text" tooltips tooltip-content="{{input.defaultValue}}"> + <span class="title-text">Default Value:</span> + <span data-tests-id="inputDefaultValue_{{input.name}}">{{input.defaultValue}}</span> + </div> + </div> + <div class="flex-item "> + <div class="text"> + <span class="title-text">VF Instance:</span> + <span tooltips tooltip-content="{{instanceName}}" data-tests-id="inputInstanceName_{{input.name}}">{{instanceName}}</span> + </div> + <div class="text"> + <span class="title-text">Type:</span> + <span tooltips tooltip-content="{{input.type}}" data-tests-id="inputType_{{input.name}}">{{input.type}} </span> + </div> + </div> + <sdc-checkbox ng-if="instanceInputsMap" + class="input-check-box" + disabled="input.isAlreadySelected || isViewOnly" + sdc-checklist-model="instanceInputsMap[instanceId]" + sdc-checklist-value="input" + sdc-checklist-change="onCheckboxClicked()" + data-tests-id="inputsCheckbox_{{input.name}}" + data-ng-click=" $event.stopPropagation()"></sdc-checkbox> + + <div class="delete" ng-if="showDeleteIcon"> + <span class="sprite-new delete-icon remove-input-icon" + data-ng-class="{'disabled': isViewOnly || input.isDeleteDisabled}" + data-ng-click="deleteInput(input); $event.stopPropagation();" + data-tests-id="deleteInput_{{input.name}}"></span> + </div> + </div> +</div> diff --git a/catalog-ui/src/app/directives/inputs-and-properties/inputs/input-row.less b/catalog-ui/src/app/directives/inputs-and-properties/inputs/input-row.less new file mode 100644 index 0000000000..fa79b45c3c --- /dev/null +++ b/catalog-ui/src/app/directives/inputs-and-properties/inputs/input-row.less @@ -0,0 +1,54 @@ +&.expanded { + .input-row { + background-color: @tlv_color_v; + } +} + +.input-row { + padding-left: 45px; + background: @tlv_color_t; + border: @main_color_o solid 1px; + align-items: center; + .hand; + margin: 1px 0px 1px 0px; + + &.selected { + background-color: @tlv_color_v; + } + .flex-item { + min-height: 60px; + padding: 0 15px; + } + .input-check-box { + padding-right: 10px; + margin-top: 9px; + } + & > .title-text { + text-align: start; + padding: 4px 35px 0 35px; + } + + .expand-collapse-inputs-table-icon { + margin-top: 15px; + } + + .delete { + width: 50px; + padding: 0; + position: relative; + } + + .remove-input-icon { + position: absolute; + top: 12px; + right: 18px; + } + + .remove-input-icon:hover { + .delete-icon-hover; + } +} + +.input-row:hover { + .bg_j; +} diff --git a/catalog-ui/src/app/directives/inputs-and-properties/properties/property-row-directive.ts b/catalog-ui/src/app/directives/inputs-and-properties/properties/property-row-directive.ts new file mode 100644 index 0000000000..a9ff71cda5 --- /dev/null +++ b/catalog-ui/src/app/directives/inputs-and-properties/properties/property-row-directive.ts @@ -0,0 +1,42 @@ +/** + * Created by obarda on 1/8/2017. + */ +'use strict'; + +export interface IPropertyRowDirective extends ng.IScope { + onNameClicked:Function; + isClickable:boolean; +} + +export class PropertyRowDirective implements ng.IDirective { + + constructor() { + + } + + scope = { + property: '=', + instanceName: '=', + instanceId: '=', + instancePropertiesMap: '=', + onNameClicked: '&', + onCheckboxClicked: '&' + }; + + restrict = 'E'; + replace = true; + template = ():string => { + return require('./property-row-view.html'); + }; + + link = (scope:IPropertyRowDirective, element:any, $attr:any) => { + scope.isClickable = $attr.onNameClicked ? true : false; + }; + + public static factory = ()=> { + return new PropertyRowDirective(); + }; + +} + +PropertyRowDirective.factory.$inject = []; diff --git a/catalog-ui/src/app/directives/inputs-and-properties/properties/property-row-view.html b/catalog-ui/src/app/directives/inputs-and-properties/properties/property-row-view.html new file mode 100644 index 0000000000..ff82a8b685 --- /dev/null +++ b/catalog-ui/src/app/directives/inputs-and-properties/properties/property-row-view.html @@ -0,0 +1,26 @@ +<div class="property-row flex-container"> + <div class="flex-item text property-name-container"> + <span class="title-blue-text property-name-text " data-ng-class="{'hand': isClickable}" data-tests-id="propertyName" data-ng-click="onNameClicked(property)" tooltips tooltip-content="{{property.name}}">{{property.name}}</span> + </div> + <div class="flex-item text property-name-container"> + <span class="text instance-name-text" data-tests-id="instanceName" tooltips tooltip-content="{{instanceName}}">{{instanceName}}</span> + </div> + <div class="type-schema-container"> + <div class="text"> + <span tooltips tooltip-content="propertyName_{{property.type}}" data-tests-id="propertyType">{{property.type}}</span> + </div> + </div> + <div class="type-schema-container"> + <div class="text"> + <span tooltips tooltip-content="{{property.schema.property.type}}" data-tests-id="propertySchema">{{property.schema.property.type}} </span> + </div> + </div> + <sdc-checkbox ng-if="instancePropertiesMap" + class="property-check-box" + disabled="property.isAlreadySelected || isViewOnly" + sdc-checklist-model="instancePropertiesMap[instanceId]" + sdc-checklist-value="property" + sdc-checklist-change="onCheckboxClicked()" + data-tests-id="propertyCheckbox_{{property.name}}" + data-ng-click=" $event.stopPropagation()"></sdc-checkbox> +</div> diff --git a/catalog-ui/src/app/directives/inputs-and-properties/properties/property-row-view.less b/catalog-ui/src/app/directives/inputs-and-properties/properties/property-row-view.less new file mode 100644 index 0000000000..e25427bda2 --- /dev/null +++ b/catalog-ui/src/app/directives/inputs-and-properties/properties/property-row-view.less @@ -0,0 +1,35 @@ +.property-row { + border-bottom: 1px solid @border_color_d; + padding-left: 10px; + .property-name-container { + display: flex; + flex-grow: 3; + } + + .type-schema-container { + flex-grow: 2; + border-left: 1px solid @border_color_d; + text-align: left; + line-height: 30px; + text-transform: capitalize; + width: 10px; + } + + .property-check-box { + padding-right: 10px; + margin-top: 9px; + } +} + +.property-row:hover { + background-color: @func_color_r; +} + +&.expanded { + .flex-container { + .expand-collapse-inputs-table-icon { + transform: rotate(180deg); + left: 0px; + } + } +} diff --git a/catalog-ui/src/app/directives/invalid-characters/invalid-characters.ts b/catalog-ui/src/app/directives/invalid-characters/invalid-characters.ts new file mode 100644 index 0000000000..20ed71e53f --- /dev/null +++ b/catalog-ui/src/app/directives/invalid-characters/invalid-characters.ts @@ -0,0 +1,51 @@ +'use strict'; + +export class InvalidCharactersDirective implements ng.IDirective { + + constructor() { + } + + require = 'ngModel'; + + link = (scope, elem, attrs, ngModel) => { + + let invalidCharacters = []; + + attrs.$observe('invalidCharacters', (val:string) => { + invalidCharacters = val.split(''); + validate(ngModel.$viewValue); + }); + + let validate:Function = function (value) { + + let valid:boolean = true; + + if (value) { + for (let i = 0; i < invalidCharacters.length; i++) { + if (value.indexOf(invalidCharacters[i]) != -1) { + valid = false; + } + } + } + + ngModel.$setValidity('invalidCharacters', valid); + if (!value) { + ngModel.$setPristine(); + } + return value; + }; + + //For DOM -> model validation + ngModel.$parsers.unshift(validate); + //For model -> DOM validation + ngModel.$formatters.unshift(validate); + + }; + + public static factory = ()=> { + return new InvalidCharactersDirective(); + }; + +} + +InvalidCharactersDirective.factory.$inject = []; diff --git a/catalog-ui/src/app/directives/layout/top-nav/top-nav.html b/catalog-ui/src/app/directives/layout/top-nav/top-nav.html new file mode 100644 index 0000000000..60d3d63855 --- /dev/null +++ b/catalog-ui/src/app/directives/layout/top-nav/top-nav.html @@ -0,0 +1,54 @@ +<nav class="top-nav"> + + <div class="asdc-app-title-wrapper"> + <a class="asdc-app-title" translate="PROJECT_TITLE"></a> + <div class="asdc-version"> v.{{version}}</div> + </div> + + <ul class="top-menu" data-ng-show="!menuModel"> + <!-- no hierarchy & dropdowns mode --> + <li data-ng-repeat="item in topLvlMenu.menuItems" + data-ng-class="{'selected': $index == topLvlMenu.selectedIndex}"> + <a data-ng-click="menuItemClick(topLvlMenu, item)" + data-tests-id="main-menu-button-{{item.text | lowercase}}">{{item.text}}</a> + </li> + </ul> + + <ul class="top-menu" data-ng-show="menuModel"> + <!-- with hierarchy & dropdowns mode --> + <li data-ng-repeat-start="groupItem in menuModel" + data-ng-class="{'selected': $last }"> + <a data-ng-click="menuItemClick(groupItem, groupItem.menuItems[groupItem.selectedIndex])" + data-tests-id="breadcrumbs-button-{{$index}}"> + {{groupItem.menuItems[groupItem.selectedIndex].text}} + </a> + </li> + <li data-ng-repeat-end="" class="triangle-dropdown" + data-ng-class="{'item-click': groupItem.itemClick}" data-ng-mouseover="groupItem.itemClick = true"> + <div class="triangle"><span class="sprite-new arrow-right"></span></div> + <perfect-scrollbar scroll-y-margin-offset="15" include-padding="true"> + <ul> + <li data-ng-repeat="ddItem in groupItem.menuItems" + data-ng-click="menuItemClick(groupItem, ddItem)" + data-ng-class="{'selected': $index == groupItem.selectedIndex, 'disabled': ddItem.isDisabled}" + data-tests-id="sub-menu-button-{{ddItem.text | lowercase}}"> + <span sdc-smart-tooltip="">{{ddItem.text}}</span> + </li> + </ul> + </perfect-scrollbar> + </li> + </ul> + + <div class="top-search" data-ng-hide="hideSearch === true"> + <input type="text" + class="search-text" + placeholder="Search" + data-ng-model="searchBind" + data-tests-id="main-menu-input-search" + ng-model-options="{ debounce: 500 }" /> + <span class="w-sdc-search-icon magnification"></span> + </div> + + <div class="notification-icon" data-ng-disabled= "progress > 0" data-ng-class="{'disabled' : progress > 0}" data-ng-if="user.role === 'DESIGNER' && notificationIconCallback" data-ng-click="notificationIconCallback()" tooltips tooltip-side="left" tooltip-content="Vendor Software Product Repository" data-tests-id="repository-icon"></div> + +</nav> diff --git a/catalog-ui/src/app/directives/layout/top-nav/top-nav.less b/catalog-ui/src/app/directives/layout/top-nav/top-nav.less new file mode 100644 index 0000000000..65021bdc4d --- /dev/null +++ b/catalog-ui/src/app/directives/layout/top-nav/top-nav.less @@ -0,0 +1,218 @@ +.top-nav { + position: fixed; + top: @header_height; + background-color: @main_color_p; + .box-shadow(0px 1px 3px 0px rgba(0, 0, 0, 0.33)); + width: 100%; + height: @top_nav_height; + line-height: @top_nav_height; + z-index: 10; + display: flex; + flex-direction: row; + align-items: center; + + .asdc-app-title-wrapper { + flex-grow: 1; + line-height: 16px; + margin: 0 20px; + + a.asdc-app-title { + .m_18_r; + text-decoration: none; + } + + .asdc-version { + .m_12_r; + .opacity(0.8); + line-height: 14px; + flex-grow: 1; + } + + } + + ul.top-menu { + list-style-type: none; + margin: 0 0 0 20px; + padding: 0; + flex-grow: 999; + + & > li { + float: left; + cursor: pointer; + line-height: 50px; + height: 50px; + padding: 0 20px; + + &.selected { + border-bottom: solid 4px @main_color_a; + + a { + color: @func_color_s; + } + } + + /*&:hover { + border-bottom: solid 4px @main_color_a; + }*/ + + a { + font-family: @font-omnes-medium; + color: @main_color_m; + font-size: 18px; + display: block; + text-align: center; + text-decoration: none; + } + + &.triangle-dropdown { + padding: 0; + position: relative; + + div.triangle { + margin-top: 15px; + border-radius: 2px; + width: 17px; + height: 18px; + + //temp use - until new triangle gets in + line-height: 18px; + text-align: center; + font-size: 10px; + + &:hover { + background-color: rgba(156, 156, 156, 0.2); + + span { + .arrow-right-hover; + } + } + } + + + li a { + font-size: 16px; + } + + .ps-container { + .perfect-scrollbar; + position: absolute; + left: 0; + top: 40px; + z-index: 1; + + overflow: hidden; + max-height: 0; + -webkit-transition: max-height 200ms ease-in; + -moz-transition: max-height 200ms ease-in; + -o-transition: max-height 200ms ease-in; + transition: max-height 200ms ease-in; + + div ul { + + padding: 0; + background-color: white; + + li { + + height: 35px; + background-color: white; + font-size: 13px; + width: 150px; + line-height: 35px; + padding: 0 10px; + + &.disabled { + opacity: 1; + } + &.selected { + background-color: @tlv_color_v; + font-weight: bold; + } + &:hover { + color: @main_color_a; + } + span { + height: 35px; + width: 130px; + display: inline-block; + } + } + } + } + &.item-click:hover .ps-container, + &.item-click:active .ps-container { + max-height: 500px; + border: 1px solid @func_color_b; + border-radius: 2px; + box-shadow: 0px 2px 2px 0px rgba(24, 24, 25, 0.1); + + div ul { + + } + } + } + } + + } + + .top-search { + position: relative; + flex-grow: 1; + padding: 0 20px; + + input.search-text { + .border-radius(2px); + width: 245px; + height: 32px; + line-height: 32px; + border: 1px solid @main_color_o; + outline: none; + text-indent: 10px; + + &::-webkit-input-placeholder { font-style: italic; } /* Safari, Chrome and Opera */ + &:-moz-placeholder { font-style: italic; } /* Firefox 18- */ + &::-moz-placeholder { font-style: italic; } /* Firefox 19+ */ + &:-ms-input-placeholder { font-style: italic; } /* IE 10+ */ + &:-ms-input-placeholder { font-style: italic; } /* Edge */ + /* font-style: italic; + }*/ + /* Firefox 18- */ + &::-moz-placeholder { + font-style: italic; + } + /* Firefox 19+ */ + &:-ms-input-placeholder { + font-style: italic; + } + /* IE 10+ */ + &:-ms-input-placeholder { + font-style: italic; + } + /* Edge */ + } + + .magnification { + position: absolute; + top: 19px; + right: 26px; + } + + } + + .notification-icon { + cursor: pointer; + flex-grow: 1; + margin: 0 10px 6px 0; + .sprite-new; + .vsp-list-icon; + + &:hover { + .vsp-list-icon-hover; + } + + &:active { + .vsp-list-icon-active; + } + + } + +} diff --git a/catalog-ui/src/app/directives/layout/top-nav/top-nav.ts b/catalog-ui/src/app/directives/layout/top-nav/top-nav.ts new file mode 100644 index 0000000000..c7208a909a --- /dev/null +++ b/catalog-ui/src/app/directives/layout/top-nav/top-nav.ts @@ -0,0 +1,141 @@ +'use strict'; +import {IAppConfigurtaion, IHostedApplication, IUserProperties} from "app/models"; +import {IUserResourceClass} from "app/services"; +import {MenuItemGroup, MenuItem} from "app/utils"; + +export interface ITopNavScope extends ng.IScope { + topLvlSelectedIndex:number; + hideSearch:boolean; + searchBind:any; + menuModel:Array<MenuItemGroup>; + + topLvlMenu:MenuItemGroup; + goToState(state:string, params:Array<any>):ng.IPromise<boolean>; + menuItemClick:Function; + user:IUserProperties; + version:string; +} + + +export class TopNavDirective implements ng.IDirective { + + constructor(private $filter:ng.IFilterService, + private $state:ng.ui.IStateService, + private $q:ng.IQService, + private userResourceService:IUserResourceClass, + private sdcConfig:IAppConfigurtaion) { + } + + public replace = true; + public restrict = 'E'; + public transclude = false; + + + scope = { + topLvlSelectedIndex: '@?', + hideSearch: '=', + searchBind: '=', + version: '@', + notificationIconCallback: '=', + menuModel: '=?', + }; + + template = ():string => { + return require('./top-nav.html'); + }; + + public link = (scope:ITopNavScope, $elem:ng.IAugmentedJQuery, $attrs:angular.IAttributes) => { + + let getTopLvlSelectedIndexByState = ():number => { + if (!scope.topLvlMenu.menuItems) { + return 0; + } + + let result = -1; + + //set result to current state + scope.topLvlMenu.menuItems.forEach((item:MenuItem, index:number)=> { + if (item.state === this.$state.current.name) { + result = index; + } + }); + + //if it's a different state , checking previous state param + if (result === -1) { + scope.topLvlMenu.menuItems.forEach((item:MenuItem, index:number)=> { + if (item.state === this.$state.params['previousState']) { + result = index; + } + }); + } + + if (result === -1) { + result = 0; + } + + return result; + }; + + scope.user = this.userResourceService.getLoggedinUser(); + + let tmpArray:Array<MenuItem> = [ + new MenuItem(this.$filter('translate')("TOP_MENU_HOME_BUTTON"), null, "dashboard", "goToState", null, null), + new MenuItem(this.$filter('translate')("TOP_MENU_CATALOG_BUTTON"), null, "catalog", "goToState", null, null) + ]; + + // Only designer can perform onboarding + if (scope.user && scope.user.role === 'DESIGNER') { + tmpArray.push(new MenuItem(this.$filter('translate')("TOP_MENU_ON_BOARD_BUTTON"), null, "onboardVendor", "goToState", null, null)); + _.each(this.sdcConfig.hostedApplications, (hostedApp:IHostedApplication)=> { + if (hostedApp.exists) { + tmpArray.push(new MenuItem(hostedApp.navTitle, null, hostedApp.defaultState, "goToState", null, null)); + } + }); + } + + scope.topLvlMenu = new MenuItemGroup(0, tmpArray, true); + scope.topLvlMenu.selectedIndex = isNaN(scope.topLvlSelectedIndex) ? getTopLvlSelectedIndexByState() : scope.topLvlSelectedIndex; + + let generateMenu = () => { + if (scope.menuModel && scope.menuModel[0] !== scope.topLvlMenu) { + scope.menuModel.unshift(scope.topLvlMenu); + } + }; + scope.$watch('menuModel', generateMenu); + + generateMenu(); + + /////scope functions//// + + scope.goToState = (state:string, params:Array<any>):ng.IPromise<boolean> => { + let deferred = this.$q.defer(); + this.$state.go(state, params && params.length > 0 ? [0] : undefined); + deferred.resolve(true); + return deferred.promise; + }; + + scope.menuItemClick = (itemGroup:MenuItemGroup, item:MenuItem) => { + + itemGroup.itemClick = false; + + let onSuccess = ():void => { + itemGroup.selectedIndex = itemGroup.menuItems.indexOf(item); + }; + let onFailed = ():void => { + }; + + if (item.callback) { + (item.callback.apply(undefined, item.params)).then(onSuccess, onFailed); + } else { + scope[item.action](item.state, item.params).then(onSuccess, onFailed); + } + }; + }; + + public static factory = ($filter:ng.IFilterService, $state:ng.ui.IStateService, $q:ng.IQService, userResourceService:IUserResourceClass, sdcConfig:IAppConfigurtaion)=> { + return new TopNavDirective($filter, $state, $q, userResourceService, sdcConfig); + }; + +} + +TopNavDirective.factory.$inject = ['$filter', '$state', '$q', 'Sdc.Services.UserResourceService', 'sdcConfig']; diff --git a/catalog-ui/src/app/directives/layout/top-progress/top-progress.html b/catalog-ui/src/app/directives/layout/top-progress/top-progress.html new file mode 100644 index 0000000000..ab2c8e364e --- /dev/null +++ b/catalog-ui/src/app/directives/layout/top-progress/top-progress.html @@ -0,0 +1,22 @@ +<div class="top-progress"> + + <!--======================= Top progress var =======================--> + <div data-ng-if="progressValue>0 && progressValue<100"> + <span class="sdc-progress-title">{{progressMessage}}<span class="progress-percentage">{{progressValue}} %</span></span> + <div class="sdc-progress"> + <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="{{progressValue}}" aria-valuemin="0" aria-valuemax="100" data-ng-style="{width: progressValue+'%'}"></div> + </div> + </div> + + <div class="sdc-progress-success-wrapper" data-ng-if="progressValue===100"> + <span class="sdc-progress-success"></span> + <span class="sdc-progress-success-title">{{progressMessage}}</span> + </div> + + <div class="sdc-progress-error-wrapper" data-ng-if="progressValue===-1"> + <span class="sdc-progress-error"></span> + <span class="sdc-progress-error-title">{{progressMessage}}</span> + </div> + <!--======================= Top progress var =======================--> + +</div> diff --git a/catalog-ui/src/app/directives/layout/top-progress/top-progress.less b/catalog-ui/src/app/directives/layout/top-progress/top-progress.less new file mode 100644 index 0000000000..ce70bd7378 --- /dev/null +++ b/catalog-ui/src/app/directives/layout/top-progress/top-progress.less @@ -0,0 +1,60 @@ +.top-progress { + text-align: left; + + .sdc-progress-title { + .n_12_r; + height: 17px; + display: block; + + .progress-percentage { + float: right; + } + } + + .sdc-progress { + position: relative; + display: block; + height: 6px; + background-color: @main_color_o; + border-radius: 3px; + box-shadow: inset 0 1px 2px rgba(0,0,0,.1); + + .progress-bar { + border-radius: 3px; + background-color: @main_color_a; + } + + } + + .sdc-progress-success-wrapper { + display: flex; + align-items: flex-end; + + .sdc-progress-success-title { + .d_12_r; + margin-left: 10px; + } + + .sdc-progress-success { + .sprite-new; + .success-circle; + } + } + + .sdc-progress-error-wrapper { + display: flex; + align-items: flex-end; + + .sdc-progress-error-title { + .q_12_r; + margin-left: 10px; + } + + .sdc-progress-error { + .sprite-new; + .error-icon; + } + + } + +} diff --git a/catalog-ui/src/app/directives/layout/top-progress/top-progress.ts b/catalog-ui/src/app/directives/layout/top-progress/top-progress.ts new file mode 100644 index 0000000000..06beb43ea1 --- /dev/null +++ b/catalog-ui/src/app/directives/layout/top-progress/top-progress.ts @@ -0,0 +1,36 @@ +'use strict'; + +export interface ITopProgressScope extends ng.IScope { + progressValue:number; + progressMessage:string; +} + +export class TopProgressDirective implements ng.IDirective { + + constructor() { + } + + public replace = true; + public restrict = 'E'; + public transclude = false; + + scope = { + progressValue: '=', + progressMessage: '=' + }; + + template = ():string => { + return require('./top-progress.html'); + }; + + public link = (scope:ITopProgressScope, $elem:ng.IAugmentedJQuery, $attrs:angular.IAttributes) => { + + }; + + public static factory = ()=> { + return new TopProgressDirective(); + }; + +} + +TopProgressDirective.factory.$inject = []; diff --git a/catalog-ui/src/app/directives/loader/loader-directive.html b/catalog-ui/src/app/directives/loader/loader-directive.html new file mode 100644 index 0000000000..e40b059a57 --- /dev/null +++ b/catalog-ui/src/app/directives/loader/loader-directive.html @@ -0,0 +1,4 @@ +<div data-ng-if="display" data-tests-id="tlv-loader"> + <div class="tlv-loader-back " data-ng-class="{'tlv-loader-relative':relative}"></div> + <div class="tlv-loader {{size}}"></div> +</div> diff --git a/catalog-ui/src/app/directives/loader/loader-directive.less b/catalog-ui/src/app/directives/loader/loader-directive.less new file mode 100644 index 0000000000..ae0b41aab1 --- /dev/null +++ b/catalog-ui/src/app/directives/loader/loader-directive.less @@ -0,0 +1,74 @@ +.tlv-loader-back { + background-color: @main_color_p; + position: fixed; + top: 50px; + left: 0; + right: 0; + bottom: 0; + z-index: 9999; + opacity: 0.5; +} + +.tlv-loader-relative { position: absolute; top: 0;} + +.tlv-loader { + z-index: 10002; +} + +@keyframes fadein { + from { opacity: 0; } + to { opacity: 0.8; } +} + +/* Firefox < 16 */ +@-moz-keyframes fadein { + from { opacity: 0; } + to { opacity: 0.8; } +} + +/* Safari, Chrome and Opera > 12.1 */ +@-webkit-keyframes fadein { + from { opacity: 0; } + to { opacity: 0.8; } +} + +/* Internet Explorer */ +@-ms-keyframes fadein { + from { opacity: 0; } + to { opacity: 0.8; } +} + +/* Opera < 12.1 */ +@-o-keyframes fadein { + from { opacity: 0; } + to { opacity: 0.8; } +} + +@keyframes fadeout { + from { opacity: 0.8; } + to { opacity: 0; } +} + +/* Firefox < 16 */ +@-moz-keyframes fadeout { + from { opacity: 0.8; } + to { opacity: 0; } +} + +/* Safari, Chrome and Opera > 12.1 */ +@-webkit-keyframes fadeout { + from { opacity: 0.8; } + to { opacity: 0; } +} + +/* Internet Explorer */ +@-ms-keyframes fadeout { + from { opacity: 0.8; } + to { opacity: 0; } +} + +/* Opera < 12.1 */ +@-o-keyframes fadeout { + from { opacity: 0.8; } + to { opacity: 0; } +} diff --git a/catalog-ui/src/app/directives/loader/loader-directive.ts b/catalog-ui/src/app/directives/loader/loader-directive.ts new file mode 100644 index 0000000000..aa9c4b09c4 --- /dev/null +++ b/catalog-ui/src/app/directives/loader/loader-directive.ts @@ -0,0 +1,155 @@ +/*- + * ============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========================================================= + */ +'use strict'; +import {EVENTS} from "app/utils"; +import {EventListenerService} from "app/services"; + +export interface ILoaderScope extends ng.IScope { + display:boolean; // Toggle show || hide scroll + size:string; // small || medium || large + elementSelector:string; // Jquery selector to hide and scroll inside + relative:boolean; // Will use the parent of <loader> element and hide it and scroll inside + loaderType:string; +} + +export class LoaderDirective implements ng.IDirective { + + constructor(private EventListenerService:EventListenerService) { + } + + /* + * relative is used when inserting the HTML loader inside some div <loader data-display="isLoading" relative="true"></loader> + * elementSelector when we want to pass the Jquery selector of the loader. + */ + scope = { + display: '=', + size: '@?', + elementSelector: '@?', + relative: '=?', + loaderType: '@?' + }; + + public replace = false; + public restrict = 'E'; + template = ():string => { + return require('./loader-directive.html'); + } + + link = (scope:ILoaderScope, element:any) => { + + let interval; + + this.EventListenerService.registerObserverCallback(EVENTS.SHOW_LOADER_EVENT, (loaderType)=> { + if (scope.loaderType !== loaderType) { + return; + } + scope.display = true; + }); + this.EventListenerService.registerObserverCallback(EVENTS.HIDE_LOADER_EVENT, (loaderType)=> { + if (scope.loaderType !== loaderType) { + return; + } + scope.display = false; + }); + + let calculateSizesForFixPosition = (positionStyle:string):void => { + // This is problematic, I do not want to change the parent position. + // set the loader on all the screen + let parentPosition = element.parent().position(); + let parentWidth = element.parent().width(); + let parentHeight = element.parent().height(); + element.css('position', positionStyle); + element.css('top', parentPosition.top); + element.css('left', parentPosition.left); + element.css('width', parentWidth); + element.css('height', parentHeight); + }; + + let 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. + interval = window.setInterval(()=> { + calculateSizesForFixPosition(positionStyle); + }, 2000); + break; + default: + // Can change the parent position to relative without causing style issues. + element.parent().css('position', 'relative'); + break; + } + }; + + // This should be executed after the dom loaded + window.setTimeout(():void => { + + element.css('display', 'none'); + + if (scope.elementSelector) { + let elemParent = angular.element(scope.elementSelector); + let positionStyle:string = elemParent.css('position'); + setStyle(positionStyle); + } + + if (scope.relative === true) { + let positionStyle:string = element.parent().css('position'); + setStyle(positionStyle); + } + + if (!scope.size) { + scope.size = 'large'; + } + + }, 0); + + if (scope.elementSelector) { + + } + + function cleanUp() { + clearInterval(interval); + } + + scope.$watch("display", (newVal, oldVal) => { + element.css('display', 'none'); + if (newVal === true) { + window.setTimeout(():void => { + element.css('display', 'block'); + }, 500); + } else { + window.setTimeout(():void => { + element.css('display', 'none'); + }, 0); + } + }); + + scope.$on('$destroy', cleanUp); + + }; + + public static factory = (EventListenerService:EventListenerService)=> { + return new LoaderDirective( EventListenerService); + }; + +} + +LoaderDirective.factory.$inject = ['EventListenerService']; diff --git a/catalog-ui/src/app/directives/modal/sdc-modal.html b/catalog-ui/src/app/directives/modal/sdc-modal.html new file mode 100644 index 0000000000..a8419f162d --- /dev/null +++ b/catalog-ui/src/app/directives/modal/sdc-modal.html @@ -0,0 +1,18 @@ +<div data-ng-class="{'w-sdc-modal': type===undefined, 'w-sdc-classic-modal': type==='classic'}"> + <div class="w-sdc-modal-head"> + <span data-ng-if="header" class="w-sdc-modal-head-text">{{header}}</span> + <span data-ng-if="headerTranslate" class="w-sdc-modal-head-text" translate="{{headerTranslate}}" translate-values="{{headerTranslateValues}}"></span> + <div data-ng-if="showCloseButton==='true'" class="w-sdc-modal-close" data-ng-click="cancel()"></div> + </div> + <div class="w-sdc-modal-body" data-ng-class="{'classic': type==='classic'}"> + <ng-transclude></ng-transclude> + </div> + <div class="w-sdc-modal-footer" data-ng-if="type==='classic' && buttons!==undefined"> + <button data-ng-repeat="button in buttons" + data-tests-id="{{button.name}}" + class="tlv-btn {{button.css}}" + data-ng-class="{'disabled': button.disabled===true}" + data-ng-disabled="button.disabled===true" + data-ng-click="button.callback()">{{button.name}}</button> + </div> +</div> diff --git a/catalog-ui/src/app/directives/modal/sdc-modal.less b/catalog-ui/src/app/directives/modal/sdc-modal.less new file mode 100644 index 0000000000..d8dfdbb73b --- /dev/null +++ b/catalog-ui/src/app/directives/modal/sdc-modal.less @@ -0,0 +1,10 @@ +.ellipsis-directive-more-less { + .a_9; + .bold; + .hand; + float: right; + margin-right: 17px; + line-height: 23px; + text-decoration: underline; + text-align: left; +} diff --git a/catalog-ui/src/app/directives/modal/sdc-modal.ts b/catalog-ui/src/app/directives/modal/sdc-modal.ts new file mode 100644 index 0000000000..aedc28262f --- /dev/null +++ b/catalog-ui/src/app/directives/modal/sdc-modal.ts @@ -0,0 +1,80 @@ +'use strict'; + +export interface ISdcModalScope extends ng.IScope { + modal:ng.ui.bootstrap.IModalServiceInstance; + hideBackground:string; + ok():void; + close(result:any):void; + cancel(reason:any):void; +} + +export interface ISdcModalButton { + name:string; + css:string; + disabled?:boolean; + callback:Function; +} + +export class SdcModalDirective implements ng.IDirective { + + constructor() { + } + + scope = { + modal: '=', + type: '@', + header: '@', + headerTranslate: '@', + headerTranslateValues: '@', + showCloseButton: '@', + hideBackground: '@', + buttons: '=', + getCloseModalResponse: '=' + }; + + public replace = true; + public restrict = 'E'; + public transclude = true; + + template = ():string => { + return require('./sdc-modal.html'); + }; + + link = (scope:ISdcModalScope, $elem:any) => { + + if (scope.hideBackground === "true") { + $(".modal-backdrop").css('opacity', '0'); + } + + scope.close = function (result:any) { + scope.modal.close(result); + }; + + scope.ok = function () { + scope.modal.close(); + }; + + scope.cancel = function (reason:any) { + if (this.getCloseModalResponse) + scope.modal.dismiss(this.getCloseModalResponse()); + else { + scope.modal.dismiss(); + } + }; + + if (scope.modal) { + scope.modal.result.then(function (selectedItem) { + //$scope.selected = selectedItem; + }, function () { + //console.info('Modal dismissed at: ' + new Date()); + }); + } + } + + public static factory = ()=> { + return new SdcModalDirective(); + }; + +} + +SdcModalDirective.factory.$inject = []; diff --git a/catalog-ui/src/app/directives/perfect-scrollbar/angular-perfect-scrollbar.ts b/catalog-ui/src/app/directives/perfect-scrollbar/angular-perfect-scrollbar.ts new file mode 100644 index 0000000000..914a7049bb --- /dev/null +++ b/catalog-ui/src/app/directives/perfect-scrollbar/angular-perfect-scrollbar.ts @@ -0,0 +1,125 @@ +'use strict'; + +export interface IPerfectScrollerScope extends ng.IScope { + //update(event:string): void; +} + +export class PerfectScrollerDirective implements ng.IDirective { + + constructor(private $parse:any) { + + } + + replace = true; + restrict = 'EA'; + transclude = true; + + template = ():string => { + return '<div><div ng-transclude=""></div></div>'; + }; + + link = ($scope:IPerfectScrollerScope, $elem, $attr) => { + let self = this; + let options = {}; + + let psOptions = [ + 'wheelSpeed', 'wheelPropagation', 'minScrollbarLength', 'useBothWheelAxes', + 'useKeyboard', 'suppressScrollX', 'suppressScrollY', 'scrollXMarginOffset', + 'scrollYMarginOffset', 'includePadding'//, 'onScroll', 'scrollDown' + ]; + + for (let i = 0, l = psOptions.length; i < l; i++) { + let opt = psOptions[i]; + if ($attr[opt] !== undefined) { + options[opt] = self.$parse($attr[opt])(); + } + } + + $scope.$evalAsync(function () { + $elem.perfectScrollbar(options); + let onScrollHandler = self.$parse($attr.onScroll) + $elem.scroll(function () { + let scrollTop = $elem.scrollTop() + let scrollHeight = $elem.prop('scrollHeight') - $elem.height() + $scope.$apply(function () { + onScrollHandler($scope, { + scrollTop: scrollTop, + scrollHeight: scrollHeight + }) + }) + }); + }); + + /* + $scope.update = (event:string): void => { + $scope.$evalAsync(function() { + //if ($attr.scrollDown == 'true' && event != 'mouseenter') { + if (event != 'mouseenter') { + setTimeout(function () { + $($elem).scrollTop($($elem).prop("scrollHeight")); + }, 100); + } + $elem.perfectScrollbar('update'); + }); + }; + */ + + // This is necessary when you don't watch anything with the scrollbar + $elem.bind('mouseenter', function () { + //console.log("mouseenter"); + $elem.perfectScrollbar('update'); + }); + + $elem.bind('mouseleave', function () { + //console.log("mouseleave"); + setTimeout(function () { + $(window).trigger('mouseup'); + $elem.perfectScrollbar('update'); + }, 10); + }); + + $elem.bind('click', function () { + //console.log("click"); + // Wait 500 milliseconds until the collapse finish closing and update. + setTimeout(function () { + $elem.perfectScrollbar('update'); + }, 500); + }); + + /** + * Check if the content of the scroller was changed, and if changed update the scroller. + * Because DOMSubtreeModified event is fire many time (while filling the content), I'm checking that + * there is at least 100 milliseconds between DOMSubtreeModified events to update the scrollbar. + * @type {boolean} + */ + let insideDOMSubtreeModified = false; + $elem.bind('DOMSubtreeModified', function () { + if (insideDOMSubtreeModified == false) { + insideDOMSubtreeModified = true; + setTimeout(function () { + insideDOMSubtreeModified = false; + $elem.perfectScrollbar('update'); + }, 100); + } + }); + + // Possible future improvement - check the type here and use the appropriate watch for non-arrays + if ($attr.refreshOnChange) { + $scope.$watchCollection($attr.refreshOnChange, function () { + $elem.perfectScrollbar('update'); + }); + } + + $elem.bind('$destroy', function () { + $elem.perfectScrollbar('destroy'); + }); + + }; + + public static factory = ($parse:any)=> { + return new PerfectScrollerDirective($parse); + }; + +} + +PerfectScrollerDirective.factory.$inject = ['$parse']; diff --git a/catalog-ui/src/app/directives/print-graph-screen/print-graph-screen.ts b/catalog-ui/src/app/directives/print-graph-screen/print-graph-screen.ts new file mode 100644 index 0000000000..a6e07eefee --- /dev/null +++ b/catalog-ui/src/app/directives/print-graph-screen/print-graph-screen.ts @@ -0,0 +1,190 @@ +'use strict'; +import {IAppMenu, Component, IAppConfigurtaion} from "app/models"; +import {UrlToBase64Service} from "app/services"; + +export interface IPrintGraphScreenScope extends ng.IScope { + entity:Component; +} + + +export class PrintGraphScreenDirective implements ng.IDirective { + + constructor(private $filter:ng.IFilterService, + private sdcMenu:IAppMenu, + private sdcConfig:IAppConfigurtaion, + private urlToBase64Service:UrlToBase64Service) { + } + + scope = { + entity: '=' + }; + restrict = 'A'; + link = (scope:IPrintGraphScreenScope, element:any) => { + + + element.bind('click', function () { + printScreen(); + }); + + + let printScreen = ():void => { + // + // let pdf :any = new jsPDF('landscape', 'mm', 'a4'); + // pdf.setProperties({ + // title: scope.entity.name, + // subject: 'Design Snapshot for ' + scope.entity.name, + // author: scope.entity.creatorFullName, + // keywords: scope.entity.tags.join(', '), + // creator: scope.entity.creatorFullName + // }); + // + // // A4 measures is 210 × 297 millimeters + // let pdfWidth :number = 297, + // pdfHeight :number = 210, + // leftColumnWidth :number = 80; + // + // //left bar background + // pdf.setDrawColor(0); + // pdf.setFillColor(248, 249, 251); + // pdf.rect(0, 0, leftColumnWidth, pdfHeight, 'F'); + // + // //entity name + // pdf.setFontSize(12); + // pdf.setTextColor(38, 61, 77); + // let splitTitle :any = pdf.splitTextToSize(scope.entity.name, 50); + // pdf.text(22, 15 - (splitTitle.length - 1) * 2, splitTitle); + // + // //line + // pdf.setLineWidth(0.2); + // pdf.setDrawColor(208, 209, 213); + // pdf.line(0, 28, leftColumnWidth, 28); + // + // + // pdf.setFontSize(10); + // let properties :any = getPdfProperties(); + // + // let topOffset :number = 39, lines; + // properties.forEach( (item:any) => { + // if (!item.value) { + // return; + // } + // if (item.title === 'Description:') { + // topOffset += 5; + // } + // + // pdf.setTextColor(38, 61, 77); + // pdf.text(5, topOffset, item.title); + // pdf.setTextColor(102, 102, 102); + // lines = pdf.splitTextToSize(item.value, 49); + // pdf.text(5 + item.offset, topOffset, lines[0]); + // if (lines.length > 1) { + // lines = pdf.splitTextToSize(item.value.substring(lines[0].length + 1), 65); + // if (lines.length > 8) { + // lines = lines.slice(0, 7); + // lines[lines.length - 1] += '...'; + // } + // pdf.text(5, topOffset + 4, lines); + // topOffset += 4 * (lines.length); + // } + // + // topOffset += 6; + // }); + // + // + // //another background in case the text was too long + // let declarationLineOffset :number = 176; + // pdf.setDrawColor(0); + // pdf.setFillColor(248, 249, 251); + // pdf.rect(0, declarationLineOffset, leftColumnWidth, pdfHeight - declarationLineOffset, 'F'); + // //line + // pdf.setLineWidth(0.2); + // pdf.setDrawColor(208, 209, 213); + // pdf.line(0, declarationLineOffset, leftColumnWidth, declarationLineOffset); + // + // //declaration + // pdf.setFontSize(10.5); + // pdf.setTextColor(38, 61, 77); + // pdf.text(5, 185, 'Declaration'); + // pdf.setFontSize(9); + // pdf.setTextColor(102, 102, 102); + // pdf.setFontType('bold'); + // pdf.text(5, 190, this.$filter('translate')('PDF_FILE_DECLARATION_BOLD')); + // pdf.setFontType('normal'); + // pdf.text(5, 194, pdf.splitTextToSize(this.$filter('translate')('PDF_FILE_DECLARATION'), 65)); + // + // //entity icon + // let self = this; + // let addEntityIcon:Function = () => { + // let iconPath:string = self.sdcConfig.imagesPath + '/styles/images/'; + // if (scope.entity.isService()) { + // iconPath += 'service-icons/' + scope.entity.icon + '.png'; + // } else { + // iconPath += 'resource-icons/' + scope.entity.icon + '.png'; + // } + // self.urlToBase64Service.downloadUrl(iconPath, (base64string:string):void => { + // if (base64string) { + // pdf.addImage(base64string, 'JPEG', 5, 7, 15, 15); + // } + // pdf.save(scope.entity.name + '.pdf'); + // }); + // }; + // + // //actual snapshop of canvas + // let diagramDiv :any = document.getElementById('myDiagram'); + // let diagram :go.Diagram = go.Diagram.fromDiv(diagramDiv), canvasImg = new Image(); + // diagram.startTransaction('print screen'); + // let canvasImgBase64:any = diagram.makeImageData({ + // //scale: 1, + // size: new go.Size(pdfHeight * 5, NaN), + // background: 'white', + // type: 'image/jpeg' + // }); + // diagramDiv.firstElementChild.toDataURL(); + // diagram.commitTransaction('print screen'); + // + // canvasImg.onload = () => { + // if (canvasImg.height > 0) { + // let canvasImgRatio:number = Math.min((pdfWidth - leftColumnWidth - 15) / canvasImg.width, pdfHeight / canvasImg.height); + // let canvasImgWidth:number = canvasImg.width * canvasImgRatio, + // canvasImgHeight:number = canvasImg.height * canvasImgRatio; + // let canvasImgOffset:number = (pdfHeight - canvasImgHeight) / 2; + // pdf.addImage(canvasImg, 'JPEG', leftColumnWidth, canvasImgOffset, canvasImgWidth, canvasImgHeight); + // + // addEntityIcon(); + // } + // }; + // + // if(canvasImg.src === 'data:,') { //empty canvas + // addEntityIcon(); + // } else { + // canvasImg.src = canvasImgBase64; + // } + }; + + + let getPdfProperties = ():Array<any> => { + // return [ + // {title: this.$filter('translate')('GENERAL_LABEL_TYPE'), value: scope.entity.getComponentSubType(), offset: 10}, + // {title: this.$filter('translate')('GENERAL_LABEL_VERSION'), value: scope.entity.version, offset: 15}, + // {title: this.$filter('translate')('GENERAL_LABEL_CATEGORY'), value: scope.entity.categories.length ? scope.entity.categories[0].name : '', offset: 16}, + // {title: this.$filter('translate')('GENERAL_LABEL_CREATION_DATE'), value: this.$filter('date')(scope.entity.creationDate, 'MM/dd/yyyy'), offset: 24}, + // {title: this.$filter('translate')('GENERAL_LABEL_AUTHOR'), value: scope.entity.creatorFullName, offset: 13}, + // {title: this.$filter('translate')('GENERAL_LABEL_CONTACT_ID'), value: scope.entity.contactId, offset: 41}, + // {title: this.$filter('translate')('GENERAL_LABEL_STATUS'), value: (<any>this.sdcMenu).LifeCycleStatuses[scope.entity.lifecycleState].text, offset: 13}, + // {title: this.$filter('translate')('GENERAL_LABEL_PROJECT_CODE'), value: scope.entity.projectCode, offset: 15}, + // {title: this.$filter('translate')('GENERAL_LABEL_DESCRIPTION'), value: scope.entity.description, offset: 20}, + // {title: this.$filter('translate')('GENERAL_LABEL_TAGS'), value: scope.entity.tags.join(', '), offset: 10} + // ]; + return null; + }; + + + }; + + public static factory = ($filter:ng.IFilterService, sdcMenu:IAppMenu, sdcConfig:IAppConfigurtaion, urlToBase64Service:UrlToBase64Service)=> { + return new PrintGraphScreenDirective($filter, sdcMenu, sdcConfig, urlToBase64Service); + }; + +} + +PrintGraphScreenDirective.factory.$inject = ['$filter', 'sdcMenu', 'sdcConfig', 'Sdc.Services.UrlToBase64Service']; diff --git a/catalog-ui/src/app/directives/property-types/data-type-fields-structure/data-type-fields-structure.html b/catalog-ui/src/app/directives/property-types/data-type-fields-structure/data-type-fields-structure.html new file mode 100644 index 0000000000..b62824d544 --- /dev/null +++ b/catalog-ui/src/app/directives/property-types/data-type-fields-structure/data-type-fields-structure.html @@ -0,0 +1,83 @@ +<div class="data-type-fields-structure"> + <div class="open-close"> + <div class="open-close-button" data-ng-class="{'expand':expand,'collapse':!expand}" data-ng-click="expandAndCollapse()"></div> + <span class="data-type-name">{{typeName.replace("org.openecomp.datatypes.heat.","")}}</span> + </div> + <div data-ng-show="expand" data-ng-repeat="property in dataTypeProperties" class="property"> + <div class="i-sdc-form-item property-name"> + <div tooltips tooltip-content="{{property.name}}"> + <input class="i-sdc-form-input" + type="text" + data-ng-disabled="true" + value="{{property.name}}"/> + </div> + </div> + <!--<div class="property-value">--> + <div data-ng-if="dataTypesService.isDataTypeForDataTypePropertyType(property)" class="inner-structure"> + <fields-structure value-obj-ref="(valueObjRef[property.name])" + type-name="property.type" + parent-form-obj="parentFormObj" + fields-prefix-name="fieldsPrefixName+property.name" + read-only="readOnly" + default-value="{{currentTypeDefaultValue[property.name]}}"> + + </fields-structure> + </div> + <div data-ng-if="!dataTypesService.isDataTypeForDataTypePropertyType(property)" ng-switch="property.type"> + <div ng-switch-when="map"> + <type-map value-obj-ref="valueObjRef[property.name]" + schema-property="property.schema.property" + parent-form-obj="parentFormObj" + fields-prefix-name="fieldsPrefixName+property.name" + read-only="readOnly" + default-value="{{currentTypeDefaultValue[property.name]}}" + types="types"></type-map> + </div> + <div ng-switch-when="list"> + <type-list value-obj-ref="valueObjRef[property.name]" + schema-property="property.schema.property" + parent-form-obj="parentFormObj" + fields-prefix-name="fieldsPrefixName+property.name" + read-only="readOnly" + default-value="{{currentTypeDefaultValue[property.name]}}" + types="types"></type-list> + </div> + <div ng-switch-default class="primitive-value-field"> + <div class="i-sdc-form-item" data-ng-class="{error:(parentFormObj[fieldsPrefixName+property.name].$dirty && parentFormObj[fieldsPrefixName+property.name].$invalid)}"> + <input class="i-sdc-form-input" + data-tests-id="{{fieldsPrefixName+property.name}}" + ng-if="!((property.simpleType||property.type) == 'boolean')" + data-ng-maxlength="100" + data-ng-disabled="readOnly" + maxlength="{{(property.simpleType||property.type) == 'integer'? 10 : 100}}" + data-ng-model="valueObjRef[property.name]" + type="text" + name="{{fieldsPrefixName+property.name}}" + data-ng-pattern="getValidationPattern((property.simpleType||property.type))" + data-ng-model-options="{ debounce: 200 }" + data-ng-change="inputOnValueChange(property)" + autofocus /> + <select class="i-sdc-form-select" + data-tests-id="{{fieldsPrefixName+property.name}}" + ng-if="(property.simpleType||property.type) == 'boolean'" + data-ng-disabled="readOnly" + name="{{fieldsPrefixName+property.name}}" + data-ng-change="onValueChange(property.name,'boolean')" + data-ng-model="valueObjRef[property.name]" + data-ng-options="option.v as option.n for option in [{ n: '', v: undefined }, { n: 'false', v: false }, { n: 'true', v: true }]"> + </select> + + <div class="input-error" data-ng-show="parentFormObj[fieldsPrefixName+property.name].$dirty && parentFormObj[fieldsPrefixName+property.name].$invalid"> + <span ng-show="parentFormObj[fieldsPrefixName+property.name].$error.maxlength" translate="VALIDATION_ERROR_MAX_LENGTH" translate-values="{'max': '100' }"></span> + <span ng-show="parentFormObj[fieldsPrefixName+property.name].$error.pattern" translate="PROPERTY_EDIT_PATTERN"></span> + <span ng-show="parentFormObj[fieldsPrefixName+property.name].$error.customValidation" translate="PROPERTY_EDIT_MAP_UNIQUE_KEYS"></span> + </div> + </div> + </div> + </div> + <!--</div>--> + + </div> +</div> + + diff --git a/catalog-ui/src/app/directives/property-types/data-type-fields-structure/data-type-fields-structure.less b/catalog-ui/src/app/directives/property-types/data-type-fields-structure/data-type-fields-structure.less new file mode 100644 index 0000000000..5c65fdc9dc --- /dev/null +++ b/catalog-ui/src/app/directives/property-types/data-type-fields-structure/data-type-fields-structure.less @@ -0,0 +1,90 @@ +.data-type-fields-structure{ + background-color: @tlv_color_v; + padding:10px; + display: table-caption; + .open-close{ + position: relative; + .open-close-button{ + position: absolute; + top: 50%; + margin-top: -7px; + &.expand{ + .sprite-new; + .expand-collapse-minus-icon; + } + &.collapse{ + .sprite-new; + .expand-collapse-plus-icon; + } + } + + } + + + .data-type-name{ + .m_16_m; + margin-left: 22px; + } + + .i-sdc-form-input:disabled{ + .disabled; + } + + .property{ + display: flex; + min-width: 365px; + min-height: 46px; + input[type="text"],select{ + width: 170px; + } + .property-name{ + float: left; + margin-top: 8px; + } + .primitive-value-field{ + float: right; + margin-top: 8px; + margin-left: 10px; + } + .inner-structure{ + display: -webkit-box; + } + } + + [ng-switch-when="map"]{ + margin-top: 8px; + margin-left: 10px; + .map-item{ + border: solid 1px @main_color_o; + min-width: 401px; + min-height: 69px; + float: none !important; + } + .add-map-item{ + width: auto; + float: none; + &:nth-child(1){ + position: relative; + top: 6px; + } + .add-btn{ + float: none; + } + } + + } + + [ng-switch-when="list"]{ + float: left; + margin-top: 8px; + margin-left: 10px; + min-width: 280px; + .dt-list-item { + border: solid 1px @main_color_o; + } + .list-value-items{ + width:280px; + } + } +} + diff --git a/catalog-ui/src/app/directives/property-types/data-type-fields-structure/data-type-fields-structure.ts b/catalog-ui/src/app/directives/property-types/data-type-fields-structure/data-type-fields-structure.ts new file mode 100644 index 0000000000..2506dbe400 --- /dev/null +++ b/catalog-ui/src/app/directives/property-types/data-type-fields-structure/data-type-fields-structure.ts @@ -0,0 +1,154 @@ +/** + * Created by obarda on 1/27/2016. + */ +'use strict'; +import {DataTypesService} from "app/services"; +import { ValidationUtils } from "app/utils"; +import { DataTypePropertyModel } from "app/models/data-type-properties"; +import { DataTypesMap} from "app/models"; + +export interface IDataTypeFieldsStructureScope extends ng.IScope { + parentFormObj:ng.IFormController; + dataTypeProperties:Array<DataTypePropertyModel>; + typeName:string; + valueObjRef:any; + propertyNameValidationPattern:RegExp; + fieldsPrefixName:string; + readOnly:boolean; + currentTypeDefaultValue:any; + types:DataTypesMap; + expandByDefault:boolean; + expand:boolean; + expanded:boolean; + dataTypesService:DataTypesService; + + expandAndCollapse():void; + getValidationPattern(type:string):RegExp; + validateIntRange(value:string):boolean; + onValueChange(propertyName:string, type:string):void + inputOnValueChange(property:any):void; +} + + +export class DataTypeFieldsStructureDirective implements ng.IDirective { + + constructor(private DataTypesService:DataTypesService, + private PropertyNameValidationPattern:RegExp, + private ValidationUtils:ValidationUtils) { + } + + scope = { + valueObjRef: '=', + typeName: '=', + parentFormObj: '=', + fieldsPrefixName: '=', + readOnly: '=', + defaultValue: '@', + // types: '=', + expandByDefault: '=' + }; + + restrict = 'E'; + replace = true; + template = ():string => { + return require('./data-type-fields-structure.html'); + }; + //public types=Utils.Constants.PROPERTY_DATA.TYPES; + + //get data type properties array and return object with the properties and their default value + //(for example: get: [{name:"prop1",defaultValue:1 ...},{name:"prop2", defaultValue:"bla bla" ...}] + // return: {prop1: 1, prop2: "bla bla"} + private getDefaultValue = (dataTypeProperties:Array<DataTypePropertyModel>):any => { + let defaultValue = {}; + for (let i = 0; i < dataTypeProperties.length; i++) { + if (dataTypeProperties[i].type != 'string') { + if (!angular.isUndefined(dataTypeProperties[i].defaultValue)) { + defaultValue[dataTypeProperties[i].name] = JSON.parse(dataTypeProperties[i].defaultValue); + } + } else { + defaultValue[dataTypeProperties[i].name] = dataTypeProperties[i].defaultValue; + } + } + return defaultValue; + }; + + private initDataOnScope = (scope:any, $attr:any):void => { + scope.dataTypesService = this.DataTypesService; + scope.dataTypeProperties = this.DataTypesService.getFirsLevelOfDataTypeProperties(scope.typeName); + if ($attr.defaultValue) { + scope.currentTypeDefaultValue = JSON.parse($attr.defaultValue); + } else { + scope.currentTypeDefaultValue = this.getDefaultValue(scope.dataTypeProperties); + } + + if (!scope.valueObjRef) { + scope.valueObjRef = {}; + } + + _.forEach(scope.currentTypeDefaultValue, (value, key)=> { + if (angular.isUndefined(scope.valueObjRef[key])) { + if (typeof scope.currentTypeDefaultValue[key] == 'object') { + angular.copy(scope.currentTypeDefaultValue[key], scope.valueObjRef[key]); + } else { + scope.valueObjRef[key] = scope.currentTypeDefaultValue[key]; + } + } + }); + }; + + private rerender = (scope:any):void => { + scope.expanded = false; + scope.expand = false; + if (scope.expandByDefault) { + scope.expandAndCollapse(); + } + }; + + link = (scope:IDataTypeFieldsStructureScope, element:any, $attr:any) => { + scope.propertyNameValidationPattern = this.PropertyNameValidationPattern; + + scope.$watchCollection('[typeName,fieldsPrefixName]', (newData:any):void => { + this.rerender(scope); + }); + + + scope.expandAndCollapse = ():void => { + if (!scope.expanded) { + this.initDataOnScope(scope, $attr); + scope.expanded = true; + } + scope.expand = !scope.expand; + }; + + scope.getValidationPattern = (type:string):RegExp => { + return this.ValidationUtils.getValidationPattern(type); + }; + + scope.validateIntRange = (value:string):boolean => { + return !value || this.ValidationUtils.validateIntRange(value); + }; + + scope.onValueChange = (propertyName:string, type:string):void => { + scope.valueObjRef[propertyName] = !angular.isUndefined(scope.valueObjRef[propertyName]) ? scope.valueObjRef[propertyName] : scope.currentTypeDefaultValue[propertyName]; + if (scope.valueObjRef[propertyName] && type != 'string') { + scope.valueObjRef[propertyName] = JSON.parse(scope.valueObjRef[propertyName]); + } + }; + + scope.inputOnValueChange = (property:any) => { + + let value = !scope.parentFormObj[scope.fieldsPrefixName + property.name].$error.pattern + && ('integer' == property.type && scope.parentFormObj[scope.fieldsPrefixName + property.name].$setValidity('pattern', scope.validateIntRange(scope.valueObjRef[property.name])) + || scope.onValueChange(property.name, (property.simpleType || property.type))); + return value; + } + }; + + public static factory = (DataTypesService:DataTypesService, + PropertyNameValidationPattern:RegExp, + ValidationUtils:ValidationUtils)=> { + return new DataTypeFieldsStructureDirective(DataTypesService, PropertyNameValidationPattern, ValidationUtils); + }; +} + +DataTypeFieldsStructureDirective.factory.$inject = ['Sdc.Services.DataTypesService', 'PropertyNameValidationPattern', 'ValidationUtils']; diff --git a/catalog-ui/src/app/directives/property-types/type-list/type-list-directive.html b/catalog-ui/src/app/directives/property-types/type-list/type-list-directive.html new file mode 100644 index 0000000000..138e848e59 --- /dev/null +++ b/catalog-ui/src/app/directives/property-types/type-list/type-list-directive.html @@ -0,0 +1,56 @@ +<div> + <div data-ng-if="!isSchemaTypeDataType"> + <div class="i-sdc-form-item list-new-item" data-ng-class="{error:(parentFormObj['listNewItem'+fieldsPrefixName].$dirty && parentFormObj['listNewItem'+fieldsPrefixName].$invalid)}"> + <input class="i-sdc-form-input" + data-tests-id="listNewItem{{fieldsPrefixName}}" + ng-if="!((schemaProperty.simpleType||schemaProperty.type) == 'boolean')" + data-ng-disabled="readOnly" + data-ng-model="listNewItem.value" + type="text" + name="listNewItem{{fieldsPrefixName}}" + data-ng-pattern="getValidationPattern((schemaProperty.simpleType||schemaProperty.type))" + data-ng-model-options="{ debounce: 200 }" + placeholder="Type a value and then click ADD" + data-ng-maxlength="maxLength" + maxlength="{{maxLength}}" + sdc-keyboard-events="" key-enter="schemaProperty.type && !parentFormObj['listNewItem'+fieldsPrefixName].$invalid && listNewItem.value && addListItem" + autofocus /> + <select class="i-sdc-form-select" + data-tests-id="listNewItem{{fieldsPrefixName}}" + ng-if="(schemaProperty.simpleType||schemaProperty.type) == 'boolean'" + data-ng-disabled="readOnly" + name="listNewItem{{fieldsPrefixName}}" + data-ng-model="listNewItem.value"> + <option value="true">true</option> + <option value="false">false</option> + </select> + <div class="input-error" data-ng-show="parentFormObj['listNewItem'+fieldsPrefixName].$dirty && parentFormObj['listNewItem'+fieldsPrefixName].$invalid"> + <span ng-show="parentFormObj['listNewItem'+fieldsPrefixName].$error.pattern" translate="PROPERTY_EDIT_PATTERN"></span> + <span ng-show="parentFormObj['listNewItem'+fieldsPrefixName].$error.maxlength" translate="VALIDATION_ERROR_MAX_LENGTH" translate-values="{'max': '{{maxLength}}' }"></span> + </div> + </div> + <div class="add-btn add-list-item" data-tests-id="add-list-item{{fieldsPrefixName}}" + data-ng-class="{'disabled': readOnly || !schemaProperty.type || parentFormObj['listNewItem'+fieldsPrefixName].$invalid || !listNewItem.value}" data-ng-click="addListItem()">Add</div> + <div class="list-value-items"> + <span class="list-value-item" data-ng-repeat="value in valueObjRef track by $index"> + {{value}} + <span ng-if="!readOnly" class="delete-list-item sprite-new small-x-button" data-ng-click="deleteListItem($index)"></span> + </span> + </div> + </div> + <div data-ng-if="isSchemaTypeDataType"> + <div class="dt-list"> + <div data-ng-repeat="value in valueObjRef track by $index" class="dt-list-item"> + <span class="delete-dt-list-item" data-ng-click="deleteListItem($index)"></span> + <fields-structure value-obj-ref="valueObjRef[$index]" + type-name="schemaProperty.type" + parent-form-obj="parentFormObj" + fields-prefix-name="fieldsPrefixName+''+$index" + read-only="readOnly"></fields-structure> + </div> + <div class="add-btn add-list-item" data-tests-id="add-list-item" + data-ng-class="{'disabled': readOnly}" data-ng-click="listNewItem.value='{}';addListItem();">Add</div> + </div> + + </div> +</div> diff --git a/catalog-ui/src/app/directives/property-types/type-list/type-list-directive.less b/catalog-ui/src/app/directives/property-types/type-list/type-list-directive.less new file mode 100644 index 0000000000..71263f2642 --- /dev/null +++ b/catalog-ui/src/app/directives/property-types/type-list/type-list-directive.less @@ -0,0 +1,85 @@ +.list-new-item{ + float: left; + width: 50%; + min-width: 221px; + margin-right: 15px; + input{ + min-width: 221px; + } +} + +.list-value-items{ + -webkit-border-radius: 2px; + -moz-border-radius: 2px; + border-radius: 2px; + border: 1px solid @main_color_o; + padding-bottom: 10px; + min-height: 100px; + clear: both; + background-color: white; + .list-value-item{ + display: inline-block; + background-color: @tlv_color_v; + margin: 10px 0 0 10px; + padding: 0 8px; + .delete-list-item{ + margin: 0 0 0 2px; + .hand; + } + } +} + +.add-btn { + .f-color.a; + .f-type._14_m; + .hand; + + &.add-list-item { + float: left; + margin-top: 5px; + width: 44px; + } + + &:before { + .sprite-new; + .plus-icon; + margin-right: 5px; + content: ""; + + } + &:hover { + .f-color.b; + &:before { + .sprite-new; + .plus-icon-hover; + } + } + +} + +.dt-list{ + display: table-caption; + .dt-list-item { + border-radius: 3px; + background-color: @tlv_color_v; + display: inline-block; + .delete-dt-list-item{ + float: right; + position: relative; + top: 5px; + right: 5px; + .sprite-new; + .delete-icon; + &:hover{ + .delete-icon-hover; + } + } + .data-type-name{ + margin-right: 16px; + } + } + &>.add-list-item{ + float:none; + } +} + diff --git a/catalog-ui/src/app/directives/property-types/type-list/type-list-directive.ts b/catalog-ui/src/app/directives/property-types/type-list/type-list-directive.ts new file mode 100644 index 0000000000..ac5da2be73 --- /dev/null +++ b/catalog-ui/src/app/directives/property-types/type-list/type-list-directive.ts @@ -0,0 +1,106 @@ +/** + * Created by rcohen on 9/15/2016. + */ +'use strict'; +import {SchemaProperty} from "app/models"; +import {ValidationUtils, PROPERTY_TYPES} from "app/utils"; +import {DataTypesService} from "app/services"; + +export interface ITypeListScope extends ng.IScope { + parentFormObj:ng.IFormController; + schemaProperty:SchemaProperty; + isSchemaTypeDataType:boolean; + valueObjRef:any; + propertyNameValidationPattern:RegExp; + fieldsPrefixName:string; + readOnly:boolean; + listDefaultValue:any; + listNewItem:any; + maxLength:number; + + getValidationPattern(type:string):RegExp; + validateIntRange(value:string):boolean; + addListItem():void; + deleteListItem(listItemIndex:number):void +} + + +export class TypeListDirective implements ng.IDirective { + + constructor(private DataTypesService:DataTypesService, + private PropertyNameValidationPattern:RegExp, + private ValidationUtils:ValidationUtils) { + } + + scope = { + valueObjRef: '=',//ref to list object in the parent value object + schemaProperty: '=',//get the schema.property object + parentFormObj: '=',//ref to parent form (get angular form object) + fieldsPrefixName: '=',//prefix for form fields names + readOnly: '=',//is form read only + defaultValue: '@',//this list default value + maxLength: '=' + }; + + restrict = 'E'; + replace = true; + template = ():string => { + return require('./type-list-directive.html'); + }; + + link = (scope:ITypeListScope, element:any, $attr:any) => { + scope.propertyNameValidationPattern = this.PropertyNameValidationPattern; + + //reset valueObjRef when schema type is changed + scope.$watchCollection('schemaProperty.type', (newData:any):void => { + scope.isSchemaTypeDataType = this.DataTypesService.isDataTypeForSchemaType(scope.schemaProperty); + //insert 1 empty item dt by default + if (scope.isSchemaTypeDataType && (!scope.valueObjRef || !scope.valueObjRef.length)) { + scope.valueObjRef = scope.valueObjRef || []; + scope.valueObjRef.push({}); + } + }); + + //when user brows between properties in "edit property form" + scope.$watchCollection('fieldsPrefixName', (newData:any):void => { + scope.listNewItem = {value: ''}; + + if ($attr.defaultValue) { + scope.listDefaultValue = JSON.parse($attr.defaultValue); + } + }); + + scope.getValidationPattern = (type:string):RegExp => { + return this.ValidationUtils.getValidationPattern(type); + }; + + scope.validateIntRange = (value:string):boolean => { + return !value || this.ValidationUtils.validateIntRange(value); + }; + + scope.addListItem = ():void => { + scope.valueObjRef = scope.valueObjRef || []; + let newVal = ((scope.schemaProperty.simpleType || scope.schemaProperty.type) == PROPERTY_TYPES.STRING ? scope.listNewItem.value : JSON.parse(scope.listNewItem.value)); + scope.valueObjRef.push(newVal); + scope.listNewItem.value = ""; + }; + + scope.deleteListItem = (listItemIndex:number):void => { + scope.valueObjRef.splice(listItemIndex, 1); + if (!scope.valueObjRef.length) { + if (scope.listDefaultValue) { + angular.copy(scope.listDefaultValue, scope.valueObjRef); + } + } + }; + }; + + public static factory = (DataTypesService:DataTypesService, + PropertyNameValidationPattern:RegExp, + ValidationUtils:ValidationUtils)=> { + return new TypeListDirective(DataTypesService, PropertyNameValidationPattern, ValidationUtils); + }; +} + +TypeListDirective.factory.$inject = ['Sdc.Services.DataTypesService', 'PropertyNameValidationPattern', 'ValidationUtils']; + diff --git a/catalog-ui/src/app/directives/property-types/type-map/type-map-directive.html b/catalog-ui/src/app/directives/property-types/type-map/type-map-directive.html new file mode 100644 index 0000000000..37b076f26e --- /dev/null +++ b/catalog-ui/src/app/directives/property-types/type-map/type-map-directive.html @@ -0,0 +1,73 @@ +<div> + <div data-ng-repeat="i in getNumber(mapKeys.length) track by $index" class="map-item" data-ng-class="{'primitive-value-map':!isSchemaTypeDataType}"> + <div class="i-sdc-form-item map-item-field" data-ng-class="{error:(parentFormObj['mapKey'+fieldsPrefixName+$index].$dirty && parentFormObj['mapKey'+fieldsPrefixName+$index].$invalid)}"> + <label class="i-sdc-form-label required">Key</label> + <input class="i-sdc-form-input" + data-tests-id="mapKey{{fieldsPrefixName}}{{$index}}" + data-ng-model="mapKeys[$index]" + type="text" + data-ng-maxlength="50" + maxlength="50" + name="mapKey{{fieldsPrefixName}}{{$index}}" + data-ng-pattern="MapKeyValidationPattern" + data-ng-model-options="{ debounce: 200 }" + data-ng-change="changeKeyOfMap(mapKeys[$index], $index,'mapKey'+fieldsPrefixName+$index);$event.stopPropagation();" + data-ng-disabled="readOnly" + data-required + autofocus/> + <div class="input-error" data-ng-show="parentFormObj['mapKey'+fieldsPrefixName+$index].$dirty && parentFormObj['mapKey'+fieldsPrefixName+$index].$invalid"> + <span ng-show="parentFormObj['mapKey'+fieldsPrefixName+$index].$error.keyExist" translate="PROPERTY_EDIT_MAP_UNIQUE_KEYS"></span> + <span ng-show="parentFormObj['mapKey'+fieldsPrefixName+$index].$error.required" translate="VALIDATION_ERROR_REQUIRED" translate-values="{'field': 'Key' }"></span> + <span ng-show="parentFormObj['mapKey'+fieldsPrefixName+$index].$error.maxlength" translate="VALIDATION_ERROR_MAX_LENGTH" translate-values="{'max': '50' }"></span> + <span ng-show="parentFormObj['mapKey'+fieldsPrefixName+$index].$error.pattern" translate="VALIDATION_ERROR_SPECIAL_CHARS_NOT_ALLOWED"></span> + </div> + </div> + <div data-ng-if="!isSchemaTypeDataType" class="i-sdc-form-item map-item-field" data-ng-class="{error:(parentFormObj['mapValue'+fieldsPrefixName+$index].$dirty && parentFormObj['mapValue'+fieldsPrefixName+$index].$invalid)}"> + <label class="i-sdc-form-label required">Value</label> + <input class="i-sdc-form-input" + ng-if="!((schemaProperty.simpleType||schemaProperty.type) == 'boolean')" + data-ng-disabled="readOnly" + data-ng-model="valueObjRef[mapKeys[$index]]" + type="text" + name="mapValue{{fieldsPrefixName}}{{$index}}" + data-tests-id="mapValue{{fieldsPrefixName}}{{$index}}" + data-ng-pattern="getValidationPattern((schemaProperty.simpleType||schemaProperty.type))" + data-ng-change="!parentFormObj['mapValue'+fieldsPrefixName+$index].$error.pattern && parseToCorrectType(valueObjRef, key, (schemaProperty.simpleType||schemaProperty.type))" + data-ng-model-options="{ debounce: 200 }" + data-ng-maxlength="maxLength" + maxlength="{{maxLength}}" + data-required + autofocus /> + <select class="i-sdc-form-select" + data-tests-id="mapValue{{fieldsPrefixName}}{{$index}}" + ng-if="(schemaProperty.simpleType||schemaProperty.type) == 'boolean'" + data-ng-disabled="readOnly" + name="mapValue{{fieldsPrefixName}}{{$index}}" + data-ng-model="valueObjRef[mapKeys[$index]]" + data-required> + <option value="true">true</option> + <option value="false">false</option> + </select> + <div class="input-error" data-ng-show="parentFormObj['mapValue'+fieldsPrefixName+$index].$dirty && parentFormObj['mapValue'+fieldsPrefixName+$index].$invalid"> + <span ng-show="parentFormObj['mapValue'+fieldsPrefixName+$index].$error.required" translate="VALIDATION_ERROR_REQUIRED" translate-values="{'field': 'Value' }"></span> + <span ng-show="parentFormObj['mapValue'+fieldsPrefixName+$index].$error.pattern" translate="PROPERTY_EDIT_PATTERN"></span> + <span ng-show="parentFormObj['mapValue'+fieldsPrefixName+$index].$error.maxlength" translate="VALIDATION_ERROR_MAX_LENGTH" translate-values="{'max': '{{maxLength}}' }"></span> + </div> + </div> + <div data-ng-if="isSchemaTypeDataType" class="i-sdc-form-item map-item-field"> + <label class="i-sdc-form-label">Value</label> + <fields-structure value-obj-ref="valueObjRef[mapKeys[$index]]" + type-name="schemaProperty.type" + parent-form-obj="parentFormObj" + fields-prefix-name="'mapValue'+fieldsPrefixName+''+$index" + read-only="readOnly" + ></fields-structure> + </div> + <span ng-click="deleteMapItem($index)" class="delete-map-item" data-tests-id="delete-map-item{{fieldsPrefixName}}{{$index}}" data-ng-class="{'disabled': readOnly}"></span> + </div> + <div class="add-map-item" data-ng-class="{'schema-data-type':isSchemaTypeDataType}"> + <div class="add-btn" data-tests-id="add-map-item" + data-ng-class="{'disabled': readOnly || !schemaProperty.type || mapKeys.indexOf('')>-1}" data-ng-click="addMapItemFields()">Add</div> + </div> +</div> + diff --git a/catalog-ui/src/app/directives/property-types/type-map/type-map-directive.less b/catalog-ui/src/app/directives/property-types/type-map/type-map-directive.less new file mode 100644 index 0000000000..2480b626f2 --- /dev/null +++ b/catalog-ui/src/app/directives/property-types/type-map/type-map-directive.less @@ -0,0 +1,83 @@ +.add-map-item{ + &:nth-child(odd){ + float: right; + } + &:nth-child(1){ + float: none; + .add-btn{ + float: none; + } + } + width: 400px; + .add-btn{ + width: 44px; + float: right; + } + &.schema-data-type{ + float:none; + .add-btn{ + float: none; + } + } +} + +.add-btn { + .f-color.a; + .f-type._14_m; + .hand; + + &:before { + .sprite-new; + .plus-icon; + margin-right: 5px; + content: ""; + + } + &:hover { + .f-color.b; + &:before { + .sprite-new; + .plus-icon-hover; + } + } + +} + +.map-item{ + min-width: 389px; + min-height: 65px; + background-color: @tlv_color_v; + border-radius: 3px; + margin-bottom: 8px; + float: left; + display: flex; + &:nth-child(even).primitive-value-map{ + float: right; + } + .delete-map-item { + float: right; + position: relative; + top: 5px; + right: 5px; + .sprite-new; + .delete-icon; + &:hover{ + .delete-icon-hover; + } + } + .map-item-field { + margin: 7px 12px !important; + float: left; + min-width: 170px; + min-height: 50px; + select{ + width:171px; + } + input[type="text"]{ + width: 170px; + } + &>.data-type-fields-structure{ + padding: 0; + } + } +} diff --git a/catalog-ui/src/app/directives/property-types/type-map/type-map-directive.ts b/catalog-ui/src/app/directives/property-types/type-map/type-map-directive.ts new file mode 100644 index 0000000000..a0c9a6c460 --- /dev/null +++ b/catalog-ui/src/app/directives/property-types/type-map/type-map-directive.ts @@ -0,0 +1,143 @@ +/** + * Created by rcohen on 9/15/2016. + */ +'use strict'; +import {ValidationUtils, PROPERTY_TYPES} from "app/utils"; +import {DataTypesService} from "app/services"; +import {SchemaProperty} from "app/models"; + +export interface ITypeMapScope extends ng.IScope { + parentFormObj:ng.IFormController; + schemaProperty:SchemaProperty; + isSchemaTypeDataType:boolean; + valueObjRef:any; + mapKeys:Array<string>;//array of map keys + MapKeyValidationPattern:RegExp; + fieldsPrefixName:string; + readOnly:boolean; + mapDefaultValue:any; + maxLength:number; + + getValidationPattern(type:string):RegExp; + validateIntRange(value:string):boolean; + changeKeyOfMap(newKey:string, index:number, fieldName:string):void; + deleteMapItem(index:number):void; + addMapItemFields():void; + parseToCorrectType(objectOfValues:any, locationInObj:string, type:string):void; + getNumber(num:number):Array<any>; +} + + +export class TypeMapDirective implements ng.IDirective { + + constructor(private DataTypesService:DataTypesService, + private MapKeyValidationPattern:RegExp, + private ValidationUtils:ValidationUtils, + private $timeout:ng.ITimeoutService) { + } + + scope = { + valueObjRef: '=',//ref to map object in the parent value object + schemaProperty: '=',//get the schema.property object + parentFormObj: '=',//ref to parent form (get angular form object) + fieldsPrefixName: '=',//prefix for form fields names + readOnly: '=',//is form read only + defaultValue: '@',//this map default value + maxLength: '=' + }; + + restrict = 'E'; + replace = true; + template = ():string => { + return require('./type-map-directive.html'); + }; + + link = (scope:ITypeMapScope, element:any, $attr:any) => { + scope.MapKeyValidationPattern = this.MapKeyValidationPattern; + + //reset valueObjRef and mapKeys when schema type is changed + scope.$watchCollection('schemaProperty.type', (newData:any):void => { + scope.isSchemaTypeDataType = this.DataTypesService.isDataTypeForSchemaType(scope.schemaProperty); + if (scope.valueObjRef) { + scope.mapKeys = Object.keys(scope.valueObjRef); + } + }); + + //when user brows between properties in "edit property form" + scope.$watchCollection('fieldsPrefixName', (newData:any):void => { + if (!scope.valueObjRef) { + scope.valueObjRef = {}; + } + scope.mapKeys = Object.keys(scope.valueObjRef); + + if ($attr.defaultValue) { + scope.mapDefaultValue = JSON.parse($attr.defaultValue); + } + }); + + //return dummy array in order to prevent rendering map-keys ng-repeat again when a map key is changed + scope.getNumber = (num:number):Array<any> => { + return new Array(num); + }; + + scope.getValidationPattern = (type:string):RegExp => { + return this.ValidationUtils.getValidationPattern(type); + }; + + scope.validateIntRange = (value:string):boolean => { + return !value || this.ValidationUtils.validateIntRange(value); + }; + + scope.changeKeyOfMap = (newKey:string, index:number, fieldName:string):void => { + let oldKey = Object.keys(scope.valueObjRef)[index]; + let existsKeyIndex = Object.keys(scope.valueObjRef).indexOf(newKey); + if (existsKeyIndex > -1 && existsKeyIndex != index) { + scope.parentFormObj[fieldName].$setValidity('keyExist', false); + } else { + scope.parentFormObj[fieldName].$setValidity('keyExist', true); + if (!scope.parentFormObj[fieldName].$invalid) { + let newObj = {}; + angular.forEach(scope.valueObjRef,function(value:any,key:string){ + if(key == oldKey){ + newObj[newKey] = value; + }else{ + newObj[key] = value; + } + }); + scope.valueObjRef = newObj; + } + } + }; + + scope.deleteMapItem = (index:number):void=> { + delete scope.valueObjRef[scope.mapKeys[index]]; + scope.mapKeys.splice(index, 1); + if (!scope.mapKeys.length) {//only when user removes all pairs of key-value fields - put the default + if (scope.mapDefaultValue) { + angular.copy(scope.mapDefaultValue, scope.valueObjRef); + scope.mapKeys = Object.keys(scope.valueObjRef); + } + } + }; + + scope.addMapItemFields = ():void => { + scope.valueObjRef[''] = null; + scope.mapKeys = Object.keys(scope.valueObjRef); + }; + + scope.parseToCorrectType = (objectOfValues:any, locationInObj:string, type:string):void => { + if (objectOfValues[locationInObj] && type != PROPERTY_TYPES.STRING) { + objectOfValues[locationInObj] = JSON.parse(objectOfValues[locationInObj]); + } + } + }; + + public static factory = (DataTypesService:DataTypesService, + MapKeyValidationPattern:RegExp, + ValidationUtils:ValidationUtils, + $timeout:ng.ITimeoutService)=> { + return new TypeMapDirective(DataTypesService, MapKeyValidationPattern, ValidationUtils, $timeout); + }; +} + +TypeMapDirective.factory.$inject = ['Sdc.Services.DataTypesService', 'MapKeyValidationPattern', 'ValidationUtils', '$timeout']; diff --git a/catalog-ui/src/app/directives/punch-out/punch-out.ts b/catalog-ui/src/app/directives/punch-out/punch-out.ts new file mode 100644 index 0000000000..aa15f1f3e9 --- /dev/null +++ b/catalog-ui/src/app/directives/punch-out/punch-out.ts @@ -0,0 +1,80 @@ +'use strict'; +import {IUserProperties, IAppConfigurtaion} from "app/models"; +let PunchOutRegistry = require('third-party/PunchOutRegistry.js'); + +export interface IPunchOutScope extends ng.IScope { + name:string; + data:any; + user:IUserProperties; + onEvent:Function; +} + +export class PunchOutDirective implements ng.IDirective { + + constructor(private sdcConfig:IAppConfigurtaion) { + } + + scope = { + name: '=', + data: '=', + user: '=', + onEvent: '&' + }; + + replace = false; + restrict = 'E'; + + link = (scope:IPunchOutScope, element:ng.IAugmentedJQuery):void => { + // global registry object + let PunchOutRegistry = window['PunchOutRegistry']; + + let render = ():void => { + let cookieConfig = this.sdcConfig.cookie; + let props = { + name: scope.name, + options: { + data: scope.data, + apiRoot: this.sdcConfig.api.root, + apiHeaders: { + userId: { + name: cookieConfig.userIdSuffix, + value: scope.user.userId + }, + userFirstName: { + name: cookieConfig.userFirstName, + value: scope.user.firstName + }, + userLastName: { + name: cookieConfig.userLastName, + value: scope.user.lastName + }, + userEmail: { + name: cookieConfig.userEmail, + value: scope.user.email + } + } + }, + onEvent: (...args) => { + scope.$apply(() => { + scope.onEvent().apply(null, args); + }); + } + }; + PunchOutRegistry.render(props, element[0]); + }; + + let unmount = ():void => { + PunchOutRegistry.unmount(element[0]); + }; + + scope.$watch('data', render); + element.on('$destroy', unmount); + }; + + public static factory = (sdcConfig:IAppConfigurtaion) => { + return new PunchOutDirective(sdcConfig); + }; + +} + +PunchOutDirective.factory.$inject = ['sdcConfig']; diff --git a/catalog-ui/src/app/directives/sdc-tabs/sdc-single-tab/sdc-single-tab-directive.ts b/catalog-ui/src/app/directives/sdc-tabs/sdc-single-tab/sdc-single-tab-directive.ts new file mode 100644 index 0000000000..a41d9c59e4 --- /dev/null +++ b/catalog-ui/src/app/directives/sdc-tabs/sdc-single-tab/sdc-single-tab-directive.ts @@ -0,0 +1,46 @@ +'use strict'; + +export class SdcSingleTabDirective implements ng.IDirective { + + constructor(private $compile:ng.ICompileService, private $parse:ng.IParseService) { + } + + restrict = 'E'; + + link = (scope, elem:any, attrs:any, ctrl:any) => { + if (!elem.attr('inner-sdc-single-tab')) { + let name = this.$parse(elem.attr('ctrl'))(scope); + elem = elem.removeAttr('ctrl'); + elem.attr('inner-sdc-single-tab', name); + this.$compile(elem)(scope); + } + }; + + public static factory = ($compile:ng.ICompileService, $parse:ng.IParseService)=> { + return new SdcSingleTabDirective($compile, $parse); + }; +} + +export class InnerSdcSingleTabDirective implements ng.IDirective { + + constructor() { + } + + scope = { + singleTab: "=", + isViewOnly: "=" + }; + + replace = true; + restrict = 'A'; + controller = '@'; + template = '<div ng-include src="singleTab.templateUrl"></div>'; + + public static factory = ()=> { + return new InnerSdcSingleTabDirective(); + }; +} + +SdcSingleTabDirective.factory.$inject = ['$compile', '$parse']; +InnerSdcSingleTabDirective.factory.$inject = []; + diff --git a/catalog-ui/src/app/directives/sdc-tabs/sdc-single-tab/sdc-single-tab.less b/catalog-ui/src/app/directives/sdc-tabs/sdc-single-tab/sdc-single-tab.less new file mode 100644 index 0000000000..8b13789179 --- /dev/null +++ b/catalog-ui/src/app/directives/sdc-tabs/sdc-single-tab/sdc-single-tab.less @@ -0,0 +1 @@ + diff --git a/catalog-ui/src/app/directives/sdc-tabs/sdc-tabs-directive-view.html b/catalog-ui/src/app/directives/sdc-tabs/sdc-tabs-directive-view.html new file mode 100644 index 0000000000..4dc71b8780 --- /dev/null +++ b/catalog-ui/src/app/directives/sdc-tabs/sdc-tabs-directive-view.html @@ -0,0 +1,17 @@ +<div class="sdc-tabs-body"> + <div class="sdc-tabs" ng-class="{'not-active': !isActive}"> + <div class="sdc-tab-arrow" ng-click="isActive = !isActive"> + <span class="sprite-new close-open-left-arrow" ng-class="{'close-open-right-arrow': !isActive}"></span> + </div> + <div ng-repeat="tab in tabs track by $index"> + <div class="sdc-tab" ng-click="onTabSelected(tab)" data-tests-id="{{tab.name}}-tab" ng-mouseenter="hover = true" + ng-mouseleave="hover = false" + ng-class="{'last-tab':$last, 'first-tab': $first, 'selected' :tab.name === selectedTab.name }"> + <div class="sdc-tab-icon sprite-new {{tab.icon}}" ng-class="{'selected' :tab.name === selectedTab.name, 'hover': hover}"></div> + </div> + </div> + </div> + <div class="sdc-single-tab-content" ng-show="isActive"> + <sdc-single-tab class="sdc-single-tab-content-body" ng-if="selectedTab" ctrl="selectedTab.controller" data-dests-id="selected-tab" single-tab="selectedTab" is-view-only="isViewOnly"></sdc-single-tab> + </div> +</div> diff --git a/catalog-ui/src/app/directives/sdc-tabs/sdc-tabs-directive.ts b/catalog-ui/src/app/directives/sdc-tabs/sdc-tabs-directive.ts new file mode 100644 index 0000000000..1567bfba53 --- /dev/null +++ b/catalog-ui/src/app/directives/sdc-tabs/sdc-tabs-directive.ts @@ -0,0 +1,48 @@ +/** + * Created by obarda on 7/28/2016. + */ +'use strict'; +import {Tab} from "app/models"; + +export interface ISdcTabsDirectiveScope extends ng.IScope { + tabs:Array<Tab>; + selectedTab:Tab; + isActive:boolean; + onTabSelected(selectedTab:Tab); +} + +export class SdcTabsDirective implements ng.IDirective { + + constructor() { + } + + scope = { + tabs: "=", + selectedTab: "=?", + isViewOnly: "=" + }; + + replace = true; + restrict = 'E'; + template = ():string => { + return require('./sdc-tabs-directive-view.html'); + }; + + link = (scope:ISdcTabsDirectiveScope) => { + scope.isActive = true; + + if (!scope.selectedTab) { + scope.selectedTab = scope.tabs[0]; + } + + scope.onTabSelected = (selectedTab:Tab) => { + scope.selectedTab = selectedTab; + } + }; + + public static factory = ()=> { + return new SdcTabsDirective(); + }; +} + +SdcTabsDirective.factory.$inject = []; diff --git a/catalog-ui/src/app/directives/sdc-tabs/sdc-tabs.less b/catalog-ui/src/app/directives/sdc-tabs/sdc-tabs.less new file mode 100644 index 0000000000..15b6fe9e1d --- /dev/null +++ b/catalog-ui/src/app/directives/sdc-tabs/sdc-tabs.less @@ -0,0 +1,67 @@ +.sdc-tabs-body { + height: 100%; + width: 330px; + .sdc-tabs { + display: inline-block; + width: 40px; + vertical-align: top; + position: relative; + z-index: 99; + + .sdc-tab-arrow { + cursor: pointer; + width: 40px; + height: 20px; + background-color: @tlv_color_u; + box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.17); + text-align: center; + padding: 1px 4px 0px 0px; + + &:hover { + background-color: @main_color_o; + } + + } + .sdc-tab { + cursor: pointer; + width: 40px; + height: 43px; + background-color: @tlv_color_u; + box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.17); + text-align: center; + + .sdc-tab-icon { + margin-top: 12px; + } + } + .selected { + background-color: @tlv_color_t; + } + + .last-tab { + border-bottom-left-radius: 12px; + } + } + + .not-active { + position: absolute; + right: 0px; + } + + .sdc-single-tab-content { + padding: 15px 0px 0px 0px; + width: 290px; + background-color: @tlv_color_t; + height: 100%; + display: inline-block; + bottom: 0; + top: 0; + position: absolute; + box-shadow: 0.3px 1px 3px rgba(24, 24, 25, 0.42); + + .sdc-single-tab-content-body { + height: 100%; + display: flex; + } + } +} diff --git a/catalog-ui/src/app/directives/select-property-types/select-data-type-fields-structure/select-data-type-fields-structure.html b/catalog-ui/src/app/directives/select-property-types/select-data-type-fields-structure/select-data-type-fields-structure.html new file mode 100644 index 0000000000..8560e66978 --- /dev/null +++ b/catalog-ui/src/app/directives/select-property-types/select-data-type-fields-structure/select-data-type-fields-structure.html @@ -0,0 +1,81 @@ +<div class="data-type-fields-structure"> + <div class="open-close"> + <div class="open-close-button" data-ng-class="{'expand':expand,'collapse':!expand}" + data-ng-click="expandAndCollapse()"></div> + <span class="data-type-name">{{typeName.replace("org.openecomp.datatypes.heat.","")}}</span> + </div> + <div data-ng-show="expand" data-ng-repeat="property in dataTypeProperties" class="property" data-ng-init="property.isAlreadyInput = isAlreadyInput(property)"> + + <sdc-radio-button sdc-model="dataTypesService.selectedPropertiesName" value="{{path + '#' + property.name}}" data-ng-if="path && !property.isAlreadyInput" + disabled="false" elem-name="selectedPropertiesName" elem-id="{{path + '#' + property.name}}" class="selectPropertyType" + on-value-change="setSelectedType(property)" data-tests-id="propertyRadioButton_{{property.name}}"></sdc-radio-button> + <div class="existInputContainer" data-ng-if="property.isAlreadyInput"><span class="existInput"></span></div> + <div class="i-sdc-form-item property-name"> + <div tooltips tooltip-content="{{property.name}}"> + <input class="i-sdc-form-input" + type="text" + data-ng-disabled="true" + value="{{property.name}}"/> + </div> + </div> + <div data-ng-if="dataTypesService.isDataTypeForDataTypePropertyType(property)" class="inner-structure"> + <select-fields-structure value-obj-ref="(valueObjRef[property.name])" + type-name="property.type" + parent-form-obj="parentFormObj" + fields-prefix-name="fieldsPrefixName+property.name" + read-only="readOnly" + default-value="{{currentTypeDefaultValue[property.name]}}" + path="{{path + '#' + property.name}}" + is-parent-already-input="isParentAlreadyInput" + ></select-fields-structure> + + </div> + <div data-ng-if="!dataTypesService.isDataTypeForDataTypePropertyType(property)" ng-switch="property.type"> + <div ng-switch-when="map"> + <select-type-map value-obj-ref="valueObjRef[property.name]" + schema-property="property.schema.property" + parent-form-obj="parentFormObj" + fields-prefix-name="fieldsPrefixName+property.name" + read-only="readOnly" + default-value="{{currentTypeDefaultValue[property.name]}}" + ></select-type-map> + </div> + <div ng-switch-when="list"> + <select-type-list value-obj-ref="valueObjRef[property.name]" + schema-property="property.schema.property" + parent-form-obj="parentFormObj" + fields-prefix-name="fieldsPrefixName+property.name" + read-only="readOnly" + default-value="{{currentTypeDefaultValue[property.name]}}" + ></select-type-list> + </div> + <div ng-switch-default class="primitive-value-field"> + <div class="i-sdc-form-item" + data-ng-class="{error:(parentFormObj[fieldsPrefixName+property.name].$dirty && parentFormObj[fieldsPrefixName+property.name].$invalid)}"> + <input class="i-sdc-form-input" + data-tests-id="{{fieldsPrefixName+property.name}}" + ng-if="!((property.simpleType||property.type) == 'boolean')" + data-ng-maxlength="100" + data-ng-disabled="readOnly" + maxlength="100" + data-ng-model="valueObjRef[property.name]" + type="text" + name="{{fieldsPrefixName+property.name}}" + data-ng-model-options="{ debounce: 200 }" + data-ng-change="!parentFormObj[fieldsPrefixName+property.name].$error.pattern && ('integer'==property.type && parentFormObj[fieldsPrefixName+property.name].$setValidity('pattern', validateIntRange(valueObjRef[property.name])) || onValueChange(property.name, (property.simpleType||property.type)))" + autofocus/> + <select class="i-sdc-form-select" + data-tests-id="{{fieldsPrefixName+property.name}}" + ng-if="(property.simpleType||property.type) == 'boolean'" + data-ng-disabled="readOnly" + name="{{fieldsPrefixName+property.name}}" + data-ng-change="onValueChange(property.name,'boolean')" + data-ng-model="valueObjRef[property.name]" + data-ng-options="option.v as option.n for option in [{ n: '', v: undefined }, { n: 'false', v: false }, { n: 'true', v: true }]"> + </select> + + </div> + </div> + </div> + </div> +</div> diff --git a/catalog-ui/src/app/directives/select-property-types/select-data-type-fields-structure/select-data-type-fields-structure.less b/catalog-ui/src/app/directives/select-property-types/select-data-type-fields-structure/select-data-type-fields-structure.less new file mode 100644 index 0000000000..43d2d646a1 --- /dev/null +++ b/catalog-ui/src/app/directives/select-property-types/select-data-type-fields-structure/select-data-type-fields-structure.less @@ -0,0 +1,117 @@ + +.selectPropertyType { + .tlv-radio-label { + margin-top: -7px; + } +} + +.data-type-fields-structure { + background-color: @tlv_color_v; + padding: 10px; + display: table-caption; + .open-close { + position: relative; + .open-close-button { + position: absolute; + top: 50%; + margin-top: -7px; + &.expand { + .sprite-new; + .expand-collapse-minus-icon; + } + &.collapse { + .sprite-new; + .expand-collapse-plus-icon; + } + } + + } + + .existInputContainer { + height: 30px; + width: 20px; + position: relative; + } + .existInput { + .sprite-new; + .sdc-success; + position: absolute; + top: 18px; + left: 3px; + } + + .data-type-name { + .m_16_m; + margin-left: 22px; + } + + .i-sdc-form-input:disabled{ + .disabled; + &[type="text"]{ + opacity: 1 !important; + background-color: @tlv_color_t; + color:black; + } + } + + .property { + display: flex; + min-width: 365px; + min-height: 46px; + input[type="text"], select { + width: 170px; + } + .property-name { + float: left; + margin-top: 8px; + } + .primitive-value-field { + float: right; + margin-top: 8px; + margin-left: 10px; + } + .inner-structure { + display: -webkit-box; + } + } + + [ng-switch-when="map"] { + margin-top: 8px; + margin-left: 10px; + .map-item { + border: solid 1px @main_color_o; + min-width: 401px; + min-height: 69px; + float: none !important; + } + .add-map-item { + width: auto; + float: none; + &:nth-child(1) { + position: relative; + top: 6px; + } + .add-btn { + float: none; + } + } + + } + + [ng-switch-when="list"] { + float: left; + margin-top: 8px; + margin-left: 10px; + min-width: 280px; + .dt-list-item { + border: solid 1px @main_color_o; + } + .list-value-items { + width: 280px; + } + } +} + + + + diff --git a/catalog-ui/src/app/directives/select-property-types/select-data-type-fields-structure/select-data-type-fields-structure.ts b/catalog-ui/src/app/directives/select-property-types/select-data-type-fields-structure/select-data-type-fields-structure.ts new file mode 100644 index 0000000000..aee4b3b6af --- /dev/null +++ b/catalog-ui/src/app/directives/select-property-types/select-data-type-fields-structure/select-data-type-fields-structure.ts @@ -0,0 +1,184 @@ +/** + * Created by obarda on 1/27/2016. + */ +'use strict'; +import {ValidationUtils} from "app/utils"; +import { DataTypesService } from "app/services"; +import { DataTypePropertyModel } from "app/models/data-type-properties"; +import {DataTypesMap, PropertyModel} from "app/models"; + +export interface ISelectDataTypeFieldsStructureScope extends ng.IScope { + parentFormObj:ng.IFormController; + dataTypeProperties:Array<DataTypePropertyModel>; + typeName:string; + valueObjRef:any; + propertyNameValidationPattern:RegExp; + fieldsPrefixName:string; + readOnly:boolean; + currentTypeDefaultValue:any; + types:DataTypesMap; + expandByDefault:boolean; + expand:boolean; + expanded:boolean; + dataTypesService:DataTypesService; + path:string; + isParentAlreadyInput:boolean; + + expandAndCollapse():void; + getValidationPattern(type:string):RegExp; + validateIntRange(value:string):boolean; + isAlreadyInput(property:PropertyModel):boolean; + setSelectedType(property:PropertyModel):void; + onValueChange(propertyName:string, type:string):void; +} + + +export class SelectDataTypeFieldsStructureDirective implements ng.IDirective { + + constructor(private DataTypesService:DataTypesService, + private PropertyNameValidationPattern:RegExp, + private ValidationUtils:ValidationUtils) { + } + + scope = { + valueObjRef: '=', + typeName: '=', + parentFormObj: '=', + fieldsPrefixName: '=', + readOnly: '=', + defaultValue: '@', + expandByDefault: '=', + path: '@', + isParentAlreadyInput: '=' + }; + + restrict = 'E'; + replace = true; + template = ():string => { + return require('./select-data-type-fields-structure.html'); + }; + // public types=Utils.Constants.PROPERTY_DATA.TYPES; + + //get data type properties array and return object with the properties and their default value + //(for example: get: [{name:"prop1",defaultValue:1 ...},{name:"prop2", defaultValue:"bla bla" ...}] + // return: {prop1: 1, prop2: "bla bla"} + private getDefaultValue = (dataTypeProperties:Array<DataTypePropertyModel>):any => { + let defaultValue = {}; + for (let i = 0; i < dataTypeProperties.length; i++) { + if (dataTypeProperties[i].type != 'string') { + if (!angular.isUndefined(dataTypeProperties[i].defaultValue)) { + defaultValue[dataTypeProperties[i].name] = JSON.parse(dataTypeProperties[i].defaultValue); + } + } else { + defaultValue[dataTypeProperties[i].name] = dataTypeProperties[i].defaultValue; + } + } + return defaultValue; + }; + + private initDataOnScope = (scope:ISelectDataTypeFieldsStructureScope, $attr:any):void => { + scope.dataTypesService = this.DataTypesService; + scope.dataTypeProperties = angular.copy(this.DataTypesService.getFirsLevelOfDataTypeProperties(scope.typeName)); + if ($attr.defaultValue) { + scope.currentTypeDefaultValue = JSON.parse($attr.defaultValue); + } else { + scope.currentTypeDefaultValue = this.getDefaultValue(scope.dataTypeProperties); + } + + if (!scope.valueObjRef) { + scope.valueObjRef = {}; + } + + _.forEach(scope.currentTypeDefaultValue, (value, key)=> { + if (angular.isUndefined(scope.valueObjRef[key])) { + if (typeof scope.currentTypeDefaultValue[key] == 'object') { + angular.copy(scope.currentTypeDefaultValue[key], scope.valueObjRef[key]); + } else { + scope.valueObjRef[key] = scope.currentTypeDefaultValue[key]; + } + } + }); + }; + + private rerender = (scope:any):void => { + scope.expanded = false; + scope.expand = false; + if (scope.expandByDefault) { + scope.expandAndCollapse(); + } + }; + + link = (scope:ISelectDataTypeFieldsStructureScope, element:any, $attr:any) => { + scope.propertyNameValidationPattern = this.PropertyNameValidationPattern; + + scope.$watchCollection('[typeName,fieldsPrefixName]', (newData:any):void => { + this.rerender(scope); + }); + + + scope.expandAndCollapse = ():void => { + if (!scope.expanded) { + this.initDataOnScope(scope, $attr); + scope.expanded = true; + } + scope.expand = !scope.expand; + }; + + scope.getValidationPattern = (type:string):RegExp => { + return this.ValidationUtils.getValidationPattern(type); + }; + + scope.validateIntRange = (value:string):boolean => { + return !value || this.ValidationUtils.validateIntRange(value); + }; + + /* + check if property is alrady declered on the service by meatching the input name & the property name + + */ + scope.isAlreadyInput = (property:PropertyModel):boolean => { + if (scope.path) { + if (scope.isParentAlreadyInput) { + return true; + } + let parentInputName = this.DataTypesService.selectedInstance.normalizedName + '_' + scope.path.replace('#', '_');// set the input parent as he need to declared as input + let inputName = parentInputName + '_' + property.name;// set the input name as he need to declared as input + let selectedProperty = _.find(this.DataTypesService.selectedComponentInputs, (componentInput)=> { + if (componentInput.name == parentInputName) { //check if the parent(all the complex) is already declared + scope.isParentAlreadyInput = true; + return true; + } else if (componentInput.name.substring(0, inputName.length) == inputName) { //check if specific property inside the complex + return true; + } + //return componentInput.name == parentInputName || componentInput.name.substring(0,inputName.length) == inputName;//check if the parent(all the complex) is already declared or specific property inside the complex + }); + if (selectedProperty) { + return true; + } + } + return false; + }; + + scope.setSelectedType = (property:PropertyModel):void=> { + scope.dataTypesService.selectedInput = property; + scope.dataTypesService.selectedPropertiesName = scope.path + '#' + property.name; + }; + + scope.onValueChange = (propertyName:string, type:string):void => { + scope.valueObjRef[propertyName] = !angular.isUndefined(scope.valueObjRef[propertyName]) ? scope.valueObjRef[propertyName] : scope.currentTypeDefaultValue[propertyName]; + if (scope.valueObjRef[propertyName] && type != 'string') { + scope.valueObjRef[propertyName] = JSON.parse(scope.valueObjRef[propertyName]); + } + }; + + + }; + + public static factory = (DataTypesService:DataTypesService, + PropertyNameValidationPattern:RegExp, + ValidationUtils:ValidationUtils)=> { + return new SelectDataTypeFieldsStructureDirective(DataTypesService, PropertyNameValidationPattern, ValidationUtils); + }; +} + +SelectDataTypeFieldsStructureDirective.factory.$inject = ['Sdc.Services.DataTypesService', 'PropertyNameValidationPattern', 'ValidationUtils']; diff --git a/catalog-ui/src/app/directives/select-property-types/select-type-list/select-type-list-directive.html b/catalog-ui/src/app/directives/select-property-types/select-type-list/select-type-list-directive.html new file mode 100644 index 0000000000..f439147301 --- /dev/null +++ b/catalog-ui/src/app/directives/select-property-types/select-type-list/select-type-list-directive.html @@ -0,0 +1,56 @@ +<div> + <div data-ng-if="!isSchemaTypeDataType"> + <div class="i-sdc-form-item list-new-item" data-ng-class="{error:(parentFormObj['listNewItem'+fieldsPrefixName].$dirty && parentFormObj['listNewItem'+fieldsPrefixName].$invalid)}"> + <input class="i-sdc-form-input" + data-tests-id="listNewItem{{fieldsPrefixName}}" + ng-if="!((schemaProperty.simpleType||schemaProperty.type) == 'boolean')" + data-ng-disabled="readOnly" + data-ng-model="listNewItem.value" + type="text" + name="listNewItem{{fieldsPrefixName}}" + data-ng-model-options="{ debounce: 200 }" + placeholder="Type a value and then click ADD" + data-ng-maxlength="maxLength" + maxlength="{{maxLength}}" + sdc-keyboard-events="" key-enter="schemaProperty.type && !parentFormObj['listNewItem'+fieldsPrefixName].$invalid && listNewItem.value && addListItem" + autofocus /> + <select class="i-sdc-form-select" + data-tests-id="listNewItem{{fieldsPrefixName}}" + ng-if="(schemaProperty.simpleType||schemaProperty.type) == 'boolean'" + data-ng-disabled="readOnly" + name="listNewItem{{fieldsPrefixName}}" + data-ng-model="listNewItem.value"> + <option value="true">true</option> + <option value="false">false</option> + </select> + <div class="input-error" data-ng-show="parentFormObj['listNewItem'+fieldsPrefixName].$dirty && parentFormObj['listNewItem'+fieldsPrefixName].$invalid"> + <span ng-show="parentFormObj['listNewItem'+fieldsPrefixName].$error.pattern" translate="PROPERTY_EDIT_PATTERN"></span> + <span ng-show="parentFormObj['listNewItem'+fieldsPrefixName].$error.maxlength" translate="VALIDATION_ERROR_MAX_LENGTH" translate-values="{'max': '{{maxLength}}' }"></span> + </div> + </div> + <!--<div class="add-btn add-list-item" data-tests-id="add-list-item{{fieldsPrefixName}}"--> + <!--data-ng-class="{'disabled': readOnly || !schemaProperty.type || parentFormObj['listNewItem'+fieldsPrefixName].$invalid || !listNewItem.value}" data-ng-click="addListItem()">Add</div>--> + <div class="list-value-items"> + <span class="list-value-item" data-ng-repeat="value in valueObjRef track by $index"> + {{value}} + <span ng-if="!readOnly" class="delete-list-item sprite-new small-x-button" data-ng-click="deleteListItem($index)"></span> + </span> + </div> + </div> + <div data-ng-if="isSchemaTypeDataType"> + <div class="dt-list"> + <div data-ng-repeat="value in valueObjRef track by $index" class="dt-list-item"> + <select-fields-structure value-obj-ref="valueObjRef[$index]" + type-name="schemaProperty.type" + parent-form-obj="parentFormObj" + fields-prefix-name="fieldsPrefixName+''+$index" + read-only="readOnly"> + <!--path="{{path}}"--> + </select-fields-structure> + </div> + <!--<div class="add-btn add-list-item" data-tests-id="add-list-item"--> + <!--data-ng-class="{'disabled': readOnly}" data-ng-click="listNewItem.value='{}';addListItem();">Add</div>--> + </div> + + </div> +</div> diff --git a/catalog-ui/src/app/directives/select-property-types/select-type-list/select-type-list-directive.less b/catalog-ui/src/app/directives/select-property-types/select-type-list/select-type-list-directive.less new file mode 100644 index 0000000000..71263f2642 --- /dev/null +++ b/catalog-ui/src/app/directives/select-property-types/select-type-list/select-type-list-directive.less @@ -0,0 +1,85 @@ +.list-new-item{ + float: left; + width: 50%; + min-width: 221px; + margin-right: 15px; + input{ + min-width: 221px; + } +} + +.list-value-items{ + -webkit-border-radius: 2px; + -moz-border-radius: 2px; + border-radius: 2px; + border: 1px solid @main_color_o; + padding-bottom: 10px; + min-height: 100px; + clear: both; + background-color: white; + .list-value-item{ + display: inline-block; + background-color: @tlv_color_v; + margin: 10px 0 0 10px; + padding: 0 8px; + .delete-list-item{ + margin: 0 0 0 2px; + .hand; + } + } +} + +.add-btn { + .f-color.a; + .f-type._14_m; + .hand; + + &.add-list-item { + float: left; + margin-top: 5px; + width: 44px; + } + + &:before { + .sprite-new; + .plus-icon; + margin-right: 5px; + content: ""; + + } + &:hover { + .f-color.b; + &:before { + .sprite-new; + .plus-icon-hover; + } + } + +} + +.dt-list{ + display: table-caption; + .dt-list-item { + border-radius: 3px; + background-color: @tlv_color_v; + display: inline-block; + .delete-dt-list-item{ + float: right; + position: relative; + top: 5px; + right: 5px; + .sprite-new; + .delete-icon; + &:hover{ + .delete-icon-hover; + } + } + .data-type-name{ + margin-right: 16px; + } + } + &>.add-list-item{ + float:none; + } +} + diff --git a/catalog-ui/src/app/directives/select-property-types/select-type-list/select-type-list-directive.ts b/catalog-ui/src/app/directives/select-property-types/select-type-list/select-type-list-directive.ts new file mode 100644 index 0000000000..d277040798 --- /dev/null +++ b/catalog-ui/src/app/directives/select-property-types/select-type-list/select-type-list-directive.ts @@ -0,0 +1,108 @@ +/** + * Created by rcohen on 9/15/2016. + */ +'use strict'; +import {DataTypesService} from "app/services/data-types-service"; +import {SchemaProperty} from "app/models/aschema-property"; +import {ValidationUtils, PROPERTY_TYPES} from "app/utils"; + +export interface ISelectTypeListScope extends ng.IScope { + parentFormObj:ng.IFormController; + schemaProperty:SchemaProperty; + isSchemaTypeDataType:boolean; + valueObjRef:any; + propertyNameValidationPattern:RegExp; + fieldsPrefixName:string; + readOnly:boolean; + listDefaultValue:any; + listNewItem:any; + maxLength:number; + dataTypesService:DataTypesService; + + getValidationPattern(type:string):RegExp; + validateIntRange(value:string):boolean; + addListItem():void; + deleteListItem(listItemIndex:number):void +} + +export class SelectTypeListDirective implements ng.IDirective { + + constructor(private DataTypesService:DataTypesService, + private PropertyNameValidationPattern:RegExp, + private ValidationUtils:ValidationUtils) { + } + + scope = { + valueObjRef: '=',//ref to list object in the parent value object + schemaProperty: '=',//get the schema.property object + parentFormObj: '=',//ref to parent form (get angular form object) + fieldsPrefixName: '=',//prefix for form fields names + readOnly: '=',//is form read only + defaultValue: '@',//this list default value + maxLength: '=', + path: '@' + }; + + restrict = 'E'; + replace = true; + template = ():string => { + return require('./select-type-list-directive.html'); + }; + + link = (scope:ISelectTypeListScope, element:any, $attr:any) => { + scope.dataTypesService = this.DataTypesService; + scope.propertyNameValidationPattern = this.PropertyNameValidationPattern; + + //reset valueObjRef when schema type is changed + scope.$watchCollection('schemaProperty.type', (newData:any):void => { + scope.isSchemaTypeDataType = this.DataTypesService.isDataTypeForSchemaType(scope.schemaProperty); + //insert 1 empty item dt by default + if (scope.isSchemaTypeDataType && (!scope.valueObjRef || !scope.valueObjRef.length)) { + scope.valueObjRef = scope.valueObjRef || []; + scope.valueObjRef.push({}); + } + }); + + //when user brows between properties in "edit property form" + scope.$watchCollection('fieldsPrefixName', (newData:any):void => { + scope.listNewItem = {value: ''}; + + if ($attr.defaultValue) { + scope.listDefaultValue = JSON.parse($attr.defaultValue); + } + }); + + scope.getValidationPattern = (type:string):RegExp => { + return this.ValidationUtils.getValidationPattern(type); + }; + + scope.validateIntRange = (value:string):boolean => { + return !value || this.ValidationUtils.validateIntRange(value); + }; + + scope.addListItem = ():void => { + scope.valueObjRef = scope.valueObjRef || []; + let newVal = ((scope.schemaProperty.simpleType || scope.schemaProperty.type) == PROPERTY_TYPES.STRING ? scope.listNewItem.value : JSON.parse(scope.listNewItem.value)); + scope.valueObjRef.push(newVal); + scope.listNewItem.value = ""; + }; + + scope.deleteListItem = (listItemIndex:number):void => { + scope.valueObjRef.splice(listItemIndex, 1); + if (!scope.valueObjRef.length) { + if (scope.listDefaultValue) { + angular.copy(scope.listDefaultValue, scope.valueObjRef); + } + } + }; + }; + + public static factory = (DataTypesService:DataTypesService, + PropertyNameValidationPattern:RegExp, + ValidationUtils:ValidationUtils)=> { + return new SelectTypeListDirective(DataTypesService, PropertyNameValidationPattern, ValidationUtils); + }; +} + +SelectTypeListDirective.factory.$inject = ['Sdc.Services.DataTypesService', 'PropertyNameValidationPattern', 'ValidationUtils']; + diff --git a/catalog-ui/src/app/directives/select-property-types/select-type-map/select-type-map-directive.html b/catalog-ui/src/app/directives/select-property-types/select-type-map/select-type-map-directive.html new file mode 100644 index 0000000000..a56428e5c2 --- /dev/null +++ b/catalog-ui/src/app/directives/select-property-types/select-type-map/select-type-map-directive.html @@ -0,0 +1,56 @@ +<div> + <div data-ng-repeat="i in getNumber(mapKeys.length) track by $index" class="map-item" data-ng-class="{'primitive-value-map':!isSchemaTypeDataType}"> + <div class="i-sdc-form-item map-item-field" data-ng-class="{error:(parentFormObj['mapKey'+fieldsPrefixName+$index].$dirty && parentFormObj['mapKey'+fieldsPrefixName+$index].$invalid)}"> + <label class="i-sdc-form-label required">Key</label> + <input class="i-sdc-form-input" + data-tests-id="mapKey{{fieldsPrefixName}}{{$index}}" + data-ng-model="mapKeys[$index]" + type="text" + data-ng-maxlength="50" + maxlength="50" + name="mapKey{{fieldsPrefixName}}{{$index}}" + data-ng-model-options="{ debounce: 200 }" + data-ng-change="changeKeyOfMap(mapKeys[$index], $index,'mapKey'+fieldsPrefixName+$index);$event.stopPropagation();" + data-ng-disabled="readOnly" + data-required + autofocus/> + </div> + <div data-ng-if="!isSchemaTypeDataType" class="i-sdc-form-item map-item-field" data-ng-class="{error:(parentFormObj['mapValue'+fieldsPrefixName+$index].$dirty && parentFormObj['mapValue'+fieldsPrefixName+$index].$invalid)}"> + <label class="i-sdc-form-label required">Value</label> + <input class="i-sdc-form-input" + ng-if="!((schemaProperty.simpleType||schemaProperty.type) == 'boolean')" + data-ng-disabled="readOnly" + data-ng-model="valueObjRef[mapKeys[$index]]" + type="text" + name="mapValue{{fieldsPrefixName}}{{$index}}" + data-tests-id="mapValue{{fieldsPrefixName}}{{$index}}" + data-ng-change="!parentFormObj['mapValue'+fieldsPrefixName+$index].$error.pattern && parseToCorrectType(valueObjRef, key, (schemaProperty.simpleType||schemaProperty.type))" + data-ng-model-options="{ debounce: 200 }" + data-ng-maxlength="maxLength" + maxlength="{{maxLength}}" + data-required + autofocus /> + <select class="i-sdc-form-select" + data-tests-id="mapValue{{fieldsPrefixName}}{{$index}}" + ng-if="(schemaProperty.simpleType||schemaProperty.type) == 'boolean'" + data-ng-disabled="readOnly" + name="mapValue{{fieldsPrefixName}}{{$index}}" + data-ng-model="valueObjRef[mapKeys[$index]]" + data-required> + <option value="true">true</option> + <option value="false">false</option> + </select> + </div> + <div data-ng-if="isSchemaTypeDataType" class="i-sdc-form-item map-item-field"> + <label class="i-sdc-form-label">Value</label> + <select-fields-structure value-obj-ref="valueObjRef[mapKeys[$index]]" + type-name="schemaProperty.type" + parent-form-obj="parentFormObj" + fields-prefix-name="'mapValue'+fieldsPrefixName+''+$index" + read-only="readOnly"> + <!--path="{{path + '#' + mapKeys[$index]}}"--> + </select-fields-structure> + </div> + </div> +</div> + diff --git a/catalog-ui/src/app/directives/select-property-types/select-type-map/select-type-map-directive.less b/catalog-ui/src/app/directives/select-property-types/select-type-map/select-type-map-directive.less new file mode 100644 index 0000000000..2480b626f2 --- /dev/null +++ b/catalog-ui/src/app/directives/select-property-types/select-type-map/select-type-map-directive.less @@ -0,0 +1,83 @@ +.add-map-item{ + &:nth-child(odd){ + float: right; + } + &:nth-child(1){ + float: none; + .add-btn{ + float: none; + } + } + width: 400px; + .add-btn{ + width: 44px; + float: right; + } + &.schema-data-type{ + float:none; + .add-btn{ + float: none; + } + } +} + +.add-btn { + .f-color.a; + .f-type._14_m; + .hand; + + &:before { + .sprite-new; + .plus-icon; + margin-right: 5px; + content: ""; + + } + &:hover { + .f-color.b; + &:before { + .sprite-new; + .plus-icon-hover; + } + } + +} + +.map-item{ + min-width: 389px; + min-height: 65px; + background-color: @tlv_color_v; + border-radius: 3px; + margin-bottom: 8px; + float: left; + display: flex; + &:nth-child(even).primitive-value-map{ + float: right; + } + .delete-map-item { + float: right; + position: relative; + top: 5px; + right: 5px; + .sprite-new; + .delete-icon; + &:hover{ + .delete-icon-hover; + } + } + .map-item-field { + margin: 7px 12px !important; + float: left; + min-width: 170px; + min-height: 50px; + select{ + width:171px; + } + input[type="text"]{ + width: 170px; + } + &>.data-type-fields-structure{ + padding: 0; + } + } +} diff --git a/catalog-ui/src/app/directives/select-property-types/select-type-map/select-type-map-directive.ts b/catalog-ui/src/app/directives/select-property-types/select-type-map/select-type-map-directive.ts new file mode 100644 index 0000000000..19df8dfb71 --- /dev/null +++ b/catalog-ui/src/app/directives/select-property-types/select-type-map/select-type-map-directive.ts @@ -0,0 +1,139 @@ +/** + * Created by rcohen on 9/15/2016. + */ +'use strict'; +import {SchemaProperty} from "app/models"; +import {DataTypesService} from "app/services"; +import {ValidationUtils, PROPERTY_TYPES} from "app/utils"; + +export interface ISelectTypeMapScope extends ng.IScope { + parentFormObj:ng.IFormController; + schemaProperty:SchemaProperty; + isSchemaTypeDataType:boolean; + valueObjRef:any; + mapKeys:Array<string>;//array of map keys + MapKeyValidationPattern:RegExp; + fieldsPrefixName:string; + readOnly:boolean; + mapDefaultValue:any; + maxLength:number; + dataTypesService:DataTypesService; + + getValidationPattern(type:string):RegExp; + validateIntRange(value:string):boolean; + changeKeyOfMap(newKey:string, index:number, fieldName:string):void; + deleteMapItem(index:number):void; + addMapItemFields():void; + parseToCorrectType(objectOfValues:any, locationInObj:string, type:string):void; + getNumber(num:number):Array<any>; +} + + +export class SelectTypeMapDirective implements ng.IDirective { + + constructor(private DataTypesService:DataTypesService, + private MapKeyValidationPattern:RegExp, + private ValidationUtils:ValidationUtils, + private $timeout:ng.ITimeoutService) { + } + + scope = { + valueObjRef: '=',//ref to map object in the parent value object + schemaProperty: '=',//get the schema.property object + parentFormObj: '=',//ref to parent form (get angular form object) + fieldsPrefixName: '=',//prefix for form fields names + readOnly: '=',//is form read only + defaultValue: '@',//this map default value + maxLength: '=', + path: '@' + }; + + restrict = 'E'; + replace = true; + template = ():string => { + return require('./select-type-map-directive.html'); + }; + + link = (scope:ISelectTypeMapScope, element:any, $attr:any) => { + + scope.dataTypesService = this.DataTypesService; + scope.MapKeyValidationPattern = this.MapKeyValidationPattern; + + //reset valueObjRef and mapKeys when schema type is changed + scope.$watchCollection('schemaProperty.type', (newData:any):void => { + scope.isSchemaTypeDataType = this.DataTypesService.isDataTypeForSchemaType(scope.schemaProperty); + if (scope.valueObjRef) { + scope.mapKeys = Object.keys(scope.valueObjRef); + } + }); + + //when user brows between properties in "edit property form" + scope.$watchCollection('fieldsPrefixName', (newData:any):void => { + if (!scope.valueObjRef) { + scope.valueObjRef = {}; + } + scope.mapKeys = Object.keys(scope.valueObjRef); + + if ($attr.defaultValue) { + scope.mapDefaultValue = JSON.parse($attr.defaultValue); + } + }); + + //return dummy array in order to prevent rendering map-keys ng-repeat again when a map key is changed + scope.getNumber = (num:number):Array<any> => { + return new Array(num); + }; + + scope.getValidationPattern = (type:string):RegExp => { + return this.ValidationUtils.getValidationPattern(type); + }; + + scope.validateIntRange = (value:string):boolean => { + return !value || this.ValidationUtils.validateIntRange(value); + }; + + scope.changeKeyOfMap = (newKey:string, index:number, fieldName:string):void => { + let oldKey = Object.keys(scope.valueObjRef)[index]; + let existsKeyIndex = Object.keys(scope.valueObjRef).indexOf(newKey); + if (existsKeyIndex > -1 && existsKeyIndex != index) { + scope.parentFormObj[fieldName].$setValidity('keyExist', false); + } else { + scope.parentFormObj[fieldName].$setValidity('keyExist', true); + if (!scope.parentFormObj[fieldName].$invalid) { + angular.copy(JSON.parse(JSON.stringify(scope.valueObjRef).replace('"' + oldKey + '":', '"' + newKey + '":')), scope.valueObjRef);//update key + } + } + }; + + scope.deleteMapItem = (index:number):void=> { + delete scope.valueObjRef[scope.mapKeys[index]]; + scope.mapKeys.splice(index, 1); + if (!scope.mapKeys.length) {//only when user removes all pairs of key-value fields - put the default + if (scope.mapDefaultValue) { + angular.copy(scope.mapDefaultValue, scope.valueObjRef); + scope.mapKeys = Object.keys(scope.valueObjRef); + } + } + }; + + scope.addMapItemFields = ():void => { + scope.valueObjRef[''] = null; + scope.mapKeys = Object.keys(scope.valueObjRef); + }; + + scope.parseToCorrectType = (objectOfValues:any, locationInObj:string, type:string):void => { + if (objectOfValues[locationInObj] && type != PROPERTY_TYPES.STRING) { + objectOfValues[locationInObj] = JSON.parse(objectOfValues[locationInObj]); + } + } + }; + + public static factory = (DataTypesService:DataTypesService, + MapKeyValidationPattern:RegExp, + ValidationUtils:ValidationUtils, + $timeout:ng.ITimeoutService)=> { + return new SelectTypeMapDirective(DataTypesService, MapKeyValidationPattern, ValidationUtils, $timeout); + }; +} + +SelectTypeMapDirective.factory.$inject = ['Sdc.Services.DataTypesService', 'MapKeyValidationPattern', 'ValidationUtils', '$timeout']; diff --git a/catalog-ui/src/app/directives/structure-tree/structure-tree-directive.html b/catalog-ui/src/app/directives/structure-tree/structure-tree-directive.html new file mode 100644 index 0000000000..7d8a883b33 --- /dev/null +++ b/catalog-ui/src/app/directives/structure-tree/structure-tree-directive.html @@ -0,0 +1,54 @@ +<div class="structure-tree"> + <div class="component-container"> + <div class="{{component.iconSprite}} small" ng-class="structureTree.serviceRoot.icon"></div> + <div class="component-container-text" tooltip-class="tooltip-custom break-word-tooltip" tooltips tooltip-content="​{{structureTree.serviceRoot.name}}"> {{structureTree.serviceRoot.name}}</div> + </div> + <ul> + <li data-ng-repeat="firstLevelResourcesInstances in structureTree.serviceRoot.resourceInstancesList"> + <div class="component-container"> + <div class="small {{firstLevelResourcesInstances.icon}}" ng-class="{'sprite-resource-icons': !component.isProduct(), 'sprite-services-icons': component.isProduct()}"> + <div data-ng-class="{'non-certified':!firstLevelResourcesInstances.certified}" + tooltips tooltip-side="top" tooltip-content="Not certified"> + </div> + </div> + <div class="component-container-text" tooltips tooltip-content="{{firstLevelResourcesInstances.name}}" > {{firstLevelResourcesInstances.name}} </div> + </div> + <ul> + <li data-ng-repeat="secondLevelResourcesInstances in firstLevelResourcesInstances.resourceInstancesList"> + <div class="component-container"> + <div class="sprite-resource-icons small" ng-class="secondLevelResourcesInstances.icon"> + <div data-ng-class="{'non-certified':!secondLevelResourcesInstances.certified}" + tooltips tooltip-side="top" tooltip-content="Not certified"> + </div> + </div> + <div class="component-container-text" tooltips tooltip-content="{{secondLevelResourcesInstances.name}}"> {{secondLevelResourcesInstances.name}} </div> + </div> + <ul> + <li data-ng-repeat="thirdLevelResourcesInstances in secondLevelResourcesInstances.resourceInstancesList"> + <div class="component-container"> + <div class="sprite-resource-icons small" ng-class="thirdLevelResourcesInstances.icon"> + <div data-ng-class="{'non-certified':!thirdLevelResourcesInstances.certified}" + tooltips tooltip-side="top" tooltip-content="Not certified"> + </div> + </div> + <div class="component-container-text" tooltips tooltip-content="{{thirdLevelResourcesInstances.name}}" > {{thirdLevelResourcesInstances.name}} </div> + </div> + <ul> + <li data-ng-repeat="forthLevelResourcesInstances in thirdLevelResourcesInstances.resourceInstancesList"> + <div class="component-container"> + <div class="sprite-resource-icons small" ng-class="forthLevelResourcesInstances.icon"> + <div data-ng-class="{'non-certified':!forthLevelResourcesInstances.certified}" + tooltips tooltip-side="top" tooltip-content="Not certified"> + </div> + </div> + <div class="component-container-text" tooltips tooltip-content="{{forthLevelResourcesInstances.name}}"> {{forthLevelResourcesInstances.name}} </div> + </div> + </li> + </ul> + </li> + </ul> + </li> + </ul> + </li> + </ul> +</div> diff --git a/catalog-ui/src/app/directives/structure-tree/structure-tree-directive.less b/catalog-ui/src/app/directives/structure-tree/structure-tree-directive.less new file mode 100644 index 0000000000..094c3f70ba --- /dev/null +++ b/catalog-ui/src/app/directives/structure-tree/structure-tree-directive.less @@ -0,0 +1,68 @@ +.structure-tree{ + padding: 9px 0px 10px 30px; + position: relative; + ul{ + position: relative; + list-style: none; + padding-left:25px; + ::before{ + content: ""; + position: absolute; + left: -27px; + } + ::after{ + content: ""; + position: absolute; + left: -27px; + } + li{ + position: relative; + &::before{ + border-top: 1px solid #666666; + top: 20px; + width: 10px; + height: 0; + } + &::after{ + border-left: 1px solid #666666; + height: 100%; + width: 0px; + top: -2px; + } + &:last-child::after{ + height: 23px + } + } + } + .component-container{ + display: inline-block; + margin: 6px 0px 0px -16px; + } + .component-container-icon{ + display: inline-block; + } + .component-container-text{ + padding-left: 8px; + float: right; + + text-overflow: ellipsis; + max-width:120px; + display: inline-block; + white-space: nowrap; + font-size: 13px; + color: #666666;; + overflow: hidden; + line-height: 28px; + float: none; + } + + .non-certified{ + position: relative; + left: 18px; + bottom: 8px; + .sprite; + .s-sdc-state-non-certified; + display:block; + } + +} diff --git a/catalog-ui/src/app/directives/structure-tree/structure-tree-directive.ts b/catalog-ui/src/app/directives/structure-tree/structure-tree-directive.ts new file mode 100644 index 0000000000..4d6fbee4db --- /dev/null +++ b/catalog-ui/src/app/directives/structure-tree/structure-tree-directive.ts @@ -0,0 +1,195 @@ +/*- + * ============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========================================================= + */ +'use strict'; +import {RelationshipModel, Component, ComponentInstance} from "app/models"; +import {Dictionary} from "app/utils"; + + +export interface IStructureTreeScope extends ng.IScope { + + component:Component; + structureTree:StructureTree; +} + +class StructureTree { + + serviceRoot:ResourceInstanceNode; + + constructor(private uniqueId:string, private resourceInstanceName:string, private resourceInstanceIcon:string, private certified:boolean) { + this.serviceRoot = new ResourceInstanceNode(uniqueId, resourceInstanceName, resourceInstanceIcon, certified); + } + +} + +class ResourceInstanceNode { + id:string; + icon:string; + name:string; + resourceInstancesList:Array<ResourceInstanceNode>; + isAlreadyInTree:boolean; + certified:boolean; + + + constructor(private uniqueId:string, private resourceInstanceName:string, private resourceInstanceIcon:string, certified:boolean) { + this.id = uniqueId; + this.name = resourceInstanceName; + this.icon = resourceInstanceIcon; + this.resourceInstancesList = []; + this.isAlreadyInTree = false; + this.certified = certified; + } +} + +export class StructureTreeDirective implements ng.IDirective { + + + constructor() { + } + + scope = { + component: '=', + }; + restrict = 'E'; + template = ():string => { + return require('./structure-tree-directive.html'); + }; + + link = (scope:IStructureTreeScope, $elem:any) => { + + let RESOURCE_INSTANCE_LIST:string = "resourceInstancesChildesList"; + let resourceInstanceMap:Dictionary<string, ResourceInstanceNode>; + let relations:Array<RelationshipModel>; + //************* Start Building Tree Functions *******************// + + //remove unnecessary instances + let initResourceInstanceMap = ():void => { + + resourceInstanceMap = new Dictionary<string, ResourceInstanceNode>(); + + _.forEach(scope.component.componentInstances, (resourceInstance:ComponentInstance)=> { + if (_.some(Object.keys(resourceInstance.capabilities), (key:string)=> { + return 'tosca.capabilities.container' == key.toLowerCase(); + }) || _.some(Object.keys(resourceInstance.requirements), (key:string)=> { + return 'tosca.capabilities.container' == key.toLowerCase(); + })) { + + let isCertified = 0 === (parseFloat(resourceInstance.componentVersion) % 1); + let node:ResourceInstanceNode = new ResourceInstanceNode(resourceInstance.uniqueId, + resourceInstance.name, + resourceInstance.icon, + isCertified); + resourceInstanceMap.setValue(resourceInstance.uniqueId, node); + } + }); + }; + + //remove unnecessary relations + let initRelations = ():void => { + relations = _.filter(scope.component.componentInstancesRelations, (relation:RelationshipModel)=> { + return resourceInstanceMap.containsKey(relation.fromNode) && resourceInstanceMap.containsKey(relation.toNode); + }); + }; + + let buildTree = ():void => { + if (scope.component) { + scope.structureTree = new StructureTree(scope.component.uniqueId, scope.component.name, scope.component.icon, 'CERTIFIED' === scope.component.lifecycleState); + initResourceInstanceMap(); + initRelations(); + + let parentNodesList = _.groupBy(relations, (node:any)=> { + return node.fromNode; + }); + + for (let parent in parentNodesList) { + _.forEach(parentNodesList[parent], (childNode)=> { + parentNodesList[parent][RESOURCE_INSTANCE_LIST] = []; + parentNodesList[parent][RESOURCE_INSTANCE_LIST].push(mergeAllSubtrees(childNode, parentNodesList)); + }); + } + + //add the resourceInstanceList for the service root node + for (let parent in parentNodesList) { + let resourceInstanceNode:ResourceInstanceNode = resourceInstanceMap.getValue(parent); + resourceInstanceNode.resourceInstancesList = parentNodesList[parent]; + resourceInstanceNode.resourceInstancesList = parentNodesList[parent][RESOURCE_INSTANCE_LIST]; + resourceInstanceNode.isAlreadyInTree = true; + scope.structureTree.serviceRoot.resourceInstancesList.push(resourceInstanceNode); + } + + // Add all node that have no connection to the rootNode + resourceInstanceMap.forEach((key:string, value:ResourceInstanceNode) => { + if (!value.isAlreadyInTree) { + scope.structureTree.serviceRoot.resourceInstancesList.push(value); + } + }); + } + }; + + //this recursion is merging all the subtrees + let mergeAllSubtrees = (connectionData:any, parentNodesList:any):ResourceInstanceNode => { + let resourceInstanceNode:ResourceInstanceNode = resourceInstanceMap.getValue(connectionData.toNode); + resourceInstanceNode.isAlreadyInTree = true; + if (parentNodesList[resourceInstanceNode.id]) { + if (parentNodesList[resourceInstanceNode.id][RESOURCE_INSTANCE_LIST]) { + resourceInstanceNode.resourceInstancesList = parentNodesList[resourceInstanceNode.id][RESOURCE_INSTANCE_LIST]; + } + else { + _.forEach(parentNodesList[resourceInstanceNode.id], (children)=> { + resourceInstanceNode.resourceInstancesList.push(mergeAllSubtrees(children, parentNodesList)); + }); + } + delete parentNodesList[resourceInstanceNode.id]; + } + return resourceInstanceNode; + }; + //************* End Building Tree Functions *******************// + + //************* Start Watchers *******************// + scope.$watch('component.name', ():void => { + if (scope.structureTree) + scope.structureTree.serviceRoot.name = scope.component.name; + }); + + scope.$watch('component.icon', ():void => { + if (scope.structureTree) + scope.structureTree.serviceRoot.icon = scope.component.icon; + }); + + scope.$watchCollection('component.componentInstancesRelations', ():void => { + buildTree(); + }); + + scope.$watchCollection('component.componentInstances', ():void => { + buildTree(); + }); + + //************* End Watchers *******************// + + buildTree(); + + }; + + + public static factory = () => { + return new StructureTreeDirective(); + }; +} + +StructureTreeDirective.factory.$inject = []; diff --git a/catalog-ui/src/app/directives/tag/tag-directive.html b/catalog-ui/src/app/directives/tag/tag-directive.html new file mode 100644 index 0000000000..28c22a7978 --- /dev/null +++ b/catalog-ui/src/app/directives/tag/tag-directive.html @@ -0,0 +1,10 @@ +<div class="sdc-tag"> + <div class="tag" data-tests-id="i-sdc-tag-text" sdc-smart-tooltip data-ng-bind="tagData.tag"></div> + <div class="category" data-ng-hide="hideTooltip===true"> + <span class="relation-categoty-icon" data-tooltips data-tooltip-side="bottom" data-tooltip="'<span class='tag-tooltip-wrap'>{{tagData.tooltip}}</span>'" data-tooltip-enable="false"></span> + </div> + + <div class="delete" data-ng-if="!hideDelete && !sdcDisable" data-ng-click="delete()" data-tests-id="i-sdc-tag-delete"> + <span class="delete-icon"></span> + </div> +</div> diff --git a/catalog-ui/src/app/directives/tag/tag-directive.less b/catalog-ui/src/app/directives/tag/tag-directive.less new file mode 100644 index 0000000000..f72e366ac6 --- /dev/null +++ b/catalog-ui/src/app/directives/tag/tag-directive.less @@ -0,0 +1,51 @@ +.sdc-tag{ + + background-color:#F2F2F2 ; + .border-radius(4px); + min-width:150px; + height:30px; + display: flex; + align-items: center; + padding: 0 10px; + margin: 2px; + + .tag{ + display: inline-block; + } + + .category{ + margin-right: 4px; + margin-left: 25px; + width: 25px; + + } + .relation-categoty-icon{ + .sprite; + .sprite.relation-icon; + .hand; + vertical-align: middle; + + } + + .relation-categoty-icon:hover{ + .sprite; + .sprite.relation-icon-hover; + } + + .delete{ + + } + .delete-icon{ + .sprite; + .sprite.x-btn-black; + .hand; + vertical-align: middle; + } +} + +.tag-tooltip-wrap { + background-color: rgba(80, 99, 113, 0.9); + position: relative; + display: inline-block; + margin: -5px -14px 0px -14px; +} diff --git a/catalog-ui/src/app/directives/tag/tag-directive.ts b/catalog-ui/src/app/directives/tag/tag-directive.ts new file mode 100644 index 0000000000..77a26fc6f7 --- /dev/null +++ b/catalog-ui/src/app/directives/tag/tag-directive.ts @@ -0,0 +1,49 @@ +'use strict'; + +export class TagData { + tag:string; + tooltip:string; + id:string; +} + +export interface ITagScope extends ng.IScope { + tagData:TagData; + onDelete:Function; + delete:Function; + hideTooltip:boolean; + hideDelete:boolean; + sdcDisable:boolean; +} + +export class TagDirective implements ng.IDirective { + + constructor() { + } + + scope = { + tagData: '=', + onDelete: '&', + hideTooltip: '=', + hideDelete: '=', + sdcDisable: '=' + }; + + replace = true; + restrict = 'EA'; + template = ():string => { + return require('./tag-directive.html'); + }; + + link = (scope:ITagScope) => { + scope.delete = ()=> { + scope.onDelete({'uniqueId': scope.tagData.id}); + } + }; + + public static factory = ()=> { + return new TagDirective(); + }; + +} + +TagDirective.factory.$inject = []; diff --git a/catalog-ui/src/app/directives/user-header-details/user-header-details-directive.html b/catalog-ui/src/app/directives/user-header-details/user-header-details-directive.html new file mode 100644 index 0000000000..1c99a18ab5 --- /dev/null +++ b/catalog-ui/src/app/directives/user-header-details/user-header-details-directive.html @@ -0,0 +1,9 @@ +<div class="w-sdc-header-user-container" data-tests-id="ffff"> + <div class="w-sdc-header-user-icon"></div> + <div class="w-sdc-header-user-details"> + <div sdc-smart-tooltip class="w-sdc-header-user-name" data-ng-bind="user.getName()"></div> + <div class="w-sdc-header-user-role" data-ng-bind="user.getRoleToView()"></div> + <div class="w-sdc-header-user-last-login" data-ng-show="user.getLastLogin()!==''">Last Login: {{user.getLastLogin() | date: 'MMM dd hh:mm a' : 'UTC'}} UTC</div> + </div> + <!--<div class="w-sdc-header-logout-icon"></div>--> +</div> diff --git a/catalog-ui/src/app/directives/user-header-details/user-header-details-directive.less b/catalog-ui/src/app/directives/user-header-details/user-header-details-directive.less new file mode 100644 index 0000000000..e432581f3b --- /dev/null +++ b/catalog-ui/src/app/directives/user-header-details/user-header-details-directive.less @@ -0,0 +1,62 @@ +.w-sdc-header-user-container { + .b_7; + width: 400px; + .flex-fixed(400px); + padding: 0 23px; + display: flex; + justify-content: flex-end; +} + +.w-sdc-header-user-icon { + background: no-repeat url('/assets/styles/images/anonymous.jpg'); + border-radius: 50%; + height: 47px; + width: 47px; + background-size: cover; + border: solid 2px @color_m; + .flex-fixed(47px); +} + +.w-sdc-header-user-details { + padding: 4px 4px 4px 14px; + .vcenter; +} + +.w-sdc-header-user-name { + max-width: 160px; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + vertical-align: bottom; + + .bold; + display: inline-block; +} + +.w-sdc-header-user-role { + .bold; + display: inline-block; + margin-left: 6px; + + &:before { + content: ''; + margin-right: 8px; + border-left: 1px solid @color_m; + } +} + +.w-sdc-header-user-last-login { + .font-type._3; + display: block; +} + +.w-sdc-header-logout-icon { + background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAAUCAYAAACAl21KAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMDE0IDc5LjE1Njc5NywgMjAxNC8wOC8yMC0wOTo1MzowMiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTQgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjE5RjgxM0QxMDgzQTExRTVBQzA2OTg5ODlFNDVBNTZDIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjE5RjgxM0QyMDgzQTExRTVBQzA2OTg5ODlFNDVBNTZDIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MTlGODEzQ0YwODNBMTFFNUFDMDY5ODk4OUU0NUE1NkMiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MTlGODEzRDAwODNBMTFFNUFDMDY5ODk4OUU0NUE1NkMiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz6Riq1bAAAA20lEQVR42mJ0CUv+z0Aa+AvEertXzrmGLMgCpZcD8S4iDfoDxHfQBWEGnQLasICBAsDEQCUwcAa5hqeEAHEKNVykB8SzgYZVUGpQPRDPAOJ2oGHNZBsEjF1QussC4mlAXAM0rAM5+tHDwQJIVRBh7m0gLgeql6ZarLHgcP4JIBWAJ+YYgdQUIPYH4k6g+gpyop8RGj6gcGoGGYLTRQRAIxBnAHEl0JAOvF4jAC4BcSrQkDkEw4hA9K8ZGpkW5jUzYGwkkFCwrQJ68Rc2gyKhmNii9hwQoxS1AAEGAO5PP/+ClIDAAAAAAElFTkSuQmCC'); + height: 20px; + width: 18px; + position: absolute; + right: 20px; + top: 29px; +} + + diff --git a/catalog-ui/src/app/directives/user-header-details/user-header-details-directive.ts b/catalog-ui/src/app/directives/user-header-details/user-header-details-directive.ts new file mode 100644 index 0000000000..a1a54b0517 --- /dev/null +++ b/catalog-ui/src/app/directives/user-header-details/user-header-details-directive.ts @@ -0,0 +1,52 @@ +'use strict'; +import {User, IUser, IAppConfigurtaion} from "app/models"; +import {IUserResourceClass, IUserResource} from "app/services"; +export interface IUserHeaderDetailsScope extends ng.IScope { + name:string; + role:string; + iconUrl:string; + UserResourceClass:IUserResourceClass; + user:IUser; + sdcConfig:IAppConfigurtaion; + initUser:Function; +} + +export class UserHeaderDetailsDirective implements ng.IDirective { + + constructor(private $http:ng.IHttpService, private sdcConfig:IAppConfigurtaion, private UserResourceClass:IUserResourceClass) { + } + + scope = { + iconUrl: '=?' + }; + + replace = true; + restrict = 'E'; + template = ():string => { + return require('./user-header-details-directive.html'); + }; + + link = (scope:IUserHeaderDetailsScope) => { + + scope.initUser = ():void => { + let defaultUserId:string; + let user:IUserResource = this.UserResourceClass.getLoggedinUser(); + if (!user) { + defaultUserId = this.$http.defaults.headers.common[this.sdcConfig.cookie.userIdSuffix]; + user = this.UserResourceClass.get({id: defaultUserId}, ():void => { + scope.user = new User(user); + }); + } else { + scope.user = new User(user); + } + }; + scope.initUser(); + }; + + public static factory = ($http:ng.IHttpService, sdcConfig:IAppConfigurtaion, UserResourceClass:IUserResourceClass)=> { + return new UserHeaderDetailsDirective($http, sdcConfig, UserResourceClass); + }; + +} + +UserHeaderDetailsDirective.factory.$inject = ['$http', 'sdcConfig', 'Sdc.Services.UserResourceService']; diff --git a/catalog-ui/src/app/directives/utils/expand-collapse-list-header/expand-collapse-list-header.html b/catalog-ui/src/app/directives/utils/expand-collapse-list-header/expand-collapse-list-header.html new file mode 100644 index 0000000000..b351273c08 --- /dev/null +++ b/catalog-ui/src/app/directives/utils/expand-collapse-list-header/expand-collapse-list-header.html @@ -0,0 +1,19 @@ +<div class="main-wrap" data-tests-id="list-of-{{title}}"> + <div class="header"> + <div class="title">{{title}}</div> + <div class="buttons"> + <span class="order-by hand sprite-new" + data-ng-show="expandCollapseListData.expandCollapse" + data-ng-class="{'asc':!desc, 'desc':desc }" + data-ng-click="swapOrderBy()"></span> + <span class="search hand sprite-new search-icon" + data-ng-class="{'selected':showSearchBox}" + data-ng-show="expandCollapseListData.expandCollapse" + data-ng-click="showHideSearchBox()"></span> + <span class="hand sprite-new expand-list" + data-ng-class="{'open':expandCollapseListData.expandCollapse}" + data-ng-click="expandCollapseListData.expandCollapse=!expandCollapseListData.expandCollapse"></span> + </div> + </div> + <input type="text" id="list-search-box" class="search-box" data-ng-if="expandCollapseListData.expandCollapse && showSearchBox" data-ng-model="expandCollapseListData.filter" autofocus/> +</div> diff --git a/catalog-ui/src/app/directives/utils/expand-collapse-list-header/expand-collapse-list-header.less b/catalog-ui/src/app/directives/utils/expand-collapse-list-header/expand-collapse-list-header.less new file mode 100644 index 0000000000..2a80f28007 --- /dev/null +++ b/catalog-ui/src/app/directives/utils/expand-collapse-list-header/expand-collapse-list-header.less @@ -0,0 +1,43 @@ +.main-wrap{ + text-align: center; + .header{ + background-color: @tlv_color_w; + height: 42px; + border-bottom: 1px solid rgba(0, 159, 219, 0.6); + border-top: 1px solid rgba(0, 159, 219, 0.6); + .title{ + .f-type._14_m; + color: @main_color_l; + font-weight: 400; + line-height: 42px; + padding-left: 18px; + float: left; + } + .buttons{ + float: right; + padding-right: 11px; + line-height: 42px; + span{ + vertical-align: middle; + } + .search,.order-by{ + margin-right: 5px; + } + //temporary/// + .search{ + display: none; + } + ////////////// + } + } + + .search-box{ + border-radius: 2px; + height: 30px; + width:275px; + border: 1px @tlv_color_x solid; + margin: 8px 0; + padding: 0 5px; + } +} + diff --git a/catalog-ui/src/app/directives/utils/expand-collapse-list-header/expand-collapse-list-header.ts b/catalog-ui/src/app/directives/utils/expand-collapse-list-header/expand-collapse-list-header.ts new file mode 100644 index 0000000000..73cb2def0b --- /dev/null +++ b/catalog-ui/src/app/directives/utils/expand-collapse-list-header/expand-collapse-list-header.ts @@ -0,0 +1,66 @@ +/** + * Created by rcohen on 12/5/2016. + */ +'use strict'; + +export class ExpandCollapseListData { + filter:string;//variable for filter text + orderByField:string;//order by field name + expandCollapse:boolean;//boolean param for expand collapse the list +} + +export interface IExpandCollapseListHeaderScope extends ng.IScope { + title:string;//the title on the header + expandCollapseListData:ExpandCollapseListData; + showSearchBox:boolean; + desc:boolean;//order by desc or asc + + swapOrderBy():void; + showHideSearchBox():void; +} + +export class ExpandCollapseListHeaderDirective implements ng.IDirective { + + constructor(private $timeout:ng.ITimeoutService) { + } + + scope = { + title: '@', + expandCollapseListData: '=' + }; + + public replace = false; + public restrict = 'AE'; + public transclude = true; + + template = ():string => { + return require('./expand-collapse-list-header.html'); + }; + + link = (scope:IExpandCollapseListHeaderScope, $elem:any) => { + scope.swapOrderBy = ():void => { + if (scope.expandCollapseListData.orderByField.charAt(0) === '-') { + scope.expandCollapseListData.orderByField = scope.expandCollapseListData.orderByField.substr(1); + } else { + scope.expandCollapseListData.orderByField = '-' + scope.expandCollapseListData.orderByField; + } + scope.desc = !scope.desc; + }; + + scope.showHideSearchBox = ():void => { + scope.showSearchBox = !scope.showSearchBox; + if (scope.showSearchBox) { + this.$timeout(function () { + angular.element("#list-search-box").focus(); + }, 0); + } + }; + }; + + public static factory = ($timeout:ng.ITimeoutService)=> { + return new ExpandCollapseListHeaderDirective($timeout); + }; + +} + +ExpandCollapseListHeaderDirective.factory.$inject = ['$timeout']; diff --git a/catalog-ui/src/app/directives/utils/expand-collapse-menu-box/expand-collaps-menu-box.ts b/catalog-ui/src/app/directives/utils/expand-collapse-menu-box/expand-collaps-menu-box.ts new file mode 100644 index 0000000000..2a2432fcea --- /dev/null +++ b/catalog-ui/src/app/directives/utils/expand-collapse-menu-box/expand-collaps-menu-box.ts @@ -0,0 +1,47 @@ +'use strict'; +import {MenuItem, MenuItemGroup} from "app/utils"; + +export interface IExpandCollapseMenuBoxDirectiveScope extends ng.IScope { + menuItemsGroup:MenuItemGroup; + menuTitle:string; + parentScope:ng.IScope; + onMenuItemClick(menuItem:MenuItem):void; +} + +export class ExpandCollapseMenuBoxDirective implements ng.IDirective { + + constructor() { + } + + scope = { + menuTitle: '@', + menuItemsGroup: '=', + parentScope: '=' + }; + + public replace = false; + public restrict = 'AE'; + public transclude = true; + + template = ():string => { + return require('./expand-collapse-menu-box.html'); + }; + + link = (scope:IExpandCollapseMenuBoxDirectiveScope) => { + scope.onMenuItemClick = (menuItem:MenuItem):void => { + let onSuccess = ():void => { + scope.menuItemsGroup.selectedIndex = scope.menuItemsGroup.menuItems.indexOf(menuItem); + }; + let onFailed = ():void => { + }; + scope.parentScope[menuItem.action](menuItem.state).then(onSuccess, onFailed); + } + }; + + public static factory = ()=> { + return new ExpandCollapseMenuBoxDirective(); + }; + +} + +ExpandCollapseMenuBoxDirective.factory.$inject = []; diff --git a/catalog-ui/src/app/directives/utils/expand-collapse-menu-box/expand-collapse-menu-box.html b/catalog-ui/src/app/directives/utils/expand-collapse-menu-box/expand-collapse-menu-box.html new file mode 100644 index 0000000000..f90f00f230 --- /dev/null +++ b/catalog-ui/src/app/directives/utils/expand-collapse-menu-box/expand-collapse-menu-box.html @@ -0,0 +1,17 @@ +<div class="expand-collapse-menu-box"> + <expand-collapse expanded-selector=".w-sdc-designer-sidebar-section-content" class="expand-collapse-menu-box-title"> + <div class="expand-collapse-header"> + <div class="expand-collapse-menu-box-title-icon"></div> + <span class="w-sdc-designer-sidebar-section-title-text" data-ng-bind="menuTitle" tooltips tooltip-content="{{menuTitle}}"></span> + </div> + </expand-collapse> + + <div class="w-sdc-designer-sidebar-section-content" > + <div class="i-sdc-designer-sidebar-section-content-item expand-collapse-menu-box-item second-level" + ng-class="{'selected': $index == menuItemsGroup.selectedIndex}" ng-repeat="(key, menuItem) in menuItemsGroup.menuItems track by $index"> + <div class="expand-collapse-menu-box-item-text" ng-click="onMenuItemClick(menuItem)" ng-class="{'disabled': menuItem.isDisabled }" data-tests-id="{{menuItem.text}}step" >{{menuItem.text}}</div> + </div> + </div> + +</div> + diff --git a/catalog-ui/src/app/directives/utils/expand-collapse-menu-box/expand-collapse-menu-box.less b/catalog-ui/src/app/directives/utils/expand-collapse-menu-box/expand-collapse-menu-box.less new file mode 100644 index 0000000000..13ec1c99be --- /dev/null +++ b/catalog-ui/src/app/directives/utils/expand-collapse-menu-box/expand-collapse-menu-box.less @@ -0,0 +1,67 @@ +.expand-collapse-menu-box { + line-height: 20px; + //padding: 13px 0px 5px 10px; + background-color: @tlv_color_t; + //margin: 3px 3px 5px 0px; + + .expand-collapse-header{ + border-bottom: 1px solid @main_color_o; + height: @action_nav_height; + background-color:@main_color_p; + display:flex; + align-items:center; + } + + .expand-collapse-menu-box-title { + .f-type._18_m; + color: @main_color_a; + //font-weight: bold; + .hand; + .w-sdc-designer-sidebar-section-title-text{ + max-width: 185px; + overflow: hidden; + text-overflow: ellipsis; + display: inline-block; + white-space: nowrap; + padding: 8px 0; + } + + &.expanded { + .expand-collapse-menu-box-title-icon { + transform: rotate(180deg); + } + } + } + .expand-collapse-menu-box-title-icon { + .hand; + .sprite-new; + .arrow-up; + margin-right: 6px; + transition: .3s all; + position: relative; + vertical-align: text-top; + margin-left: 14px; + vertical-align: 14px; + } + .w-sdc-designer-sidebar-section-content { + overflow: hidden; + //padding-top: 13px; + .expand-collapse-menu-box-item { + .hand; + padding-left: 14px; + //margin: 0px 0px 10px 10px; + font-family: @font-omnes-medium; + color: @main_color_m; + + line-height: 18px; + &.selected { + //padding-left: 10px; + //font-weight: bold; + //border-left: 4px solid @main_color_a; + background-color: #009fdb; + color: #ffffff; + } + + } + } +} diff --git a/catalog-ui/src/app/directives/utils/expand-collapse/expand-collapse.html b/catalog-ui/src/app/directives/utils/expand-collapse/expand-collapse.html new file mode 100644 index 0000000000..a2358ea2b7 --- /dev/null +++ b/catalog-ui/src/app/directives/utils/expand-collapse/expand-collapse.html @@ -0,0 +1 @@ +<ng-transclude></ng-transclude> diff --git a/catalog-ui/src/app/directives/utils/expand-collapse/expand-collapse.less b/catalog-ui/src/app/directives/utils/expand-collapse/expand-collapse.less new file mode 100644 index 0000000000..e6b7b7d516 --- /dev/null +++ b/catalog-ui/src/app/directives/utils/expand-collapse/expand-collapse.less @@ -0,0 +1,11 @@ +.ellipsis-directive-more-less { + .a_9; + .bold; + .hand; + float: right; + margin-right: 10px; + line-height: 23px; + text-decoration: underline; + text-align: left; +} + diff --git a/catalog-ui/src/app/directives/utils/expand-collapse/expand-collapse.ts b/catalog-ui/src/app/directives/utils/expand-collapse/expand-collapse.ts new file mode 100644 index 0000000000..3993f06036 --- /dev/null +++ b/catalog-ui/src/app/directives/utils/expand-collapse/expand-collapse.ts @@ -0,0 +1,115 @@ +'use strict'; +export interface IExpandCollapseScope extends ng.IScope { + toggle():void; + collapsed:boolean; + expandedSelector:string; + content:string; + isCloseOnInit:boolean; + loadDataFunction:Function; + isLoadingData:boolean; +} + +export class ExpandCollapseDirective implements ng.IDirective { + + constructor() { + } + + scope = { + expandedSelector: '@', + loadDataFunction: '&?', + isCloseOnInit: '=?' + }; + + public replace = false; + public restrict = 'AE'; + public transclude = true; + + template = ():string => { + return require('./expand-collapse.html'); + }; + + link = (scope:IExpandCollapseScope, $elem:any) => { + scope.collapsed = false; + scope.isLoadingData = false; + $elem.addClass('expanded'); + + + if (scope.isCloseOnInit) { + window.setTimeout(function () { + toggle(); + }, 0); + } + // + // $elem.click(function () { + // toggle(); + // }); + $elem.bind('click', function() { + toggle(); + }) + let expand = ():void => { + $elem.addClass('expanded'); + scope.collapsed = false; + + let element = $(scope.expandedSelector)[0]; + let prevWidth = element.style.height; + element.style.height = 'auto'; + let endWidth = getComputedStyle(element).height; + element.style.height = prevWidth; + element.offsetHeight; // force repaint + element.style.transition = 'height .3s ease-in-out'; + element.style.height = endWidth; + element.hidden = false; + element.addEventListener('transitionend', function transitionEnd(event) { + if (event['propertyName'] == 'height') { + element.style.transition = ''; + element.style.height = 'auto'; + element.removeEventListener('transitionend', transitionEnd, false); + } + }, false) + }; + + let collapse = ():void => { + $elem.removeClass('expanded'); + scope.collapsed = true; + + let element = $(scope.expandedSelector)[0]; + element.style.height = getComputedStyle(element).height; + element.style.transition = 'height .5s ease-in-out'; + element.offsetHeight; // force repaint + element.style.height = '0px'; + element.hidden = true; + }; + + let toggle = ():void => { + if (scope.collapsed === true) { + if (scope.loadDataFunction) { + scope.isLoadingData = true; + let onSuccess = () => { + window.setTimeout(function () { + expand(); + scope.isLoadingData = false; + }, 0); + }; + scope.loadDataFunction().then(onSuccess); + } + else { + if (scope.isLoadingData === false) { + expand(); + } + } + + } else { + if (scope.isLoadingData === false) { + collapse(); + } + } + } + + }; + + public static factory = ()=> { + return new ExpandCollapseDirective(); + }; +} + +ExpandCollapseDirective.factory.$inject = []; diff --git a/catalog-ui/src/app/directives/utils/sdc-keyboard-events/sdc-keyboard-events.ts b/catalog-ui/src/app/directives/utils/sdc-keyboard-events/sdc-keyboard-events.ts new file mode 100644 index 0000000000..71a963a492 --- /dev/null +++ b/catalog-ui/src/app/directives/utils/sdc-keyboard-events/sdc-keyboard-events.ts @@ -0,0 +1,84 @@ +'use strict'; + +export interface ISdcKeyboardEventsScope extends ng.IScope { + keyEnter:Function; + keyShift:Function; + keyCtrl:Function; + keyEscape:Function; + keySpace:Function; +} + +export class SdcKeyboardEventsDirective implements ng.IDirective { + + constructor() { + } + + scope = { + keyEnter: '=', + keyShift: '=', + keyCtrl: '=', + keyEscape: '=', + keySpace: '=' + }; + + public replace = false; + public restrict = 'A'; + public transclude = false; + + link = (scope:ISdcKeyboardEventsScope, element:ng.IAugmentedJQuery, attrs:angular.IAttributes) => { + + element.bind("keydown keypress", function (event) { + //console.log(event.which); + switch (event.which) { + case 13: // enter key + scope.$apply(function () { + if (scope.keyEnter) { + scope.keyEnter(); + event.preventDefault(); + } + }); + break; + case 16: // shift key + scope.$apply(function () { + if (scope.keyShift) { + scope.keyShift(); + event.preventDefault(); + } + }); + break; + case 17: // ctrl key + scope.$apply(function () { + if (scope.keyCtrl) { + scope.keyCtrl(); + event.preventDefault(); + } + }); + break; + case 27: // escape key + scope.$apply(function () { + if (scope.keyEscape) { + scope.keyEscape(); + event.preventDefault(); + } + }); + break; + case 32: // space key + scope.$apply(function () { + if (scope.keySpace) { + scope.keySpace(); + event.preventDefault(); + } + }); + break; + } + }); + + }; + + public static factory = ()=> { + return new SdcKeyboardEventsDirective(); + }; + +} + +SdcKeyboardEventsDirective.factory.$inject = []; diff --git a/catalog-ui/src/app/directives/utils/sdc-tags/sdc-tags.html b/catalog-ui/src/app/directives/utils/sdc-tags/sdc-tags.html new file mode 100644 index 0000000000..fb1ada69c3 --- /dev/null +++ b/catalog-ui/src/app/directives/utils/sdc-tags/sdc-tags.html @@ -0,0 +1,27 @@ +<div class="tags-box" > + <input type="text" + name="{{elementName}}" + class="new-tag-input" + data-ng-class="{'view-mode':sdcDisabled}" + data-ng-change="validateName()" + data-ng-model="newTag" + data-ng-maxlength="50" + data-ng-pattern="pattern" + data-tests-id="i-sdc-tag-input" + maxlength="50" + sdc-keyboard-events + key-enter="addTag" + + /> + <perfect-scrollbar class="perfect-scrollbar tags-wrapper" data-ng-class="{'view-mode':sdcDisabled}" include-padding="true"> + <div data-tests-id="i-sdc-tags-wrapper" > + <div class="group-tag" data-ng-show="specialTag"> + <sdc-tag data-hide-tooltip="true" data-hide-delete="true" + data-tag-data="{tag: specialTag, id: specialTag }"></sdc-tag> + </div> + <div class="group-tag" ng-repeat="tag in tags track by $index"> + <sdc-tag ng-if="tag != specialTag" data-on-delete="deleteTag(tag)" sdc-disable="sdcDisabled" data-hide-delete="sdcDisabled" data-hide-tooltip="true" data-tag-data="{tag: tag, id: tag }"></sdc-tag> + </div> + </div> + </perfect-scrollbar> +</div> diff --git a/catalog-ui/src/app/directives/utils/sdc-tags/sdc-tags.less b/catalog-ui/src/app/directives/utils/sdc-tags/sdc-tags.less new file mode 100644 index 0000000000..942196e663 --- /dev/null +++ b/catalog-ui/src/app/directives/utils/sdc-tags/sdc-tags.less @@ -0,0 +1,61 @@ +.tags-box { + + height: 297px; + .bg_c; + + .perfect-scrollbar { + height: 265px; + } + + .new-tag-input { + display: block; + + -webkit-border-bottom-left-radius: 0 !important; + -moz-border-radius-bottomleft: 0 !important; + -khtml-border-bottom-left-radius: 0 !important; + border-bottom-left-radius: 0 !important; + + -webkit-border-bottom-right-radius: 0 !important; + -moz-border-radius-bottomright: 0 !important; + -khtml-border-bottom-right-radius: 0 !important; + border-bottom-right-radius: 0 !important; + + border: solid 1px #d8d8d8; + width: 100%; + height: 30px; + line-height: 30px; + padding: 2px 10px; + outline: none; + } + + .tags-wrapper { + padding: 10px; + .border-radius-bottom-left(2px); + .border-radius-bottom-right(2px); + border: solid 1px #d8d8d8; + border-top: none; + + .group-tag { + display: inline-block; + + .sdc-tag { + border: solid 1px @main_color_n; + background-color: @main_color_p; + min-width: auto; + .tag { + margin-right: 10px; + } + } + } + &.view-mode .group-tag { + opacity: 1; + background-color: #f8f8f8 !important; + .sdc-tag { + background: none; + border-color: @main_color_o; + } + } + } + +} + diff --git a/catalog-ui/src/app/directives/utils/sdc-tags/sdc-tags.ts b/catalog-ui/src/app/directives/utils/sdc-tags/sdc-tags.ts new file mode 100644 index 0000000000..082a77dd9f --- /dev/null +++ b/catalog-ui/src/app/directives/utils/sdc-tags/sdc-tags.ts @@ -0,0 +1,75 @@ +'use strict'; + +export interface ISdcTagsScope extends ng.IScope { + tags:Array<string>; + specialTag:string; + newTag:string; + formElement:ng.IFormController; + elementName:string; + pattern:any; + sdcDisabled:boolean; + maxTags:number; + deleteTag(tag:string):void; + addTag(tag:string):void; + validateName():void; +} + +export class SdcTagsDirective implements ng.IDirective { + + constructor() { + } + + scope = { + tags: '=', + specialTag: '=', + pattern: '=', + sdcDisabled: '=', + formElement: '=', + elementName: '@', + maxTags: '@' + }; + + public replace = false; + public restrict = 'E'; + public transclude = false; + + template = ():string => { + return require('./sdc-tags.html'); + }; + + link = (scope:ISdcTagsScope, element:ng.INgModelController) => { + + scope.deleteTag = (tag:string):void => { + scope.tags.splice(scope.tags.indexOf(tag), 1); + }; + + scope.addTag = ():void => { + let valid = scope.formElement[scope.elementName].$valid; + if (valid && + scope.tags.length < scope.maxTags && + scope.newTag && + scope.newTag !== '' && + scope.tags.indexOf(scope.newTag) === -1 && + scope.newTag !== scope.specialTag) { + scope.tags.push(scope.newTag); + scope.newTag = ''; + } + }; + + scope.validateName = ():void => { + if (scope.tags.indexOf(scope.newTag) > -1) { + scope.formElement[scope.elementName].$setValidity('nameExist', false); + } else { + scope.formElement[scope.elementName].$setValidity('nameExist', true); + } + } + + }; + + public static factory = ()=> { + return new SdcTagsDirective(); + }; + +} + +SdcTagsDirective.factory.$inject = []; diff --git a/catalog-ui/src/app/directives/utils/smart-tooltip/smart-tooltip.ts b/catalog-ui/src/app/directives/utils/smart-tooltip/smart-tooltip.ts new file mode 100644 index 0000000000..d0177b4094 --- /dev/null +++ b/catalog-ui/src/app/directives/utils/smart-tooltip/smart-tooltip.ts @@ -0,0 +1,61 @@ +'use strict'; + +export interface ISmartTooltipScope extends ng.IScope { + sdcSmartToolip; +} + +export class SmartTooltipDirective implements ng.IDirective { + + constructor(private $compile:ng.ICompileService) { + } + + public replace = false; + public restrict = 'A'; + public transclude = false; + + public link = (scope:ISmartTooltipScope, $elem:ng.IAugmentedJQuery, $attrs:angular.IAttributes) => { + + if ($elem[0].hasAttribute('style') === false) { + $elem[0].setAttribute("style", "overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"); + } else { + let styles = $elem.attr('style'); + $elem[0].setAttribute("style", styles + ";overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"); + } + + $elem.bind('mouseenter', () => { + if ($elem[0].offsetWidth < $elem[0].scrollWidth && !$elem.attr('tooltips')) { + $attrs.$set('tooltips', 'tooltips'); + if ($attrs['sdcSmartTooltip'] && $attrs['sdcSmartTooltip'].length > 0) { + $elem.attr('tooltip-content', $attrs['sdcSmartTooltip']); + } else { + $attrs.$set('tooltip-content', $elem.text()); + } + + //One possible problem arises when the ngIf is placed on the root element of the template. + //ngIf removes the node and places a comment in it's place. Then it watches over the expression and adds/removes the actual HTML element as necessary. + //The problem seems to be that if it is placed on the root element of the template, then a single comment is what is left from the + //whole template (even if only temporarily), which gets ignored (I am not sure if this is browser-specific behaviour), resulting in an empty template. + + // Remove ng-if attribute and its value (if we reach here, we pass ng-if (ng-if===true), so we can remove it). + $elem.removeAttr('ng-if'); + $elem.removeAttr('data-ng-if'); + + // Remove me (the directive from the element) + let template = $elem[0].outerHTML; + template = template.replace('sdc-smart-tooltip=""', ''); + template = template.replace('sdc-smart-tooltip="' + $elem.text() + '"', ''); + //console.log(template); + + let el = this.$compile(template)(scope); + console.log(el); + $elem.replaceWith(el); + } + }); + }; + + public static factory = ($compile:ng.ICompileService)=> { + return new SmartTooltipDirective($compile); + }; +} + +SmartTooltipDirective.factory.$inject = ['$compile']; diff --git a/catalog-ui/src/app/directives/utils/validation-on-load/validation-on-load.ts b/catalog-ui/src/app/directives/utils/validation-on-load/validation-on-load.ts new file mode 100644 index 0000000000..d489efa928 --- /dev/null +++ b/catalog-ui/src/app/directives/utils/validation-on-load/validation-on-load.ts @@ -0,0 +1,48 @@ +'use strict'; + +export interface IValidationOnLoadScope extends ng.IScope { + formToValidate:ng.IFormController; +} + +export class ValidationOnLoadDirective implements ng.IDirective { + + constructor(private $timeout:ng.ITimeoutService) { + } + + scope = { + formToValidate: '=' + }; + + public replace = false; + public restrict = 'A'; + + + public link = (scope:IValidationOnLoadScope, $elem:ng.IAugmentedJQuery, $attrs:angular.IAttributes) => { + + let init = ()=> { + //validate errors + if (scope.formToValidate.$error) { + angular.forEach(scope.formToValidate.$error, (value, key)=> { + //skip on the required error if its a new form + if (key != 'required') { + angular.forEach(value, function (field) { + field.$setDirty();//trigger to show the error label + }); + } + }) + } + }; + + this.$timeout(()=> { + init(); + }, 0); + + }; + + public static factory = ($timeout:ng.ITimeoutService)=> { + return new ValidationOnLoadDirective($timeout); + }; + +} + +ValidationOnLoadDirective.factory.$inject = ['$timeout']; |