cwinfo/powerdns-admin
5
0
Fork 0
mirror of https://github.com/cwinfo/powerdns-admin.git synced 2024-11-08 22:50:26 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #121 from jallakim/pretty-history

Browse Source 
Pretty history details
This commit is contained in:
Khanh Ngo 2016-08-23 10:31:53 +07:00 committed by GitHub
commit e014767802
4 changed files with 218 additions and 177 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

50
app/static/custom/css/custom.css
View File

@ -1,16 +1,34 @@
.length-break { .length-break {
word-break: break-all !important; word-break: break-all !important;
} }
table td { table td {
font-family:'Roboto Mono' !important; font-family:'Roboto Mono' !important;
} }
/*Fit default macbook screen*/ /*Fit default macbook screen*/
.small-box .icon { .small-box .icon {
font-size: 70px !important; font-size: 70px !important;
} }
.btn { .btn {
padding: 5px 4px !important; padding: 5px 4px !important;
} }
/* Pretty JSON */
.json-pre {
background-color: ghostwhite;
border: 1px solid silver;
padding: 10px 20px;
margin: 20px;
}
.json-key {
color: brown;
}
.json-value {
color: navy;
}
.json-string {
color: olive;
}

331
app/static/custom/js/custom.js
View File

@ -1,153 +1,178 @@
function applyChanges(data, url, showResult, refreshPage) { function applyChanges(data, url, showResult, refreshPage) {
var success = false; var success = false;
$.ajax({ $.ajax({
type : "POST", type : "POST",
url : url, url : url,
data : JSON.stringify(data),// now data come in this function data : JSON.stringify(data),// now data come in this function
contentType : "application/json; charset=utf-8", contentType : "application/json; charset=utf-8",
crossDomain : true, crossDomain : true,
dataType : "json", dataType : "json",
success : function(data, status, jqXHR) { success : function(data, status, jqXHR) {
console.log("Applied changes successfully.") console.log("Applied changes successfully.")
if (showResult) { if (showResult) {
var modal = $("#modal_success"); var modal = $("#modal_success");
modal.find('.modal-body p').text("Applied changes successfully"); modal.find('.modal-body p').text("Applied changes successfully");
modal.modal('show'); modal.modal('show');
} }
if (refreshPage) { if (refreshPage) {
location.reload(true); location.reload(true);
} }
}, },
error : function(jqXHR, status) { error : function(jqXHR, status) {
console.log(jqXHR); console.log(jqXHR);
var modal = $("#modal_error"); var modal = $("#modal_error");
modal.find('.modal-body p').text(jqXHR["responseText"]); modal.find('.modal-body p').text(jqXHR["responseText"]);
modal.modal('show'); modal.modal('show');
} }
}); });
}
}
function getTableData(table) {
function getTableData(table) { var rData = []
var rData = []
// reformat - pretty format
// reformat - pretty format var records = []
var records = [] table.rows().every(function() {
table.rows().every(function() { var r = this.data();
var r = this.data(); var record = {}
var record = {} record["record_name"] = r[0].trim();
record["record_name"] = r[0].trim(); record["record_type"] = r[1].trim();
record["record_type"] = r[1].trim(); record["record_status"] = r[2].trim();
record["record_status"] = r[2].trim(); record["record_ttl"] = r[3].trim();
record["record_ttl"] = r[3].trim(); record["record_data"] = r[4].trim();
record["record_data"] = r[4].trim(); records.push(record);
records.push(record); });
}); return records
return records }
}
function saveRow(oTable, nRow) {
function saveRow(oTable, nRow) {
var jqInputs = $(oTable.row(nRow).node()).find("input");
var jqInputs = $(oTable.row(nRow).node()).find("input"); var jqSelect = $(oTable.row(nRow).node()).find("select");
var jqSelect = $(oTable.row(nRow).node()).find("select");
if (jqSelect[1].value == 'false') {
if (jqSelect[1].value == 'false') { status = 'Active';
status = 'Active'; } else {
} else { status = 'Disabled';
status = 'Disabled'; }
}
oTable.cell(nRow,0).data(jqInputs[0].value);
oTable.cell(nRow,0).data(jqInputs[0].value); oTable.cell(nRow,1).data(jqSelect[0].value);
oTable.cell(nRow,1).data(jqSelect[0].value); oTable.cell(nRow,2).data(status);
oTable.cell(nRow,2).data(status); oTable.cell(nRow,3).data(jqSelect[2].value);
oTable.cell(nRow,3).data(jqSelect[2].value); oTable.cell(nRow,4).data(jqInputs[1].value);
oTable.cell(nRow,4).data(jqInputs[1].value);
var record = jqInputs[0].value;
var record = jqInputs[0].value; var button_edit = "<button type=\"button\" class=\"btn btn-flat btn-warning button_edit\" id=\"" + record + "\">Edit&nbsp;<i class=\"fa fa-edit\"></i></button>"
var button_edit = "<button type=\"button\" class=\"btn btn-flat btn-warning button_edit\" id=\"" + record + "\">Edit&nbsp;<i class=\"fa fa-edit\"></i></button>" var button_delete = "<button type=\"button\" class=\"btn btn-flat btn-danger button_delete\" id=\"" + record + "\">Delete&nbsp;<i class=\"fa fa-trash\"></i></button>"
var button_delete = "<button type=\"button\" class=\"btn btn-flat btn-danger button_delete\" id=\"" + record + "\">Delete&nbsp;<i class=\"fa fa-trash\"></i></button>"
oTable.cell(nRow,5).data(button_edit);
oTable.cell(nRow,5).data(button_edit); oTable.cell(nRow,6).data(button_delete);
oTable.cell(nRow,6).data(button_delete);
oTable.draw();
oTable.draw(); }
}
function restoreRow(oTable, nRow) {
function restoreRow(oTable, nRow) { var aData = oTable.row(nRow).data();
var aData = oTable.row(nRow).data(); var jqTds = $('>td', nRow);
var jqTds = $('>td', nRow); oTable.row(nRow).data(aData);
oTable.row(nRow).data(aData); oTable.draw();
oTable.draw(); }
}
function editRow(oTable, nRow) {
function editRow(oTable, nRow) { var aData = oTable.row(nRow).data();
var aData = oTable.row(nRow).data(); var jqTds = oTable.cells(nRow,'').nodes();
var jqTds = oTable.cells(nRow,'').nodes(); var record_types = "";
var record_types = ""; for(var i = 0; i < records_allow_edit.length; i++) {
for(var i = 0; i < records_allow_edit.length; i++) { var record_type = records_allow_edit[i];
var record_type = records_allow_edit[i]; record_types += "<option value=\"" + record_type + "\">" + record_type + "</option>";
record_types += "<option value=\"" + record_type + "\">" + record_type + "</option>"; }
} jqTds[0].innerHTML = '<input type="text" id="edit-row-focus" class="form-control input-small" value="' + aData[0] + '">';
jqTds[0].innerHTML = '<input type="text" id="edit-row-focus" class="form-control input-small" value="' + aData[0] + '">'; jqTds[1].innerHTML = '<select class="form-control" id="record_type" name="record_type" value="' + aData[1] + '"' + '>' + record_types + '</select>';
jqTds[1].innerHTML = '<select class="form-control" id="record_type" name="record_type" value="' + aData[1] + '"' + '>' + record_types + '</select>'; jqTds[2].innerHTML = '<select class="form-control" id="record_status" name="record_status" value="' + aData[2] + '"' + '><option value="false">Active</option><option value="true">Disabled</option></select>';
jqTds[2].innerHTML = '<select class="form-control" id="record_status" name="record_status" value="' + aData[2] + '"' + '><option value="false">Active</option><option value="true">Disabled</option></select>'; jqTds[3].innerHTML = '<select class="form-control" id="record_ttl" name="record_ttl" value="' + aData[3] + '"' + '><option value="60">1 minute</option><option value="300">5 minutes</option><option value="1800">30 minutes</option><option value="3600">60 minutes</option><option value="86400">24 hours</option></select>';
jqTds[3].innerHTML = '<select class="form-control" id="record_ttl" name="record_ttl" value="' + aData[3] + '"' + '><option value="60">1 minute</option><option value="300">5 minutes</option><option value="1800">30 minutes</option><option value="3600">60 minutes</option><option value="86400">24 hours</option></select>'; jqTds[4].innerHTML = '<input type="text" style="display:table-cell; width:100% !important" id="current_edit_record_data" name="current_edit_record_data" class="form-control input-small advance-data" value="' + aData[4].replace(/\"/g,"&quot;") + '">';
jqTds[4].innerHTML = '<input type="text" style="display:table-cell; width:100% !important" id="current_edit_record_data" name="current_edit_record_data" class="form-control input-small advance-data" value="' + aData[4].replace(/\"/g,"&quot;") + '">'; jqTds[5].innerHTML = '<button type="button" class="btn btn-flat btn-primary button_save">Save</button>';
jqTds[5].innerHTML = '<button type="button" class="btn btn-flat btn-primary button_save">Save</button>'; jqTds[6].innerHTML = '<button type="button" class="btn btn-flat btn-primary button_cancel">Cancel</button>';
jqTds[6].innerHTML = '<button type="button" class="btn btn-flat btn-primary button_cancel">Cancel</button>';
// set current value of dropdows column
// set current value of dropdows column if (aData[2] == 'Active'){
if (aData[2] == 'Active'){ isDisabled = 'false';
isDisabled = 'false'; }
} else {
else { isDisabled = 'true';
isDisabled = 'true'; }
}
SelectElement('record_type', aData[1]);
SelectElement('record_type', aData[1]); SelectElement('record_status', isDisabled);
SelectElement('record_status', isDisabled); SelectElement('record_ttl', aData[3]);
SelectElement('record_ttl', aData[3]); }
}
function SelectElement(elementID, valueToSelect)
function SelectElement(elementID, valueToSelect) {
{ var element = document.getElementById(elementID);
var element = document.getElementById(elementID); element.value = valueToSelect;
element.value = valueToSelect; }
}
function getdnssec(url){
function getdnssec(url){
$.getJSON(url, function(data) {
$.getJSON(url, function(data) { var modal = $("#modal_dnssec_info");
var modal = $("#modal_dnssec_info");
if (data['status'] == 'error'){
if (data['status'] == 'error'){ modal.find('.modal-body p').text(data['msg']);
modal.find('.modal-body p').text(data['msg']); }
} else {
else { dnssec_msg = '';
dnssec_msg = ''; var dnssec = data['dnssec'];
var dnssec = data['dnssec']; for (var i = 0; i < dnssec.length; i++) {
for (var i = 0; i < dnssec.length; i++) { if (dnssec[i]['active']){
if (dnssec[i]['active']){ dnssec_msg += '<form>'+
dnssec_msg += '<form>'+ '<h3><strong>'+dnssec[i]['keytype']+'</strong></h3>'+
'<h3><strong>'+dnssec[i]['keytype']+'</strong></h3>'+ '<strong>DNSKEY</strong>'+
'<strong>DNSKEY</strong>'+ '<input class="form-control" autocomplete="off" type="text" readonly="true" value="'+dnssec[i]['dnskey']+'">'+
'<input class="form-control" autocomplete="off" type="text" readonly="true" value="'+dnssec[i]['dnskey']+'">'+ '</form>'+
'</form>'+ '<br/>';
'<br/>'; if(dnssec[i]['ds']){
if(dnssec[i]['ds']){ var dsList = dnssec[i]['ds'];
var dsList = dnssec[i]['ds']; dnssec_msg += '<strong>DS</strong>';
dnssec_msg += '<strong>DS</strong>'; for (var j = 0; j < dsList.length; j++){
for (var j = 0; j < dsList.length; j++){ dnssec_msg += '<input class="form-control" autocomplete="off" type="text" readonly="true" value="'+dsList[j]+'">';
dnssec_msg += '<input class="form-control" autocomplete="off" type="text" readonly="true" value="'+dsList[j]+'">'; }
} }
} dnssec_msg += '</form>';
dnssec_msg += '</form>'; }
} }
} modal.find('.modal-body p').html(dnssec_msg);
modal.find('.modal-body p').html(dnssec_msg); }
} modal.modal('show');
modal.modal('show'); });
}); }
}
// pretty JSON
json_library = {
replacer: function(match, pIndent, pKey, pVal, pEnd) {
var key = '<span class=json-key>';
var val = '<span class=json-value>';
var str = '<span class=json-string>';
var r = pIndent || '';
if (pKey){
r = r + key + pKey.replace(/[": ]/g, '') + '</span>: ';
}
if (pVal){
r = r + (pVal[0] == '"' ? str : val) + pVal + '</span>';
}
return r + (pEnd || '');
},
prettyPrint: function(obj) {
obj = obj.replace(/u'/g, "\'").replace(/'/g, "\"").replace(/(False|None)/g, "\"$1\"");
var jsonData = JSON.parse(obj);
var jsonLine = /^( *)("[\w]+": )?("[^"]*"|[\w.+-]*)?([,[{])?$/mg;
return JSON.stringify(jsonData, null, 3)
.replace(/&/g, '&amp;').replace(/\\"/g, '&quot;')
.replace(/</g, '&lt;').replace(/>/g, '&gt;')
.replace(jsonLine, json_library.replacer);
}
};

10
app/templates/admin_history.html
View File

@ -42,8 +42,7 @@
<td>{{ history.msg }}</td> <td>{{ history.msg }}</td>
<td>{{ history.created_on }}</td> <td>{{ history.created_on }}</td>
<td width="6%"> <td width="6%">
<button type="button" class="btn btn-flat btn-primary history-info-button" value='{{ history.detail|replace("[]","None") }}'> <button type="button" class="btn btn-flat btn-primary history-info-button" value='{{ history.detail }}'>Info&nbsp;<i class="fa fa-info"></i>
Info&nbsp;<i class="fa fa-info"></i>
</button> </button>
</td> </td>
</tr> </tr>
@ -74,7 +73,7 @@
$(document.body).on('click', '.history-info-button', function() { $(document.body).on('click', '.history-info-button', function() {
var modal = $("#modal_history_info"); var modal = $("#modal_history_info");
var info = $(this).val(); var info = $(this).val();
modal.find('.modal-body p').text(info); $('#modal-code-content').html(json_library.prettyPrint(info));
modal.modal('show'); modal.modal('show');
}); });
</script> </script>
@ -97,8 +96,7 @@
<div class="modal-footer"> <div class="modal-footer">
<button type="button" class="btn btn-flat btn-default pull-left" <button type="button" class="btn btn-flat btn-default pull-left"
data-dismiss="modal">Close</button> data-dismiss="modal">Close</button>
<button type="button" class="btn btn-flat btn-danger" onclick="applyChanges('', $SCRIPT_ROOT + '/admin/history');location.reload();">Clear <button type="button" class="btn btn-flat btn-danger" onclick="applyChanges('', $SCRIPT_ROOT + '/admin/history');location.reload();">Clear History</button>
History</button>
</div> </div>
</div> </div>
<!-- /.modal-content --> <!-- /.modal-content -->
@ -116,7 +114,7 @@
<h4 class="modal-title">History Details</h4> <h4 class="modal-title">History Details</h4>
</div> </div>
<div class="modal-body"> <div class="modal-body">
<p></p> <pre><code id="modal-code-content"></code></pre>
</div> </div>
<div class="modal-footer"> <div class="modal-footer">
<button type="button" class="btn btn-flat btn-default pull-right" <button type="button" class="btn btn-flat btn-default pull-right"

4
app/templates/dashboard.html
View File

@ -235,7 +235,7 @@
$(document.body).on('click', '.history-info-button', function() { $(document.body).on('click', '.history-info-button', function() {
var modal = $("#modal_history_info"); var modal = $("#modal_history_info");
var info = $(this).val(); var info = $(this).val();
modal.find('.modal-body p').text(info); $('#modal-code-content').html(json_library.prettyPrint(info));
modal.modal('show'); modal.modal('show');
}); });
$(document.body).on("click", ".button_dnssec", function() { $(document.body).on("click", ".button_dnssec", function() {
@ -256,7 +256,7 @@
<h4 class="modal-title">History Details</h4> <h4 class="modal-title">History Details</h4>
</div> </div>
<div class="modal-body"> <div class="modal-body">
<p></p> <pre><code id="modal-code-content"></code></pre>
</div> </div>
<div class="modal-footer"> <div class="modal-footer">
<button type="button" class="btn btn-flat btn-default pull-right" <button type="button" class="btn btn-flat btn-default pull-right"