Resolved policy sidepanel - tenant interactions

- refreshing sidepanel elements on tenant change
- added edit/delete buttons to endpoints in sidepanel

Change-Id: I7fe4fa8688e570eba75eb3f84ac37db2f2959c36
Signed-off-by: Ľubomír Balogh <lubomir.balogh@pantheon.sk>

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 fd8473e2d1225053dc404187233f0b8590e4afc7..17a2725defa9de0e4a6676471e771c9118335c0c 100644 (file)
--- a/groupbasedpolicy-ui/module/src/main/resources/gbp/common/gbp.controller.js
+++ b/groupbasedpolicy-ui/module/src/main/resources/gbp/common/gbp.controller.js
@@ -3,13 +3,13 @@ define(['app/gbp/common/gbp.service', 'app/gbp/resolved-policy/resolved-policy.s
 
     angular.module('app.gbp').controller('RootGbpCtrl', RootGbpCtrl);
 
-    RootGbpCtrl.$inject = ['$state', '$rootScope', '$scope', '$filter', 'RootGbpService', 'TenantListService', 'TenantService', 'EpgListService', 'ResolvedPolicyService', 'NextTopologyService', 'EndpointsListService'];
+    RootGbpCtrl.$inject = ['$state', '$rootScope', '$scope', '$filter', '$mdDialog', 'RootGbpService', 'TenantListService', 'TenantService', 'EpgListService', 'ResolvedPolicyService', 'NextTopologyService', 'EndpointsListService'];
 
-    function RootGbpCtrl($state, $rootScope, $scope, $filter, RootGbpService, TenantListService, TenantService, EpgListService, ResolvedPolicyService, NextTopologyService, EndpointsListService) {
+    function RootGbpCtrl($state, $rootScope, $scope, $filter, $mdDialog, RootGbpService, TenantListService, TenantService, EpgListService, ResolvedPolicyService, NextTopologyService, EndpointsListService) {
         /* properties */
         $scope.apiType = 'operational';
+        $scope.activeObject = null;
         $scope.endpoints = EndpointsListService.createList();
-        $scope.policyDisabled = true;
         $scope.rootTenant = null;
         $scope.rootTenants = TenantListService.createList();
         $scope.resolvedPolicy = {};
@@ -42,6 +42,9 @@ define(['app/gbp/common/gbp.service', 'app/gbp/resolved-policy/resolved-policy.s
         $scope.highlightNode = highlightNode;
         $scope.highlightLink = highlightLink;
         $scope.fadeAll = fadeAll;
+        $scope.rootOpenEndpointDialog = rootOpenEndpointDialog;
+        $scope.rootDeleteEndpointDialog = rootDeleteEndpointDialog;
+        $scope.getEndpointsList = getEndpointsList;
 
         RootGbpService.setMainClass();
         init();
@@ -61,8 +64,10 @@ define(['app/gbp/common/gbp.service', 'app/gbp/resolved-policy/resolved-policy.s
          *
          */
         function closeSidePanel() {
-            $scope.sidePanelPage = false;
-            NextTopologyService.fadeInAllLayers($rootScope.nxTopology);
+            if($scope.sidePanelPage) {
+                $scope.sidePanelPage = false;
+                NextTopologyService.fadeInAllLayers($rootScope.nxTopology);
+            }
         }
 
         /**
@@ -123,6 +128,7 @@ define(['app/gbp/common/gbp.service', 'app/gbp/resolved-policy/resolved-policy.s
 
             $scope.sidePanelObject = obj;
             $scope.selectedNode = null;
+            $scope.activeObject = 'contract';
         }
 
         /**
@@ -137,13 +143,7 @@ define(['app/gbp/common/gbp.service', 'app/gbp/resolved-policy/resolved-policy.s
             elements.get($scope.apiType, $scope.rootTenant);
             $scope.sidePanelObject = elements;
             $scope.selectedNode = null;
-        }
-
-        /**
-         *
-         */
-        function enableButtons() {
-            $scope.policyDisabled = false;
+            $scope.activeObject = 'epg';
         }
 
         /**
@@ -181,22 +181,24 @@ define(['app/gbp/common/gbp.service', 'app/gbp/resolved-policy/resolved-policy.s
          *
          */
         function fillTopologyData() {
-            var topoData = {nodes: [], links: [],},
-                filteredResolvedPolicies = $filter('filter')(resolvedPolicies.data, {'consumer-tenant-id': $scope.rootTenant, 'provider-tenant-id': $scope.rootTenant});
+            if($scope.rootTenant) {
+                var topoData = {nodes: [], links: [],},
+                    filteredResolvedPolicies = $filter('filter')(resolvedPolicies.data, {'consumer-tenant-id': $scope.rootTenant, 'provider-tenant-id': $scope.rootTenant});
 
 
-            filteredResolvedPolicies && filteredResolvedPolicies.forEach(function(rp) {
-                if(rp['consumer-tenant-id'] === $scope.rootTenant) {
-                    topoData.nodes.push(createNode(rp['consumer-epg-id'], rp['consumer-tenant-id']));
-                }
-                topoData.nodes.push(createNode(rp['provider-epg-id'], rp['provider-tenant-id']));
+                filteredResolvedPolicies && filteredResolvedPolicies.forEach(function(rp) {
+                    if(rp['consumer-tenant-id'] === $scope.rootTenant) {
+                        topoData.nodes.push(createNode(rp['consumer-epg-id'], rp['consumer-tenant-id']));
+                    }
+                    topoData.nodes.push(createNode(rp['provider-epg-id'], rp['provider-tenant-id']));
 
-                fillResolvedPolicy(rp);
-                topoData.links = getContracts(rp);
-            });
+                    fillResolvedPolicy(rp);
+                    topoData.links = getContracts(rp);
+                });
 
-            $scope.topologyData = topoData;
-            $scope.topologyLoaded = true;
+                $scope.topologyData = topoData;
+                $scope.topologyLoaded = true;
+            }
         }
 
         /**
@@ -279,7 +281,11 @@ define(['app/gbp/common/gbp.service', 'app/gbp/resolved-policy/resolved-policy.s
             if(object.constructor.name == 'Epg') {
                 $scope.endpoints.clearData();
                 $scope.endpoints.getByEpg(object.data.id);
+                $scope.activeObject = 'epg';
             }
+            else
+                $scope.activeObject = 'contract';
+
             var samePage = page === $scope.sidePanelPage;
 
             $scope.selectedNode = object;
@@ -308,6 +314,7 @@ define(['app/gbp/common/gbp.service', 'app/gbp/resolved-policy/resolved-policy.s
             $scope.sidePanelPage = 'resolved-policy/contract-sidepanel';
             $scope.sidePanelObject = obj[0];
             $scope.selectedNode = obj[0];
+            $scope.activeObject = 'contract';
 
             NextTopologyService.highlightLink($rootScope.nxTopology, obj[0].linkId);
         }
@@ -319,18 +326,18 @@ define(['app/gbp/common/gbp.service', 'app/gbp/resolved-policy/resolved-policy.s
          */
         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;
+            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;
             }
         }
 
@@ -340,18 +347,18 @@ define(['app/gbp/common/gbp.service', 'app/gbp/resolved-policy/resolved-policy.s
          */
         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;
+            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;
             }
         }
 
@@ -366,6 +373,8 @@ define(['app/gbp/common/gbp.service', 'app/gbp/resolved-policy/resolved-policy.s
                 element['policy-rule-group'].forEach(function(el) {
                     var linkId = generateLinkId(el['contract-id'], providerEpgId, consumerEpgId);
 
+                    $scope.resolvedPolicy = {};
+
                     if(!$scope.resolvedPolicy.hasOwnProperty(linkId)) {
                         $scope.resolvedPolicy[linkId] = {
                             'contract-id': el['contract-id'],
@@ -378,8 +387,8 @@ define(['app/gbp/common/gbp.service', 'app/gbp/resolved-policy/resolved-policy.s
                     }
 
                     $scope.resolvedPolicy[linkId].subjects[el['subject-name']]['resolved-rule'].push(el['resolved-rule']);
-                })
-            })
+                });
+            });
         }
 
         /**
@@ -390,6 +399,12 @@ define(['app/gbp/common/gbp.service', 'app/gbp/resolved-policy/resolved-policy.s
 
             if($scope.stateUrl.startsWith('/resolved-policy')) {
                 fillTopologyData();
+                if($scope.sidePanelPage) {
+                    if($scope.activeObject == 'epg')
+                        deselectEpg();
+                    else if($scope.activeObject == 'contract')
+                        deselectContract();
+                }
             }
         }
 
@@ -419,6 +434,42 @@ define(['app/gbp/common/gbp.service', 'app/gbp/resolved-policy/resolved-policy.s
             }
         }
 
+        function rootOpenEndpointDialog(operation, endpointData) {
+            $scope.disableKeyFieldsEditing = operation === 'edit';
+            $mdDialog.show({
+                clickOutsideToClose: true,
+                controller: 'AddEndpointController',
+                preserveScope: true,
+                templateUrl: $scope.viewPath + 'endpoints/dialog-add-endpoint.tpl.html',
+                parent: angular.element(document.body),
+                scope: $scope,
+                locals: {
+                    endpoint: endpointData,
+                },
+            });
+        }
+
+        function rootDeleteEndpointDialog(endpointData) {
+            var confirm = $mdDialog.confirm()
+                .title('Delete endpoint')
+                .textContent('Do you want to delete endpoint?')
+                .ok('Delete')
+                .cancel('Cancel');
+
+            $mdDialog.show(confirm).then(function () {
+                endpointData.deleteEndpoint(function () {
+                    getEndpointsList();
+                });
+            }, 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/views/index.tpl.html b/groupbasedpolicy-ui/module/src/main/resources/gbp/common/views/index.tpl.html
index 487594b3584f6f6bc4c40d9332f28e8747fe6d0a..aad507554942ff04598289f169e98f57a93e0a74 100644 (file)
--- 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 @@
                 <md-button ng-click="closeSidePanel()" ng-href="#/gbp/index/resolved-policy">Resolved Policy</md-button>
                 <md-button ng-click="closeSidePanel()" ng-href="#/gbp/index/endpoints">Endpoints</md-button>
                 <span flex></span>
-                <md-button ng-if="'main.gbp.index.resolvedPolicy' | isState" ng-click="deselectEpg()" ng-href="">Endpoint-groups</md-button>
-                <md-button ng-if="'main.gbp.index.resolvedPolicy' | isState" ng-click="deselectContract()" ng-href="">Contracts</md-button>
+                <md-button ng-if="('main.gbp.index.resolvedPolicy' | isState) && rootTenant" ng-click="deselectEpg()" ng-href="">Endpoint-groups</md-button>
+                <md-button ng-if="('main.gbp.index.resolvedPolicy' | isState) && rootTenant" ng-click="deselectContract()" ng-href="">Contracts</md-button>
                 <md-input-container style="margin-right: 10px;">
                     <md-select ng-model="rootTenant"
                                placeholder="select tenant"

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 20634ad2b2c003addb11a8ea6259fa9c331a9ac1..d49bec84ff469faaded2cbc06911c4202dc97ec0 100644 (file)
--- a/groupbasedpolicy-ui/module/src/main/resources/gbp/endpoints/endpoints.controller.js
+++ b/groupbasedpolicy-ui/module/src/main/resources/gbp/endpoints/endpoints.controller.js
@@ -65,5 +65,13 @@ 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/epg-sidepanel.tpl.html b/groupbasedpolicy-ui/module/src/main/resources/gbp/resolved-policy/epg-sidepanel.tpl.html
index e31b63cd7d00b6d43de686e1d4c02a5ace891892..bcbc96a8593c3b69f73452eb966dcf56303f9597 100644 (file)
--- 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
@@ -83,24 +83,32 @@
                <div layout="row" class="layout-row">
                        <span>Endpoints ({{endpoints.data.length}})</span>
                        <span class="flex" flex></span>
-                       <md-button class="md-button md-primary md-button md-ink-ripple expand-button" type="button" ng-click="expandAll(endpoints.data)" aria-label="Expand all">            
-                   <i class="fa fa-expand ng-scope"></i>
-                       <div class="md-ripple-container"></div>
-                       <md-tooltip md-direction="bottom">
-                               Expand all
-                       </md-tooltip>
-               </md-button>
-               <md-button class="md-button md-primary md-button md-ink-ripple expand-button" type="button" ng-click="collapseAll(endpoints.data)" aria-label="Collapse all">
-                               <i class="fa fa-compress ng-scope"></i>
-                   <div class="md-ripple-container"></div>
-                       <md-tooltip md-direction="bottom">
-                               Collapse all
-                       </md-tooltip>
-               </md-button>
+                       <span ng-if="endpoints.data.length">
+                               <md-button class="md-button md-primary md-button md-ink-ripple expand-button" type="button" ng-click="expandAll(endpoints.data)" aria-label="Expand all">            
+                           <i class="fa fa-expand ng-scope"></i>
+                               <div class="md-ripple-container"></div>
+                               <md-tooltip md-direction="bottom">
+                                       Expand all
+                               </md-tooltip>
+                       </md-button>
+                       <md-button class="md-button md-primary md-button md-ink-ripple expand-button" type="button" ng-click="collapseAll(endpoints.data)" aria-label="Collapse all">
+                                       <i class="fa fa-compress ng-scope"></i>
+                           <div class="md-ripple-container"></div>
+                               <md-tooltip md-direction="bottom">
+                                       Collapse all
+                               </md-tooltip>
+                       </md-button>
+               </span>
                </div>
            </md-subheader>
            <md-list class="expander">
                <ng-repeat ng-repeat="endpoint in endpoints.data">
+               <md-button class="md-icon-button" ng-click="rootOpenEndpointDialog('edit', endpoint)">
+                   <md-icon>edit</md-icon>
+               </md-button>
+               <md-button class="md-icon-button" ng-click="rootDeleteEndpointDialog(endpoint)">
+                   <md-icon>delete</md-icon>
+               </md-button>
                        <md-list-item ng-click="toggleExpanded(endpoint)">
                                <span>{{endpoint.data['context-id']}}</span>
                                <md-content ng-show="endpoint.expanded" class="md-whiteframe-2dp ng-scope layout-margin">

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 57ae5834f48239dd3ca3d882706a912ac36dde05..4aae3b924848ee4bdccc89be3cc246a96a710f0c 100644 (file)
--- 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,5 @@
 <div id="topology-container">
-    <md-button md-no-ink class="md-primary reload-button" ng-click="reloadTopology()"><i class="material-icons">sync</i> Reload topology</md-button>
+    <md-button md-no-ink class="md-primary reload-button" ng-click="fillTopologyData()"><i class="material-icons">sync</i> Reload topology</md-button>
     <next-topology topology-data="topologyData" cbk-functions="cbkFunctions" dictionaries="nxDict" topo="nxTopology"
                topo-colors="nxTopoColors"></next-topology>
 </div>

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
index d598867b051f90d2641a63491b2292d43354b79c..feb0580487e9ac52a08a52dbb960db8a5891338a 100644 (file)
--- 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
@@ -22,20 +22,22 @@
                <div layout="row" class="layout-row">
                        <span>Actions ({{selectedNode.subjects[subjectIndex]['resolved-rule'][0][ruleIndex].action.length}})</span>
                        <span class="flex" flex></span>
-                       <md-button class="md-button md-primary md-button md-ink-ripple expand-button" type="button" ng-click="expandAll(selectedNode.subjects[subjectIndex]['resolved-rule'][0][ruleIndex].action)" aria-label="Expand all">
-                   <i class="fa fa-expand ng-scope"></i>
-                       <div class="md-ripple-container"></div>
-                       <md-tooltip md-direction="bottom">
-                               Expand all
-                       </md-tooltip>
-               </md-button>
-               <md-button class="md-button md-primary md-button md-ink-ripple expand-button" type="button" ng-click="collapseAll(selectedNode.subjects[subjectIndex]['resolved-rule'][0][ruleIndex].action)" aria-label="Collapse all">
-                               <i class="fa fa-compress ng-scope"></i>
-                   <div class="md-ripple-container"></div>
-                       <md-tooltip md-direction="bottom">
-                               Collapse all
-                       </md-tooltip>
-               </md-button>
+                       <span ng-if="selectedNode.subjects[subjectIndex]['resolved-rule'][0][ruleIndex].action.length">
+                               <md-button class="md-button md-primary md-button md-ink-ripple expand-button" type="button" ng-click="expandAll(selectedNode.subjects[subjectIndex]['resolved-rule'][0][ruleIndex].action)" aria-label="Expand all">
+                           <i class="fa fa-expand ng-scope"></i>
+                               <div class="md-ripple-container"></div>
+                               <md-tooltip md-direction="bottom">
+                                       Expand all
+                               </md-tooltip>
+                       </md-button>
+                       <md-button class="md-button md-primary md-button md-ink-ripple expand-button" type="button" ng-click="collapseAll(selectedNode.subjects[subjectIndex]['resolved-rule'][0][ruleIndex].action)" aria-label="Collapse all">
+                                       <i class="fa fa-compress ng-scope"></i>
+                           <div class="md-ripple-container"></div>
+                               <md-tooltip md-direction="bottom">
+                                       Collapse all
+                               </md-tooltip>
+                       </md-button>
+               </span>
        </div>
        </md-subheader>
     <md-list class="expander">
@@ -64,20 +66,22 @@
                <div layout="row" class="layout-row">
                        <span>Classifiers ({{selectedNode.subjects[subjectIndex]['resolved-rule'][0][ruleIndex].classifier.length}})</span>
                        <span class="flex" flex></span>
-                       <md-button class="md-button md-primary md-button md-ink-ripple expand-button" type="button" ng-click="expandAll(selectedNode.subjects[subjectIndex]['resolved-rule'][0][ruleIndex].classifier)" aria-label="Expand all">
-                   <i class="fa fa-expand ng-scope"></i>
-                       <div class="md-ripple-container"></div>
-                       <md-tooltip md-direction="bottom">
-                               Expand all
-                       </md-tooltip>
-               </md-button>
-               <md-button class="md-button md-primary md-button md-ink-ripple expand-button" type="button" ng-click="collapseAll(selectedNode.subjects[subjectIndex]['resolved-rule'][0][ruleIndex].classifier)" aria-label="Collapse all">
-                               <i class="fa fa-compress ng-scope"></i>
-                   <div class="md-ripple-container"></div>
-                       <md-tooltip md-direction="bottom">
-                               Collapse all
-                       </md-tooltip>
-               </md-button>
+                       <span ng-if="selectedNode.subjects[subjectIndex]['resolved-rule'][0][ruleIndex].classifier.length">
+                               <md-button class="md-button md-primary md-button md-ink-ripple expand-button" type="button" ng-click="expandAll(selectedNode.subjects[subjectIndex]['resolved-rule'][0][ruleIndex].classifier)" aria-label="Expand all">
+                           <i class="fa fa-expand ng-scope"></i>
+                               <div class="md-ripple-container"></div>
+                               <md-tooltip md-direction="bottom">
+                                       Expand all
+                               </md-tooltip>
+                       </md-button>
+                       <md-button class="md-button md-primary md-button md-ink-ripple expand-button" type="button" ng-click="collapseAll(selectedNode.subjects[subjectIndex]['resolved-rule'][0][ruleIndex].classifier)" aria-label="Collapse all">
+                                       <i class="fa fa-compress ng-scope"></i>
+                           <div class="md-ripple-container"></div>
+                               <md-tooltip md-direction="bottom">
+                                       Collapse all
+                               </md-tooltip>
+                       </md-button>
+               </span>
        </div>
        </md-subheader>
     <md-list class="expander">