[Kimchi-devel] [PATCH V2 1/2] Bug Fix #282: Disable Start/Stop network buttons while wait backend lag

[Rodrigo Trujillo]

When the user tries to Start/Stop (up/down) a network, there is a lag in
the backend, and it was possible to click on start/stop/delete again,
and again, generating errors. This patch disables the buttons and shows
loading gif to user, avoind this kind of error.

Signed-off-by: Rodrigo Trujillo <rodrigo.trujillo at linux.vnet.ibm.com>
---
 ui/css/theme-default/network.css |  5 +++++
 ui/js/src/kimchi.network.js      | 14 ++++++++++----
 2 files changed, 15 insertions(+), 4 deletions(-)

diff --git a/ui/css/theme-default/network.css b/ui/css/theme-default/network.css
index 80640a3..67f2aa2 100644
--- a/ui/css/theme-default/network.css
+++ b/ui/css/theme-default/network.css
@@ -132,6 +132,11 @@
     margin-left: 29px;
 }
 
+.network .list .nw-loading {
+    background: #c0c0c0 url(../../images/theme-default/loading.gif)
+                center no-repeat;
+}
+
 .network .list .up {
     background: linear-gradient(to bottom, #BFD255 0%, #8EB92A 50%,
                 #72AA00 51%, #9ECB2D 100%) repeat scroll 0 0 transparent;
diff --git a/ui/js/src/kimchi.network.js b/ui/js/src/kimchi.network.js
index 91324ee..7cedc01 100644
--- a/ui/js/src/kimchi.network.js
+++ b/ui/js/src/kimchi.network.js
@@ -84,20 +84,26 @@ kimchi.addNetworkActions = function(network) {
             $(".menu-container", "#" + network.name).toggle(false);
             var menu = $(evt.currentTarget).parent();
             if ($(evt.currentTarget).attr("nwAct") === "start") {
+                $(".network-state", $("#" + network.name)).switchClass("down", "nw-loading");
+                $("[nwAct='start']", menu).addClass("ui-state-disabled");
+                $("[nwAct='delete']", menu).addClass("ui-state-disabled");
+                $(":first-child", $("[nwAct='delete']", menu)).attr("disabled", true);
                 kimchi.toggleNetwork(network.name, true, function() {
                     $("[nwAct='start']", menu).addClass("hide-action-item");
+                    $("[nwAct='start']", menu).removeClass("ui-state-disabled");
                     $("[nwAct='stop']", menu).removeClass("hide-action-item");
-                    $("[nwAct='delete']", menu).addClass("ui-state-disabled");
-                    $(":first-child", $("[nwAct='delete']", menu)).attr("disabled", true);
-                    $(".network-state", $("#" + network.name)).switchClass("down", "up");
+                    $(".network-state", $("#" + network.name)).switchClass("nw-loading", "up");
                 });
             } else if ($(evt.currentTarget).attr("nwAct") === "stop") {
+                $(".network-state", $("#" + network.name)).switchClass("up", "nw-loading");
+                $("[nwAct='stop']", menu).addClass("ui-state-disabled");
                 kimchi.toggleNetwork(network.name, false, function() {
                     $("[nwAct='start']", menu).removeClass("hide-action-item");
                     $("[nwAct='stop']", menu).addClass("hide-action-item");
+                    $("[nwAct='stop']", menu).removeClass("ui-state-disabled");
                     $("[nwAct='delete']", menu).removeClass("ui-state-disabled");
                     $(":first-child", $("[nwAct='delete']", menu)).removeAttr("disabled");
-                    $(".network-state", $("#" + network.name)).switchClass("up", "down");
+                    $(".network-state", $("#" + network.name)).switchClass("nw-loading", "down");
                 });
             } else if ($(evt.currentTarget).attr("nwAct") === "delete") {
                 kimchi.confirm({
-- 
1.8.5.3