Hi Socorro, I tried again and I was not able to get the 'unavailable' on interfaces neither. But the interface list only display one interface right after the network creation. Only when I switched tabs, I could see more interfaces listed there. On 05/27/2016 07:37 PM, Socorro Stoppler wrote:

Hi Aline,

I tried this w/a test env (i.e. --test) so I could have an interface and when I created a VEPA network, it showed the interface. What showed up as unavailable was the Address Space column. Would you mind sending me a picture?

Thanks -Socorro

On 05/27/2016 12:36 PM, Aline Manera wrote:

...

Hi Socorro,

1. Once I create a VEPA or Passthrough Bridged network, the interface column displays "unavailable". If I switch tabs and go back to Network tab, the interface column displays the interface values as proposed by this patch.

2. I'd suggest to rename the variable name to 'interfaces' just to reflect that this field can list multiple values.

Regards, Aline Manera

On 05/25/2016 03:03 PM, Socorro Stoppler wrote:

...

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@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">