[Kimchi-devel] [v2 3/3] UI: Network Grid View

From: Yu Xin Huo <huoyuxin(a)linux.vnet.ibm.com&gt; Signed-off-by: Yu Xin Huo <huoyuxin(a)linux.vnet.ibm.com&gt; --- ui/css/theme-default/network.css | 83 +++++++++----------------------------- ui/js/src/kimchi.network.js | 14 +++++-- ui/pages/tabs/network.html.tmpl | 29 +++++++------ 3 files changed, 44 insertions(+), 82 deletions(-) diff --git a/ui/css/theme-default/network.css b/ui/css/theme-default/network.css index 5d07468..b027f36 100644 --- a/ui/css/theme-default/network.css +++ b/ui/css/theme-default/network.css @@ -17,91 +17,46 @@ */ .network { - font-size: 12px; - font-weight: bold; - color: #666666; -} - -.network .list { - margin: 0px 10px; -} - -.network .list .header > * { - margin-right: 2px; -} - -.network .list .item { - margin-bottom: 10px; - border-radius: 8px 8px 8px 8px; - background: linear-gradient(to bottom, #FFFFFF 0%, #E5E5E5 100%) repeat - scroll 0 0 transparent; - border: 1px solid #CCCCCC; - position: relative; - height: 54px; -} - -.network .list .item > *:first-child { - border-left: none; -} - -.network .list .item > * { - border-left: 1px solid #CCCCCC; - border-right: 1px solid #FFFFFF; + margin: 5px; } -.network .list .item > *:last-child { - border-right: none; +.network .grid-control { + height: 40px; + padding: 5px 0; } -.network .list .column { - display: inline-block; - padding: 10px 10px 10px 2px; - overflow: hidden; -} - -.network .list .item .cell { - padding: 19px 10px 17px 2px; - height: 19px; - color: #999999; -} - -.network .list .item .cell:first-child { - padding-left: 10px; - width: 183px; - max-width: 183px; - color: #666666; +.network .grid-control .filter { + width: 300px; + padding: 5px; + float: right; } .network .list .column-name { - width: 190px; - max-width: 190px; + width: 20%; + max-width: 20%; text-overflow: ellipsis; } .network .list .column-state { - width: 70px; + width: 10%; } .network .list .column-type { - width: 130px; + width: 15%; } .network .list .column-interface { - width: 130px; + width: 15%; } .network .list .column-space { - width: 270px; -} - -.network .list .item .column-space-no-border-right { - border-right: none; + width: 25%; } .network .list .column-action { display: inline-block; - position: absolute; - height: 55px; + float: right; + height: 40px; } .network .list .hide-action-item { @@ -115,7 +70,7 @@ .network .list .action-button { float: right; - margin-top: 5px; + margin-top: 2px; margin-left: 5px; } @@ -133,7 +88,7 @@ height: 16px; width: 16px; border-radius: 8px; - margin-left: 29px; + margin-left: 10px; } .network .list .nw-loading { @@ -316,4 +271,4 @@ .ui-state-default a { color: #212121; -} \ No newline at end of file +} diff --git a/ui/js/src/kimchi.network.js b/ui/js/src/kimchi.network.js index bd91d29..7b3c3e5 100644 --- a/ui/js/src/kimchi.network.js +++ b/ui/js/src/kimchi.network.js @@ -47,17 +47,23 @@ kimchi.initNetworkListView = function() { network.persistent = data[i].persistent; kimchi.addNetworkItem(network); } + $('#networkGrid').grid({enableSorting: false}); + $('input', $('.grid-control', '#network-content')).on('keyup', function(){ + $('#networkGrid').grid('filter', $(this).val()); + }); }); }; kimchi.addNetworkItem = function(network) { - $("#networkBody").append(kimchi.getNetworkItemHtml(network)); + var itemNode = $.parseHTML(kimchi.getNetworkItemHtml(network)); + $("#networkBody").append(itemNode); if(kimchi.tabMode["network"] === "admin") { $(".column-action").attr("style","display"); } else { $(".column-space").addClass('column-space-no-border-right'); } kimchi.addNetworkActions(network); + return itemNode; }; kimchi.getNetworkItemHtml = function(network) { @@ -149,7 +155,7 @@ kimchi.addNetworkActions = function(network) { }; kimchi.confirm(settings, function() { kimchi.stopNetwork(network, menu); - $(evt.currentTarget).parents(".item").remove(); + $('#networkGrid').grid('deleteRow', $(evt.currentTarget).parents(".row")); }, null); } else { @@ -167,7 +173,7 @@ kimchi.addNetworkActions = function(network) { cancel : i18n['KCHAPI6003M'] }, function() { kimchi.deleteNetwork(network.name, function() { - $(evt.currentTarget).parents(".item").remove(); + $('#networkGrid').grid('deleteRow', $(evt.currentTarget).parents(".row")); }); }, null); } @@ -211,7 +217,7 @@ kimchi.initNetworkCreation = function() { network.interface = result.interface ? result.interface : i18n["KCHNET6001M"]; network.addrSpace = result.subnet ? result.subnet : i18n["KCHNET6001M"]; network.persistent = result.persistent; - kimchi.addNetworkItem(network); + $('#networkGrid').grid('addRow', kimchi.addNetworkItem(network)); $("#networkConfig").dialog("close"); }, function(data) { kimchi.message.error(data.responseJSON.reason); diff --git a/ui/pages/tabs/network.html.tmpl b/ui/pages/tabs/network.html.tmpl index 6eaa4b3..c300a05 100644 --- a/ui/pages/tabs/network.html.tmpl +++ b/ui/pages/tabs/network.html.tmpl @@ -31,14 +31,15 @@ </div> </div> <div id="network-content" class="network"> - <div class="list"> - <div class="header"> - <span class="column column-name">$_("Network Name")</span><!-- - --><span class="column column-state">$_("State")</span><!-- - --><span class="column column-type">$_("Network Type")</span><!-- - --><span class="column column-interface">$_("Interface")</span><!-- - --><span class="column column-space">$_("Address Space")</span><!-- - --><span class="column" style="display:none">$_("Actions")</span> + <div class="grid-control"><input type="text" class="filter" placeholder="$_("Filter")"></div> + <div id="networkGrid" class="list"> + <div> + <span class="column-name">$_("Network Name")</span><!-- + --><span class="column-state">$_("State")</span><!-- + --><span class="column-type">$_("Network Type")</span><!-- + --><span class="column-interface">$_("Interface")</span><!-- + --><span class="column-space">$_("Address Space")</span><!-- + --><span style="display:none">$_("Actions")</span> </div> <div id="networkBody" class="empty-when-logged-off"></div> </div> @@ -103,12 +104,12 @@ </div> </div> <script id="networkItem" type="text/html"> - <div id='{name}' class='item remove-when-logged-off'> - <span class='column column-name cell' title="{name}">{name}</span><!-- - --><span class='column column-state cell'><span class='network-state {state}'></span></span><!-- - --><span class='column column-type cell'>{type}</span><!-- - --><span class='column column-interface cell'>{interface}</span><!-- - --><span class='column column-space cell'>{addrSpace}</span><!-- + <div id='{name}' class='remove-when-logged-off'> + <span class='column-name' title="{name}" val="{name}">{name}</span><!-- + --><span class='column-state' val="{state}"><span class='network-state {state}'></span></span><!-- + --><span class='column-type' val="{type}">{type}</span><!-- + --><span class='column-interface' val="{interface}">{interface}</span><!-- + --><span class='column-space' val="{addrSpace}">{addrSpace}</span><!-- --><span class='column-action' style="display:none"> <span class="ui-button-secondary dropdown popable action-button"> $_("Actions") -- 1.7.1