[Kimchi-devel] [PATCH 08/10] [new-ui] Network tab
sguimaraes943 at gmail.com
sguimaraes943 at gmail.com
Tue Nov 10 21:17:37 UTC 2015
From: samhenri <samuel.guimaraes at eldorado.org.br>
Signed-off-by: samhenri <samuel.guimaraes at 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
More information about the Kimchi-devel
mailing list