From aae4d36790856402454107f0bf2a45ac29a5baf8 Mon Sep 17 00:00:00 2001
From: Hariharan Suryakumar <harisk@juniper.net>
Date: Tue, 7 Mar 2017 12:25:45 +0530
Subject: [PATCH] Closes-Bug: #1651836 - Instance Status details display can be
 enhanced

1)Changed the grid width from fixed to 100% for the Service instance and the
BGP Pages
2)Changed the VN name text style to bold and given more space before the IP.

Change-Id: I2f1f747689fce3833c2052e7c9167a87e1ad9e3b
---
 webroot/common/ui/css/contrail.controller.css | 20 +++++++++++++------
 .../config/infra/bgp/ui/js/bgpFormatters.js   | 14 ++++++-------
 .../instances/ui/js/views/svcInstGridView.js  |  6 ++++--
 3 files changed, 25 insertions(+), 15 deletions(-)

diff --git a/webroot/common/ui/css/contrail.controller.css b/webroot/common/ui/css/contrail.controller.css
index 0710ab14c..e9b7adeb8 100644
--- a/webroot/common/ui/css/contrail.controller.css
+++ b/webroot/common/ui/css/contrail.controller.css
@@ -278,7 +278,8 @@ div.vis-network canvas{
 #bgp-grid .value th, #config-vn-list .value th, #config-ipam-list .value th, #service-instances-grid .value th, #global-bgp-options-grid th{
     font-weight:600;
     border-bottom:#777 solid 1px;
-    padding-bottom:2px;}
+    padding-bottom:2px;
+    word-break:break-word;}
 #global-bgp-options-grid th, #global-bgp-options-grid td{
     color:#777;
     font-size:12px;
@@ -291,7 +292,8 @@ div.vis-network canvas{
     vertical-align:top;}
 #service-instances-grid .value td a{
     color:#3182bd;
-    text-decoration:underline;}
+    text-decoration:underline;
+    word-break:break-word;}
 #bgp-grid .value .addressFamily {
     padding: 5px 20px 20px 20px;
 }
@@ -311,11 +313,11 @@ div.vis-network canvas{
     width:250px;
     padding-top:0px;}
 #prefix_limit{width:213px}
-#bgp-grid ul.item-list .key, #config-vn-list ul.item-list .key, #config-ipam-list ul.item-list .key, #service-instances-grid ul.item-list .key{
-    width:23.08% !important;
+#bgp-grid ul.item-list .key, #config-vn-list ul.item-list .key, #service-instances-grid ul.item-list .key{
+    width:23% !important;
 }
 #bgp-grid ul.item-list .value, #service-instances-grid ul.item-list .value{
-    width:57.26% !important;
+    width:77% !important;
     vertical-align:top;
 }
 #config-vn-list ul.item-list .value, #config-ipam-list ul.item-list .value{
@@ -516,4 +518,10 @@ table td[class*="col-xs-"], table th[class*="col-xs-"], .row-fluid table td[clas
     font-size:13px;}
 #configalarm_edit_alarm_rule #description .textarea-input-group{
     width:100%;}
-#configalarm_edit_alarm_rule .collection-table .data-cell>div.row{margin:0px;}
\ No newline at end of file
+#configalarm_edit_alarm_rule .collection-table .data-cell>div.row{margin:0px;}
+
+.vn_key{
+    font-weight:600;
+}
+.vn_seperator{
+    padding-right:8px;}
diff --git a/webroot/config/infra/bgp/ui/js/bgpFormatters.js b/webroot/config/infra/bgp/ui/js/bgpFormatters.js
index da7b96d57..17f96214f 100644
--- a/webroot/config/infra/bgp/ui/js/bgpFormatters.js
+++ b/webroot/config/infra/bgp/ui/js/bgpFormatters.js
@@ -61,13 +61,13 @@ define(['underscore'], function(_){
             var bgpRefs = getValueByJsonPath(dc,"bgp_router_refs", []);
             if(bgpRefs.length > 0){
                 peerString =
-                    "<table style='width:1000px !important;'><thead><tr><th style='width:200px;'>Peer Name</th>\
-                    <th style='width:150px;'>Admin State</th>\
-                    <th style='width:120px;'>Passive</th>\
-                    <th style='width:280px;'>Hold Time (seconds)</th>\
-                    <th style='width:170px;'>Loop Count</th>\
-                    <th style='width:200px;'>Auth Mode</th>\
-                    <th style='width:900px;'>Family Attributes</th></tr></thead>";
+                    "<table width='100%' ><thead><tr><th class='col-xs-1'>Peer Name</th>\
+                    <th class='col-xs-1'>Admin State</th>\
+                    <th class='col-xs-1'>Passive</th>\
+                    <th class='col-xs-1'>Hold Time (seconds)</th>\
+                    <th class='col-xs-1'>Loop Count</th>\
+                    <th class='col-xs-1'>Auth Mode</th>\
+                    <th class='col-xs-1'>Family Attributes</th></tr></thead>";
                 bgpRefs.forEach(function(bgp){
                     var attr = getValueByJsonPath(bgp,
                         "attr;session;0;attributes;0", {});
diff --git a/webroot/config/services/instances/ui/js/views/svcInstGridView.js b/webroot/config/services/instances/ui/js/views/svcInstGridView.js
index 246f0565b..0278f6379 100644
--- a/webroot/config/services/instances/ui/js/views/svcInstGridView.js
+++ b/webroot/config/services/instances/ui/js/views/svcInstGridView.js
@@ -790,9 +790,11 @@ define([
             var addr = getValueByJsonPath(vmDetails[i], 'server;addresses', {});
             var addrStr = "";
             for (key in addr) {
+                addrStr +='<span class="vn_key">';
                 addrStr += key.toString();
+                addrStr +='</span>';
                 if (addr[key].length > 0) {
-                    addrStr += ':';
+                    addrStr += '<span class="vn_seperator">:</span>';
                     addrStr += (null != addr[key][0]['addr']) ?
                         addr[key][0]['addr'] : '-';
                     addrStr += ' <br>';
@@ -857,7 +859,7 @@ define([
                 '\');"> View Console </a></td>';
             returnHtml += '</tr>';
         }
-        returnHtml = "<table style='width:1000px !important;'>" + returnHtml + "</table>";
+        returnHtml = "<table width='100%'>" + returnHtml + "</table>";
         return returnHtml;
     }