From: Andre Teodoro <andreteodoro.work(a)gmail.com&gt; Signed-off-by: Andre Teodoro <andreteodoro.work(a)gmail.com&gt; Signed-off-by: samhenri <samuel.guimaraes(a)eldorado.org.br&gt; --- ui/css/src/host-admin.scss | 52 ++++- ui/js/host-admin.js | 467 +++++++++++++++++++++++------------------- ui/pages/host-admin.html.tmpl | 343 +++++++++++++++++++------------ 3 files changed, 511 insertions(+), 351 deletions(-) diff --git a/ui/css/src/host-admin.scss b/ui/css/src/host-admin.scss index 599a360..f718917 100644 --- a/ui/css/src/host-admin.scss +++ b/ui/css/src/host-admin.scss @@ -29,9 +29,43 @@ } .ginger .host-admin h3 { - font-weight: bold; - font-size: 14px; + height: 32px; + padding: 10px 15px; + font-size: 20px; border-radius: 2px 2px 0 0; + display: inline-block; +} + +.ginger .host-admin h3 > a > span.accordion-icon { + display: inline-block; + font: normal normal normal 14px/1 FontAwesome; + text-rendering: auto; + -webkit-font-smoothing: antialiased; + font-size: 20px; + color: #5a595b; +} + +.ginger .host-admin h3 > a > span.accordion-text { + margin-left: 20px; +} + +.ginger .host-admin h3 > a[aria-expanded="true"] > span.accordion-icon:before { + content: "\f01b"; +} + +.ginger .host-admin h3 > a[aria-expanded="false"] > span.accordion-icon:before { + content: "\f01a"; +} + +.ginger .host-admin a { + color: #9e9e9e; + text-decoration: none; +} + +.ginger .host-admin hr { + width: 93%; + border: 1.8px solid #eaeaea; + margin-top: 30px !important; } .ginger .host-admin .content-area { @@ -60,8 +94,8 @@ .ginger .host-admin .content-area .section .pack-path-input { width: 400px; - height:30px; - border: 1px solid gray; + height: 30px; + border: 1px solid grey; } .ginger .host-admin .message-area { @@ -109,7 +143,7 @@ vertical-align: top; } -.ginger .host-admin button{ +.ginger .host-admin button { font-weight: bold; height: 35px; width: 80px; @@ -327,7 +361,7 @@ .ginger .host-admin .nw-config .interface .grid-head { margin-bottom: 10px; - color:#888888; + color: #888888; border-bottom: solid 1px #BBBBBB; } @@ -497,13 +531,11 @@ } .ginger .host-admin .subsc-manage .status-header .up { - background: linear-gradient(to bottom, #BFD255 0%, #8EB92A 50%, - #72AA00 51%, #9ECB2D 100%) repeat scroll 0 0 transparent; + background: linear-gradient(to bottom, #BFD255 0%, #8EB92A 50%, #72AA00 51%, #9ECB2D 100%) repeat scroll 0 0 transparent; } .ginger .host-admin .subsc-manage .status-header .down { - background: linear-gradient(to bottom, #AFAFAF 0%, #AFAFAF 50%, - #AFAFAF 51%, #AFAFAF 100%) repeat scroll 0 0 transparent; + background: linear-gradient(to bottom, #AFAFAF 0%, #AFAFAF 50%, #AFAFAF 51%, #AFAFAF 100%) repeat scroll 0 0 transparent; } #subscriptionAdd .subsc-colume { diff --git a/ui/js/host-admin.js b/ui/js/host-admin.js index 821c2a5..93a4169 100644 --- a/ui/js/host-admin.js +++ b/ui/js/host-admin.js @@ -18,42 +18,46 @@ ginger.initBakDialog = function() { $("#newBakDialog").dialog({ - autoOpen : false, - modal : true, - width : 800, + autoOpen: false, + modal: true, + width: 800, height: 600, - draggable : false, - resizable : false, + draggable: false, + resizable: false, closeText: "X", - open : function(){ + open: function() { $(".ui-dialog-titlebar-close", $("#newBakDialog").parent()).removeAttr("title"); - var setBtnState = function(){ - var isValid = $(".invalid-field", "#newBakDialog").length===0; + var setBtnState = function() { + var isValid = $(".invalid-field", "#newBakDialog").length === 0; $("#newBakFormBtn").button(isValid ? "enable" : "disable"); }; - var attachEvent = function(pathItem){ + var attachEvent = function(pathItem) { $(".add", pathItem).button({ - icons: { primary: "ui-icon-plusthick" }, + icons: { + primary: "ui-icon-plusthick" + }, text: false - }).click(function(){ + }).click(function() { var pathNode = $.parseHTML($("#pathItem").html()); $(this).parent().after(pathNode); attachEvent($(pathNode)); }); $(".delete", pathItem).button({ - icons: { primary: "ui-icon-minusthick" }, + icons: { + primary: "ui-icon-minusthick" + }, text: false - }).click(function(){ - if(pathItem.parent().children().length===1){ + }).click(function() { + if (pathItem.parent().children().length === 1) { $("input", pathItem).prop("value", null); $("input", pathItem).removeClass("invalid-field"); - }else{ + } else { pathItem.remove(); } setBtnState(); }); - $("input", pathItem).on("keyup", function(){ - $(this).toggleClass("invalid-field", !(/(^\/.*)$/.test($(this).val())||$(this).val().trim()==="")); + $("input", pathItem).on("keyup", function() { + $(this).toggleClass("invalid-field", !(/(^\/.*)$/.test($(this).val()) || $(this).val().trim() === "")); setBtnState(); }); }; @@ -64,7 +68,7 @@ ginger.initBakDialog = function() { $("#excludeBox").append(tempNode); attachEvent($(tempNode)); }, - beforeClose: function(){ + beforeClose: function() { $("body").css('cursor', 'default'); $(".desc", "#newBakDialog").prop("value", null); $("#includeBox").empty(); @@ -74,26 +78,26 @@ ginger.initBakDialog = function() { $("body input").css("cursor", "text"); $("body button").css("cursor", "pointer"); }, - buttons : [{ + buttons: [{ id: "newBakFormBtn", text: "OK", - click: function(){ + click: function() { var content = { description: $(".desc", "#newBakDialog").val().trim(), include: [], exclude: [] }; - $("input:text","#includeBox").each(function(){ - if($(this).val().trim()!=="") + $("input:text", "#includeBox").each(function() { + if ($(this).val().trim() !== "") content.include.push($(this).val().trim()) }); - $("input:text","#excludeBox").each(function(){ - if($(this).val().trim()!=="") + $("input:text", "#excludeBox").each(function() { + if ($(this).val().trim() !== "") content.exclude.push($(this).val().trim()) }); - if(content.description=="") delete content.description; - if(content.include.length==0) delete content.include; - if(content.exclude.length==0) delete content.exclude; + if (content.description == "") delete content.description; + if (content.include.length == 0) delete content.include; + if (content.exclude.length == 0) delete content.exclude; // Disable Ok button and changing cursor // while processing. $("body").css("cursor", "wait"); @@ -101,7 +105,7 @@ ginger.initBakDialog = function() { $("body button").prop("disabled", "disabled"); $("body input").css("cursor", "wait"); $("body button").css("cursor", "wait"); - ginger.createBackupArchive(content, function(){ + ginger.createBackupArchive(content, function() { $("#newBakDialog").dialog("close"); $("#bakGridBody").empty(); ginger.setupBakGrid(); @@ -120,16 +124,16 @@ ginger.initBakDialog = function() { ginger.initBatDelDialog = function() { $("#batDelDialog").dialog({ - autoOpen : false, - modal : true, - width : 600, - draggable : false, - resizable : false, + autoOpen: false, + modal: true, + width: 600, + draggable: false, + resizable: false, closeText: "X", - open: function(){ + open: function() { $(".ui-dialog-titlebar-close", $("#batDelDialog").parent()).removeAttr("title"); }, - beforeClose: function(){ + beforeClose: function() { $("input:text", "#batDelDialog").prop("value", null); $("input:text", "#batDelDialog").prop("disabled", true); $("input:text", "#batDelDialog").removeClass("invalid-field"); @@ -137,16 +141,19 @@ ginger.initBatDelDialog = function() { $("input:radio[name=batDelType]:first").prop("checked", true); $("#batDelFormBtn").button("disable"); }, - buttons : [{ + buttons: [{ id: "batDelFormBtn", text: "OK", disabled: true, - click: function(){ - var content = {counts_ago: -1, days_ago: -1}; + click: function() { + var content = { + counts_ago: -1, + days_ago: -1 + }; var delOption = $("input:radio[name=batDelType]:checked"); var delValue = $("input:text", delOption.parent()).prop("value"); content[delOption.val()] = parseInt(delValue); - ginger.deleteBackupArchives(content, function(){ + ginger.deleteBackupArchives(content, function() { $("#batDelDialog").dialog("close"); $("#bakGridBody").empty(); ginger.setupBakGrid(); @@ -155,33 +162,33 @@ ginger.initBatDelDialog = function() { }] }); - var validateInput = function(input){ + var validateInput = function(input) { var isValid = new RegExp('^[0-9]*$').test(input.val()); input.toggleClass("invalid-field", !isValid); - $("#batDelFormBtn").button(isValid && input.val().trim()!=="" ? "enable" : "disable"); + $("#batDelFormBtn").button(isValid && input.val().trim() !== "" ? "enable" : "disable"); }; - $("input:radio[name=batDelType]").on("click", function(){ + $("input:radio[name=batDelType]").on("click", function() { $("input:text", "#batDelDialog").prop("disabled", true); var activeInput = $("input:text", $("input:radio[name=batDelType]:checked").parent()); activeInput.prop("disabled", false); validateInput(activeInput); }); - $("input:text", "#batDelDialog").on("keyup", function(){ + $("input:text", "#batDelDialog").on("keyup", function() { validateInput($(this)); }); }; ginger.setupBakGrid = function() { - ginger.listBackupArchives(function(data){ - for(var i=0;i<data.length;i++){ - data[i].timestamp = new Date(data[i].timestamp*1000).toLocaleString(); + ginger.listBackupArchives(function(data) { + for (var i = 0; i < data.length; i++) { + data[i].timestamp = new Date(data[i].timestamp * 1000).toLocaleString(); var tempNode = $.parseHTML(wok.substitute($("#backupItem").html(), data[i])); $("#bakGridBody").append(tempNode); var parts = ["include", "exclude"]; - for(var x=0;x<parts.length;x++){ + for (var x = 0; x < parts.length; x++) { var path = ""; - for(var y=0;y<data[i][parts[x]].length;y++){ - path += "<div class='path-item'>"+data[i][parts[x]][y]+"</div>" + for (var y = 0; y < data[i][parts[x]].length; y++) { + path += "<div class='path-item'>" + data[i][parts[x]][y] + "</div>" } data[i][parts[x]] = path; } @@ -192,101 +199,123 @@ ginger.setupBakGrid = function() { items: $(tempNode), content: tooltipContent, tooltipClass: "ginger-dialog", - position: { my: "left top-3", at: "left+30 bottom", collision: "flipfit" }, + position: { + my: "left top-3", + at: "left+30 bottom", + collision: "flipfit" + }, hide: 100 }); $(".download", $(tempNode)).button({ - icons: { primary: "ui-icon ui-icon-arrowthickstop-1-s" }, + icons: { + primary: "ui-icon ui-icon-arrowthickstop-1-s" + }, text: false - }).click(function(){ + }).click(function() { var bakItem = $(this).parent(); - window.open('plugins/ginger/backup/archives/'+encodeURIComponent(bakItem.prop("id"))+'/file'); + window.open('plugins/ginger/backup/archives/' + encodeURIComponent(bakItem.prop("id")) + '/file'); }); $(".delete", $(tempNode)).button({ - icons: { primary: "ui-icon ui-icon-close" }, + icons: { + primary: "ui-icon ui-icon-close" + }, text: false - }).click(function(){ + }).click(function() { var bakItem = $(this).parent(); - ginger.deleteBackupArchive(bakItem.prop("id"), function(){ bakItem.remove(); }); + ginger.deleteBackupArchive(bakItem.prop("id"), function() { + bakItem.remove(); + }); }); } }); }; ginger.initConfigBak = function() { - $("#newDefaultBakBtn").button().click(function(){ginger.createBackupArchive({}, function(){ - $("#bakGridBody").empty(); - ginger.setupBakGrid(); - })}); - $("#newCustomBakBtn").button().click(function(){$("#newBakDialog").dialog("open");}); - $("#batDelBtn").button().click(function(){$("#batDelDialog").dialog("open");}); + $("#newDefaultBakBtn").button().click(function() { + ginger.createBackupArchive({}, function() { + $("#bakGridBody").empty(); + ginger.setupBakGrid(); + }) + }); + $("#newCustomBakBtn").button().click(function() { + $("#newBakDialog").dialog("open"); + }); + $("#batDelBtn").button().click(function() { + $("#batDelDialog").dialog("open"); + }); ginger.setupBakGrid(); ginger.initBakDialog(); ginger.initBatDelDialog(); }; ginger.initNetworkConfig = function() { - var toggleBtnEdit = function(item, on){ + var toggleBtnEdit = function(item, on) { $("button", item).toggleClass("hide"); $(".cancel", item).toggleClass("hide", !on); }; - var attachBtnEvt = function(node, editFunc, saveFunc, cancelFunc){ - $("input", node).each(function(){ - $(this).on("keyup", function(){ + var attachBtnEvt = function(node, editFunc, saveFunc, cancelFunc) { + $("input", node).each(function() { + $(this).on("keyup", function() { var isValid = ginger.validateIp($(this).val()); - if($(this).parent().hasClass("mask")){ + if ($(this).parent().hasClass("mask")) { isValid = isValid && ginger.validateMask($(this).val()); } - isValid = isValid || $(this).val().trim()==""; + isValid = isValid || $(this).val().trim() == ""; $(this).toggleClass("invalid-field", !isValid); $(".save", node).prop("disabled", !isValid); }); }); $(".edit", node).button({ - icons: { primary: "ui-icon-pencil" }, + icons: { + primary: "ui-icon-pencil" + }, text: false }).click(editFunc); $(".save", node).button({ - icons: { primary: "ui-icon-disk" }, + icons: { + primary: "ui-icon-disk" + }, text: false }).click(saveFunc); $(".cancel", node).button({ - icons: { primary: "ui-icon-arrowreturnthick-1-w" }, + icons: { + primary: "ui-icon-arrowreturnthick-1-w" + }, text: false }).click(cancelFunc); }; - ginger.getInterfaces(function(data){ - var toggleInterfaceEdit = function(item, on){ + ginger.getInterfaces(function(data) { + var toggleInterfaceEdit = function(item, on) { $("label", item).toggleClass("hide", on); $("input", item).toggleClass("hide", !on) toggleBtnEdit(item, on); }; - for(var i=0;i<data.length;i++){ - var isEdit = data[i].ipaddr=="" || data[i].netmask==""; + for (var i = 0; i < data.length; i++) { + var isEdit = data[i].ipaddr == "" || data[i].netmask == ""; data[i].viewMode = isEdit ? "hide" : ""; data[i].editMode = isEdit ? "" : "hide"; var tempNode = $.parseHTML(wok.substitute($("#nicItem").html(), data[i])); $("#gingerInterface").append(tempNode); - attachBtnEvt(tempNode, function(){ + attachBtnEvt(tempNode, function() { var item = $(this).parent().parent(); toggleInterfaceEdit(item, true); - }, function(){ + }, function() { var item = $(this).parent().parent(); var name = $("span", item).first().html(); var ip = $(".ip", item); var mask = $(".mask", item); var interface = { ipaddr: $("input", ip).val(), - netmask: $("input", mask).val() + netmask: $("input", mask).val() }; - ginger.updateInterface(name, interface, function(){ - ginger.confirmInterfaceUpdate(name, function(){ + ginger.updateInterface(name, interface, function() { + ginger.confirmInterfaceUpdate(name, function() { $("label", ip).text(interface.ipaddr); $("label", mask).text(interface.netmask); toggleInterfaceEdit(item, false); }); }); - }, function(){ + }, function() { var item = $(this).parent().parent(); $("input", item).removeClass("invalid-field"); $("button", item).prop("disabled", false); @@ -298,93 +327,97 @@ ginger.initNetworkConfig = function() { }); } }); - ginger.getNetworkGlobals(function(data){ - var toggleNWGlobalsEdit = function(item, on){ + ginger.getNetworkGlobals(function(data) { + var toggleNWGlobalsEdit = function(item, on) { $("input", item).prop("disabled", !on); toggleBtnEdit(item, on); }; - var attachNWGlobalBtnEvt = function(node, saveFunc){ - attachBtnEvt(node, function(){ + var attachNWGlobalBtnEvt = function(node, saveFunc) { + attachBtnEvt(node, function() { toggleNWGlobalsEdit($(this).parent(), true); - }, function(){ + }, function() { saveFunc(); - }, function(){ + }, function() { toggleNWGlobalsEdit($(this).parent(), false); }); }; - if(!data.nameservers || data.nameservers.length==0){ + if (!data.nameservers || data.nameservers.length == 0) { data.nameservers = [""]; } - var addGlobalItem = function(container, itemValue, saveFunc){ + var addGlobalItem = function(container, itemValue, saveFunc) { var ip = itemValue; var tempNode = $.parseHTML(wok.substitute($("#nwGlobalItem").html(), { ip: ip, - viewMode: ip=="" ? "hide" : "", - editMode: ip=="" ? "": "hide" + viewMode: ip == "" ? "hide" : "", + editMode: ip == "" ? "" : "hide" })); - $("input", tempNode).prop("disabled", ip!=""); - $("#"+container).append(tempNode); + $("input", tempNode).prop("disabled", ip != ""); + $("#" + container).append(tempNode); $("input", tempNode).prop("oriVal", ip); - attachBtnEvt(tempNode, function(){ + attachBtnEvt(tempNode, function() { toggleNWGlobalsEdit($(this).parent(), true); - }, function(){ - saveFunc($(this).parent(), function(item){ + }, function() { + saveFunc($(this).parent(), function(item) { var input = $("input", item); - if(input.val()=="" && $(".sec-content", "#"+container).length!=1){ + if (input.val() == "" && $(".sec-content", "#" + container).length != 1) { item.remove(); - }else{ + } else { input.prop("oriVal", input.val()); toggleNWGlobalsEdit(item, false); } }); - }, function(){ + }, function() { var input = $("input", $(this).parent()); input.removeClass("invalid-field"); $("button", $(this).parent()).prop("disabled", false); input.val(input.prop("oriVal")); - if(input.prop("oriVal")==""){ + if (input.prop("oriVal") == "") { $(this).parent().remove(); - }else{ + } else { toggleNWGlobalsEdit($(this).parent(), false); } }); return tempNode; }; - var addDnsItem = function(dnsVal){ - return addGlobalItem("gingerDNS", dnsVal, function(item, postSave){ - if(!($("input", item).val().trim()==""&&$("input", item).prop("oriVal").trim()=="")){ - var nwGol = {nameservers:[]}; - $("input", item.parent()).each(function(){ - if($(this).val().trim()!=""){ + var addDnsItem = function(dnsVal) { + return addGlobalItem("gingerDNS", dnsVal, function(item, postSave) { + if (!($("input", item).val().trim() == "" && $("input", item).prop("oriVal").trim() == "")) { + var nwGol = { + nameservers: [] + }; + $("input", item.parent()).each(function() { + if ($(this).val().trim() != "") { nwGol.nameservers.push($(this).val()); } }); - if(nwGol.nameservers.length==0){ + if (nwGol.nameservers.length == 0) { delete nwGol.nameservers; } - ginger.updateNetworkGlobals(nwGol, function(){ + ginger.updateNetworkGlobals(nwGol, function() { postSave(item); }); } }); }; $("#gingerDnsAdd").button({ - icons: { primary: "ui-icon-plusthick" }, + icons: { + primary: "ui-icon-plusthick" + }, text: false - }).click(function(){ + }).click(function() { var item = addDnsItem(""); $(".cancel", item).removeClass("hide"); }); - for(var i=0;i<data.nameservers.length;i++){ + for (var i = 0; i < data.nameservers.length; i++) { addDnsItem(data.nameservers[i]); } - addGlobalItem("gingerGateway", data.gateway ? data.gateway : "", function(item, postSave){ + addGlobalItem("gingerGateway", data.gateway ? data.gateway : "", function(item, postSave) { var gateway = $("input", item.parent()).val(); - if(gateway.trim()!=""){ + if (gateway.trim() != "") { ginger.updateNetworkGlobals({ gateway: gateway - }, function(){ - ginger.confirmNetworkUpdate(function(){ + }, function() { + ginger.confirmNetworkUpdate(function() { postSave(item); }); }); @@ -393,17 +426,19 @@ ginger.initNetworkConfig = function() { }); }; -ginger.initPowerMgmt = function(){ +ginger.initPowerMgmt = function() { var selectedClass = "ui-icon-check"; var toSelectClass = "ui-icon-radio-off"; var onSelectClass = "ui-icon-radio-on"; - $(".actBtn", "#gingerPowerMgmt").button({disabled: true}).click(function(){ - var currentSelected = $('.'+selectedClass, $(".body", "#gingerPowerMgmt")); - var toBeSelected = $('.'+onSelectClass, $(".body", "#gingerPowerMgmt")); + $(".actBtn", "#gingerPowerMgmt").button({ + disabled: true + }).click(function() { + var currentSelected = $('.' + selectedClass, $(".body", "#gingerPowerMgmt")); + var toBeSelected = $('.' + onSelectClass, $(".body", "#gingerPowerMgmt")); var optName = $(":last-child", toBeSelected.parent()).html(); $("#progressIndicator", ".ginger .host-admin").addClass("progress-icon"); $(".actBtn", "#gingerPowerMgmt").button("option", "disabled", true); - ginger.activatePowerProfile(optName, function(){ + ginger.activatePowerProfile(optName, function() { currentSelected.removeClass(selectedClass).addClass(toSelectClass); currentSelected.next().addClass("to-select"); toBeSelected.removeClass(onSelectClass).addClass(selectedClass); @@ -412,20 +447,20 @@ ginger.initPowerMgmt = function(){ $("#progressIndicator", ".ginger .host-admin").removeClass("progress-icon"); }); }); - ginger.getPowerProfiles(function(data){ - for(var i=0;i<data.length;i++){ + ginger.getPowerProfiles(function(data) { + for (var i = 0; i < data.length; i++) { data[i].selected = data[i].active ? selectedClass : toSelectClass; data[i].toSelect = data[i].active ? "" : "to-select"; var tempNode = $.parseHTML(wok.substitute($("#pwMgmtItem").html(), data[i])); $(".body", "#gingerPowerMgmt").append(tempNode); - $(tempNode).on("click", function(){ - $(".item :first-child", $(this).parent()).each(function(){ - if($(this).hasClass(onSelectClass)){ + $(tempNode).on("click", function() { + $(".item :first-child", $(this).parent()).each(function() { + if ($(this).hasClass(onSelectClass)) { $(this).removeClass(onSelectClass).addClass(toSelectClass); } }); var iconNode = $(":first-child", $(this)); - if(iconNode.hasClass(toSelectClass)){ + if (iconNode.hasClass(toSelectClass)) { iconNode.removeClass(toSelectClass).addClass(onSelectClass); $(".actBtn", "#gingerPowerMgmt").button("option", "disabled", false); } @@ -434,17 +469,31 @@ ginger.initPowerMgmt = function(){ }); }; -ginger.initSANAdapter = function(){ - ginger.getSANAdapters(function(data){ +ginger.initSANAdapter = function() { + ginger.getSANAdapters(function(data) { var temStr = "<div class='item'>{value}</div>"; - for(var i=0; i<data.length; i++){ - $(".body", $(".name", ".san-adapter")).append(wok.substitute(temStr, {value: data[i].name})); - $(".body", $(".wwpn", ".san-adapter")).append(wok.substitute(temStr, {value: data[i].wwpn})); - $(".body", $(".wwnn", ".san-adapter")).append(wok.substitute(temStr, {value: data[i].wwnn})); - $(".body", $(".state", ".san-adapter")).append(wok.substitute(temStr, {value: data[i].state})); - $(".body", $(".port", ".san-adapter")).append(wok.substitute(temStr, {value: data[i].vports_inuse+"/"+data[i].max_vports})); - $(".body", $(".speed", ".san-adapter")).append(wok.substitute(temStr, {value: data[i].speed})); - $(".body", $(".symbolic", ".san-adapter")).append(wok.substitute(temStr, {value: data[i].symbolic_name})); + for (var i = 0; i < data.length; i++) { + $(".body", $(".name", ".san-adapter")).append(wok.substitute(temStr, { + value: data[i].name + })); + $(".body", $(".wwpn", ".san-adapter")).append(wok.substitute(temStr, { + value: data[i].wwpn + })); + $(".body", $(".wwnn", ".san-adapter")).append(wok.substitute(temStr, { + value: data[i].wwnn + })); + $(".body", $(".state", ".san-adapter")).append(wok.substitute(temStr, { + value: data[i].state + })); + $(".body", $(".port", ".san-adapter")).append(wok.substitute(temStr, { + value: data[i].vports_inuse + "/" + data[i].max_vports + })); + $(".body", $(".speed", ".san-adapter")).append(wok.substitute(temStr, { + value: data[i].speed + })); + $(".body", $(".symbolic", ".san-adapter")).append(wok.substitute(temStr, { + value: data[i].symbolic_name + })); } }); }; @@ -452,26 +501,26 @@ ginger.initSANAdapter = function(){ ginger.listSensors = function() { $(".progress-icon-sensor").show(); ginger.getSensors(function(result) { - if($(".ginger .host-admin .sensor-inline").length > 0) { + if ($(".ginger .host-admin .sensor-inline").length > 0) { $(".ginger .host-admin .sensor-inline").remove(); } $(".progress-icon-sensor").hide(); $.each(result, function(i1, d1) { - if(d1 && d1 != null && i1 != "hdds") { + if (d1 && d1 != null && i1 != "hdds") { $.each(d1, function(i2, d2) { var pathNode = $.parseHTML(wok.substitute($("#sensorBody").html(), { - labelHead : i2 + labelHead: i2 })); $(".sensor-panel").append(pathNode); - if(d2 && d2 != null) { + if (d2 && d2 != null) { $.each(d2, function(i3, d3) { - if(i3 && d3 != null && i3 != "unit") { + if (i3 && d3 != null && i3 != "unit") { $.each(d3, function(i4, d4) { - if(i4.match("input")) { + if (i4.match("input")) { var pathNodeU = $.parseHTML(wok.substitute($("#sensorUnit").html(), { - labelBody : i3, - labelNumber : d4, - labelUnit : d2["unit"] + labelBody: i3, + labelNumber: d4, + labelUnit: d2["unit"] })); $("#" + i2).append(pathNodeU); } @@ -481,24 +530,24 @@ ginger.listSensors = function() { } }); } else { - if(d1 != null) { + if (d1 != null) { var pathNode = $.parseHTML(wok.substitute($("#sensorBody").html(), { - labelHead : i1 + labelHead: i1 })); $(".sensor-panel").append(pathNode); $.each(d1, function(i5, d5) { - if(i5 != "unit") { + if (i5 != "unit") { var pathNodeU = $.parseHTML(wok.substitute($("#sensorUnit").html(), { - labelBody : i5, - labelNumber : d5, - labelUnit : d1["unit"] + labelBody: i5, + labelNumber: d5, + labelUnit: d1["unit"] })); - $("#" + i1).append(pathNodeU); + $("#" + i1).append(pathNodeU); } }); } } - $(".progress-icon-sensor").hide(); + $(".progress-icon-sensor").hide(); }); setTimeout(ginger.listSensors, 5000); }); @@ -511,11 +560,11 @@ ginger.initSensorsMonitor = function() { ginger.initSEPConfig = function() { var sepStatus = function() { ginger.getSEPStatus(function(result) { - if(result.status === "running") { + if (result.status === "running") { $("#sepStatusLog").removeClass("down"); $("#sepStatusLog").addClass("up"); - $("#sepStart").button().attr("style","display:none"); - $("#sepStop").button().attr("style","display"); + $("#sepStart").button().attr("style", "display:none"); + $("#sepStop").button().attr("style", "display"); } else { $("#sepStatusLog").removeClass("up"); $("#sepStatusLog").addClass("down"); @@ -528,11 +577,11 @@ ginger.initSEPConfig = function() { sepStatus(); $(".content-body", ".ginger .host-admin .subsc-manage").empty(); ginger.getSEPSubscriptions(function(result) { - for (var i=0; i<result.length; i++) { + for (var i = 0; i < result.length; i++) { var subscItem = $.parseHTML(wok.substitute($("#subscItem").html(), { - hostname : result[i]["hostname"], - port : result[i]["port"], - community : result[i]["community"] + hostname: result[i]["hostname"], + port: result[i]["port"], + community: result[i]["community"] })); $(".ginger .host-admin .subsc-manage .content-body").append(subscItem); } @@ -580,20 +629,20 @@ ginger.initSEPConfig = function() { $("#subsc-cancel").button("option", "disabled", false); }; $("#subscriptionAdd").dialog({ - modal : true, - width : 350, - draggable : false, - resizable : false, + modal: true, + width: 350, + draggable: false, + resizable: false, closeText: "X", - open : function() { + open: function() { $(".subsc-add-content .inputbox").keyup(function() { var sum = 0; $(".subsc-add-content .inputbox").each(function(index, data) { - if($(data).val() === "") { + if ($(data).val() === "") { sum += 1; } }) - if(sum != 0) { + if (sum != 0) { $("#subsc-submit").button("option", "disabled", true); } else { $("#subsc-submit").button("option", "disabled", false); @@ -608,9 +657,9 @@ ginger.initSEPConfig = function() { var port = parseInt($(".subsc-add-content .subsc-input[name='port']", ".subsc-add-body").val()); var community = $(".subsc-add-content .subsc-input[name='community']", ".subsc-add-body").val(); var dataSubmit = { - hostname : hostname, - port : port, - community : community, + hostname: hostname, + port: port, + community: community, }; ginger.addSEPSubscription(dataSubmit, function() { $("#subscriptionAdd").dialog("close"); @@ -624,7 +673,7 @@ ginger.initSEPConfig = function() { $("#subscriptionAdd").dialog("close"); }); }, - beforeClose : function() { + beforeClose: function() { clearSubscriptionSubmit(true); $("#subsc-submit").unbind("click"); } @@ -643,11 +692,11 @@ ginger.initUserManagement = function() { var listUsers = function() { $(".content-body", ".ginger .host-admin .user-manage").empty(); ginger.getUsers(function(result) { - for (var i=0; i<result.length; i++) { + for (var i = 0; i < result.length; i++) { var nodeNameItem = $.parseHTML(wok.substitute($("#userItem").html(), { - userName : result[i]["name"], - userGroup : result[i]["group"], - userProfile : result[i]["profile"] + userName: result[i]["name"], + userGroup: result[i]["group"], + userProfile: result[i]["profile"] })); $(".ginger .host-admin .user-manage .content-body").append(nodeNameItem); } @@ -681,20 +730,20 @@ ginger.initUserManagement = function() { $("#user-cancel").button("option", "disabled", false); }; $("#hostUserAdd").dialog({ - modal : true, - width : "auto", - height : 300, - draggable : false, - resizable : false, + modal: true, + width: "auto", + height: 300, + draggable: false, + resizable: false, closeText: "X", - open : function() { + open: function() { $("#kimchiuser").prop("checked", true); $(".user-input[name='userName']", ".user-add-content").keyup(function() { var tmpVal = $(this).val(); $(".user-input[name='userGroup']", ".user-add-content").val(tmpVal); }); $("#enableEditGroup").click(function() { - if($(this).prop("checked")) { + if ($(this).prop("checked")) { $(".user-input[name='userGroup']", ".user-add-content").attr("disabled", false); } else { $(".user-input[name='userGroup']", ".user-add-content").attr("disabled", true); @@ -703,11 +752,11 @@ ginger.initUserManagement = function() { $(".user-add-content .inputbox").keyup(function() { var sum = 0; $(".user-add-content .inputbox").each(function(index, data) { - if($(data).val() === "") { + if ($(data).val() === "") { sum += 1; } }) - if(sum != 0) { + if (sum != 0) { $("#user-submit").button("option", "disabled", true); } else { $("#user-submit").button("option", "disabled", false); @@ -724,10 +773,10 @@ ginger.initUserManagement = function() { var userGroup = $(".user-add-content .user-input[name='userGroup']", ".user-add-body").val(); var userProfile = $(".user-add-content .user-input>[type='radio']:checked", ".user-add-body").val(); var dataSubmit = { - name : userName, - password : userPasswd, - group : userGroup, - profile : userProfile + name: userName, + password: userPasswd, + group: userGroup, + profile: userProfile }; if (userPasswd === userConfirmPasswd) { ginger.addUser(dataSubmit, function() { @@ -738,10 +787,10 @@ ginger.initUserManagement = function() { }); } else { wok.confirm({ - title : i18n['KCHAPI6006M'], - content : i18n['GINUM0002E'], - confirm : i18n['KCHAPI6002M'], - cancel : i18n['KCHAPI6003M'] + title: i18n['KCHAPI6006M'], + content: i18n['GINUM0002E'], + confirm: i18n['KCHAPI6002M'], + cancel: i18n['KCHAPI6003M'] }, function() { clearUMSubmit(); }, function() { @@ -753,7 +802,7 @@ ginger.initUserManagement = function() { $("#hostUserAdd").dialog("close"); }); }, - beforeClose : function() { + beforeClose: function() { clearUMSubmit(); $("#user-submit").unbind("click"); } @@ -763,23 +812,27 @@ ginger.initUserManagement = function() { }; ginger.initFirmware = function() { - ginger.getFirmware(function(data){ + ginger.getFirmware(function(data) { $("#gingerFWVer").html(data.level); }); $("#gingerPackPath").on("keyup", function(evt) { var packPath = $("#gingerPackPath").prop("value"); var isValid = /(^\/.*)$/.test(packPath); - $("#gingerPackPath").toggleClass("invalid-field", !isValid && packPath!==""); + $("#gingerPackPath").toggleClass("invalid-field", !isValid && packPath !== ""); $("#gingerPackPathSub").button(isValid ? "enable" : "disable"); }); - $("#gingerPackPathSub").button({disabled: true}).click(function(){ + $("#gingerPackPathSub").button({ + disabled: true + }).click(function() { wok.confirm({ - title : i18n['KCHAPI6006M'], - content : "The system will be immediately reset to flash the firmware. It may take longer than normal for it to reboot.", - confirm : i18n['KCHAPI6002M'], - cancel : i18n['KCHAPI6003M'] + title: i18n['KCHAPI6006M'], + content: "The system will be immediately reset to flash the firmware. It may take longer than normal for it to reboot.", + confirm: i18n['KCHAPI6002M'], + cancel: i18n['KCHAPI6003M'] }, function() { - ginger.updateFirmware({ path: $("#gingerPackPath").prop("value") }, function(){ + ginger.updateFirmware({ + path: $("#gingerPackPath").prop("value") + }, function() { $("#gingerFWUpdateMess").css("display", "inline-block"); $("#gingerPackPathSub").button("disable"); $("#gingerPackPath").prop("disabled", true); @@ -788,11 +841,7 @@ ginger.initFirmware = function() { }); }; -ginger.initAdmin = function(){ - $("#gingerHostAdmin").accordion({ - collapsible: true, - active: 1 - }); +ginger.initAdmin = function() { $(".content-area", "#gingerHostAdmin").css("height", "100%"); ginger.getCapabilities(function(result) { @@ -800,7 +849,7 @@ ginger.initAdmin = function(){ var itemLowCase = enableItem.toLowerCase(); if (capability) { $("." + itemLowCase + "-ppc-enabled").show(); - switch(itemLowCase) { + switch (itemLowCase) { case "firmware": ginger.initFirmware(); break; @@ -831,4 +880,4 @@ ginger.initAdmin = function(){ } }); }); -}; +}; \ No newline at end of file diff --git a/ui/pages/host-admin.html.tmpl b/ui/pages/host-admin.html.tmpl index 62db466..f23ad5a 100644 --- a/ui/pages/host-admin.html.tmpl +++ b/ui/pages/host-admin.html.tmpl @@ -23,123 +23,203 @@ Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA #silent _t = t.gettext <html> <head> -<link rel="stylesheet" type="text/css" href="plugins/ginger/css/ginger.css"> -<script type="text/javascript" src="plugins/ginger/js/util.js"></script> -<script type="text/javascript" src="plugins/ginger/js/host-admin.js"></script> + <link rel="stylesheet" type="text/css" href="plugins/ginger/css/ginger.css"> + <script type="text/javascript" src="plugins/ginger/js/util.js"></script> + <script type="text/javascript" src="plugins/ginger/js/host-admin.js"></script> </head> <body> -<div class="ginger"> - -<div id="gingerHostAdmin" class="host-admin"> - <h3 class="firmware-ppc-enabled">$_("Firmware Update")</h3> - <div class="content-area"> - <div id="gingerFWUpdateMess" class="message-area" style="display: none;"> - <span class="progress-icon"></span> - <span>$_("Firmware update is initializing. System will reboot in order to flash the firmware.")</span> - </div> - <div class="section"> - <span>$_("Firmware Version: ")</span> - <span id="gingerFWVer" class="firmware-ver"></span> + <div id="administration-root-container" class="ginger"> + <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> + <div class="collapse navbar-collapse" id="toolbar"> + </div> </div> - <div class="section"> - <div class="pack-path-label">$_("Package Path: ")</div> - <div class="pack-path-content"> - <input type="text" id="gingerPackPath" class="pack-path-input"> - <div class="input-hint"> - <span class="ui-icon ui-icon-info input-hint-icon"></span> - <span class="input-hint-text">$_("The absolute path to the firmware rpm/hpm.")</span> + </nav> + <div class="container"> + <div id="gingerHostAdmin" class="host-admin"> + <!-- Firmware Update Panel --> + <div class="panel-group firmware-ppc-enabled" id="accordion" role="tablist" aria-multiselectable="true"> + <h3> + <a role="button" data-toggle="collapse" data-parent="#accordion" href="#firmware-update-content-area" aria-expanded="false" aria-controls="firmware-update-content-area" class=""> + <span class="accordion-icon"></span><span class="accordion-text">$_("Firmware Update")</span> + </a> + </h3> + <div id="firmware-update-content-area" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne"> + <div id="gingerFWUpdateMess" class="message-area" style="display: none;"> + <span class="progress-icon"></span> + <span>$_("Firmware update is initializing. System will reboot in order to flash the firmware.")</span> </div> + <div class="section"> + <span>$_("Firmware Version: ")</span> + <span id="gingerFWVer" class="firmware-ver"></span> + </div> + <div class="section"> + <div class="pack-path-label">$_("Package Path: ")</div> + <div class="pack-path-content"> + <input type="text" id="gingerPackPath" class="pack-path-input"> + <div class="input-hint"> + <span class="ui-icon ui-icon-info input-hint-icon"></span> + <span class="input-hint-text">$_("The absolute path to the firmware rpm/hpm.")</span> + </div> + </div> + <button id="gingerPackPathSub">$_("Update")</button> + </div> + </div> + <hr> </div> - <button id="gingerPackPathSub">$_("Update")</button> - </div> - </div> - <h3 class="backup-ppc-enabled">$_("Configuration Backup")</h3> - <div class="content-area"> - <div class="action-bar"> - <span id="batDelBtn" class="item">$_("Batch Delete")</span> - <span id="newCustomBakBtn" class="item">$_("New Custom Backup")</span> - <span id="newDefaultBakBtn" class="item">$_("Generate Default Backup")</span> - </div> - <div class="bak-grid-header"> - <div class="cell file-col">$_("File")</div> - <div class="cell time-col">$_("Timestamp")</div> - </div> - <div id="bakGridBody" class="bak-grid-body"></div> - </div> - <h3 class="network-ppc-enabled">$_("Network Configuration")</h3> - <div class="content-area nw-config"> - <div class="pane interface"> - <div class="sec-label"><span>$_("Interface")</span></div> - <div class="sec-content"> - <div class="grid-head"><span class="cell name">$_("Name")</span><span class="cell ip">$_("IP")</span><span class="cell mask">$_("Mask")</span></div> - <div class="grid-body" id="gingerInterface"></div> + <!-- Configuration Backup Panel --> + <div class="panel-group backup-ppc-enabled" id="accordion" role="tablist" aria-multiselectable="true"> + <h3> + <a role="button" data-toggle="collapse" data-parent="#accordion" href="#backup-ppc-content-area" aria-expanded="false" aria-controls="backup-ppc-content-area" class=""> + <span class="accordion-icon"></span><span class="accordion-text">$_("Configuration Backup")</span> + </a> + </h3> + <div id="backup-ppc-content-area" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne"> + <div class="action-bar"> + <span id="batDelBtn" class="item">$_("Batch Delete")</span> + <span id="newCustomBakBtn" class="item">$_("New Custom Backup")</span> + <span id="newDefaultBakBtn" class="item">$_("Generate Default Backup")</span> + </div> + <div class="bak-grid-header"> + <div class="cell file-col">$_("File")</div> + <div class="cell time-col">$_("Timestamp")</div> + </div> + <div id="bakGridBody" class="bak-grid-body"></div> </div> + <hr> </div> - <div class="pane global"> - <div class="vertical-separator"> - <div class="sec-label"><span>$_("DNS")</span><button id="gingerDnsAdd" class="addBtn"></button></div> - <div id="gingerDNS"></div> - </div> - <div> - <div class="sec-label"><span>$_("Gateway")</span></div> - <div id="gingerGateway"></div> + <!-- Network Configuration Panel --> + <div class="panel-group network-ppc-enabled" id="accordion" role="tablist" aria-multiselectable="true"> + <h3> + <a role="button" data-toggle="collapse" data-parent="#accordion" href="#network-ppc-content-area" aria-expanded="false" aria-controls="network-ppc-content-area" class=""> + <span class="accordion-icon"></span><span class="accordion-text">$_("Network Configuration")</span> + </a> + </h3> + <div id="network-ppc-content-area" class="panel-collapse collapse nw-config" role="tabpanel" aria-labelledby="headingOne"> + <div class="pane interface"> + <div class="sec-label"><span>$_("Interface")</span></div> + <div class="sec-content"> + <div class="grid-head"><span class="cell name">$_("Name")</span><span class="cell ip">$_("IP")</span><span class="cell mask">$_("Mask")</span></div> + <div class="grid-body" id="gingerInterface"></div> + </div> + </div> + <div class="pane global"> + <div class="vertical-separator"> + <div class="sec-label"><span>$_("DNS")</span><button id="gingerDnsAdd" class="addBtn"></button></div> + <div id="gingerDNS"></div> + </div> + <div> + <div class="sec-label"><span>$_("Gateway")</span></div> + <div id="gingerGateway"></div> + </div> + </div> </div> + <hr> </div> - </div> - <h3 class="powerprofiles-ppc-enabled">$_("Power Options")</h3> - <div class="content-area" id="gingerPowerMgmt"> - <div class="pw-opt"> - <div class="header"> - <span class="ui-icon ui-icon-check legend"></span><span class="legend separator">$_("Activated Option")</span> - <span class="ui-icon ui-icon-radio-on legend"></span><span class="legend separator">$_("Selected Option")</span> - <span class="ui-icon ui-icon-radio-off legend"></span><span class="legend">$_("Unselected Option")</span> - <span class="actBtn">$_("Activate")</span> - <span id="progressIndicator"></span> + <!-- Power Options Panel --> + <div class="panel-group powerprofiles-ppc-enabled" id="accordion" role="tablist" aria-multiselectable="true"> + <h3> + <a role="button" data-toggle="collapse" data-parent="#accordion" href="#gingerPowerMgmt" aria-expanded="false" aria-controls="gingerPowerMgmt" class=""> + <span class="accordion-icon"></span><span class="accordion-text">$_("Power Options")</span> + </a> + </h3> + <div id="gingerPowerMgmt" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne"> + <div class="pw-opt"> + <div class="header"> + <span class="ui-icon ui-icon-check legend"></span><span class="legend separator">$_("Activated Option")</span> + <span class="ui-icon ui-icon-radio-on legend"></span><span class="legend separator">$_("Selected Option")</span> + <span class="ui-icon ui-icon-radio-off legend"></span><span class="legend">$_("Unselected Option")</span> + <span class="actBtn">$_("Activate")</span> + <span id="progressIndicator"></span> + </div> + <div class="body"></div> + </div> + </div> + <hr> </div> - <div class="body"></div> + <!-- SAN Adapters Panel --> + <div class="panel-group sanadapters-ppc-enabled" id="accordion" role="tablist" aria-multiselectable="true"> + <h3> + <a role="button" data-toggle="collapse" data-parent="#accordion" href="#sanadapters-ppc-content-area" aria-expanded="false" aria-controls="sanadapters-ppc-content-area" class=""> + <span class="accordion-icon"></span><span class="accordion-text">$_("SAN Adapters")</span> + </a> + </h3> + <div id="sanadapters-ppc-content-area" class="panel-collapse collapse san-adapter" role="tabpanel" aria-labelledby="headingOne"> + <div class="cell name"><div class="head">$_("Name")</div><div class="body"></div></div> + <div class="cell wwpn"><div class="head">$_("WWPN")</div><div class="body"></div></div> + <div class="cell wwnn"><div class="head">$_("WWNN")</div><div class="body"></div></div> + <div class="cell state"><div class="head">$_("State")</div><div class="body"></div></div> + <div class="cell port"><div class="head">$_("In-Use/Max Ports")</div><div class="body"></div></div> + <div class="cell speed"><div class="head">$_("Speed")</div><div class="body"></div></div> + <div class="cell symbolic"><div class="head">$_("Symbolic Name")</div><div class="body"></div></div> + </div> + <hr> </div> - </div> - <h3 class="sanadapters-ppc-enabled">$_("SAN Adapters")</h3> - <div class="content-area san-adapter"> - <div class="cell name"><div class="head">$_("Name")</div><div class="body"></div></div> - <div class="cell wwpn"><div class="head">$_("WWPN")</div><div class="body"></div></div> - <div class="cell wwnn"><div class="head">$_("WWNN")</div><div class="body"></div></div> - <div class="cell state"><div class="head">$_("State")</div><div class="body"></div></div> - <div class="cell port"><div class="head">$_("In-Use/Max Ports")</div><div class="body"></div></div> - <div class="cell speed"><div class="head">$_("Speed")</div><div class="body"></div></div> - <div class="cell symbolic"><div class="head">$_("Symbolic Name")</div><div class="body"></div></div> - </div> - <h3 class="sensors-ppc-enabled">$_("Sensor Monitor")</h3> - <div class="content-area sensor-panel"> - <div class="progress-icon-sensor"></div> - </div> - <h3 class="sep-ppc-enabled">$_("SEP Configuration")</h3> - <div class="content-area subsc-manage"> - <div class="status-header"> - <div class="sep-label">$_("Status:")</div> - <div id="sepStatusLog" class="sep-dot-active down"></div> - <div class="sep-field sep-buttons"> - <span id="sepStart" class="actBtn">$_("Start")</span> - <span id="sepStop" class="actBtn" style="display:none">$_("Stop")</span> + <!-- Sensor Monitor Panel --> + <div class="panel-group sensors-ppc-enabled" id="accordion" role="tablist" aria-multiselectable="true"> + <h3> + <a role="button" data-toggle="collapse" data-parent="#accordion" href="#sensors-ppc-content-area" aria-expanded="false" aria-controls="sensors-ppc-content-area" class=""> + <span class="accordion-icon"></span><span class="accordion-text">$_("Sensor Monitor")</span> + </a> + </h3> + <div id="sensors-ppc-content-area" class="panel-collapse collapse sensor-panel" role="tabpanel" aria-labelledby="headingOne"> + <div class="progress-icon-sensor"></div> </div> + <hr> </div> - <div class="content-header"> - <span>$_("Hostname")</span> - <span>$_("Port")</span> - <span>$_("Community")</span> - <button class="add-subscription"></button> + <!-- SEP Configuration Panel --> + <div class="panel-group sep-ppc-enabled" id="accordion" role="tablist" aria-multiselectable="true"> + <h3> + <a role="button" data-toggle="collapse" data-parent="#accordion" href="#sep-ppc-content-area" aria-expanded="false" aria-controls="sep-ppc-content-area" class=""> + <span class="accordion-icon"></span><span class="accordion-text">$_("SEP Configuration")</span> + </a> + </h3> + <div id="sep-ppc-content-area" class="panel-collapse collapse subsc-manage" role="tabpanel" aria-labelledby="headingOne"> + <div class="status-header"> + <div class="sep-label">$_("Status:")</div> + <div id="sepStatusLog" class="sep-dot-active down"></div> + <div class="sep-field sep-buttons"> + <span id="sepStart" class="actBtn">$_("Start")</span> + <span id="sepStop" class="actBtn" style="display:none">$_("Stop")</span> + </div> + </div> + <div class="content-header"> + <span>$_("Hostname")</span> + <span>$_("Port")</span> + <span>$_("Community")</span> + <button class="add-subscription"></button> + </div> + <div class="content-body"></div> + </div> + <hr> </div> - <div class="content-body"></div> - </div> - <h3 class="users-ppc-enabled">$_("User Management")</h3> - <div class="content-area user-manage"> - <div class="content-header"> - <span>$_("Name")</span> - <span>$_("Group")</span> - <span>$_("Profile")</span> - <button class="add-user"></button> + <!-- User Management Panel --> + <div class="panel-group users-ppc-enabled" id="accordion" role="tablist" aria-multiselectable="true"> + <h3> + <a role="button" data-toggle="collapse" data-parent="#accordion" href="#users-ppc-content-area" aria-expanded="false" aria-controls="users-ppc-content-area" class=""> + <span class="accordion-icon"></span><span class="accordion-text">$_("User Management")</span> + </a> + </h3> + <div id="users-ppc-content-area" class="panel-collapse collapse user-manage" role="tabpanel" aria-labelledby="headingOne"> + <div class="content-header"> + <span>$_("Name")</span> + <span>$_("Group")</span> + <span>$_("Profile")</span> + <button class="add-user"></button> + </div> + <div class="content-body"></div> + </div> + <hr> </div> - <div class="content-body"></div> </div> </div> @@ -176,7 +256,6 @@ Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA </div> <div class="subsc-add-content subsc-colume"> <input class="subsc-input inputbox" name="hostname" /><br> - <input class="subsc-input inputbox" name="port" /><br> <input class="subsc-input inputbox" name="community" /><br> </div> <div class="subsc-manage-footer"> @@ -217,18 +296,18 @@ Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA </div> <script id="backupItem" type="text/html"> <div class="bak-grid-item" id="{identity}"> - <div class="cell file-col">{file}</div> - <div class="cell time-col">{timestamp}</div> - <span class="cell act-button download"></span> - <span class="cell act-button delete"></span> +<div class="cell file-col">{file}</div> +<div class="cell time-col">{timestamp}</div> +<span class="cell act-button download"></span> +<span class="cell act-button delete"></span> </div> </script> <script id="backupTooltip" type="text/html"> <div class="header">$_("Description")</div> <div class="sub-content">{description}</div> <div class="crt-bak-section"> - <div class="path-pick"><div class="header">$_("Path Included")</div><div class="sub-content">includePlaceHodler</div></div> - <div class="path-pick"><div class="header">$_("Path Excluded")</div><div class="sub-content">excludePlaceHodler</div></div> +<div class="path-pick"><div class="header">$_("Path Included")</div><div class="sub-content">includePlaceHodler</div></div> +<div class="path-pick"><div class="header">$_("Path Excluded")</div><div class="sub-content">excludePlaceHodler</div></div> </div> </script> <script id="pathItem" type="text/html"> @@ -236,22 +315,22 @@ Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA </script> <script id="nicItem" type="text/html"> <div class="item"> - <span class="cell name">{name}</span><!-- - --><span class="cell ip"><label class="{viewMode}">{ipaddr}</label><input type="text" class="{editMode}" value="{ipaddr}"></span><!-- - --><span class="cell mask"><label class="{viewMode}">{netmask}</label><input type="text" class="{editMode}" value="{netmask}"></span> - <span class="action-area"> - <button class="edit {viewMode}"></button> - <button class="save {editMode}"></button> - <button class="cancel hide"></button> - </span> +<span class="cell name">{name}</span><!-- +--><span class="cell ip"><label class="{viewMode}">{ipaddr}</label><input type="text" class="{editMode}" value="{ipaddr}"></span><!-- +--><span class="cell mask"><label class="{viewMode}">{netmask}</label><input type="text" class="{editMode}" value="{netmask}"></span> +<span class="action-area"> +<button class="edit {viewMode}"></button> +<button class="save {editMode}"></button> +<button class="cancel hide"></button> +</span> </div> </script> <script id="nwGlobalItem" type="text/html"> <div class="sec-content"> - <input type="text" value="{ip}"> - <button class="edit {viewMode}"></button> - <button class="save {editMode}"></button> - <button class="cancel hide"></button> +<input type="text" value="{ip}"> +<button class="edit {viewMode}"></button> +<button class="save {editMode}"></button> +<button class="cancel hide"></button> </div> </script> <script id="pwMgmtItem" type="text/html"> @@ -259,8 +338,8 @@ Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA </script> <script id="sensorBody" type="text/html"> <div class="sensor-inline"> - <div class="sensor-head">{labelHead}</div> - <div class="sensor-body" id={labelHead}></div> +<div class="sensor-head">{labelHead}</div> +<div class="sensor-body" id={labelHead}></div> </div> </script> <script id="sensorUnit" type="text/html"> @@ -268,22 +347,22 @@ Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA </script> <script id="userItem" type="text/html"> <div class="user-item"> - <div class="user-manage-column" data-type="name">{userName}</div> - <div class="user-manage-column" data-type="group">{userGroup}</div> - <div class="user-manage-column" data-type="profile">{userProfile}</div> - <button class="detach"></button> +<div class="user-manage-column" data-type="name">{userName}</div> +<div class="user-manage-column" data-type="group">{userGroup}</div> +<div class="user-manage-column" data-type="profile">{userProfile}</div> +<button class="detach"></button> </div> </script> <script id="subscItem" type="text/html"> <div class="subsc-item"> - <div class="subsc-manage-column" data-type="hostname">{hostname}</div> - <div class="subsc-manage-column" data-type="port">{port}</div> - <div class="subsc-manage-column" data-type="community">{community}</div> - <button class="detach"></button> +<div class="subsc-manage-column" data-type="hostname">{hostname}</div> +<div class="subsc-manage-column" data-type="port">{port}</div> +<div class="subsc-manage-column" data-type="community">{community}</div> +<button class="detach"></button> </div> </script> <script> - ginger.initAdmin(); +ginger.initAdmin(); </script> <script id="userManagement" type="text/javascript"></script> </body> -- 1.9.3

From: Andre Teodoro <andreteodoro.work(a)gmail.com&gt; Signed-off-by: Andre Teodoro <andreteodoro.work(a)gmail.com&gt; Signed-off-by: samhenri <samuel.guimaraes(a)eldorado.org.br&gt; --- ui/css/src/host-admin.scss | 16 ++- ui/js/host-admin.js | 190 +++++++++++++------------- ui/pages/host-admin.html.tmpl | 304 +++++++++++++++++++++++------------------- 3 files changed, 275 insertions(+), 235 deletions(-) diff --git a/ui/css/src/host-admin.scss b/ui/css/src/host-admin.scss index f718917..b46b275 100644 --- a/ui/css/src/host-admin.scss +++ b/ui/css/src/host-admin.scss @@ -433,13 +433,14 @@ } .ginger .host-admin .pw-opt .header #progressIndicator { - float: right; - margin-top: 2px; + /* float: right;*/ + margin-top: 5px; } -.ginger .host-admin .pw-opt .header .actBtn { + +/*.ginger .host-admin .pw-opt .header .actBtn { float: right; -} +}*/ .ginger .host-admin .pw-opt .body .item { display: inline-block; @@ -478,7 +479,8 @@ max-height: 170px; } -.ginger .host-admin .sensor-inline { + +/*.ginger .host-admin .sensor-inline { display: inline-block; margin-left: 20px; vertical-align: top; @@ -493,7 +495,7 @@ .ginger .host-admin .sensor-inline .sensor-body { font-weight: normal; font-size: 12px; -} +}*/ .ginger .host-admin .subsc-manage .content-body .subsc-item { height: 25px; @@ -624,4 +626,4 @@ } // Admin - To do: move to Ginger -@import "modules/administration"; \ No newline at end of file +@import "modules/administration"; diff --git a/ui/js/host-admin.js b/ui/js/host-admin.js index 5ac882e..521add1 100644 --- a/ui/js/host-admin.js +++ b/ui/js/host-admin.js @@ -195,7 +195,8 @@ ginger.setupBakGrid = function() { var tooltipContent = wok.substitute($("#backupTooltip").html(), data[i]); tooltipContent = tooltipContent.replace("includePlaceHodler", data[i].include); tooltipContent = tooltipContent.replace("excludePlaceHodler", data[i].exclude); - $(".file-col,.time-col", tempNode).tooltip({ + + $(".column-file,.column-timestamp", tempNode).tooltip({ items: $(tempNode), content: tooltipContent, tooltipClass: "ginger-dialog", @@ -206,21 +207,13 @@ ginger.setupBakGrid = function() { }, hide: 100 }); - $(".download", $(tempNode)).button({ - icons: { - primary: "ui-icon ui-icon-arrowthickstop-1-s" - }, - text: false - }).click(function() { + $(".btn-download").on("click", function(event) { + event.stopImmediatePropagation(); var bakItem = $(this).parent(); window.open('plugins/ginger/backup/archives/' + encodeURIComponent(bakItem.prop("id")) + '/file'); }); - $(".delete", $(tempNode)).button({ - icons: { - primary: "ui-icon ui-icon-close" - }, - text: false - }).click(function() { + $(".btn-delete").on("click", function(event) { + event.stopImmediatePropagation(); var bakItem = $(this).parent(); ginger.deleteBackupArchive(bakItem.prop("id"), function() { bakItem.remove(); @@ -231,18 +224,22 @@ ginger.setupBakGrid = function() { }; ginger.initConfigBak = function() { - $("#newDefaultBakBtn").button().click(function() { + $("#newDefaultBakBtn").on("click", function(event) { + event.preventDefault(); ginger.createBackupArchive({}, function() { $("#bakGridBody").empty(); ginger.setupBakGrid(); }) }); - $("#newCustomBakBtn").button().click(function() { + $("#newCustomBakBtn").on("click", function(event) { + event.preventDefault(); $("#newBakDialog").dialog("open"); }); - $("#batDelBtn").button().click(function() { + $("#batDelBtn").on("click", function(event) { + event.preventDefault(); $("#batDelDialog").dialog("open"); }); + ginger.setupBakGrid(); ginger.initBakDialog(); ginger.initBatDelDialog(); @@ -254,6 +251,15 @@ ginger.initNetworkConfig = function() { $(".cancel", item).toggleClass("hide", !on); }; var attachBtnEvt = function(node, editFunc, saveFunc, cancelFunc) { + // disable the inputs for edit if they are already filled + var ip = $("#ip-address", node); + var mask = $("#ip-mask", node); + if (!(ip === undefined || ip === null) && !(mask === undefined || mask === null)) { + if (!(ip.val() === "") && !(mask.val() === "")) { + ip.prop("disabled", true); + mask.prop("disabled", true); + } + } $("input", node).each(function() { $(this).on("keyup", function() { var isValid = ginger.validateIp($(this).val()); @@ -265,29 +271,23 @@ ginger.initNetworkConfig = function() { $(".save", node).prop("disabled", !isValid); }); }); - $(".edit", node).button({ - icons: { - primary: "ui-icon-pencil" - }, - text: false - }).click(editFunc); - $(".save", node).button({ - icons: { - primary: "ui-icon-disk" - }, - text: false - }).click(saveFunc); - $(".cancel", node).button({ - icons: { - primary: "ui-icon-arrowreturnthick-1-w" - }, - text: false - }).click(cancelFunc); + $(".edit", node).on("click", function(event) { + event.preventDefault(); + editFunc(node); + }); + $(".save", node).on("click", function(event) { + event.preventDefault(); + saveFunc(node); + }); + $(".cancel", node).on("click", function(event) { + event.preventDefault(); + cancelFunc(node); + }); }; ginger.getInterfaces(function(data) { var toggleInterfaceEdit = function(item, on) { - $("label", item).toggleClass("hide", on); - $("input", item).toggleClass("hide", !on) + $("#ip-address", item).prop("disabled", !on); + $("#ip-mask", item).prop("disabled", !on); toggleBtnEdit(item, on); }; for (var i = 0; i < data.length; i++) { @@ -296,14 +296,14 @@ ginger.initNetworkConfig = function() { data[i].editMode = isEdit ? "" : "hide"; var tempNode = $.parseHTML(wok.substitute($("#nicItem").html(), data[i])); $("#gingerInterface").append(tempNode); - attachBtnEvt(tempNode, function() { - var item = $(this).parent().parent(); - toggleInterfaceEdit(item, true); - }, function() { - var item = $(this).parent().parent(); - var name = $("span", item).first().html(); - var ip = $(".ip", item); - var mask = $(".mask", item); + attachBtnEvt(tempNode, function(node) { + toggleInterfaceEdit(node, true); + }, function(node) { + // nicItem Save + var item = node; + var name = $("label", item).first().html(); + var ip = $("#ip-address", item); + var mask = $("#ip-mask", item); var interface = { ipaddr: $("input", ip).val(), netmask: $("input", mask).val() @@ -315,12 +315,13 @@ ginger.initNetworkConfig = function() { toggleInterfaceEdit(item, false); }); }); - }, function() { - var item = $(this).parent().parent(); + }, function(node) { + // nicItem Cancel + var item = node; $("input", item).removeClass("invalid-field"); $("button", item).prop("disabled", false); - var ip = $(".ip", item); - var mask = $(".mask", item); + var ip = $("#ip-address", item); + var mask = $("#ip-mask", item); $("input", ip).val($("label", ip).text()); $("input", mask).val($("label", mask).text()); toggleInterfaceEdit(item, false); @@ -329,16 +330,16 @@ ginger.initNetworkConfig = function() { }); ginger.getNetworkGlobals(function(data) { var toggleNWGlobalsEdit = function(item, on) { - $("input", item).prop("disabled", !on); + $("#dns-ip-address", item).prop("disabled", !on); toggleBtnEdit(item, on); }; var attachNWGlobalBtnEvt = function(node, saveFunc) { attachBtnEvt(node, function() { - toggleNWGlobalsEdit($(this).parent(), true); + toggleNWGlobalsEdit(node, true); }, function() { saveFunc(); }, function() { - toggleNWGlobalsEdit($(this).parent(), false); + toggleNWGlobalsEdit(node, false); }); }; if (!data.nameservers || data.nameservers.length == 0) { @@ -354,10 +355,10 @@ ginger.initNetworkConfig = function() { $("input", tempNode).prop("disabled", ip != ""); $("#" + container).append(tempNode); $("input", tempNode).prop("oriVal", ip); - attachBtnEvt(tempNode, function() { - toggleNWGlobalsEdit($(this).parent(), true); - }, function() { - saveFunc($(this).parent(), function(item) { + attachBtnEvt(tempNode, function(node) { + toggleNWGlobalsEdit(node, true); + }, function(node) { + saveFunc(node, function(item) { var input = $("input", item); if (input.val() == "" && $(".sec-content", "#" + container).length != 1) { item.remove(); @@ -366,15 +367,15 @@ ginger.initNetworkConfig = function() { toggleNWGlobalsEdit(item, false); } }); - }, function() { - var input = $("input", $(this).parent()); - input.removeClass("invalid-field"); - $("button", $(this).parent()).prop("disabled", false); + }, function(node) { + // DNS IP Address Cancel + var input = $("input", node); + $("button", node).prop("disabled", false); input.val(input.prop("oriVal")); if (input.prop("oriVal") == "") { - $(this).parent().remove(); + node[1].remove(); } else { - toggleNWGlobalsEdit($(this).parent(), false); + toggleNWGlobalsEdit(node, false); } }); return tempNode; @@ -385,7 +386,7 @@ ginger.initNetworkConfig = function() { var nwGol = { nameservers: [] }; - $("input", item.parent()).each(function() { + $("input", item).each(function() { if ($(this).val().trim() != "") { nwGol.nameservers.push($(this).val()); } @@ -400,9 +401,6 @@ ginger.initNetworkConfig = function() { }); }; $("#gingerDnsAdd").button({ - icons: { - primary: "ui-icon-plusthick" - }, text: false }).click(function() { var item = addDnsItem(""); @@ -412,7 +410,7 @@ ginger.initNetworkConfig = function() { addDnsItem(data.nameservers[i]); } addGlobalItem("gingerGateway", data.gateway ? data.gateway : "", function(item, postSave) { - var gateway = $("input", item.parent()).val(); + var gateway = $("input", item).val(); if (gateway.trim() != "") { ginger.updateNetworkGlobals({ gateway: gateway @@ -427,23 +425,24 @@ ginger.initNetworkConfig = function() { }; ginger.initPowerMgmt = function() { - var selectedClass = "ui-icon-check"; - var toSelectClass = "ui-icon-radio-off"; - var onSelectClass = "ui-icon-radio-on"; - $(".actBtn", "#gingerPowerMgmt").button({ - disabled: true - }).click(function() { + var selectedClass = "pwr-activated"; + var toSelectClass = "pwr-unselected"; + var onSelectClass = "pwr-selected"; + + $(".actBtn", "#gingerPowerMgmt").on("click", function(event) { + $(".actBtn", "#gingerPowerMgmt").prop('disabled', true); var currentSelected = $('.' + selectedClass, $(".body", "#gingerPowerMgmt")); var toBeSelected = $('.' + onSelectClass, $(".body", "#gingerPowerMgmt")); var optName = $(":last-child", toBeSelected.parent()).html(); $("#progressIndicator", ".ginger .host-admin").addClass("progress-icon"); - $(".actBtn", "#gingerPowerMgmt").button("option", "disabled", true); + $(".actBtn", "#gingerPowerMgmt").prop('disabled', true); + ginger.activatePowerProfile(optName, function() { currentSelected.removeClass(selectedClass).addClass(toSelectClass); currentSelected.next().addClass("to-select"); toBeSelected.removeClass(onSelectClass).addClass(selectedClass); toBeSelected.next().removeClass("to-select"); - $(".actBtn", "#gingerPowerMgmt").button("option", "disabled", false); + $(".actBtn", "#gingerPowerMgmt").prop('disabled', true); $("#progressIndicator", ".ginger .host-admin").removeClass("progress-icon"); }); }); @@ -454,7 +453,7 @@ ginger.initPowerMgmt = function() { var tempNode = $.parseHTML(wok.substitute($("#pwMgmtItem").html(), data[i])); $(".body", "#gingerPowerMgmt").append(tempNode); $(tempNode).on("click", function() { - $(".item :first-child", $(this).parent()).each(function() { + $(".pwr-item :first-child", $(this).parent()).each(function() { if ($(this).hasClass(onSelectClass)) { $(this).removeClass(onSelectClass).addClass(toSelectClass); } @@ -462,7 +461,9 @@ ginger.initPowerMgmt = function() { var iconNode = $(":first-child", $(this)); if (iconNode.hasClass(toSelectClass)) { iconNode.removeClass(toSelectClass).addClass(onSelectClass); - $(".actBtn", "#gingerPowerMgmt").button("option", "disabled", false); + $(".actBtn", "#gingerPowerMgmt").prop('disabled', false); + } else { + $(".actBtn", "#gingerPowerMgmt").prop('disabled', true); } }); } @@ -472,7 +473,6 @@ ginger.initPowerMgmt = function() { ginger.initSANAdapter = function() { ginger.getSANAdapters(function(data) { var temStr = "<span class='item'>{value}</span>"; - console.log('data.length:', data.length); for (var i = 0; i < data.length; i++) { $(".body", $(".name", ".san-adapter")).append(wok.substitute(temStr, { value: data[i].name @@ -509,7 +509,7 @@ ginger.listSensors = function() { $.each(result, function(i1, d1) { if (d1 && d1 != null && i1 != "hdds") { $.each(d1, function(i2, d2) { - var pathNode = $.parseHTML(wok.substitute($("#sensorBody").html(), { + var pathNode = $.parseHTML(wok.substitute($("#sensorItem").html(), { labelHead: i2 })); $(".sensor-panel").append(pathNode); @@ -518,7 +518,7 @@ ginger.listSensors = function() { if (i3 && d3 != null && i3 != "unit") { $.each(d3, function(i4, d4) { if (i4.match("input")) { - var pathNodeU = $.parseHTML(wok.substitute($("#sensorUnit").html(), { + var pathNodeU = $.parseHTML(wok.substitute($("#sensorItem").html(), { labelBody: i3, labelNumber: d4, labelUnit: d2["unit"] @@ -532,13 +532,13 @@ ginger.listSensors = function() { }); } else { if (d1 != null) { - var pathNode = $.parseHTML(wok.substitute($("#sensorBody").html(), { + var pathNode = $.parseHTML(wok.substitute($("#sensorItem").html(), { labelHead: i1 })); $(".sensor-panel").append(pathNode); $.each(d1, function(i5, d5) { if (i5 != "unit") { - var pathNodeU = $.parseHTML(wok.substitute($("#sensorUnit").html(), { + var pathNodeU = $.parseHTML(wok.substitute($("#sensorItem").html(), { labelBody: i5, labelNumber: d5, labelUnit: d1["unit"] @@ -578,13 +578,20 @@ ginger.initSEPConfig = function() { sepStatus(); $(".content-body", ".ginger .host-admin .subsc-manage").empty(); ginger.getSEPSubscriptions(function(result) { - for (var i = 0; i < result.length; i++) { + //for (var i = 0; i < result.length; i++) { + for (var i = 0; i < 2; i++) { + /* var subscItem = $.parseHTML(wok.substitute($("#subscItem").html(), { + hostname: result[i]["hostname"], + port: result[i]["port"], + community: result[i]["community"] + }));*/ var subscItem = $.parseHTML(wok.substitute($("#subscItem").html(), { - hostname: result[i]["hostname"], - port: result[i]["port"], - community: result[i]["community"] + hostname: "blah", + port: 3155, + community: "comunity" })); - $(".ginger .host-admin .subsc-manage .content-body").append(subscItem); + console.log('subscItem', subscItem); + $(".ginger .host-admin .subsc-manage").append(subscItem); } $(".detach", ".ginger .host-admin .subsc-manage").button({ icons: { @@ -820,11 +827,10 @@ ginger.initFirmware = function() { var packPath = $("#gingerPackPath").prop("value"); var isValid = /(^\/.*)$/.test(packPath); $("#gingerPackPath").toggleClass("invalid-field", !isValid && packPath !== ""); - $("#gingerPackPathSub").button(isValid ? "enable" : "disable"); + $("#gingerPackPathSub").prop('disabled', !isValid); }); - $("#gingerPackPathSub").button({ - disabled: true - }).click(function() { + $("#gingerPackPathSub").on("click", function(event) { + event.preventDefault(); wok.confirm({ title: i18n['KCHAPI6006M'], content: "The system will be immediately reset to flash the firmware. It may take longer than normal for it to reboot.", @@ -835,7 +841,7 @@ ginger.initFirmware = function() { path: $("#gingerPackPath").prop("value") }, function() { $("#gingerFWUpdateMess").css("display", "inline-block"); - $("#gingerPackPathSub").button("disable"); + $("#gingerPackPathSub").prop('disabled', true); $("#gingerPackPath").prop("disabled", true); }); }, null); @@ -844,7 +850,6 @@ ginger.initFirmware = function() { ginger.initAdmin = function() { $(".content-area", "#gingerHostAdmin").css("height", "100%"); - ginger.getCapabilities(function(result) { $.each(result, function(enableItem, capability) { var itemLowCase = enableItem.toLowerCase(); @@ -862,6 +867,7 @@ ginger.initAdmin = function() { break; case "powerprofiles": ginger.initPowerMgmt(); + ginger.initSEPConfig(); break; case "sanadapters": ginger.initSANAdapter(); diff --git a/ui/pages/host-admin.html.tmpl b/ui/pages/host-admin.html.tmpl index 7d7f7e9..6f56f61 100644 --- a/ui/pages/host-admin.html.tmpl +++ b/ui/pages/host-admin.html.tmpl @@ -50,52 +50,78 @@ Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA <div class="panel-group firmware-ppc-enabled" id="accordion" role="tablist" aria-multiselectable="true"> <h3> <a role="button" data-toggle="collapse" data-parent="#accordion" href="#firmware-update-content-area" aria-expanded="false" aria-controls="firmware-update-content-area" class=""> - <span class="accordion-icon"></span><span class="accordion-text">$_("Firmware Update")</span> + <span class="accordion-icon"></span><span class="accordion-text">$_("Firmware Update")</span><span class="accordion-text" style="margin-left:320px">$_("SEP Configuration")</span><span class="accordion-text" style="margin-left:305px">$_("Power Options")</span> </a> </h3> <div id="firmware-update-content-area" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne"> - <div id="gingerFWUpdateMess" class="message-area" style="display: none;"> - <span class="progress-icon"></span> - <span>$_("Firmware update is initializing. System will reboot in order to flash the firmware.")</span> - </div> - <div class="section"> - <span>$_("Firmware Version: ")</span> - <span id="gingerFWVer" class="firmware-ver"></span> + <div class='fmw-content col-md-4'> + <div class="message-area" id="gingerFWUpdateMess" style="display: none;"> + <span class="progress-icon"></span> + <span>$_("Firmware update is initializing. System will reboot in order to flash the firmware.")</span> + </div> + <div class='fmw-label'>$_("Version")</div> + <div class="firmware-ver fmw-item" id="gingerFWVer">fmw-version</div> + <div class="form-group fmw-form"> + <label for="gingerPackPath" class="pack-path-label fmw-label">$_("Packaging Path ")</label> + <input type="text" class="form-control" id="gingerPackPath" placeholder="$_('Absolute path to firmware RPM')"> + </div> + <button class="btn btn-default" type="submit" id="gingerPackPathSub" disabled="true" style="width:20%">$_("Update")</button> </div> - <div class="section"> - <div class="pack-path-label">$_("Package Path: ")</div> - <div class="pack-path-content"> - <input type="text" id="gingerPackPath" class="pack-path-input"> - <div class="input-hint"> - <span class="ui-icon ui-icon-info input-hint-icon"></span> - <span class="input-hint-text">$_("The absolute path to the firmware rpm/hpm.")</span> + + <!-- Power Options Panel --> + <div class="col-md-4" id="gingerPowerMgmt" > + <div class="pw-opt"> + <div class="header"> + <button class="btn btn-default actBtn" type="submit" disabled="true">$_("Activate")</button> + <span id="progressIndicator"></span> </div> + <div class="body"></div> </div> - <button id="gingerPackPathSub">$_("Update")</button> </div> </div> <hr> </div> - <!-- Configuration Backup Panel --> - <div class="panel-group backup-ppc-enabled" id="accordion" role="tablist" aria-multiselectable="true"> - <h3> - <a role="button" data-toggle="collapse" data-parent="#accordion" href="#backup-ppc-content-area" aria-expanded="false" aria-controls="backup-ppc-content-area" class=""> - <span class="accordion-icon"></span><span class="accordion-text">$_("Configuration Backup")</span> - </a> - </h3> - <div id="backup-ppc-content-area" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne"> - <div class="action-bar"> - <span id="batDelBtn" class="item">$_("Batch Delete")</span> - <span id="newCustomBakBtn" class="item">$_("New Custom Backup")</span> - <span id="newDefaultBakBtn" class="item">$_("Generate Default Backup")</span> - </div> - <div class="bak-grid-header"> - <div class="cell file-col">$_("File")</div> - <div class="cell time-col">$_("Timestamp")</div> - </div> - <div id="bakGridBody" class="bak-grid-body"></div> - </div> - <hr> + <!-- Configuration Backup Panel --> + <div class="panel-group backup-ppc-enabled" id="accordion" role="tablist" aria-multiselectable="true"> + <h3> + <a role="button" data-toggle="collapse" data-parent="#accordion" href="#backup-ppc-content-area" aria-expanded="false" aria-controls="backup-ppc-content-area" class=""> + <span class="accordion-icon"></span><span class="accordion-text">$_("Configuration Backup")</span> + </a> + </h3> + <ul id="backup-ppc-content-area" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne"> + <li class="backup-pcc-actions" id="backup-pcc-action-area"> + <span> + <div class="dropdown menu-flat "> + <button class="btn btn-primary dropdown-toggle backup-pcc-button" type="button" data-toggle="dropdown" aria-expanded="false" aria-haspopup="true"><span class="edit-alt"></span>$_("Actions")<span class="caret"></span></button> + <ul class="dropdown-menu actionsheet"> + <li role="presentation"> + <a href="#" id="newDefaultBakBtn"><i class="fa fa-file"></i>$_("Generate Default Backup")</a> + </li> + <li role="presentation"> + <a href="#" id="newCustomBakBtn"><i class="fa fa-file"></i>$_("New Custom Backup")</a> + </li> + <li role="presentation"> + <a href="#" id="batDelBtn"><i class="fa fa-minus-circle"></i>$_("Batch Delete")</a> + </li> + </ul> + </div> + </span> + </li> + <li class="header"> + <span class="column-file">$_("File")</span><!-- + --><span class="column-timestamp">$_("Timestamp")</span><!-- + --><span class="column-download" style="display:none"> + <span class="sr-only">Download</span><!-- + --></span><!-- + --><span class="column-delete" style="display:none"> + <span class="sr-only">Delete</span><!-- + --></span> + </li> + <li> + <ul class="ul-body" id="bakGridBody"></ul> + </li> + </ul> + <hr> </div> <!-- Network Configuration Panel --> <div class="panel-group network-ppc-enabled" id="accordion" role="tablist" aria-multiselectable="true"> @@ -104,48 +130,37 @@ Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA <span class="accordion-icon"></span><span class="accordion-text">$_("Network Configuration")</span> </a> </h3> - <div id="network-ppc-content-area" class="panel-collapse collapse nw-config" role="tabpanel" aria-labelledby="headingOne"> - <div class="pane interface"> - <div class="sec-label"><span>$_("Interface")</span></div> - <div class="sec-content"> - <div class="grid-head"><span class="cell name">$_("Name")</span><span class="cell ip">$_("IP")</span><span class="cell mask">$_("Mask")</span></div> - <div class="grid-body" id="gingerInterface"></div> + <div id="network-ppc-content-area" class="panel-collapse collapse col-md-12" role="tabpanel" aria-labelledby="headingOne"> + <div class="col-md-8" style="padding-left: 40px;"> + <div class="header"> + <span class="column-name">$_("Interface Name")</span><!-- + --><span class="column-ip-address">$_("IP Address")</span><!-- + --><span class="column-ip-mask">$_("Mask IP Address")</span><!-- + --><span class="column-actions" style="display:none"> + <span class="sr-only">Actions</span><!-- + --></span> </div> + <div class="body" id="gingerInterface"></div> </div> - <div class="pane global"> - <div class="vertical-separator"> - <div class="sec-label"><span>$_("DNS")</span><button id="gingerDnsAdd" class="addBtn"></button></div> - <div id="gingerDNS"></div> - </div> - <div> - <div class="sec-label"><span>$_("Gateway")</span></div> - <div id="gingerGateway"></div> + <div class="col-md-4"> + <div class="col-md-6"> + <div class="header"> + <span>$_("DNS IP Address")</span> + </div> + <button class="btn btn-default addBtn" id="gingerDnsAdd" type="submit"><i class="fa fa-plus-circle"></i> $_("Add")</button> + <div class="body" id="gingerDNS"></div> </div> - </div> - </div> - <hr> - </div> - <!-- Power Options Panel --> - <div class="panel-group powerprofiles-ppc-enabled" id="accordion" role="tablist" aria-multiselectable="true"> - <h3> - <a role="button" data-toggle="collapse" data-parent="#accordion" href="#gingerPowerMgmt" aria-expanded="false" aria-controls="gingerPowerMgmt" class=""> - <span class="accordion-icon"></span><span class="accordion-text">$_("Power Options")</span> - </a> - </h3> - <div id="gingerPowerMgmt" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne"> - <div class="pw-opt"> - <div class="header"> - <span class="ui-icon ui-icon-check legend"></span><span class="legend separator">$_("Activated Option")</span> - <span class="ui-icon ui-icon-radio-on legend"></span><span class="legend separator">$_("Selected Option")</span> - <span class="ui-icon ui-icon-radio-off legend"></span><span class="legend">$_("Unselected Option")</span> - <span class="actBtn">$_("Activate")</span> - <span id="progressIndicator"></span> + <div class="col-md-6"> + <div class="header"> + <span>$_("Gateway IP Address")</span> + </div> + <div class="body" id="gingerGateway"></div> </div> - <div class="body"></div> </div> </div> <hr> </div> + <!-- SAN Adapters Panel --> <div class="panel-group sanadapters-ppc-enabled" id="accordion" role="tablist" aria-multiselectable="true"> <h3> @@ -194,23 +209,28 @@ Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA <span class="accordion-icon"></span><span class="accordion-text">$_("SEP Configuration")</span> </a> </h3> - <div id="sep-ppc-content-area" class="panel-collapse collapse subsc-manage" role="tabpanel" aria-labelledby="headingOne"> - <div class="status-header"> + <ul id="sep-ppc-content-area" class="panel-collapse collapse subsc-manage" role="tabpanel" aria-labelledby="headingOne"> + <!-- <div class="status-header"> <div class="sep-label">$_("Status:")</div> <div id="sepStatusLog" class="sep-dot-active down"></div> <div class="sep-field sep-buttons"> <span id="sepStart" class="actBtn">$_("Start")</span> <span id="sepStop" class="actBtn" style="display:none">$_("Stop")</span> </div> - </div> - <div class="content-header"> + </div> --> + <li class='header'> + <span class="name">$_("Hostname")</span><!-- + --><span class="wwpn">$_("Port")</span><!-- + --><span class="symbolic">$_("Community")</span> + </li> +<!-- <div class="content-header"> <span>$_("Hostname")</span> <span>$_("Port")</span> <span>$_("Community")</span> <button class="add-subscription"></button> </div> - <div class="content-body"></div> - </div> + <div class="content-body"></div>--> + </ul> <hr> </div> <!-- User Management Panel --> @@ -220,15 +240,20 @@ Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA <span class="accordion-icon"></span><span class="accordion-text">$_("User Management")</span> </a> </h3> - <div id="users-ppc-content-area" class="panel-collapse collapse user-manage" role="tabpanel" aria-labelledby="headingOne"> - <div class="content-header"> - <span>$_("Name")</span> - <span>$_("Group")</span> - <span>$_("Profile")</span> - <button class="add-user"></button> - </div> - <div class="content-body"></div> - </div> + <ul id="users-ppc-content-area" class="panel-collapse collapse user-manage" role="tabpanel" aria-labelledby="headingOne"> + <li class="header"> + <button class="btn btn-default actBtn add-user" type="submit"><i class="fa fa-plus-circle"></i> $_("Add User")</button> + </li> + <li class="header"> + <span class="column-username">$_("Name")</span><!-- + --><span class="column-usergroup">$_("Group")</span><!-- + --><span class="column-userprofile">$_("Profile")</span><!-- + --><span class="column-detach" style="display:none"> + <span class="sr-only">Detach</span><!-- + --></span> + </li> + <li class="content-body body"></li> + </ul> <hr> </div> </div> @@ -249,7 +274,7 @@ Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA </div> </div> -<div id="batDelDialog" title='$_("Delete backups in batch")' class="ginger-dialog"> +<div id="batDelDialog" class="window modal-content"> <div class="del-option"> <input type="radio" name="batDelType" value="counts_ago" checked>$_("Preserve the latest") <input type="text" class=""> $_("backups") </div> @@ -306,71 +331,78 @@ Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA </div> <script id="backupItem" type="text/html"> -<div class="bak-grid-item" id="{identity}"> -<div class="cell file-col">{file}</div> -<div class="cell time-col">{timestamp}</div> -<span class="cell act-button download"></span> -<span class="cell act-button delete"></span> -</div> + <li class="body" name="backupBodyItem" id="{identity}"> + <span class="column-file">{file}</span><!-- + --><span class="column-timestamp">{timestamp}</span><!-- + --><span class="column-download btn btn-link btn-download"><i class="fa fa-download"></i>$_("Download")</span><!-- + --><span class="column-delete btn btn-link btn-delete"><i class="fa fa-minus-circle"></i>$_("Remove")</span> + </li> </script> <script id="backupTooltip" type="text/html"> -<div class="header">$_("Description")</div> -<div class="sub-content">{description}</div> -<div class="crt-bak-section"> -<div class="path-pick"><div class="header">$_("Path Included")</div><div class="sub-content">includePlaceHodler</div></div> -<div class="path-pick"><div class="header">$_("Path Excluded")</div><div class="sub-content">excludePlaceHodler</div></div> -</div> + <div class="header">$_("Description")</div> + <div class="sub-content">{description}</div> + <div class="crt-bak-section"> + <div class="path-pick"><div class="header">$_("Path Included")</div><div class="sub-content">includePlaceHodler</div></div> + <div class="path-pick"><div class="header">$_("Path Excluded")</div><div class="sub-content">excludePlaceHodler</div></div> + </div> </script> <script id="pathItem" type="text/html"> -<div class="path-item"><input type="text"><button class="add"></button><button class="delete"></button></div> + <div class="path-item"><input type="text"><button class="add"></button><button class="delete"></button></div> </script> <script id="nicItem" type="text/html"> -<div class="item"> -<span class="cell name">{name}</span><!-- ---><span class="cell ip"><label class="{viewMode}">{ipaddr}</label><input type="text" class="{editMode}" value="{ipaddr}"></span><!-- ---><span class="cell mask"><label class="{viewMode}">{netmask}</label><input type="text" class="{editMode}" value="{netmask}"></span> -<span class="action-area"> -<button class="edit {viewMode}"></button> -<button class="save {editMode}"></button> -<button class="cancel hide"></button> -</span> -</div> + <form class="form-inline"> + <div class="form-group column-name"> + <label class="network-item">{name}</label> + </div> + <div class="form-group column-ip-address"> + <input type="text" class="form-control" id="ip-address" placeholder="$_("Enter IP Address")" value="{ipaddr}"> + </div> + <div class="form-group column-ip-mask"> + <input type="text" class="form-control" id="ip-mask" placeholder="$_("Enter IP Address")" value="{netmask}"> </input> + </div> + <div class="form-group column-actions"> + <button class="btn btn-link edit {viewMode}" type="submit"><i class="fa fa-pencil"></i></button> + <button class="btn btn-link save {editMode}" type="submit"><i class="fa fa-floppy-o"></i></button> + <button class="btn btn-link cancel hide" type="submit"><i class="fa fa-ban"></i></button> + </div> + </form> </script> <script id="nwGlobalItem" type="text/html"> -<div class="sec-content"> -<input type="text" value="{ip}"> -<button class="edit {viewMode}"></button> -<button class="save {editMode}"></button> -<button class="cancel hide"></button> -</div> + <form class="form-inline sec-content"> + <div class="form-group column-dns-ip-address"> + <input type="text" class="form-control" id="dns-ip-address" placeholder="$_("Enter IP Address")" value="{ip}"> + </div> + <div class="form-group column-actions"> + <button class="btn btn-link edit {viewMode}" type="submit"><i class="fa fa-pencil"></i></button> + <button class="btn btn-link save {editMode}" type="submit"><i class="fa fa-floppy-o"></i></button> + <button class="btn btn-link cancel hide" type="submit"><i class="fa fa-ban"></i></button> + </div> + </form> </script> <script id="pwMgmtItem" type="text/html"> -<div class="item"><span class="ui-icon {selected}"></span><span class="{toSelect}">{name}</span></div> -</script> -<script id="sensorBody" type="text/html"> -<div class="sensor-inline"> -<div class="sensor-head">{labelHead}</div> -<div class="sensor-body" id={labelHead}></div> -</div> + <div class="pwr-item"><span class="{selected}"></span><span class="pwr-item-label {toSelect}">{name}</span></div> </script> -<script id="sensorUnit" type="text/html"> -<div class="sensor-body-label">{labelBody}: {labelNumber} {labelUnit}</div> +<script id="sensorItem" type="text/html"> + <li class="header sensor-inline"> + <span class='default_column'>{labelHead}</span> + </li> + <li class="body"> + <span id={labelHead} class='default_column'>{labelBody}: {labelNumber} {labelUnit}</span> + </li> </script> <script id="userItem" type="text/html"> -<div class="user-item"> -<div class="user-manage-column" data-type="name">{userName}</div> -<div class="user-manage-column" data-type="group">{userGroup}</div> -<div class="user-manage-column" data-type="profile">{userProfile}</div> -<button class="detach"></button> -</div> + <span class="column-username" data-type="name">{userName}</span><!-- + --><span class="column-usergroup" data-type="group">{userGroup}</span><!-- + --><span class="column-userprofile" data-type="profile">{userProfile}</span><!-- + --><span class="column-detach btn btn-link detach"><i class="fa fa-trash-o"></i></span> </script> <script id="subscItem" type="text/html"> -<div class="subsc-item"> -<div class="subsc-manage-column" data-type="hostname">{hostname}</div> -<div class="subsc-manage-column" data-type="port">{port}</div> -<div class="subsc-manage-column" data-type="community">{community}</div> -<button class="detach"></button> -</div> + <li class="body"> + <span class="column-username" data-type="hostname">{hostname}</span><!-- + --><span class="column-usergroup" data-type="port">{port}</span><!-- + --><span class="column-userprofile" data-type="community">{community}</span><!-- + --><span class="column-detach btn btn-link detach"><i class="fa fa-trash-o"></i></span> + </li> </script> <script> ginger.initAdmin(); -- 1.9.3

From: Andre Teodoro <andreteodoro.work(a)gmail.com&gt; Signed-off-by: Andre Teodoro <andreteodoro.work(a)gmail.com&gt; Signed-off-by: samhenri <samuel.guimaraes(a)eldorado.org.br&gt; --- ui/js/host-admin.js | 97 ++++++++++++++++++------------------------- ui/pages/host-admin.html.tmpl | 43 ++++++++++++------- 2 files changed, 69 insertions(+), 71 deletions(-) diff --git a/ui/js/host-admin.js b/ui/js/host-admin.js index 30110df..87a15ff 100644 --- a/ui/js/host-admin.js +++ b/ui/js/host-admin.js @@ -613,68 +613,53 @@ ginger.initSEPConfig = function() { }); }; - $(".add-subscription", ".ginger .host-admin .subsc-manage").button({ - text: false - }).click(function(event) { + $('#subscriptionAdd').on('show.bs.modal', function(event) { var clearSubscriptionSubmit = function(clear) { if (clear) { - $(".subsc-add-body .subsc-add-content .subsc-input", "#subscriptionAdd").val(""); + $("form#form-subscription-add :input", "#subscriptionAdd").val(""); } - $(".subsc-add-content .subsc-input").attr("disabled", false); - $("input", ".subsc-add-content .subsc-input").attr("disabled", false); - $("#subsc-submit").button("option", "disabled", true); - $("#subsc-cancel").button("option", "disabled", false); + $("form#form-subscription-add :input").attr("disabled", false); + $("#subsc-submit").prop("disabled", true); + $("#subsc-cancel").prop("disabled", false); }; - $("#subscriptionAdd").dialog({ - modal: true, - width: 350, - draggable: false, - resizable: false, - closeText: "X", - open: function() { - $(".subsc-add-content .inputbox").keyup(function() { - var sum = 0; - $(".subsc-add-content .inputbox").each(function(index, data) { - if ($(data).val() === "") { - sum += 1; - } - }) - if (sum != 0) { - $("#subsc-submit").button("option", "disabled", true); - } else { - $("#subsc-submit").button("option", "disabled", false); - } - }); - $("#subsc-submit", $(this)).button().click(function(event) { - $(".subsc-add-content .subsc-input").attr("disabled", true); - $("input", ".subsc-add-content .subsc-input").attr("disabled", true); - $("#subsc-submit").button("option", "disabled", true); - $("#subsc-cancel").button("option", "disabled", true); - var hostname = $(".subsc-add-content .subsc-input[name='hostname']", ".subsc-add-body").val(); - var port = parseInt($(".subsc-add-content .subsc-input[name='port']", ".subsc-add-body").val()); - var community = $(".subsc-add-content .subsc-input[name='community']", ".subsc-add-body").val(); - var dataSubmit = { - hostname: hostname, - port: port, - community: community, - }; - ginger.addSEPSubscription(dataSubmit, function() { - $("#subscriptionAdd").dialog("close"); - listSubscriptions(); - }, function(error) { - wok.message.error(error.responseJSON.reason); - clearSubscriptionSubmit(false); - }); - }); - $("#subsc-cancel", $(this)).button().click(function(event) { - $("#subscriptionAdd").dialog("close"); - }); - }, - beforeClose: function() { - clearSubscriptionSubmit(true); - $("#subsc-submit").unbind("click"); + $("#subscriptionAdd, .input").keyup(function() { + var sum = 0; + $("form#form-subscription-add :input").each(function(index, data) { + if ($(data).val() === "") { + sum += 1; + } + }) + if (sum != 0) { + $("#subsc-submit").prop("disabled", true); + } else { + $("#subsc-submit").prop("disabled", false); } }); + $("#subsc-submit", $(this)).button().click(function(event) { + $("form#form-subscription-add :input").attr("disabled", true); + $("#subsc-submit").prop("disabled", true); + $("#subsc-cancel").prop("disabled", true); + var hostname = $("#subscriptionAdd, .input[name='hostname']", ".modal-body").val(); + var port = parseInt($("#subscriptionAdd, .input[name='port']", ".modal-body").val()); + var community = $("#subscriptionAdd, .input[name='community']", ".modal-body").val(); + var dataSubmit = { + hostname: hostname, + port: port, + community: community, + }; + ginger.addSEPSubscription(dataSubmit, function() { + clearSubscriptionSubmit(true); + $('#subscriptionAdd').modal('hide') + listSubscriptions(); + }, function(error) { + wok.message.error(error.responseJSON.reason); + clearSubscriptionSubmit(false); + }); + + }); + $("#subsc-cancel", $(this)).button().click(function(event) { + $('#subscriptionAdd').modal('hide') + }); }); $("#sepStart").button().click(function() { sepStart(); diff --git a/ui/pages/host-admin.html.tmpl b/ui/pages/host-admin.html.tmpl index 62ac84c..42d8bca 100644 --- a/ui/pages/host-admin.html.tmpl +++ b/ui/pages/host-admin.html.tmpl @@ -223,7 +223,7 @@ Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA --><span id="sepStatusLog" style="font-weight: bold;"></span><!-- --><button class="btn btn-primary" type="submit" id="sepStart">$_("Start")</button><!-- --><button class="btn btn-primary" type="submit" id="sepStop">$_("Stop")</button><!-- - --><button class="btn btn-primary add-subscription" type="submit">$_("Subscribe")</button> + --><button class="btn btn-primary add-subscription" type="submit" data-toggle="modal" data-target="#subscriptionAdd">$_("Subscribe")</button> </li> <li class='header'> <span class="column-hostname">$_("Hostname")</span><!-- @@ -286,20 +286,33 @@ Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA </div> </div> -<div id="subscriptionAdd" title='$_("Add Subscription")' class="ginger-dialog"> - <div class="subsc-add-body"> - <div class="subsc-add-label subsc-colume"> - <div class="subsc-label">$_("Hostname")</div> - <div class="subsc-label">$_("Port")</div> - <div class="subsc-label">$_("Community")</div> - </div> - <div class="subsc-add-content subsc-colume"> - <input class="subsc-input inputbox" name="hostname" /><br> - <input class="subsc-input inputbox" name="community" /><br> - </div> - <div class="subsc-manage-footer"> - <button id="subsc-submit" disabled>$_("Submit")</button> - <button id="subsc-cancel">$_("Cancel")</button> +<!-- SEP Configuration Modal - Add Subscription --> +<div class="modal fade host-modal" id="subscriptionAdd" tabindex="-1" role="dialog" labelledby="hostsModalLabel" aria-hidden="true"> + <div class="modal-dialog" role="document"> + <div class="modal-content" > + <div class="modal-header"> + <h4 class="modal-title">$_("Add Subscription")</h4> + </div> + <div class="modal-body"> + <form id="form-subscription-add"> + <div class="form-group"> + <label for="hostname-textbox">$_("Hostname")</label> + <input type="text" class="form-control input" id="hostname-textbox" name="hostname" /> + </div> + <div class="form-group"> + <label for="port-textbox">$_("Port")</label> + <input type="text" class="form-control input" id="port-textbox" name="port" /> + </div> + <div class="form-group"> + <label for="community-textbox">$_("Community")</label> + <input type="text" class="form-control input" id="community-textbox" name="community" /> + </div> + </form> + </div> + <div class="modal-footer"> + <button type="button" id="subsc-submit" class="btn btn-default" data-dismiss="modal" disabled>$_("Submit")</button> + <button type="button" id="subsc-cancel" class="btn btn-default" data-dismiss="modal">$_("Cancel")</button> + </div> </div> </div> </div> -- 1.9.3

From: Andre Teodoro <andreteodoro.work(a)gmail.com&gt; Signed-off-by: Andre Teodoro <andreteodoro.work(a)gmail.com&gt; Signed-off-by: samhenri <samuel.guimaraes(a)eldorado.org.br&gt; --- ui/js/host-admin.js | 105 ++++++++++++++++++------------------------ ui/pages/host-admin.html.tmpl | 64 +++++++++++++++++++++---- 2 files changed, 99 insertions(+), 70 deletions(-) diff --git a/ui/js/host-admin.js b/ui/js/host-admin.js index 294131b..56df1dc 100644 --- a/ui/js/host-admin.js +++ b/ui/js/host-admin.js @@ -123,58 +123,51 @@ ginger.initBakDialog = function() { }; ginger.initBatDelDialog = function() { - $("#batDelDialog").dialog({ - autoOpen: false, - modal: true, - width: 600, - draggable: false, - resizable: false, - closeText: "X", - open: function() { - $(".ui-dialog-titlebar-close", $("#batDelDialog").parent()).removeAttr("title"); - }, - beforeClose: function() { + $('#batDelDialog').on('show.bs.modal', function(event) { + $("#batdel-submit", $(this)).on("click", function(event) { + var content = { + counts_ago: -1, + days_ago: -1 + }; + var delOption = $("input:radio[name=batDelType]:checked"); + var delValue = $("input:text", delOption.parent()).prop("value"); + console.log('delOption', delOption); + console.log('delValue', delValue); + content[delOption.val()] = parseInt(delValue); + ginger.deleteBackupArchives(content, function() { + $('#batDelDialog').modal('hide'); + $("#bakGridBody").empty(); + clearForm(); + ginger.setupBakGrid(); + }); + }); + var clearForm = function() { $("input:text", "#batDelDialog").prop("value", null); $("input:text", "#batDelDialog").prop("disabled", true); $("input:text", "#batDelDialog").removeClass("invalid-field"); $("input:text:first", "#batDelDialog").prop("disabled", false); $("input:radio[name=batDelType]:first").prop("checked", true); - $("#batDelFormBtn").button("disable"); - }, - buttons: [{ - id: "batDelFormBtn", - text: "OK", - disabled: true, - click: function() { - var content = { - counts_ago: -1, - days_ago: -1 - }; - var delOption = $("input:radio[name=batDelType]:checked"); - var delValue = $("input:text", delOption.parent()).prop("value"); - content[delOption.val()] = parseInt(delValue); - ginger.deleteBackupArchives(content, function() { - $("#batDelDialog").dialog("close"); - $("#bakGridBody").empty(); - ginger.setupBakGrid(); - }); - } - }] - }); + $("#batdel-submit").prop("disabled", true); + }; + var validateInput = function(input) { + var isValid = new RegExp('^[0-9]*$').test(input.val()); + input.toggleClass("invalid-field", !isValid); - var validateInput = function(input) { - var isValid = new RegExp('^[0-9]*$').test(input.val()); - input.toggleClass("invalid-field", !isValid); - $("#batDelFormBtn").button(isValid && input.val().trim() !== "" ? "enable" : "disable"); - }; - $("input:radio[name=batDelType]").on("click", function() { - $("input:text", "#batDelDialog").prop("disabled", true); - var activeInput = $("input:text", $("input:radio[name=batDelType]:checked").parent()); - activeInput.prop("disabled", false); - validateInput(activeInput); - }); - $("input:text", "#batDelDialog").on("keyup", function() { - validateInput($(this)); + if (isValid && input.val().trim() !== "") { + $("#batdel-submit").prop("disabled", false); + } else { + $("#batdel-submit").prop("disabled", true); + } + }; + $("input:radio[name=batDelType]").on("click", function() { + $("input:text", "#batDelDialog").prop("disabled", true); + var activeInput = $("input:text", $("input:radio[name=batDelType]:checked").parent()); + activeInput.prop("disabled", false); + validateInput(activeInput); + }); + $("input:text", "#batDelDialog").on("keyup", function() { + validateInput($(this)); + }); }); }; @@ -231,14 +224,11 @@ ginger.initConfigBak = function() { ginger.setupBakGrid(); }) }); + $("#newCustomBakBtn").on("click", function(event) { event.preventDefault(); $("#newBakDialog").dialog("open"); }); - $("#batDelBtn").on("click", function(event) { - event.preventDefault(); - $("#batDelDialog").dialog("open"); - }); ginger.setupBakGrid(); ginger.initBakDialog(); @@ -578,7 +568,7 @@ ginger.initSEPConfig = function() { }; var listSubscriptions = function() { sepStatus(); - $(".content-body", ".ginger .host-admin .subsc-manage").empty(); + $(".content-body", ".ginger .host-admin .subsc-manage").remove(); ginger.getSEPSubscriptions(function(result) { for (var i = 0; i < result.length; i++) { var subscItem = $.parseHTML(wok.substitute($("#subscItem").html(), { @@ -672,7 +662,7 @@ ginger.initSEPConfig = function() { ginger.initUserManagement = function() { var listUsers = function() { - $(".content-body", ".ginger .host-admin .user-manage").empty(); + $(".content-body", ".ginger .host-admin .user-manage").remove(); ginger.getUsers(function(result) { for (var i = 0; i < result.length; i++) { var nodeNameItem = $.parseHTML(wok.substitute($("#userItem").html(), { @@ -680,16 +670,11 @@ ginger.initUserManagement = function() { userGroup: result[i]["group"], userProfile: result[i]["profile"] })); - $(".ginger .host-admin .user-manage .content-body").append(nodeNameItem); + $(".ginger .host-admin .user-manage").append(nodeNameItem); } - $(".detach", ".ginger .host-admin .user-manage").button({ - icons: { - primary: "ui-icon-trash" - }, - text: false - }).click(function(event) { + $(".detach", ".ginger .host-admin .user-manage").button({}).click(function(event) { var that = $(this).parent(); - ginger.deleteUser($("div[data-type='name']", that).text(), function() { + ginger.deleteUser($("span[data-type='name']", that).text(), function() { that.remove(); }, function() {}); }); diff --git a/ui/pages/host-admin.html.tmpl b/ui/pages/host-admin.html.tmpl index c141908..7f4ceda 100644 --- a/ui/pages/host-admin.html.tmpl +++ b/ui/pages/host-admin.html.tmpl @@ -90,7 +90,7 @@ Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA <a href="#" id="newCustomBakBtn"><i class="fa fa-file"></i>$_("New Custom Backup")</a> </li> <li role="presentation"> - <a href="#" id="batDelBtn"><i class="fa fa-minus-circle"></i>$_("Batch Delete")</a> + <a href="#" id="batDelBtn" data-toggle="modal" data-target="#batDelDialog"><i class="fa fa-minus-circle"></i>$_("Batch Delete")</a> </li> </ul> </div> @@ -255,13 +255,13 @@ Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA <span class="sr-only">Detach</span><!-- --></span> </li> - <li class="content-body body"></li> </ul> <hr> </div> </div> </div> +<!-- Configuration Backup Modal - Create Custom Backup --> <div id="newBakDialog" title='$_("Create a backup")' class="ginger-dialog"> <div>$_("Description")</div> <div class="crt-bak-section"><input type="text" class="desc"></div> @@ -277,14 +277,51 @@ Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA </div> </div> -<div id="batDelDialog" class="window modal-content"> +<!-- Configuration Backup Modal - Batch Delete --> +<div class="modal fade host-modal" id="batDelDialog" tabindex="-1" role="dialog" labelledby="batDelLabel" aria-hidden="true"> + <div class="modal-dialog" role="document"> + <div class="modal-content" > + <div class="modal-header"> + <h4 class="modal-title">$_("Delete Backups in Batch")</h4> + </div> + <div class="modal-body"> + <form id="form-bat-delete"> + <div class="form-group"> + <div id="radio-buttons"> + <label class="radio-inline"> + <input type="radio" name="batDelType" class="wok-radio" id="kimchiuser" value="counts_ago" checked/> + <label for="kimchiuser">$_("Preserve the latest")</label> + <input type="text" class="form-control" style="display: inherit;width: auto;"> $_("backups") + </label> + </div> + </div> + <div class="form-group"> + <div id="radio-buttons"> + <label class="radio-inline"> + <input type="radio" name="batDelType" class="wok-radio" id="kimchiuser" value="days_ago"/> + <label for="kimchiuser">$_("Preserve the latest")</label> + <input type="text" class="form-control" style="display: inherit;width: auto;" disabled> $_("days of backups") + </label> + </div> + </div> + </form> + </div> + <div class="modal-footer"> + <button type="button" id="batdel-submit" class="btn btn-default" data-dismiss="modal" disabled>$_("Submit")</button> + <button type="button" id="batdel-cancel" class="btn btn-default" data-dismiss="modal">$_("Cancel")</button> + </div> + </div> + </div> +</div> + +<!-- <div id="batDelDialog" class="window modal-content"> <div class="del-option"> <input type="radio" name="batDelType" value="counts_ago" checked>$_("Preserve the latest") <input type="text" class=""> $_("backups") </div> <div class="del-option"> <input type="radio" name="batDelType" value="days_ago">$_("Preserve the latest") <input type="text" class="" disabled> $_("days of backups") </div> -</div> +</div> --> <!-- SEP Configuration Modal - Add Subscription --> <div class="modal fade host-modal" id="subscriptionAdd" tabindex="-1" role="dialog" labelledby="hostsModalLabel" aria-hidden="true"> @@ -342,20 +379,25 @@ Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA <label for="usergroup-textbox">$_("Group")</label> <input type="text" class="form-control inputbox" id="usergroup-textbox" name="userGroup" disabled /> <div class="checkbox"> - <label> - <input type="checkbox" class="enable-combobox" id="enableEditGroup"> $_("Use Other") - </label> + <input type="checkbox" class="enable-combobox wok-checkbox" id="enableEditGroup" /> + <label for="enableEditGroup">$_("Use Other")</label> </div> </div> <div class="form-group"> <label>$_("Profile")</label> <div id="radio-buttons"> <label class="radio-inline"> - <input type="radio" name="userProfile" id="kimchiuser" value="kimchiuser" > $_("Kimchi User")</label> + <input type="radio" name="userProfile" class="wok-radio" id="kimchiuser" value="kimchiuser"/> + <label for="kimchiuser">$_("Kimchi User")</label> + </label> <label class="radio-inline"> - <input type="radio" name="userProfile" id="virtuser" value="virtuser" > $_("Virt User")</label> + <input type="radio" name="userProfile" class="wok-radio" id="virtuser" value="virtuser"/> + <label for="virtuser">$_("Virt User")</label> + </label> <label class="radio-inline"> - <input type="radio" name="userProfile" id="admin" value="admin" > $_("Administrator")</label> + <input type="radio" name="userProfile" class="wok-radio" id="admin" value="admin" /> + <label for="admin">$_("Administrator")</label> + </label> </div> </div> </form> @@ -430,10 +472,12 @@ Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA </li> </script> <script id="userItem" type="text/html"> + <li class="content-body body"> <span class="column-username" data-type="name">{userName}</span><!-- --><span class="column-usergroup" data-type="group">{userGroup}</span><!-- --><span class="column-userprofile" data-type="profile">{userProfile}</span><!-- --><span class="column-detach btn btn-link detach"><i class="fa fa-trash-o"></i></span> + </li> </script> <script id="subscItem" type="text/html"> <li class="body"> -- 1.9.3