[SDC-29] catalog 1707 rebase commit.

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

3 files changed, 284 insertions, 0 deletions

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>&#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/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'];