From 449afe9559140541c4cc3af631b010e10eef73d0 Mon Sep 17 00:00:00 2001
From: Daniel Malachovsky <dmalacho@cisco.com>
Date: Thu, 7 Jul 2016 15:26:37 +0200
Subject: [PATCH] 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>
---
 .../resources/gbp/common/gbp.controller.js     |  5 +++--
 .../src/main/resources/gbp/common/gbp.css      | 15 +++++++++++++--
 .../side_panel_endpoints_detail.tpl.html       | 18 ++++++++++--------
 .../resolved-policy/resolved-policy.tpl.html   |  2 +-
 .../gbp/sfc/dialog-sfc-topology.tpl.html       |  2 +-
 5 files changed, 28 insertions(+), 14 deletions(-)

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 cef32943f..57c8f465b 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
@@ -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 b8ba13fdf..60105a921 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,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 5f32b957a..cc9487d34 100644
--- 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 42cbf7e63..fbc135fb7 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,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 e2b6458cb..f4e12c884 100644
--- 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">
-- 
2.36.6