[Kimchi-devel] [PATCH 1/8] Changing Collapse from Admin Screen to Bootstrap Accodion
sguimaraes943 at gmail.com
sguimaraes943 at gmail.com
Fri Nov 27 19:47:50 UTC 2015
From: Andre Teodoro <andreteodoro.work at gmail.com>
Signed-off-by: Andre Teodoro <andreteodoro.work at gmail.com>
Signed-off-by: samhenri <samuel.guimaraes at eldorado.org.br>
---
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
More information about the Kimchi-devel
mailing list