[Kimchi-devel] [PATCH 08/10] [new-ui] Network tab

10 Nov 2015

From: samhenri <samuel.guimaraes@eldorado.org.br>

Signed-off-by: samhenri <samuel.guimaraes@eldorado.org.br>
---
 src/wok/plugins/kimchi/ui/js/src/kimchi.network.js | 318 ++-------------------
 .../kimchi/ui/js/src/kimchi.network_add_main.js    | 166 +++++++++++
 .../plugins/kimchi/ui/pages/network-add.html.tmpl  |  70 +++++
 src/wok/plugins/kimchi/ui/pages/network.html.tmpl  | 148 ++++------
 ui/css/src/modules/_network.scss                   | 122 ++++++++
 5 files changed, 449 insertions(+), 375 deletions(-)
 create mode 100644 src/wok/plugins/kimchi/ui/js/src/kimchi.network_add_main.js
 create mode 100644 src/wok/plugins/kimchi/ui/pages/network-add.html.tmpl
 create mode 100644 ui/css/src/modules/_network.scss

diff --git a/src/wok/plugins/kimchi/ui/js/src/kimchi.network.js b/src/wok/plugins/kimchi/ui/js/src/kimchi.network.js
index c43b59a..539010e 100644
--- a/src/wok/plugins/kimchi/ui/js/src/kimchi.network.js
+++ b/src/wok/plugins/kimchi/ui/js/src/kimchi.network.js
@@ -21,12 +21,10 @@ kimchi.NETWORK_TYPE_BRIDGE = "bridged";
 kimchi.initNetwork = function() {
     if(wok.tabMode['network'] === 'admin') {
         $('.tools').attr('style','display');
-        $('#network-content .header span:last-child').attr('style','display');
+        $('#networkGrid .wok-nw-grid-header span:last-child').attr('style','display');
         kimchi.initNetworkCreation();
     }
     kimchi.initNetworkListView();
-    kimchi.initNetworkDialog();
-    kimchi.initNetworkCleanup();
 };
 
 kimchi.initNetworkListView = function() {
@@ -47,9 +45,9 @@ 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());
+        $('#networkGrid').dataGrid({enableSorting: false});
+        $('input', $('.grid-control', '#network-content-container')).on('keyup', function(){
+            $('#networkGrid').dataGrid('filter', $(this).val());
         });
     });
 };
@@ -59,8 +57,6 @@ kimchi.addNetworkItem = function(network) {
     $("#networkBody").append(itemNode);
     if(wok.tabMode["network"] === "admin") {
         $(".column-action").attr("style","display");
-    } else {
-        $(".column-space").addClass('column-space-no-border-right');
     }
     kimchi.addNetworkActions(network);
     return itemNode;
@@ -77,67 +73,67 @@ kimchi.getNetworkItemHtml = function(network) {
         network.type = i18n["network_type_" + network.type];
     }
 
-    var disable_in_use = network.in_use ? "ui-state-disabled" : "";
+    var disable_in_use = network.in_use ? "disabled" : "";
     var networkItem = wok.substitute($('#networkItem').html(), {
         name : network.name,
         state : network.state,
         type : network.type,
         interface: network.interface,
         addrSpace : network.addrSpace,
-        startClass : network.state === "up" ? "hide-action-item" : "",
-        stopClass : network.state === "down" ? "hide-action-item" : disable_in_use,
+        startClass : network.state === "up" ? "wok-hide-action-item" : "",
+        stopClass : network.state === "down" ? "wok-hide-action-item" : disable_in_use,
         stopDisabled : network.in_use ? "disabled" : "",
-        deleteClass : network.state === "up" || network.in_use ? "ui-state-disabled" : "",
+        deleteClass : network.state === "up" || network.in_use ? "disabled" : "",
         deleteDisabled: network.state === "up" || network.in_use ? "disabled" : ""
     });
     return networkItem;
 };
 
 kimchi.stopNetwork = function(network,menu) {
-    $(".network-state", $("#" + wok.escapeStr(network.name))).switchClass("up", "nw-loading");
-    $("[nwAct='stop']", menu).addClass("ui-state-disabled");
+    $(".network-state", $("#" + wok.escapeStr(network.name))).switchClass("up", "loading");
+    $("[nwAct='stop']", menu).addClass("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='start']", menu).removeClass("wok-hide-action-item");
+        $("[nwAct='stop']", menu).addClass("wok-hide-action-item");
+        $("[nwAct='stop']", menu).removeClass("disabled");
         if (!network.in_use) {
-            $("[nwAct='delete']", menu).removeClass("ui-state-disabled");
+            $("[nwAct='delete']", menu).removeClass("disabled");
             $(":first-child", $("[nwAct='delete']", menu)).removeAttr("disabled");
         }
-        $(".network-state", $("#" + wok.escapeStr(network.name))).switchClass("nw-loading", "down");
+        $(".network-state", $("#" + wok.escapeStr(network.name))).switchClass("loading", "down");
     }, function(err) {
-        $(".network-state", $("#" + wok.escapeStr(network.name))).switchClass("nw-loading", "up");
+        $(".network-state", $("#" + wok.escapeStr(network.name))).switchClass("loading", "up");
         if (!network.in_use) {
-            $("[nwAct='stop']", menu).removeClass("ui-state-disabled");
+            $("[nwAct='stop']", menu).removeClass("disabled");
         }
         wok.message.error(err.responseJSON.reason);
     });
 }
 
 kimchi.addNetworkActions = function(network) {
-    $(".menu-container", "#" + wok.escapeStr(network.name)).menu();
+    //$(".dropdown-menu", "#" + wok.escapeStr(network.name)).menu();
 
-    $('#' + wok.escapeStr(network.name)).on('click', '.menu-container li', function(evt) {
+    $('#' + wok.escapeStr(network.name)).on('click', '.dropdown-menu li', function(evt) {
         var menu = $(evt.currentTarget).parent();
         if ($(evt.currentTarget).attr("nwAct") === "start") {
             $(".network-state", $("#" + wok.escapeStr(network.name))).switchClass("down", "nw-loading");
-            $("[nwAct='start']", menu).addClass("ui-state-disabled");
-            $("[nwAct='delete']", menu).addClass("ui-state-disabled");
+            $("[nwAct='start']", menu).addClass("disabled");
+            $("[nwAct='delete']", menu).addClass("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='start']", menu).addClass("wok-hide-action-item");
+                $("[nwAct='start']", menu).removeClass("disabled");
+                $("[nwAct='stop']", menu).removeClass("wok-hide-action-item");
                 network.state = "up";
                 if (network.in_use) {
-                    $("[nwAct='stop']", menu).addClass("ui-state-disabled");
+                    $("[nwAct='stop']", menu).addClass("disabled");
                 }
                 $(".network-state", $("#" + wok.escapeStr(network.name))).switchClass("nw-loading", "up");
             }, function(err) {
                 $(".network-state", $("#" + wok.escapeStr(network.name))).switchClass("nw-loading","down");
-                $("[nwAct='start']", menu).removeClass("ui-state-disabled");
+                $("[nwAct='start']", menu).removeClass("disabled");
                 if (!network.in_use) {
-                    $("[nwAct='delete']", menu).removeClass("ui-state-disabled");
+                    $("[nwAct='delete']", menu).removeClass("disabled");
                 }
                 $(":first-child", $("[nwAct='delete']", menu)).removeAttr("disabled");
                 wok.message.error(err.responseJSON.reason);
@@ -155,7 +151,7 @@ kimchi.addNetworkActions = function(network) {
                 };
                 wok.confirm(settings, function() {
                     kimchi.stopNetwork(network, menu);
-                    $('#networkGrid').grid('deleteRow', $(evt.currentTarget).parents(".row"));
+                    $('#networkGrid').dataGrid('deleteRow', $(evt.currentTarget).parents(".row"));
                 }, null);
             }
             else {
@@ -173,270 +169,18 @@ kimchi.addNetworkActions = function(network) {
                 cancel : i18n['KCHAPI6003M']
             }, function() {
                 kimchi.deleteNetwork(network.name, function() {
-                    $('#networkGrid').grid('deleteRow', $(evt.currentTarget).parents(".row"));
+                    $('#networkGrid').dataGrid('deleteRow', $(evt.currentTarget).parents(".row"));
                 });
             }, null);
         }
     });
 
-    $("#networkBody .column-action .popable").button({
-        icons : {
-            secondary : "action-button-icon"
-        }
-    });
+    //$("#networkBody .column-action .dropdown.menu-flat").button();
 
 };
 
 kimchi.initNetworkCreation = function() {
     $("#networkAdd").on("click", function() {
-        kimchi.openNetworkDialog(function() {
-            var errorCallback = function(){
-                $("#networkFormOk").button("enable");
-                $("#networkName").removeAttr("readonly");
-                $("#networkFormOk span").text(i18n.KCHAPI6005M);
-            };
-            var network = kimchi.getNetworkDialogValues();
-            var data = {
-                name : network.name,
-                connection: network.type
-            };
-            if (network.type === kimchi.NETWORK_TYPE_BRIDGE) {
-                data.connection = "bridge";
-                data.interface = network.interface;
-                if ($("#enableVlan").prop("checked")) {
-                    data.vlan_id = network.vlan_id;
-                    if (!(data.vlan_id >=1 && data.vlan_id <= 4094)) {
-                        wok.message.error.code('KCHNET6001E');
-                        errorCallback();
-                        return;
-                    }
-                }
-            }
-            kimchi.createNetwork(data, function(result) {
-                network.state = result.state === "active" ? "up" : "down";
-                network.interface = result.interface ? result.interface : i18n["KCHNET6001M"];
-                network.addrSpace = result.subnet ? result.subnet : i18n["KCHNET6001M"];
-                network.persistent = result.persistent;
-                $('#networkGrid').grid('addRow', kimchi.addNetworkItem(network));
-                $("#networkConfig").dialog("close");
-            }, function(data) {
-                wok.message.error(data.responseJSON.reason);
-                errorCallback();
-            });
-        });
-    });
-};
-
-kimchi.initNetworkDialog = function() {
-    buttonsObj= {};
-    buttonsObj['id'] = "networkFormOk";
-    buttonsObj['text'] = i18n.KCHAPI6005M;
-    buttonsObj['class'] = "btn-normal";
-    buttonsObj['disabled'] = true;
-    buttonsObj['click'] = function() { };
-    buttonsObjCancel= {};
-    buttonsObjCancel['id'] = "networkFormCancel";
-    buttonsObjCancel['text'] = i18n.KCHAPI6003M;
-    buttonsObjCancel['class'] = "btn-normal";
-    buttonsObjCancel['disabled'] = false;
-    buttonsObjCancel['click'] = function() {
-        $(this).dialog("close");
-    };
-    $("#networkConfig").dialog({
-        autoOpen : false,
-        modal : true,
-        width : 600,
-        draggable : false,
-        resizable : false,
-        closeText: "X",
-        dialogClass : "network-ui-dialog remove-when-logged-off",
-        open : function(){
-            $(".ui-dialog-titlebar-close", $("#networkConfig").parent()).removeAttr("title");
-            $(".ui-widget-overlay").css({
-                "background": "#FFFFFF",
-                "opacity": "0.5"
-            });
-        },
-        beforeClose : function() {
-            kimchi.cleanNetworkDialog();
-        },
-        buttons : [buttonsObj, buttonsObjCancel]
-    });
-    $("#networkConfig").parent().css({
-        "background": "#FFFFFF",
-        "border-radius": 0,
-        "border": "2px solid #999999"
-    });
-    $(".ui-dialog-titlebar button", $("#networkConfig").parent()).remove();
-    $(".ui-dialog-titlebar span", $("#networkConfig").parent()).css({
-        "font-weight": "lighter",
-        "height": "48px",
-        "line-height": "48px",
-        "margin": "0 30px",
-        "color": "#444444",
-        "font-size": "22px"
-    });
-    $(".ui-dialog-titlebar", $("#networkConfig").parent()).css({
-        "box-shadow": "none",
-        "padding": "0",
-    });
-    $(".ui-dialog-buttonpane", $("#networkConfig").parent()).css({
-        "background": "#008ABF"
-    });
-    $(".ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset").css({
-        "padding": "0 10px",
-        "float": "left"
-    });
-    $(".ui-dialog-buttonpane .ui-dialog-buttonset button").removeClass("ui-corner-all");
-    $(".ui-dialog-buttonpane .ui-dialog-buttonset button").css({
-        "background": "#FFFFFF",
-        "color": "#444444",
-        "font-size": "13px",
-        "border-radius": "0",
-        "opacity": "1"
-    });
-    kimchi.setupNetworkFormEvent();
-};
-
-kimchi.openNetworkDialog = function(okCallback) {
-    kimchi.getInterfaces(function(result) {
-        var options = [];
-        $('#networkDestinationID').selectMenu();
-        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];
-        }
-        result.length>0 && $("#networkDestinationID").selectMenu("setData", options);
-        onChange = function() {
-            $("#networkDestinationLabel").text($("#networkDestinationID li:first-child").text());
-            $("#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("");
-                $("#networkVlanID").toggle(false);
-                $("#labelNetworkVlanID").toggle(false);
-            } else {
-                $("#enableVlan").prop("disabled",false);
-            }
-        };
-        $("#networkDestinationLabel").on("change", onChange);
-        kimchi.setDefaultNetworkType(result.length!==0);
-        onChange();
-    });
-    $("#networkConfig").dialog({
-        title : i18n.KCHNET6003M
-    });
-    $("#networkFormOk").on("click", function() {
-        $("#networkFormOk").button("disable");
-        $("#networkName").prop("readonly", "readonly");
-        $("#networkFormOk span").text(i18n.KCHAPI6008M);
-        okCallback();
-    });
-    $("#enableVlan").on("click", function() {
-        $("#networkVlanID").prop("disabled", !this.checked);
-        if (!this.checked) {
-            $("#networkVlanID").slideUp(100);
-            $("#labelNetworkVlanID").slideUp(100);
-            $("#networkVlanID").val("");
-        }
-        else {
-            $("#networkVlanID").slideDown(100);
-            $("#labelNetworkVlanID").slideDown(100);
-        }
-    });
-    $("#networkConfig").dialog("open");
-};
-
-kimchi.enableBridgeOptions = function(enable) {
-    if (!enable) {
-        $("#enableVlan").prop("checked", false);
-        $("#networkVlanID").toggle(false);
-        $("#labelNetworkVlanID").toggle(false);
-        $("#networkVlanID").val("");
-        $("#networkDestinationLabel").text("");
-        $("#bridgeOptions").slideUp(100);
-    } else if (!$("#networkDestinationLabel").text()){
-        $("#networkDestinationLabel").text($("#networkDestinationID li:first-child").text());
-        $("#bridgeOptions").slideDown(100);
-        $("#networkVlanID").toggle(false);
-        $("#labelNetworkVlanID").toggle(false);
-    }
-};
-
-
-kimchi.setDefaultNetworkType = function(isInterfaceAvail) {
-    $("#networkTypeBri").prop("checked", isInterfaceAvail);
-    $("#networkTypeBri").prop("disabled", !isInterfaceAvail);
-    $("#networkTypeNat").prop("checked", !isInterfaceAvail);
-    if (!isInterfaceAvail) {
-        kimchi.enableBridgeOptions(false);
-        $("#networkBriDisabledLabel").show();
-    } else {
-        if (kimchi.capabilities && kimchi.capabilities.nm_running) {
-            wok.message.warn(i18n['KCHNET6001W']);
-        }
-        $("#bridgeOptions").slideDown(100);
-        $("#networkVlanID").toggle(false);
-        $("#labelNetworkVlanID").toggle(false);
-        $("#networkBriDisabledLabel").hide();
-    }
-};
-
-kimchi.getNetworkDialogValues = function() {
-    var network = {
-        name : $("#networkName").val(),
-        type : $("input:radio[name=networkType]:checked").val()
-    };
-    if (network.type === kimchi.NETWORK_TYPE_BRIDGE) {
-        network.interface = $("#networkDestinationLabel").text();
-        network.vlan_id = parseInt($("#networkVlanID").val());
-    }
-    return network;
-};
-
-kimchi.cleanNetworkDialog = function() {
-    $("input:text", "#networkConfig").val(null).removeClass("invalid-field");
-    $("#networkTypeIso").prop("checked", false);
-    $("#networkTypeNat").prop("checked", false);
-    $("#networkTypeBri").prop("checked", false);
-    $("#networkDestinationLabel").text($("#networkDestinationID li:first-child").text());
-    $("#networkFormOk").off("click");
-    $("#networkFormOk").button("disable");
-    $("#networkFormOk span").text(i18n.KCHAPI6005M);
-    $("#networkName").removeAttr("readonly");
-    $("#networkVlanID").toggle(false);
-    $("#labelNetworkVlanID").toggle(false);
-    $("#enableVlan").prop("checked", false);
-
-};
-kimchi.setupNetworkFormEvent = function() {
-    $("#networkName").on("keyup", function(event) {
-        $("#networkName").toggleClass("invalid-field", !$("#networkName").val().match(/^[^\"\/]+$/));
-        kimchi.updateNetworkFormButton();
-    });
-    $("#networkTypeIso").on("click", function(event) {
-        kimchi.enableBridgeOptions(false);
-    });
-    $("#networkTypeNat").on("click", function(event) {
-        kimchi.enableBridgeOptions(false);
-    });
-    $("#networkTypeBri").on("click", function(event) {
-        kimchi.enableBridgeOptions(true);
-    });
-};
-
-kimchi.updateNetworkFormButton = function() {
-    if($("#networkName").hasClass("invalid-field")){
-        $("#networkFormOk").button("disable");
-    }else{
-        $("#networkFormOk").button("enable");
-    }
-};
-
-kimchi.initNetworkCleanup = function() {
-    $("#network-content").on("remove", function() {
-        $("#networkConfig").dialog("destroy");
+        wok.window.open('plugins/kimchi/network-add.html');
     });
 };
diff --git a/src/wok/plugins/kimchi/ui/js/src/kimchi.network_add_main.js b/src/wok/plugins/kimchi/ui/js/src/kimchi.network_add_main.js
new file mode 100644
index 0000000..5a7133e
--- /dev/null
+++ b/src/wok/plugins/kimchi/ui/js/src/kimchi.network_add_main.js
@@ -0,0 +1,166 @@
+/*
+ * Project Kimchi
+ *
+ * Copyright IBM, Corp. 2013-2015
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+ kimchi.network_add_main = function() {
+    kimchi.setupNetworkFormEvent();
+    kimchi.openNetworkDialog();
+};
+
+kimchi.startNetworkCreation = function() {
+    var errorCallback = function(){
+        $("#networkFormOk").button("enable");
+        $("#networkName").removeAttr("readonly");
+        $("#networkVlanID").removeAttr("readonly");
+        $("#networkFormOk").text(i18n.KCHAPI6005M);
+    };
+    var network = kimchi.getNetworkDialogValues();
+    var data = {
+        name : network.name,
+        connection: network.type
+    };
+    if (network.type === kimchi.NETWORK_TYPE_BRIDGE) {
+        data.connection = "bridge";
+        data.interface = network.interface;
+        if ($("#enableVlan").prop("checked")) {
+            data.vlan_id = network.vlan_id;
+            if (!(data.vlan_id >=1 && data.vlan_id <= 4094)) {
+                wok.message.error.code('KCHNET6001E');
+                errorCallback();
+                return;
+            }
+        }
+    }
+    kimchi.createNetwork(data, function(result) {
+        network.state = result.state === "active" ? "up" : "down";
+        network.interface = result.interface ? result.interface : i18n["KCHNET6001M"];
+        network.addrSpace = result.subnet ? result.subnet : i18n["KCHNET6001M"];
+        network.persistent = result.persistent;
+        $('#networkGrid').dataGrid('addRow', kimchi.addNetworkItem(network));
+        wok.window.close();
+    }, function(data) {
+        wok.message.error(data.responseJSON.reason,'#alert-modal-container');
+        errorCallback();
+    });
+};
+
+kimchi.openNetworkDialog = function(okCallback) {
+        kimchi.getInterfaces(function(result) {
+        var options = [];
+        $selectDestination = $('#networkDestinationID');
+        var nics = {};
+        var selectDestinationOptionHTML = '';
+        for (var i = 0; i < result.length; i++) {
+            options.push({label:result[i].name,value:result[i].name});
+            nics[result[i].name] = result[i];
+            selectDestinationOptionHTML += '<option value="'+ result[i].name + '">' + result[i].name + '</option>';
+        }
+        $selectDestination.append(selectDestinationOptionHTML);
+        $selectDestination.selectpicker();
+        onChange = function() {
+            if (result.length>0 && $selectDestination.val() !== "") {
+                $("#enableVlan").prop("disabled",false);
+                $("#networkVlanID").val("");
+            } else {
+                $("#enableVlan").prop("disabled",true);
+            }
+        };
+        $("#networkDestinationID").on("change", onChange);
+        kimchi.setDefaultNetworkType(result.length!==0);
+        onChange();
+    });
+    $("#networkFormOk").on("click", function() {
+        $("#networkFormOk").button("disable");
+        $("#networkName").prop("readonly", "readonly");
+        $("#networkVlanID").prop("readonly", "readonly");
+        $("#networkFormOk").text(i18n.KCHAPI6008M);
+        kimchi.startNetworkCreation();
+    });
+    $("#enableVlan").on("click", function() {
+        $("#networkVlanID").prop("disabled", !this.checked);
+        if (!this.checked) {
+            $("#networkVlanID").val("");
+        }
+    });
+};
+
+kimchi.enableBridgeOptions = function(enable) {
+    $("#enableVlan").prop("checked", false);
+    $("#networkVlanID").val("");
+    if (enable) {
+        $('#bridgedContent').slideDown(300);
+        $('#enableVlan').prop("disabled", false);
+        $('#networkVlanID').prop("disabled", true);
+    } else {
+        $('#bridgedContent').slideUp(300);
+        $('#enableVlan').prop("disabled", true);
+        $('#networkVlanID').prop("disabled", true);
+    }
+};
+
+
+kimchi.setDefaultNetworkType = function(isInterfaceAvail) {
+    $("#networkType").val('bridged', isInterfaceAvail);
+    $("#networkType option:contains('bridged')").prop("disabled", !isInterfaceAvail);
+    $("#networkType").val('nat', !isInterfaceAvail);
+    $("#networkType").selectpicker();
+    if (!isInterfaceAvail) {
+        kimchi.enableBridgeOptions(false);
+        $("#networkBriDisabledLabel").removeClass('hidden');
+    } else {
+        if (kimchi.capabilities && kimchi.capabilities.nm_running) {
+            wok.message.warn(i18n['KCHNET6001W'],'#alert-modal-container');
+        }
+        $("#networkBriDisabledLabel").remove();
+    }
+};
+
+kimchi.getNetworkDialogValues = function() {
+    var network = {
+        name : $("#networkName").val(),
+        type : $("#networkType").val()
+    };
+    if (network.type === kimchi.NETWORK_TYPE_BRIDGE) {
+        network.interface = $("#networkDestinationLabel").text();
+        network.vlan_id = parseInt($("#networkVlanID").val());
+    }
+    return network;
+};
+
+kimchi.setupNetworkFormEvent = function() {
+    $('#bridgedContent').hide();
+    $("#networkName").on("keyup", function(event) {
+        $("#networkName").toggleClass("invalid-field", !$("#networkName").val().match(/^[^\"\/]+$/));
+        kimchi.updateNetworkFormButton();
+    });
+    $('#networkType').on('change', function() {
+        var selectedType = $(this).val();
+        if(selectedType ==  'isolated' ||  selectedType ==  'nat') {
+            kimchi.enableBridgeOptions(false);
+        } else if (selectedType ==  'bridged') {
+            kimchi.enableBridgeOptions(true);
+        }
+    }); 
+};
+
+kimchi.updateNetworkFormButton = function() {
+    if($("#networkName").hasClass("invalid-field")){
+        $("#networkFormOk").button("disable");
+    }else{
+        $("#networkFormOk").button("enable");
+    }
+};
\ No newline at end of file
diff --git a/src/wok/plugins/kimchi/ui/pages/network-add.html.tmpl b/src/wok/plugins/kimchi/ui/pages/network-add.html.tmpl
new file mode 100644
index 0000000..5a04d04
--- /dev/null
+++ b/src/wok/plugins/kimchi/ui/pages/network-add.html.tmpl
@@ -0,0 +1,70 @@
+#*
+ * Project Kimchi
+ *
+ * Copyright IBM, Corp. 2014-2015
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *#
+#unicode UTF-8
+#import gettext
+#from wok.cachebust import href
+#silent t = gettext.translation($lang.domain, $lang.localedir, languages=$lang.lang, fallback=True)
+#silent _ = t.gettext
+#silent _t = t.gettext
+<div id="add-network-window" class="window modal-content">
+    <div class="modal-header">
+        <h4 class="modal-title" id="networkModalLabel">$_("Create a network")</h4>
+    </div>
+    <div id="networkConfig" class="modal-body">
+        <span id="alert-modal-container"></span>
+        <div class="form-group">
+            <label for="networkName">$_("Network Name")</label>
+            <input type="text" class="form-control" id="networkName" />
+            <p class="help-block">
+                <i class="fa fa-info-circle"></i> $_("Name should not contain '/' and '\"'.")</p>
+        </div>
+        <div class="form-group">
+            <label for="networkType">$_("Network Type")</label>
+            <select id="networkType" class="selectpicker col-md-12 col-lg-12">
+                <option value="isolated">$_("Isolated: no external network connection")</option>
+                <option value="nat">$_("NAT: outbound physical network connection only")</option>
+                <option value="bridged">$_("Bridged: Virtual machines are connected to physical network directly")</option>
+            </select>
+        </div>
+        <div id="networkBriDisabledLabel" class="form-group hidden">
+            <p>$_("(No interfaces found)")</p>
+        </div>
+        <div id="bridgedContent">
+            <div class="form-group">
+                <label for="networkDestinationID">$_("Destination"): </label>
+                <select id="networkDestinationID"  class="selectpicker col-md-12 col-lg-12">
+                </select>
+            </div>
+            <div class="form-group">
+                <input id="enableVlan" class="wok-checkbox" type="checkbox" value="" />
+                <label for="enableVlan" id="labelEnableVlan">$_("Enable VLAN") </label>
+                <div id="vlan-enabled">
+                    <label for="networkVlanID" id="labelNetworkVlanID">$_("VLAN ID"): </label>
+                    <input type="text" id="networkVlanID" class="form-control" />
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="modal-footer">
+        <button type="submit" id="networkFormOk" class="btn btn-default">$_("Create")</button>
+        <button type="button" id="networkFormCancel" data-dismiss="modal" class="btn btn-default">$_("Cancel")</button>
+    </div>
+</div>
+<script type="text/javascript">
+kimchi.network_add_main();
+</script>
diff --git a/src/wok/plugins/kimchi/ui/pages/network.html.tmpl b/src/wok/plugins/kimchi/ui/pages/network.html.tmpl
index 915feac..722fc11 100644
--- a/src/wok/plugins/kimchi/ui/pages/network.html.tmpl
+++ b/src/wok/plugins/kimchi/ui/pages/network.html.tmpl
@@ -29,102 +29,74 @@
 <script src="plugins/kimchi/js/kimchi.min.js"></script>
 </head>
 <body>
-<div class="toolbar">
-    <div class="tools" style="display:none">
-        <a id="networkAdd" class="btn-tool" href="javascript:void(0);"><span class="icon add">+</span></a>
-    </div>
-</div>
-<div id="network-content" class="network">
-    <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>
-    <div id="networkConfig" class="network-config">
-        <div class="section-container">
-            <div class="section-header">1. $_("Network Name")</div>
-            <div class="section-content">
-                <input type="text" id="networkName" />
-                <div class="input-hint">
-                    <span class="icon-info-circled light-grey c1 help-inline"></span>
-                    <span class="input-hint-text help-inline">$_("Name should not contain '/' and '\"'.")</span>
-                </div>
+<div id="network-root-container">
+    <nav class="navbar navbar-default toolbar">
+        <div class="container">
+            <!-- Brand and toggle get grouped for better mobile display -->
+            <div class="navbar-header">
+              <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#toolbar" aria-expanded="false">
+                <span class="sr-only">Toggle navigation</span>
+                <span class="icon-bar"></span>
+                <span class="icon-bar"></span>
+                <span class="icon-bar"></span>
+              </button>
+            </div>        
+            <!-- Collect the nav links, forms, and other content for toggling -->
+            <div class="collapse navbar-collapse" id="toolbar">
+                <ul class="nav navbar-nav navbar-right tools" display="none">
+                    <li><a id="networkAdd" class="btn-tool" href="javascript:void(0);"><i class="fa fa-plus-circle"></i><span>Add a Network</span></a></li>
+                </ul>
             </div>
         </div>
-        <div class="section-container">
-            <div class="section-header">2. $_("Network Type")</div>
-            <div class="section-content">
-                <div class="input-container">
-                    <input type="radio" id="networkTypeIso" name="networkType" value="isolated" />
-                    <label for="networkTypeIso">$_("Isolated: no external network connection")</label>
+    </nav>
+    <div id="network-content-container">
+        <div class="container">
+            <div class="row grid-control">
+                <div class="pull-right">
+                    <label for="network-filter" class="sr-only">$_("Filter"):</label>
+                    <input type="text" class="filter form-control" placeholder="$_("Filter")">
                 </div>
-                <div class="input-container">
-                    <input type="radio" id="networkTypeNat" name="networkType" value="nat" />
-                    <label for="networkTypeNat">$_("NAT: outbound physical network connection only")</label>
-                </div>
-                <div class="input-container">
-                    <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><br />
-                        <label id="networkBriDisabledLabel" style="display:none">$_("(No interfaces found)")</label>
-                    </div>
-                </div>
-                <div id="bridgeOptions">
-                    <div>
-                        <div class="bridge-option-column">
-                            <label for="networkInterface">$_("Destination"): </label>
-                        </div>
-                        <div class="bridge-option-column">
-                            <div class="network-type-wrapper-controls">
-                                <div id ="networkDestinationID">
-                                    <input id="networkDestinationInputId" name="type" type="hidden"/>
-                                    <span id="networkDestinationLabel" type="text"></span><span class="arrow"></span>
-                                    <div>
-                                        <ul id="networkInterface"></ul>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                    <div>
-                        <input id="enableVlan" type="checkbox" value="" />
-                        <label for="enableVlan" id="labelEnableVlan">$_("Enable VLAN") </label>
-                    </div>
-                        <label for="networkVlanID" id="labelNetworkVlanID">$_("VLAN ID"): </label>
-                        <input type="text" id="networkVlanID" class="network-label"/>
-                    </div>
+            </div>
+            <div id="alert-container"></div>
+            <div id="networkGrid">
+                <div>
+                    <span class="column-state"><span class="sr-only">$_("State")</span></span><!--
+                    --><span class="column-name">$_("Network Name")</span><!--
+                    --><span class="column-type">$_("Network Type")</span><!--
+                    --><span class="column-interface">$_("Interface")</span><!--
+                    --><span class="column-space">$_("Address Space")</span><!--
+                    --><span class="column-action" style="display:none">
+                            <span class="sr-only">$_("Actions")</span><!--
+                    --></span>
                 </div>
+                <div id="networkBody" class="empty-when-logged-off"></div>
+            </div>
+
             </div>
         </div>
-    </div>
 </div>
+<div id="modalWindow" class="modal fade network-modal" tabindex="-1" role="dialog" aria-labelledby="networkModalLabel" aria-hidden="true"> </div>
 <script id="networkItem" type="text/html">
-    <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")
-            <ul class='popover actionsheet right-side menu-container'>
-                <li nwAct="start" class='{startClass}'><a class='button-big'>$_("Start")</a></li>
-                <li nwAct="stop" class='{stopClass}'><a {stopDisabled} class='button-big'>$_("Stop")</a></li>
-                <li nwAct="delete" class='{deleteClass}'><a {deleteDisabled} class='red'>$_("Delete")</a></li>
-            </ul>
-        </span>
-    </span>
-    </div>
+    <div id='{name}' class='wok-nw-grid-body remove-when-logged-off '>
+        <span class='column-state' val="{state}"><span class='network-state {state}'><i class="fa fa-power-off"></i><span class="wok-nw-loading-icon"></span></span></span><!--
+                    --><span class='column-name' title="{name}" val="{name}">{name}</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="pull-right">
+                                    <div class="dropdown menu-flat">
+                                        <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false"><span class="edit-alt"></span>$_("Actions")<span class="caret"></span>
+                                        </button>
+                                        <ul class="dropdown-menu" role="menu">
+                                            <li role="presentation" nwAct="start" class='{startClass}'><a><i class="fa fa-undo"></i>$_("Start")</a></li>
+                                            <li role="presentation" nwAct="stop" class='{stopClass}'><a {stopDisabled}><i class="fa fa-ban"></i>$_("Stop")</a></li>
+                                            <li role="presentation" nwAct="delete" class='critical {deleteClass}'><a {deleteDisabled}><i class="fa fa-minus-circle"></i>$_("Delete")</a></li>
+                                        </ul>
+                                    </div>
+                                </span>
+                        </span>
+            </div>
 </script>
 <script>
     kimchi.initNetwork();
diff --git a/ui/css/src/modules/_network.scss b/ui/css/src/modules/_network.scss
new file mode 100644
index 0000000..0305e22
--- /dev/null
+++ b/ui/css/src/modules/_network.scss
@@ -0,0 +1,122 @@
+//
+// Project Wok
+//
+// Copyright IBM, Corp. 2015
+//
+// Code derived from Project Kimchi
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+//
+
+.network-config input.invalid-field[type="text"] {
+    border-color: #FF4444;
+}
+
+.network-config input.invalid-field[type="text"][disabled] {
+    border-color: #666666;
+}
+
+
+#add-network-window {
+
+    #vlan-enabled {
+        padding-left: 26px;
+
+        label, input[type="text"] {
+            display: block;
+        }
+
+    }
+
+}
+
+#network-root-container {
+
+    .wok-nw-loading-icon {
+        background: transparent url('#{$wok-icon-path}/spin5.svg') no-repeat 50% 50%; 
+        @include animation(spin 3s infinite linear);
+        height: 16px;
+        width: 16px;
+        background-size: 100%;
+        display: block;
+        position: relative;
+        top: 12px;
+        left: 50%;
+        margin-left: -8px;
+    }
+        
+    .up .wok-nw-loading-icon,
+    .down .wok-nw-loading-icon {
+      display: none;
+    }
+
+    .wok-datagrid-body {
+        span > .fa {
+            font-size: 22px;
+            width: 20px;
+            height: 20px;
+            position: relative;
+            top: 10px;
+        }
+
+        .up .fa {
+          color: #a8d46f;
+        }
+
+        .loading > .fa,
+        .down .fa {
+          display: none;
+        }        
+    }
+
+    .wok-datagrid > .wok-datagrid-header,
+    .wok-datagrid > .wok-datagrid-body > .wok-datagrid-row {
+
+        > span.column-state {
+            width: 2.92207%;
+            text-align: center;
+        }
+
+        > span.column-name {
+            width: 19.2207%;
+        }
+
+        > span.column-type {
+            width: 10.3896%;
+        }
+
+        > span.column-interface {
+            width: 10.3896%;
+        }
+
+        > span.column-space {
+            width: 31.169%;
+        }
+
+        > span.column-action {
+            width: 25.909%;
+            text-align: right;
+        }
+
+    } 
+
+    .wok-datagrid > .wok-datagrid-body > .wok-datagrid-row > span {
+
+      &.column-state {
+        height: 53px;
+        vertical-align: middle;        
+      }
+
+    }   
+
+}
-- 
1.9.3

    

[Kimchi-devel] [PATCH 08/10] [new-ui] Network tab

sguimaraes943＠gmail.com