GBP UI - resolved-policy topology size fix

- EP sidepannel's "Network domain" section optically isolated
- small css fixes for the topology
- added Asymmetric/Symmetric info to chain detail

Change-Id: I9ba073b3fe3fd1f04f3612e86137f6f179dcccb7
Signed-off-by: Daniel Malachovsky <dmalacho@cisco.com>

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 cef32943f1942d9cb757f6ea225f8d52c2352ee0..57c8f465b045427bb098e41d94ac17bdac8cbcb9 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
@@ -7,13 +7,14 @@ define([
 
     angular.module('app.gbp').controller('RootGbpCtrl', RootGbpCtrl);
 
-    RootGbpCtrl.$inject = ['$filter', '$mdDialog', '$rootScope', '$scope', '$state',
+    RootGbpCtrl.$inject = ['$mdDialog', '$rootScope', '$scope', '$state',
         'EndpointsListService', 'NextTopologyService', 'ResolvedPolicyListService', 'RootGbpService',
         'TenantListService', 'SxpMappingListService'];
 
-    function RootGbpCtrl($filter, $mdDialog, $rootScope, $scope, $state,
+    function RootGbpCtrl($mdDialog, $rootScope, $scope, $state,
         EndpointsListService, NextTopologyService, ResolvedPolicyListService, RootGbpService,
         TenantListService, SxpMappingListService) {
+
         /* properties */
         $scope.apiType = 'operational';
         $scope.activeObject = null;

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 b8ba13fdffb63c1d9f2a8753ac498a0557df3d54..60105a9216f2635d7dc3ac19589d6eeede6e6c05 100644 (file)
--- 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,7 @@
+#page_logo {
+    display: none;
+}
+
 .h100 {
     height:100%
 }
@@ -80,7 +84,12 @@
     color: rgba(0,0,0,0.26);
 }
 
-svg g.node text {
+.gbpUiWrapper svg, div#next-vpp-topo svg {
+    border: none;
+    background-image: none;
+}
+
+.gbpUiWrapper svg g.node text {
     pointer-events: auto !important;
 }
 
@@ -104,6 +113,8 @@ svg g.node text {
 #graph-container {
     padding-left: 0;
     background-color: #ffffff;
+    width: 100%;
+    height: 100%;
 }
 
 /* $mdDialog.confirm */
@@ -349,4 +360,4 @@ section.legendBox ul .line {
 
 .n-topology-nav-setting > span {
     color: #999999;
-}
\ No newline at end of file
+}

diff --git a/groupbasedpolicy-ui/module/src/main/resources/gbp/endpoints/side_panel_endpoints_detail.tpl.html b/groupbasedpolicy-ui/module/src/main/resources/gbp/endpoints/side_panel_endpoints_detail.tpl.html
index 5f32b957a3dc0302c23e1df5211a4a61251765a5..cc9487d348babfc33b0aa16685b8daaf35213360 100644 (file)
--- a/groupbasedpolicy-ui/module/src/main/resources/gbp/endpoints/side_panel_endpoints_detail.tpl.html
+++ b/groupbasedpolicy-ui/module/src/main/resources/gbp/endpoints/side_panel_endpoints_detail.tpl.html
@@ -22,14 +22,16 @@
         <span flex="35"><strong>Address</strong></span><span flex>{{ sidePanelObject.data.address }}</span>
     </div>
     <md-divider style="margin-bottom: 10px; margin-top: 10px;"></md-divider>
-    <md-subheader class="md-secondary" ng-if="sidePanelObject.data['network-containment']['network-domain-type'].length">Network domain</md-subheader>
-    <div layout="row" class="layout-padding-lr15 .layout-padding-b15 layout-row" ng-if="sidePanelObject.data['network-containment']['network-domain-id'].length">
-        <span flex="35"><strong>Id</strong></span><span flex>{{ sidePanelObject.data['network-containment']['network-domain-id'] }}</span>
-    </div>
-    <div layout="row" class="layout-padding-lr15 .layout-padding-b15 layout-row" ng-if="sidePanelObject.data['network-containment']['network-domain-type'].length">
-        <span flex="35"><strong>type</strong></span><span flex>{{ sidePanelObject.data['network-containment']['network-domain-type'] }}</span>
-    </div>
-    <!-- <md-subheader class="md-secondary"></md-subheader> -->
+    <section ng-if="sidePanelObject.data['network-containment']['network-domain-type'].length">
+        <md-subheader class="md-secondary" style="color: rgb(33,150,243);">Network domain</md-subheader>
+        <div layout="row" class="layout-padding-lr15 .layout-padding-b15 layout-row">
+            <span flex="35"><strong>Id</strong></span><span flex>{{ sidePanelObject.data['network-containment']['network-domain-id'] }}</span>
+        </div>
+        <div layout="row" class="layout-padding-lr15 .layout-padding-b15 layout-row">
+            <span flex="35"><strong>type</strong></span><span flex>{{ sidePanelObject.data['network-containment']['network-domain-type'] }}</span>
+        </div>
+        <md-divider style="margin-bottom: 10px; margin-top: 10px;"></md-divider>
+    </section>
     <div layout="row" class="layout-padding-lr15 .layout-padding-b15 layout-row" ng-if="sidePanelObject.data.condition.length">
         <span flex="35"><strong>Condition</strong></span><span ng-repeat="cndt in sidePanelObject.data.condition">{{cndt}}<span ng-if="!$last">, </span>
         </span>

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 42cbf7e630662fdfffd7278fdd820b8b3dd1c715..fbc135fb704df412658ba4924f9f8ec1e9f00c41 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,4 +1,4 @@
-<div id="topology-container" flex>
+<div id="topology-container" flex style="height: 100%;">
     <section class="legendBox">
         <md-button md-no-ink class="md-primary reload-button" ng-click="reloadTopology()">
             <i class="material-icons">sync</i> Reload topology

diff --git a/groupbasedpolicy-ui/module/src/main/resources/gbp/sfc/dialog-sfc-topology.tpl.html b/groupbasedpolicy-ui/module/src/main/resources/gbp/sfc/dialog-sfc-topology.tpl.html
index e2b6458cb1d323e5abff9e260e4a10368a3b73ba..f4e12c884aceb1811dcf3cfac814e2c864096d19 100644 (file)
--- a/groupbasedpolicy-ui/module/src/main/resources/gbp/sfc/dialog-sfc-topology.tpl.html
+++ b/groupbasedpolicy-ui/module/src/main/resources/gbp/sfc/dialog-sfc-topology.tpl.html
@@ -2,7 +2,7 @@
     <md-toolbar>
         <div class="md-toolbar-tools">
             <h2 style="color: white">
-                Detail for chain {{chain.data.name}}
+                Detail for chain {{chain.data.name}} ({{chain.data.symmetric ? 'Symmetric' : 'Asymmetric'}})
             </h2>
             <span flex></span>
             <md-button class="md-icon-button" ng-click="closeDialog()" aria-label="close button">