[Kimchi-devel] [PATCH 2/2] UI: Disable stop/undefine buttons when network is in use

[Aline Manera]

From: Aline Manera <alinefm at br.ibm.com>

Verify if network is in use and if so disable the stop and undefine
buttons for it.

Signed-off-by: Aline Manera <alinefm at br.ibm.com>
---
 ui/js/src/kimchi.network.js     |   27 ++++++++++++++++++++-------
 ui/pages/tabs/network.html.tmpl |    2 +-
 2 files changed, 21 insertions(+), 8 deletions(-)

diff --git a/ui/js/src/kimchi.network.js b/ui/js/src/kimchi.network.js
index a768833..7c4bc77 100644
--- a/ui/js/src/kimchi.network.js
+++ b/ui/js/src/kimchi.network.js
@@ -30,6 +30,7 @@ kimchi.initNetworkListView = function() {
         for (var i = 0; i < data.length; i++) {
             var network = {
                 name : data[i].name,
+                in_use : data[i].in_use,
                 state : data[i].state === "active" ? "up" : "down"
             };
             if (data[i].connection === "bridge") {
@@ -59,6 +60,8 @@ kimchi.getNetworkItemHtml = function(network) {
     if(i18n["network_type_" + network.type]) {
         network.type = i18n["network_type_" + network.type];
     }
+
+    var disable_in_use = network.in_use ? "ui-state-disabled" : "";
     var networkItem = kimchi.template($('#networkItem').html(), {
         name : network.name,
         state : network.state,
@@ -66,9 +69,10 @@ kimchi.getNetworkItemHtml = function(network) {
         interface: network.interface,
         addrSpace : network.addrSpace,
         startClass : network.state === "up" ? "hide-action-item" : "",
-        stopClass : network.state === "down" ? "hide-action-item" : "",
-        deleteClass : network.state === "up" ? "ui-state-disabled" : "",
-        deleteDisabled: network.state === "up" ? "disabled" : ""
+        stopClass : network.state === "down" ? "hide-action-item" : disable_in_use,
+        stopDisabled : network.in_use ? "disabled" : "",
+        deleteClass : network.state === "up" || network.in_use ? "ui-state-disabled" : "",
+        deleteDisabled: network.state === "up" || network.in_use ? "disabled" : ""
     });
     return networkItem;
 };
@@ -92,11 +96,16 @@ kimchi.addNetworkActions = function(network) {
                     $("[nwAct='start']", menu).addClass("hide-action-item");
                     $("[nwAct='start']", menu).removeClass("ui-state-disabled");
                     $("[nwAct='stop']", menu).removeClass("hide-action-item");
+                    if (network.in_use) {
+                        $("[nwAct='stop']", menu).addClass("ui-state-disabled");
+                    }
                     $(".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");
+                    if (!network.in_use) {
+                        $("[nwAct='delete']", menu).removeClass("ui-state-disabled");
+                    }
                     $(":first-child", $("[nwAct='delete']", menu)).removeAttr("disabled");
                     kimchi.message.error(err.responseJSON.reason);
                 });
@@ -107,12 +116,16 @@ kimchi.addNetworkActions = function(network) {
                     $("[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");
+                    if (!network.in_use) {
+                        $("[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");
+                    if (!network.in_use) {
+                        $("[nwAct='stop']", menu).removeClass("ui-state-disabled");
+                    }
                     kimchi.message.error(err.responseJSON.reason);
                 });
             } else if ($(evt.currentTarget).attr("nwAct") === "delete") {
diff --git a/ui/pages/tabs/network.html.tmpl b/ui/pages/tabs/network.html.tmpl
index bbb43e3..e49b257 100644
--- a/ui/pages/tabs/network.html.tmpl
+++ b/ui/pages/tabs/network.html.tmpl
@@ -95,7 +95,7 @@
         <span class="ui-button-secondary dropdown action-button">$_("Actions")</span>
         <ul class='popover actionsheet right-side menu-container'>
             <li nwAct="start" class='{startClass}'><a>$_("Start")</a></li>
-            <li nwAct="stop" class='{stopClass}'><a>$_("Stop")</a></li>
+            <li nwAct="stop" class='{stopClass}'><a {deleteDisabled}>$_("Stop")</a></li>
             <li nwAct="delete" class='{deleteClass}'><a {deleteDisabled} class='red'>$_("Delete")</a></li>
         </ul>
     </span>
-- 
1.7.10.4