[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