From 451a3400b76511393c62a444f588a4ed15f4a549 Mon Sep 17 00:00:00 2001 From: Michael Lando Date: Sun, 19 Feb 2017 10:28:42 +0200 Subject: Initial OpenECOMP SDC commit Change-Id: I0924d5a6ae9cdc161ae17c68d3689a30d10f407b Signed-off-by: Michael Lando --- .../graphs-v2/relation-menu/relation-menu.html | 63 +++++++++++ .../graphs-v2/relation-menu/relation-menu.less | 118 +++++++++++++++++++++ .../graphs-v2/relation-menu/relation-menu.ts | 113 ++++++++++++++++++++ 3 files changed, 294 insertions(+) create mode 100644 catalog-ui/app/scripts/directives/graphs-v2/relation-menu/relation-menu.html create mode 100644 catalog-ui/app/scripts/directives/graphs-v2/relation-menu/relation-menu.less create mode 100644 catalog-ui/app/scripts/directives/graphs-v2/relation-menu/relation-menu.ts (limited to 'catalog-ui/app/scripts/directives/graphs-v2/relation-menu') diff --git a/catalog-ui/app/scripts/directives/graphs-v2/relation-menu/relation-menu.html b/catalog-ui/app/scripts/directives/graphs-v2/relation-menu/relation-menu.html new file mode 100644 index 0000000000..a0a9e4af27 --- /dev/null +++ b/catalog-ui/app/scripts/directives/graphs-v2/relation-menu/relation-menu.html @@ -0,0 +1,63 @@ +
+

{{relationMenuDirectiveObj.leftSideLink.componentInstance.name | resourceName}}

+

{{relationMenuDirectiveObj.rightSideLink.componentInstance.name | resourceName}}

+ +

Select one of the options below to connect

+ + +
Requirements
+
+
{{matchArr[0].requirement.getFullTitle()}}
+
+ +
Capabilities
+
+
{{matchArr[0].capability.getFullTitle()}}
+
+ + + +
Requirements
+
+
{{matchArr[0].secondRequirement ? matchArr[0].secondRequirement.getFullTitle() : matchArr[0].requirement.getFullTitle()}}
+
+ +
Capabilities
+
+
{{matchArr[0].capability.getFullTitle()}}
+
+ + +
+ + + + + +
+ +
​{{relationMenuDirectiveObj.selectionText}} + +
+ + + +
diff --git a/catalog-ui/app/scripts/directives/graphs-v2/relation-menu/relation-menu.less b/catalog-ui/app/scripts/directives/graphs-v2/relation-menu/relation-menu.less new file mode 100644 index 0000000000..dea814dbec --- /dev/null +++ b/catalog-ui/app/scripts/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/app/scripts/directives/graphs-v2/relation-menu/relation-menu.ts b/catalog-ui/app/scripts/directives/graphs-v2/relation-menu/relation-menu.ts new file mode 100644 index 0000000000..22a2d078b7 --- /dev/null +++ b/catalog-ui/app/scripts/directives/graphs-v2/relation-menu/relation-menu.ts @@ -0,0 +1,113 @@ +/*- + * ============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========================================================= + */ +/// +module Sdc.Directives { + 'use strict'; + + + export interface IRelationMenuScope extends ng.IScope { + relationMenuDirectiveObj:Models.RelationMenuDirectiveObj; + createRelation:Function; + isLinkMenuOpen:boolean; + hideRelationMatch:Function; + cancel:Function; + + saveRelation(); + showMatch(arr1:Array, arr2:Array):boolean; + hasMatchesToShow(matchesObj:Models.MatchBase, selectedMatch:Array); + updateSelectionText():void; + + } + + + export class RelationMenuDirective implements ng.IDirective { + + constructor(private $templateCache:ng.ITemplateCacheService, + private $filter:ng.IFilterService + ) { + } + + scope = { + relationMenuDirectiveObj: '=', + isLinkMenuOpen: '=', + createRelation: '&', + cancel:'&' + }; + + restrict = 'E'; + replace = true; + template = ():string => { + return this.$templateCache.get('/app/scripts/directives/graphs-v2/relation-menu/relation-menu.html'); + }; + + link = (scope:IRelationMenuScope, element:JQuery, $attr:ng.IAttributes) => { + + scope.saveRelation = ():void=> { + let chosenMatches:Array = _.intersection(scope.relationMenuDirectiveObj.rightSideLink.selectedMatch, scope.relationMenuDirectiveObj.leftSideLink.selectedMatch); + let chosenMatch:Models.MatchBase = chosenMatches[0]; + let chosenVL:Models.Components.Component; + if ("mptmp" === scope.relationMenuDirectiveObj.vlType) { + chosenVL = scope.relationMenuDirectiveObj.mp2mpVL; + } else { + chosenVL = scope.relationMenuDirectiveObj.p2pVL; + } + scope.createRelation()(chosenMatch,chosenVL); + }; + + + scope.hideRelationMatch = () => { + scope.isLinkMenuOpen = false; + scope.cancel(); + }; + + //to show options in link menu + scope.showMatch = (arr1:Array, arr2:Array):boolean => { + return !arr1 || !arr2 || _.intersection(arr1, arr2).length > 0; + }; + + //to show requirements/capabilities title + scope.hasMatchesToShow = (matchesObj:Models.MatchBase, selectedMatch:Array):boolean => { + let result:boolean = false; + _.forEach(matchesObj, (matchesArr:Array) => { + 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 = ($templateCache:ng.ITemplateCacheService , $filter:ng.IFilterService)=> { + return new RelationMenuDirective($templateCache, $filter); + }; + } + + RelationMenuDirective.factory.$inject = ['$templateCache', '$filter']; +} -- cgit 1.2.3-korg