catalog-ui/src/app/directives/graphs-v2/relation-menu/relation-menu.html

   1 <div class="link-menu-open" data-tests-id="link-menu-open" data-ng-show="isLinkMenuOpen" ng-style="{left: connectRelationModel.menuPosition.x, top: connectRelationModel.menuPosition.y}" clicked-outside="{onClickedOutside: 'hideRelationMatch()', clickedOutsideEnable: 'isLinkMenuOpen'}" >
   2     <h4 sdc-smart-tooltip>{{relationMenuDirectiveObj.leftSideLink.componentInstance.name | resourceName}}</h4>
   3     <h4 sdc-smart-tooltip>{{relationMenuDirectiveObj.rightSideLink.componentInstance.name | resourceName}}</h4>
   4
   5     <p>Select one of the options below to connect</p>
   6
   7     <perfect-scrollbar scroll-y-margin-offset="0" include-padding="true" class="scrollbar-container">
   8         <div class="inner-title" data-ng-show="hasMatchesToShow(connectRelationModel.leftSideLink.requirements, connectRelationModel.rightSideLink.selectedMatch)">Requirements</div>
   9         <div class="link-item" data-tests-id="link-item-requirements" data-ng-repeat="(req ,matchArr) in connectRelationModel.leftSideLink.requirements"
  10              data-ng-click="connectRelationModel.leftSideLink.selectMatchArr(matchArr); updateSelectionText()"
  11              data-ng-show="showMatch(connectRelationModel.rightSideLink.selectedMatch, matchArr)"
  12              data-ng-class="{ 'selected': connectRelationModel.leftSideLink.selectedMatch === matchArr}">
  13             <div sdc-smart-tooltip>{{matchArr[0].requirement.getFullTitle()}}</div>
  14         </div>
  15
  16         <div class="inner-title" data-ng-show="hasMatchesToShow(connectRelationModel.leftSideLink.capabilities, connectRelationModel.rightSideLink.selectedMatch)">Capabilities</div>
  17         <div class="link-item" data-tests-id="link-item-capabilities" data-ng-repeat="(cap, matchArr) in connectRelationModel.leftSideLink.capabilities"
  18              data-ng-click="connectRelationModel.leftSideLink.selectMatchArr(matchArr); updateSelectionText()"
  19              data-ng-show="showMatch(connectRelationModel.rightSideLink.selectedMatch, matchArr)"
  20              data-ng-class="{ 'selected': connectRelationModel.leftSideLink.selectedMatch === matchArr}">
  21             <div sdc-smart-tooltip>{{matchArr[0].capability.getFullTitle()}}</div>
  22         </div>
  23     </perfect-scrollbar>
  24
  25     <perfect-scrollbar scroll-y-margin-offset="0" include-padding="true" class="scrollbar-container">
  26         <div class="inner-title" data-ng-show="hasMatchesToShow(connectRelationModel.rightSideLink.requirements, connectRelationModel.leftSideLink.selectedMatch)">Requirements</div>
  27         <div class="link-item" data-tests-id="link-item-requirements" data-ng-repeat="(req, matchArr) in connectRelationModel.rightSideLink.requirements"
  28              data-ng-click="connectRelationModel.rightSideLink.selectMatchArr(matchArr); updateSelectionText()"
  29              data-ng-show="showMatch(connectRelationModel.leftSideLink.selectedMatch, matchArr)"
  30              data-ng-class="{ 'selected': connectRelationModel.rightSideLink.selectedMatch === matchArr}">
  31             <div sdc-smart-tooltip>{{matchArr[0].secondRequirement ? matchArr[0].secondRequirement.getFullTitle() : matchArr[0].requirement.getFullTitle()}}</div>
  32         </div>
  33
  34         <div class="inner-title" data-ng-show="hasMatchesToShow(connectRelationModel.rightSideLink.capabilities, connectRelationModel.leftSideLink.selectedMatch)">Capabilities</div>
  35         <div class="link-item"  data-tests-id="link-item-capabilities" data-ng-repeat="(cap, matchArr) in connectRelationModel.rightSideLink.capabilities"
  36              data-ng-click="connectRelationModel.rightSideLink.selectMatchArr(matchArr); updateSelectionText()"
  37              data-ng-show="showMatch(connectRelationModel.leftSideLink.selectedMatch, matchArr)"
  38              data-ng-class="{ 'selected': connectRelationModel.rightSideLink.selectedMatch === matchArr}">
  39             <div sdc-smart-tooltip>{{matchArr[0].capability.getFullTitle()}}</div>
  40         </div>
  41     </perfect-scrollbar>
  42
  43     <div class="vl-type" data-ng-class="{'disabled': !connectRelationModel.leftSideLink.selectedMatch[0].secondRequirement || !connectRelationModel.rightSideLink.selectedMatch[0].secondRequirement}">
  44         <sdc-radio-button sdc-model="relationMenuDirectiveObj.vlType" value="ptp"
  45                           disabled="!relationMenuDirectiveObj.leftSideLink.selectedMatch[0].secondRequirement || !relationMenuDirectiveObj.rightSideLink.selectedMatch[0].secondRequirement || !relationMenuDirectiveObj.p2pVL"
  46                           text="Point to point" elem-id="radioPTP" elem-name="vlType"></sdc-radio-button>
  47
  48         <sdc-radio-button sdc-model="relationMenuDirectiveObj.vlType" value="mptmp"
  49                           disabled="!relationMenuDirectiveObj.leftSideLink.selectedMatch[0].secondRequirement || !relationMenuDirectiveObj.rightSideLink.selectedMatch[0].secondRequirement || !relationMenuDirectiveObj.mp2mpVL"
  50                           text="Multi point" elem-id="radioMPTMP" elem-name="vlType"></sdc-radio-button>
  51
  52         <span class="sprite-new info-icon" tooltips tooltip-content="You are required to choose the type of the Virtual Link."></span>
  53     </div>
  54
  55     <div class="result" sdc-smart-tooltip>&#8203;{{relationMenuDirectiveObj.selectionText}}
  56
  57     </div>
  58
  59     <button class="tlv-btn grey" data-tests-id="link-menu-button-cancel" data-ng-click="hideRelationMatch()">Cancel</button>
  60     <button class="tlv-btn blue" data-tests-id="link-menu-button-connect" data-ng-disabled="!connectRelationModel.leftSideLink.selectedMatch || !connectRelationModel.rightSideLink.selectedMatch ||
  61                                                                     (connectRelationModel.leftSideLink.selectedMatch[0].secondRequirement && !connectRelationModel.vlType)"
  62             data-ng-click="saveRelation()">Connect</button>
  63 </div>