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

[Socorro Stoppler]

v2:
Fix for showing all of the interface(s) when creating a network.

v1:
Display all of the interfaces when more than one exists when listing networks.
Tooltip is shown when hovering over the interface 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/js/src/kimchi.network_add_main.js | 2 +-
 ui/pages/tabs/network.html.tmpl      | 4 ++--
 5 files changed, 18 insertions(+), 9 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/js/src/kimchi.network_add_main.js b/ui/js/src/kimchi.network_add_main.js
index 85df203..fd45f34 100644
--- a/ui/js/src/kimchi.network_add_main.js
+++ b/ui/js/src/kimchi.network_add_main.js
@@ -44,7 +44,7 @@ kimchi.startNetworkCreation = function() {
 
     kimchi.createNetwork(data, function(result) {
         network.state = result.state === "active" ? "up" : "down";
-        network.interface = result.interfaces ? result.interfaces[0] : i18n["KCHNET6001M"];
+        network.interface = result.interfaces ? result.interfaces : i18n["KCHNET6001M"];
         network.addrSpace = result.subnet ? result.subnet : i18n["KCHNET6001M"];
         network.persistent = result.persistent;
         $('#networkGrid').dataGrid('addRow', 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