[Kimchi-devel] [PATCH 3/8] Applying new ui at Administration tab
sguimaraes943 at gmail.com
sguimaraes943 at gmail.com
Fri Nov 27 19:47:52 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 | 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
- at import "modules/administration";
\ No newline at end of file
+ at 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
More information about the Kimchi-devel
mailing list