[Kimchi-devel] [PATCH] [Kimchi] Properly display network interfaces when more than one exists

[Socorro Stoppler]

This patch fixes a bug in the listing of networks in that only one network 
interface is being shown regardless of the number of interfaces that exist for 
that network.  

In addition to now displaying all of the interfaces, in the case 
that there's too many to fit in the column, an ellipsis has been added to indicate
that there's more interfaces than what it being shown.  A tooltip will be seen when
the user hovers over the interface(s) to show all of the interfaces.


Signed-off-by: Socorro Stoppler <socorro at linux.vnet.ibm.com>
---
 ui/css/kimchi.css                | 8 ++++++--
 ui/css/src/modules/_network.scss | 9 ++++++---
 ui/js/src/kimchi.network.js      | 4 +++-
 ui/pages/tabs/network.html.tmpl  | 4 ++--
 4 files changed, 17 insertions(+), 8 deletions(-)

diff --git a/ui/css/kimchi.css b/ui/css/kimchi.css
index 49ea39a..72f340c 100644
--- a/ui/css/kimchi.css
+++ b/ui/css/kimchi.css
@@ -2156,12 +2156,16 @@ body.wok-gallery {
 
 #network-root-container .wok-datagrid > .wok-datagrid-header > span.column-interface,
 #network-root-container .wok-datagrid > .wok-datagrid-body > .wok-datagrid-row > span.column-interface {
-  width: 10.3896%;
+  width: 15.3896%;
+  padding-right: 40px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 #network-root-container .wok-datagrid > .wok-datagrid-header > span.column-space,
 #network-root-container .wok-datagrid > .wok-datagrid-body > .wok-datagrid-row > span.column-space {
-  width: 30%;
+  width: 25%;
 }
 
 #network-root-container .wok-datagrid > .wok-datagrid-header > span.column-action,
diff --git a/ui/css/src/modules/_network.scss b/ui/css/src/modules/_network.scss
index 4627ab5..ab47c89 100644
--- a/ui/css/src/modules/_network.scss
+++ b/ui/css/src/modules/_network.scss
@@ -93,18 +93,21 @@
         }
 
         > span.column-interface {
-            width: 10.3896%;
+            width: 15.3896%;
+            padding-right: 40px;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
         }
 
         > span.column-space {
-            width: 30%;
+            width: 25%;
         }
 
         > span.column-action {
             width: 25.909%;
             text-align: right;
         }
-
     }
 
     .wok-datagrid > .wok-datagrid-body > .wok-datagrid-row > span {
diff --git a/ui/js/src/kimchi.network.js b/ui/js/src/kimchi.network.js
index 381449d..ac6bf74 100644
--- a/ui/js/src/kimchi.network.js
+++ b/ui/js/src/kimchi.network.js
@@ -35,6 +35,7 @@ kimchi.initNetwork = function() {
 kimchi.initNetworkListView = function() {
     $('.wok-mask').removeClass('hidden');
     kimchi.listNetworks(function(data) {
+        $('[data-toggle="tooltip"]').tooltip();
         for (var i = 0; i < data.length; i++) {
             var network = {
                 name : data[i].name,
@@ -46,7 +47,8 @@ kimchi.initNetworkListView = function() {
             } else {
                 network.type = data[i].connection;
             }
-            network.interface = data[i].interfaces ? data[i].interfaces[0] : null;
+            network.interface = data[i].interfaces ? data[i].interfaces : null;
+            network.interface.join();
             network.addrSpace = data[i].subnet ? data[i].subnet : null;
             network.persistent = data[i].persistent;
             kimchi.addNetworkItem(network);
diff --git a/ui/pages/tabs/network.html.tmpl b/ui/pages/tabs/network.html.tmpl
index 6ddabaa..7e2825d 100644
--- a/ui/pages/tabs/network.html.tmpl
+++ b/ui/pages/tabs/network.html.tmpl
@@ -85,11 +85,11 @@
 </div>
 <div id="modalWindow" class="modal fade network-modal" tabindex="-1" role="dialog" aria-labelledby="networkModalLabel" aria-hidden="true"> </div>
 <script id="networkItem" type="text/html">
-    <div id='{name}' class='wok-nw-grid-body remove-when-logged-off '>
+    <div id='{name}' class='wok-nw-grid-body remove-when-logged-off'>
         <span class='column-state' val="{state}"><span class='network-state {state}'><i class="fa fa-power-off"></i><span class="wok-nw-loading-icon"></span></span></span><!--
                     --><span class='column-name' title="{name}" val="{name}">{name}</span><!--
                     --><span class='column-type' val="{type}">{type}</span><!--
-                    --><span class='column-interface' val="{interface}">{interface}</span><!--
+                    --><span class='column-interface' data-placement="top" data-toggle="tooltip" title="{interface}" val="{interface}">{interface}</span><!--
                     --><span class='column-space' val="{addrSpace}">{addrSpace}</span><!--
                     --><span class='column-action' style="display:none">
                                 <span class="pull-right">
-- 
2.5.0