[Kimchi-devel] [v2 3/3] UI: Network Grid View
huoyuxin at linux.vnet.ibm.com
huoyuxin at linux.vnet.ibm.com
Wed Feb 11 07:16:37 UTC 2015
From: Yu Xin Huo <huoyuxin at linux.vnet.ibm.com>
Signed-off-by: Yu Xin Huo <huoyuxin at linux.vnet.ibm.com>
---
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
More information about the Kimchi-devel
mailing list