On 09/17/2014 03:10 AM, Wen Wang wrote:

From: Wen Wang <wenwang@linux.vnet.ibm.com>

V1 -> V2:
Add an indicator "(No interfaces found)" in "bridged" option under
Network tab when there exists no bridged interface.

This patch fix the the issue when creating a network that lack of
interface options pops up errors

Signed-off-by: Wen Wang <wenwang@linux.vnet.ibm.com>
---
 ui/css/theme-default/network.css |    6 ++++++
 ui/js/src/kimchi.network.js      |   11 ++++++-----
 ui/pages/tabs/network.html.tmpl  |    9 +++++++--
 3 files changed, 19 insertions(+), 7 deletions(-)

diff --git a/ui/css/theme-default/network.css b/ui/css/theme-default/network.css
index 6f690ed..5d07468 100644
--- a/ui/css/theme-default/network.css
+++ b/ui/css/theme-default/network.css
@@ -170,6 +170,12 @@
     height: 200px;
 }

+.network-config .section-container .bridged-inline {
+    display: inline-block;
+    vertical-align: top;
+    max-width: 520px;
+}
+
 .network-config .section-header {
     font-weight: bold;
     font-size: 14px;
diff --git a/ui/js/src/kimchi.network.js b/ui/js/src/kimchi.network.js
index 4ee7249..9e2e3aa 100644
--- a/ui/js/src/kimchi.network.js
+++ b/ui/js/src/kimchi.network.js
@@ -247,17 +247,16 @@ kimchi.openNetworkDialog = function(okCallback) {
     kimchi.getInterfaces(function(result) {
         var options = [];
         $('#networkDestinationID').selectMenu();
-        $("#networkDestinationID").on('click',function(){
-        });
         var nics = {};
         for (var i = 0; i < result.length; i++) {
             options.push({label:result[i].name,value:result[i].name});
             nics[result[i].name] = result[i];
         }
-        $("#networkDestinationID").selectMenu("setData", options);
+        result.length>0 && $("#networkDestinationID").selectMenu("setData", options);
         onChange = function() {
             $("#networkDestinationLabel").text($("#networkDestinationID li:first-child").text());
-            if (nics[$("#networkDestinationLabel").text()].type === "bridge") {
+            $("#networkDestinationID li:first-child").addClass("active");
+            if (result.length>0 && nics[$("#networkDestinationLabel").text()].type === "bridge") {
                 $("#enableVlan").prop("checked", false);
                 $("#enableVlan").prop("disabled", true);
                 $("#networkVlanID").val("");
@@ -268,8 +267,8 @@ kimchi.openNetworkDialog = function(okCallback) {
             }
         };
         $("#networkDestinationLabel").on("change", onChange);
-        onChange();
         kimchi.setDefaultNetworkType(result.length!==0);
+        onChange();
     });
     $("#networkConfig").dialog({
         title : i18n.KCHNET6003M
@@ -318,10 +317,12 @@ kimchi.setDefaultNetworkType = function(isInterfaceAvail) {
     $("#networkTypeNat").prop("checked", !isInterfaceAvail);
     if (!isInterfaceAvail) {
         kimchi.enableBridgeOptions(false);
+        $("#networkBriDisabledLabel").prop("style","display");

.show();

I noticed the .prop("style",...); is being used in many places.
We should change it to use .show() or .hide()

     } else {
         $("#bridgeOptions").slideDown(100);
         $("#networkVlanID").toggle(false);
         $("#labelNetworkVlanID").toggle(false);
+        $("#networkBriDisabledLabel").attr("style","display:none");

.hide();

     }
 };

diff --git a/ui/pages/tabs/network.html.tmpl b/ui/pages/tabs/network.html.tmpl
index 214fb01..b82d15f 100644
--- a/ui/pages/tabs/network.html.tmpl
+++ b/ui/pages/tabs/network.html.tmpl
@@ -65,8 +65,13 @@
                     <label for="networkTypeNat">$_("NAT: outbound physical network connection only")</label>
                 </div>
                 <div class="input-container">
-                    <input type="radio" id="networkTypeBri" name="networkType" value="bridged" />
-                    <label for="networkTypeBri">$_("Bridged: Virtual machines are connected to physical network directly")</label>
+                    <div class="bridged-inline">
+                        <input type="radio" id="networkTypeBri" name="networkType" value="bridged" />
+                    </div>
+                    <div class="bridged-inline">
+                        <label for="networkTypeBri">$_("Bridged: Virtual machines are connected to physical network directly")</label>
+                        <label id="networkBriDisabledLabel" style="display:none">$_("(No interfaces found)")</label>

The option and the warning message is displayed in the same line.
Couldn't we display "(No interfaces found)" in a new line under (and properly aligned with) bridged option?

+                    </div>
                 </div>
                 <div id="bridgeOptions">
                     <div>