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(a)linux.vnet.ibm.com&gt; --- 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 @@ } - width: 10.3896%; + width: 15.3896%; + padding-right: 40px; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; } - width: 30%; + width: 25%; } 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