[PATCH V2 1/2] Bug Fix #282: Disable Start/Stop network buttons while wait backend lag
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@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
This patch restores the UI to previous state if function toggleNetwork returns an error, when user tries to start/stop a network. Signed-off-by: Rodrigo Trujillo <rodrigo.trujillo@linux.vnet.ibm.com> --- ui/js/src/kimchi.network.js | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/ui/js/src/kimchi.network.js b/ui/js/src/kimchi.network.js index 7cedc01..d68697a 100644 --- a/ui/js/src/kimchi.network.js +++ b/ui/js/src/kimchi.network.js @@ -93,6 +93,12 @@ kimchi.addNetworkActions = function(network) { $("[nwAct='start']", menu).removeClass("ui-state-disabled"); $("[nwAct='stop']", menu).removeClass("hide-action-item"); $(".network-state", $("#" + network.name)).switchClass("nw-loading", "up"); + }, function(err) { + $(".network-state", $("#" + network.name)).switchClass("nw-loading","down"); + $("[nwAct='start']", menu).removeClass("ui-state-disabled"); + $("[nwAct='delete']", menu).removeClass("ui-state-disabled"); + $(":first-child", $("[nwAct='delete']", menu)).removeAttr("disabled"); + kimchi.message.error(err.responseJSON.reason); }); } else if ($(evt.currentTarget).attr("nwAct") === "stop") { $(".network-state", $("#" + network.name)).switchClass("up", "nw-loading"); @@ -104,6 +110,10 @@ kimchi.addNetworkActions = function(network) { $("[nwAct='delete']", menu).removeClass("ui-state-disabled"); $(":first-child", $("[nwAct='delete']", menu)).removeAttr("disabled"); $(".network-state", $("#" + network.name)).switchClass("nw-loading", "down"); + }, function(err) { + $(".network-state", $("#" + network.name)).switchClass("nw-loading", "up"); + $("[nwAct='stop']", menu).removeClass("ui-state-disabled"); + kimchi.message.error(err.responseJSON.reason); }); } else if ($(evt.currentTarget).attr("nwAct") === "delete") { kimchi.confirm({ -- 1.8.5.3
Reviewed-by: Adam King <rak@linux.vnet.ibm.com> Tested-by: Adam King <rak@linux.vnet.ibm.com> On 02/28/2014 08:14 AM, Rodrigo Trujillo wrote:
This patch restores the UI to previous state if function toggleNetwork returns an error, when user tries to start/stop a network.
Signed-off-by: Rodrigo Trujillo <rodrigo.trujillo@linux.vnet.ibm.com> --- ui/js/src/kimchi.network.js | 10 ++++++++++ 1 file changed, 10 insertions(+)
diff --git a/ui/js/src/kimchi.network.js b/ui/js/src/kimchi.network.js index 7cedc01..d68697a 100644 --- a/ui/js/src/kimchi.network.js +++ b/ui/js/src/kimchi.network.js @@ -93,6 +93,12 @@ kimchi.addNetworkActions = function(network) { $("[nwAct='start']", menu).removeClass("ui-state-disabled"); $("[nwAct='stop']", menu).removeClass("hide-action-item"); $(".network-state", $("#" + network.name)).switchClass("nw-loading", "up"); + }, function(err) { + $(".network-state", $("#" + network.name)).switchClass("nw-loading","down"); + $("[nwAct='start']", menu).removeClass("ui-state-disabled"); + $("[nwAct='delete']", menu).removeClass("ui-state-disabled"); + $(":first-child", $("[nwAct='delete']", menu)).removeAttr("disabled"); + kimchi.message.error(err.responseJSON.reason); }); } else if ($(evt.currentTarget).attr("nwAct") === "stop") { $(".network-state", $("#" + network.name)).switchClass("up", "nw-loading"); @@ -104,6 +110,10 @@ kimchi.addNetworkActions = function(network) { $("[nwAct='delete']", menu).removeClass("ui-state-disabled"); $(":first-child", $("[nwAct='delete']", menu)).removeAttr("disabled"); $(".network-state", $("#" + network.name)).switchClass("nw-loading", "down"); + }, function(err) { + $(".network-state", $("#" + network.name)).switchClass("nw-loading", "up"); + $("[nwAct='stop']", menu).removeClass("ui-state-disabled"); + kimchi.message.error(err.responseJSON.reason); }); } else if ($(evt.currentTarget).attr("nwAct") === "delete") { kimchi.confirm({
-- Adam King <rak@linux.vnet.ibm.com> IBM CSI
Reviewed-by: Adam King <rak@linux.vnet.ibm.com> Tested-by: Adam King <rak@linux.vnet.ibm.com> On 02/28/2014 08:14 AM, Rodrigo Trujillo wrote:
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@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({
-- Adam King <rak@linux.vnet.ibm.com> IBM CSI
participants (3)
-
Adam King -
Aline Manera -
Rodrigo Trujillo