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

[Socorro Stoppler]

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