From ec553dea0e002babc10a7a5a62d595b7e7354c1f Mon Sep 17 00:00:00 2001 From: Daniel Malachovsky Date: Fri, 1 Jul 2016 14:27:16 +0200 Subject: [PATCH] Sidepanel - templates, controllers - new logic for sidepanel - added/edited sidepanel controllers and templates - design changes in lists in sidepanels - Autocomplete when adding Endpoint Group is now case insensitive in add/edit endpoint dialog Change-Id: Id75c647f82173c56ddfb85c7ebc8f660bcf6e9f1 Signed-off-by: Lubomir Balogh -X (lubalogh - PANTHEON TECHNOLOGIES at Cisco) Signed-off-by: Daniel Malachovsky --- groupbasedpolicy-ui/.gitignore | 1 + .../resources/gbp/common/gbp.controller.js | 209 +++------------- .../src/main/resources/gbp/common/gbp.css | 102 +++++++- .../main/resources/gbp/common/gbp.css.orig | 226 ------------------ .../main/resources/gbp/common/gbp.module.js | 4 + .../topology/next_topology.directive.js | 27 ++- .../resources/gbp/common/views/index.tpl.html | 4 +- .../resources/gbp/common/views/root.tpl.html | 2 +- .../gbp/endpoints/add-endpoint.controller.js | 10 +- .../gbp/endpoints/endpoint.service.js | 4 +- .../gbp/endpoints/endpoints-list.service.js | 8 +- .../gbp/endpoints/endpoints.controller.js | 12 +- .../contract-sidepanel.tpl.html | 46 ---- .../resolved-policy/epg-sidepanel.tpl.html | 95 -------- .../resolved-policy-list.service.js | 114 +++++++-- .../resolved-policy.controller.js | 4 +- .../resolved-policy.service.js | 7 +- .../resolved-policy/resolved-policy.tpl.html | 16 +- .../resolved-policy/rule-sidepanel.tpl.html | 105 -------- .../contract-list-sidepanel.controller.js | 17 ++ .../contract-sidepanel.controller.js | 23 ++ .../epg-list-sidepanel.controller.js | 19 ++ .../sidepanel/epg-sidepanel.controller.js | 19 ++ .../views}/clause-sidepanel.tpl.html | 12 +- .../views/contract-list-sidepanel.tpl.html | 18 ++ .../views/contract-sidepanel.tpl.html | 25 ++ .../views/epg-list-sidepanel.tpl.html | 18 ++ .../sidepanel/views/epg-sidepanel.tpl.html | 71 ++++++ .../sidepanel/views/rule-sidepanel.tpl.html | 74 ++++++ .../views/subject-sidepanel.tpl.html | 30 +++ .../subject-sidepanel.tpl.html | 30 --- .../gbp/sfc/dialog-sfc-topology.controller.js | 65 ++--- 32 files changed, 624 insertions(+), 793 deletions(-) delete mode 100644 groupbasedpolicy-ui/module/src/main/resources/gbp/common/gbp.css.orig delete mode 100644 groupbasedpolicy-ui/module/src/main/resources/gbp/resolved-policy/contract-sidepanel.tpl.html delete mode 100644 groupbasedpolicy-ui/module/src/main/resources/gbp/resolved-policy/epg-sidepanel.tpl.html delete mode 100644 groupbasedpolicy-ui/module/src/main/resources/gbp/resolved-policy/rule-sidepanel.tpl.html create mode 100644 groupbasedpolicy-ui/module/src/main/resources/gbp/resolved-policy/sidepanel/contract-list-sidepanel.controller.js create mode 100644 groupbasedpolicy-ui/module/src/main/resources/gbp/resolved-policy/sidepanel/contract-sidepanel.controller.js create mode 100644 groupbasedpolicy-ui/module/src/main/resources/gbp/resolved-policy/sidepanel/epg-list-sidepanel.controller.js create mode 100644 groupbasedpolicy-ui/module/src/main/resources/gbp/resolved-policy/sidepanel/epg-sidepanel.controller.js rename groupbasedpolicy-ui/module/src/main/resources/gbp/resolved-policy/{ => sidepanel/views}/clause-sidepanel.tpl.html (58%) create mode 100644 groupbasedpolicy-ui/module/src/main/resources/gbp/resolved-policy/sidepanel/views/contract-list-sidepanel.tpl.html create mode 100644 groupbasedpolicy-ui/module/src/main/resources/gbp/resolved-policy/sidepanel/views/contract-sidepanel.tpl.html create mode 100644 groupbasedpolicy-ui/module/src/main/resources/gbp/resolved-policy/sidepanel/views/epg-list-sidepanel.tpl.html create mode 100644 groupbasedpolicy-ui/module/src/main/resources/gbp/resolved-policy/sidepanel/views/epg-sidepanel.tpl.html create mode 100644 groupbasedpolicy-ui/module/src/main/resources/gbp/resolved-policy/sidepanel/views/rule-sidepanel.tpl.html create mode 100644 groupbasedpolicy-ui/module/src/main/resources/gbp/resolved-policy/sidepanel/views/subject-sidepanel.tpl.html delete mode 100644 groupbasedpolicy-ui/module/src/main/resources/gbp/resolved-policy/subject-sidepanel.tpl.html diff --git a/groupbasedpolicy-ui/.gitignore b/groupbasedpolicy-ui/.gitignore index 78add0be6..91325d429 100644 --- a/groupbasedpolicy-ui/.gitignore +++ b/groupbasedpolicy-ui/.gitignore @@ -1,3 +1,4 @@ module/node module/src/main/resources/gbp/node_modules module/src/main/resources/gbp/vendor +module/src/main/resources/gbp/node/ diff --git a/groupbasedpolicy-ui/module/src/main/resources/gbp/common/gbp.controller.js b/groupbasedpolicy-ui/module/src/main/resources/gbp/common/gbp.controller.js index 97eb26047..cef32943f 100644 --- a/groupbasedpolicy-ui/module/src/main/resources/gbp/common/gbp.controller.js +++ b/groupbasedpolicy-ui/module/src/main/resources/gbp/common/gbp.controller.js @@ -19,11 +19,11 @@ define([ $scope.activeObject = null; $scope.endpoints = EndpointsListService.createList(); $scope.endpointSgtList = SxpMappingListService.createList(); + $scope.innerObj = {}; $scope.rootTenant = null; $scope.rootTenants = TenantListService.createList(); $scope.resolvedPolicy = {}; - $scope.selectedNode = {}; - $scope.sidePanelObject = {}; + $scope.sidePanelObject = null; $scope.sidePanelPage = false; $scope.sidePanelPageEndpoint = false; $scope.stateUrl = null; @@ -39,21 +39,12 @@ define([ $scope.openSfcDialog = openSfcDialog; $scope.openSidePanel = openSidePanel; $scope.setRootTenant = setRootTenant; - $scope.toggleExpanded = toggleExpanded; - $scope.openSidePanelContract = openSidePanelContract; - $scope.openSidePanelChild = openSidePanelChild; - $scope.deselectEpg = deselectEpg; - $scope.deselectContract = deselectContract; - $scope.openSidePanelTpl = openSidePanelTpl; - $scope.getObjectsCount = getObjectsCount; - $scope.expandAll = expandAll; - $scope.collapseAll = collapseAll; + $scope.fillTopologyData = fillTopologyData; $scope.highlightNode = highlightNode; $scope.highlightLink = highlightLink; $scope.fadeAll = fadeAll; $scope.rootOpenEndpointDialog = rootOpenEndpointDialog; $scope.rootDeleteEndpointDialog = rootDeleteEndpointDialog; - $scope.getEndpointsList = getEndpointsList; RootGbpService.setMainClass(); init(); @@ -75,20 +66,11 @@ define([ function closeSidePanel() { if($scope.sidePanelPage) { $scope.sidePanelPage = false; + $scope.sidePanelObject = null; $scope.fadeAll(); } } - /** - * - * @param arr - */ - function collapseAll(arr) { - arr.forEach(function (element) { - element.expanded = false; - }); - } - /** * * @param source @@ -97,13 +79,14 @@ define([ * @param tenant * @returns {{id: string, source: *, target: *, tenant: *}} */ - function createLink( linkId) { + function createLink( linkId, type) { var linkIdParts = linkId.split('_'); return { 'id': linkId, 'source': linkIdParts[1], 'target': linkIdParts[2], - 'tenant': $scope.rootTenant + 'tenant': $scope.rootTenant, + 'type': type, }; } @@ -118,55 +101,10 @@ define([ 'id': nodeName, 'tenantId': $scope.rootTenant, 'node-id': nodeName, - 'label': nodeName + 'label': nodeName, }; } - /** - * - */ - function deselectContract() { - $scope.fadeAll(); - $scope.sidePanelPage = 'resolved-policy/contract-sidepanel'; - - $scope.sidePanelObject = Object.keys($scope.resolvedPolicy.contracts).map(function (k) { - var ob = $scope.resolvedPolicy.contracts[k]; - ob.linkId = k; - - return ob; - }); - - $scope.selectedNode = null; - $scope.activeObject = 'contract'; - } - - /** - * - */ - function deselectEpg() { - $scope.fadeAll(); - $scope.sidePanelPage = 'resolved-policy/epg-sidepanel'; - - $scope.sidePanelObject = Object.keys($scope.resolvedPolicy.epgs).map(function (k) { - var ob = $scope.resolvedPolicy.epgs[k]; - ob.id = k; - - return ob; - }); - $scope.selectedNode = null; - $scope.activeObject = 'epg'; - } - - /** - * - * @param arr - */ - function expandAll(arr) { - arr.forEach(function (element) { - element.expanded = true; - }); - } - /** * */ @@ -179,34 +117,20 @@ define([ */ function fillTopologyData() { var tempTopoData = {nodes: [], links: []}; - $scope.resolvedPolicy = resolvedPolicies.aggregateResolvedPolicies(); - console.log('resolved and aggregated', $scope.resolvedPolicy); tempTopoData.nodes = Object.keys($scope.resolvedPolicy.epgs).map(function (key) { return createNode(key); }); tempTopoData.links = Object.keys($scope.resolvedPolicy.contracts).map(function (key) { - return createLink(key); + return createLink(key, $scope.resolvedPolicy.contracts[key].type); }); $scope.topologyData = tempTopoData; $scope.topologyLoaded = true; } - /** - * - * @param obj - * @returns {*} - */ - function getObjectsCount(obj) { - if(obj) - return Object.keys(obj).length; - else - return 0; - } - function getResolvedPolicies() { if($scope.rootTenant) { resolvedPolicies.get($scope.rootTenant, fillTopologyData); @@ -237,6 +161,8 @@ define([ $scope.rootTenants.get('config'); $state.go('main.gbp.index.resolvedPolicy'); $scope.endpointSgtList.get(); + + } /** @@ -262,80 +188,21 @@ define([ * Sets '$scope.sidePanelPage' to true. This variable is watched in index.tpl.html template * and opens/closes side panel */ - function openSidePanel(page, object, cbk) { - var samePage = page === $scope.sidePanelPage; - - $scope.selectedNode = object; - - $scope.sidePanelCbk = cbk; + function openSidePanel(page, object, type, element) { $scope.sidePanelPage = page; $scope.sidePanelObject = object; - if ( samePage && $scope.sidePanelCbk) { - $scope.sidePanelCbk(); - } - } - - /** - * - * @param idElement - */ - function openSidePanelContract(idElement) { - var obj = $filter('filter')(Object.keys($scope.resolvedPolicy.contracts).map(function (k) { - var obj = $scope.resolvedPolicy.contracts[k]; - obj.linkId = k; - - return obj; - }), { 'contract-id': idElement }); - - $scope.sidePanelPage = 'resolved-policy/contract-sidepanel'; - $scope.sidePanelObject = obj[0]; - $scope.selectedNode = obj[0]; - $scope.activeObject = 'contract'; - - NextTopologyService.highlightLink($rootScope.nxTopology, obj[0].linkId); - } - - /** - * . - * @param index - * @param type - */ - function openSidePanelChild(index, type) { - switch (type) { - case 'subject': - $scope.sidePanelPage = 'resolved-policy/subject-sidepanel'; - $scope.subjectIndex = index; - break; - case 'clause': - $scope.sidePanelPage = 'resolved-policy/clause-sidepanel'; - $scope.clauseIndex = index; - break; - case 'rule': - $scope.sidePanelPage = 'resolved-policy/rule-sidepanel'; - $scope.ruleIndex = index; - break; - } - } - - /** - * - * @param tpl - */ - function openSidePanelTpl(tpl) { - switch (tpl) { - case 'contract': - $scope.sidePanelPage = 'resolved-policy/contract-sidepanel'; - break; - case 'subject': - $scope.sidePanelPage = 'resolved-policy/subject-sidepanel'; - break; - case 'clause': - $scope.sidePanelPage = 'resolved-policy/clause-sidepanel'; - break; - case 'rule': - $scope.sidePanelPage = 'resolved-policy/rule-sidepanel'; - break; + switch(type) { + case 'subject': + $scope.innerObj.subject = element; + break; + case 'clause': + $scope.innerObj.clause = element; + break; + case 'rule': + $scope.innerObj.rule = element; + break; + default: } } @@ -346,12 +213,12 @@ define([ $scope.broadcastFromRoot('ROOT_TENANT_CHANGED'); if ($scope.stateUrl.startsWith('/resolved-policy')) { - getResolvedPolicies() - if($scope.sidePanelPage) { - if($scope.activeObject == 'epg') - deselectEpg(); - else if($scope.activeObject == 'contract') - deselectContract(); + getResolvedPolicies(); + if($scope.sidePanelObject) { + if($scope.sidePanelObject['contract-id']) + openSidePanel('resolved-policy/sidepanel/views/contract-list-sidepanel'); + else + openSidePanel('resolved-policy/sidepanel/views/epg-list-sidepanel'); } } } @@ -365,17 +232,7 @@ define([ closeSidePanel(); if ($scope.stateUrl.startsWith('/resolved-policy')) { - getResolvedPolicies() - } - } - - /** - * - * @param element - */ - function toggleExpanded(element) { - if (typeof element !== 'string') { - element.expanded = !element.expanded; + getResolvedPolicies(); } } @@ -403,17 +260,13 @@ define([ $mdDialog.show(confirm).then(function () { endpointData.deleteEndpoint(function () { - getEndpointsList(); + $scope.$broadcast('endpointChanged'); }); }, function () { }); } - function getEndpointsList() { - $scope.endpoints.clearData(); - $scope.endpoints.getByEpg($scope.selectedNode.data.id); - } /* event listeners */ /** * Event fired after content loaded, setStateUrl function is called to fill stateUrl method diff --git a/groupbasedpolicy-ui/module/src/main/resources/gbp/common/gbp.css b/groupbasedpolicy-ui/module/src/main/resources/gbp/common/gbp.css index 2598c3ad5..b8ba13fdf 100644 --- a/groupbasedpolicy-ui/module/src/main/resources/gbp/common/gbp.css +++ b/groupbasedpolicy-ui/module/src/main/resources/gbp/common/gbp.css @@ -1,3 +1,11 @@ +.h100 { + height:100% +} + +.w100 { + width:100% +} + .gbpUiGlobalWrapper { background: #ffffff; margin-bottom: 0!important; @@ -7,6 +15,7 @@ .gbpUiGlobalWrapper .main { top: 0px; + height: 100%; } .gbpUiWrapper { @@ -94,12 +103,13 @@ svg g.node text { #graph-container { padding-left: 0; + background-color: #ffffff; } /* $mdDialog.confirm */ -/* md-dialog button span { +md-dialog button span { color: #000; -} */ +} div.layout-padding h3 { color: black; @@ -180,10 +190,17 @@ md-dialog-content > div:first-child { font-size: 13px; margin-bottom: 0 !important; vertical-align: middle; + max-height: 20px; + line-height: 20px; } .breadcrumbs .breadcrumb[role="button"] { color: rgb(33, 150, 243); + cursor: pointer; +} + +.breadcrumb i { + font-size: 20px !important; } .layout-padding-r10 { @@ -241,6 +258,7 @@ li > md-autocomplete-parent-scope > span { } md-input-container md-select md-select-value span { + font-weight: 500; font-size: 14px; font-style: inherit; font-variant: inherit; @@ -252,15 +270,83 @@ md-input-container md-select md-select-value span { z-index:1001; } -#select_value_label_0 { - border-bottom-color: white !important; - border-bottom-width: 1px; +md-list-item.md-4-line .md-list-item-text h3{ + font-size: 16px; + font-weight: 400; + letter-spacing: 0.010em; + margin: 0 0 0px 0; + line-height: 1.2em; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + color: rgba(0,0,0,0.87); +} + +md-list-item.md-4-line .md-list-item-text p { + font-size: 14px; + font-weight: 500; + letter-spacing: 0.010em; + margin: 0 0 0 0; + line-height: 1.6em; + color: rgba(0,0,0,0.54); +} + + +md-list-item.md-4-line { + height: auto; + min-height: 100px; +} + +section.legendBox{ + position: absolute !important; + right: 0; + top: 0; + z-index: 1; + width: 200px; +} + +section.legendBox ul li { + list-style-type: none; } -#select_value_label_0 span { - color: white !important; +.reload-button i { + vertical-align: middle; } -.md-chip-content .ng-binding { +section.legendBox ul .line.green { + border-top: 2px solid #68bd6b; +} + +section.legendBox ul .line.blue { + border-top: 2px solid #84a3ff; +} + +section.legendBox ul .line { + display: -moz-inline-stack; + display: inline-block; + vertical-align: top; + zoom: 1; + margin: 9px 5px 0 0; + width: 50px; +} + +.margin-lr0 { + margin-right: 0 !important; + margin-left: 0 !important; +} + +.popover-title { + color: black; +} + +.popover-content span { color: black; } + +.popover-content h5 { + color: black; +} + +.n-topology-nav-setting > span { + color: #999999; +} \ No newline at end of file diff --git a/groupbasedpolicy-ui/module/src/main/resources/gbp/common/gbp.css.orig b/groupbasedpolicy-ui/module/src/main/resources/gbp/common/gbp.css.orig deleted file mode 100644 index af3d30138..000000000 --- a/groupbasedpolicy-ui/module/src/main/resources/gbp/common/gbp.css.orig +++ /dev/null @@ -1,226 +0,0 @@ -.gbpUiGlobalWrapper { - background: #ffffff; - margin-bottom: 0!important; - min-height: 100%; - padding: 0px; -} - -.gbpUiGlobalWrapper .main { - top: 0px; -} - -.gbpUiWrapper { - background-color: #414042; -} - -.gbpUiWrapper .pageContent { - margin: 0px; - padding: 0px; - width: 100%; - height: 100%; -} - -.gbpUiWrapper .side-panel { - width: 400px; - color: #000 ! important; - border: 1px solid #000; -} - -.gbpUiWrapper .h100 { - height: 100%; -} - -.gbpUiWrapper.w100 { - width: 100%; -} - -.gbpUiWrapper.flt-r { - float: right; -} - -/* LAYOUT */ -.layout-padding-lr15 { - padding: 0 15px; -} - -/* TABLES */ -.gbpUiWrapper .md-table span { - color: rgba(0,0,0,.87); -} -.gbpUiWrapper .md-table-pagination span { - color: rgba(0,0,0,.87); - font-weight: normal; -} -.gbpUiWrapper button.md-button.md-icon-button.w85 { - width: 85px; -} - -/* BUTTONS */ -.gbpUiWrapper button.md-primary span { - color: rgb(33,150,243); -} -.gbpUiWrapper button .md-icon { - width: 30px; -} - -/* DIALOG */ -.gbpDialogWrapper button.md-primary span { - color: rgba(0,0,0,0.87); -} -.gbpDialogWrapper button.md-primary[disabled] span { - color: rgba(0,0,0,0.26); -} - -svg g.node text { - pointer-events: auto !important; -} - -.expander md-content { - line-height: 15px; - width: 100%; -} - -.expander .md-list-item-inner { - flex-flow: row wrap; -} - -.expand-button { - min-width: 0px !important; - min-height: 0px !important; - margin-top: 0 !important; - margin-bottom: 0 !important; - line-height: normal !important; -} - -#graph-container { - padding-left: 0; -} - -/* $mdDialog.confirm */ -md-dialog button span { - color: #000; -} - -md-sidenav span { - color: inherit !important; -} - -div.md-primary.md-subheader.ng-scope > div > span > span { - color: rgb(33,150,243); -} - -.md-subheader { - font-weight: bold !important; -} - -md-sidenav > md-toolbar > div > h2 > span { - margin: 20px 0; - color: #666; -} - -span.flex-35 > strong { - color: rgba(0,0,0,0.87); -} - -span.ng-binding.flex { - color: rgba(0,0,0,0.87); -} - -md-select:not([disabled]) .md-select-value .md-text { - color: black; -} - -.md-input-has-value label { - color: rgba(0,0,0,0.54); -} - -md-select-value span { - color: rgba(0,0,0,0.26); - font-weight: bold; - margin-bottom: 5px; - line-height: 1.428571429; -} - -md-select-value span div { - font-weight: normal; -} - -.md-chips { - padding: 0 0 0 0 !important; -} - -md-dialog-content > div:first-child { - padding-top: 20px; - padding-bottom: 20px; -} - -.gbpUiGlobalWrapper .md-locked-open { - width: 500px; - min-width: 500px; -} - -.breadcrumbs { - display: inline-block; - font-size: 16px; - font-weight: 500; - line-height: 1em; - padding-left: 0; - margin: 10px 0; -} - -.breadcrumbs .breadcrumb { - display: inline-block; - color: rgba(0,0,0,.54); - background-color: transparent; - padding: 0; - font-size: 13px; - margin-bottom: 0 !important; - vertical-align: middle; -} - -.breadcrumbs .breadcrumb[role="button"] { - color: rgb(33, 150, 243); -} - -<<<<<<< HEAD -.layout-padding-r10 { - padding-right: 10px; -} - -.layout-padding-b15 { - padding-bottom: 15px; -} - -.order { - color: #000 !important; - margin: 0; -} - -.status-circle.allow { - color: green; -} - -.status-circle.require-contract { - color: orange; -} -======= -md-ink-bar { - background: red !important; -} - -md-tab-item > span { - color: rgba(0,0,0,0.54); -} - -md-tab-item.md-tab.ng-scope.ng-isolate-scope.md-ink-ripple.md-active > span { - color: rgb(16,108,200); -} - -.layout-padding-lr15.ng-scope.layout-column > div { - padding-top: 15px; -} - -div.md-primary.md-subheader > div > span > span { - color: rgb(33,150,243); -} ->>>>>>> c391bea... Endpoints diff --git a/groupbasedpolicy-ui/module/src/main/resources/gbp/common/gbp.module.js b/groupbasedpolicy-ui/module/src/main/resources/gbp/common/gbp.module.js index b341b9b67..b52170263 100644 --- a/groupbasedpolicy-ui/module/src/main/resources/gbp/common/gbp.module.js +++ b/groupbasedpolicy-ui/module/src/main/resources/gbp/common/gbp.module.js @@ -37,6 +37,10 @@ define([ NavHelperProvider.addControllerUrl('app/gbp/policy/policy.controller'); NavHelperProvider.addControllerUrl('app/gbp/resolved-policy/resolved-policy.controller'); NavHelperProvider.addControllerUrl('app/gbp/sfc/dialog-sfc-topology.controller'); + NavHelperProvider.addControllerUrl('app/gbp/resolved-policy/sidepanel/epg-sidepanel.controller'); + NavHelperProvider.addControllerUrl('app/gbp/resolved-policy/sidepanel/epg-list-sidepanel.controller'); + NavHelperProvider.addControllerUrl('app/gbp/resolved-policy/sidepanel/contract-sidepanel.controller'); + NavHelperProvider.addControllerUrl('app/gbp/resolved-policy/sidepanel/contract-list-sidepanel.controller'); NavHelperProvider.addControllerUrl('app/gbp/tenant/add-tenant.controller'); NavHelperProvider.addControllerUrl('app/gbp/tenant/tenant.controller'); diff --git a/groupbasedpolicy-ui/module/src/main/resources/gbp/common/topology/next_topology.directive.js b/groupbasedpolicy-ui/module/src/main/resources/gbp/common/topology/next_topology.directive.js index a3feac5f9..4eebf3188 100644 --- a/groupbasedpolicy-ui/module/src/main/resources/gbp/common/topology/next_topology.directive.js +++ b/groupbasedpolicy-ui/module/src/main/resources/gbp/common/topology/next_topology.directive.js @@ -1,17 +1,17 @@ define(['next-ui'], function() { - var NextTopology = function(NextTopologyService){ - return { - restrict: 'E', - scope: { - topologyData: '=', - cbkFunctions: '=?', - dictionaries: '=?', - topo: '=?', - topoColors: '=?' - }, - template: '
', - link: function(scope) { + var NextTopology = function (NextTopologyService){ + return { + restrict: 'E', + scope: { + topologyData: '=', + cbkFunctions: '=?', + dictionaries: '=?', + topo: '=?', + topoColors: '=?' + }, + template: '
', + link: function(scope) { var saveTopoInterval = null; scope.topo = null; @@ -311,11 +311,12 @@ define(['next-ui'], function() { */ this.setProviderStyleLine(); + this.set('color', this.getColor()); }, // generate the color for a link getColor: function(){ // get color depend on status - var color = NextTopologyService.getLinkColor(this.model()._data.status, scope.topoColors); + var color = this.model()._data.type === 'chain' ? '#3366ff' : '#009900'; // make it available outside next this.model()._data.linkColor = color; return color; diff --git a/groupbasedpolicy-ui/module/src/main/resources/gbp/common/views/index.tpl.html b/groupbasedpolicy-ui/module/src/main/resources/gbp/common/views/index.tpl.html index aad507554..4184d60bb 100644 --- a/groupbasedpolicy-ui/module/src/main/resources/gbp/common/views/index.tpl.html +++ b/groupbasedpolicy-ui/module/src/main/resources/gbp/common/views/index.tpl.html @@ -13,8 +13,8 @@ Resolved Policy Endpoints - Endpoint-groups - Contracts + Endpoint-groups + Contracts +
diff --git a/groupbasedpolicy-ui/module/src/main/resources/gbp/endpoints/add-endpoint.controller.js b/groupbasedpolicy-ui/module/src/main/resources/gbp/endpoints/add-endpoint.controller.js index be2c06eb5..baeb00e08 100644 --- a/groupbasedpolicy-ui/module/src/main/resources/gbp/endpoints/add-endpoint.controller.js +++ b/groupbasedpolicy-ui/module/src/main/resources/gbp/endpoints/add-endpoint.controller.js @@ -6,9 +6,9 @@ define([ angular.module('app.gbp').controller('AddEndpointController', AddEndpointController); - AddEndpointController.$inject = ['$filter', '$mdDialog', '$scope', 'EndpointService', 'endpoint', 'ForwardingService', 'TenantService']; + AddEndpointController.$inject = ['$state', '$filter', '$mdDialog', '$scope', 'EndpointService', 'endpoint', 'ForwardingService']; /* @ngInject */ - function AddEndpointController($filter, $mdDialog, $scope, EndpointService, endpoint, ForwardingService, TenantService) { + function AddEndpointController($state, $filter, $mdDialog, $scope, EndpointService, endpoint, ForwardingService) { /* properties */ $scope.endpoint = endpoint ? endpoint : EndpointService.createObject(); @@ -46,7 +46,8 @@ define([ function closeDialog(){ $mdDialog.cancel(); - $scope.getEndpointsList(); + if($state.current.name == 'main.gbp.index.endpoints') + $scope.getEndpointsList(); } function save() { @@ -58,6 +59,7 @@ define([ } $scope.endpoint.post(function () { $scope.closeDialog(); + $scope.broadcastFromRoot('endpointChanged'); }, function () { } ); } @@ -86,7 +88,7 @@ define([ function createFilterFor(query) { return function filterFn(epg) { - return (epg.indexOf(query) === 0); + return (epg.toLowerCase().indexOf(query.toLowerCase()) === 0); }; } diff --git a/groupbasedpolicy-ui/module/src/main/resources/gbp/endpoints/endpoint.service.js b/groupbasedpolicy-ui/module/src/main/resources/gbp/endpoints/endpoint.service.js index 42aa4fb51..53a38f556 100644 --- a/groupbasedpolicy-ui/module/src/main/resources/gbp/endpoints/endpoint.service.js +++ b/groupbasedpolicy-ui/module/src/main/resources/gbp/endpoints/endpoint.service.js @@ -100,8 +100,8 @@ define([], function () { ], }, }; - return restObj.customPOST(reqData).then(function (data) { - successCallback(data); + return restObj.customPOST(reqData).then(function () { + (successCallback() || angular.noop)(); }, function () { }); diff --git a/groupbasedpolicy-ui/module/src/main/resources/gbp/endpoints/endpoints-list.service.js b/groupbasedpolicy-ui/module/src/main/resources/gbp/endpoints/endpoints-list.service.js index fc0bfac49..94cc6a14c 100644 --- a/groupbasedpolicy-ui/module/src/main/resources/gbp/endpoints/endpoints-list.service.js +++ b/groupbasedpolicy-ui/module/src/main/resources/gbp/endpoints/endpoints-list.service.js @@ -28,6 +28,7 @@ define([], function () { function setData(data) { var self = this; + self.clearData(); data && data.forEach(function (dataElement) { self.data.push(EndpointService.createObject(dataElement)); }); @@ -48,21 +49,24 @@ define([], function () { }); } - function getByEpg(epg) { + function getByEpg(epg, successCallback) { /* jshint validthis:true */ var self = this; var restObj = Restangular.one('restconf').one('operational').one('base-endpoint:endpoints'); return restObj.get().then(function (data) { + //var endpoints = $filter('filter')(data.endpoints['address-endpoints']['address-endpoint'], {'endpoint-group': epg.id}); var endpoints = $filter('filter')(data.endpoints['address-endpoints']['address-endpoint'].map(function(endpoint) { return endpoint; }), function(ep) { - if(ep['endpoint-group'].indexOf(epg) != -1) + if(ep['endpoint-group'].indexOf(epg.id) != -1) return true; } ); self.setData(endpoints); + + (successCallback || angular.noop)(); }); } diff --git a/groupbasedpolicy-ui/module/src/main/resources/gbp/endpoints/endpoints.controller.js b/groupbasedpolicy-ui/module/src/main/resources/gbp/endpoints/endpoints.controller.js index 9e0d49374..967886ff4 100644 --- a/groupbasedpolicy-ui/module/src/main/resources/gbp/endpoints/endpoints.controller.js +++ b/groupbasedpolicy-ui/module/src/main/resources/gbp/endpoints/endpoints.controller.js @@ -6,9 +6,9 @@ define([ angular.module('app.gbp').controller('EndpointsController', EndpointsController); - EndpointsController.$inject = ['$scope', '$mdDialog', 'EndpointsListService', 'EndpointService']; + EndpointsController.$inject = ['$scope', '$mdDialog', 'EndpointsListService']; - function EndpointsController($scope, $mdDialog, EndpointsListService, EndpointService) { + function EndpointsController($scope, $mdDialog, EndpointsListService) { /* properties */ $scope.endpoints = EndpointsListService.createList(); $scope.disableKeyFieldsEditing = false; @@ -68,13 +68,5 @@ define([ $scope.$on('ROOT_TENANT_CHANGED', function () { $scope.getEndpointsList(); }); - - $scope.$on('openEndpointDialog', function(event, obj) { - openEndpointDialog('edit', obj); - }); - - $scope.$on('deleteEndpointDialog', function(event, obj) { - deleteEndpointDialog(obj); - }); } }); diff --git a/groupbasedpolicy-ui/module/src/main/resources/gbp/resolved-policy/contract-sidepanel.tpl.html b/groupbasedpolicy-ui/module/src/main/resources/gbp/resolved-policy/contract-sidepanel.tpl.html deleted file mode 100644 index bff602dcd..000000000 --- a/groupbasedpolicy-ui/module/src/main/resources/gbp/resolved-policy/contract-sidepanel.tpl.html +++ /dev/null @@ -1,46 +0,0 @@ - -
-
-
    -
  • Contracts
    • -
-
- - - Contracts list ({{sidePanelObject.length}}) - - - - {{contract['contract-id']}} - - - -
-
-
-
    -
  • Contracts
    • -
  • keyboard_arrow_right
    • -
  • {{selectedNode['contract-id']}}
    • -
-
- - - Contract info -
- Contract ID - {{selectedNode['contract-id']}} -
- - Subject list ({{getObjectsCount(selectedNode.subjects)}}) - - - - {{key}} - - - -
- diff --git a/groupbasedpolicy-ui/module/src/main/resources/gbp/resolved-policy/epg-sidepanel.tpl.html b/groupbasedpolicy-ui/module/src/main/resources/gbp/resolved-policy/epg-sidepanel.tpl.html deleted file mode 100644 index 82fa874cc..000000000 --- a/groupbasedpolicy-ui/module/src/main/resources/gbp/resolved-policy/epg-sidepanel.tpl.html +++ /dev/null @@ -1,95 +0,0 @@ - -
-
-
    -
  • Endpoint-groups
    • -
-
- - - Endpoint-groups ({{sidePanelObject.length}}) - - - -
-

{{epg.id}}

-
- - - -
-
-
-
    -
  • Endpoint-groups
    • -
  • keyboard_arrow_right
    • -
  • {{sidePanelObject.id}}
    • -
-
- - - Endpoint-group info -
- Endpoint-group ID - {{sidePanelObject.id}} -
- -
- Provided contracts ({{sidePanelObject['provided-contracts'].length}}) - - -
-

{{providedContract}}

-
- - -
-
- Consumed contracts ({{sidePanelObject['consumed-contracts'].length}}) - - -
-

{{consumedContract}}

-
- - -
- - -
- Endpoints ({{endpoints.data.length}}) -
- - - -
-

{{endpoint.getEndpointContextTypeAcronym()}}

- {{endpoint.data['context-type']}} -
-
-

{{endpoint.data['context-id']}}

-

Address: {{endpoint.data.address}}

-

Network Domain: {{endpoint.data['network-containment']['network-domain-id']}}

-

SGT: {{endpointSgtList.findSgtsForEndpoint(endpoint)}}

-
-
- - edit - -
-
- - delete - -
- - -
- diff --git a/groupbasedpolicy-ui/module/src/main/resources/gbp/resolved-policy/resolved-policy-list.service.js b/groupbasedpolicy-ui/module/src/main/resources/gbp/resolved-policy/resolved-policy-list.service.js index 0d724089b..84f57d455 100644 --- a/groupbasedpolicy-ui/module/src/main/resources/gbp/resolved-policy/resolved-policy-list.service.js +++ b/groupbasedpolicy-ui/module/src/main/resources/gbp/resolved-policy/resolved-policy-list.service.js @@ -8,7 +8,6 @@ define(['app/gbp/resolved-policy/resolved-policy.service'], function () { function ResolvedPolicyListService($filter, Restangular, ResolvedPolicyService) { /* methods */ this.createList = createList; - this.generateLinkId = generateLinkId; function ResolvedPolicyList() { @@ -29,26 +28,36 @@ define(['app/gbp/resolved-policy/resolved-policy.service'], function () { function setData(data) { var self = this; - data && data.forEach(function (dataElement) { - self.data.push(ResolvedPolicyList.createObject(dataElement)); - }); + if (data) { + data.forEach(function (dataElement) { + self.data.push(ResolvedPolicyService.createObject(dataElement)); + }); + } } + /** + * Clears data property of ResolvedPolicyList object + */ function clearData() { var self = this; self.data = []; } + /** + * Reads data from operational datastore and filters it by tenant property if available + * @param tenant + * @param successCallback + */ function get(tenant, successCallback) { var self = this; var restObj = Restangular.one('restconf').one('operational').one('resolved-policy:resolved-policies'); - return restObj.get().then(function(data) { - if(tenant) { + return restObj.get().then(function (data) { + if (tenant) { self.data = $filter('filter')(data['resolved-policies']['resolved-policy'], { 'consumer-tenant-id': tenant, - 'provider-tenant-id': tenant + 'provider-tenant-id': tenant, }); } else { @@ -59,15 +68,19 @@ define(['app/gbp/resolved-policy/resolved-policy.service'], function () { }); } + /** + * Process resolved policies and returns object with epgs and contracts properties + * @returns {{epgs: {}, contracts: {}}} + */ function aggregateResolvedPolicies() { var self = this, - result = {epgs: {}, contracts: {}}; + result = { epgs: {}, contracts: {} }; - self.data.forEach(function(rp) { + self.data.forEach(function (rp) { processEpg(result, rp, 'consumer'); processEpg(result, rp, 'provider'); - if(rp.hasOwnProperty('policy-rule-group-with-endpoint-constraints')) { + if (rp.hasOwnProperty('policy-rule-group-with-endpoint-constraints')) { processConstraints( result, rp['policy-rule-group-with-endpoint-constraints'], @@ -81,11 +94,17 @@ define(['app/gbp/resolved-policy/resolved-policy.service'], function () { } + /** + * Checks if exists object in returnValue.epgs and if not, creates one + * @param returnValue + * @param resolvedPolicyItem + * @param type + */ function processEpg(returnValue, resolvedPolicyItem, type) { - if(!returnValue.epgs.hasOwnProperty(resolvedPolicyItem[type+'-epg-id'])) { - returnValue.epgs[resolvedPolicyItem[type+'-epg-id']] = { - 'provided-contracts' : [], - 'consumed-contracts':[] + if (!returnValue.epgs.hasOwnProperty(resolvedPolicyItem[type + '-epg-id'])) { + returnValue.epgs[resolvedPolicyItem[type + '-epg-id']] = { + 'provided-contracts': [], + 'consumed-contracts': [], }; } @@ -93,18 +112,25 @@ define(['app/gbp/resolved-policy/resolved-policy.service'], function () { } + /** + * Process policy-rule-group-with-endpoint-constraints from resolved-policy. + * Creates contracts and updates epgs with contract objects + * @param returnValue + * @param constraints + * @param providerEpgId + * @param consumerEpgId + */ function processConstraints(returnValue, constraints, providerEpgId, consumerEpgId) { constraints.forEach(function (element) { element['policy-rule-group'].forEach(function (el) { var linkId = generateLinkId(el['contract-id'], providerEpgId, consumerEpgId); - updateEpg(returnValue, el['contract-id'], providerEpgId, 'provided'); - updateEpg(returnValue, el['contract-id'], consumerEpgId, 'consumed'); - if (!returnValue.contracts.hasOwnProperty(linkId)) { returnValue.contracts[linkId] = { 'contract-id': el['contract-id'], - 'subjects': {} + 'linkId': linkId, + 'subjects': {}, + 'type': '', }; } @@ -112,29 +138,65 @@ define(['app/gbp/resolved-policy/resolved-policy.service'], function () { returnValue.contracts[linkId].subjects[el['subject-name']] = { 'resolved-rule': [] }; } - returnValue.contracts[linkId].subjects[el['subject-name']]['resolved-rule'].push(el['resolved-rule']); + returnValue.contracts[linkId].subjects[el['subject-name']]['resolved-rule'] = + returnValue.contracts[linkId].subjects[el['subject-name']]['resolved-rule'].concat(el['resolved-rule']); + + Object.keys(returnValue.contracts[linkId].subjects).forEach(function(key) { + returnValue.contracts[linkId].type = + getContractType(returnValue.contracts[linkId].subjects[key]) ? 'chain' : 'allow'; + }) + + updateEpg(returnValue, returnValue.contracts[linkId], providerEpgId, 'provided'); + updateEpg(returnValue, returnValue.contracts[linkId], consumerEpgId, 'consumed'); }); }); } - function updateEpg(returnValue, contractId, epgId, epgType) { - returnValue.epgs[epgId][epgType+'-contracts'].push(contractId); + /** + * Updates epgobject with contract object + * @param returnValue + * @param contract + * @param epgId + * @param epgType + */ + function updateEpg(returnValue, contract, epgId, epgType) { + returnValue.epgs[epgId][epgType + '-contracts'].push(contract); } } - function generateLinkId(contractId, providerEpgId, consumerEpgId) { - return contractId + '_' + providerEpgId + '_' + consumerEpgId; - } - + /** + * Creates ResolvedPolicyList object + * @param data + * @returns {ResolvedPolicyList} + */ function createList(data) { var obj = new ResolvedPolicyList(); - if(data) { + if (data) { obj.setData(data); } return obj; } + + /** + * creates linkId string from input parameters + * @param contractId + * @param providerEpgId + * @param consumerEpgId + * @returns {string} + */ + function generateLinkId(contractId, providerEpgId, consumerEpgId) { + return contractId + '_' + providerEpgId + '_' + consumerEpgId; + } + + function getContractType(subject) { + return subject['resolved-rule'].some(function(s) { + return s.action.some(function (a) { + return a['action-definition-id'] === 'Action-Chain'; + }); + }); + } } return ResolvedPolicyListService; diff --git a/groupbasedpolicy-ui/module/src/main/resources/gbp/resolved-policy/resolved-policy.controller.js b/groupbasedpolicy-ui/module/src/main/resources/gbp/resolved-policy/resolved-policy.controller.js index 379c17b42..bcfe04ccf 100644 --- a/groupbasedpolicy-ui/module/src/main/resources/gbp/resolved-policy/resolved-policy.controller.js +++ b/groupbasedpolicy-ui/module/src/main/resources/gbp/resolved-policy/resolved-policy.controller.js @@ -15,7 +15,7 @@ define(['app/gbp/resolved-policy/resolved-policy.service'], function () { var epg = $scope.resolvedPolicy.epgs[node['_model']['_id']]; epg.id = node['_model']['_id']; - $scope.openSidePanel('resolved-policy/epg-sidepanel', epg, null); + $scope.openSidePanel('resolved-policy/sidepanel/views/epg-sidepanel', epg); $scope.$apply(); NextTopologyService.highlightNode($rootScope.nxTopology, node['_model']['_id']); @@ -23,7 +23,7 @@ define(['app/gbp/resolved-policy/resolved-policy.service'], function () { clickLink: function(link){ var resolvedContract = $scope.resolvedPolicy.contracts[link['_model']['_id']]; resolvedContract.linkId = link['_model']['_id']; - $scope.openSidePanel('resolved-policy/contract-sidepanel', resolvedContract, null); + $scope.openSidePanel('resolved-policy/sidepanel/views/contract-sidepanel', resolvedContract); $scope.$apply(); NextTopologyService.highlightLink($rootScope.nxTopology, link['_model']['_id']); diff --git a/groupbasedpolicy-ui/module/src/main/resources/gbp/resolved-policy/resolved-policy.service.js b/groupbasedpolicy-ui/module/src/main/resources/gbp/resolved-policy/resolved-policy.service.js index 0093ac0fc..27045bc75 100644 --- a/groupbasedpolicy-ui/module/src/main/resources/gbp/resolved-policy/resolved-policy.service.js +++ b/groupbasedpolicy-ui/module/src/main/resources/gbp/resolved-policy/resolved-policy.service.js @@ -3,9 +3,9 @@ define([], function() { angular.module('app.gbp').service('ResolvedPolicyService', ResolvedPolicyService); - ResolvedPolicyService.$inject = ['Restangular']; + ResolvedPolicyService.$inject = []; - function ResolvedPolicyService(Restangular) { + function ResolvedPolicyService() { /* methods */ this.createObject = createObject; @@ -23,7 +23,8 @@ define([], function() { this.data['consumer-epg-id'] = data['consumer-epg-id']; this.data['provider-tenant-id'] = data['provider-tenant-id']; this.data['provider-epg-id'] = data['provider-epg-id']; - this.data['policy-rule-group-with-endpoint-constraints'] = data['policy-rule-group-with-endpoint-constraints']; + this.data['policy-rule-group-with-endpoint-constraints'] = + data['policy-rule-group-with-endpoint-constraints']; } diff --git a/groupbasedpolicy-ui/module/src/main/resources/gbp/resolved-policy/resolved-policy.tpl.html b/groupbasedpolicy-ui/module/src/main/resources/gbp/resolved-policy/resolved-policy.tpl.html index 4aae3b924..42cbf7e63 100644 --- a/groupbasedpolicy-ui/module/src/main/resources/gbp/resolved-policy/resolved-policy.tpl.html +++ b/groupbasedpolicy-ui/module/src/main/resources/gbp/resolved-policy/resolved-policy.tpl.html @@ -1,5 +1,15 @@ -
- sync Reload topology +
+
+ + sync Reload topology + +
    +
  • Allow
    • +
  • Chain
    • +
+
+ + topo-colors="nxTopoColors"> +
diff --git a/groupbasedpolicy-ui/module/src/main/resources/gbp/resolved-policy/rule-sidepanel.tpl.html b/groupbasedpolicy-ui/module/src/main/resources/gbp/resolved-policy/rule-sidepanel.tpl.html deleted file mode 100644 index 053185a75..000000000 --- a/groupbasedpolicy-ui/module/src/main/resources/gbp/resolved-policy/rule-sidepanel.tpl.html +++ /dev/null @@ -1,105 +0,0 @@ - -
-
    -
  • Contracts
    • -
  • keyboard_arrow_right
    • -
  • {{selectedNode['contract-id']}}
    • -
  • keyboard_arrow_right
    • -
  • {{subjectIndex}}
    • -
  • keyboard_arrow_right
    • -
  • {{selectedNode.subjects[subjectIndex]['resolved-rule'][0][ruleIndex].name}}
    • -
-
- - - Rule info -
- Resolved rule name - {{selectedNode.subjects[subjectIndex]['resolved-rule'][0][ruleIndex].name}} -
- - -
- Actions ({{selectedNode.subjects[subjectIndex]['resolved-rule'][0][ruleIndex].action.length}}) - - -
- - - -
-

{{action.order}}

- - Order - -
-
-

{{action.name}}

-

Action definition ID: {{action['action-definition-id']}}

-

Parameter name: {{action['parameter-value'][0].name}}

-

Parameter value: {{action['parameter-value'][0]['string-value']}}

-
-
- - visibility - -
- - - - -
- Classifiers ({{selectedNode.subjects[subjectIndex]['resolved-rule'][0][ruleIndex].classifier.length}}) - - - - -
- - Expand all - - - - -
- - Collapse all - - - -
- - - - - {{classifier.name}} - -
-
- Classifier definition ID - {{classifier['classifier-definition-id']}} -
-
- Name - {{classifier.name}} -
-
- Connection tracking - {{classifier['connection-tracking']}} -
-
- Direction - {{classifier.direction}} -
- Parameters ({{classifier['parameter-value'].length}}) -
- {{param.name}} - {{param['int-value']}} -
-
- - - - - diff --git a/groupbasedpolicy-ui/module/src/main/resources/gbp/resolved-policy/sidepanel/contract-list-sidepanel.controller.js b/groupbasedpolicy-ui/module/src/main/resources/gbp/resolved-policy/sidepanel/contract-list-sidepanel.controller.js new file mode 100644 index 000000000..6692db0a8 --- /dev/null +++ b/groupbasedpolicy-ui/module/src/main/resources/gbp/resolved-policy/sidepanel/contract-list-sidepanel.controller.js @@ -0,0 +1,17 @@ +define([], function() { + 'use strict'; + + angular.module('app.gbp').controller('ContractListSidePanelController', ContractListSidePanelController); + + ContractListSidePanelController.$inject = ['$scope']; + + function ContractListSidePanelController($scope) { + $scope.fadeAll(); + + $scope.sidePanelContracts = Object.keys($scope.resolvedPolicy.contracts).map(function (k) { + var ob = $scope.resolvedPolicy.contracts[k]; + return ob; + }); + $scope.activeObject = 'contract'; + } +}); diff --git a/groupbasedpolicy-ui/module/src/main/resources/gbp/resolved-policy/sidepanel/contract-sidepanel.controller.js b/groupbasedpolicy-ui/module/src/main/resources/gbp/resolved-policy/sidepanel/contract-sidepanel.controller.js new file mode 100644 index 000000000..bff499c5b --- /dev/null +++ b/groupbasedpolicy-ui/module/src/main/resources/gbp/resolved-policy/sidepanel/contract-sidepanel.controller.js @@ -0,0 +1,23 @@ +define([], function() { + 'use strict'; + + angular.module('app.gbp').controller('ContractSidePanelController', ContractSidePanelController); + + ContractSidePanelController.$inject = ['$scope']; + + function ContractSidePanelController($scope) { + $scope.getObjectsCount = getObjectsCount; + + /** + * + * @param obj + * @returns {*} + */ + function getObjectsCount(obj) { + if(obj) + return Object.keys(obj).length; + else + return 0; + } + } +}); diff --git a/groupbasedpolicy-ui/module/src/main/resources/gbp/resolved-policy/sidepanel/epg-list-sidepanel.controller.js b/groupbasedpolicy-ui/module/src/main/resources/gbp/resolved-policy/sidepanel/epg-list-sidepanel.controller.js new file mode 100644 index 000000000..62f28326a --- /dev/null +++ b/groupbasedpolicy-ui/module/src/main/resources/gbp/resolved-policy/sidepanel/epg-list-sidepanel.controller.js @@ -0,0 +1,19 @@ +define([], function() { + 'use strict'; + + angular.module('app.gbp').controller('EpgListSidePanelController', EpgListSidePanelController); + + EpgListSidePanelController.$inject = ['$scope']; + + function EpgListSidePanelController($scope) { + $scope.fadeAll(); + + $scope.sidePanelEpgs = Object.keys($scope.resolvedPolicy.epgs).map(function (k) { + var ob = $scope.resolvedPolicy.epgs[k]; + ob.id = k; + + return ob; + }); + $scope.activeObject = 'epg'; + } +}); \ No newline at end of file diff --git a/groupbasedpolicy-ui/module/src/main/resources/gbp/resolved-policy/sidepanel/epg-sidepanel.controller.js b/groupbasedpolicy-ui/module/src/main/resources/gbp/resolved-policy/sidepanel/epg-sidepanel.controller.js new file mode 100644 index 000000000..2746509ef --- /dev/null +++ b/groupbasedpolicy-ui/module/src/main/resources/gbp/resolved-policy/sidepanel/epg-sidepanel.controller.js @@ -0,0 +1,19 @@ +define([], function() { + 'use strict'; + + angular.module('app.gbp').controller('EpgSidePanelController', EpgSidePanelController); + + EpgSidePanelController.$inject = ['$scope', 'EndpointsListService']; + + function EpgSidePanelController($scope, EndpointsListService) { + $scope.endpoints = EndpointsListService.createList(); + + function getEndpoints() { + if($scope.sidePanelObject) + $scope.endpoints.getByEpg($scope.sidePanelObject); + } + + $scope.$watch('sidePanelObject', getEndpoints); + $scope.$on('endpointChanged', getEndpoints); + } +}); diff --git a/groupbasedpolicy-ui/module/src/main/resources/gbp/resolved-policy/clause-sidepanel.tpl.html b/groupbasedpolicy-ui/module/src/main/resources/gbp/resolved-policy/sidepanel/views/clause-sidepanel.tpl.html similarity index 58% rename from groupbasedpolicy-ui/module/src/main/resources/gbp/resolved-policy/clause-sidepanel.tpl.html rename to groupbasedpolicy-ui/module/src/main/resources/gbp/resolved-policy/sidepanel/views/clause-sidepanel.tpl.html index 871bb09b6..1f4cf06f8 100644 --- a/groupbasedpolicy-ui/module/src/main/resources/gbp/resolved-policy/clause-sidepanel.tpl.html +++ b/groupbasedpolicy-ui/module/src/main/resources/gbp/resolved-policy/sidepanel/views/clause-sidepanel.tpl.html @@ -1,11 +1,11 @@
    -
  • Contracts
    • +
  • Contracts
  • keyboard_arrow_right
    • -
  • {{selectedNode.data.id}}
    • +
  • {{sidePanelObject.data.id}}
  • keyboard_arrow_right
    • -
  • {{selectedNode.data.clause[clauseIndex].name}}
    • +
  • {{sidePanelObject.data.clause[innerObj.clause].name}}
@@ -13,12 +13,12 @@ Clause info
Clause name - {{selectedNode.data.clause[clauseIndex].name}} + {{sidePanelObject.data.clause[innerObj.clause].name}}
- Subject refs ({{selectedNode.data.clause[clauseIndex]['subject-refs'].length}}) + Subject refs ({{sidePanelObject.data.clause[innerObj.clause]['subject-refs'].length}}) - + {{ref}} diff --git a/groupbasedpolicy-ui/module/src/main/resources/gbp/resolved-policy/sidepanel/views/contract-list-sidepanel.tpl.html b/groupbasedpolicy-ui/module/src/main/resources/gbp/resolved-policy/sidepanel/views/contract-list-sidepanel.tpl.html new file mode 100644 index 000000000..7594587b7 --- /dev/null +++ b/groupbasedpolicy-ui/module/src/main/resources/gbp/resolved-policy/sidepanel/views/contract-list-sidepanel.tpl.html @@ -0,0 +1,18 @@ + +
+
    +
  • Contracts
    • +
+
+ + + Contracts list ({{sidePanelContracts.length}}) + + + {{contract['contract-id']}} + + + diff --git a/groupbasedpolicy-ui/module/src/main/resources/gbp/resolved-policy/sidepanel/views/contract-sidepanel.tpl.html b/groupbasedpolicy-ui/module/src/main/resources/gbp/resolved-policy/sidepanel/views/contract-sidepanel.tpl.html new file mode 100644 index 000000000..e62a3c754 --- /dev/null +++ b/groupbasedpolicy-ui/module/src/main/resources/gbp/resolved-policy/sidepanel/views/contract-sidepanel.tpl.html @@ -0,0 +1,25 @@ + +
+
    +
  • Contracts
    • +
  • keyboard_arrow_right
    • +
  • {{sidePanelObject['contract-id']}}
    • +
+
+ + + Contract info +
+ Contract ID + {{sidePanelObject['contract-id']}} +
+ + Subject list ({{getObjectsCount(sidePanelObject.subjects)}}) + + + + {{key}} + + + + diff --git a/groupbasedpolicy-ui/module/src/main/resources/gbp/resolved-policy/sidepanel/views/epg-list-sidepanel.tpl.html b/groupbasedpolicy-ui/module/src/main/resources/gbp/resolved-policy/sidepanel/views/epg-list-sidepanel.tpl.html new file mode 100644 index 000000000..f1b197b04 --- /dev/null +++ b/groupbasedpolicy-ui/module/src/main/resources/gbp/resolved-policy/sidepanel/views/epg-list-sidepanel.tpl.html @@ -0,0 +1,18 @@ + +
+
    +
  • Endpoint-groups
    • +
+
+ + + Endpoint-groups ({{sidePanelEpgs.length}}) + + + {{epg.id}} + + + diff --git a/groupbasedpolicy-ui/module/src/main/resources/gbp/resolved-policy/sidepanel/views/epg-sidepanel.tpl.html b/groupbasedpolicy-ui/module/src/main/resources/gbp/resolved-policy/sidepanel/views/epg-sidepanel.tpl.html new file mode 100644 index 000000000..6f84f13ed --- /dev/null +++ b/groupbasedpolicy-ui/module/src/main/resources/gbp/resolved-policy/sidepanel/views/epg-sidepanel.tpl.html @@ -0,0 +1,71 @@ + +
+
    +
  • Endpoint-groups
    • +
  • keyboard_arrow_right
    • +
  • {{sidePanelObject.id}}
    • +
+
+ + + Endpoint-group info +
+ Endpoint-group ID + {{sidePanelObject.id}} +
+ +
+ Provided contracts ({{sidePanelObject['provided-contracts'].length}}) + + + {{providedContract['contract-id']}} + + +
+
+ Consumed contracts ({{sidePanelObject['consumed-contracts'].length}}) + + + {{consumedContract['contract-id']}} + + +
+ + +
+ Endpoints ({{endpoints.data.length}}) +
+ + + +
+

{{endpoint.getEndpointContextTypeAcronym()}}

+ {{endpoint.data['context-type']}} +
+
+

{{endpoint.data['context-id']}}

+

Address: {{endpoint.data.address}}

+

Network Domain: {{endpoint.data['network-containment']['network-domain-id']}}

+

SGT: {{endpointSgtList.findSgtsForEndpoint(endpoint)}}

+
+
+ + edit + +
+
+ + delete + +
+ + + diff --git a/groupbasedpolicy-ui/module/src/main/resources/gbp/resolved-policy/sidepanel/views/rule-sidepanel.tpl.html b/groupbasedpolicy-ui/module/src/main/resources/gbp/resolved-policy/sidepanel/views/rule-sidepanel.tpl.html new file mode 100644 index 000000000..31bc12069 --- /dev/null +++ b/groupbasedpolicy-ui/module/src/main/resources/gbp/resolved-policy/sidepanel/views/rule-sidepanel.tpl.html @@ -0,0 +1,74 @@ + +
+
    +
  • Contracts
    • +
  • keyboard_arrow_right
    • +
  • {{sidePanelObject['contract-id']}}
    • +
  • keyboard_arrow_right
    • +
  • {{innerObj.subject}}
    • +
  • keyboard_arrow_right
    • +
  • {{sidePanelObject.subjects[innerObj.subject]['resolved-rule'][innerObj.rule].name}}
    • +
+
+ + + Rule info +
+ Resolved rule name + {{sidePanelObject.subjects[innerObj.subject]['resolved-rule'][innerObj.rule].name}} +
+ + +
+ Actions ({{sidePanelObject.subjects[innerObj.subject]['resolved-rule'][innerObj.rule].action.length}}) + + +
+ + + +
+

{{action.order}}

+ + Order + +
+
+

{{action.name}}

+

Action definition ID: {{action['action-definition-id']}}

+

Parameter name: {{action['parameter-value'][0].name}}

+

Parameter value: {{action['parameter-value'][0]['string-value']}}

+
+
+ + visibility + +
+ + + + +
+ Classifiers ({{sidePanelObject.subjects[innerObj.subject]['resolved-rule'][innerObj.rule].classifier.length}}) + +
+ + + +
+

{{classifier.direction}}

+ + Direction + +
+
+

{{classifier.name}}

+

Classifier definition ID: {{classifier['classifier-definition-id']}}

+

Connection tracking: {{classifier['connection-tracking']}}

+

{{param.name}}: {{param['int-value']}}

+
+ + + diff --git a/groupbasedpolicy-ui/module/src/main/resources/gbp/resolved-policy/sidepanel/views/subject-sidepanel.tpl.html b/groupbasedpolicy-ui/module/src/main/resources/gbp/resolved-policy/sidepanel/views/subject-sidepanel.tpl.html new file mode 100644 index 000000000..1ceceb3d8 --- /dev/null +++ b/groupbasedpolicy-ui/module/src/main/resources/gbp/resolved-policy/sidepanel/views/subject-sidepanel.tpl.html @@ -0,0 +1,30 @@ + +
+
    +
  • Contracts
    • +
  • keyboard_arrow_right
    • +
  • {{sidePanelObject['contract-id']}}
    • +
  • keyboard_arrow_right
    • +
  • {{innerObj.subject}}
    • +
+
+ + + Subject info +
+ Subject name + {{innerObj.subject}} +
+ + Resolved rule list ({{sidePanelObject.subjects[innerObj.subject]['resolved-rule'].length}}) + + + + +

{{rule.order}}

+ + {{rule.name}} + + + + diff --git a/groupbasedpolicy-ui/module/src/main/resources/gbp/resolved-policy/subject-sidepanel.tpl.html b/groupbasedpolicy-ui/module/src/main/resources/gbp/resolved-policy/subject-sidepanel.tpl.html deleted file mode 100644 index c91f82c84..000000000 --- a/groupbasedpolicy-ui/module/src/main/resources/gbp/resolved-policy/subject-sidepanel.tpl.html +++ /dev/null @@ -1,30 +0,0 @@ - -
-
    -
  • Contracts
    • -
  • keyboard_arrow_right
    • -
  • {{selectedNode['contract-id']}}
    • -
  • keyboard_arrow_right
    • -
  • {{subjectIndex}}
    • -
-
- - - Subject info -
- Subject name - {{subjectIndex}} -
- - Resolved rule list ({{selectedNode.subjects[subjectIndex]['resolved-rule'].length}}) - - - - -

{{rule.order}}

- - {{rule.name}} - - - - \ No newline at end of file diff --git a/groupbasedpolicy-ui/module/src/main/resources/gbp/sfc/dialog-sfc-topology.controller.js b/groupbasedpolicy-ui/module/src/main/resources/gbp/sfc/dialog-sfc-topology.controller.js index 7a6c9b486..6a64875ba 100644 --- a/groupbasedpolicy-ui/module/src/main/resources/gbp/sfc/dialog-sfc-topology.controller.js +++ b/groupbasedpolicy-ui/module/src/main/resources/gbp/sfc/dialog-sfc-topology.controller.js @@ -10,17 +10,6 @@ define([ function SfcTopologyController($filter, $mdDialog, $scope, chainName, SfcService) { /* properties */ $scope.chain = SfcService.createObject({name: chainName}); - $scope.topologyDataSfc = {nodes:[], links:[]}; - $scope.cbkFunctionsSfc = { - clickNode: function(node){ - - }, - clickLink: function(link){ - - }, - topologyGenerated: function(){ - } - }; /* methods */ $scope.closeDialog = closeDialog; @@ -38,27 +27,40 @@ define([ $mdDialog.cancel(); } - function fillTopologyDataSfc() { - var topoData = {nodes:[], links:[]}; - $scope.chain.data['sfc-service-function'].forEach(function(sf) { - topoData.nodes.push({id: sf.name, 'node-id': sf.name, label: sf.name, type: sf.name}); - }) - - $scope.topologyDataSfc = topoData; + function nodeTooltip() { + nx.define('MyNodeTooltip', nx.ui.Component, { + properties: { + node: {}, + topology: {}, + }, + view: { + content: [{ + tag: 'p', + content: [{ + tag: 'label', + content: '{#node.model.data.type}', + }], + }], + }, + }); } $scope.viewTopology = function() { + nodeTooltip(); $scope.topologySfc = new nx.graphic.Topology({ height: 400, width: 600, scalable: true, - theme:'blue', - enableGradualScaling:true, + theme: 'blue', + enableGradualScaling: true, nodeConfig: { color: '#0386d2', - label: 'model.label', + //label: 'model.label', + label: function (vertex) { + return vertex.get().label + ' (' + vertex.get().type + ')'; + }, scale: 'model.scale', - iconType: function(vertex) { + iconType: function (vertex) { var type = vertex.get().type; switch (type) { case 'firewall': @@ -70,20 +72,21 @@ define([ default: return 'unknown'; } - } + }, }, linkConfig: { label: 'model.label', linkType: 'parallel', color: '#0386d2', - width: 5 + width: 5, }, showIcon: true, enableSmartNode: false, tooltipManagerConfig: { + showLinkTooltip: false, showNodeTooltip: false, - showLinkTooltip: false - } + //nodeTooltipContentClass: 'MyNodeTooltip', + }, }); $scope.app = new nx.ui.Application; @@ -95,19 +98,19 @@ define([ id: sf.name, label: sf.name, type: SfcService.getSfTypeShort(sf.type), - x: 100*(index+1), - y: 400 + x: 100 * (index + 1), + y: 400, }); index>0 && links.push({ - source: index-1, - target: index + source: index - 1, + target: index, }); }) $scope.topologySfc.data({ nodes: nodes, - links: links + links: links, }); $scope.app.container(document.getElementById('next-vpp-topo')); -- 2.36.6