Initial OpenECOMP SDC commit

Change-Id: I0924d5a6ae9cdc161ae17c68d3689a30d10f407b
Signed-off-by: Michael Lando <ml636r@att.com>

3 files changed, 294 insertions, 0 deletions

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 @@
+<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>&#8203;{{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/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=========================================================
+ */
+/// <reference path="../../../references"/>
+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<Models.MatchBase>, arr2:Array<Models.MatchBase>):boolean;
+        hasMatchesToShow(matchesObj:Models.MatchBase, selectedMatch:Array<Models.MatchBase>);
+        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<any> = _.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<Models.MatchBase>, arr2:Array<Models.MatchBase>):boolean => {
+                return !arr1 || !arr2 || _.intersection(arr1, arr2).length > 0;
+            };
+
+            //to show requirements/capabilities title
+            scope.hasMatchesToShow = (matchesObj:Models.MatchBase, selectedMatch:Array<Models.MatchBase>):boolean => {
+                let result:boolean = false;
+                _.forEach(matchesObj, (matchesArr:Array<Models.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 = ($templateCache:ng.ITemplateCacheService , $filter:ng.IFilterService)=> {
+            return new RelationMenuDirective($templateCache, $filter);
+        };
+    }
+
+    RelationMenuDirective.factory.$inject = ['$templateCache', '$filter'];
+}