From: Rajat Gupta <rajgupta(a)linux.vnet.ibm.com&gt; Introducing s390x UI Interfaces module for Edit Guest under virtualization Signed-off-by: Rajat Gupta <rajgupta(a)linux.vnet.ibm.com&gt; --- ui/css/kimchi.css | 26 +++- ui/css/src/modules/_edit-guests.scss | 23 ++- ui/js/src/kimchi.guest_edit_main.js | 282 ++++++++++++++++++++++++++++++++--- ui/pages/guest-edit.html.tmpl | 40 +++++ 4 files changed, 341 insertions(+), 30 deletions(-) diff --git a/ui/css/kimchi.css b/ui/css/kimchi.css index 6cf2cc9..9299c38 100644 --- a/ui/css/kimchi.css +++ b/ui/css/kimchi.css @@ -1028,7 +1028,7 @@ body.wok-gallery { } #guest-edit-window #form-guest-edit-interface .column-actions { - width: 23%; + width: 20%; } #guest-edit-window #form-guest-edit-storage .column-actions { @@ -1088,19 +1088,25 @@ body.wok-gallery { #guest-edit-window form .header .cell.column-type, #guest-edit-window form .task .cell.column-type, #guest-edit-window form .body .cell.column-type { - width: 11.35%; + width: 18%; +} + +#guest-edit-window form .header .cell.column-mode, +#guest-edit-window form .task .cell.column-mode, +#guest-edit-window form .body .cell.column-mode { + width: 16%; } #guest-edit-window form .header .cell.column-mac, #guest-edit-window form .task .cell.column-mac, #guest-edit-window form .body .cell.column-mac { - width: 14.5%; + width: 14%; } #guest-edit-window form .header .cell.column-ip, #guest-edit-window form .task .cell.column-ip, #guest-edit-window form .body .cell.column-ip { - width: 31%; + width: 12%; } #guest-edit-window form .header .cell.column-sel, @@ -1239,6 +1245,18 @@ body.wok-gallery { width: 180px; } +#guest-edit-window form .header .cell.column-mode .bootstrap-select:not([class*=col-]):not([class*=form-control]):not(.input-group-btn), +#guest-edit-window form .task .cell.column-mode .bootstrap-select:not([class*=col-]):not([class*=form-control]):not(.input-group-btn), +#guest-edit-window form .body .cell.column-mode .bootstrap-select:not([class*=col-]):not([class*=form-control]):not(.input-group-btn) { + width: 160px; +} + +#guest-edit-window form .header .cell.column-type .bootstrap-select:not([class*=col-]):not([class*=form-control]):not(.input-group-btn), +#guest-edit-window form .task .cell.column-type .bootstrap-select:not([class*=col-]):not([class*=form-control]):not(.input-group-btn), +#guest-edit-window form .body .cell.column-type .bootstrap-select:not([class*=col-]):not([class*=form-control]):not(.input-group-btn) { + width: 180px; +} + .guest-edit-snapshot .hide, .guest-edit-interface .hide { display: none !important; diff --git a/ui/css/src/modules/_edit-guests.scss b/ui/css/src/modules/_edit-guests.scss index b7e6941..632d634 100644 --- a/ui/css/src/modules/_edit-guests.scss +++ b/ui/css/src/modules/_edit-guests.scss @@ -48,7 +48,7 @@ } #form-guest-edit-interface { .column-actions { - width: 23%; + width: 20%; } } #form-guest-edit-storage { @@ -94,13 +94,16 @@ } } .cell.column-type { - width: 11.35%; + width: 18%; + } + .cell.column-mode { + width: 16%; } .cell.column-mac { - width: 14.5%; + width: 14%; } .cell.column-ip { - width: 31%; + width: 12%; } .cell.column-sel { width: 1.77%; @@ -204,6 +207,18 @@ width: 180px; } +#guest-edit-window form .header .cell.column-mode .bootstrap-select:not([class*=col-]):not([class*=form-control]):not(.input-group-btn), +#guest-edit-window form .task .cell.column-mode .bootstrap-select:not([class*=col-]):not([class*=form-control]):not(.input-group-btn), +#guest-edit-window form .body .cell.column-mode .bootstrap-select:not([class*=col-]):not([class*=form-control]):not(.input-group-btn) { + width: 160px; +} + +#guest-edit-window form .header .cell.column-type .bootstrap-select:not([class*=col-]):not([class*=form-control]):not(.input-group-btn), +#guest-edit-window form .task .cell.column-type .bootstrap-select:not([class*=col-]):not([class*=form-control]):not(.input-group-btn), +#guest-edit-window form .body .cell.column-type .bootstrap-select:not([class*=col-]):not([class*=form-control]):not(.input-group-btn) { + width: 180px; +} + .guest-edit-snapshot .hide, .guest-edit-interface .hide { display: none !important; diff --git a/ui/js/src/kimchi.guest_edit_main.js b/ui/js/src/kimchi.guest_edit_main.js index dcaafb8..cc899ff 100644 --- a/ui/js/src/kimchi.guest_edit_main.js +++ b/ui/js/src/kimchi.guest_edit_main.js @@ -20,6 +20,11 @@ kimchi.guest_edit_main = function() { var formTargetId; var guestEditForm = $('#form-guest-edit-general'); var saveButton = $('#guest-edit-button-save'); + var s390xArch = 's390x'; + var macvtapNetworks = ""; + var ovsNetworks = ""; + var networkOptions = ""; + clearTimeout(kimchi.vmTimeout); $('#modalWindow').on('hidden.bs.modal', function() { @@ -176,14 +181,28 @@ kimchi.guest_edit_main = function() { }); }); var toggleEdit = function(item, on, itemId) { + if(kimchi.hostarch === s390xArch){ + $("#label-mac-" + itemId, item).toggleClass("hide", on); + $("#edit-mac-" + itemId, item).toggleClass("hide", !on); + $("#label-network-" + itemId, item).toggleClass("hide", false); + $("#label-type-" + itemId, item).toggleClass("hide", false); + $("#label-mode-" + itemId, item).toggleClass("hide", false); + $("select", item).toggleClass("hide", true); + $(".bootstrap-select", item).toggleClass("hide", true); + $(".action-area", item).toggleClass("hide"); + + }else { + $("#label-mac-" + itemId, item).toggleClass("hide", on); $("#edit-mac-" + itemId, item).toggleClass("hide", !on); $("#label-network-" + itemId, item).toggleClass("hide", false); $("select", item).toggleClass("hide", true); $(".bootstrap-select", item).toggleClass("hide", true); $(".action-area", item).toggleClass("hide"); + } }; var addItem = function(data) { + var oriID = data.id; if (data.id === -1) { data.id = $('#form-guest-edit-interface > .body').children().size(); } @@ -192,13 +211,28 @@ kimchi.guest_edit_main = function() { } else { data.ips = data.ips; } - var itemNode = $.parseHTML(wok.substitute($('#interface-tmpl').html(), data)); - $(".body", "#form-guest-edit-interface").append(itemNode); - $("select", itemNode).append(networkOptions); - $("select", itemNode).selectpicker(); - if (data.network !== "") { - $("select", itemNode).val(data.network); + if (kimchi.hostarch === s390xArch) { + data.mode = (data.mode) ? data.mode : 'None'; + var itemNode = $.parseHTML(wok.substitute($('#interface-s390x-tmpl').html(), data)); + $(".body", "#form-guest-edit-interface").append(itemNode); + + $("select", "span.column-type", itemNode).empty().append(typeOptions); + $("select", "span.column-mode", itemNode).empty().append(modeOptions); + $("select", "span.column-network", itemNode).empty().append(macvtapNetworks); + + $("select", "span.column-type", itemNode).val(data.type); + $("select", "span.column-network", itemNode).val(data.source); + $("select", "span.column-mode", itemNode).val(data.mode); + + } else { + var itemNode = $.parseHTML(wok.substitute($('#interface-tmpl').html(), data)); + $(".body", "#form-guest-edit-interface").append(itemNode); + $("select", "span.column-network", itemNode).append(networkOptions); } + + $("select", itemNode).selectpicker(); + + $('.edit', itemNode).attr('disabled', kimchi.thisVMState === "running"); $(".edit", itemNode).on('click', function(evt) { evt.preventDefault(); @@ -214,22 +248,122 @@ kimchi.guest_edit_main = function() { $(".save", itemNode).on('click', function(evt) { evt.preventDefault(); var item = $(this).parent().parent(); - var interface = { - network: $("select", item).val(), - type: "network", - mac: $(":text", item).val(), - ips: $(".ipText", item).val() - }; + + if (kimchi.hostarch === s390xArch) { + if (item.prop("id") === "") { //adding new interface + switch ($("span.column-type select", item).val()) { + case 'macvtap': + var interface = { + source: $("span.column-network select", item).val(), + type: $("span.column-type select", item).val(), + mac: $(":text", item).val(), + ips: $(".ipText", item).val(), + mode: $("span.column-mode select", item).val() + }; + break; + + case 'ovs': + var interface = { + source: $("span.column-network select", item).val(), + type: $("span.column-type select", item).val(), + mac: $(":text", item).val(), + ips: $(".ipText", item).val() + }; + break; + + case 'network': + var interface = { + network: $("span.column-network select", item).val(), + type: "network", + mac: $(":text", item).val(), + ips: $(".ipText", item).val() + }; + break; + } + } else { //updating existing interface + + switch ($("#label-type-" + data.id, item).text()) { + case 'macvtap': + + var interface = { + source: $("#label-network-" + data.id, item).text(), + type: $("#label-type-" + data.id, item).text(), + mac: $(":text", item).val(), + ips: $(".ipText", item).val(), + mode: $("#label-mode-" + data.id, item).text() + }; + break; + + case 'ovs': + var interface = { + source: $("#label-network-" + data.id, item).text(), + type: $("#label-type-" + data.id, item).text(), + mac: $(":text", item).val(), + ips: $(".ipText", item).val() + }; + break; + + case 'network': + var interface = { + network: $("#label-network-" + data.id, item).text(), + type: "network", + mac: $(":text", item).val(), + ips: $(".ipText", item).val() + }; + break; + } + + } + } else { //in s86 arch + var interface = { + network: $("select", item).val(), + type: "network", + mac: $(":text", item).val(), + ips: $(".ipText", item).val() + }; + } + var postUpdate = function(mac) { $("#label-network-" + data.id, item).text(interface.network); $("#label-mac-" + data.id, item).text(mac); $("#edit-mac-" + data.id, item).val(mac); toggleEdit(item, false, data.id); }; + + var posts390xUpdate = function(result) { + switch(result.type){ + case 'macvtap' : + $("#label-type-" + data.id, item).text(result.type); + $("#label-network-" + data.id, item).text(result.source); + $("#label-mode-" + data.id, item).text(result.mode); + break; + + case 'ovs' : + $("#label-type-" + data.id, item).text(result.type); + $("#label-network-" + data.id, item).text(result.source); + $("#label-mode-" + data.id, item).text('None'); + break; + + case 'network' : + $("#label-type-" + data.id, item).text(result.type); + $("#label-network-" + data.id, item).text(result.network); + $("#label-mode-" + data.id, item).text('None'); + break; + } + + $("#label-mac-" + data.id, item).text(result.mac); + $("#edit-mac-" + data.id, item).val(result.mac); + toggleEdit(item, false, data.id); + }; + if (item.prop("id") === "") { kimchi.createGuestInterface(kimchi.selectedGuest, interface, function(data) { item.prop("id", data.mac); - postUpdate(data.mac); + if(kimchi.hostarch == s390xArch){ + posts390xUpdate(data); + }else{ + postUpdate(data.mac); + } }); } else { if (item.prop('id') === interface.mac) { @@ -249,22 +383,126 @@ kimchi.guest_edit_main = function() { var item = $(this).parent().parent(); $("label", item).text() === "" ? item.remove() : toggleEdit(item, false, data.id); }); + + if (kimchi.hostarch === s390xArch) { + $("#interface-s390x-type-" + data.id).on('change', function() { + var itemNode = $(this).closest('div.item'); + switch ($(this).val()) { + case 'macvtap': + $('#label-mode-' + data.id).addClass('hide'); + $('span.column-mode .bootstrap-select', itemNode).toggleClass("hide", false); + + $("span.column-network select", itemNode).empty().append(macvtapNetworks); + $("span.column-network select", itemNode).selectpicker('refresh'); + + break; + case 'ovs': + $('#label-mode-' + data.id).html('None'); + $('#label-mode-' + data.id).removeClass('hide'); + $('span.column-mode .bootstrap-select', itemNode).toggleClass("hide", true); + + $("span.column-network select", itemNode).empty().append(ovsNetworks); + $("span.column-network select", itemNode).selectpicker('refresh'); + break; + case 'network': + $('#label-mode-' + data.id).html('None'); + $('#label-mode-' + data.id).removeClass('hide'); + $('span.column-mode .bootstrap-select', itemNode).toggleClass("hide", true); + + $("span.column-network select", itemNode).empty().append(networkOptions); + $("span.column-network select", itemNode).selectpicker('refresh'); + break; + } + }); + if (oriID === -1) { + $("#interface-s390x-type-" + data.id).trigger('change'); + } + } + }; - var networkOptions = ""; + + kimchi.listNetworks(function(data) { for (var i = 0; i < data.length; i++) { var isSlected = i === 0 ? " selected" : ""; networkOptions += "<option" + isSlected + ">" + data[i].name + "</option>"; } - kimchi.getGuestInterfaces(kimchi.selectedGuest, function(data) { - for (var i = 0; i < data.length; i++) { - data[i].viewMode = ""; - data[i].editMode = "hide"; - data[i].id = i; - addItem(data[i]); - } - }); + + if (kimchi.hostarch === s390xArch) { + + kimchi.listmacvtapNetworks(function(data) { + for (var i = 0; i < data.length; i++) { + var isSlected = i === 0 ? ' selected="selected"' : ""; + macvtapNetworks += "<option" + isSlected + ">" + data[i].name + "</option>"; + } + + kimchi.listovsNetworks(function(data) { + for (var i = 0; i < data.length; i++) { + var isSlected = i === 0 ? " selected" : ""; + ovsNetworks += "<option" + isSlected + ">" + data[i] + "</option>"; + } + + kimchi.getGuestInterfaces(kimchi.selectedGuest, function(data) { + for (var i = 0; i < data.length; i++) { + data[i].viewMode = ""; + data[i].editMode = "hide"; + data[i].id = i; + addItem(data[i]); + } + }); + }); + }); + } else { + kimchi.getGuestInterfaces(kimchi.selectedGuest, function(data) { + for (var i = 0; i < data.length; i++) { + data[i].viewMode = ""; + data[i].editMode = "hide"; + data[i].id = i; + if (data[i].type == 'network') + addItem(data[i]); + } + }); + } }); + + if (kimchi.hostarch === s390xArch) { + $('#form-guest-edit-interface > div.header').hide(); + $('#form-guest-edit-interface > div.s390x').show(); + + var typeOptionsdata = [{ + label: "macvtap", + value: "macvtap" + }, { + label: "ovs", + value: "ovs" + }, { + label: "network", + value: "network" + }]; + var typeOptions = ''; + + for (var i = 0; i < typeOptionsdata.length; i++) { + var isSlected = i === 0 ? ' selected="selected"' : ""; + typeOptions += '<option' + isSlected + ' value="' + typeOptionsdata[i].value + '">' + typeOptionsdata[i].label + '</option>'; + } + + var modeOptionsdata = [{ + label: "Bridge", + value: "bridge" + }, { + label: "Vepa", + value: "vepa" + }]; + var modeOptions = ''; + + for (var i = 0; i < modeOptionsdata.length; i++) { + var isSlected = i === 0 ? " selected" : ""; + modeOptions += '<option' + isSlected + ' value="' + modeOptionsdata[i].value + '">' + modeOptionsdata[i].label + '</option>'; + } + } else { + $('#form-guest-edit-interface > div.header').show(); + $('#form-guest-edit-interface > div.s390x').hide(); + } }; var setupPermission = function() { diff --git a/ui/pages/guest-edit.html.tmpl b/ui/pages/guest-edit.html.tmpl index a9a468e..3a575dc 100644 --- a/ui/pages/guest-edit.html.tmpl +++ b/ui/pages/guest-edit.html.tmpl @@ -92,6 +92,14 @@ <span class="cell column-ip">$_("IP Address")</span> <span class="cell column-actions"><span class="sr-only">$_("Actions")</span></span> </div> + <div class="header s390x" style="display:none"> + <span class="cell column-type">$_("Type")</span> + <span class="cell column-network">$_("Network/Interface")</span> + <span class="cell column-mode">$_("Mode")</span> + <span class="cell column-mac">$_("MAC Address")</span> + <span class="cell column-ip">$_("IP Address")</span> + <span class="cell column-actions"><span class="sr-only">$_("Actions")</span></span> + </div> <div class="body"></div> </form> <form role="tabpanel" class="guest-edit-permission tab-pane" id="form-guest-edit-permission"> @@ -246,6 +254,38 @@ </span> <div> </script> +<script id="interface-s390x-tmpl" type="text/html"> + <div class="item" id="{mac}"> + <span class="cell column-type"> + <span id="label-type-{id}" class="{viewMode}">{type}</span> + <select id="interface-s390x-type-{id}" class="{editMode}"></select> + </span> + <span class="cell column-network"> + <span id="label-network-{id}" class="{viewMode}">{network}{source}</span> + <select id="interface-s390x-network-{id}" class="{editMode}"></select> + </span> + <span class="cell column-mode"> + <span id="label-mode-{id}" class="{viewMode}">{mode}</span> + <select id="interface-s390x-mode-{id}" class="{editMode}"></select> + </span> + <span class="cell column-mac"> + <span id="label-mac-{id}" class="{viewMode}">{mac}</span> + <input class="form-control {editMode}" type="text" + id="edit-mac-{id}" class="form-control" name="{mac}" value="{mac}" /> + </span> + <span class="cell column-ip"> + <span class=ipText>{ips}</span> + </span> + <span class="cell {editMode} column-actions action-area"> + <button class="btn btn-primary save">$_("Save")</button> + <button class="btn btn-primary cancel">$_("Remove")</button> + </span> + <span class="cell {viewMode} column-actions action-area"> + <button class="btn btn-link edit"><i class="fa fa-pencil"></i> $_("Edit")</button> + <button class="btn btn-link delete"><i class="fa fa-minus-circle"></i> $_("Remove")</button> + </span> + <div> +</script> <script id="ldap-user-tmpl" type="text/html"> <div class="item" id="{user}"> <span class="cell"> -- 2.1.0